Web技术基础实验报告模板.docVIP

信息学院实验报告 专　业： 软件工程　 　 班　级： 　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. 表格动态交互