网页设计实验指导.doc

《网页设计与制作实验指导书》 河南科技大学管理学院 目录 实验规则 3 实验报告要求 4 基本实验方法 4 实验环境 4 实验一 Dreamweaver8基本操作、站点管理 5 实验二 网页的定位技术以及制作层动画 7 实验三 网页编辑与超链接 13 实验四 层叠样式、模板和库 17 实验五 表单与表单域 23 实验名称：（如实验一 网页的定位技术） 班级名称：（如计031班） 学生学号： 学生姓名： 实验时间： 3、实验报告内容 见各具体实验项目的要求。 基本实验方法 本实验要求熟悉Dreamweaver8.0的工作环境和网页设计制作的相关知识。 实验环境 Dreamweaver8.0 实验一 Dreamweaver8基本操作、站点管理 一、实验目的和要求： 掌握Dreamweaver 8启动和退出的方法。 掌握本站点的设置方法。 掌握创建、打开和保存HTML文档的方法 二、实验内容： 网页编辑器的基本操作 用不同的方法启动和退出Dreamweaver 8。 用快捷键打开和关闭【插入】面板和【属性】面板。 将【代码】浮动面板组打开后，先移出，再移入浮动面板放置区，然后再将【设计】浮动面板组中的【CSS样式】组合到【代码】浮动面板组中。察看浮动面板组操作后的效果。 用快捷键关闭和打开浮动面板组，用鼠标折叠和展开各个浮动面板组，察看浮动面板组操作后的效果。 建立网站的基本操作 打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为myweb的文件夹。 把文件夹myweb设置为本地站点的根文件夹。然后建立名为image文件夹。 在本地计算机的当前盘根文件夹中，建立名为our site的子文件夹，并切换为本地站点的根文件夹。 文件管理基本操作 将ch12\material文件夹中的两个文件bg0004.gif和bg0093.gif及my rose中的文件rose.htm，分别复制到本地站点“我们的站点”的our site文件夹中。 在文件夹中our site中新建子文件夹image，并将our site中的文件bg0004.gif和bg0093.gif转移到image文件夹中。 请正确显示rose.htm网页。 制作简单网页 按下述要求制作网页exe12-1.htm，如图12-2所示。 页面的背景图片为ch12\material文件夹中的图片bg0015.jpg。 在合适的位置上插入ch12\material文件夹中的图片文件ex1.jpg。 在网页中输入文字：一件好的作品，如一阵清新的风，一曲温婉的歌，让人心旷神怡。一件好的作品，如一杯香醇的茶，一瓶陈年的酒，让人回味无穷... 将网页用exe12-1.htm为名保存在本地站点的文件夹our site中。 图12-2 简单网页exe12-1.htm 三、实验学时：3学时 实验二 网页的定位技术以及制作层动画 一、实验目的和要求： 掌握表格创建和编辑的方法 掌握布局表格和布局单元格的使用方法 掌握层的创建、编辑和应用的方法 掌握框架网页的创建、编辑和保存的方法 二、实验内容： 1．表格的创建、插入、删除、复制和移动等操作 （1）创建一个名为exe14-1.htm的网页文件，将其保存到My site 文件中。在页面上输入4行5列的表格，表格宽度为500像素，表格的边框为1像素，在表格中输入如表14-1所示的内容。并在表格上方增加标题“信息学院各班平均成绩”，标题格式设置为方正舒体、5号、粗体、#003366。 表14-1 各班平均成绩表 科目 数据原理 计算机组成实验 英语精读 电子商务 00级1班 73 85 77 79 01级1班 83 79 82 91 01级3班 90 80 85 92 （2）在表格“01级3班”前插入一行。内容为“01级2班、85、82、88、82”。在表格中“计算机组成实验”列插入一列。内容为“计算机组成、69、73、75、80”。 （3）将00级1班这一行移到表格的最后一行，删除“英语精读”这一列。 2．单元格的拆分、合并和格式化操作 （1）是表格中的数据全部居中；是整个表格在页面上居中。 （2）按不同年级将表格拆分成两个表格，将01级表格的“科目”一行复制到00级表格上方，使之成为00级表格的第一行，在00级表格上面加上1行标题“信息学院00级平均成绩表”，并删除00级表格的“科目”这一列。 （3）将01级表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单元格，内容改为“计算机组成和实验”、居中、黑体、5号。 （4）01级和00级两个表格分别套用系统预设的格式Simple3、Simple1。 3.导入外部数据和表格排序 （1）