2022年网页设计说明书 .pdf

《2022年网页设计说明书 .pdf》由会员分享，可在线阅读，更多相关《2022年网页设计说明书 .pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页制作工具设计说明书题目：水果商店网站的设计与制作姓名：李梦雪学号： 20101080116 _ 班级： 10微高指导教师：孙俊国完成日期： _2011年 12 月 14 日_ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 9 页 - - - - - - - - - 目录第 1 章 水果商店网站的规划 . 2 1.1 网站整体规划 . 2 1.1.1 网站的定位 . 2 1.1.2 网站板块的设置. 2 1.2 网站功能设计 . 3 1.2.1 主页功能 . 3 1.

2、2.2 副页功能 . 3 第 2 章 水果商店网站的设计与制作 . 32.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 章 水果商店站网页设计的重难点分析 . 73.1 网页设计的重点分析 . 7 3.2 网页设计的难点分析 . 7 网站设计小结 . 7参考文献7 名师资料总结 -

3、- -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 9 页 - - - - - - - - - 水果商店网站的设计与制作绪论近年来，随着社会的发展， 人们也越来越追求健康的生活方式，所以人们对饮食的要求越来越高， 越来越绿色化。 科研成果的迅速， 促进我国饮食生产的发展，改变人们对饮食消费的习惯和观念，具有较大的社会效益及经济效益。各式各样的瓜果蔬菜等诉说着千言万语，每一句都象征着美好， 随着人们生活水平的不断进步，生活质量不断提高， 对生活的追求，健康饮食已成为生活不可缺少的。饮食消费近年来

4、呈越来越旺的趋势，所以健康绿色的水果是必不可少的。第 1 章 水果商店网站的规划1.1网站整体规划 错误！未定义书签。水果商店是为了宣传水果而设立的网站，我们网站志在为顾客提供新鲜绿色的水果，体验绿色之美。我们网站设计主要分七个块：网站首页、水果种类、热带水果、国产水果、水果营养、水果蔬菜、联系我们等，每个板块都设置了详细的信息及介绍，实现在网上与各类水果面对面。1.1.1 网站的定位1扩大水果商店的知名度，打造独特风格的水果商店 2. 加强与其它种水果商店的业务往来 3实现客户与水果面对面 4. 为让每一个顾客尝到新鲜美味的各类瓜果蔬菜 5. 使水果商店成为方面客户使用的掌上水果商店，为客户

5、服务 6. 实现随传随到的服务，使顾客放心满意 7. 全心全意为顾客服务1.1.2 网站板块的设置网站的板块设置：网站主要有七大版块，它们是网站首页、水果种类、热带水果、国产水果、水果营养、水果蔬菜、联系我们等。网站版块设计清晰明了，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 9 页 - - - - - - - - - 这些版块构成了整个网页布局，以便条理清晰地给观众以更详细的展现。1.2 网站功能设计我们水果商店网站的功能主要是将我们网站的各种新鲜水果实现与客户的面

6、对面交流。 面向各种客户， 只要可以上网， 可以实现与我们网站的水果实现面对面交流。为客户提供方便快捷的购水果的方式。另外我们网站还有水果营养这一块功能，客户可以登录相关网页浏览所需要的知识。客户可以设置自己的登录账号，在此可以享受会员， 积分等各种优惠。 客户也可以通过联系我们订购所需产品。1.2.1 主页功能1.主页功能，主要是为客户展示我们水果商店的主要功能和主要产品有哪些，我们商店的大体介绍让大家了解我们的网站的功能。客户可以通过主要板块连接到个模块网页浏览相关的需求信息，可以通过会员登录或注册直接与水果面对面交流。希望我们水果商店能给广大客户带来便捷。2. 主页能让浏览者更加方便快捷

7、的了解熟悉水果商店3通过主页，将水果商店大体的水果产品展示等一目了然的展现给浏览者。1.2.2 副页功能1. 通过副页的设计将网站内容更加条理化、更加详细、 更加方便的展现给浏览者2副页中将每个版块的内容具体化、深入化、详细化。能让感兴趣的浏览者更详细了解水果商店3. 副页在展现具体内容的同时，能让浏览者更加深入的了解我们各种水果产品的一切相关内容，包括养生知识等第 2 章 水果商店网站的设计与制作2.1 主页设计 错误！未定义书签。主页设计主要采用简洁布局，主要以暖色为主，并有所创意，将所有版块都排列整齐， 这样既可以赏心悦目， 有可以让浏览者不产生视觉疲劳，将所有的版块项目清晰地罗列出来。

8、本主页首先采用firework 设计，将布局版块等都设计好，然后在工具中将名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 9 页 - - - - - - - - - 其设计美化好下面分别介绍各部分的设计：2.1.1logo设计本 logo 用 firework 设计，用 FH 英文字母和水果 to 健康，F 代表 Fruit 水果，颜色才用的是绿色，代表着绿色水果；H 代表 Healthy 健康，颜色是咖啡棕色， 代表着健康活力向上； 水果 To 健康代表水果可以为大家带

9、来健康。2.1.2 banner设计banner 设计结合 logo，中间是水果商店，表明主题，右面显示阶梯，代表通过阶梯之后可以到达水果王国。设计如下：2.1.3 栏目设计我们水果网站栏目主要包括七大部分，就是网站首页、水果种类、热带水果、国产水果、水果营养、水果蔬菜、联系我们等，还有别的小部分，还有其它小栏目各种水果和新鲜蔬菜。2.1.4 导航设计导航设计上采用框架结构布局，左边为logo 水果健康，中间为水果商店，其中字体采用绿色，设计简单，主色调采用绿色为主，右面是阶梯和水果城堡。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -

10、- - 名师精心整理 - - - - - - - 第 5 页，共 9 页 - - - - - - - - - 2.1.5 风格与色彩搭配本主页设计的主色调以绿色为主，辅助色为白色和橙黄色，体现生机活力。有在设计上采用竖条条及带有条纹的导航，主要采用浅绿色和白色作为整个主页的基调。在主页上采用 div 标签布局，有图片无缝滚动的效果。副页设计副页设计采用简单明了的布局， 将所在的版块内容突出的表现出来，方便浏览者浏览更多信息。副页设计主要采用二种版式：第一种版式如下：第二种版式如下：2.2.1 栏目设计在副页中，因副页数量较多栏目设计分为多种，在主页的基础上，建立多个副页，以便顾客的浏览：在水果

11、种类中，可以了解各种水果的种类及其所对应的水果。在水果营养中，可以了解到桃子、西瓜、香蕉、橙子、草莓等各种水果的营养价值和优点， 对人体的益处。 再次栏目下又分为了水果保健，可以了解到水果对的各种对身体的营养所需，对人体的保健， 还有水果的禁忌， 水果如何搭配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 9 页 - - - - - - - - - 对身体才最好。在热带水果种，可以看到各种热带水果，可通过登录水果城堡查看相关所需的水果。在水果蔬菜中，可以看到各种蔬菜，在此

12、我们仅提供五类蔬菜：根菜类、花菜类、果菜类、茎菜类、叶菜类；在此我们只提供这些新鲜蔬菜。客户可登录城堡与各种蔬菜面对面交流。2.2.2 导航设计不同的副页的基调不同，但主基调仍然是绿色。简单明了，给人以眼目一新的感觉。2.2.3 风格与色彩搭配第一种副业用 logo 和 Fruit store 和各种水果图片组成， 主要采用绿色和淡粉色为主，下面用淡灰色和白色搭配， 看起来新颖大方又能体现水果的魅力。在水果上面加了横条纹的蒙蔽，实现半透明的效果，体现一种新奇神秘的效果。第二种副业采用绿色和灰色和白色作为主色调，仅用了Fruit store和一张水果图片来实现效果，简单大方，给人清新的感觉。2.

13、2.4 技术运用两种副业方式都用FW 和 PS设计搭配好，建立超链接。第 3 章 水果商店网页设计的重难点分析3.1 网页设计的重点分析1. 网页主页的设计至关重要，主页的设计关系着整个网站的布局设计与内容。2. 网页主页中布局的设计与风格、色彩搭配也是非常重要的。3. 网页副业模板的设计也很重要， 应该让副业能方便快捷的展现整个板块的内容。4. 网页中也应该注意一些代码的引用，要善于运用这些代码。5. 网页中还应该注意flash的运用。6. 在运用 div+css 布局的时候必须认真规划好名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -

14、 - - 名师精心整理 - - - - - - - 第 7 页，共 9 页 - - - - - - - - - 3.2 网页设计的难点分析1. 网页设计中最难设计的就是主页，如何排版，如何搭配色彩。2. 网页设计中副业设计模板要谨慎小心的设计，以免产生视觉疲劳。小结：网站设计小结网站设计虽然比较难设计，但是它又可以让我们任意发挥自己的创意，但是我们也要做到谨慎小心，做到一丝不苟。参考文献1. DreamweaverCS3 基础与实例教程主编谬亮 电子工业出版社2. 网页设计制作案例教程主编 高志清 中国水利水电出版社3. DreamweaverCS3 网页制作教程主编熊锡义 北京交通大学出版社

15、名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 9 页 - - - - - - - - - 信息工程学院网页制作工具实践环节考核报告单2011-2012 学年度第 1 学期期末排课编号：（2011-2012-1 ）-0714394-00425-1 批阅日期：年月日姓名李梦雪班级10 微高学号20101080116 评分标准与评价评分标准分值得分网站规划好、素材收集完整、15 张网页以上。20 主页设计美观且有创意、 内容完整、 导航正确、 有 1 个以上的flash广告动画（以Flash 动画为主页时除外） 。40副页设计布局好，内容完整、导航正确，有1个以上的Flash 动画20设计说明书要求：格式正确、排版规范；分析到位、网页设计重点与难点分析深刻。用A4 打印， 8 页以上。20教师评价：考核成绩折合成绩任课教师签名名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 9 页 - - - - - - - - -