第1章网页设计概论.ppt

《第1章网页设计概论.ppt》由会员分享，可在线阅读，更多相关《第1章网页设计概论.ppt（82页珍藏版）》请在三一办公上搜索。

1、第1章 网页设计概论,本章主要内容,网页设计基础知识网页设计相关的多媒体技术HTML基础,1.1 网页设计基础知识,1.1.1 Internet与Web1.1.2 网页、网站与主页1.1.3 网站分类与赏析1.1.4 网页色彩与布局,Internet 与 WWW,Internet又称国际互联网，是一个把分布于世界各地不同结构的计算机网络通过各种传输介质互相连接起来的网络。Internet上的信息资源极为丰富，分为信息资源和服务资源两类。它的主要功能包括：网上信息查询、网上交流、电子邮件、文件传输和远程登录。,WWW 与浏览器,World Wide Web简称WWW或Web 基础：超文本标记语言

2、（Hypertext Markup Language,HTML）与超文本传输协议（Hypertext Transfer Protocol，HTTP）服务：提供Internet信息查询服务的浏览系统。Web采用客户机/服务器工作模式所有的客户端和Web服务器统一使用TCP/IP协议，统一分配IP地址，使得客户端和服务器的逻辑连接变成简单的点对点连接。在WWW工作过程中，用户所使用的本地计算机是运行Web客户程序的客户机，通过Internet访问分布在世界各地的Web服务器。用户浏览Web上的信息需要使用Web浏览器。,WWW 与浏览器,网页、网站与主页（1）,网页（Web Page），也称为We

3、b页，是用户通过浏览器在Internet中看到的页面。,网页：由HTML语言（超文本标记语言）编写的集文本、图片、声音和动画等信息元素为一体的页面文件。,网页、网站与主页（2）,网页（Web Page），也称为Web页，是用户通过浏览器在Internet中看到的页面。,网页：由HTML语言（超文本标记语言）编写的集文本、图片、声音和动画等信息元素为一体的页面文件。,Web网页采用超文本格式。它包含有文本、图像、声音、视频；还含有指向其他Web页或页面本身某特定位置的超链接；网页的元素还包括动画、表单、程序,网页、网站与主页（3）,从文件角度讲，网页通常是一种由HTML语言编写的文本文件，网页文

4、件又称HTML文件，其扩展名为.html或htm。,在浏览器中选择【查看】【源文件】命令，即可打开一个网页文件并看到网页的源代码。,网页、网站与主页（4）,编辑网页的操作步骤如下：选择【开始】【程序】【附件】【记事本】命令，启动“记事本”程序。在记事本中输入HTML代码保存文件。双击文件图标，即可打开该文件，看到所示的页面。,网站（Website）又称为站点或Web站点。网站是指根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合,网页、网站与主页（5）,主页是进入网站的门户，是整个网站的第一页。一般命名为index.html文件。主页上通常会有整个网站的导航目录，所以主页

5、也是一个网站的入口或者说主目录。,网站分类与赏析,1门户类网站网址：2企业信息类网站网址：3教育类网站网址：www.employment.harvard.edu4产品信息类网址：,网页色彩与布局,网页色彩的应用“中国瓷器”网站http:/“北美工艺品展”http:/“多媒体设计”网站http:/,网页布局的基本概念 页面尺寸：网页的尺寸和显示器大小及分辨率有关。分辨率为1024768，页面的显示尺寸为1007600像素；分辨率为800600，页面的显示尺寸为780428像素；分辨率为640480，页面的显示尺寸为620311像素。,网页布局,页面布局类型,国字型 也称为“同”字型或“口”字型，

6、http:/。拐角型 去掉“国”字型布局的最右边的部。http:/。“三”字型 又称为上中下型，是一种简洁明快的艺术性网页布局。http:/:/也称为“POP”型。http:/,1.2 多媒体素材基础,1.2.1 颜色的基本概念1.2.2 图像的色彩模式1.2.3 图像的基本属性1.2.4 图像文件的格式1.2.5 计算机动画概述,1.2.1 颜色的基本概念,1颜色的三要素亮度 指颜色的明暗程度，是光作用于人眼时所引起的明亮程度的感觉，它与被观察物体表面的光线反光系数有关。色相（或色调）是指颜色的相貌，是人眼看到的一种或多种波长的光时所产生的彩色感觉，它反映颜色的种类和基本特性。饱和度也常称为

7、纯度或彩度。是色彩的鲜艳度或深浅程度，是由颜色掺入白色光的程度决定的。,1.2.1 颜色的基本概念,2三基色原理三基色，它们相互独立，其中任意色均不能由其他两色混合产生。自然界常见的各种彩色光，都可由三种颜色相互独立的光组成。有两种基色系统，一种是加色系统，其三基色是红（Red）、绿（Green）、蓝（Blue），另一种是减色系统，其三基色是青色（Cyan）、品红（Magenta）和黄色（Yellow）。不同比例的三基色光相加得到的彩色称为加色混合。其规律如下：红色+绿色=黄色红色+蓝色=品红绿色+蓝色青色红色+绿色+蓝色白色,1.2.2 图像的色彩模式,色彩模式是指在计算机上打印或显示图像时

8、表示颜色的数字方法,1灰度模式该模式只有灰度色（图像的亮度），没有彩色。在灰度色图像中，每个像素都以8位或16位表示，取值范围在0（黑色）255（白色）之间。,1.2.2 图像的色彩模式,2RGB模式RGB模式是工业界的一种颜色标准，通过对红、绿、蓝三个颜色通道的变化以及它们之间的相互叠加来得到各式各样的颜色。这个标准几乎包括了人类视力所能感知的所有颜色，是目前应用最广的颜色模式之一。网页制作中使用最广泛的是RGB色彩模式的十六进制显示模式。即用3个00FF的十六进制数来表示组成颜色的红、绿、蓝色的数值。例如：000000表示黑色，FFFFFF表示白色，FF0000表示红色，0000FF表示蓝

9、色，总共有224种颜色。,1.2.2 图像的色彩模式,3CMY模式计算机屏幕显示彩色图像时采用的是RGB模式，而在打印时 一般需要转换为CMY模式。CMY模式是使用青色（Cyan）、品红（Magenta）、黄色（yellow）3 种基本颜色按一定比例合成色彩的方法。CMY采用相减混色模型。注意：等量的CMY混合后并不能产生完备的黑色或灰色。因此，在印刷时常加一种真正的黑色（Black），这样CMY模式又称为CMYK模式。CMYK色彩不如RGB色丰富饱满，在Photoshop中会导致运 行速度比采用RGB色慢或部分功能无法使用。,1.2.2 图像的色彩模式,4HSB模式 HSB模式是基于人类感觉

10、颜色的方式建立起来的，对于人的眼睛来说，能分辨出来的是颜色的色相、饱和度和亮度，而不是RGB模式中各基色所占的比例。HSB颜色就是根据人类对颜色分辨的直观方法，将自然界的颜色看作由色相（Hue）、饱和度（Saturation）、亮度（Brightness）组成。5Lab模式 Lab颜色模式通过A、B两个色调参数和一个光强度来控制色彩，A、B两个色调可以通过-128+128之间的数值变化来调整色相，其中A色调为由绿到红的光谱变化，B色调为由蓝到黄的光谱变化，光强度可以在0100数值范围内调节。,1.2.2 图像的色彩模式,6安全色 图像在网络发布时，色彩的显示可能会受到浏览器端的操作系统和浏览器

11、的影响，同一种颜色也会在不同的浏览器中显示出不同的亮度或者色相。我们把在不同操作系统和浏览器中显示效果一致的216中颜色称为网络安全色。辨别一种颜色是否是网络安全色的方法是看其颜色值，任何由00、33、66、99、CC或者FF组合而成的颜色都是Web安全色。例如：003366、0066FF等。通常在Photoshop中颜色拾取框中可以直接选取的颜色都是Web安全色。,1.2.3 图像的基本属性,1图形与图像数字图像的种类有两种：图形和图像 图形又称矢量图形、几何图形或矢量图，是经过计算机运算而形成的抽象化结果，由具有方向和长度的矢量线段构成。计算机在显示图形时从文件中读取指令并转化为屏幕上显示

12、的图形效果。,1.2.3 图像的基本属性,1图形与图像图像又称点阵图像或位图图像，是指在空间和亮度上已离散化的图像。一幅图划分为M行N列，行与列的交叉处为一个像素，每个像素点用若干个二进制位表示该像素的颜色和亮度，因此，在计算机中对应于该像素点的值是它的亮度或颜色等级，像素的颜色等级越多则图像越逼真,位图图像及其放大后的效果,1.2.3 图像的基本属性,2图像分辨率分辨率是用于度量图像单位长度数据量的参数，其高低直接影响图像的质量。分辨率通常表示为ppi（pixel per inch，像素/英寸）和dpi（dot per inch，点/每英寸）。计算机显示领域用ppi度量分辨率，而dpi用于打

13、印、印刷领域等。,1.2.3 图像的基本属性,显示分辨率显示分辨率是指数字化的图像经过计算机显示系统，如显示卡、显示器描述时，屏幕呈现出横向和纵向像素的个数。单位是ppi，其值是横向像素纵向像素。常见的标准显示分辨率有800600像素、1024768像素、12801024像素等。扫描分辨率扫描分辨率是指每英寸扫描到的点，单位是dpi。它表示一台扫描仪输入图像的细腻程度，数值越大扫描的图像转化位数字图像越逼真，扫描仪的质量越高。打印分辨率打印分辨率是打印机输出图像时采用的分辨率，单位是dpi。同一台打印机可以使用不同的打印分辨率，打印分辨率越高，图像输出质量越好。,1.2.4 图像文件的格式,1

14、BMP格式BMP（Bitmap）是Microsoft公司为其Windows系列操作系统设置的标准图像文件格式。BMP文件格式具有以下特点：每个文件存放一幅图像，可以多种颜色深度保存图像(如16色、256色、24位真彩色模式)。BMP文件可以使用行程长度编码（RLC）进行无损压缩，也可不压缩。不压缩的BMP文件是一种通用的图像文件格式，几乎所有Windows应用软件都能支持，但文件较大。,1.2.4 图像文件的格式,2GIF格式GIF（Graphics Interchange Format）格式文件为网络传输和BBS用户使用图像文件提供方便。目前，大多数图像软件都支持GIF文件格式，它特别适合于

15、动画制作、网页制作以及演示文稿制作等领域。GIF文件格式具有以下特点：采用无损压缩的方式，产生的文件很小，下载速度快，但最多只支持256种颜色。,1.2.4 图像文件的格式,3JPEG格式JPEG（Joint Photographic Experts Group）格式文件用有损压缩方式去除冗余的图像和彩色数据，在获得极高压缩率的同时能展现十分丰富和生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像质量。因此，JPEG文件格式适用于在Internet上传输图像。4TIF格式由Aldus和Microsoft公司联合开发的，最初用于扫描和桌面出版业，是一种工业标准格式。它被许多图形图像软件

16、所支持。文件有压缩和非压缩两种形式，非压缩的TIF文件可独立于软件和硬件环境。,1.2.4 图像文件的格式,5PNG格式的图像文件PNG（Portable Network Graphic）图像是网络传输中的一种无损压缩图像文件格式，可以保存灰度模式、索引颜色模式、图层、帧等图像信息，在大多数情况下，它的压缩比大于GIF格式图像，利用Alphs通道可以调节图像的透明度，可提供16位灰度图像和48位真彩色图像。6PSD格式的图像文件PSD图像是著名的图像处理软件Photoshop中使用的一种标准图像格式文件，可以不同图层分别存储，从而能够保存图像处理的每一个细节部分，便于图像的编辑和再处理。,1.

17、2.5 计算机动画概述,分类根据动画的性质和运动方式，计算机动画可分为，逐帧动画（又称帧动画）、实时动画（又称算法动画）和矢量动画。按照动画的表现形式分类，可以分为二维动画、三维动画和变形动画3大类。逐帧动画是指构成动画的基本单位是帧，许多帧组成一幅动画。逐帧动画借鉴传统动画的概念，每帧的内容不同，当连续播放时，通过一帧一帧显示动画的图像序列形成动画视觉效果。逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。逐帧动画主要用在传统动画片的制作、网页的制作、以及电影特技的制作方面。,1.2.6 音频与视频基础,常见的音频文件格式 声音文件又称为音频文件，用来记录自然声和计算机等电子设备产生

18、的声音。声音文件分为两大类：一类是采用WAV格式的波形的音频文件；另一类是采用MIDI格式的乐器数字化接口文件。对于WAV格式文件，通过数字采样获得声音素材；而对于MIDI格式文件，则通过MIDI乐器的演奏获得声音素材。,1.2.6 音频与视频基础,视频文件的格式视频文件可以分为两大类，其一是影像文件，例如常见的VCD。影像文件一般可达几MB至几十MB甚至更大。其二是流式视频文件，它是随着国际互联网的发展而诞生的，例如在线实况转播，就是建立在流式视频技术之上的。AVI文件是由Microsoft公司开发的一种数字音频与视频文件格式，被大多数操作系统直接支持。它将视频和音频混合交错地存储在一起，调

19、用方便、图像质量好。但AVI文件没有限定压缩标准，不同压缩标准生成的AVI文件，必须使用相应的解压算法才能将其播放出来，而且文件体积过于庞大。MOV文件是Apple公司开发的一种音频、视频文件格式。MOV格式支持25位彩色，支持领先的集成压缩技术，提供了150多种视频效果，并配有提供了200多种MIDI兼容音响和设备的声音装置，包含了基于Internet应用的关键特性，具有跨平台、存储空间要求小的技术特点。另外还有MPEG、DAT、RM、ASF、WMV等格式的文件。,1.3 HTML基础,1.3.1 HTML文档基本结构1.3.2 HTML的基本结构标记1.3.3 文字与段落排版标记1.3.4

20、 多媒体标记1.3.5 超链接标记1.3.7 框架标记,1.3.1 HTML文档基本结构,1HTML简介HTML是Hypertext Markup Language（超文本标记语言）的缩写，它是构成Web页面的符号标记语言。通过HTML将所需要表达的信息按某种规则写成HTML文件，并将这些HTML文件翻译成可以识别的信息，就是所见到的网页。,2一个简单的HTML实例【案例1.1】用HTML制作一个简单的网页。在“记事本”中输入文本。在“记事本”中，选择“文件”“保存”命令，将该文件保存为“1-1.htm”（HTML文件的扩展名是.htm或.html。双击“1-1.htm”，即可显示网页。,示例

21、,第一个简单网页 我的摄影网页 首页|业界资讯|摄影器材|摄影技术|作品欣赏 摄影爱好者的家园 摄影专题 摄影杂谈 摄影攻略 摄影专题 风光摄影 体育摄影 休闲摄影,【案例1.1】源代码,1.3.1 HTML文档基本结构,一个最基本的网页一般由三个组成部分构成：,1.3.1 HTML文档基本结构,3.标记和属性（1）HTML标记 HTML文档中用于描述功能的标识符称为标记，标记的作用是指定浏览器如何显示被标记的相关内容。标记符由一些字母组成。格式为：受标记影响的内容说明：任何标记都用“”括起来，如，以表示这是HTML代码而非普通文本。注意，“”与标记名之间不能留有空格或其他字符。HTML的多数

22、标记都是成对出现的，分别称为开始和结束标记，结束标记需在标记名前加上符号“/”，也有不用结束的，称为单标记，如、。任何标记的大小写都是等价的，建议用小写形式。（4）标记可以嵌套使用，嵌套时注意不要发生交叉嵌套。下面的嵌套是正确的：摄影动态,1.3.1 HTML文档基本结构,（2）标记的属性 格式为：受标记影响的内容例如，段落标记p的一种使用形式：说明：属性只可加于开始标记中，并非所有的标记都有属性，如换行标记就没有属性。根据需要可以使用某标记的所有属性，也可以只使用其中的几个属性。在使用时属性之间没有顺序要求。属性和标记一样，不区分大小写，但建议使用小写字母表示。任何标记的属性都有默认值，当使

23、用默认值时属性描述可省略。,1.3.1 HTML文档基本结构,【案例1.2】标记属性示例 标记属性示例 Hello!网页设计学习从HTML开始！HTML语言是建立网页的规范,1.3.2 HTML的基本结构标记,1文档标记格式：html文档的内容是开始标记，处于文档的最前面，表示文档的开始，即浏览器从开始解释，直到遇到结束。其他所有的HTML标记都位于这两个标记之间。标记不是必需的，但最好不要省略这两个标记，以保持Web文档结构的完整性。,1.3.2 HTML的基本结构标记,2文档头部标记格式：头部的内容 头部标记用来设定有关页面的一些信息，其内容可以是标题名、文本文件地址、创作信息等。例如，用

24、标记来设置网页的标题，用标记来定义样式表。,1.3.2 HTML的基本结构标记,2文档头部标记格式：头部的内容 头部标记用来设定有关页面的一些信息，其内容可以是标题名、文本文件地址、创作信息等。例如，用标记来设置网页的标题，用标记来定义样式表。3文档标题标记格式：标题名/标题概括了网页的内容，能使浏览者迅速了解网页的主题。浏览网页时标题名显示在浏览器的标题栏中。,1.3.2 HTML的基本结构标记,4文档主体标记 标记定义网页上显示的主要内容与显示格式，网页正文中的所有内容，包括文字、表格、图像、声音和动画等都包含在本标记中。Body常用的标记有排版标记、图像标记、超链接标记、表格标记等，这些

25、标记在后面陆续介绍，这里只介绍body的常用属性。,1.3.2 HTML的基本结构标记,其中：（1）bgcolor属性 设置网页的背景色，格式为：bgcoloer=RGB颜色编码（或者bgcoloer=颜色标识符）“RGB颜色编码”是一组六位的十六进制数值，第1、2位代表红色值（R），第3、4位代表绿色值（G），第5、6位代表蓝色值（B）。如，红色为ff0000，绿色为00ff00，蓝色为0000ff。“颜色标识符”在HTML的预定义颜色中取值。常用的颜色标识符有：red（红）、green（绿）、blue（蓝）、black（黑）、white（白）等。,1.3.2 HTML的基本结构标记,5注释

26、标记格式为：，或者 其中的“注释内容”被浏览器解释为注释，而不在浏览器窗口中显示。例如：,1.3.3 文字与段落排版标记,1文字控制标记（1）控制文本的字体、字号、颜色 文字控制标记用于控制文字的显示形式，常用的属性有face、size、color，格式为：文本内容 其中，face用于设置文字的字体，只有当前系统中能够使用的字体（中英文），设置才有效。size用于设置文字的字号大小，取值范围是17，数值越大字越大，默认值是3号字。color用于设置文字的颜色，默认颜色是黑色。,1.3.3 文字与段落排版标记,1【案例1.3】font常用属性应用示例。font常用属性示例 只设置文字的颜色为红色

27、 设置文字为5号蓝色 仿宋字,1.3.3 文字与段落排版标记,（2）控制字体特殊效果的标记 常用字体特效控制标记,1.3.3 文字与段落排版标记,2段落排版标记 段落排版标记主要是对网页的页面版式进行控制的标记，主要包括标题标记、段落标记、换行标记等。（1）标题标记 标题标记用于设置文本的各种题目，标题号越小，字号也大。格式：标题文字其中，hn用来指定标题文字的大小，分别为h1、h2、h6。align属性用来设置标题在页面中的对齐方式，取值为left（左对齐）、right(右对齐)和center（居中）。,1.3.3 文字与段落排版标记,【案例1.4】标题标记应用示例 标题标记应用示例 1级标

28、题的显示效果 2级标题的显示效果 3级标题的显示效果 4级标题的显示效果(左对齐）5级标题的显示效果（居中）6级标题的显示效果（右对齐）,1.3.3 文字与段落排版标记,（2）换行和段落标记 在HTML文档中，无法使用多个回车、空格、Tab键来调整文档段落的格式，只能用换行、段落标记来强制实现。换行标记br是一个单标记，其作用是产生换行。格式：仅产生一个新行，并不产生新段落。若在一个段落中使用该标记，产生的新行仍然具有原段落的属性。段落标记用于定义一个段落，并对段落的属性进行说明。它位于各段落起始位置部位，使用该标记后，每块文本段落之间都会空出一行。P标记有多个属性，最常用的是align属性，

29、用于定义段落的对齐方式，格式为：文本，其中，对齐方式为：left、right、center。,1.3.3 文字与段落排版标记,【案例1.5】换行、段落标记应用示例。换行、段落标记应用示例 诺贝尔奖简介。诺贝尔奖的由来 诺贝尔奖的奖项物理、化学、生理或医学、文 学、和平、经济诺贝尔奖的故事 提醒：由浏览结果可见，文件中的标记产生了换行效果，但产生的新行“物理、化学、生理或医学、文学、和平、经济”与“诺贝尔奖的奖项”属同一段落，仍居中显示。,1.3.3 文字与段落排版标记,3其他标记（1）水平线标记 水平线标记可以在网页中插入一条水平线，将不同功能的文字分隔开来。其中，align属性设置水平线的位

30、置，size属性设置水平线宽度，以像素为单位，默认为2。width属性设置水平线的长度，可以是像素或相对于当前窗口的百分比，默认值为100%。Color属性设置水平线的颜色。,1.3.3 文字与段落排版标记,（2）有序列表标记 有序列表是在各列表前面显示数字或字母的所排列表，可以使用有序列表标记ol和列表项标记li来创建。格式为：表项1 表项2 说明：Start属性设置数字或字母的起始值，可以取整数值。type属性设置序列的样式，有序列表标识符可以设置为：A大写英文字母；a小写英文字母；1阿拉伯数字；I大写罗马字母；i小写罗马字母。,1.3.3 文字与段落排版标记,【案例1.6】有序列表标记应

31、用示例。有序列表应用示例 璀璨的诺贝尔奖 诺贝尔奖项 诺贝尔物理学奖 诺贝尔化学奖 诺贝尔生理或医学奖 诺贝尔文学奖 诺贝尔和平奖 诺贝尔经济学奖 华裔诺贝尔物理学奖 杨振宁 李政道 丁肇中 朱棣文 崔琦 高锟,1.3.3 文字与段落排版标记,（3）无序列表标记 无序列表是在各列表前面显示特殊符号的所排列表，可以使用无序列表标记ul和列表项标记li来创建。格式为：表项1 表项2说明：type属性设置每个表项左端的符号类型，取值有disc（实心圆点）、circle（空心圆点）、square（方块）。,1.3.3 文字与段落排版标记,4文字与段落排版综合实例【案例1.7】制作一个介绍诺贝尔奖的页面

32、，如图所示。,1.3.4 多媒体标记,1图像标记图像标记用于在网页中插入图像。格式为：,1.3.4 多媒体标记,标记中的属性及其说明,1.3.4 多媒体标记,2背景音乐标记用于插入背景音乐，格式为：其中：url指定插入音乐文件的url。autostart指定是否自动播放音乐，取true时自动播放。loop指定是否循环播放，取值为n（整数）时，连续播放n次，否则循环播放，如：,1.3.4 多媒体标记,3音频和视频标记 在HTML文档中可以使用标记插入音频和视频文件。格式为：例如：4Flash标记 在HTML文档中可以使用标记插入Flash。格式为：,1.3.4 多媒体标记,【案例1.8】图文混排

33、及多媒体标记综合实例，如图1.3124所示。在【案例1.7】的基础上进行修改，添加背景音乐和图像，具体修改如下：在中增加播放音乐文件的功能：在的一级标题后面插入右对齐的图像：在水平线 标记后面插入左对齐的图像：,案例1.8,1.3.5 超链接标记,超链接 是由源端点到目标端点的一种跳转。源端点可以是文字或图像等。目标端点可以是多种对象（如其他网页或站点、图片、E-mail地址、页内段落等）。根据目标端点的不同，网页中的超链接可以分为：文件链接、图像链接、E-mail链接等。,1.3.5 超链接标记,1超链接路径超链接的路径设置非常重要，如果路径不正确，可能会出现无法跳转的情况。路径一般分为绝对

34、路径和相对路径。绝对路径是指Internet上资源的完整地址，形式为“协议:/计算机域名/文档名”。当链接到其他网站中的文件时必须用绝对路径。例如：href=http:/,1.3.5 超链接标记,2建立文件链接在HTML中，使用标记建立文件链接，格式为：链接标识说明：参数href是必选项，用于指定要链接到的目标文件名称。title属性是可选项，用来设置指向超链接时所显示的标题文字。,1.3.5 超链接标记,2建立文件链接在HTML中，使用标记建立文件链接，格式为：链接标识说明：target属性用来设置目标网页打开的窗口，默认是在当前窗口打开链接目标。可取值为：_blank，_parent，_t

35、op，_self。链接标识以超链接的形式呈现在网页中，单击该标识，浏览器将url的资源显示在屏幕上。例如：中原工学院用户单击当前网页中的“中原工学院”时，即可打开中原工学院首页。,1.3.5 超链接标记,3链接到E-mail单击指向电子邮件的链接，将打开默认的电子邮件程序，如Foxmail、Outlook Express等，并自动填写邮件地址。格式为：链接标识其中，E-mail地址是要链接到的E-mail的实际地址。例如：请给我写信,1.3.5 超链接标记,4用图像建立链接可以用图像作为链接标识建立超链接。格式为：其中，将插入一个图像并以该图像作为超链接标识，单击该图像将跳转到链接目标位置。提

36、示：若要创建空链接，只需在a标记的href属性设置为href=#即可。,1.3.5 超链接标记,【案例1.9】使用a标记创建超链接示例。超链接标记的应用标题标记应用示例中原工学院惠普海报 请给我回信,1.3.6 框架标记,框架是进行网页布局的常用技术，使用框架可以将浏览器窗口划分为多个相互隔离的区域，每个区域显示一个HTML文件，从而可以取得在同一个浏览器窗口中同时显示不同网页的效果。1建立框架 框架标记有两个：框架组标记和框架标记。标记用来划分框架，标记用来声明其中框架页面的内容，并且必须在范围中使用。框架标记的基本格式如下：,1.3.6 框架标记,（1）框架组标记框架组标记用来定义一个框架

37、。格式为：,1.3.6 框架标记,rows和cols属性rows设定横向分割的框架数目，cols设定纵向分割的框架数目。属性的取值主要有以下形式：百分比和“*”的组合形式。如：rows=“30%,40%,*”，表示垂直方向分割成3个窗口（即窗口分成3行），各个子窗口的高度占大窗口的百分比依次为30%、40%和30%，其中“*”对应的子窗口的高度为剩余部分的高度。像素值和“*”的组合形式。cols=“200,100,*”，表示水平方向分割成3个窗口（即窗口分成3列），前两个子窗口的宽度分别为200像素、100像素，第3个子窗口的宽度为大窗口剩余的宽度。border设定边框的宽度，单位为像素。bo

38、rdercolor设定边框的颜色。frameborder设定子窗口是否有边框，“yes”代表有边框，“no”代表无边框。framespacing设定各子窗口之间的间隔大小，单位是像素，默认值是0。,1.3.6 框架标记,（2）框架标记框架标记是一个单标记，定义各子窗口的属性，在frameset标记中分割几个窗口，就要使用几个标记。其格式为：,1.3.6 框架标记,框架标记的属性及其说明如表所示。,1.3.6 框架标记,2在框架中显示独立的网页在框架中打开的网页有两种：一种是相互独立彼此之间没有任何联系，一种是网页之间存在链接关系。要在一个框架窗口中打开独立的网页，只需在定义窗口的feame标记

39、中使用src属性即可。【案例1-10】一个简单的框架应用示例所示。框架应用1,1.3.6 框架标记,3建立框架间的链接在很多网页中，常在一个框架窗口中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架窗口中显示相应内容。这些目录是链接文本，需要在框架之间建立超链接，并指明要显示目标文件的框架。使用的target属性可以控制目标文件在哪个框架内显示。当单击超链接文本时，目标文件将显示在指定的框架内。具体要经过以下两个步骤：（1）为超链接的目标框架指定一个名字。所谓超链接的目标框架就是链接指向的网页所在的子窗口。为目标框架命名的方法，是在建立目标框架时，使用frame标记的name属性。方法如下：（2）指定超链接的目标框架。即在定义超链接时，使用链接标记a的target属性。用法如下：链接标识,1.3.6 框架标记,【案例1-11】框架间的链接应用示例。,Thats all for this chapter!,