网页设计与制作-实训指导书_精品文档.doc
《网页设计与制作-实训指导书_精品文档.doc》由会员分享，可在线阅读，更多相关《网页设计与制作-实训指导书_精品文档.doc（32页珍藏版）》请在冰豆网上搜索。
目录
实训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
images
media
MYbusiness
Visitor
company
Example
Product
album
cover
danghang
Image-map
photo
qiege
image
manger
zhangdan
ahuce
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、保存文件，预览文件效果；
实训过程注意事项
导航栏要注意分类，避免重复出现；
锚点的名称要注意不能重名。
升级会员 