Web技术基础实验报告模板

信息学院实验报告

专 业： 姓 名：

软件工程 文海波

班 级： 学 号：

2013级2班 201312140204

实验1：基本网页设计

实验设备：

PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘 OS： Windows7

应用软件：IE10.0、Dreamweaver CS5.5、Notepad

实验目的：

1. 掌握常用HTML标记的使用； 2. 掌握表格页面布局；

3. 了解网站设计的基本步骤。

实验内容及要求：

1. 表格布局，居中,边框无；width:800pt；表格分4行，2列；第1、2、4行合并单元格为1列。第1行height:100px，第4行height:24px；第3行第1列width:172px，height440px；

2. 第1行内显示标题图片（背景），标题文字，如：Web技术基础学习；第2、4行前景色为淡蓝，第2行设计导航菜单，第4行设计版权信息；第3行第1列背景为浅蓝色，嵌套一个表格，内容为二级导航菜单，每一行放一个链接，链接到实验1的其它网页；第3行第2列放各网页的具体内容；

3. 第3行第1列中的列表项：文本格式化标记；超链接标记；图像标记；多媒体标记；列表标记；表格标记；表单标记；

4. 设计其它网页，结构与前一网页一样，只有第3行第2列的内容不同，放网站其它网页的内容，参照例程3－9中的内容。

实验结果：

（运行结果抓图）

实验思考题：

如何设置才能让页面在不同大小的显示器中都能正确显示？

信息学院实验报告

专 业： 姓 名：

软件工程 文海波

班 级： 学 号：

2013级2班 201312140204

实验2：CSS应用

实验设备：

PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘 OS： Windows7

应用软件：IE10.0、Dreamweaver CS5.5、Notepad

实验目的：

1. 掌握常用CSS样式属性及其使用； 2. 选择器的使用；

3. 掌握div+css页面布局； 4. 了解网页的盒模型和流布局。

实验内容及要求：

1. 用6个div+外部css设计T字形布局，最外部容器div宽度800px，高度自动调整；内部嵌套5个div，上部banner部分高100px；其下为导航菜单，高度约32px；中间左侧为二级导航部分宽约180px；右侧为页面主要内容，宽度为剩余部分；下部版权说明高度32px。上部banner部分加背景图像和标题1文本；导航菜单链接各个实验；二级导航部分为3个链接：格式化网页、文本格式化、表格格式化，分别链接到下面的3个页面；以此布局在中间右侧中添加适当的内容，分别设计下面的3个网页。

2. 用内部CSS格式化网页。设置网页的背景图像、位置左上、不重复、网页滚动时固定。在主要内容部分添加部分文字说明作为主页。

3. 格式化一段文字的字体：宋体、大小：12pt、颜色：#0011aa、左对齐、首行缩进2em、行高1.6倍，设置其中一部分为斜体、粗体、下划线。

4. 格式化表格，设置表格上下边框为双线、蓝色、2mm，左右边框为点线、红色、1mm。单元格补白上下为2mm，左右为1mm。单元格间距为4pt，边框为实线，黑色，1像素宽，合并重合的边框。

实验结果：

（运行结果抓图）

实验思考题：

div+css布局和使用table对页面进行布局有什么不同？

信息学院实验报告

专 业： 姓 名：

软件工程 文海波

班 级： 学 号：

2013级2班 201312140204

实验3：JavaScript编程

实验设备：

PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘 OS： Windows7

应用软件：IE10.0、Dreamweaver CS5.5、Notepad

实验目的：

1. 掌握JavaScript的基本语法； 2. 掌握DOM对象的使用；

3. 会应用所学JavaScript知识进行客户端的编程。

实验内容及要求：

1. 图像交互，在网页中放一幅图像，鼠标移到上面时显示另一幅，鼠标移开时显示原来那一幅。图像下方放两个按钮：“增加”和“缩小”，点击“增加”按钮图像宽度与高度相应增加，点击“缩小”按钮图像宽度与高度相应减小。

2. 网页秒表，打开网页时用文本显示“当前日期：****年**月**日”，文本下面设计一只读文本框，标签为“当前时间：”，在文本框中显示当前的精确到秒的时间。文本框下面为两个按钮，“开始计时”和“结束计时”，点击“开始计时”按钮，文本框中以秒计时，点击“结束计时”，停止计时。

3. 表格动态交互编辑。在页面中设计3个文本框，添加相应的标签，用户分别输入行号、列号、单元格中的内容。再设计一个按钮和三行三列的表格，合理布局，并在表格中添加适当的内容。编写JavaScript程序，当点击按钮时，根据用户输入的行号、列号、内容修改表格中相应单元格的内容。对用户输入的行号、列号进行有效性判断。

实验结果：

（运行结果抓图）

实验思考题：

DOM定位的有哪几种方式是什么？

信息学院实验报告

专 业： 姓 名：

软件工程 文海波

班 级： 学 号：

2013级2班 201312140204

实验4：表单验证

实验设备：

PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘 OS： Windows7

应用软件：IE10.0、Dreamweaver CS5.5、Notepad

实验目的：

1. 掌握正则表达式的语法；

2. 使用正则表达式进行基本的用户输入验证

实验内容及要求：

1. 设计一个包括用户名、密码、密码确认、Email、身份证、电话号码、提交和重置按钮的表单，各输入控件前要相应的标签，除身份证外，文本输入框后有*号。

2. 在各输入控件失去焦点后进行验证输入内容的合法性，用户名、密码必须为6－18个字符数字下划线，密码确认必须与密码一致，Email、身份证必须符合常规要求，如有错误在控件后面用红色字体显示相应的提示文本。

3. 提交表单时进行验证，用户名、密码、密码确认、Email必须输入内容，且所有输入内容通过合法验证。

实验结果：

（运行结果抓图）

实验思考题：

在表单各输入控件失去焦点时进行验证后，是否可以不在提交表单时再进行验证？

信息学院实验报告

专 业： 姓 名：

软件工程 文海波

班 级： 学 号：

2013级2班 201312140204

实验5：XML文档操作

实验设备：

PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘 OS： Windows7

应用软件：IE10.0、Dreamweaver CS5.5、Notepad

实验目的：

1. 掌握CSS格式化XML的方法； 2. 掌握XSLT的基本用法； 3. 掌握XML DOM的基本用法

实验内容及要求：

1. 编写一个3级嵌套的XML文档，如班级、学生、各类学生信息字段。 2. 用CSS格式化XML文档，在网页中用表格显示XML文档中的信息。 3. 用XSLT转化XML文档，在网页中用表格显示XML文档中的信息。

4. 用XML DOM解析XML文档，在网页中用表格显示XML文档中的信息。

实验结果：

（运行结果抓图）

实验思考题：

1. 比较CSS格式化XML与格式化HTML有何异同？ 2. 比较HTML DOM与XML DOM有何异同？

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库Web技术基础实验报告模板在线全文阅读。