网页中级学习案例.docx
《网页中级学习案例.docx》由会员分享，可在线阅读，更多相关《网页中级学习案例.docx（44页珍藏版）》请在冰豆网上搜索。
网页中级学习案例
《网页设计制作员》中级
教
学
案
例
荟
萃
目录
一、设计制作网页内容文字和图表效果。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
3
二、制作Gif动画。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
8
三、制作flash常规效果。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
12
四、设计制作网页动态效果。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
15
五、设置完成并检验网页动态效果。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
17
六、网页优化及管理维护。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
19
七、制作网站主要页面。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
。
21
课程安排
1
2
3
4
5
6
7
8
9
5月28
6月11
6月18
6月25
7月2
7月9
7月16
7月23
待定
网页基础及Fireworks做Gif动画
Flash动画
Flash动画
Dreamweaver
入门
Dreamweaver
进阶
Dreamweaver制作较复杂网页
Photoshop
Dreamweaver
制作网页
网页动态效果、优化、维护
总复习
2011年5月
一、设计制作网页内容文字和图表效果
习题1.1.1
1、操作内容：
利用素材库文件夹“网页设计制作员素材\1.1.1”内的“1.1.1.2文件夹”中的网页文件，参照样张“1.1.1.1.bmp”，完成论坛注册页面的制作，具体操作内容如下：
编辑素材库文件夹“1.1.1.2”内的“zc.html”，按照要求插入图片并添加文字，为页面的布局表格设置背景，页面设置统一的字体，制作“检查用户名”区域内容,制作页面的“填写信息”区域内容,保存操作结果.
2、操作要求
（1）学员务必在指定位置建立学员文件夹，并在其下建立“1.1.1”子目录，将所有操作结果保存至该文件夹下。
（2）用Dreamweaver编辑素材库文件夹“1.1.1.2”的“zc.html”，参照效果图样张“1.1.1.1.bmp”，在布局表格内适当位置插入文件夹“1.1.1.2”中的图片“images\zc-1.jpg”，并添加说明文本“用户注册”
（3）用素材库文件夹“1.1.1.2”中的图片“images\zc-4.gif”设置布局表格单元格背景
（4）用CSS样式表为“zc.html”整个页面布局表格的单元格，设置统一的字体:
大小：
12像素；行高：
2倍行高；CSS样式采用内部标签形式。
（5）参照效果图样张“1.1.1.1.bmp”，按以下要求制作“zc.html”页面上的“检查用户名”区域内容
a）为给定文本设定CSS样式。
b）为布局表格特定位置设定CSS样式，并应用该样式。
c）在布局表格内适当位置添加给定文本，并为文本内容应用CSS样式。
d）在布局表格内适当位置添置和制作表单以及表单对象，并设置表单对象的动作属性为无。
（6）按以下要求制作“zc.html”页面上的“填写信息”区域内容
a）在布局表格适当位置，按效果图样张，添加文本“（带*的为必填项）”，按效果图设置文本颜色和对齐方式。
b）参照效果图，在布局表格适当位置制作嵌套表格并在表格内制作“提示问题”、“性别”、“电子邮件”表单项。
c）为文本“推荐：
QQ邮箱”设置链接“”，为“sogou邮箱”设置链接“”
e）参照效果图样张，在布局表格的适当位置插入相应表单元素，表单对象的动作属性为“提交”。
（7）将操作结果相关文件全部保存至学员文件夹下1.1.1目录。
习题1.1.2
1、利用素材库文件夹“网页设计制作员素材\1.1.2”内的“1.1.2.2文件夹”中的网页文件，参照样张“1.1.2.1.bmp”，完成页面的制作，具体操作内容如下：
（1）使用Dreamweaver创建“留言板”站点
（2）依据效果图样张1.1.2.1.bmp创建留言板网页布局表格,在表格第一行制作留言板头部分,编辑表格第二行,在表格第三行制作“请在此留言”部分
（3）参照效果图样张1.1.2.1.bmp完成留言板的制作，并保存结果
2、操作要求
（1）学员务必在指定位置建立学员文件夹，并在其下建立1.1.2子目录，将所有操作结果保存至该文件夹下。
（2）使用Dreamweaver创建“留言板”站点，具体要求如下：
a）使用Dreamweaver在指定保存位置创建“message2.2”站点文件夹
b）复制未全部完成的留言板网页素材库文件夹“1.1.2.2”内的网页html文件及图片至“留言板”站点文件夹目录；
（3）依据效果图样张1.1.2.1.bmp创建留言板网页布局表格，具体要求如下：
a）用Dreamweaver编辑“message.html”，按效果图样张，在布局表格相应单元格内嵌套一个3行1列，宽度为640像素的表格；
（4）参照效果图样张1.1.2.1.bmp，应用CSS+DIV技术，在表格第一行制作留言板头部分，具体要求如下:
a）在相应单元格内嵌套一个id和名称均为“message_top”的div标签。
b）在css.css中为div标签“message_top”定义一个CSS样式。
要求设置字体属性为：
宋体、14像素、2倍行高、白色；背景颜色绿色（#64C31F）；边框为1像素的深绿色（#287700）实线。
c）在div标签内输入文本“留言板”，并居中对齐
（5）参照效果图样张1.1.2.1.bmp，编辑表格第二行，具体要求如下:
a）在表格第二行内插入水平线
（6）参照效果图样张1.1.2.1.bmp，应用CSS+DIV技术，在表格第三行制作“请在此留言”部分，具体要求如下:
a）在相应单元格内嵌套一个id和名称均为“message_main”的div标签。
b）在“message_main”div标签内嵌套一个2行1列宽度为100%的表格。
c）为“message_main”div标签在css.css中定义一个css类。
要求：
文本属性为：
宋体、12像素、1.5倍行高、深绿色（#287700）；背景颜色为：
浅绿色（#DEF1B1）；边框样式从效果图判断，粗细为1像素，深绿色（#287700）。
d）在嵌套表格的第1行输入文本“请在此留言”，居中显示。
e）在嵌套表格的第2行，再嵌套一个5行3列，宽度为100%的表格。
（7）参照效果图样张1.1.2.1.bmp完成留言板的制作，并保存结果，具体要求如下：
a）表单名：
messageForm，表单操作：
save.aspx，method：
post；
b）“您的大名”表单域名称：
yourname，类型：
text；
c）“QQ”表单域名称：
qqno，类型：
text；
d）“来自”表单域名称：
fromcity，类型：
text；
e）“邮箱地址”表单域名称：
mailbox，类型：
text；
f）“性别”表单域名称：
sex，类型：
select，选项：
保密、男、女；
g）“主页”表单域名称：
webpage，类型：
text；
h）“内容”表单域名称：
messageinfo,类型：
textarea；
习题1.1.3
1、操作内容：
利用素材库文件夹“网页设计制作员素材\1.1.3”内的“1.1.3.2文件夹”中的网页文件，参照样张“1.1.3.1.bmp”，完成页面的制作，具体操作内容如下：
（1）使用Dreamweaver创建“神话”站点，并导入素材库文件夹“1.1.3.2”内容；
（2）编辑首页“index.html”，创建login表单；
（3）参照效果图样张1.1.3.1.bmp，在login表单中插入表单域；
（4）使用代码编辑方式，在插入的表单标签后添加代码；
（5）参照效果图样张1.1.3.1.bmp，在指定区域插入图片。
2、操作要求
（1）学员务必在指定位置建立文件夹，并在其下建立“1.1.3”子目录，将所有操作结果保存至该文件夹下。
（2）使用Dreamweaver创建“神话”站点，并导入素材库文件夹“1.1.3.2”内容，具体要求如下：
a）使用Dreamweaver在指定保存位置创建“Shenhua1.1.3”站点文件夹
b）复制素材库文件夹“1.1.3.2”内的网站首页html文件及图片文件夹至“Shenhua1.1.3”站点文件夹目录；
（3）编辑首页“index.html”，创建login表单，具体要求如下：
a）在id为“login”的div标签区域内，插入一个表单标签，id和表单名称均为“form1”，方法为“post”；
（4）参照效果图样张1.1.3.1.bmp，在login表单中插入表单域，具体要求如下:
a）插入一个id和名称均为“button”的图像域，显示图片“images/808.jpg”，Tab键索引值为4
b）在div.css中为“button”图像域新建一个css类，设置方框浮动方式为右对齐，方框上边界为5像素
c）参照效果图样张1.1.3.1.bmp，输入文本“用户名：
”，在文本后面，插入一个id和名称均为“login_name”，类型为“文本”的文本域，Tab键索引值为1
d）参照效果图样张1.1.3.1.bmp，输入文本“密码：
”，在文本后面，插入一个id和名称均为“login_pass”，类型为“密码”的文本域，Tab键索引值为2
e）参照效果图样张2.3.1.bmp，输入文本“通行证：
”，在文本后面，插入一个id和名称均为“login_number”，类型为“文本”的文本域，Tab键索引值为3
f）将“div.css”中修改相应的CSS类，将插入的文本域的背景颜色修改为：
#313131
（5）使用代码编辑方式，在插入的表单标签后添加如下代码:
（6）参照效果图样张1.1.3.1.bmp，在指定区域插入图片，具体要求如下:
a）参照效果图样张，在id为“pic”的div标签区域内插入三张图片“images/812.gif”、“images/813.gif”、“images/814.gif”。
习题1.1.4
1、利用素材库文件夹“网页设计制作员素材\1.1.4”内的“1.1.4.2文件夹”中的未全部完成的留言板网页素材库文件，参照留言板”页面效果图样张“1.1.4.1.bmp”，完成页面的制作，具体操作内容如下：
（1）使用Dreamweaver创建“莘莘学子”站点，并导入素材库文件夹“1.1.4.2”内容；
（2）编辑导入素材库文件内的“css.css”中的body类，修改body属性；
（3）参照效果图样张1.1.4.1.bmp，在留言板区域内相应单元格内插入留言板顶部居中对齐的div标签；
（4）参照效果图样张1.1.3.1.bmp，在留言板区域内相应单元格内插入留言板留言信息居中对齐的div标签。
2、操作要求
（1）学员务必在指定位置建立学员文件夹，并在其下建立“1.1.4”子目录，将所有操作结果保存至该文件夹下。
（2）使用Dreamweaver创建“莘莘学子”站点，并导入素材库文件夹“1.1.4.2”内容，具体要求如下：
a）使用Dreamweaver在指定保存位置创建“Xinxin1.1.4”站点文件夹
b）复制素材库文件夹“1.1.4.2”内的网页html文件及图片文件夹至“Xinxin1.1.4”站点文件夹目录；
（3）编辑导入素材库文件内的“css.css”中的body类，修改body属性，具体要求如下：
a）设置文本属性为：
宋体、12像素、1.3倍行高、深灰色（#666666）；
（4）参照效果图样张1.1.4.1.bmp，在留言板区域内相应单元格内插入留言板顶部居中对齐的div标签，具体要求如下:
a）参照效果图样张，在留言板区域内，在相应单元格内插入一个id为“message_top”，居中对齐的div标签，
b）在“message_top”内添加文本“请在此留意”
c）为div标签“message_top”，在css.css内为“message_top”div标签设置css类。
文本属性为：
宋体，14像素，加粗，黑色，1.5倍行高；背景颜色为：
#C8EA9D；边框样式参照样张，边框颜色为：
#006600，边框粗细为1像素。
（5）参照效果图样张1.1.4.1.bmp，在留言板区域内相应单元格内插入留言板留言信息居中对齐的div标签，具体要求如下:
a）参照效果图样张，在留言板区域内，在相应单元格内插入一个id为“message_main”，居中对齐的div标签
b）插入一个类型为“文本”，id和名称均为“name”的文本字段，标签文字为“您的姓名：
”；Tab索引键为1；文本域字符宽度为10。
c）插入一个id和名称均为“sex”的列表/菜单，标签文字为“性别：
”；Tab索引键为2；列表项为：
男、女。
d）插入一个类型为“文本”，id和名称均为“age”的文本字段，标签文字为“年龄：
”；Tab索引键为3；文本域字符宽度为10。
e）插入一个id和名称均为“content”的文本区域，标签文字为“内容：
”；Tab索引键为4；字符宽度为40，行数5。
f）插入一个id和名称均为“ok”的按钮，按钮文本为“提交内容：
”；Tab索引键为5，动作为提交表单。
g）为div标签“message_main”，在css.css内为“message_main”div标签设置css类。
文本属性为：
宋体，12像素，黑色，1.5倍行高；背景颜色为：
#EFF9E3；边框样式参照样张，边框颜色为：
#006600，边框粗细为1像素。
习题1.1.5
1、利用素材库文件夹“网页设计制作员素材\1.1.5”内的未全部完成的网站首页素材库文件夹“1.1.5.2”，参照“翠海幼儿园”网站首页效果图样张“1.1.5.1.bmp”，完成页面的制作，具体操作内容如下：
（1）使用Dreamweaver创建“翠海幼儿园”站点，并导入素材库文件夹“1.1.5.2”内容；
（2）编辑“index.html”文件，定义一个仅对文档内部起效名为“myfont”的CSS类；
（3）参照效果图样张1.1.5.1.bmp中“登录区域”，制作网页。
2、操作要求
（1）学员务必在指定位置建立学员文件夹，并在其下建立“1.1.5”子目录，将所有操作结果保存至该文件夹下。
（2）使用Dreamweaver创建“翠海幼儿园”站点，并导入素材库文件夹“1.1.5.2”内容容，具体要求如下：
a）使用Dreamweaver在指定保存位置创建“Cuihai1.1.5”站点文件夹
b）复制素材库文件夹“1.1.5.2”内的网页html文件及图片文件夹至“Cuihai1.1.5”站点文件夹目录；
（3）编辑“index.html”文件，定义一个仅对文档内部起效名为“myfont”的CSS类，具体要求如下：
a）设置文本属性为：
宋体、12像素、1.3倍行高、深灰色（#919191）；
b）编辑index.html,设置“幼儿园简介”中的文本应用该类
（4）参照效果图样张1.1.5.1.bmp中“登录区域”，制作网页，具体要求如下:
a）帐号单元格内插入一个id为“div_name”，居中对齐的div标签。
b）在“div_name”内插入一个类型为“文本”，id和名称均为“name”的文本字段，标签文字为“帐号：
”；Tab索引键为1；文本域字符宽度为8。
c）帐号单元格内插入一个id为“div_pass”，居中对齐的div标签。
d）在“div_pass”内插入一个类型为“密码”，id和名称均为“password”的文本字段，标签文字为“密码：
”；Tab索引键为2；文本域字符宽度为8。
e）在style.css中为“div_name”标签和“div_pass”标签，共同建立一个css类，设置文本颜色为灰色“#919191”。
f）在登录按钮单元格内插入一个id和名称均为“login”的图像域，使用素材库文件夹中图片“images/119.gif”
二、制作Gif动画
习题1.2.1
1、“FlowerBar”花艺网站需要制作一段小的loading动画，模拟网页加载效果，该段动画将提供给编程人员实现加载效果。
参照素材库文件夹“网页设计制作员素材\1.2.1”文件夹内的动画样张“1.2.1.1.gif”制作加载动画，操作内容如下：
（1）使用Fireworks新建动画文档
（2）在新建的动画文档中添加文本
（3）设置文本属性实现动画效果
（4）在新建的动画文档中绘制白色矩形
（5）制作白色矩形的动画效果
（6）保存操作结果和操作的历史记录
2、操作要求
（1）学员务必在指定位置建立学员文件夹，并在其下建立“1.2.1”子目录，将所有操作结果保存至该文件夹下。
（学员文件夹命名：
“学员姓名”）
（2）使用Fireworks新建动画文档，具体要求：
a）大小为“710像素×160像素”
b）背景颜色为黑色
（3）在适当位置添加文本，具体要求：
a）文本：
“loading”
b）文本字体属性：
“Arial”、字体大小为“18”，白色，加粗；
（4）设置文本属性实现动画效果，具体要求：
a）设置属性，使得该文本在整个动画中保持不变。
（5）按样张在新建的动画文档中绘制白色矩形，具体要求：
a）大小：
1像素×45像素
b）位置（80，40）
（6）按样张制作白色矩形的动画效果，具体要求：
a）动画效果：
矩形宽度从1像素变换到450像素
b）整个动画共12帧。
（7）保存操作结果和操作的历史记录
a）将图像以“1.2.1.gif”为文件名，导出至指定学员文件夹下，要求导出后的图像文件，能以动画形式播放。
b）用“1.2.1.png”保存fireworks文档到学员文件夹，并保存所与操作历史纪录为命令“1.2.1”。
习题1.2.2
1、参照素材库文件夹“网页设计制作员素材\1.2.2”文件夹内的Fireworks制作的扫光字GIF动画样张“1.2.2.1.gif”制作动画，操作内容如下：
（1）使用fireworks新建动画文档；
（2）参照动画样张“1.2.2.1.gif”在动画文档中添加文本，并做调整；
（3）制作文本的立体效果并给文字填充颜色；
（4）在文本上放绘制矩形填充白色并羽化；
（5）参照动画样张“1.2.2.1.gif”完成扫光字动画效果制作；
（6）保存操作结果和操作的历史记录。
2、操作要求
（1）学员务必在指定位置建立学员文件夹，并在其下建立“1.2.2”子目录，将所有操作结果保存至该文件夹下。
（学员文件夹命名：
“学员姓名”）
（2）使用fireworks新建动画文档，具体要求如下：
a）大小为“710像素×510像素”
b）背景颜色为黑色
（3）参照动画样张“1.2.2.1.gif”在动画文档中添加文本，并做调整，具体要求如下：
a）参照样张“1.2.2.1.gif”字体输入文字”CND”用白色填充，少许调整字符间隔；
（4）制作文本的立体效果并给文字填充颜色，具体要求如下：
a）通过复制文字并平移，制作文字的立体效果；
b）按照样张给文字填充颜色；
（5）在文本上放绘制矩形填充白色并羽化，具体要求如下：
a）用矩形选框工具画一个矩形填充白色，羽化10象素，合理放置该矩形
（6）参照动画样张“1.2.2.1.gif”完成扫光字动画效果制作，具体要求如下：
a）利用白色羽化矩形制作白色的闪光效果；
b）通过将白色的闪光效果帧一帧往后移来完成扫光字动画效果制作
c）动画共十帧
d）最后一帧白色闪光效果需要回到第一帧的状态
（7）保存操作结果和操作的历史记录
a）导出效果至学员文件夹，文件名“1.2.2.gif”，图片色彩选择256色，并以“1.2.2.png”文件名保存fireworks文件
b）保存所有操作历史记录为命令“1.2.2”。
习题1.2.3
1、参照素材库文件夹“网页设计制作员素材\1.2.3”文件夹内的动画样张“1.2.31.gif”制作动画，操作内容如下：
（1）使用fireworks新建动画文档；
（2）参照动画样张“1.2.3.1.gif”在动画文档中添加文本，并做调整；
（3）将文本转换为符号，并设置为动态符号；
（4）设置动态符号移动的路径和角度；
（5）参照动画样张“1.2.3.1.gif”完成动画效果制作；
（6）保存操作结果和操作的历史记录。
2、操作要求
（1）学员务必在指定位置建立学员文件夹，并在其下建立“1.2.3”子目录，将所有操作结果保存至该文件夹下。
（学员文件夹命名：
“学员姓名”）
（2）使用fireworks新建动画文档，具体要求如下：
a）大小为“210像素×90像素”
b）背景颜色为白色
（3）参照动画样张“1.2.3.1.gif”在动画文档中添加文本，并做调整，具体要求如下：
a）参照样张“1.2.3.1.gif”字体输入文字”wind”用黑色填充；
b）字体位置在场景的左上角；
（4）将文本转换为符号，并设置为动态符号，具体要求如下：
a）选中文字，转换成符号；
b）设置属性为Animation；
c）符号参数设置要求：
帧数量为10；透明度为0
（5）设置动态符号移动的路径和角度，具体要求如下：
a）实现动态符号的中心点从初始位置到场景的右下角的移动。
（6）参照动画样张“1.2.3.1.gif”完成动画效果制作，具体要求如下：
a）通过修改每一帧的透明度来实现，符号从无到有的动态效果
b）参照样张“1.2.3.1.gif”调节帧的播放速度
（7）保存操作结果和操作的历史记录
a）导出效果至学员文件夹，文件名“1.2.3.gif”，图片色彩选择128色，并以“1.2.3.png”文件名保存fireworks文件
b）保存所有的历史记录为命令“1.2.3”。
习题1.2.4
1、参照素材库文件夹“网页设计制作员素材\1.2.4”文件夹内的Fireworks制作的文字动画样张“1.2.4.1.gif”制作gif动画，操作内容如下：
（1）使用fireworks新建动画文档；
（2）参照动画样张“1.2.4.1.gif”在动画文档中添加文本，并做调整；
（3）通过重置帧对话框设置动画帧数量和属性；
（4）参照动画样张“1.2.4.1.gif”完成动画效果制作；
（5）保存操作结果和操作的历史记录。
2、操作要求
（1）学员务必在指定位置建立学员文件夹，并在其下建立“1.2.4”子目录，将所有操作结果保存至该文件夹下。
（2）使用fireworks新建动画文档，具体要求如下：
a）大小为“40像素×
升级会员 