《网页设计与制作》实训指导书.docx
- 文档编号:24506828
- 上传时间:2023-05-28
- 格式:DOCX
- 页数:35
- 大小:46.77KB
《网页设计与制作》实训指导书.docx
《《网页设计与制作》实训指导书.docx》由会员分享,可在线阅读,更多相关《《网页设计与制作》实训指导书.docx(35页珍藏版)》请在冰豆网上搜索。
《网页设计与制作》实训指导书
实训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、创建网站目录结构及栏目文件夹(如下图):
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脚本语言的方法和步骤,利用不同的JavaScript脚本语言来制作网页特效等操作。
实训步骤
1、在主页中加入跑马灯特效:
跑马灯可以活跃主页气氛,向浏览者介绍此网页的特色或者注意事项,例如:
2、
3、欢迎访问博客人信息技术有限公司
4、通过在
之间放入这段代码,就会在网页中产生一个跑马灯的效果。5、制作实现网页中自由飞翔的图像效果:
它主要是由函数functionstart( )来实现的,其作用是每隔一段时间在不同的位置将图片显示一次,因为位置的改变是连续均匀的,所以在视觉上产生移动的效果。
6、制作图片滑过效果:
浏览器载入网页时,当鼠标移动图片时显示不同的图片,鼠标移开时显示原图片。
按本例中onmouseover和onmouseout语句分别来指定鼠标移入和移出此图片区域时显示的不同的图像文件,而用src指定页面下载后初始的图像文件。
另外,cursor:
hand指定鼠标光标移到图片区域时的形状为手形。
7、显示时间特效效果:
调用JavaScript脚本语言来显示当前的日期和星期,并实现根据当前的时间显示不同的问候语。
8、保存页面,预览效果图;
实训过程注意事项
1、网页特效制作中准备所需的图片和链接页面必须保存到站点文件夹内,以便调用;
2、在JavaScript脚本语言中对变量名称的定义要区分大小写;
实训思考
1、如何设置状态栏中的跑马灯效果?
2、如何设置文字在状态栏中以打字效果出现?
书写实训报告要求
1、根据调试结果,写出调试分析报告
2、写出本次实训的心得与体会
实训11应用行为
实训目的
为了让学生了解在Dreamweaver中使用行为来制作网页的方法和技巧,利用行为来制作不需代码来实现的网页特效。
实训环境
硬件环境:
考核用机为奔腾以上兼容机,内存不少于32M,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
操作系统:
Windows95/98/me/2000/XP
软件环境:
DreamweaverMX2004
特殊要求:
必须将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,最好64M或128M;硬盘不小于500M;VGA彩显,带鼠标器。
操作系统:
Windows95/98/me/2000/XP
软件环境:
DreamweaverMX2004
特殊要求:
必须将IIS配置好,能正常进行WEB浏览
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训课时
2学时
实训内容
1、创建框架
2、设定框架内容和样式,保存框架
3、设置无框架内容
4、制作浮动框架
实训要求
要求学生能利用框架来进行布局网页,设定框架内容和样式;设置框架的内容;制作可以浮动的框架。
实训步骤
1、在新建文档对话框的“框架集”类型中,选择左侧固定上
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 网页 设计 制作 指导书
![提示](https://static.bdocx.com/images/bang_tan.gif)