网页设计与制作案例教程-电子教案第29单元

第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设计、色彩设计、导航设计、页面元素设计和网页设计的规范，为设计和制作网页提供理论指导和方法支持