网页中级学习案例.doc

《网页设计制作员》中级 教 学 案 例 荟 萃 目 录 一、设计制作网页内容文字和图表效果。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。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”内的“文件夹”中的网页文件，参照样张“.bmp”，完成论坛注册页面的制作，具体操作内容如下： 编辑素材库文件夹“” 内的“zc.html”，按照要求插入图片并添加文字，为页面的布局表格设置背景，页面设置统一的字体，制作 “检查用户名”区域内容,制作页面的“填写信息”区域内容,保存操作结果. 2、操作要求 （1）学员务必在指定位置建立学员文件夹，并在其下建立“1.1.1”子目录，将所有操作结果保存至该文件夹下。 （2）用Dreamweaver编辑素材库文件夹“”的“zc.html”，参照效果图样张“.bmp”，在布局表格内适当位置插入文件夹“”中的图片“images\zc-1.jpg”，并添加说明文本“用户注册” （3）用素材库文件夹“”中的图片“images\zc-4.gif” 设置布局表格单元格背景 （4）用CSS样式表为“zc.html”整个页面布局表格的单元格，设置统一的字体:大小：12像素；行高：2倍行高；CSS样式采用内部标签形式。 （5）参照效果图样张“.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”内的“文件夹”中的网页文件，参照样张“.bmp”，完成页面的制作，具体操作内容如下： （1）使用Dreamweaver创建“留言板”站点 （2）依据效果图样张.bmp创建留言板网页布局表格,在表格第一行制作留言板头部分,编辑表格第二行,在表格第三行制作“请在此留言”部分 (3）参照效果图样张.bmp完成留言板的制作，并保存结果 2、操作要求 （1）学员务必在指定位置建立学员文件夹，并在其下建立1.1.2子目录，将所有操作结果保存至该文件夹下。 （2）使用Dreamweaver创建“留言板”站点，具体要求如下： a）使用Dreamweaver在指定保存位置创建“message2.2”站点文件夹 b）复制未全部完成的留言板网页素材库文件夹“”内的网页html文件及图片至“留言板”站点文件夹目录； （3）依据效果图样张.bmp创建留言板网页布局表