4.1网站设计(qbx).ppt

4.2网站设计 请你欣赏 / 请你欣赏 新课引入 我们要把一个优秀的网站由蓝图变为现实的第一个步骤就是网站设计，那到底如何进行设计呢？ 这就好比写一篇文章，首先要拟好提纲文章才能主题明确，层次清晰，所以，题材选好后，第一步要设置栏目。 下面以制作“为了绿色”网站为例。 “为了绿色”网站 栏目设置 栏目设置需注意： （1）要紧扣主题，尽可能删除与主题无关的栏目 （2）尽可能将网站最有吸引力的内容列在栏目上 （3）尽可能方便访问者的浏览和查询。如：设置“本站指南”或“网站地图”栏目可以帮助初访者快速找到他们想要的内容 版面设计 网海茫茫，能够吸引我们眼球的只有那些有特色的网页，大量的网页引不起网民的兴趣，究其原因，站点内容是否丰富是其中一个方面，而网页的版面设计是否精美也是重要因素之一。 版面结构是指一种能够让浏览者清楚、容易地理解作品传达的信息的东西，通俗地讲，也就是将不同元素巧妙排列的方式。 布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。网页要呈现的内容很多，如何合理地放置信息，使之井井有条、主次分明是版面布局需要考虑的问题。 设计版面时，可采用平面分割方式，调动全部面积来构建整个版面。 常见页面布局样式(第一种) 常见页面布局样式(第二种) 常见页面布局样式(第三种) 怎样设计版面？ 一般来说，网页版面布局可按创意草案、粗略布局、最后定案三个步骤来进行。 下面我们来看“为了绿色”网站的版面布局图： 树立网站整体风格 第一步：设计、制作一个网站的标志（logo） 标志可以是中文、英文字母，可以是符号、图案，可以是动物或者人物等。标志的设计创意来自你网站的名称和内容。一般来说，设计标志有这样几种方法： （1）选择与网站主题有关的，并具有代表性的人或物如搜狐网站的狐狸尾巴 （2）对于专业性的网站，可以是本专业有代表的物品作为标志，比如中国银行的铜板标志。 （3）最常用和最简单的方式是用自己网站的中文或英文名称作标志。采用不同的字体、字母的变形与组合，可以很容易制作出自己的标志。如：“机器人做学玩”网站标志 第二步：设计网站的标准色彩 网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩，这样给人以整体统一的感觉。一个网站的标准色彩不超过3种。 　我们来浏览一些网站是如何运用色彩树立风格的： 第二步：设计网站的标准色彩 网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩，这样给人以整体统一的感觉。我们来浏览一些网站是如何运用色彩树立风格的： 第三步：设计网站的标准字体 与标准色彩一样，标准字体指用于标志、标题、主菜单的字体。一般网页默认的字体是宋体。各种字体大都具有各自不同的性格，如黑体字凝重、宋体字端庄、隶书飘逸、楷体淡雅等等。体现专业可以用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等。 收集素材 选定了主题和栏目，接下来我们就该准备网页素材了。成功网站的最大秘诀在于让用户感到网站对他们非常有用，“内容为王”依然是网站成功的关键，如果内容空洞，无论页面制作得如何精美，仍然不会有多少浏览者。 在收集素材的过程中，首先，要注意对收集来的素材分类，例如同类素材用一个文件夹来管理；其次，文件名要易懂易记；最后，要注意保护知识产权，避免侵犯别人的版权。 本节作业： 见教学网 网站名称： 网站主题： 提供最新娱乐消息以及来自世界各地的流行音乐，可供试听、下载、及上传 栏目设置 / 网站主题： 围绕着英语学习 网站名称： 栏目设置： 单词、发音、句子、听力、语法、开讲、阅读、杂志、考试等数大类 联系“为了绿色”就用绿色信箱吧 绿色信箱 请留言，留下您最想说的，留下您的绿色 绿色留言 看看我们为保护绿色曾经做过什么 绿色历史 那些保护绿色的人物永远值得我们学习 绿色人物 那些保护绿色的行动永远值得我们骄傲 绿色活动 绿色不停地被破坏，为了绿色，我们痛斥那些破坏绿色的行为 绿色焦点 为了绿色 描述 栏目 名称 优点：页面结构清晰， 主次分明； 缺点：呆板，如果细节色彩上不注意，容易“看之无味” “厂”字型 页面顶部为主菜单以及横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局 布局形式 特点 常见样式 参考示例 主菜单以及横条网站标志+广告条 显 示内容 主 菜 单 优点：页面结构清晰， 主次分明； 缺点：呆板，如果细节色彩上不注意，容易“看之无味” “厂”字型 页面顶部为主菜单以及横条网站标志+广告条，下方左