web大作业实验报告

宁波大红鹰学院

信息工程学院

网

站

设

计

说

明

书

网页名称： VG裸钻网站主页设计

专业名称：计算机科学与技术

班级名称：计科2班

姓名：分享

学号： **********

完成时间： 2011-6-15

网站设计说明书

一、网站规划设计说明

1、结构设计

页面结构相对来说比较简单，采用上中(左、右)下的结构。上面放了banner，banner的下面是导航条，中间的左边是商品的分类和介绍主要分为了四块，从上到下依次排列公司的最新产品的信息：戒指、吊坠、配链、耳钉等主要产品的相关介绍；右边分为五块：也是上到下依次排列，第一个盒子设了顾客可以自己搜索自己想要的产品；第二到第五个盒子分别放了新款产品，新品推荐，热销产品，特价商品的精美图片。最下面是footer，设置关于该网页的相关搜索以及版权信息。

2、内容规划(该网站的首页一般是一个静态的页面)

⏹页面头部：页面头部包含VG裸钻的LOGO设计以及它最近的一些关于产

品的消息；

⏹栏目导航：设置了鼠标经过时文字的效果单击可以进入其它各内容页面；

⏹具体内容：这是一家钻石的网站首页的设计,本页的具体内容包括公司的

最新产品的信息的分类介绍分为：戒指、吊坠、配链、耳钉等主要产品，并且提供了一些相关照片，能让浏览者快速查询找到自己想要找到的信息以及之前的所有产品的信息。

⏹版权声明：版权声明写在页脚，设置关于该网页的相关搜索以及版权信

息

图表1页脚

3、LOGO设计

这个网站的LOGO是该品牌的LOGO，我是以图片的形式将其切片。该LOGO 主要利用了白色，是两个舞动的字母VG体现了产品的华丽和柔美，生动和逼真的设计图样，体现了其产品的精美，为产品加分吸引更多的顾客。

4、技术方案

该网页主要用到了css+div的网页布局方式，主要是用Dreamweaver来完成网页的代码的编写和测试，LOGO的设计是采用Photoshop软件的技术，用Fireworks来完成一些图片的切片工作，用IE和Firefox对网页的效果进行测试，最后用Photoshop制作网页的效果图。在编写代码的过程中还用到了JavaScript的语言。

二、网站色彩说明

1、网站主色调

该网站的主色彩是绿色和淡蓝色，，网页文字为淡蓝色，导航色为淡绿色导航文字为白色如下图所示：

图表 2 网站主色调

绿色是一种非常具有亲和力的颜色，它代表的是自然、生命、活力与健康，是使用比较广泛的颜色之一。蓝色和白色的运用使得整个网页显得很舒服和平和，同时背景色显得产品的图片更加的鲜艳、漂亮。

2、网页链接色

表格 1 网页文字

表格2导航文字颜色

三、HTML页面结构图

图表 3 整个网页结构

四、页面DIV结构代码

五、CSS代码及注释

1. JS代码

2. css代码及代码