WEB网站及网页广告课程设计.doc

WEB网站及网页广告课程设计

———————————————————————————————— 作者：
———————————————————————————————— 日期：

2

个人收集整理 勿做商业用途

WEB网站及网页广告课程设计
指导书

2007年9月

9

WEB网站及网页广告课程设计要求

第一部分
网站设计要求:制作一个包含一个首页页面和2个二级页面的网站，网站内容围绕首页结构样式所示内容来建设。

一、 首页结构样式
站标（图）
www.zpqz。com
招聘求职网站（动画）

用户：

密码：
注册
登录

首页
就业动态
个人求职
企业招聘
就业指南
政策法规
就业咨询
技术专题
论坛

Copyright © 2007 ×××.com Inc. All rights reserved。 ××× 版权所有 联系方式 ×××@×××。 ×××
图1 首页样式要求
二、 首页要求
1、网页布局使用π型(三栏）结构，表格居中；
2、宽度按800*600的浏览分辨率设置，高度可以根据需要恰当设置;
3、网页背景或网页颜色自行设置（网页背景色不允许为白色）；
4、图1所示的所有文字自行设置字体、字号、颜色;
5、顶部以下内容自行添加相关文字及图片；
6、最后一行“……××× 版权所有”中的×××为制作者的班级和姓名；7、联系方式×××＠×××。 ×××为设计者的电子邮件地址,要加上E—mail链接；
8、在用户登录和注册的表单中，点击“注册”按钮能弹出用户注册表单页面（二级页面）；
9、点击“论坛”，要能链接到论坛页面（二级页面）；
10、主页上要设置浮动广告和弹出窗口广告，并要设置图像广告和Flash广告（浮动广告和弹出窗口广告中的图像内容要求及图像广告和Flash广告要求详见“第二部分：网页广告设计要求”)；
11、主页命名必须为index.htm或Default。htm。

三、二级页面要求
1、用户注册表单页面包含内容：

图2 表单页设计要求

2、论坛页面内容：
（1)采用“左侧固定，上方嵌套”的框架结构,如下图所示：

图3 论坛页设计要求
(2)右上侧框架（top。htm）内容为标题，插入广告图像要求详见“第二部分：网页广告设计要求”。左侧框架(left。htm）为目录内容，框架页面内容自定,右下框架（main.htm）为主要内容显示；
（3)在left.htm中点击链接后，在main。htm框架显示链接的内容。

第二部分
网页广告设计要求：在WEB网站页面内容的基础上使用Flash和Firework制作站标和设计宣传网站的动画及图片广告.
一、 使用Fireworks设计首页上的站标，大小自定，要求包含“www。zpqz。com”字样及图片，大小应与网页布局相匹配，站标应简单、醒目，能体现网站的风格。
二、 使用Flash设计首页页眉的动画广告，广告大小为468×60像素，要求包含“招聘求职信息平台”字样及图片，广告应运用元件，引导或遮罩等方法完成运动渐变动画广告或形状渐变动画广告的制作。
三、 使用Fireworks设计首页上的浮动广告,广告大小为120×60像素，要求包含与网站主题相关的文字和图片,图片的背景色设为透明。
四、 首页上弹出窗口广告要求使用Flash制作,大小为300×200像素，要求包含与网站主题相关的文字和图片。
五、 框架页上侧框架的广告图像要求为GIF动画，大小自定，要求包含与网站主题相关的文字和图片.
六、 在网站的合适位置设置另外3个图像或动画广告,大小自定,图片或动画均可，内容要以宣传本网站为主,尽量采用多种不同技术。
注意:所有广告的文字及图像内容必须与网站内容相关联，广告能够实现点击链接(链接地址自行设定）。

第三部分
作业上交要求:
1、将站点文件及Flash源代码（fla文件，要与网页上对应的swf文件同名）和Fireworks源文件(PNG文件，要与网页上的对应图像文件同名），没有源文件的广告设计无成绩！！！！！，所有源文件可以集中放在站点的一个文件夹中。所有文件经最新版杀毒软件检查杀毒完毕后，使用winrar或winzip软件制作成压缩文件，并以班级和姓名命名,作为附件,08级同学发送到E-mail邮箱song_a＠，07级同学发送到wgsu@gxu。edu。cn;
2、书写设计说明书，内容包括:(1)网站网页、动画及图片广告制作介绍；（2)制作过程中遇到的问题及解决办法；(3）设计总结。设计说明书应不少于1200字，要求用16开纸打印上交。
3、站点文件要求包括：所有的网页；网页上所使用图像；动画及图片广告；相关的其余文件（如果有的话，如CSS样式文件等）。
4、站点文件和设计说明书必须在20周星期五之前发送或上交完毕，逾期后果自负。站点文件和设计说明书必须同时上交，缺其中一项以不及格论处！
5、所有设计及设计说明书书写要求独立完成，按学校规定，如果课程设计内容及说明书有25％及以上相同者,视为互相抄袭，成绩为不及格！

第四部分
附件:说明书范例
“招聘求职信息平台平台”网站及广告设计
说明书

一 整个网站的栏目规划和设定
此次设计和制作的“招聘求职信息平台平台"网站共划分为““就业动态、个人求职、企业招聘、就业指南、政策法规、就业咨询”技术专题、"7个子栏目,其中“就业动态、个人求职、企业招聘、就业指南、政策法规、就业咨询"有二级页面，加上其他加上弹出窗口广告、框架页面其他辅助页面整个网站共计12个页面。
作为一个主要的网站设计人员，在设计规划网站的时候，首先应该客观地站在浏览者的角度上考虑：如何让用户最直观、最需要看到的信息和网站所要表达的意图完美结合起来。 以下就是设计时

的一些要素和细节说明:
(一） 框架结构
1. 网站主页分成上下两个大表格,分别显示各自的导航栏目和正文内容，再以层次结构组织，各层次均设有分级导航条，以免浏览者迷路.放置网站主页和各二级页面的主要内容，可用滚动条拖动上下观看.并在主页提供一个未来供客户注册和登录用的窗口，
(二) 内容规划
主要是为浏览者提供各类行业内的新闻资讯居多,方便他们在最短时间内知晓新近发生的科技信息和资讯，最下边主要是放置网站设计人员的相关版权信息和E-mail链接,更方便浏览者找到我们。
(三) 颜色
主页的背景使用海蓝色作为主色调，协调统一了整个网站的视觉效果。同时运用多种橙色、青色等颜色搭配运用又能体现明快风格,使得整个网站的色调生动起来。
（四） 开发工具
一共使用了网页三剑客系列Dreamweaver MX/ Fireworks/ Flash MX 2004软件作为主要设计工具,另外加入了CSS极联样式表、时间轴设置等网页特效功能和行为。
(五） 文字编排和字体效果
网页的排版尽量做到错落有致,内容丰富但看起来不凌乱.
1.主要由中文网页常用的“宋体”、“黑体”为主构成整个页面；
2.运用粗体分别在主要页面标题来与其他正文文字做主次内容上的区别，另外版权信息和E—mail也用了粗体效果以更好地让客户找到.
（六） 图片
网站的首页主要是考虑信息量和客户浏览速度问题,故整个网站的图片用得不多，一张面积较大的背景图和几张小小图片，所以大大提高了浏览速度，背景图在点睛生动网站的同时，而且有效的减少了客户视觉浏览方向点，直接引导到更为吸引人的网页内容上。
（七） 页面设计
在一个优秀、专业的网站上是找不到任何一个空链接或死链接的情况，如果有这种情况会影响到用户对网站的评价，所以在制作的时候就尽量避免，暂时没有内容的页面干脆就不提供链接。
……(图片略）
二 网页广告制作介绍：
动画和图片广告设计请详见下表所示：

文档为个人收集整理，来源于网络本文为互联网收集,请勿用作商业用途

序 号
文件名
文件类型
尺寸
所在页面
链接页面
文 件 说 明

1

LOGO。gif

Gif图片

W:120
H：60

Index。htm

是网站的LOGO, index.htm
这个LOGO文字内容包括有，用蓝色图片，大小应与网页布局相匹配，简单、醒目，能体现网页的风格，体现着专业、科技的含义.

2

Ad。swf

Flash文件

W:300
H：200

Index.htm

是弹出窗口的动画广告,寓意网站新增CAD/CAE/CAM知识的频道，吸引客户的关注。

3

Duilian。gif

Gif动画

W：100
H:300

Index。htm

Wlhzz.htm
是目前网站很流行的对联广告形式,不占用太多的空间，访问用户普遍可以接受，直接点击图片链接即可到达想要浏览的页面。
…
…
…
…
…
…
…
1.Fireworks设计和制作图片方面的优化
……（图片略）
2.Flash动画制作及优化
……（图片略）
三 设计和制作过程中遇到的问题及解决方法
……
四 设计总结：
……

说明:
该说明书范例只是提供给各位同学一个书写说明书的思路，并不是非要按该格式来书写。不管说明书的书写格式如何，应该把整个设计思路，工作内容等表述清楚。