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

信息学院实验报告专业： 软件工程 班级：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列的内容不同，放网站其它网页的内容，参照例程39中的内容。实验结果：（运行结果抓图）实验思考题：如何设置才能让页面在不同大小的显示器中都能正确显示？信息学院实验报告专业： 软件工程 班级：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. 在各输入控件失去焦点后进行验证输入内容的合法性，用户名、密码必须为618个字符数字下划线，密码确认必须与密码一致，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有何异同？信息学院实验报告专业： 软件工程 班级：2013级2班姓名： 文海波 学号：201312140204实验6：HTML5应用实验设备：PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘OS： Windows7应用软件：IE10.0、Dreamweaver CS5.5、Notepad实验目的：1. 掌握新增的常用HTML5标记和属性；2. canvas标记的使用；3. video标记的使用。实验内容及要求：1. 使用HTML5的校验属性对用户输入的图书名称、图书ISBN、图书价格进行验证，图书名称必须填写；ISBN必须填写，格式为“3个数字-1个数字-3个数字-5个数字”；图书价格用number输入控件，最小值为20，最大值为150，间隔步长为5。使用HTML5的email、url输入控件输入作者邮箱、图书介绍网址；各输入控件使用placeholder属性给出提示信息。2. 使用HTML5的canvas标记，在网页中绘制曲线。3. 使用HTML5的video标记，在网页中播放视频，具有播放、暂停、停止等功能，并可以兼容IE、Firefox、Chrome等主流浏览器。实验结果：（运行结果抓图）实验思考题：1. 不使用JavaScript脚本语言可以用canvas标记绘图吗？2. 不使用JavaScript脚本可以用video标记播放视频吗？信息学院实验报告专业： 软件工程 班级：2013级2班姓名： 文海波 学号：201312140204实验7：DOM2事件处理实验设备：PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘OS： Windows7应用软件：IE10.0、Dreamweaver CS5.5、Notepad实验目的：1. 掌握IE的事件传播机制；2. 掌握DOM2标准的事件传播机制；3. 编写能够兼容IE和遵行DOM2标准的浏览器、处理事件传播的JavaScript程序； 实验内容及要求：1. 设计一个网页，包含标题3、一行两列的表格、横线和，标题内容为“DOM2事件阶段处理和传播控制”，表格第1个单元格中放一个显示文本为“按钮”的按钮，第2个单元格中放“单击我”文字,横线下的开始为空白，用于动态地显示事件处理函数的输出信息。给网页、表格、表格行、单元格、按钮分别添加点击事件处理程序，其中，按钮事件不能传播给表格和网页；表格中的事件不能传播给网页；单元格事件须冒泡到表格行、表格；表格行事件须冒泡到表格。事件处理函数在横线下的中显示事件当前的阶段和事件当前所在目标对象，每个事件处理函数显示一行。2. 设计一个网页，包含标题3、横线和另一个，标题内容为“DOM2事件模型中取消事件的默认行为”，第一个中放一个到临沂大学的链接，横线下的开始为空白，用于动态地显示事件处理函数的输出信息。给和添加点击事件处理程序，当捕获的点击事件后，提示“是否访问临沂大学主页由用户选择！”，的事件处理程序中显示提示对话框“确定要访问临沂大学主页吗？”，用户选择提示对话框的确定按钮时，取消事件的继续传播；用户选择提示对话框的取消按钮时，取消链接的默认行为，当事件冒泡到的事件处理程序时，在横线下的中显示“欢迎继续留在本网页”。实验结果：（运行结果抓图）实验思考题：IE和DOM2标准的事件传播各有何特点？信息学院实验报告专业： 软件工程 班级：2013级2班姓名： 文海波 学号：201312140204实验8：个人网站设计实验设备：PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘OS： Windows7应