(网页设计与制作基础教程.docVIP

《网页设计与制作实验指导书》 河南科技大学经济与管理学院 目录 实验规则 3 实验报告要求 4 基本实验方法 4 实验环境 4 实验一 Dreamweaver8基本操作、站点管理 5 实验二 网页的定位技术以及制作层动画 7 实验三 网页编辑与超链接 13 实验四 层叠样式、模板和库 17 实验五 表单与扩展管理器 23 实验六 网页设计与制作 24 实验规则 为了顺利完成实验教学任务，确保人身设备安全，培养严谨、踏实、实事求是的科学作风和爱护国家财产的优良品质，特制定以下实验规则： 1、实验纪律 （1）在实验室不得做和实验无关的事情。 （2）遵守纪律，不迟到，不旷课。 （3）不能拆卸硬件，更不能拿走实验设备或仪器。 （4）保持实验室安静、整洁，爱护公物。 2、实验过程 （1）预习实验内容。 （2）上机操作。记录实验中遇到的问题，主要是错误信息和错误原因。 （3）检查操作结果是否正确。 （4）根据实验过程的记录书写实验报告。 实验报告要求 1、报告用纸 采用统一的河南科技大学实验报告用纸，或按照指导老师指定的统一格式打印。 2、实验报告封面内容 实验名称：（如实验一 网页的定位技术） 班级名称：（如计031班） 学生学号： 学生姓名： 实验时间： 3、实验报告内容 见各具体实验项目的要求。 基本实验方法 本实验要求熟悉Dreamweaver8.0的工作环境和网页设计制作的相关知识。 实验环境 Dreamweaver8.0 实验一 Dreamweaver8基本操作、站点管理 一、实验目的和要求： 掌握Dreamweaver 8启动和退出的方法。 掌握本站点的设置方法。 掌握创建、打开和保存HTML文档的方法 二、实验内容： 网页编辑器的基本操作 用不同的方法启动和退出Dreamweaver 8。 用快捷键打开和关闭【插入】面板和【属性】面板。 将【代码】浮动面板组打开后，先移出，再移入浮动面板放置区，然后再将【设计】浮动面板组中的【CSS样式】组合到【代码】浮动面板组中。察看浮动面板组操作后的效果。 用快捷键关闭和打开浮动面板组，用鼠标折叠和展开各个浮动面板组，察看浮动面板组操作后的效果。 启动Dreamweaver MX后，打开、关闭标尺显示，设置标尺单位分别为厘米、英寸、像素；显示和隐藏网格，设置网格属性，【间隔】为10像素，【显示】为线，【颜色】为#CCCC99，选中【靠齐到网格】复选项。 建立网站的基本操作 打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为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像素，在表格中输入如表所示的内容。并在表格上方增加标题“信息学院各班平均成绩”，标题格式设置为方正舒体、5号、粗体、#003366。 表 各班平均成绩表 科目 数据原理 计算机组成实验 英语精读 电子商务 00级1班 73 85 77 79 01级1班 83 79 82 9