《网页制作工具》
设计说明书
题 目： 水果商店网站的设计与制作
姓 名： 李梦雪 学 号： 20101080116 __ 班 级： 10微高
指导教师： 孙俊国 完成日期： _2011年12月14日___
目录
第1章 水果商店网站的规划 ................................................ 2
1.1 网站整体规划 ...................................................... 2
1.1.1 网站的定位 ................................................... 2 1.1.2 网站板块的设置 ............................................... 2 1.2 网站功能设计 ...................................................... 3 1.2.1 主页功能...................................................... 3 1.2.2 副页功能...................................................... 3 第2章 水果商店网站的设计与制作 .......................................... 3
2.1 主页设计 .......................................................... 3
2.1.1 logo设计..................................................... 4 2.1.2 banner设计................................................... 4 2.1.3 栏目设计 ..................................................... 5 2.1.4 导航设计 ..................................................... 5 2.1.5 风格与色彩搭配 ............................................... 5 2.1.6 技术运用
2.2 副页设计 ......................................................... 6
2.2.1 栏目设计 ..................................................... 6 2.2.2 导航设计 ..................................................... 7 2.2.3 风格与色彩搭配 ............................................... 7 2.2.4 技术运用 ..................................................... 7
第3章 水果商店站网页设计的重难点分析 .................................... 7
3.1网页设计的重点分析................................................. 7 3.2网页设计的难点分析................................................. 7 网站设计小结 ............................................................. 7 参考文献 7
水果商店网站的设计与制作
绪论
近年来，随着社会的发展，人们也越来越追求健康的生活方式，所以人们对饮食的要求越来越高，越来越绿色化。科研成果的迅速，促进我国饮食生产的发展，改变人们对饮食消费的习惯和观念，具有较大的社会效益及经济效益。各式各样的瓜果蔬菜等诉说着千言万语，每一句都象征着美好，随着人们生活水平的不断进步，生活质量不断提高，对生活的追求，健康饮食已成为生活不可缺少的。饮食消费近年来呈越来越旺的趋势，所以健康绿色的水果是必不可少的。
第1 章 水果商店网站的规划
1.1 网站整体规划错误！未定义书签。
水果商店是为了宣传水果而设立的网站，我们网站志在为顾客提供新鲜绿色的水果，体验绿色之美。我们网站设计主要分七个块：网站首页、水果种类、热带水果、国产水果、水果营养、水果蔬菜、联系我们等，每个板块都设置了详细的信息及介绍，实现在网上与各类水果面对面。
1.1.1 网站的定位
1．扩大水果商店的知名度，打造独特风格的水果商店
2. 加强与其它种水果商店的业务往来 3．实现客户与水果面对面
4. 为让每一个顾客尝到新鲜美味的各类瓜果蔬菜
5. 使水果商店成为方面客户使用的掌上水果商店，为客户服务 6. 实现随传随到的服务，使顾客放心满意 7. 全心全意为顾客服务
1.1.2 网站板块的设置
网站的板块设置：网站主要有七大版块，它们是网站首页、水果种类、热带水果、国产水果、水果营养、水果蔬菜、联系我们等。网站版块设计清晰明了，
这些版块构成了整个网页布局，以便条理清晰地给观众以更详细的展现。
1.2 网站功能设计
我们水果商店网站的功能主要是将我们网站的各种新鲜水果实现与客户的
面对面交流。面向各种客户，只要可以上网，可以实现与我们网站的水果实现面对面交流。为客户提供方便快捷的购水果的方式。另外我们网站还有水果营养这一块功能，客户可以登录相关网页浏览所需要的知识。客户可以设置自己的登录账号，在此可以享受会员，积分等各种优惠。客户也可以通过联系我们订购所需产品。
1.2.1 主页功能
1.主页功能，主要是为客户展示我们水果商店的主要功能和主要产品有哪
些，我们商店的大体介绍让大家了解我们的网站的功能。客户可以通过主要板块连接到个模块网页浏览相关的需求信息，可以通过会员登录或注册直接与水果面对面交流。希望我们水果商店能给广大客户带来便捷。
2. 主页能让浏览者更加方便快捷的了解熟悉水果商店
3．通过主页，将水果商店大体的水果产品展示等一目了然的展现给浏览者。
1.2.2 副页功能
1. 通过副页的设计将网站内容更加条理化、更加详细、更加方便的展现给浏
览者
2．副页中将每个版块的内容具体化、深入化、详细化。能让感兴趣的浏览者更详细了解水果商店
3. 副页在展现具体内容的同时，能让浏览者更加深入的了解我们各种水果产品的一切相关内容，包括养生知识等
第2 章 水果商店网站的设计与制作
2.1主页设计错误！未定义书签。
主页设计主要采用简洁布局，主要以暖色为主，并有所创意，将所有版块都排列整齐，这样既可以赏心悦目，有可以让浏览者不产生视觉疲劳，将所有的版块项目清晰地罗列出来。
本主页首先采用firework设计，将布局版块等都设计好，然后在工具中将
其设计美化好下面分别介绍各部分的设计：
2.1.1 logo设计
本logo用firework设计，用FH英文字母和水果to健康，
F代表Fruit水果，颜色才用的是绿色，代表着绿色水果；H代表Healthy健康，颜色是咖啡棕色，代表着健康活力向上；水果 To 健康代表水果可以为大家带来健康。
2.1.2 banner设计
banner设计结合logo，中间是水果商店，表明主题，右面显示阶梯，代表通过阶梯之后可以到达水果王国。设计如下：
2.1.3 栏目设计
我们水果网站栏目主要包括七大部分，就是网站首页、水果种类、热带水
果、国产水果、水果营养、水果蔬菜、联系我们等，还有别的小部分，还有其它小栏目各种水果和新鲜蔬菜。
2.1.4 导航设计
导航设计上采用框架结构布局，左边为logo水果健康，中间为水果商店，其中字体采用绿色，设计简单，主色调采用绿色为主，右面是阶梯和水果城堡。
2.1.5 风格与色彩搭配
本主页设计的主色调以绿色为主，辅助色为白色和橙黄色，体现生机活力。
有在设计上采用竖条条及带有条纹的导航，主要采用浅绿色和白色作为整个主页的基调。
在主页上采用div标签布局，有图片无缝滚动的效果。
副页设计
副页设计采用简单明了的布局，将所在的版块内容突出的表现出来，方便浏览者浏览更多信息。
副页设计主要采用二种版式： 第一种版式如下：
第二种版式如下：
2.2.1 栏目设计
在副页中，因副页数量较多栏目设计分为多种，在主页的基础上，建立多个副页，以便顾客的浏览：
在水果种类中，可以了解各种水果的种类及其所对应的水果。
在水果营养中，可以了解到桃子、西瓜、香蕉、橙子、草莓等各种水果的营养价值和优点，对人体的益处。再次栏目下又分为了水果保健，可以了解到水果对的各种对身体的营养所需，对人体的保健，还有水果的禁忌，水果如何搭配
对身体才最好。
在热带水果种，可以看到各种热带水果，可通过登录水果城堡查看相关所需的水果。
在水果蔬菜中，可以看到各种蔬菜，在此我们仅提供五类蔬菜：根菜类、花菜类、果菜类、茎菜类、叶菜类；在此我们只提供这些新鲜蔬菜。客户可登录城堡与各种蔬菜面对面交流。
2.2.2 导航设计
不同的副页的基调不同，但主基调仍然是绿色。简单明了，给人以眼目一新
的感觉。
2.2.3 风格与色彩搭配
第一种副业用logo 和Fruit store和各种水果图片组成，主要采用绿色和淡粉
色为主，下面用淡灰色和白色搭配，看起来新颖大方又能体现水果的魅力。在水果上面加了横条纹的蒙蔽，实现半透明的效果，体现一种新奇神秘的效果。
第二种副业采用绿色和灰色和白色作为主色调，仅用了Fruit store和一张水果图片来实现效果，简单大方，给人清新的感觉。
2.2.4 技术运用
两种副业方式都用FW 和PS设计搭配好，建立超链接。
第3章 水果商店网页设计的重难点分析
3.1 网页设计的重点分析
1.网页主页的设计至关重要，主页的设计关系着整个网站的布局设计与内容。
2.网页主页中布局的设计与风格、色彩搭配也是非常重要的。
3.网页副业模板的设计也很重要，应该让副业能方便快捷的展现整个板块的内容。
4.网页中也应该注意一些代码的引用，要善于运用这些代码。 5.网页中还应该注意flash的运用。 6.在运用div+css布局的时候必须认真规划好
3.2 网页设计的难点分析
1.网页设计中最难设计的就是主页，如何排版，如何搭配色彩。 2.网页设计中副业设计模板要谨慎小心的设计，以免产生视觉疲劳。
小结：网站设计小结
网站设计虽然比较难设计，但是它又可以让我们任意发挥自己的创意，但
是我们也要做到谨慎小心，做到一丝不苟。
参考文献
1.《DreamweaverCS3 基础与实例教程》主编 谬亮 电子工业出版社 2.《网页设计制作案例教程》 主编 高志清 中国水利水电出版社 3.《DreamweaverCS3 网页制作教程》主编 熊锡义 北京交通大学出版社
信息工程学院
《网页制作工具》实践环节考核报告单
2011-2012学年度第1学期期末
排课编号：（2011-2012-1）-0714394-00425-1 批阅日期： 年 月 日
姓名 李梦雪 班级 评分标准 网站规划好、素材收集完整、15张网页以上。 主页设计 美观且有创意、内容完整、导航正确、有1个以上的flash广告动画（以Flash动画为主页时除外）。 副页设计 布局好，内容完整、导航正确，有1个以上的Flash动画 设计说明书 评分 标准与评价 要求：格式正确、排版规范；分析到位、网页设计重点与难点分析深刻。用A4打印，8页以上。 教师评价： 20 20 40 10微高 学号 20101080116 分值 20 得分 考核成绩
折合 成绩 任课教师签名
