网页设计定稿

第２章网站设计步骤网站设计步骤网站的设计与建设是需要一系列步骤来完成的，能否遵循网站的设计步骤直接影响一个网站质量，也直接影响网站发布后是否能成功运行。第２章网站设计步骤1总体概述2网站的规划与设计3站点建设4站点发布和网站的管理与维护习题网站设计步骤第２章网站设计步骤图2－2“淡蓝的天空”个人网站下面我们就以建立一个名为“淡蓝的天空”的个人网站为例来进行栏目规划。如图2－2所示。第２章网站设计步骤实例2－1“淡蓝的天空”个人网站的栏目规划（策划）一、要求与目的★掌握网站的定位★掌握栏目规划★掌握逻辑结构设计第２章网站设计步骤二、规划分析过程1．网站定位：1）网站的访问对象指的是这个网站主要面向哪些社会群体?是企业、消费者、社会大众、兄弟部门还是所有志趣相投的朋友?比如你是一个非常喜欢poping舞队的人，那么你可能就非常希望通过你的网站来结交更多同样喜欢poping舞队的朋友。第２章网站设计步骤通过上述案例假设，从中可对网站做出定位：极具个性化的个人网站，根据个人兴趣爱好，分享资源，以期通过网络平台结识更多的同好者。网站访问群体定位：所有志趣相投的朋友，共同交流和资源共享。为了表达一种心境，凸现自己的个性，将要建立的网站取名为“淡蓝的天空”。第２章网站设计步骤2．网站栏目划分对网站及其访问群体做了定位后，接着需要做的是确定网站所必需的栏目，依案例假设，确定栏目及其名称如下：1)平凡的陌生人：此栏目主要是为了在网络上展现自己，)让别人了解自己。2)感动你的心灵：此栏目主要是把自己平时收集的文摘、网络文学、杂文、幽默等共享出来，)与有共同)兴趣的朋友一同)来欣赏，)以期望在心灵深处有所触动。第２章网站设计步骤3)请聆听：此栏目主要是把自己喜欢的音乐呈现给同)好者或浏览者，)来共同)欣赏这美妙的乐曲。4)那笨拙的脚印：此栏目主要是提供收集的网络资源，)起名)“那笨拙的脚印”主要是为了体现设计者在网络和相关技术上的欠缺，)同时也隐含设计者此方面虽然“脚印笨拙”，)但仍孜孜不)倦的追求的心境，)也包含谦逊的成分在内。第２章网站设计步骤5)同心结：此栏目主要是给有着共同)兴趣的朋友提供相互链接的平台，)以达到能和同)类的网站进行相互推荐，)建立良好的合作关系的目的。6)晚安：此栏目主要是留言本，)提供浏览者与浏览者、浏览者与作者间共同)交流的地方，)起名)“晚安”主要是考虑到同)好者多位全职，)晚上上网较多，)同时也体现设计者不)拘一格的设计思想，)表达个性，)问候朋友。第２章网站设计步骤在所有栏目中，“感动你的心灵”和“那笨拙的脚印”是重要的栏目，其中“感动你的心灵”需要对它进行更细的划分，根据自己兴趣和所收集的相关文章，本栏目又被划分为：“文摘”、“网文”、“杂文”、“幽默”、“测验”、“专栏”等子栏目。第２章网站设计步骤3.网站逻辑结构设计由于本网站属于个人网站。一般情况下栏目不是太多，结构不是太复杂，层次不是太多，为了能使相关内容划分的很清楚，便于理解和浏览，本网站采用层次型逻辑结构。如图2－3所示。图2-3层次型逻辑结构第２章网站设计步骤将网站所有栏目及其子栏目连在一起，本网站的逻辑目录结构如图2－4所示图2-4“淡蓝的天空”网站层次型目录结构图第２章网站设计步骤网页的设计基本知识★掌握网站的色彩搭配★掌握网站的版面布局设计★掌握网站的导航设计第２章网站设计步骤三、本实例知识点1、网站的风格设计网站的风格设计是抽象的。风格的体现主要依靠色彩和外形。第２章网站设计步骤1)色彩搭配网站的色彩是最影响网站整体风格的因素，也是站点美工设计中最令人头疼的问题。许多网页设计者都缺乏色彩搭配的基本知识，所以在制作网页之前往往有一个很好的想法，但是却不知如何搭配网页的颜色来表达预想的效果。因此，在介绍色彩搭配之前，先来看看色彩的基本知识。第２章网站设计步骤色彩的基本知识在物理学中，颜色是因为光的折射而产生的。颜色不同，光的波长也就不同。红、绿、蓝是自然界的三原色，它们不同程度的组合可以形成各种颜色。所以在网页中，也就用它们的不同颜色值来表示各种颜色。在传统的色彩理论中，颜色一般分为彩色和非彩色(或称为灰色)两大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的颜色。第２章网站设计步骤太阳光是彩色的，按颜色的色调通常将其划分为七种颜色：红、橙、黄、绿、青、蓝、紫。如果将这七种颜色按这个顺序渐变为一条色带的话，越靠近红色，给人的感觉越温暖，越靠近蓝色和紫色，给人的感觉越寒冷。所以红、橙、黄的组合又称为暖色调，青、蓝、紫的组合又称为冷色调。除了冷暖的差别外，不同的单个颜色也会给人带来不同的感觉.第２章网站设计步骤红色绿色橙色黄色蓝色白色黑色灰色第２章网站设计步骤网站的色彩搭配网站的色彩搭配通常分为两个步骤，那么第一步就是为整个网站选取一种主色调，然后再为主色调搭配多种适合的颜色。主色调指的是整个网站给人印象最深的颜色，或者说除白色之外用得最多的颜色。正如前面所述，不同的颜色给人的感受是不一样的，所以主色调选取的一个最基本的原则就是保证所选的颜色与网站的主题或者形象相符，进一步地，能够通过这种颜色加深用户对网站的印象。第２章网站设计步骤比如蓝色是一种让人感觉非常专业的颜色，所以许多高科技公司都喜欢使用蓝色作为公司网站的颜色。最典型的当数微软公司(图2－18，)，蓝色极大地加强了人们对他们产品的信任感。又比如使用红色的北京市政府网站()，是通过红色来向人们传达北京作为中国首都大气和热情的气质。IBM公司主页（）就采用了黑色和蓝色为主色调，如图2－19所示。第２章网站设计步骤图2-18微软公司主页第２章网站设计步骤图2-19IBM公司主页第２章网站设计步骤选取背景色大多数的网站都会选取白色作为背景色。白色使得狭小的屏幕空间显得很大，再多的信息在白色的背景下，其排放也可以显得很整齐，其页面也可以显得非常干净和整洁。第２章网站设计步骤2)版面布局首页布局：首页虽然采用图2－14的图片作为整个网页的界面，但在布局上基本属于图2－15所示的布局方式。第２章网站设计步骤第２章网站设计步骤第２章网站设计步骤图2-23网站版面布局的变化第２章网站设计步骤图2-24左右型框架和上下型框架第２章网站设计步骤图2-25复合型框架第２章网站设计步骤图2-14“淡蓝的天空”首页图形界面第２章网站设计步骤图2-15“淡蓝的天空”首页版面布局第２章网站设计步骤图2-16“感动你的心灵”栏目图“感动你的心灵”栏目主要是文摘、网文、杂文、专栏等，界面利用图形设计成一本打开的书如图2－16所示，但在版面布局上采用如图2－17所示的布局方式。第２章网站设计步骤图2-17“感动你的心灵”版面布局图（布局上的统一）第２章网站设计步骤网页设计重点区域网页设计中的视觉流程分布第２章网站设计步骤图2-27新浪网导航条第２章网站设计步骤许多网站的建设者都是从事计算机和网络技术的，他们非常熟悉网页制作技术，但是却少有想法创作一个既美观又有独特风格的主页。另一方面，专业的美工师通常从事的都是传统的美工技术，对网页制作技术和因特网知之甚少，所以不知道如何设计最适合网络传输的图片。所以，网站的风格设计并不简单，它是一项综合的技术。希望大家努力学习！