搜索
第15章网站规划与网页设计前面各章主要学习了网页制作的技术和方法，要制作出优美的网页，首先应对网站进行规划，对网页进行设计。设计网页应遵循一定的规则，学习网页设计必须了解网页设计的基本原理和方法，为网页设计和制作提供理论指导和方法支持。课程引导知识技能目标（1）掌握网站的开发流程，了解网站的规划与组织。（2）掌握网页设计的基本原理与方法。网页浏览效果展示“长沙世界之窗”旅游网站首页index.html的浏览效果如图15-1所示。图15-1“长沙世界之窗”网站首页的浏览效果本章操作任务（1）在站点“长沙世界之窗”下创建文件夹“16网页设计”，在该文件夹中创建一个命名为“index.html”的网页（2）运用本章所学习的方法和技巧对该网页15.html的页面布局、颜色搭配、文字图像进行合理调整和优化。15.1网站的规划与开发流程15.2网页的设计原理与技巧15.1网站的规划与开发流程网站的基本开发流程如下：第一个阶段：规划和准备阶段（1）需求分析、决定网站的主题、风格（2）收集资料、准备素材并进行整理修改（3）规划网站结构和页面版式15.1.1网站的开发流程第二个阶段：网页设计、制作阶段（1）网站总体设计（2）设计界面、制作网站中的各个网页（3）将各个网页通过超链接进行整合第三个阶段：网站的发布、推广与维护阶段（1）测试、调试与完善网站（2）发布与推广网站（3）维护与更新网站1．网站需求分析15.1.2网站规划与组织网站是向浏览者提供信息的一种方式，必须明确设计网站的目的和用户需求，从而做出切实可行的设计计划，网站设计的第一步就是进行网站需求分析。在着手设计网站之前，要确定好网站的主题。网站名称要合法、合情、合理2．策划网站主题和内容确定好网站的主题后，就要根据该主题确定网站的风格，网站风格是指网站的外观和表现形式，要明确网站的类型，根据网站类型确定网格的风格，不同类型的网站具有不同的风格，版面设计、颜色搭配也各有特点。3．规划网站风格网站风格通过网站中的页面来体现的，最主要的是通过首页来体现的。具体包括页面的版式结构、色彩搭配、图像动画的使用等方面。规划网站结构首先要建立一张站点图，站点图中包括站点所有的关键页面、它们之间的相互关主要的链接等，设计网页的主要技术要点也应规划好。4．规划网站结构（1）规划网站的栏目结构划分信息的方法有两种：一种是自顶向下划分，另一种是自下而上划分。（2）规划网站的目录结构构建目录结构的基本要求有：不要将所有文件都存放在根目录下按栏目内容建立子目录在每个主目录下都建立独立的image、flash、music子目录目录的层次不要太深（3）规划网站的链接结构网站的链接结构常用的有两种基本方式：树状链接结构同，网状链接结构。实际应用中，将两种链接结构混合使用。15.2网页的设计原理与技巧1．用户致上原则2．易用性原则3．实用性原则15.2.1网页设计的基本原则1．网页版式类型15.2.2网页版面布局设计（1）“国”字型（2）拐角型（3）上下型（4）左右框架型（5）上下框架型（6）综合框架型（7）封面型（8）Flash动画型网页页面内容主要包括文字和图像，文字又分为标题和正文，主要考虑以下几点：（1）主次分明、中心突出（2）大小搭配、相互呼应（3）图文并茂、相得益彰（4）适当留空、清晰易读2．网页页面内容的编排（1）利用留空和划线进行分块（2）利用色块进行分块（3）利用线框分块3．网页版面内容的分块Logo是网站的标志、名片，如同商标一样，Logo是网站特色和内涵的集中体现。Logo标志可以是中文、英文字母，也可以是符号、图案，还可以是动物或者人物等。标志的设计创意来自网站的名称和内容，可以分为三个方面：15.2.3网站标志Logo设计（1）网站有代表性的人物、动物、花草，可以用它们作为设计蓝本，加以卡通化和艺术化。（2）网站有代表性的物品，可以用物品作为标志。（3）用自己网站的英文名称作标志，采用不同的字体、字母的变形制作标志。★课堂实践★打开网站“课堂实践”文件夹“16网页设计”中网页文档“16.html”，运用本章所介绍的方法和技巧对该网页的页面布局、颜色搭配、文字图像进行合理调整和优化。然后浏览其效果，直到自己认为满意为止。★课外拓展实践★在“湖铁职院学院网站”站点文件夹“16网页设计”中创建网页index.html，并运用本章所学习的方法和技巧对网页的版式结构、导航栏设计、颜色搭配、文字效果、网页特效等方面进行美化、优化。★本章小结★本章主要对网站规划和网页设计进行了剖析，分析了网页设计过程中的一些基本原理和方法，主要包括版面布局、外观设计、Logo设计、色彩设计、导航设计、页面元素设计和网页设计的规范，为设计和制作网页提供理论指导和方法支持