《网页设计与制作》实训指导书.docx
《《网页设计与制作》实训指导书.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》实训指导书.docx（58页珍藏版）》请在冰豆网上搜索。
《网页设计与制作》实训指导书
精品
实训1站点创建
实训2搜集素材
实训3用表格设计主页布局
实训4在主页制作中插入文本操作
实训5在主页制作中插入图像操作
实训6在主页制作中超级链接的设置
实训7制作动感网页
实训8表单制作
实训9CSS样式表的使用
实训10JavaScript技术
实训11应用行为
实训12利用框架制作“公司简介”网页
实训13利用布局表格制作“新书推介”网页
实训14模板和库的使用
实训15利用层的布局制作“技术支持”网页
实训16网页设计与网站管理
实训17网站开发综合实训
感谢下载载
精品
实训1站点创建
实训目的
为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握
创建网站目录结构、栏目文件夹、网页文件的基本操作方法。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
DreamweaverMX2004
特殊要求：
必须将IIS配置好，能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材。
实训课时
2学时
实训内容
创建站点：
创建网站目录结构：
创建栏目文件夹：
创建网页文件：
掌握设置网页的页面属性
感谢下载载
精品
实训要求
要求学生能掌握如何创建站点，正确创建网站目录结构及栏目文件夹，创
建主页文件index.htm,并正确命名，掌握设置网页的页面属性的方法。
实训步骤
1、在E盘中新建本地根文件夹，命名为bookman，并在该文件夹中新建
image文件夹以存放网站中所要用到的图片。
2、定义站点：
设置"站点名称"，命名为"博客人";设置本地根文件夹,指定
为E盘下的bookman文件夹;设置"HTTP地址"为localhost。
3、创建网站目录结构及栏目文件夹（如下图）:
感谢下载载
精品
bookman
css
Html
company
Example
Product
images
album
cover
danghang
Image-map
photo
qiege
media
MYbusiness
image
manger
zhangdan
ahuce
Visitor
4、E盘下的bookman文件夹创建主页文件index.htm
5、设置网页的页面属性。
感谢下载载
精品
实训过程注意事项
1、在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；
2、所有的图片文件单独放在image文件夹内。
3、主页文件命名index.htm。
实训思考
网站中所有的文件最好取名为英文，为什么？
书写实训报告要求
写出本次实训的心得与体会
实训2搜集素材
实训目的
为了让学生能熟练掌素材的搜集和制作方法，并学会把搜集到或制作好的
素材正确命名，分门别类地存放在相应的文件夹中。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
FireworksMXFlashMX
特殊要求：
必须将IIS配置好，能正常进行WEB浏览
感谢下载载
精品
素材准备
准备制作网页所需的文字素材、图片素材。
实训课时
2学时
实训内容
1、利用FireworksMX制作网站标志、圆角矩形及个性化的图形。
2、利用FireworksMX编辑制作有特殊效果的图。
3、利用FlashMX制作主页广告条。
实训要求
要求学生熟练掌握利用FireworksMX和FlashMX来制作个性化的图形
图像素材的方法及技巧。
实训步骤
1、启动FireworksMX，选择“文件”——“新建”，设置好新建文档的
属性。
2、制作网站标志并正确命名，保存到相应的文件夹。
3、绘制圆角矩形及个性化的图形，保存到相应的文件夹。
4、选择“文件”——“导入”，导入相应图像，编辑设计特殊效果的图像，保存到相应的文件夹。
5、启动FlashMX制作主页广告条，并保存到相应的文件夹。
实训过程注意事项
1、在制作过程中注意素材的命名要用英文名字。
2、图形图像及动画的保存格式在适合网页要求。
感谢下载载
精品
3、保存路径要正确。
实训思考
最适合网页的图形图像及动画的格式分别是什么？
书写实训报告要求
写出图形图像及动画实训的心得与体会。
实训3用表格设计主页布局
实训目的
为了让学生熟练掌握在Dreamweavermx中插入表格，学会设置表格的各
项属性；并掌握如何在表格中插入文本、插入图像的操作方法和步骤。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
DreamweaverMX2004
特殊要求：
必须将IIS配置好，能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
感谢下载载
精品
实训内容
1、插入表格，并选择表格和单元格：
2、设置单元格属性：
3、调整表格结构、大小：
4、格式化表格：
5、表格中插入文本，表格中插入图像：
实训要求
要求学生掌握在Dreamweavermx中如何插入表格、设置表格和单元格的格式；如何调整表格的结构大小；掌握表格中如何插入文字及图像等操作。
实训步骤
1、新建一个页面，在页面中插入一个6行7列的表格，并在其中输入相应
的文字；
2、选择表格利用“格式化表格”命令来对表格格式进行修改，使其更美观；
3、根据要求对部分单元格进行拆分或合并操作；
4、设置文字的对齐方式，通过对边框、填充和间距进行设置；
5、保存文件，预览文件效果；
实训过程注意事项
1、插入表格时要注意：
单元格的边距和单元格的间距值的设置；
2、表格边框线精细为0像素的特殊用途；
3、插入的图像必须放在站点文件夹下的image文件夹内；实训思考
1、如何拆分和合并单元格？
感谢下载载
精品
2、如何设置表格的背景？
书写实训报告要求
1、根据调试结果，写出调试分析报告
2、写出本次实训的心得与体会
实训4在主页制作中插入文本操作
实训目的
为了让学生能熟练掌握在Dreamweavermx中如何输入文本，调整设置文
本的格式；如何插入特殊字符、文本列表、水平线、时间、注释的方法。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
DreamweaverMX2004
特殊要求：
必须将IIS配置好，能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
感谢下载载
精品
2学时
实训内容
1、输入文本：
2、调整文本：
3、插入特殊字符：
4、插入文本列表：
5、插入水平线：
6、插入时间：
7、插入注释：
8、设置文本格式：
实训要求
要求学生掌握在Dreamweavermx中输入文本、设置文本格式、插入特殊字符、项目符号等操作。
实训步骤
1、打开上次实训所做的主页面文件；
2、输入文本，调整文本的间距，设置文本的格式；通过“属性”面板中的“格式”和“颜色”等参数，将文字设为标题格式，并改变其颜色；
3、输入一段不带格式的文字，选择“常用”工具栏上的“文本”单选项目，
利用换行按钮对文本进行换行处理，实现分段的效果；
4、插入特殊字符、项目符号、水平线、时间、注释等内容；实训过程注意事项
1、在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去，
感谢下载载
精品
不能全部选取再添加；
2、当输入文本时要插入多个连续的空格，必须要“编辑”菜单下的“首选参数”中设置；
3、换行的几种方式：
自行换行；按ENTER强行换行；按SHIFT+ENTER
换行操作；
实训思考
1、如何插入版权符号？
2、如何插入特殊字符“￥”？
书写实训报告要求
1、根据调试结果，写出调试分析报告
2、
写出本次实训的心得与体会
实训5在主页制作中插入图像操作
实训目的
为了让学生熟练掌握在Dreamweavermx中插入图像，学会设置图像属
性；如何插入鼠标经过图像、插入图像占位符的方法，掌握图文混排的技巧等操
作。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
感谢下载载
精品
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
DreamweaverMX2004
特殊要求：
必须将IIS配置好，能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
1、插入图像：
2、设置图像属性：
3、插入鼠标经过图像：
4、插入图像占位符：
5、图文混排操作：
实训要求
要求学生掌握在Dreamweavermx中如何插入图像、设置图像的格式；如何插入鼠标经过图像、图像占位符；掌握图文混排等操作。
实训步骤
1、打开上次实训所做的主页面文件；
2、插入图像，在属性面板对图像的格式进行设置；
3、插入鼠标经过图像、图像占位符；
4、将图片和文字进行混合排版；
感谢下载载
精品
5、保存文件，预览文件效果；实训过程注意事项
1、插入的图像必须放在站点文件夹下的image文件夹内；
2、设置图片的热点区域可选任意的工具；实训思考
1、如何设置图片超链接，链接到指定的页面文件？
2、如何设置图片的热点区域？
书写实训报告要求
1、根据调试结果，写出调试分析报告
2、写出本次实训的心得与体会
实训6在主页制作中超级链接的设置
实训目的
为了让学生掌握如何利用超级链接来制作页面；掌握链接各种方式的制作
方法与步骤。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
感谢下载载
精品
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
DreamweaverMX2004
特殊要求：
必须将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动画、按钮、文本、视频、音频、
JAVAAPPLET及ActiveX控件等内容，以便实现动感网页的制作。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
DreamweaverMX2004
特殊要求：
必须将IIS配置好，能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。
实训课时
2学时
实训内容
1、插入FLASH动画
2、插入FLASH按钮
3、插入FLASH文本
4、插入FLASH视频
5、插入音频、视频
6、插入JavaApplet
7、插入ActiveX控件实训要求
感谢下载载
精品
要求学生掌握在网页中插入动画、按钮、文本、视频、音频、JavaApplet
及ActiveX控件等内容，实现网页的动画效果。
实训步骤
1、打开主页，在页面的顶端部分和中间部分分别插入FLASH，选择要插入的FLASH动画，网页编辑窗口中会显示一个FLASH电影图标；
2、在左侧添加一个图层，在层中插入如图10所示的图片和文字，在下面插入一个FLASH按钮，在对话框中选择需要的样式，输入所要显示的文字，指定按钮的链接地址，将背景颜色设置与主页中的背景色相同；
3、将插入的按钮复制并粘贴多个，分别更改其显示的文本和链接的网页，组成导航条；
4、插入FLASH文本及JavaApplet及ActiveX控件设置文本的各项属性
值；
5、保存文件，预览文件效果；
实训过程注意事项
1、插入的FLASH文件必须将其复制到站点文件夹内；
2、插入的按钮必须要更改各个按钮的存储名称，否则网页中显示的将是同一个按钮；
实训思考
1、如何设置按钮的背景色与网页中的背景色一致？
2、在Fireworks中制作的图形要在网页中引用应如何操作？
书写实训报告要求
1、根据调试结果，写出调试分析报告
感谢下载载
精品
2、写出本次实训的心得与体会
实训8表单制作
实训目的
为了让学生掌握如何创建表单网页；了解各个表单对象属性的设置；熟练
掌握各个表单对象不同的使用范围。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
DreamweaverMX2004
特殊要求：
必须将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、设置表单以邮件发送的方式发送到邮箱zzyan@;
7、保存文件，预览文件效果；实训过程注意事项
1、在一个网页中只能插入一个表单，但在一个网页中可以有多个表单对象；
2、各个表单对象注意在属性面板中定义其名称。
感谢下载载
精品
实训思考
1、表单对象中的插入两个单选按钮，如何命名？
2、如何设置密码域？
3、文本字段与文本区域如何转换？
4、如何设置检查表单的行为？
书写实训报告要求
1、根据调试结果，写出调试分析报告
2、写出本次实训的心得与体会
实训9CSS样式表的使用
实训目的
为了让学生了解使用CSS样式来美化网页的方法，掌握创建CSS样式的方
法和步骤，以及利用CSS滤镜来制作文字特效等操作。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
感谢下载载
精品
软件环境：
DreamweaverMX2004
特殊要求：
必须将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、写出本次实训的心得与体会
实训10JavaScript技术
实训目的
为了让学生掌握在网页中插入JavaScript脚本语言的方法，以制作各种具
有动态效果的网页。
实训环境
硬件环境：
考核用机为奔腾以上兼容机，内存不少于32M，最好64M或
感谢下载载
精品
128M；硬盘不小于500M；VGA彩显，带鼠标器。
操作系统：
Windows95/98/me/2000/XP
软件环境：
DreamweaverMX2004
特殊要求：
必须将IIS配置好，能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。
实
实训课时
2学时
实训内容
1、在网页中加入跑马灯特效
2、制作实现网页中自由飞翔的图像效果
3、制作图片滑过效果
4、显示时间特效
实训要求
要求学生掌握在网页代码视图中插入JavaScript脚本语言的方法和步骤，
利用不同的JavaScri
升级会员 