web前端开发实验指导书答案

Web前端开发实验指导书

20XX年09月

目录

实验1 HTML基础与布局元素 (3)

实验2 表格与表单的应用 (6)

实验3 框架 (8)

实验4 CSS样式表基础 (12)

实验5 CSS样式布局 (16)

实验6 Dreamweaver制作网页 (19)

实验7 网站设计 (22)

实验8 JavaScript基础 (26)

实验9 JavaScript对象 (29)

实验10 DOM编程 (33)

实验11 JavaScript常用特效 (36)

3实验1 HTML 基础与布局元素

一、实验目的

1．

掌握使用HTML 的基本结构创建网页 2．

掌握使用行级和块级标签组织页面内容 3． 掌握使用图像标签实现图文并茂的页面

二、实验内容

使用HTML 基本元素设计基本网页

三、实验环境

（1） 使用的操作系统及版本。

Windows XP Professional

（2） 使用的编译系统及版本。

Dreamweaver CS6

四、实验步骤及说明

任务1基本块级元素

使用HTML 编辑工具，编写HTML 代码，实现如图所示的页面效果

任务2用于布局的块级元素

4编写HTML 代码，实现如图所示的页面效果

任务3行级元素

编写HTML 代码，实现如图所示的页面效果。

任务4超链接

编写HTML 代码

Web服务技术

实验指导

实验0、JAX-WS概述 .................................................................................................................... 3 实验1、使用JAXP进行XML的转换 ........................................................................................... 6 实验2、使用SAX进行XML的解析 ........................................................................................... 11 实验3、使用SOAPUI查看SOAP消息 ..................................................................................... 15 实验4、使用JAX-WS开发WEB服务服务器端 .......................

Web应用开发技术

实验指导书

实验平台：Visual Studio 2005 + SQL Server 2000

运行环境：Windows XP + Microsoft Internet Explorer 8

实验方法：

1. 下载老师所给的网站实例，

2. 按照老师所给的步骤一步一步地来完成上机实验，不要直接复制老师所给的网站实例； 3. 在需要写代码的地方，不要直接复制老师给的代码，要按照老师的代码一个字母一个字

母的编写，体会VS2005编辑器的代码编写方法。因为：自己所写的每一个字母都是经过大脑思考的，如有不明白，可以向老师或者同学求教；如果自己直接复制一大块代码来看，细节之处是体会不到的。

4. 老师给的网站实例只是一个框架，在充分理解老师给的网站实例运行逻辑后，然后在其

基础上加入自己的代码，使得网站的功能更加完善，页面更加美观。

参考网址：

1. W3School在线教程：http://www.w3school.com.cn/

2. 微软MSDN库：http://msdn.microsoft.com/library/ms123401

实验一 客户端脚本编程

一、 实验目的

通过设计一个个人主页网站，理解CSS+DIV的页面布

长春大学

20 15 —2016学年第二学期Web前端开发技术课程

实验报告

学院：计算机科学技术专业：软件工程

班级：软件14402

学号：041440210

姓名：王悦

任课教师：车娜

精选文档

实验五 HTML表单

一、实验目的

1.理解表单的构成，可以快速创建表单。

2.掌握表单相关标记，能够创建具有相应功能的表单控件。

3.掌握表单样式的控制，能够美化表单界面。

二、内容及要求

使用表单控件，并通过CSS控制表单样式制作一个学员档案，其效果如图6-1所示，满足以下要求：

1.学员档案上面的标题和下面的表单两部分构成。

2.标题部分通过标题标记定义。

3.表单部分通过相关的表单控件进行定义

图6-1 “学员档案”CSS样式效果

三、实验原理

表单：是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。表单由表单控件、提示信息和表单域构成。

创建表单：标记被用于创建一个表单，action、method、name 为表单标记

web实验报告

长 春 大 学

20 15 — 2016学年第

课程

实 验 报 告

学 院： 计算机科学技术

专 业： 软件工程

班 级： 软件15402

学 号：姓 名：

任课教师： 车 娜

web实验报告

实验三 CSS网页布局

一、实验目的

1.掌握CSS盒子模型的概念，能够灵活运用盒子模型布局页面；

2.掌握盒子模型相关属性，能够使用它们熟练地控制网页元素；

3.理解块元素与行内元素的区别，能够对它们进行转换。

二、内容及要求

运用盒子模型的相关属性实现网页弹出框效果，满足如下要求：

1.网页弹出框由上面的标题和下面的宣传内容两部分组成；

2.标题通过h2定义；

3.在段落文本中内容部分由h3和p标记进行定义；

4.应用<div>标记、<span>标记、边框属性、背景属性等设计页面结构效果。

三、实验原理

盒子模型：把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

<div>标记：是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。

边框属性：使用b

web实验报告

长 春 大 学

20 15 — 2016学年第

课程

实 验 报 告

学 院： 计算机科学技术

专 业： 软件工程

班 级： 软件15402

学 号：姓 名：

任课教师： 车 娜

web实验报告

实验三 CSS网页布局

一、实验目的

1.掌握CSS盒子模型的概念，能够灵活运用盒子模型布局页面；

2.掌握盒子模型相关属性，能够使用它们熟练地控制网页元素；

3.理解块元素与行内元素的区别，能够对它们进行转换。

二、内容及要求

运用盒子模型的相关属性实现网页弹出框效果，满足如下要求：

1.网页弹出框由上面的标题和下面的宣传内容两部分组成；

2.标题通过h2定义；

3.在段落文本中内容部分由h3和p标记进行定义；

4.应用<div>标记、<span>标记、边框属性、背景属性等设计页面结构效果。

三、实验原理

盒子模型：把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

<div>标记：是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。

边框属性：使用b

《Java Web编程技术》

实 验 指 导 书

2010年3月

目 录

实验一 简单的Servlet与JSP .................................................................................................................. 1 实验二 HTTP请求对象 ........................................................................................................................... 3 实验三 HTTP响应对象 ........................................................................................................................... 7 实验四 Servlet容器模型 ...............................

《Java Web编程技术》

实 验 指 导 书

2010年3月

目 录

实验一 简单的Servlet与JSP .................................................................................................................. 1 实验二 HTTP请求对象 ........................................................................................................................... 3 实验三 HTTP响应对象 ........................................................................................................................... 7 实验四 Servlet容器模型 ..............................

最近开始着手网站的改版，因为是团队协作，所有需要注意很多地方，也为了让我们的代码更加规范特收集了一些Web前端开发规范

规范目的

为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改.

基本准则

符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.

文件规范

1.html,css,js,images文件均归档至<系统开发规范>约定的目录中;

2.html文件命名:英文命名,后缀.htm.同时将对应界面稿放于同目录中,若界面稿命名为中文,请重命名与html文件同名,以方便后端添加功能时查找对应页面;

3.css文件命名:英文命名,后缀.css.共用base.css,首页

index.css,其他页面依实际模块需求命名.;

4.Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.

html书写规范

1.文档类型声明及编码:统一为html5声明类型

Web程序设计实验指导书

实验学时：28 序号 实验名称 内容要求 实验 每组 实验 开出 学时 人数 属性 要求 1 综合 必做 1 综合 必做 1 综合 必做 1 综合 必做 1 综合 必做 1 综合 必做 1 综合 必做 1 综合 必做 1 实验一JSP实验环境组建与JSP应用 JSP运行原理；JSP开发环境的搭配；创建第1个JSP程序并部署运行。 2 2 实验二 JSP语法 JSP脚本元素；掌握JSP注释方式；掌握JSP指令元素；掌握JSP动作元素的相关知识。 2 3 实验三 JSP内置对象 内置对象的概念；请求对象request；响应对象response；会话对象sesion；多客户端共享对象aplication；页面对象page和页面上下文对象pageContext； 输出对象out、配置对象config、异常对象exception。 4 4 实验四JavaBean组件技术 JavaBean属性和作用域 2 5 实验五Servlet核心技术 获取运行环境信息的方法；Servlet会话设置和异常设置；Servlet过滤器和监听器的工作原理；Servlet过滤器和监听器的具体应用。 4 6 实验六JSP操作数据库核心技术 JDBC执