搜索
《网页设计与制作实验指导书》河南科技大学管理学院目录实验规则........................................................................................................................3实验报告要求................................................................................................................4基本实验方法................................................................................................................4实验环境........................................................................................................................4实验一Dreamweaver8基本操作、站点管理..........................................................5实验二网页的定位技术以及制作层动画................................................................7实验三网页编辑与超链接........................................................................................13实验四层叠样式、模板和库....................................................................................17实验五表单与表单域................................................................................................23实验规则为了顺利完成实验教学任务，确保人身设备安全，培养严谨、踏实、实事求是的科学作风和爱护国家财产的优良品质，特制定以下实验规则：1、实验纪律（1）在实验室不得做和实验无关的事情。（2）遵守纪律，不迟到，不旷课。（3）不能拆卸硬件，更不能拿走实验设备或仪器。（4）保持实验室安静、整洁，爱护公物。2、实验过程（1）预习实验内容。（2）上机操作。记录实验中遇到的问题，主要是错误信息和错误原因。（3）检查操作结果是否正确。（4）根据实验过程的记录书写实验报告。实验报告要求1、报告用纸采用统一的河南科技大学实验报告用纸，或按照指导老师指定的统一格式打印。2、实验报告封面内容实验名称：（如实验一网页的定位技术）班级名称：（如计031班）学生学号：学生姓名：实验时间：3、实验报告内容见各具体实验项目的要求。基本实验方法本实验要求熟悉Dreamweaver8.0的工作环境和网页设计制作的相关知识。实验环境Dreamweaver8.0实验一Dreamweaver8基本操作、站点管理一、实验目的和要求：1.掌握Dreamweaver8启动和退出的方法。2.掌握本站点的设置方法。3.掌握创建、打开和保存HTML文档的方法二、实验内容：1.网页编辑器的基本操作(1)用不同的方法启动和退出Dreamweaver8。(2)用快捷键打开和关闭【插入】面板和【属性】面板。(3)将【代码】浮动面板组打开后，先移出，再移入浮动面板放置区，然后再将【设计】浮动面板组中的【CSS样式】组合到【代码】浮动面板组中。察看浮动面板组操作后的效果。(4)用快捷键关闭和打开浮动面板组，用鼠标折叠和展开各个浮动面板组，察看浮动面板组操作后的效果。2.建立网站的基本操作(1)打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为myweb的文件夹。(2)把文件夹myweb设置为本地站点的根文件夹。然后建立名为image文件夹。(3)在本地计算机的当前盘根文件夹中，建立名为oursite的子文件夹，并切换为本地站点的根文件夹。3.文件管理基本操作(1)将ch12\material文件夹中的两个文件bg0004.gif和bg0093.gif及myrose中的文件rose.htm，分别复制到本地站点“我们的站点”的oursite文件夹中。(2)在文件夹中oursite中新建子文件夹image，并将oursite中的文件bg0004.gif和bg0093.gif转移到image文件夹中。(3)请正确显示rose.htm网页。4.制作简单网页按下述要求制作网页exe12-1.htm，如图12-2所示。(1)页面的背景图片为ch12\material文件夹中的图片bg0015.jpg。(2)在合适的位置上插入ch12\material文件夹中的图片文件ex1.jpg。(3)在网页中输入文字：一件好的作品，如一阵清新的风，一曲温婉的歌，让人心旷神怡。一件好的作品，如一杯香醇的茶，一瓶陈年的酒，让人回味无穷...(4)将网页用exe12-1.htm为名保存在本地站点的文件夹oursite中。图12-2简单网页exe12-1.htm三、实验学时：3学时实验二网页的定位技术以及制作层动画一、实验目的和要求：1.掌握表格创建和编辑的方法2.掌握布局表格和布局单元格的使用方法3.掌握层的创建、编辑和应用的方法4.掌握框架网页的创建、编辑和保存的方法二、实验内容：1．表格的创建、插入、删除、复制和移动等操作（1）创建一个名为exe14-1.htm的网页文件，将其保存到Mysite文件中。在页面上输入4行5列的表格，表格宽度为500像素，表格的边框为1像素，在表格中输入如表14-1所示的内容。并在表格上方增加标题“信息学院各班平均成绩”，标题格式设置为方正舒体、5号、粗体、#003366。表14-1各班平均成绩表科目数据原理计算机组成实验英语精读电子商务00级1班7385777901级1班8379829101级3班90808592（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）将Excel文件value.xls打开，另存为Mysite\value.csv文件，数据的分隔符是逗号。（2）新建名为exe14-2.htm的网页文件，将其保存到Mlysite文件中。背景图片为Mysite\jpg\bg0015.jpg。导入数据文件value.csv.（3）按表格的“合计值”列降序排序，合并表格标题所在的单元格，并使标题居中。（4）表格【边框】为3；【边框颜色】为#FF0000。4.布局表格和布局单元格的应用（1）创建一个名为exe14-3.htm的网页文件，将其保存到Mysite文件夹。网页背景图片文件为Mysite\gif\bg0052.gif，用600*360像素的布局表格布局，布局表格中的3行5列布局单元格每个为120*120像素，如图14-5所示。图14-5页面布局表格示意（2）如图14-5所示，在布局单元个中分别设置布局单元个的颜色#CCCC99、#FF9900。（3）如图·4-5所示，在布局单元格中分别插入Mysite\jpg文件夹中的名为tu1.jpg、……..tu7.jpg的图片。（4）预览页面后，保存该文件。5.层的基本操作（1）创建议个名为exe14-4.htm的网页文件，将其保存到Mysite文件中。设置背景图片Mysite\gif\bg0052.gif。（2）在网页合适的位置上，分别创建两个名为source和shadow的层，层的尺寸为550*70像素，Z-index的值分别为2和1。（３）在层中输入文字“书－人生的伴侣，知识的源泉”，两个层中的文字颜色分别为红色和黑色，字体及大小自行定义。移动层，使两个层略微错开重叠，使文字带有阴影效果，如图14-6所示。图14-6两个层错开重叠（4）打开【层】浮动面板，选中【防止重叠】复选框，然后移动名为source的层，试比较改复选项与不选的区别。（5）分别完成激活层、选中层、改变层的大小、改变层的可见性的操作。（6）改变这两个层的叠放次序，使名为source的层成为shadow层的子层，观察改变后的结果，然后恢复原样。6.层与表格的综合练习（1）创建名为exe14-5.htm的网页文件，将其保存到Mysite文件夹中。设置背景图片为Mysite\jpg\bg0006.gif。在网页合适的位置上插入1行4列的表格。表格的各项参数为【宽】为360像素、【高】为30像素、【背景颜色】为#FFFFEE、【边框颜色】为#99CCCC、【边框】为2像素、【填充】为0、【间距】为0。（2）每个单元格中的内容分别为“现代生活”、“生活艺术”、“文化教育”、“科学技术”。（3）在网页合适的位置上插上4个层，层的大小为90*90像素，在每个层中插入一个4行1列的表格，表格的每个单元格的大小分别为90*22像素，【边框】为1像素、【背景颜色】为＃FFFFEE，如图14-7所示。图14-7由层和表格组成的下拉菜单（4）改变这4个层的叠放次序和改变层的可见性，观察结果后保存文件，（该文件在实验15中还会有用）。7．框架和框架集的创建、选者和保存（1）创建一个名为exe14-6.htm的网页文件，将其保存到Mysite文件中。用鼠标、菜单两种不同的方法创建【左侧和嵌套的顶部框架】和【顶部和嵌套的左侧框架】，试比较两种框架的不同之处。（2）删除上题中创建的框架，然后创建【顶部框架】，并把【顶部框架】改为【顶部和嵌套的左侧框架】，调整框架的大小。（3）分别用鼠标在框架面板中选中主框架（bottomFrame），选中左框架（leftFrame）插入顶部框架，将左框架分割成上（topFrame）下(leftFrame)两部分。（4）在主框架（mainFrame）中插入底部框架（bottomFrame），选中左框架（leftFrame）插入顶部框架，将左框架分割成上（topFrame）下(leftFrame)两部分。（５）将左框架（leftFrame）调整为与底部框架（bottomFrame）高度相同。（６）分别在框架面板中选中topFrame、topFrame1、mainFrame、leftFrame、bottomFrame５个框架，并给５个框架设置背景颜色＃ＡＡＦＦＦＦ、＃ＣＣＦＦＦＦ、＃ＣＣＦＦＣＣ、＃ＣＣＦＦＣＣ、＃ＣＣＦＦＦＦ。（７）用topFrame、topFrame1、mainFrame、bottomFrame、leftFrame为框架文件名和exe14-6.htm为框架集名保存框架文件到Mysite文件中。８.设置框架和框架集的属性和超链接（１）设置exe14-6.htm框架文件的框架集属性。各项参数分别为：【边框】为是、【边框颜色】为＃００ＣＣＦＦ、【边框宽度】为２像素、左边【列】为２００像素。（2）分