《网页设计实训》实训指导书

《网页设计实训》实训指导书

一、实训的目的及功能定位

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。