第1章网页设计基础

1、第第1章章 网页设计基础网页设计基础主讲：杨锦伟主讲：杨锦伟理论课时：理论课时：3第第1章章 网页设计基础网页设计基础1.1 网页与网站概述网页与网站概述1.2 网页设计与制作初步网页设计与制作初步1.3 Dreamweaver MX 2004使用初步使用初步1.1 网页与网站概述网页与网站概述一、什么是一、什么是WWW WWW是是World Wide Web的英文缩写，翻译的英文缩写，翻译成中文的意思：成中文的意思：“全球网络信息查询系统全球网络信息查询系统”，或，或直译成直译成“万维网万维网”，或，或“全球网全球网”，它是一种以，它是一种以网页（网页（webpage）为基本单位构筑的网状结

2、构。）为基本单位构筑的网状结构。其目的是为了把遍布在其目的是为了把遍布在Internet上数以万计的网上数以万计的网页链接起来，形成一个庞大的资源信息网。页链接起来，形成一个庞大的资源信息网。 WWW将将Internet上的所有资源（包括文字、上的所有资源（包括文字、图片、声音、视频等）采用统一资源定位方式图片、声音、视频等）采用统一资源定位方式（URL： Uniform Resource Locator用来指示用来指示某一项资源（或信息）的所在位置，在某一项资源（或信息）的所在位置，在WWW应应用中常使用用中常使用URL作为地址标识。在浏览器地址栏作为地址标识。在浏览器地址栏中输入的便是网页

3、的中输入的便是网页的URL。）。）连接起来，而在客连接起来，而在客户端，访问者只需用浏览器，输入网页的户端，访问者只需用浏览器，输入网页的URL，便可轻松地访问便可轻松地访问Internet上的所有资源。上的所有资源。 构成构成WWW的基本元素是网页（的基本元素是网页（webpage）。）。二、什么是网页二、什么是网页不同的角度定义：不同的角度定义：1、从网页组成的角度来说，网页是由文字、图、从网页组成的角度来说，网页是由文字、图片、动画、声音、超级链接等组成的用浏览器显片、动画、声音、超级链接等组成的用浏览器显示的页面。示的页面。2、从语言的角度定义网页，网页是指一个用、从语言的角度定义网页

4、，网页是指一个用HTML语言编写的文件。它通常以语言编写的文件。它通常以HTM或或HTML作为文件的扩展名。作为文件的扩展名。 综合：网页是综合：网页是WWW上的基本文档，它是用上的基本文档，它是用HTML（超文本标记语言）描述的文档，它包括（超文本标记语言）描述的文档，它包括文本、图像、表格等内容（这些称为网页的元文本、图像、表格等内容（这些称为网页的元素）。这些内容必需用浏览器来显示。素）。这些内容必需用浏览器来显示。网页文档的说明：网页文档的说明：1、网页是含有、网页是含有HTML 标记的基本文档。标记的基本文档。2、该网页文档的格式是、该网页文档的格式是“.htm”或或“.html”。

5、3、网页文档是文本文档，可以用任何可以对文、网页文档是文本文档，可以用任何可以对文本进行编辑的软件进行编辑。本进行编辑的软件进行编辑。网页的分类网页的分类1、按所处位置分类、按所处位置分类 按网页在网站中所处的位置可将网页分为主页按网页在网站中所处的位置可将网页分为主页和子页两类。和子页两类。2、按表现形式分类、按表现形式分类 按网页的表现形式可将网页分为静态网页和动按网页的表现形式可将网页分为静态网页和动态网页。态网页。静态网页静态网页动态网页动态网页三、超级文本（三、超级文本（Hyper Text） 超级文本是一种带有超级文本是一种带有HTML标记的文本。（实际标记的文本。（实际上指的就是

6、网页）。上指的就是网页）。 WWW是基于超级文本的信是基于超级文本的信息查询工具。息查询工具。提示：超级文本是一种更复杂、更高级的文本显提示：超级文本是一种更复杂、更高级的文本显示方式，通过对有关词汇进行索引链接，使得这示方式，通过对有关词汇进行索引链接，使得这些带链接的词汇指向文本中其它的有关段落、或些带链接的词汇指向文本中其它的有关段落、或其它文本。这是超级文本的重要特性其它文本。这是超级文本的重要特性-链接。链接。四、超级链接四、超级链接 超级链接是网页中最常用的元素之一，网页就超级链接是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。是通过无数的超级链接才能组成一个

7、网站。 超级链接可以链接到网站内部页面、对象，也超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。面对象之间实现跳转。五、五、IP地址地址 IP地址用来标识连接到地址用来标识连接到Internet上的计算机，上的计算机，每一个每一个IP地址对应一台计算机，这与用电话号码地址对应一台计算机，这与用电话号码标识电话网络中的电话类似。标识电话网络中的电话类似。 计算机识别的计算机识别的IP地址由地址由32位二进制数值组成，位二进制数值组成，电计算机上以十进制数值来显示，一组数值分为电计算机上以十进制数值来显

8、示，一组数值分为4部分，每一部分均不能大于部分，每一部分均不能大于255，中间用，中间用“.”分分隔，如：隔，如：9 。六、域名六、域名 域名就是常说的网址，如百度的网址域名就是常说的网址，如百度的网址、网易的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服上数字表示，在访问网络时，域名将通过域名服务器转换成务器转换成IP地址，这种转换是在后台完成的。地址，这种转换是在后台完成的。七、浏览器七、浏览器 浏览器是指安装在客户端，用来查看浏览器是指安装在客户端，用来查看WWW中中的超级

9、文本的一种工具。的超级文本的一种工具。说明：每一个说明：每一个WWW的用户都要在自己的计算机的用户都要在自己的计算机上安装浏览器，才能上安装浏览器，才能“阅读阅读”网页中的信息，这网页中的信息，这也是使用也是使用WWW的最基本的条件。的最基本的条件。浏览器的种类：浏览器的种类：1、Internet Explorer（IE） 2、Netscape Navigator（NE） 3、腾讯、腾讯TT浏览器浏览器 八、统一资源定位器（八、统一资源定位器（URL） URL（Uniform Resource Locator）主要是）主要是用来指定协议（如用来指定协议（如HTTP或或FTP）以及对象、文档、）

10、以及对象、文档、万维网网页或其他目标在万维网网页或其他目标在Internet的位置和存取的位置和存取方式。方式。URL由以下四部分组成：由以下四部分组成： 1、通信协议、通信协议 2、主机名、主机名3、网页路径、网页路径4、网页名称、网页名称 如：如：4/xsc/notes/note.htm九、网站（站点）九、网站（站点）定义：简单地说就是一些链接在一起的网页的定义：简单地说就是一些链接在一起的网页的集合称之为网站。集合称之为网站。说明：网站是说明：网站是WWW（万维网）中最基本的组（万维网）中最基本的组成部分，也就是说在万维网中有许许多多的网站成部分，也就

11、是说在万维网中有许许多多的网站组成，这些网站可能是政府的、可能是企业的、组成，这些网站可能是政府的、可能是企业的、也可能是个人的，而牵涉的面也是非常广泛，只也可能是个人的，而牵涉的面也是非常广泛，只要是需要，各行各业都可以建立自己的网站，这要是需要，各行各业都可以建立自己的网站，这项工作已经成为了社会的需要。项工作已经成为了社会的需要。返回本章首页返回本章首页1.2 网页设计与制作初步网页设计与制作初步一、什么是一、什么是HTML HTML是是Hyper Text Markup Language的英的英文缩写，翻译为文缩写，翻译为“超文本标记语言超文本标记语言”。它是一种。它是一种用来制作超文

12、本文档的简单标记语言，是用来制作超文本文档的简单标记语言，是WWW上描述网页内容和外观的标准。上描述网页内容和外观的标准。 HTML是一种标记语言，由一些标记、属性及是一种标记语言，由一些标记、属性及属性值组成，对网页的行为作出说明，允许属性值组成，对网页的行为作出说明，允许Web浏览器解释它们，以便于理解。浏览器解释它们，以便于理解。 HTML使用标记来标识，每个标记一般包含了一使用标记来标识，每个标记一般包含了一对开始和结束标记，在标记中有属性和值。标记对开始和结束标记，在标记中有属性和值。标记描述了网页上的元素，例如文本段落、表格、图描述了网页上的元素，例如文本段落、表格、图像等。像等。

13、标记的格式标记的格式:内容内容标记内的内容称为元素，元素代表了标记的意义。标记内的内容称为元素，元素代表了标记的意义。 例如显示标题文本的例如显示标题文本的HTML代码：代码： 欢迎学习欢迎学习网页设计与网页设计与制作制作! 标记是描述文本显示大标记是描述文本显示大小。（其中小。（其中表示标记结束）表示标记结束）其中其中align=“center”是设置文本显示的对齐方式，是设置文本显示的对齐方式，它是这个标记的属性和值。它是这个标记的属性和值。 浏览器显示效果浏览器显示效果例如显示图像的例如显示图像的HTML代码：代码：浏览器显示效果浏览器显示效果关于编写关于编写HTML文档的说明：文档的说

14、明：1、HTML标记包含在标记包含在中，以区别于在页面上中，以区别于在页面上显示的文本。显示的文本。2、大多数、大多数HTML标记都成对出现，只有极少数单标记都成对出现，只有极少数单独出现，例如，独出现，例如，、等标记。等标记。3、HTML标记不区分大小写。标记不区分大小写。4、HTML文档的扩展名为文档的扩展名为htm，也可以为，也可以为html。5、HTML文档是一个纯文本的文档，可以使用任文档是一个纯文本的文档，可以使用任何文本编辑器来编辑它，例如记事本。何文本编辑器来编辑它，例如记事本。6、因为浏览器的差异，一些扩充的、因为浏览器的差异，一些扩充的HTML标记在标记在不同的浏览器上可能

15、显示的结果并不相同。不同的浏览器上可能显示的结果并不相同。HTML文档结构标记文档结构标记标准的标准的HTML文档结构：文档结构： 标题内容标题内容 主要内容在这里！主要内容在这里！ 1、HTML标记标记 标记的格式：标记的格式： 标记说明：标记说明：HTML标记用于表示一个页面的开标记用于表示一个页面的开始和结束（始和结束（ 表示开始，表示开始， 表示表示结束）。结束）。2、HEAD标记标记 标记的格式：标记的格式： 标记说明：标记说明：HEAD标记是页面的第二层标记，标记是页面的第二层标记，用于包含页面的标题信息。用于包含页面的标题信息。提示：提示： HEAD标记必须在标记必须在BODY标

16、记开始之前结标记开始之前结束，即束，即必须放在必须放在之前）。之前）。3、TITLE标记标记 标记的格式：标记的格式： 页面的标题页面的标题 标记说明：标记说明：TITLE标记提供了页面的标题名称，标记提供了页面的标题名称，这对标记之间的文本作为页面的标题。这对标记之间的文本作为页面的标题。 提示：这对标记是放在提示：这对标记是放在HEAD标记符之间的。标记符之间的。4、BODY标记标记 标记的格式：标记的格式： 页面的内容页面的内容 标记说明：标记说明：BODY标记标志着页面内容的开始和标记标志着页面内容的开始和结束，页面中所用其它的结束，页面中所用其它的HTML标记都在这对标标记都在这对标

17、记符之间。记符之间。5、注释标记、注释标记 标记的格式：标记的格式： 标记说明：标记说明： 标记是注释标记，在这标记是注释标记，在这个标记之内的文本都不会在用户的浏览器窗口中个标记之内的文本都不会在用户的浏览器窗口中显示出来。显示出来。二、网页制作的常用工具二、网页制作的常用工具网页设计软件网页设计软件 1、FrontPage2、Dreamweaver Dreamweaver是目前使用最多的网页设计软是目前使用最多的网页设计软件。件。图像处理软件图像处理软件1、Fireworks2、Photoshop。动画制作软件：动画制作软件： Flash返回本章首页返回本章首页1.3 Dreamweave

18、r MX 2004使用初步使用初步一、一、Dreamweaver简介简介 Dreamweaver最主要的功能是开发整个网站结最主要的功能是开发整个网站结构中所需的网页文件。无论是纯构中所需的网页文件。无论是纯HTML网页，还网页，还是客户端动态网页技术，甚至是提供数据库存取是客户端动态网页技术，甚至是提供数据库存取技术的服务器端动态技术网页，技术的服务器端动态技术网页，Dreamweaver均均可提供相关的支持。可提供相关的支持。 Dreamweaver是一套功能非常强大的网页编辑是一套功能非常强大的网页编辑软件，由软件，由Macromedia公司开发，提供各种可视公司开发，提供各种可视化的网页编辑功能，从单一的化的网页编辑功能，从单一的HTML静态网页，静态网页，到复杂的到复杂的ASP动态网页的数据库系统设计，均能动态网页的数据库系统设计，均能够以鼠标拖曳的方式迅速完成网页设计工作。够以鼠标拖曳的方式迅速完成网页设计工作。二、二、 Dreamweaver工作环境工作环境1、启动、启动Dreamweaver2、 Dreamweaver起始页起始页3、新建文档、新建文档“新建文档新建文档”对话框对话框4、Dreamweaver操作界面操作界面Dreamweaver操作界面操作界面主菜单主菜单工具栏工具栏“文档文档”窗口窗口“属性属性”面板面板面板开关面板开关Dreamwe