《网页设计与制作》-实训指导书

实训2  搜集素材

实训3  用表格设计主页布局

实训4  在主页制作中插入文本操作

实训5  在主页制作中插入图像操作

实训6  在主页制作中超级链接的设置

实训7  制作动感网页

实训8  表单制作

实训9  CSS样式表的使用

实训10  JavaScript技术

实训11  应用行为

实训12  利用框架制作“公司简介”网页

实训13  利用布局表格制作“新书推介”网页

实训14  模板和库的使用

实训15  利用层的布局制作“技术支持”网页

实训16  网页设计与网站管理

实训17　网站开发综合实训

实训1  站点创建

实训目的

为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握创建网站目录结构、栏目文件夹、网页文件的基本操作方法。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材。

实训课时

2学时

实训内容

创建站点：

创建网站目录结构：

创建栏目文件夹：

创建网页文件：

掌握设置网页的页面属性

实训要求

要求学生能掌握如何创建站点，正确创建网站目录结构及栏目文件夹，创建主页文件index.htm,并正确命名，掌握设置网页的页面属性的方法。

实训步骤

1、在E盘中新建本地根文件夹，命名为bookman，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。

2、定义站点：设置 "站点名称"，命名为 "博客人";设置本地根文件夹,指定为E盘下的bookman文件夹;设置 "HTTP地址"为localhost。

3、创建网站目录结构及栏目文件夹(如下图): 

4、E盘下的bookman文件夹创建主页文件index.htm

5、设置网页的页面属性。

实训过程注意事项

1、在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；

2、所有的图片文件单独放在image文件夹内。

3、主页文件命名index.htm。

实训思考

网站中所有的文件最好取名为英文，为什么？

书写实训报告要求

写出本次实训的心得与体会

实训2  搜集素材

实训目的

为了让学生能熟练掌素材的搜集和制作方法，并学会把搜集到或制作好的素材正确命名，分门别类地存放在相应的文件夹中。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：  Fireworks MX   Flash MX 

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图片素材。

实训课时

2学时

实训内容

1、利用Fireworks MX制作网站标志、圆角矩形及个性化的图形。

2、利用Fireworks MX编辑制作有特殊效果的图。

3、利用Flash MX制作主页广告条。

实训要求

要求学生熟练掌握利用Fireworks MX 和Flash MX来制作个性化的图形图像素材的方法及技巧。

实训步骤

1、启动Fireworks MX，选择“文件”——“新建”，设置好新建文档的属性。

2、制作网站标志并正确命名，保存到相应的文件夹。

3、绘制圆角矩形及个性化的图形，保存到相应的文件夹。

4、选择“文件”——“导入”，导入相应图像，编辑设计特殊效果的图像，保存到相应的文件夹。

5、启动Flash MX 制作主页广告条，并保存到相应的文件夹。

实训过程注意事项

1、在制作过程中注意素材的命名要用英文名字。

2、图形图像及动画的保存格式在适合网页要求。

3、保存路径要正确。

实训思考

最适合网页的图形图像及动画的格式分别是什么？

书写实训报告要求

写出图形图像及动画实训的心得与体会。

实训3  用表格设计主页布局

实训目的

为了让学生熟练掌握在Dreamweaver mx中插入表格，学会设置表格的各项属性；并掌握如何在表格中插入文本、插入图像的操作方法和步骤。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、插入表格，并选择表格和单元格：

2、设置单元格属性：

3、调整表格结构、大小：

4、格式化表格：

5、表格中插入文本，表格中插入图像：

实训要求

要求学生掌握在Dreamweaver mx中如何插入表格、设置表格和单元格的格式；如何调整表格的结构大小；掌握表格中如何插入文字及图像等操作。

实训步骤

1、新建一个页面，在页面中插入一个6行7列的表格，并在其中输入相应的文字；

2、选择表格利用“格式化表格”命令来对表格格式进行修改，使其更美观；

3、根据要求对部分单元格进行拆分或合并操作；

4、设置文字的对齐方式，通过对边框、填充和间距进行设置；

5、保存文件，预览文件效果；

实训过程注意事项

1、插入表格时要注意：单元格的边距和单元格的间距值的设置；

2、表格边框线精细为0像素的特殊用途；

3、插入的图像必须放在站点文件夹下的image文件夹内；

实训思考

1、如何拆分和合并单元格？

2、如何设置表格的背景？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训4  在主页制作中插入文本操作

实训目的

为了让学生能熟练掌握在Dreamweaver mx中如何输入文本，调整设置文本的格式；如何插入特殊字符、文本列表、水平线、时间、注释的方法。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、输入文本：

2、调整文本：

3、插入特殊字符：

4、插入文本列表：

5、插入水平线：

6、插入时间：

7、插入注释：

8、设置文本格式：

实训要求

要求学生掌握在Dreamweaver mx中输入文本、设置文本格式、插入特殊字符、项目符号等操作。

实训步骤

1、打开上次实训所做的主页面文件；

2、输入文本，调整文本的间距，设置文本的格式；通过“属性”面板中的“格式”和“颜色”等参数，将文字设为标题格式，并改变其颜色；

3、输入一段不带格式的文字，选择“常用”工具栏上的“文本”单选项目，利用换行按钮对文本进行换行处理，实现分段的效果；

4、插入特殊字符、项目符号、水平线、时间、注释等内容；

实训过程注意事项

1、在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去，不能全部选取再添加；

2、当输入文本时要插入多个连续的空格，必须要“编辑”菜单下的“首选参数”中设置；

3、换行的几种方式：自行换行；按ENTER强行换行；按SHIFT+ENTER换行操作；

实训思考

1、如何插入版权符号？

2、如何插入特殊字符“￥”？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、

写出本次实训的心得与体会

实训5  在主页制作中插入图像操作

实训目的

为了让学生熟练掌握在Dreamweaver mx中插入图像，学会设置图像属性；如何插入鼠标经过图像、插入图像占位符的方法，掌握图文混排的技巧等操作。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、插入图像：

2、设置图像属性：

3、插入鼠标经过图像：

4、插入图像占位符：

5、图文混排操作：

实训要求

要求学生掌握在Dreamweaver mx中如何插入图像、设置图像的格式；如何插入鼠标经过图像、图像占位符；掌握图文混排等操作。

实训步骤

1、打开上次实训所做的主页面文件；

2、插入图像，在属性面板对图像的格式进行设置；

3、插入鼠标经过图像、图像占位符；

4、将图片和文字进行混合排版；

5、保存文件，预览文件效果；

实训过程注意事项

1、插入的图像必须放在站点文件夹下的image文件夹内；

2、设置图片的热点区域可选任意的工具；

实训思考

1、如何设置图片超链接，链接到指定的页面文件？

2、如何设置图片的热点区域？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训6  在主页制作中超级链接的设置

实训目的

为了让学生掌握如何利用超级链接来制作页面；掌握链接各种方式的制作方法与步骤。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、插入横向导航条

2、设置文本链接

3、插入左置导航栏

4、创建外部超级链接

5、创建内部超级链接

6、创建E-MAIL链接

7、创建锚点链接

8、创建下载文件的链接

9、创建空链接

10、创建脚本链接

实训要求

要求学生能利用链接来制作网页；掌握链接几种设置的方法和步骤。

实训步骤

1、打开上次实训所做的主页面文件；

2、选择导航栏的相应文字；

3、在属性对话框链接栏中设置要链接的网页。

4、在main页面中，分别以3段文本段落标题作为锚点，在页面上部设置锚记链接；

5、在左下部设置“友谊链接”到相关的网站，设置“联系我们”的E-MAIL链接；创建“下载”到下载文件的链接；

6、保存文件，预览文件效果；

实训过程注意事项

导航栏要注意分类，避免重复出现；

锚点的名称要注意不能重名。

实训思考

1、锚点在同一个文件中是否可以重名？

2、如何设置链接到指定的网站？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训7  制作动感网页

实训目的

为了让学生掌握在网页中如何插入FLASH动画、按钮、文本、视频、音频、JAVA  APPLET 及ActiveX控件等内容，以便实现动感网页的制作。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。

实训课时

2学时

实训内容

1、插入FLASH动画

2、插入FLASH按钮

3、插入FLASH文本

4、插入FLASH视频

5、插入音频、视频

6、插入Java Applet

7、插入ActiveX控件

实训要求

要求学生掌握在网页中插入动画、按钮、文本、视频、音频、Java Applet及ActiveX控件等内容，实现网页的动画效果。

实训步骤

1、打开主页，在页面的顶端部分和中间部分分别插入FLASH，选择要插入的FLASH动画，网页编辑窗口中会显示一个FLASH电影图标；

2、在左侧添加一个图层，在层中插入如图10所示的图片和文字，在下面插入一个FLASH按钮，在对话框中选择需要的样式，输入所要显示的文字，指定按钮的链接地址，将背景颜色设置与主页中的背景色相同；

3、将插入的按钮复制并粘贴多个，分别更改其显示的文本和链接的网页，组成导航条；

4、插入FLASH文本及Java Applet及ActiveX控件设置文本的各项属性值；

5、保存文件，预览文件效果；

实训过程注意事项

1、插入的FLASH文件必须将其复制到站点文件夹内；

2、插入的按钮必须要更改各个按钮的存储名称，否则网页中显示的将是同一个按钮；

实训思考

1、如何设置按钮的背景色与网页中的背景色一致？

2、在Fireworks中制作的图形要在网页中引用应如何操作？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训8  表单制作

实训目的

为了让学生掌握如何创建表单网页；了解各个表单对象属性的设置；熟练掌握各个表单对象不同的使用范围。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、插入表单

2、插入表单对象：文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单

实训要求

要求学生能利用表单来创建网页；掌握设定表单的内容和表单对象；掌握设置各个表单对象的属性值等内容。

实训步骤

1、打开主页页面，按图11所示，分别合并前两行单元格和中间两列单元格，在合并后的单元格内插入一个表单，为插入的表单命名为login；

2、在表单中插入文字内容及对应的表单对象：文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单

3、设置各个表单对象的属性值:将客户姓名、E-MAIL、具体地址的文本域依次命名为name、email、address；字符宽度和最多字符数分别为12、12，24、24，30和30，类型都为单行文本域；

4、最后一个文本域输入框命名为jianyi，类型为多行文本域，字符宽度和行数依次为50、8，文本域载入时显示值为“请在此输入你的建议”

5、设置表单中的客户姓名为必填项，E-MAIL为必填项且必为邮件地址；

6、设置表单以邮件发送的方式发送到邮箱*************;

7、保存文件，预览文件效果；

实训过程注意事项

1、在一个网页中只能插入一个表单，但在一个网页中可以有多个表单对象；

2、各个表单对象注意在属性面板中定义其名称。

实训思考

1、表单对象中的插入两个单选按钮，如何命名？

2、如何设置密码域？

3、文本字段与文本区域如何转换？

4、如何设置检查表单的行为？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训9  CSS样式表的使用

实训目的

为了让学生了解使用CSS样式来美化网页的方法，掌握创建CSS样式的方法和步骤，以及利用CSS滤镜来制作文字特效等操作。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。

实训课时

2学时

实训内容

1、CSS样式的新建：

2、CSS样式的编辑与修改：

3、CSS样式的应用：

4、利用CSS滤镜来特效文字效果：

5、制作光晕字、阴影字、遮罩字、动感字

实训要求

要求学生掌握CSS样式的制作方法；掌握CSS样式的应用与修改操作；了解利用CSS样式来制作文字特效等操作。

实训步骤

1、打开主页页面，在此页面中创建CSS样式：以css-01为名保存，设置字体为隶书，字号为16点数，颜色为＃CC66FF，带下划线。 

2、对页面中左、右两部分文字分别设置空链接。使用CSS样式：对左边的链接文字套用此样式。

3、修改CSS样式：对表格的框线、背景图片、链接样式等进行设置，并重新应用到所指定的部分；

4、运用CSS滤镜来制作文字特效：光晕字、阴影字、遮罩字、动感字的制作；

5、保存页面，预览效果图；

实训过程注意事项

1、CSS样式应保存到网站站点目录下；

2、CSS样式的名称应注意不能同名；

实训思考

1、如何利用CSS样式来创建链接文本不显示下划线？

2、如何将CSS样式应用到另外的网站的网页中？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训10  JavaScript技术

实训目的

为了让学生掌握在网页中插入JavaScript脚本语言的方法，以制作各种具有动态效果的网页。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实

实训课时

2学时

实训内容

1、在网页中加入跑马灯特效

2、制作实现网页中自由飞翔的图像效果

3、制作图片滑过效果

4、显示时间特效

实训要求

要求学生掌握在网页代码视图中插入JavaScript脚本语言的方法和步骤，利用不同的JavaScript脚本语言来制作网页特效等操作。

实训步骤

1、在主页中加入跑马灯特效：跑马灯可以活跃主页气氛，向浏览者介绍此网页的特色或者注意事项，例如：

2、

3、欢迎访问博客人信息技术有限公司

4、通过在之间放入这段代码，就会在网页中产生一个跑马灯的效果。

5、制作实现网页中自由飞翔的图像效果：它主要是由函数function start(　)来实现的，其作用是每隔一段时间在不同的位置将图片显示一次，因为位置的改变是连续均匀的，所以在视觉上产生移动的效果。

6、制作图片滑过效果：浏览器载入网页时，当鼠标移动图片时显示不同的图片，鼠标移开时显示原图片。按本例中onmouseover 和onmouseout语句分别来指定鼠标移入和移出此图片区域时显示的不同的图像文件，而用src指定页面下载后初始的图像文件。另外，cursor:hand指定鼠标光标移到图片区域时的形状为手形。

7、显示时间特效效果：调用JavaScript脚本语言来显示当前的日期和星期，并实现根据当前的时间显示不同的问候语。

8、保存页面，预览效果图；

实训过程注意事项

1、网页特效制作中准备所需的图片和链接页面必须保存到站点文件夹内，以便调用；

2、在JavaScript脚本语言中对变量名称的定义要区分大小写；

实训思考

1、如何设置状态栏中的跑马灯效果？

2、如何设置文字在状态栏中以打字效果出现？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训11  应用行为

实训目的

为了让学生了解在Dreamweaver中使用行为来制作网页的方法和技巧，利用行为来制作不需代码来实现的网页特效。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。

实训课时

2个课时

实训内容

1、交换图像；

2、弹出信息；

3、恢复交换图像；

4、播放声音；

5、调用JavaScript

6、弹出式菜单

实训要求

要求学生掌握在Dreamweaver中利用行为来制作网页特效的方法和步骤，了解行为的使用与技巧。

实训步骤

1、打开主页页面，在页面中插入一张图片，打开行为面板，选择这张图片，添加一个行为“交换图像”，打开一个对话框，在对话框中设置一张原始图片，确定，这样就添加了一个交换图片的行为，事件为onmouseover;

2、添加一个“弹出信息”的窗口，在对话框中输入我们所要的文字“欢迎光临我的班级网站”，事件为“onload”;

3、添加一个“恢复交换图像”的行为，设置原始图片，事件为onmouseover;

4、添加一个行为“播放声音”，浏览找到声音文件，事件为onmouseover;

5、插入一个一行一列的表格，输入文字“我的班级”，选择此文字，添加一个弹出式菜单，在对话框中输入菜单的内容及外观；

实训过程注意事项

1、设置交换图像时首先得插入图片，图片必须保存在站点的image文件夹内；

2、播放声音行为注意文件的格式及路径；

实训思考

1、要使播放声音要点击某个文字进行，应如何设置行为的事件？

2、如何获取更多的事件？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训12  利用框架制作“公司简介”网页

实训目的

为了让学生掌握如何创建框架；设定框架的内容和样式；学会制作浮动的框架等操作。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、创建框架

2、设定框架内容和样式，保存框架

3、设置无框架内容

4、制作浮动框架

实训要求

要求学生能利用框架来进行布局网页，设定框架内容和样式；设置框架的内容；制作可以浮动的框架。

实训步骤

1、在新建文档对话框的“框架集”类型中，选择左侧固定上方嵌套的框架模式，创建一个新的框架页；

2、插入图片和按钮，以及相关的文字内容；

3、在属性面板中设置文字和图片的格式属性；

4、在左侧列出导航链接，制作链接对应的子页面，最终实现点击左侧框架的链接，右面的框架会跳转到相应的子页面；

5、保存文件，一定要分别保存框架的各个部分，每一部分为一个HTML文件，总的框架是一个HTML文件，预览文件效果；

实训过程注意事项

1、插入的图像必须放在站点文件夹下的image文件夹内；

2、框架的保存分几个部分；

实训思考

1、框架的保存应注意有几个文件要保存？

2、如何设置框架中的链接？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训13  利用布局表格制作“新书推介”网页

实训目的

为了让学生熟练掌握在Dreamweaver中绘制布局表格和单元格；学会设置布局表格的属性；学会调整布局表格和布局单元格；掌握在布局表格中插入文本和图像的方法。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、绘制布局表格和单元格，清除布局单元格高度：

2、设置布局表格宽度：

3、调整布局表格和布局单元格：

4、布局表格中插入文本和图像：

实训要求

要求学生掌握在Dreamweaver中绘制布局表格和单元格；了解设置布局表格的操作；学会在布局表格中插入文本和图像的技巧等操作。

实训步骤

1、新建一个页面，切换至布局模式下，使用布局表格和绘制布局单元格来创建表格，制作一个国字型页面版式；

2、回到标准模式下，观察表格，为每个表格添加背景颜色；

3、在表格中添加文字，完成整个页面的制作，

4、保存文件，预览文件效果；

实训过程注意事项

1、插入的图像必须放在站点文件夹下的image文件夹内；

2、表格布局和布局表格的区别；

实训思考

1、如何拆分和合并单元格？

2、如何设置表格的背景？

3、表格布局和布局表格异同点？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训14  模板和库的使用

实训目的

为了让学生掌握如何利用模板和库来制作网页；掌握模板的创建与编辑；掌握创建可编辑区域、可选区域、重复区域；掌握模板的保存与应用操作；了解如何创建库项目及插入库项目等操作。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、创建模板

2、定义可编辑区域

3、定义可选区域

4、定义重复区域

5、设置可编辑标签属性

6、应用模板

7、调整模板

8、创建库

9、插入库

10、调整库

实训要求

要求学生能利用模板和库来制作网页；设置模板的可编辑区域、可选区域和重复区域；掌握库的应用与编辑修改等操作。

实训步骤

1、新建一个模板页面，编辑模板页面；

2、在模板中插入可编辑区域并保存；

3、新建一个基于模板的页面，修改模板文件，所有基于此模板的页面都会被修改；

4、新建一个空白页，套用上一实例中的模板；

5、打开上一实例基于模板的页面，选择插入菜单中的模板对象，选择创建嵌套模板，制作新的嵌套模板，加入第2个可编辑区域并保存，最终生成嵌套模板；

6、制作一个包含图像的网页，选中图像并拖动到库中；

7、新建一个空白文档，从库中将图像拖到空白页面中；

8、打开库项目，对其添加链接，保存库文件，提示更新相关页面，打开包含被修改库项目的页面文档，完成更新；

9、保存文件，预览文件效果；

实训过程注意事项

1、插入的图像必须放在站点文件夹下的image文件夹内；

2、模板的保存注意扩展名。

实训思考

1、如何套用模板到页面？

2、如何在模板中添加重复区域？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训15  利用层的布局制作“技术支持”网页

实训目的

为了让学生掌握如何利用层来布局网页，掌握层的插入，设置层的各项属性，利用层与行为的应用来创建层动画等操作。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训课时

2学时

实训内容

1、使用层排版

2、设置层文本

3、显示隐藏层

4、拖动层

5、调整层的大小

6、层的对齐

实训要求

要求学生能利用层来进行布局网页，了解层的属性的设置，掌握在层中插入相关的图片或文字，并掌握层与行为的综合使用。

实训步骤

1、新建一个页面，在页面中插入三个不同的层；

2、在各个层中分别插入不同的图片，并设置Layer1显示属性为可见, Layer2 、Layer3显示属性为隐藏性；

3、利用层与行为来制作显示与隐藏层动画：选择Layer1，添加一个“显示－隐藏层”行为，设置Layer1隐藏，Layer2 、Layer3显示，事件改为onmouseover；利用同样的道理，设置当事件为onmouseout时显示Layer2 ，隐藏Layer1、 Layer3的行为。

4、利用层与行为来制作拖动层动画：新建一个层，在层中插入一张图片，并调整图片与层的大小。选择层，添加一个“拖动层”行为，设置层移动的目标处，事件为onmouseover；

5、调整页面中所有层的大小，选择对齐层命令来调整页面中层的对齐方式。

6、保存文件，预览文件效果；

实训过程注意事项

1、插入的图像必须放在站点文件夹下的image文件夹内；

2、利用层与行为制作动画首先应选中对应层。

实训思考

1、行为由哪两部分组成？

2、如何设置行为中的事件更多？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训16  网页设计与网站管理

实训目的

为了让学生了解网站进行优化处理操作的原理，了解网站的创意和布局，对网页元素进行优化的过程和步骤，掌握网站域名申请的过程，了解网站发布的过程等内容。

实训环境

硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 M 或 128M ；硬盘不小于 500M ； VGA 彩显，带鼠标器。

操作系统：Windows95/98/me/2000/XP

软件环境：Dreamweaver MX 2004

特殊要求：必须将IIS配置好，能正常进行WEB浏览

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。

实训课时

2学时

实训内容

1、网页布局设计

2、网页中的文字设计

3、网页中的图像应用

4、图文排版

5、网页导航条设计

6、网页广告设计

7、域名的设计与申请

8、网站的发布

实训要求

要求学生掌握整个网站的优化过程，了解网站各种版面的布局形式，掌握网页色彩搭配的原则，了解网站发布的整个流程等操作。

实训步骤

1、打开前面已做好网站的主页面，根据网页设计原则，对网页不同元素：布局、文字、图像、图文排版、导航、广告等方面进行优化设计，调整网页效果；

2、推广主页的方法和思路：注册各个搜索引擎；互换广告；到BBS或网上论坛去发布自己网站的消息；友情链接登录等方法可以推广你网站的主页，提高访问量。

3、域名的设计与申请：选择申请主页的网站去申请免费的空间；申请虚拟域名；注册搜索引擎；

4、网站的发布与上传：

5、登录网站，预览效果图；

实训过程注意事项

1、申请的虚拟域名原则上是容易识记，代表一定的含义；

2、在选择站点的时候要注意主页空间的大小、速度、支持哪些网页技术、是否支持FTP上传或下载；

实训思考

1、导航设计的原则是什么？

2、网页中广告是越多越好吗？

书写实训报告要求

1、根据调试结果，写出调试分析报告

2、写出本次实训的心得与体会

实训17　网站开发综合实训

17.1　实训意义

网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与工作能力的培养过程。因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。

17.2　实训目的

1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。

（1）掌握规划网站的内容结构、目录结构、链接结构的方法。

（2）熟练掌握网页制作软件Dreamweaver MX的基本操作和使用技能。

（3）掌握页面的整体控制和头部内容设置的方法。

（4）熟练掌握网页页面布局的各种方法。

（5）熟练掌握在网页中输入、设置标题和正文文字的方法。

（6）熟练掌握在网页中插入图像、flash动画、背景音乐的方法。

（7）掌握建立各种形式超级链接的方法。

（8）掌握表单网页制作方法。

（9）掌握网页特效的制作方法。

（10）掌握网站测试的方法。

2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等。

3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。

4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及工作的能力，树立自信心。

5．训练和培养团队协作精神和共同开发网站的综合能力。

17.3　实训要求

1．动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。

2．制作网页前，收集好所需的文字资料、图像资料、flash动画和网页特效。

3．所创建的网站至少包括8个页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为3个内容页。

（1）首页采用表格进行布局，必须包含导航栏；

（2）4个二级子页分别为框架网页、表单网页、利用模板制作的网页、利用布局表格制作的网页；

（3）3个内容页分别为层布局的网页、应用JavaScript制作特效的网页、应用行为制作特效的网页。

（4）各个页面根据需要插入合适的图像和Falsh动画，首页要求插入背景音乐。

（5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。

（6）各个页面之间导航清晰、链接准确无误。

4．网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。

5．实训过程中既要虚心接受老师的指导，又要充分发挥主观能动性、思考、努力钻研、勤于实践、勇于创新。

6．在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。要求完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。

7．小组成员之间，既要分工明确，又要密切合作，培养良好的互助、协作精神。

8．实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，实训成绩按不及格处理。

9．实训环境为Windows2000及以上版本的操作系统，网页制作软件为Dreamweaver 8，根据需要可以运用Fireworks 8处理图像，运用Flash 8制作动画。

17.4　实训步骤

1．实训准备、制定实训计划

（1）分组：2至3人为一组，每一组选定一名组长，组长主要负责考勤以及与指导教师联系。

（2）选题：确定网站主题，各小组进行分工。

（3）根据实训时间的长短制定一个切实可行的网站开发计划。

2．准备素材，搜集与主题相关的文字、图像、动画、音乐等资料。

3．设计网站的内容结构、目录结构和链接结构，设计首页及其页面的版式结构。

4．创建本地网站，建立网站的目录结构。

5．制作首页。

6．制作二级子页。

7．制作内容页。

8．创建超级链接。

9．测试与浏览网页。

10．书写实训报告书。

17.5　评分标准

根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体浏览效果等方面进行综合评分。评分参考标准如表19-1所示。

表19-1　　网站开发实训的参考评分标准

（1）制作教学资源网站（2）制作个人网站。（3）制作班级网站。（4）制作学习网站。（5）制作学校网站。（6）制作旅游网站。（7）制作公司网站。（8）制作体育网站。