网页设计期末练习解析.docx
《网页设计期末练习解析.docx》由会员分享，可在线阅读，更多相关《网页设计期末练习解析.docx（12页珍藏版）》请在冰豆网上搜索。
网页设计期末练习解析
实训1页面控制
实训目的
为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性、如何在网页中添加背景音乐等操作。
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训内容
创建站点：
设置外观：
设置标题：
设置标题/编码：
设置跟踪颜色：
设置颜色：
设置窗口大小：
添加背景音乐：
实训要求
实训步骤
在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
定义站点：
设置"站点名称"，命名为"mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置"HTTP地址"为localhost。
创建与设置文档的页面属性：
新建一个页面，设置文档页面属性：
标题设置为"我的班级"，背景图像设置为image\0l.jpg图像，左边界、边界宽带、顶部边界以及边界高度分别设置为20
设置页面中文字的字体、字体大小：
选择文字部分，在属性面板设置字体及字体的大小。
添加背景音乐：
为整个页面添加一个背景音乐。
在代码视图下在
和之间如下添加代码：
保存文件，预览文件效果。
实训过程注意事项
在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；
所有的图片文件单独放在image文件夹内。
背景音乐必须放在站点文件内。
页面效果图
图1-1
实训2文本操作
实训目的
为了让学生能熟练掌握在Dreamweaver中如何输入文本，调整设置文本的格式；如何插入特殊字符、文本列表、水平线、时间、注释的方法。
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训内容
输入文本：
调整文本：
插入特殊字符：
插入文本列表：
插入水平线：
插入时间：
插入注释：
设置文本格式：
实训要求
要求学生掌握在Dreamweaver中输入文本、设置文本格式、插入特殊字符、项目符号等操作。
实训步骤
打开上次实训所做的页面文件；
输入文本，调整文本的间距，设置文本的格式；通过“属性”面板中的“格式”和“颜色”等参数，将文字设为标题格式，并改变其颜色；
输入一段不带格式的文字，选择“常用”工具栏上的“文本”单选项目，利用换行按钮对文本进行换行处理，实现分段的效果；
插入特殊字符、项目符号、水平线、时间、注释等内容；
实训过程注意事项
在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去，不能全部选取再添加；
当输入文本时要插入多个连续的空格，必须要“编辑”菜单下的“首选参数”中设置；
换行的几种方式：
自行换行；按ENTER强行换行；按SHIFT+ENTER换行操作；
页面效果图
图1-2
实训3图像操作
实训目的
为了让学生熟练掌握在Dreamweaver中插入图像，学会设置图像属性；如何插入鼠标经过图像、插入图像占位符的方法，掌握图文混排的技巧等操作。
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训内容
插入图像：
设置图像属性：
插入鼠标经过图像：
插入图像占位符：
图文混排操作：
实训要求
要求学生掌握在Dreamweaver中如何插入图像、设置图像的格式；如何插入鼠标经过图像、图像占位符；掌握图文混排等操作。
实训步骤
打开上次实训所做的页面文件；
插入图像，在属性面板对图像的格式进行设置；
插入鼠标经过图像、图像占位符；
将图片和文字进行混合排版；
保存文件，预览文件效果；
实训过程注意事项
插入的图像必须放在站点文件夹下的image文件夹内；
设置图片的热点区域可选任意的工具；
图1-3
实训4表格布局
实训目的
为了让学生熟练掌握在Dreamweaver中插入表格，学会设置表格的各项属性；并掌握如何在表格中插入文本、插入图像的操作方法和步骤。
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训内容
插入表格，并选择表格和单元格：
设置单元格属性：
调整表格结构、大小：
格式化表格：
表格中插入文本，表格中插入图像：
实训要求
要求学生掌握在Dreamweaver如何插入表格、设置表格和单元格的格式；如何调整表格的结构大小；掌握表格中如何插入文字及图像等操作。
实训步骤
新建一个页面，在页面中插入一个6行7列的表格，并在其中输入相应的文字；
选择表格利用“格式化表格”命令来对表格格式进行修改，使其更美观；
根据要求对部分单元格进行拆分或合并操作；
设置文字的对齐方式，通过对边框、填充和间距进行设置；
保存文件，预览文件效果；
实训过程注意事项
插入表格时要注意：
单元格的边距和单元格的间距值的设置；
表格边框线精细为0像素的特殊用途；
插入的图像必须放在站点文件夹下的image文件夹内；
实训思考
如何折分和合并单元格？
如何设置表格的背景？
书写实训报告要求
根据调试结果，写出调试分析报告
写出本次实训的心得与体会
页面效果图
图1-4
如下图所示的表格布局
图1-5
实训5框架网页
实训目的
为了让学生掌握如何创建框架；设定框架的内容和样式；学会制作浮动的框架等操作。
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训内容
创建框架
设定框架内容和样式，保存框架
设置无框架内容
制作浮动框架
实训要求
要求学生能利用框架来进行布局网页，设定框架内容和样式；设置框架的内容；制作可以浮动的框架。
实训步骤
在新建文档对话框的“框架集”类型中，选择左侧固定上方嵌套的框架模式，创建一个新的框架页；
插入图片和按钮，以及相关的文字内容；
在属性面板中设置文字和图片的格式属性；
在左侧列出导航链接，制作链接对应的子页面，最终实现点击左侧框架的链接，右面的框架会跳转到相应的子页面；
保存文件，一定要分别保存框架的各个部分，每一部分为一个HTML文件，总的框架是一个HTML文件，预览文件效果；
实训过程注意事项
插入的图像必须放在站点文件夹下的image文件夹内；
框架的保存分几个部分；
实训思考
框架的保存应注意有几个文件要保存？
如何设置框架中的链接？
图1-6
实训6超级链接
实训目的
为了让学生掌握如何利用超级链接来制作页面；了解主页的创作步骤；掌握链接各种方式的制作方法与步骤。
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训内容
插入横向导航条
设置文本链接
插入左置导航栏
创建外部超级链接
创建内部超级链接
创建E-MAIL链接
创建锚点链接
创建下载文件的链接
创建空链接
创建脚本链接
实训要求
要求学生能利用链接来制作网页；掌握链接几种设置的方法和步骤；制作主页的步骤和要求等内容。
实训步骤
创建一个上方固定左侧嵌套的框架页面；
在框架的上部分插入相关的图片或网站的LOGO及BANNER；
左侧插入相关的文字，作为左侧导航栏，右侧框架页面中输入相关文字；
在右侧框架页面中，分别以3段文本段落标题作为锚点，在页面上部设置锚记链接；
在左下部设置“友谊链接”到相关的网站，设置“联系我们”的E-MAIL链接；创建“下载”到下载文件的链接；
保存文件，预览文件效果；
实训过程注意事项
导航栏要注意分类，避免重复出现；
锚点的名称要注意不能重名。
图1-9
实训7表单网页
实训目的
为了让学生掌握如何创建表单网页；了解各个表单对象属性的设置；熟练掌握各个表单对象不同的使用范围。
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材。
实训内容
插入表单
插入表单对象：
文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单
实训要求
要求学生能利用表单来创建网页；掌握设定表单的内容和表单对象；掌握设置各个表单对象的属性值等内容。
实训步骤
打开02.html页面，按图11所示，分别合并前两行单元格和中间两列单元格，在合并后的单元格内插入一个表单，为插入的表单命名为login；
在表单中插入文字内容及对应的表单对象：
文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单
设置各个表单对象的属性值:
将客户姓名、E-MAIL、具体地址的文本域依次命名为name、email、address；字符宽度和最多字符数分别为12、12，24、24，30和30，类型都为单行文本域；
最后一个文本域输入框命名为jianyi，类型为多行文本域，字符宽度和行数依次为50、8，文本域载入时显示值为“请在此输入你的建议”
设置表单中的客户姓名为必填项，E-MAIL为必填项且必为邮件地址；
设置表单以邮件发送的方式发送到邮箱zzyan@;
保存文件，预览文件效果；
实训过程注意事项
在一个网页中只能插入一个表单，但在一个网页中可以有多个表单对象；
各个表单对象注意在属性面板中定义其名称。
实训思考
表单对象中的插入两个单选按钮，如何命名？
如何设置密码域？
文本字段与文本区域如何转换？
如何设置检查表单的行为？
页面效果图
图1-11
实训8美化网页
实训目的
为了让学生了解使用CSS样式来美化网页的方法，掌握创建CSS样式的方法和步骤，以及利用CSS滤镜来制作文字特效等操作。
素材准备
准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。
实训课时：
2学时
实训内容
CSS样式的新建：
CSS样式的编辑与修改：
CSS样式的应用：
利用CSS滤镜来特效文字效果：
制作光晕字、阴影字、遮罩字、动感字
实训要求
要求学生掌握CSS样式的制作方法；掌握CSS样式的应用与修改操作；了解利用CSS样式来制作文字特效等操作。
实训步骤
打开02.html页面，在此页面中创建CSS样式：
以css-01为名保存，设置字体为隶书，字号为16点数，颜色为＃CC66FF，带下划线。
对页面中左、右两部分文字分别设置空链接。
使用CSS样式：
对左边的链接文字套用此样式。
修改CSS样式：
对表格的框线、背景图片、链接样式等进行设置，并重新应用到所指定的部分；
运用CSS滤镜来制作文字特效：
光晕字、阴影字、遮罩字、动感字的制作；
保存页面，预览效果图；
实训过程注意事项
CSS样式应保存到网站站点目录下；
CSS样式的名称应注意不能同名；
页面效果图
图1-13
升级会员 