第1章网页设计基础重点介绍.pptx

第1章 网页设计基础 教学目标 熟悉网页设计的相关概念。 了解Web设计的原则、网站结构规划（栏目、目录）的原则。 了解网页布局设计的原则、布局设计的类型、布局设计元素、布局设计技术。 了解网站内容设计的元素（文本、多媒体）和如何进行内容排版。 了解网页设计的构成要素和风格设计的类型。 了解网页色彩设计的基础知识。 熟悉HTML文档的结构和基本语法。 教学内容 1.1 网页概述 1.2 Web设计基础 1.3 布局设计 1.4 内容设计 1.5 风格设计 1.6 色彩设计 1.7 HTML基础 教学重点和难点 重点：网页设计的相关概念、HTML文档的结构和基本语法。 难点：HTML文档的基本语法。 导入：为什么要学习此课程 1.1 网页概述 在学习网页设计前，我们需要先熟悉一些相关概念。 WWW（World Wide Web，环球信息网的缩写，也可简称为Web，中文名叫万维网）：一个基于超文本（Hypertext）方式的信息检索服务工具。这种把全球范围内的信息组织在一起的超文本方法，采用的是由指针链接的超网状结构。Web系统允许超文本指针所指向的目标信息源不仅可以是文本，也可以是其它媒体，如图形、图像、声音、动画等信息，更重要的是可以把分散在不同主机上的资源有机的组织在一起，这种超文本结构与多媒体的结合体，被称为“超媒体”（Hypermedia，现在的含义已变为UltraMedia）。 1.1 网页概述 超链接（Hyper Link）：特殊的文字标识，它指向了WWW中的资源，例如一个网页、声音、文件、网页的一个段落或者WWW中的其他资源等，这些资源均可放在任何一个服务器上。在网页中，一个超链接可以是一些文字也可以是一张图片。 1.1 网页概述 统一资源定位器（Uniform Resource Locator，URL）：用于描述Internet上资源的位置和访问方式，它的功能相当于在实际生活中写信的通信地址，因为也可以把URL称为网址。 / /114/ 1.1 网页概述 网站（Web Site）：一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。 网页（Web pages）：网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图像、动画、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。 1.1 网页概述 首页（Home page）：也可称之为主页，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者访问一个网站的第一个网页，默认索引文件名为：index.html、index.php等。 1.1 网页概述 在网络中，如果要向全球范围内发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于发布信息的“母语”。这种WWW所使用的母语就是HTML。超文本标记语言（Hypertext Text Markup Language，HTML）是构成Web页面（Page）的基础。 1.1 网页概述 CSS（Cascading Style Sheet，层叠样式表）是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。 1.1 网页概述 JavaScript是由 Netscape公司开发的一种脚本语言（Scripting Language）。在HTML基础上，使用JavaScript可以开发交互式Web网页，例如可以在线填写各类表格、联机编写文档并发布等。 1.2 Web设计基础 1.2.1 Web设计原则 1. 明确站点类型 新闻资讯类站点，如新浪、搜狐等大型门户网站。如图1-1所示为新浪网的首页。 1.2 Web设计基础 图1-1 新浪网 1.2 Web设计基础 一些资讯和形象相结合的网站，如政府网等。如图1-2所示为中央政府的门户网站。 图1-2 中央政府门户网站 1.2 Web设计基础 第三类是形象类网站，比如商业企业的对外宣传网站。如图1-3所示为美的集团网站。 图1-3 美的集团网站 1.2 Web设计基础 除了上述网站类型外，还有一些网站具有更多的专业化设计。如图1-4所示为瑞丽女性网的页面。 图1-4 瑞丽女性网 1.2 Web设计基础 2. 保持站点简洁明确 对于今天的许多企业而言，网站极有可能是他们和目标客户之间的第一联系方式