《网页设计实训》实训指导书
- 格式：doc
- 大小：7.19 MB
- 文档页数：17
《网页设计实训》 实 训 指 导 书 一、实训的目的及功能定位 1. 应用远程站点管理的识和技能； 2. 应用本地站点管理的知识和技能； 3. 应用网页页面设计的知识和技能； 4. 应用网页制作的知识和技能； 5. 培养以上知识和技能的综合应用能力。 二、实训总体要求 1. 自己负责作品的保存，注意存放到机房被误删； 2. 可独立完成也可2-3人合作完成，不可以从网上下载网页直接交上来。可以模仿某个网站； 3. 站点设计合理、管理有序、无多余文件和文件夹、大小合适； 4. 可以使用媒体（音频和视频文件）文件 5. 首页命名要规范，存放位置要正确，不可以是zhuye.htm、main.htm、我的主页.htm等。主页文件名应该使用index或default等。其他文件或文件名命名也要规范，不使用汉字或带有空格的名称。最好是符合各种系统命名规则； 6. 站点至少要有二层结构，页面数不得少于3页； 7. 自选主题，主题内容要合法、健康、实用； 8. 网页要有落款、版权说明； 9. 要仔细考虑网站定位。分析面向的潜在访客群体的需求特点，选择内容和版式； 10. 网站主题突出、内容丰富； 11. 网站风格统一，设计适合于主题的LOGO； 12. 各页面设计合理、美观，有创意。不要太花哨或太孩子气。要有网页平面设计过程，不要只是各种元素的随意拼凑； 13. 图片动画选用要适合主题，不要在网页中插入不相干的图片。适用于各种显示器的分辨率和颜色； 14. 不要太宽，否则显示器分辨率小时会出现水平滚动条； 15. 各个页面之间的链接要合理有效，路径要正确（相对路径）； 16. 合理使用css样式。 17. 注意网站的大小，图片保存格式和图片大小要合适； 三、实训学时 总学时30学时 四、实训任务
实 训 一 1. 背景知识 根据本单元所学的色彩应用的知识，再结合本单元所学的Fireworks软件操作的知识，制作静态图像及动态图像的效果图，能够独立设计网页平面图。 2. 实训准备工作 将实训的样图及相应的图像及文本素材发送到学生主机，以供学生参考使用。 3. 实训要求 （1） 设计web页面 要求： 1) 布局页面，规划网页内容； 2) 绘制页面分区，填充网页内容，切割图片，导出网页，如图所示。
图 网站首页的设计 4. 课时安排：2课时 5. 实训指导 步骤1 在上一个实训的基础上继续本实训的WEB页面的制作。画布大小更改为778*580。 步骤2 整个网页的上半部分已经设计好，只须对下半部分进行设计。 下面的规划为分成两大块，左侧是一个装饰的菊花图片，右侧分为四块，新闻快递、学院地图导航、招生咨询、学习园地。用图片、线框、色块装饰。 步骤3 用切片工具切割图片，最后导出为网页。
实 训 二 1. 背景知识 根据本单元所学的色彩应用的知识，再结合本单元所学的Fireworks软件操作的知识，制作静态图像及动态图像的效果图，能够独立设计网页平面图。 2. 实训准备工作 将实训的样图及相应的图像及文本素材发送到学生主机，以供学生参考使用。 3. 实训要求 (1) 处理一幅位图效果 要求：风景、汽车、人物有机融合在一起，如图所示。 (2) 制作苹果标志矢量图形 要求：利用矢量工具绘制苹果标志，如图所示
图 制作矢量图形 图 位图效果图 4. 课时安排：2课时 5. 实训指导 (1) 处理一幅位图效果 步骤1 打开汽车图像（car.jpg），用多边形套索工具，把汽车抠出来，然后复制到风光图像（风光.jpg）中，使用发光滤镜（颜色为白色）。 步骤2 打开明星图像（张柏芝.jpg），添加位图蒙版，单击“铅笔”工具，沿人物图像的边缘绘制，最后闭合，然后单击“油漆桶”工具，用黑色填充周围区域，选中人像图像复制到风光图像中，克隆人像图像，然后选中此图像，在“属性”面板中将混合模式改为屏幕，不透明度改为60，另一人像图像缩小至50%，完成。 (2) 制作苹果标志矢量图形 步骤1 画一个正圆，上节点向下提五个像素，左右节点向外提五个像素，显得苹果较为丰满，然后上下用一个小椭圆打孔，将上下节点的调节杆调节为一个水平节线。 步骤2 右侧用一个小椭圆打孔，效果为大苹果被咬了一口。 步骤3 苹果把采用两个圆的交集。 步骤４ 苹果整个有一个滤镜效果，为内发光，颜色为绿色，高度为３。 步骤5 然后苹果上侧和苹果把上侧泛白处，采用的是两个圆的交集，然后填充为白色，有羽化，完成。
实 训 三 1. 背景知识 根据本章所学的在网页中嵌入多媒体对象的方法，再综合前面所学的创建站点及编辑网页的知识，制作功能完善的多媒体站点。 2. 实训准备工作 将相应的网页草图和网页素材，如：音频、视频、flash等文件，以及相关的软件，如：flashpaper软件准备好，发送到学生主机中，以供学生参考使用。 3. 实训要求 (1) 制作多媒体站点首页 根据给定的网页草图及相关素材，布局页面，然后填充网页元素，首页内容包括：Flash影片、Flash文本、Flash按钮、Flash元素等及修饰的一些图像。首页效果图如图所示。 (2) 制作站点内的其它网页 要求包括：嵌入视频的网页、Flash mtv网页、Flash Video网页、点播音乐的网页，最后添加页面之间的链接。 4. 课时安排：2课时 5. 实训指导
图 多媒体站点首页 步骤1 首先制作多媒体站点的首页，首页背景颜色为深蓝色（#012F47），该网页的布局可采用表格的方式。 步骤2 在第一行单元格中，插入Flash文本：悠悠在线视听；在第二行单元格中，连续插入Flash按钮，构成导航条；在第三行插入一个图像：images/001.jpg。 第四行拆分为二个单元格，第一个单元格插入一幅图像：images/once.jpg，并输入文本：李玟：爱你在每一天，第二个单元格插入Flash元素：一组王菲的图片切换显示； 最后一行插入一幅图像：images/002.jpg；在代码视图中和添加背景音乐的代码：。 步骤3 制作其它的多媒体页面 Flashvideo.htm：插入一个Flash视频文件，fla/02.flv。 Flashmtv.htm：插入一个Flash影片文件，fla/liwenonce.swf。 Flashpaper.htm：插入一个FlashPaper文件，fla/flashpaper.swf。 Shiping.htm：插入二个视频文件，shiping/xuruyun.wmv和shiping/anmei.rm。 Yinping.htm：插入一个音频文件，yinping/halfmoon.mp3。 步骤4 打开首页，选中某个Flash导航条按钮，单击“属性”面板中“编辑”按钮，打开“插入Flash按钮”对话框，添加链接地址，分别链接到相应的页面。
实 训 四 1. 背景知识 本任务所学的插入表单、表单对象以及Dreamweaver内部行为的检验表单等知识，再结合前面所学的网页编辑、页面排版的知识，制作反馈表单。 2. 实训准备工作 实训素材及网页样图，发送到学生的主机中，以供学生参考使用。 3. 实训要求 (1) 创建一个空白表单。插入表格，利用表格排版网页，并插入图片及应用CSS样式美化网页。 (2) 插入表单对象，并通过“属性”面板设置其属性。 (3) 最后利用Dreamweaver内部行为验证表单。 4. 课时安排：2课时 5. 实训指导 步骤1 首先创建一个本地站点，在本地站点中新建一个文件夹images，将图像素材保存在此文件夹。创建一个网页，保存网页为biaodan.htm，插入一幅图像，文件名为：images/bt.jpg。 步骤2 单击“插入”栏｜“表单”选项｜“表单”按钮，插入一个表单，在“文档”窗口中出现一个红色的虚线框，在“属性”面板中，动作文本框中输入：“mailto:电子邮件地址”。 步骤4 单击虚线框内，然后插入一个表格，采用表格进行排版。
图 反馈表单效果图 步骤5 插入一个“文本字段”对象，输入标签文字为：您的姓名，选中“文本字段”对象，在“属性”面板中设置文本字段的属性，文本域为：name，类型为：单行。 步骤6 同理继续插入单选按钮组、复选框组、滚动列表、下拉菜单、文本域等，并设置其属性，然后插入“提交”按钮和“重置”按钮。 选中文档窗口左下角
实 训 五 1. 背景知识 根据本任务所学的CSS样式表的知识，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。 2. 实训准备工作 实训素材、网页元素及网页样图，发送到学生的主机中，以供学生参考使用。 3. 实训要求 (1) 利用CSS样式表制作精美的网页，如图所示。
图 网页效果图 要求：根据给定的素材，首先设置页面属性 其次定义特定 Id的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入内容，最后通过定义类，设置图像CSS样式。 (2) 在网页中添加CSS扩展效果：滤镜 要求：制作：投影字体、发光字体 、图像的透明效果、图像的波浪效果等，如图所示。 4. 课时安排：2课时 5. 实训指导 (1) 利用CSS样式表制作精美的网页 步骤1 新建一个本地站点，站点内新建两个子文件夹，images和CSS，将图
图 滤镜效果
