网页中级学习案例.docx

1、网页中级学习案例网页设计制作员中级教学案例荟萃目 录一、设计制作网页内容文字和图表效果。3二、制作Gif动画。8三、制作flash常规效果。12四、设计制作网页动态效果。15五、设置完成并检验网页动态效果。17六、网页优化及管理维护。19七、制作网站主要页面。21课程安排1234567895月286月116月186月257月27月97月167月23待定网页基础及Fireworks做Gif动画Flash动画Flash动画Dreamweaver入门Dreamweaver进阶Dreamweaver制作较复杂网页PhotoshopDreamweaver制作网页网页动态效果、优化、维护总复习2011年5

2、月一、设计制作网页内容文字和图表效果习题1.1.11、操作内容： 利用素材库文件夹“网页设计制作员素材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编辑素材

3、库文件夹“1.1.1.2”的“zc.html”，参照效果图样张“1.1.1.1.bmp”，在布局表格内适当位置插入文件夹“1.1.1.2”中的图片“imageszc-1.jpg”，并添加说明文本“用户注册”（3）用素材库文件夹“1.1.1.2”中的图片“imageszc-4.gif” 设置布局表格单元格背景（4）用CSS样式表为“zc.html”整个页面布局表格的单元格，设置统一的字体:大小：12像素；行高：2倍行高；CSS样式采用内部标签形式。（5）参照效果图样张“1.1.1.1.bmp”，按以下要求制作“zc.html”页面上的“检查用户名”区域内容a)为给定文本设定CSS样式。b)为布局

4、表格特定位置设定CSS样式，并应用该样式。c)在布局表格内适当位置添加给定文本，并为文本内容应用CSS样式。d)在布局表格内适当位置添置和制作表单以及表单对象，并设置表单对象的动作属性为无。（6）按以下要求制作“zc.html”页面上的“填写信息”区域内容a)在布局表格适当位置，按效果图样张，添加文本“（带*的为必填项）”，按效果图设置文本颜色和对齐方式。b)参照效果图，在布局表格适当位置制作嵌套表格并在表格内制作“提示问题”、“性别”、“电子邮件”表单项。c)为文本“推荐：QQ邮箱”设置链接“”，为“sogou邮箱”设置链接“”e)参照效果图样张，在布局表格的适当位置插入相应表单元素，表单对

5、象的动作属性为“提交”。（7）将操作结果相关文件全部保存至学员文件夹下1.1.1目录。习题1.1.21、利用素材库文件夹“网页设计制作员素材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

6、.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技术，在表格

7、第一行制作留言板头部分，具体要求如下: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）在

8、相应单元格内嵌套一个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完成留言板的制作，并保

9、存结果，具体要求如下：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.31、操作内容： 利用素材库文件夹“网页设计

10、制作员素材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）

11、使用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）插入一个i

12、d和名称均为“button”的图像域，显示图片“images/808.jpg”，Tab键索引值为4b）在div.css中为“button”图像域新建一个css类，设置方框浮动方式为右对齐，方框上边界为5像素c）参照效果图样张1.1.3.1.bmp，输入文本“用户名：”，在文本后面，插入一个id和名称均为“login_name”，类型为“文本”的文本域，Tab键索引值为1d）参照效果图样张1.1.3.1.bmp，输入文本“密码：”，在文本后面，插入一个id和名称均为“login_pass”，类型为“密码”的文本域，Tab键索引值为2e）参照效果图样张2.3.1.bmp，输入文本“通行证：”，在文

13、本后面，插入一个id和名称均为“login_number”，类型为“文本”的文本域，Tab键索引值为3f）将“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.41、利用素材库文件夹“网页设计制作员素材1.1.4”

14、内的“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）学员务必在指定位置建立学员文件夹

15、，并在其下建立“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，在留言板

16、区域内相应单元格内插入留言板顶部居中对齐的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，在留言板区域内相应单元格内插入留言板留言信息居中对齐的d

17、iv标签，具体要求如下: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；

18、字符宽度为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.51、利用素材库文件夹“网页设计制作员素材1.1.5”内的未全部完成的网站首页素材库文件夹“1.1.5.2”，参照“翠海幼儿园”网站首页效果图样张“1.1.5.1.bmp”，完成页面的制作，具体操作内容如

19、下：（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）复制素材库文

20、件夹“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”的文本字段，标签文

21、字为“帐号：”；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.11、 “Flowe

22、r Bar”花艺网站需要制作一段小的loading动画，模拟网页加载效果，该段动画将提供给编程人员实现加载效果。参照素材库文件夹“网页设计制作员素材1.2.1”文件夹内的动画样张“1.2.1.1.gif”制作加载动画，操作内容如下：（1）使用Fireworks新建动画文档（2）在新建的动画文档中添加文本（3）设置文本属性实现动画效果（4）在新建的动画文档中绘制白色矩形（5）制作白色矩形的动画效果（6）保存操作结果和操作的历史记录2、操作要求（1）学员务必在指定位置建立学员文件夹，并在其下建立“1.2.1”子目录，将所有操作结果保存至该文件夹下。（学员文件夹命名：“学员姓名”）（2）使用Fire

23、works新建动画文档，具体要求：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”为文件名，

24、导出至指定学员文件夹下，要求导出后的图像文件，能以动画形式播放。b)用“1.2.1.png”保存fireworks文档到学员文件夹，并保存所与操作历史纪录为命令“1.2.1”。 习题1.2.21、参照素材库文件夹“网页设计制作员素材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”完成扫光

25、字动画效果制作；（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)

26、按照样张给文字填充颜色；（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”

27、。习题1.2.31、参照素材库文件夹“网页设计制作员素材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）使用firewo

28、rks新建动画文档，具体要求如下： 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”完

29、成动画效果制作，具体要求如下：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.41、参照素材库文件夹“网页设计制作员素材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像素