网站规划课件

第15章网站规划与网页设计前面各章主要学习了网页制作的技术和方法，要制作出优美的网页，首先应对网站进行规划，对网页进行设计。设计网页应遵循一定的规则，学习网页设计必须了解网页设计的基本原理和方法，为网页设计和制作提供理论指导和方法支持。课程引导第15章网站规划与网页设计前面各章主要学习了网页制知识技能目标（1）掌握网站的开发流程，了解网站的规划与组织。（2）掌握网页设计的基本原理与方法。（3）掌握网页设计的规范。知识技能目标（1）掌握网站的开发流程，了解网站的规网页浏览效果展示“长沙世界之窗”旅游网站首页index.html的浏览效果如图15-1所示。图15-1“长沙世界之窗”网站首页的浏览效果网页浏览效果展示“长沙世界之窗”旅游网站首页ind本章操作任务（1）在站点“长沙世界之窗”下创建文件夹“16网页设计”，在该文件夹中创建一个命名为“index.html”的网页（2）运用本章所学习的方法和技巧对该网页15.html的页面布局、颜色搭配、文字图像进行合理调整和优化。本章操作任务（1）在站点“长沙世界之窗”下创建文件夹“15.1网站的规划与开发流程15.2网页的设计原理与技巧15.1网页设计的规范15.1网站的规划与开发流程15.2网页的设计原理与技巧1515.1网站的规划与开发流程网站的基本开发流程如下：第一个阶段：规划和准备阶段（1）需求分析、决定网站的主题、风格（2）收集资料、准备素材并进行整理修改（3）规划网站结构和页面版式15.1.1网站的开发流程15.1网站的规划与开发流程网站的基本开发流程如下：15第二个阶段：网页设计、制作阶段（1）网站总体设计（2）设计界面、制作网站中的各个网页（3）将各个网页通过超链接进行整合第二个阶段：网页设计、制作阶段第三个阶段：网站的发布、推广与维护阶段（1）测试、调试与完善网站（2）发布与推广网站（3）维护与更新网站第三个阶段：网站的发布、推广与维护阶段1．网站需求分析15.1.2网站规划与组织网站是向浏览者提供信息的一种方式，必须明确设计网站的目的和用户需求，从而做出切实可行的设计计划，网站设计的第一步就是进行网站需求分析。1．网站需求分析15.1.2网站规划与组织网站是向浏览在着手设计网站之前，要确定好网站的主题。主题是网站的灵魂，它决定网站的内容和形式。没有主题的网站会杂乱无章。网站名称要合法、合情、合理。名称要有特色，体现一定的内涵。2．策划网站主题和内容在着手设计网站之前，要确定好网站的主题。主题是网站的

确定好网站的主题后，就要根据该主题确定网站的风格，网站风格是指网站的外观和表现形式，要明确网站的类型，根据网站类型确定网格的风格，不同类型的网站具有不同的风格，版面设计、颜色搭配也各有特点。网站风格通过网站中的页面来体现的，最主要的是通过首页来体现的。具体包括页面的版式结构、色彩搭配、图像动画的使用等方面。3．规划网站风格确定好网站的主题后，就要根据该主题确定网站的风格，网站规划网站结构首先要建立一张站点图，站点图中包括站点所有的关键页面、它们之间的相互链接关系等。一个优秀的网站应该结构清晰、导航简单方便，浏览者能够快速准确地找到自己需要的信息。4．规划网站结构规划网站结构首先要建立一张站点图，站点图中包括站点所有（1）规划网站的栏目结构划分信息的方法有两种：一种是自顶向下划分：按照从上到下、从粗到细的原则划分信息块，以确定网站的内容结构。另一种是自下而上划分：先将所有信息罗列出来，然后向上分类，形成站点的内容结构。（1）规划网站的栏目结构（2）规划网站的目录结构构建目录结构的基本要求有：不要将所有文件都存放在根目录下按栏目内容建立子目录在每个主目录下都建立独立的image、flash、music子目录目录的层次不要太深，不要使用中文目录名（2）规划网站的目录结构不要将所有文件都存放在根目录下（3）规划网站的链接结构网站的链接结构常用的有两种基本方式：

树状链接结构：首页链接指向一级页面，一级页面指向二级页面。一级一级进入，一级一级退出，条理清晰，但浏览效果低。网状链接结构：浏览方便，但容易造成混乱。实际应用中，将两种链接结构混合使用。（3）规划网站的链接结构15.2网页的设计原理与技巧1．用户致上原则2．易用性原则3．实用性原则15.2.1网页设计的基本原则15.2网页的设计原理与技巧1．用户致上原则15.2.11．网页版式类型15.2.2网页版面布局设计（1）“国”字型一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

（2）拐角型这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。1．网页版式类型15.2.2网页版面布局设计（1）“国”字（3）上下型这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。（4）左右框架型这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或Logo，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

（5）上下框架型与上面类似，区别仅仅在于是一种上下分为两页的框架

（3）上下型（6）综合框架型上两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

（7）封面型这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。

（8）Flash动画型其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富。

（6）综合框架型网页页面内容主要包括文字和图像，文字又分为标题和正文，主要考虑以下几点：（1）主次分明、中心突出（2）大小搭配、相互呼应（3）图文并茂、相得益彰（4）适当留空、清晰易读2．网页页面内容的编排网页页面内容主要包括文字和图像，文字又分为标题和正文（1）利用留空和划线进行分块（2）利用色块进行分块（3）利用线框分块3．网页版面内容的分块（1）利用留空和划线进行分块3．网页版面内容的分块Logo是网站的标志、名片，如同商标一样，Logo是网站特色和内涵的集中体现。Logo标志可以是中文、英文字母，也可以是符号、图案，还可以是动物或者人物等。标志的设计创意来自网站的名称和内容，可以分为三个方面：15.2.3网站标志Logo设计Logo是网站的标志、名片，如同商标一样，Logo是（1）网站有代表性的人物、动物、花草，可以用它们作为设计蓝本，加以卡通化和艺术化。（2）网站有代表性的物品，可以用物品作为标志。（3）用自己网站的英文名称作标志，采用不同的字体、字母的变形制作标志。（1）网站有代表性的人物、动物、花草，可以用它们作为设计★课堂实践★打开网站“课堂实践”文件夹“16网页设计”中网页文档“16.html”，运用本章所介绍的方法和技巧对该网页的页面布局、颜色搭配、文字图像进行合理调整和优化。然后浏览其效果，直到自己认为满意为止。★课堂实践★打开网站“课堂实践”文件夹“16网页设（1）特色鲜明（2）搭配合理（3）讲究艺术性（4）合理使用邻近色（5）合理使用对比色（6）巧妙使用背景色（7）严格控制色彩的数量4．页面色彩的搭配技巧15.2.4网页色彩设计（1）特色鲜明4．页面色彩的搭配技巧15.2.4网页色彩设15.2.5网页导航设计导航是网站设计不可缺少的元素之一，它不仅仅是信息结构的基础分类也是浏览者浏览网站的路标。导航作为页面的重要视觉元素，放置在明显、易找的区域是必要，让浏览者进入网站第一时间就可以看到它。导航设计的目标是方便用户浏览，结构应当十分清晰。15.2.5网页导航设计导航是网站设计不可缺少的元导航样式有很多，包括横排导航、竖排导航、多排导航、图片式导航、下拉菜单导航、隐藏式导航等。网站导航的表现形式主要有：菜单、站内搜索引擎、当前浏览位置等。导航样式有很多，包括横排导航、竖排导航、多排导航、图（1）菜单菜单是网站最常见的导航方法，一个好的菜单系统关键在于能适应网站的层次需要，并且容易让浏览者理解网站的结构。（1）菜单（2）站内搜索引擎站内搜索引擎提供了一种主动查询方式，浏览者只要把自己需要寻找的内容的关键字输入到搜索引擎中，网站将自动地查找出站内符合条件的页面，这是一种人性化的做法。（2）站内搜索引擎（3）当前浏览位置所谓“当前浏览位置”就是在网站的每个页面中加入当前位置的文字说明并逐级加入链接。（3）当前浏览位置15.2.6网页页面元素设计1．页面标题设计页面标题相当于商店的招牌，标题通常位于页面的上端或中央，清楚明确地表示出来。（1）标题大小、粗细要合适（2）标题使用鲜艳的色彩（3）利用空间突出标题15.2.6网页页面元素设计1．页面标题设计页面标（1）文字字体的选择网页中正文文本一般可使用系统默认的中文字体和西文字体，若需使用特殊字体，一般把使用了特殊字体的对象制作成图片。常用的中文字体有宋体、黑体、楷体、仿宋体、行书、隶书、魏碑等，常用英文字体有TimesNewRoman、Arial、Impact等2．页面中文字设计（1）文字字体的选择2．页面中文字设计（2）文字粗细的确定文字变细会显得十分优美，反之将文字变粗会显得有力。（3）文字字号的确定对于网页中正文文本，其字号一般设置为10～12磅；对于网页中版权声明等文本一般设置为9～10磅；对于网页中标题文本，一般设置为12～18磅。（4）文字的字间距和行间距网页中文本的字间距和行间距在某种程度上会改变访问者的阅读心理。（2）文字粗细的确定网页中图像在信息传达上应用具备以下功能：（1）要有良好的视觉吸引力，能吸引浏览者的注意力。（2）要简洁明确地传达网站信息，能使人们一目了然地抓住网站信息的重点。（3）要有强而有力的诱导作用，造成鲜明的视觉感受效果，从观看过程中产生愿望和欲求。3．页面中图像应用网页中图像在信息传达上应用具备以下功能：3．页面中图对图像的处理主要包括以下几个方面：（1）图像的外形处理（2）图像的面积处理（3）图像的数量处理（4）图像的背景处理对图像的处理主要包括以下几个方面：在网页中使用图像应注意下面几点：（1）首页最好有Logo，主要图像（2）图像最好有一定的实际作用，减少装饰性图像的比例，以突出主题（3）图像要清晰（4）为图像加替代文字在网页中使用图像应注意下面几点：15.3网页设计的规范1．网页的宽度15.3.1网页版面尺寸规范目前我国的网络用户，大部分使用15英寸和17英寸显示器，采用1024×768分辨率的用户最多，为了考虑这部分浏览者的需要，制作网页时一般按照1024×768（单位为像素）分辨率的规格来设计，页面宽度不超过1屏。15.3网页设计的规范1．网页的宽度15.3.1网页版面从理论上来讲网页的长度可以无限长的，但一般不宜超过3屏，最佳长度为1.8～2.5屏。2．网页的长度从理论上来讲网页的长度可以无限长的，但一般不宜超过3屏一般地，网站的首页大小（包括所有图像、文本、多媒体对象）不宜超过30KB，网站的二级页面的文件（包括所有图像、文本、多媒体对象）不宜超过45KB。如果网页大太，网页下载的速度会变慢，影响浏览速度。3．网页文件大小一般地，网站的首页大小（包括所有图像、文本、多媒体对象广告尺寸应为标准尺寸，全尺寸banner不超过14KB。4．广告尺寸广告尺寸应为标准尺寸，全尺寸banner不超过14KB15.3.2文件夹、文件命名规范主要命名规则有：（1）文件夹命名一般采用英文小写字母，特殊情况可以使用中文拼音，常见的文件夹命