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

* * 第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动画型 *