网页设计与制作基础教程

《网页设计与制作基础教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《网页设计与制作实验指导书》河南科技大学经济与管理学院目录实验规则3实验报告要求4基本实验方法4实验环境4实验一Dreamweaver8基本操作、站点管理5实验二网页的定位技术以及制作层动画7实验三网页编辑与超链接13实验四层叠样式、模板和库17实验五表单与扩展管理器23实验六网页设计与制作24实验规则为了顺利完成实验教学任务，确保人身设备安全，培养严谨、踏实、实事求是的科学作风和爱护国家财产的优良品质，特制定以下实验规则：1、实验纪律（1）在实验室不得做和实验无关的事情。（2）遵守纪律，不迟到，不旷课。（3）不能拆卸硬件，更不能拿走实验设

2、备或仪器。（4）保持实验室安静、整洁，爱护公物。2、实验过程（1）预习实验内容。（2）上机操作。记录实验中遇到的问题，主要是错误信息和错误原因。（3）检查操作结果是否正确。（4）根据实验过程的记录书写实验报告。实验报告要求1、报告用纸采用统一的河南科技大学实验报告用纸，或按照指导老师指定的统一格式打印。2、实验报告封面内容实验名称：（如实验一网页的定位技术）班级名称：（如计031班）学生学号：学生姓名：实验时间：3、实验报告内容见各具体实验项目的要求。基本实验方法本实验要求熟悉Dreamweaver8.0的工作环境和网页设计制作的相关知识。

3、实验环境Dreamweaver8.0实验一Dreamweaver8基本操作、站点管理一、实验目的和要求：1.掌握Dreamweaver8启动和退出的方法。2.掌握本站点的设置方法。3.掌握创建、打开和保存HTML文档的方法二、实验内容：1.网页编辑器的基本操作(1)用不同的方法启动和退出Dreamweaver8。(2)用快捷键打开和关闭【插入】面板和【属性】面板。(3)将【代码】浮动面板组打开后，先移出，再移入浮动面板放置区，然后再将【设计】浮动面板组中的【CSS样式】组合到【代码】浮动面板组中。察看浮动面板组操作后的效果。(4)用快捷键关

4、闭和打开浮动面板组，用鼠标折叠和展开各个浮动面板组，察看浮动面板组操作后的效果。(5)启动DreamweaverMX后，打开、关闭标尺显示，设置标尺单位分别为厘米、英寸、像素；显示和隐藏网格，设置网格属性，【间隔】为10像素，【显示】为线，【颜色】为#CCCC99，选中【靠齐到网格】复选项。2.建立网站的基本操作(1)打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为myweb的文件夹。(2)把文件夹myweb设置为本地站点的根文件夹。然后建立名为image文件夹。(3)在本地计算机的当前盘根文件夹中，建立名为oursite的子文件夹

5、，并切换为本地站点的根文件夹。3.文件管理基本操作(1)将ch12material文件夹中的两个文件bg0004.gif和bg0093.gif及myrose中的文件rose.htm，分别复制到本地站点“我们的站点”的oursite文件夹中。(2)在文件夹中oursite中新建子文件夹image，并将oursite中的文件bg0004.gif和bg0093.gif转移到image文件夹中。(1)请正确显示rose.htm网页。1.制作简单网页按下述要求制作网页exe12-1.htm，如图12-2所示。(1)页面的背景图片为ch12mate

6、rial文件夹中的图片bg0015.jpg。(2)在合适的位置上插入ch12material文件夹中的图片文件ex1.jpg。(3)在网页中输入文字：一件好的作品，如一阵清新的风，一曲温婉的歌，让人心旷神怡。一件好的作品，如一杯香醇的茶，一瓶陈年的酒，让人回味无穷...(4)将网页用exe12-1.htm为名保存在本地站点的文件夹oursite中。图12-2简单网页exe12-1.htm三、实验学时：3学时实验二表格应用和框架一、实验目的和要求：1.掌握表格创建和编辑的方法2.掌握布局表格和布局单元格的使用方法3.掌握框架网页的创建、编辑

7、和保存的方法二、实验内容：1．表格的创建、插入、删除、复制和移动等操作（1）创建一个名为exe14-1.htm的网页文件，将其保存到Mysite文件中。在页面上输入4行5列的表格，表格宽度为500像素，表格的边框为1像素，在表格中输入如表所示的内容。并在表格上方增加标题“信息学院各班平均成绩”，标题格式设置为方正舒体、5号、粗体、#003366。表各班平均成绩表科目数据原理计算机组成实验英语精读电子商务00级1班7385777901级1班8379829101级3班90808592（2）在表格“01级3班”前插入一行。内容为“01级2班、85

8、、82、88、82”。在表格中“计算机组成实验”列插入一列。内容为“计算机组成、69、73、75、80”。（3）将00级1班这一行移到表格的最后一行，删除“英语精读”这一列。2．