网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。
素材准备：准备制作网页所需的文字素材、图像素材。
实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。
实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。
3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。
4.切换代码模式下，输入代码。
5.保存文件，预览文件效果。
实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。
实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。
页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。
素材准备：准备好从网上下载的安装程序。
实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。
2.安装完成后输入注册号。
3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。
4.退出Dreamweaver。
5.卸载Dreamweaver实验过程注意事项：1.安装过程完成后，要激活。
实验思考：从“控制面板”里删除程序与从安装到的目录文件里删除有什么区别？书写实验报告要求：写出本次实验报告。
实验3 文本操作实验目的：为了让学生能熟练掌握在Dreamweaver mx中如何输入文本，调整设置文本的格式；如何插入特殊字符、文本列表、水平线、时间、注释的方法。
素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时：2学时实验内容：1.输入文本：2.调整文本：3.插入特殊字符：4.插入文本列表：5.插入水平线：6.插入时间：7.插入注释：8.设置文本格式：实验步骤：1.新建一个页面文件；2.输入文本，调整文本的间距，设置文本的格式；通过“属性”面板中的“格式”和“颜色”等参数，将文字设为标题格式，并改变其颜色；3.输入一段不带格式的文字，选择“常用”工具栏上的“文本”单选项目，利用换行按钮对文本进行换行处理，实现分段的效果；4.插入特殊字符、项目符号、水平线、时间、注释等内容；实验过程注意事项：1.在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去，不能全部选取再添加；2.当输入文本时要插入多个连续的空格，必须要“编辑”菜单下的“首选参数”中设置；3.换行的几种方式：自行换行；按ENTER强行换行；按SHIFT+ENTER换行操作；实验思考：如何插入版权符号？如何插入特殊字符“￥”？书写实验报告要求：根据调试结果，写出实验报告实验4 图像操作实验目的：为了让学生熟练掌握在Dreamweaver mx中插入图像，学会设置图像属性；如何插入鼠标经过图像、插入图像占位符的方法，掌握图文混排的技巧等操作。
素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时：2学时实验内容：1.插入图像：2.设置图像属性：3.插入鼠标经过图像：4.插入图像占位符：5.图文混排操作：实验步骤：1.打开上次实训所做的页面文件；2.插入图像，在属性面板对图像的格式进行设置；3.插入鼠标经过图像、图像占位符；4.将图片和文字进行混合排版；5.保存文件，预览文件效果；实验过程注意事项：1.插入的图像必须放在站点文件夹下的image文件夹内；2.设置图片的热点区域可选任意的工具；实验思考：如何设置图片超链接，链接到指定的页面文件？如何设置图片的热点区域？书写实验报告要求：根据调试结果，写出实验报告。
页面效果图：实验5 超级链接实验目的：为了让学生掌握如何利用超级链接来制作页面；了解主页的创作步骤；掌握链接各种方式的制作方法与步骤。
素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时：2学时实验内容：1.插入横向导航条2.设置文本链接3.插入左置导航栏4.创建外部超级链接5.创建内部超级链接6.创建E-MAIL链接7.创建锚点链接8.创建下载文件的链接9.创建空链接10.创建脚本链接实验步骤：1.创建一个上方固定左侧嵌套的框架页面；2.在框架的上部分插入相关的图片或网站的LOGO及BANNER；3.左侧插入相关的文字，作为左侧导航栏，右侧框架页面中输入相关文字；4.在右侧框架页面中，分别以3段文本段落标题作为锚点，在页面上部设置锚记链接；5.在左下部设置“友谊链接”到相关的网站，设置“联系我们”的E-MAIL链接；创建“下载”到下载文件的链接；6.保存文件，预览文件效果；7.实训过程注意事项8.导航栏要注意分类，避免重复出现；9.锚点的名称要注意不能重名。
实验思考：锚点在同一个文件中是否可以重名？如何设置链接到指定的网站？书写实验报告要求：根据调试结果，写出实验报告页面效果图：图1-4实验6 表格布局实验目的：为了让学生熟练掌握在Dreamweaver mx中插入表格，学会设置表格的各项属性；并掌握如何在表格中插入文本、插入图像的操作方法和步骤。
素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时：2学时实验内容：1.插入表格，并选择表格和单元格：2.设置单元格属性：3.调整表格结构、大小：4.格式化表格：5.表格中插入文本，表格中插入图像：实验步骤：1.新建一个页面，在页面中插入一个表格，并在其中输入相应的文字；2.选择表格利用“格式化表格”命令来对表格格式进行修改，使其更美观；3.根据要求对部分单元格进行拆分或合并操作；4.设置文字的对齐方式，通过对边框、填充和间距进行设置；5.保存文件，预览文件效果；6.实验过程注意事项7.插入表格时要注意：单元格的边距和单元格的间距值的设置；8.表格边框线精细为0像素的特殊用途；9.插入的图像必须放在站点文件夹下的image文件夹内。
实验思考：如何折分和合并单元格？如何设置表格的背景？书写实验报告要求：> 根据调试结果，写出实验报告。
页面效果图：图1-5实验7 多媒体应用实验目的：为了让学生熟练掌握Flash动画、视频、声音等多媒体，能够制作出动感十足的网页，主要掌握如何插入Flash元素、插入背景音乐、插入视频、插入图像查看器等内容。
重点是插入Flash元素，难点是插入图像查看器。
素材准备：准备制作网页所需的Flash元素、图像素材、音乐素材、视频素材等。
实验课时：2学时实验内容：1.插入FLASH动画2.插入FLASH按钮3.插入FLASH文本4.插入FLASH视频5.插入音频、视频6.插入Java Applet7.插入ActiveX控件实验步骤：1.新建一个页面，用表格划分布局。
2.插入Flash导航条，添加背景。
使背景透明化。
3.在第二个表格左侧插入Flash按钮。
4.右侧表格中插入视频。
实验过程注意事项：1.表格布局是重点2.Flash背景透明化需设置参数。
3.插入Flash视频格式是.flv4.插入的FLASH文件必须将其复制到站点文件夹内；5.插入的按钮必须要更改各个按钮的存储名称，否则网页中显示的将是同一个按钮；实验思考：如何使Flash背景透明化？如何设置按钮的背景色与网页中的背景色一致？在Fireworks中制作的图形要在网页中引用应如何操作？书写实验报告要求：根据调试结果，写出实验报告。
页面效果图：图1-6实验8 CSS样式实验目的：为了让学生了解使用CSS样式来美化网页的方法，掌握创建CSS样式的方法和步骤，以及利用CSS滤镜来制作文字特效等操作。
素材准备：准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。
实验课时：2学时实验内容：1.CSS样式的新建：2.CSS样式的编辑与修改：3.CSS样式的应用：4.利用CSS滤镜来特效文字效果：5.制作光晕字、阴影字、遮罩字、动感字实验步骤：1.新建一个页面，在此页面中创建CSS样式将图片应用CSS滤镜。
2.对页面中两部分文字分别使用CSS样式：并对部份文字作超级链接。
3.修改CSS样式：对表格的框线、背景图片、链接样式等进行设置，并重新应用到所指定的部分；4.运用CSS滤镜来制作文字特效：光晕字、阴影字、遮罩字、动感字的制作；5.保存页面，预览效果图；实验过程注意事项：CSS样式应保存到网站站点目录下；CSS样式的名称应注意不能同名。
实验思考：如何利用CSS样式来创建链接文本不显示下划线？如何将CSS样式应用到另外的网站的网页中？书写实验报告要求：根据调试结果，写出实验报告。
页面效果图：图1-7实验9 层的布局实验目的：为了让学生掌握如何利用层来布局网页，掌握层的插入，设置层的各项属性，利用层与行为的应用来创建层动画以及“行为”的添加等操作。
素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时：2学时实验内容：1.使用层排版2.设置层文本3.显示隐藏层4.拖动层5.调整层的大小6.层的对齐7.“行为”调用实验步骤：1.新建一个页面，用表格划分布局。
2.在左侧第二个单元格中插入“保存图像”“原始状态”两个提交按钮。
3.左侧小女孩分为三个层，并设置层名字分别为“tou”, “yi”、“ku”显示属性都为可见；4.右侧衣服分为四个层，并设置名字分别为“yi1”, “yi2”、“ku1”, “ku2”显示属性都为可见；5.利用层与行为来制作显示与隐藏层动画：选择“yi1”，添加一个“显示－隐藏层”行为，设置”tou”可见, ”ku”可见；”yi1”可见，其它全部隐藏事件改为onClick；再添加一个双击脱下衣服，还原行为,设置”tou”可见, ”ku”可见；”yi”可见，其它全部隐藏事件改为onDblClick.6.利用同样的道理，设置分别单击，双击”yi2””ku1””ku2”的事件行为。
7.保存文件，预览文件效果。
实验过程注意事项：插入的图像必须放在站点文件夹下的image文件夹内；利用层与行为制作动画首先应选中对应层。