第1章-网页设计基础

第1章网页设计基础教学目标1.熟悉网页设计的相关概念。2.了解Web设计的原则、网站结构规划（栏目、目录）的原则。3.了解网页布局设计的原则、布局设计的类型、布局设计元素、布局设计技术。4.了解网站内容设计的元素（文本、多媒体）和如何进行内容排版。5.了解网页设计的构成要素和风格设计的类型。6.了解网页色彩设计的基础知识。7.熟悉HTML文档的结构和基本语法。教学内容1.1网页概述1.2Web设计基础1.3布局设计1.4内容设计1.5风格设计1.6色彩设计1.7HTML基础教学重点和难点重点：网页设计的相关概念、HTML文档的结构和基本语法。难点：HTML文档的基本语法。导入：为什么要学习此课程why传统的信息发布方式？缺点？以企业建站为例，优点？What结合前面已学的相关课程（网络编辑美术基础、电脑图文设计），能独立或团队完成一个网站的设计或模拟某个网站完成制作。How以实践为主，多动手，多讨论。充分利用课堂时间，在课堂完成内容的入门。形成对网页设计与制作的兴趣，尝试制作你所见到的每一个网页或网页特效，不局限在课堂的范围之内。提高自己解决问题的能力！1.1网页概述在学习网页设计前，我们需要先熟悉一些相关概念。（WorldWideWeb，环球信息网的缩写，也可简称为Web，中文名叫万维网）：一个基于超文本（Hypertext）方式的信息检索服务工具。这种把全球范围内的信息组织在一起的超文本方法，采用的是由指针链接的超网状结构。Web系统允许超文本指针所指向的目标信息源不仅可以是文本，也可以是其它媒体，如图形、图像、声音、动画等信息，更重要的是可以把分散在不同主机上的资源有机的组织在一起，这种超文本结构与多媒体的结合体，被称为“超媒体”（Hypermedia，现在的含义已变为UltraMedia）。1.1网页概述超链接（HyperLink）：特殊的文字标识，它指向了中的资源，例如一个网页、声音、文件、网页的一个段落或者中的其他资源等，这些资源均可放在任何一个服务器上。在网页中，一个超链接可以是一些文字也可以是一张图片。1.1网页概述统一资源定位器（UniformResourceLocator，URL）：用于描述Internet上资源的位置和访问方式，它的功能相当于在实际生活中写信的通信地址，因为也可以把URL称为网址。://网页概述网站（WebSite）：一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。网页（Webpages）：网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图像、动画、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。1.1网页概述首页（Homepage）：也可称之为主页，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者访问一个网站的第一个网页，默认索引文件名为：index.html、index.php等。1.1网页概述在网络中，如果要向全球范围内发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于发布信息的“母语”。这种。超文本标记语言（HypertextTextMarkupLanguage，HTML）是构成Web页面（Page）的基础。1.1网页概述CSS（CascadingStyleSheet，层叠样式表）是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。1.1网页概述JavaScript是由Netscape公司开发的一种脚本语言（ScriptingLanguage）。在HTML基础上，使用JavaScript可以开发交互式Web网页，例如可以在线填写各类表格、联机编写文档并发布等。1.2Web设计基础1.2.1Web设计原则1.明确站点类型新闻资讯类站点，如新浪、搜狐等大型门户网站。如图1-1所示为新浪网的首页。1.2Web设计基础图1-1新浪网1.2Web设计基础一些资讯和形象相结合的网站，如政府网等。如图1-2所示为中央政府的门户网站。图1-2中央政府门户网站1.2Web设计基础第三类是形象类网站，比如商业企业的对外宣传网站。如图1-3所示为美的集团网站。图1-3美的集团网站1.2Web设计基础除了上述网站类型外，还有一些网站具有更多的专业化设计。如图1-4所示为瑞丽女性网的页面。图1-4瑞丽女性网1.2Web设计基础2.保持站点简洁明确对于今天的许多企业而言，网站极有可能是他们和目标客户之间的第一联系方式。因此使客户能够清楚的认识网站所要表达的信息或提供的服务是至关重要的。一个好网站的设计应该做到主题鲜明突出，布局清晰简洁，能够以简单明确的语言和画面告诉访问者站点的主题，方便用户能够容易地找到他所需要的内容。1.2Web设计基础（1）Web设计要求界面简洁：简洁首先是对内容文本进行精炼化，保留关键信息。使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和颜色的数目。1.2Web设计基础（2）Web设计要求内容明确：使用清楚的消息标识，确保用户了解此页面的上下文。还可以使导航元素保持一致，并且对访问率最高的区域进行明显的标记，是它们易于被用户找到。界面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。除此之外，还要确保界面上每一个元素都能让浏览者看到。此外，为保持简单明确，网页设计时尽量减少浏览层次。1.2Web设计基础3.网页设计一致性一致性的网页设计原则使得访问者容易理解站点的结构，否则可能导致访问者陷入困惑。对优秀的Web站点分析可以发现，优秀的网页虽然各有特色，但都遵守最基本的原则，即保持站点内部页面之间的一致性。要保持一致性，可以从页面的结构排版入手：通过定义一致的页面模板，各个页面使用相同的页边距。文本和图形之间保持相同的间距。主要图形、标题或符号旁边留下相同的空白。如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志，如果使用图标导航，则各个页面应当使用相同的图标来创造出一种熟悉感。1.2Web设计基础如图1-5所示当当网的二级栏目图书频道和其首页导航条保持一致。这样使得这些页面呈现出的视觉形象就是相互联系，也使用户感知到正在访问的页面与此前访问的该网站的网页是相互联系的。图1-5当当网二级导航1.2Web设计基础1.2.2网站结构规划1.网站栏目规划网站栏目的划分需要遵循一些基本的原则。（1）栏目内容一定要紧扣主题。（2）栏目的目录设计要求简洁，结构层次清晰，以方便网站的管理。1.2Web设计基础（3）栏目的内容要突出重点，对于用户经常要访问的内容应直接放入主栏目下。而对以其它的辅助内容，如关于本站，版权信息等可以不放在主栏目中，以免冲淡主题。尽可能删除与主题无关的栏目以及尽可能将网站最有价值的内容列在栏目上。（4）为方便用户使用，一般情况下访问者应能够在3-5次鼠标点击后可查询到相关问题。因此应对栏目级数进行控制，网站的页面级数最多控制在三级，同时链接应当是清晰而准确的。1.2Web设计基础2.目录结构规划网站目录指建立网站时创建的目录。目录结构主要指网站所包含的文件所存储的真实位置所表现出来的结构。目录结构往往是被设计者容易忽略的问题。大多数初学者进行站点设计时都是未经规划随意创建子目录。事实上，目录结构的好坏对于网站的维护、内容的扩充和移植、搜索引擎的访问都有重要的影响。1.2Web设计基础（1）建立目录的建议不要将所有文件都存放在根目录下。按栏目内容建立子目录。建立一些特定目录存放公共信息。例如把图片文件存放在images目录。1.2Web设计基础（2）目录规划原则目录的层次不要太深，建议不要超过3层。不要使用中文目录，使用中文目录可能会影响网址的正确显示。不要使用过长的目录。尽量使用意义明确的目录，比如可以使用images，css，js，bbs等。首页的主文件名通常命名为index，放在根目录下。每个栏目的首页命名方式相同。1.3网页布局1.3.1布局设计原则通常可以从以下几个大的方面考虑布局的基本设计原则。（1）网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式。网页中要展示的内容必须是依据站点的主要栏目进行规划的。同时可以将所要表达的相近的栏目集中在一个区域显现，构成一种群体效应。（2）网页布局应区分栏目模块的重要程度。分开栏目的主次性，重要栏目以顶部、左侧排列，次要的栏目以底部、右侧排列。即重要信息、重要功能模块“靠上靠左”原则。（3）网页布局必须尊重用户习惯。不仅要考虑不同类型用户的使用习惯差异，还要考虑中、英文等不同语种用户的浏览习惯。1.3网页布局1.3.2布局设计类型网页布局大致可分为“国”字型、“匡”字形型、标题正文型、框架型、封面型、Flash型、变化型等。思考：1.网易网站的布局设计属于哪种类型？2.网络传播学院的网站首页布局设计属于哪种类型？1.3网页布局1.3.3布局设计元素在网页文件中，会涉及很多的页面元素。如何将这些页面元素有机地组合起来，达到满意的视觉效果，必须把这些元素放在合适的位置上，这就是网页元素的定位。（1）页面规格。（2）Logo设计。（3）页头。（4）文本。（5）页脚。（6）图片。（7）多媒体。（8）留白。1.3网页布局1.3.4布局设计技术1.TABLE表格布局表格布局的优点是简单易用、所见即所得、设计速度快。但表格布局的代码可读性差、可维护性差、网页打开速度较慢。后台代码太多，导致网站打开速度慢。如果要考虑手机客户，请不要使用该布局。1.3网页布局2.DIV+CSS布局（将在以后的教学中重点学习）DIV+CSS布局优点有：DIV用于搭建网站结构，CSS用于实现网站表现，将表现与内容分离，便于大型网站的协作开发和维护；提高搜索引擎对网页的索引效率；缩短改版时间；大大缩减页面代码，提高页面浏览速度，缩减带宽成本；强大的字体控制和排版能力。随着浏览器版本的标准化和制作工具的完善，该布局技术原来的缺点已经逐渐被克服，建议使用。1.3网页布局3.框架布局框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常和表格配合使用。先用框架将页面划分为几个区域，然后再用表格实现各区域的精确局部。常用在网站系统的后台页面设计中。由于在HTML5标准中已经不被推荐，所以该布局不建议使用。1.4内容设计对于网页来说，最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。一个用户访问网站主要在于网站的内容，因此内容设计应当满足网站的目标，每个页面的内容应当受到良好的组织，适合网站的受众。一般而言，内容通常有两种表现类型：文本和多媒体。1.5风格设计1.5.1网页设计构成要素网页设计的风格、图形、内容形式千变万化，构成图形图像的最基本的造型元素是点、线、面。点、线、面的变化组合构成网页实际的多样化，是与别具一格的独特性相联系的。点、线、面的变化是网页设计活力的体现，也是创造形式美的根本要求，使网页设计具有不同审美倾向的特征。如果以不同图形或者单位来划分点、线、面又是相对的。例如：一个圆形就是一个点，一排圆形就是一条线，几排、几十排甚至几百排的圆形就组成了一个面。1.5风格设计1.5.2网页设计的风格类型网页设计作品实际上没有好坏之分，只有风格类型上的区别。1.平面风格2.矢量风格3.像素风格4.三维风格1.6色彩设计1.6.1色彩基础1.色