《网页设计与制作》 教学课件

第15章：网站规划与网页设计 主要教学环节 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题

（一）课程引导 　　　前面各章主要学习了网页制作的技术和方法，要制作出优美的网页，首先应对网站进行规划，对网页进行设计。设计网页应遵循一定的规则，学习网页设计必须了解网页设计的基本原理和方法，为网页设计和制作提供理论指导和方法支持。

（二）明确知识技能目标 （1）掌握网站的开发流程，了解网站的规划与组织。 （2）掌握网页设计的基本原理与方法。

（三）展示网页浏览效果 “长沙世界之窗”旅游网站首页index.html的浏览效果 如图15-1所示。 图15-1　　“长沙世界之窗”网站首页的浏览效果

（四）分析操作任务 （1）在站点“长沙世界之窗”下创建文件夹“16网页 设计”，在该文件夹中创建一个命名为“index.html” 的网页。 的页面布局、颜色搭配、文字图像进行合理调整和优化

（五）知识讲解与操作示范（1） 15.1 网站的规划与开发流程 15.1.1 网站的开发流程 网站的基本开发流程如下： 15.1　网站的规划与开发流程 15.1.1　网站的开发流程 网站的基本开发流程如下： 第一个阶段：规划和准备阶段 （1）需求分析、决定网站的主题、风格 （2）收集资料、准备素材并进行整理修改 （3）规划网站结构和页面版式

（五）知识讲解与操作示范（2） 第三个阶段：网站的发布、推广与维护阶段 第二个阶段：网页设计、制作阶段 （1）网站总体设计 （2）设计界面、制作网站中的各个网页 （3）将各个网页通过超链接进行整合 第三个阶段：网站的发布、推广与维护阶段 （1）测试、调试与完善网站 （2）发布与推广网站 （3）维护与更新网站

（五）知识讲解与操作示范（3） 15.1.2 网站规划与组织 1．网站需求分析 15.1.2　网站规划与组织 1．网站需求分析 网站是向浏览者提供信息的一种方式，必须明确设计网站的目的和用户需求，从而做出切实可行的设计计划，网站设计的第一步就是进行网站需求分析。 2．策划网站主题和内容 在着手设计网站之前，要确定好网站的主题。 网站名称要合法、合情、合理

（五）知识讲解与操作示范（4） 3．规划网站风格 确定好网站的主题后，就要根据该主题确定网站 的风格，网站风格是指网站的外观和表现形式，要明 确网站的类型，根据网站类型确定网格的风格，不同 类型的网站具有不同的风格，版面设计、颜色搭配也 各有特点。网站风格通过网站中的页面来体现的，最 主要的是通过首页来体现的。具体包括页面的版式结 构、色彩搭配、图像动画的使用等方面。

（五）知识讲解与操作示范（5） 4．规划网站结构 规划网站结构首先要建立一张站点图，站点图中 包括站点所有的关键页面、它们之间的相互关主要的 链接等，设计网页的主要技术要点也应规划好。 （1）规划网站的栏目结构 划分信息的方法有两种：一种是自顶向下划分， 另一种是自下而上划分。

（2）规划网站的目录结构 （五）知识讲解与操作示范（6） 构建目录结构的基本要求有：不要将所有文件都存放在根目录下。 应按栏目内容建立子目录，在每个主目录下都建立独立的image、flash、music子目录,目录的层次不要太深。

（五）知识讲解与操作示范（7） （3）规划网站的链接结构 网站的链接结构常用的有两种基本方式：树状链接结构同，网状链接结构。实际应用中，将两种链接结构混合使用。

（五）知识讲解与操作示范（8） 15.2 网页的设计原理与技巧 15.2.1 网页设计的基本原则 1．用户致上原则 2．易用性原则 15.2　网页的设计原理与技巧 15.2.1　网页设计的基本原则 1．用户致上原则 2．易用性原则 3．实用性原则

（五）知识讲解与操作示范（9） 15.2.2 网页版面布局设计 1．网页版式类型 （1）国字型 （2）拐角型 （3）上下型 （4）左右框架型 15.2.2　网页版面布局设计 1．网页版式类型 （1）国字型 （2）拐角型 （3）上下型 （4）左右框架型 （5）上下框架型 （6）综合框架型 （7）封面型 （8）Flash动画型

（五）知识讲解与操作示范（10） 2．网页页面内容的编排 网页页面内容主要包括文字和图像，文字又分为 标题和正文，主要考虑以下几点： （1）主次分明、中心突出 （2）大小搭配、相互呼应 （3）图文并茂、相得益彰 （4）适当留空、清晰易读

（五）知识讲解与操作示范（11） 3．网页版面内容的分块 （1）利用留空和划线进行分块 （2）利用色块进行分块 （3）利用线框分块

（五）知识讲解与操作示范（12） 15.2.3 网站标志Logo设计 Logo是网站的标志、名片，如同商标一样，Logo是网站特色和内涵的集中体现。 Logo标志可以是中文、英文字母，也可以是符号、图案，还可以是动物或者人物等。

（五）知识讲解与操作示范（13） 标志的设计创意来自网站的名称和内容，可以分为三个方面： （1）网站有代表性的人物、动物、花草，可以用它们作为设计蓝本，加以卡通化和艺术化。 （2）网站有代表性的物品，可以用物品作为标志。 （3）用自己网站的英文名称作标志，采用不同的字体、字母的变形制作标志。

（六）课堂实践 打开网站“课堂实践”文件夹“16网页设计”中网页 文档 “16.html”，运用本章所介绍的方法和技巧对该 网页的页面布局、颜色搭配、文字图像进行合理调整和 优化。然后浏览其效果，直到自己认为满意为止。

（七）课外拓展实践 在“湖铁职院学院网站”站点文件夹“16网页 设计”中创建网页 index.html ，并运用本章所学 习的方法和技巧对网页的版式结构、导航栏设计、 颜色搭配、文字效果、网页特效等方面进行美化、 优化。

（七）归纳总结 本章主要对网站规划和网页设计进行了剖析，分析 了网页设计过程中的一些基本原理和方法，主要包括 　本章主要对网站规划和网页设计进行了剖析，分析 了网页设计过程中的一些基本原理和方法，主要包括 版面布局、外观设计、Logo设计、色彩设计、导航设 计、页面元素设计和网页设计的规范，为设计和制作 网页提供理论指导和方法支持。