网页设计教学PPT

1、第二章网页设计语言第二章网页设计语言HTMLoHTML基础知识o页面基本信息和布局o文本修饰o超文本链接o表格o图像o表单o多媒体什么是HTML？ HTML是Hyper Text Markup Language的英文缩写，翻译为“超文本标识语言”。它是一种用来制作超文本文档的简单标记语言，是WWW上描述网页内容和外观的标准。 HTML是一种标识语言，由一些编码和标注组成，对网页的行为作出说明，允许Web浏览器解释它们，以便于理解。 HTML如何表示呢？ootable示例示例oooo第一列第一列o第二列第二列oooo HTML包含了一对打开和关闭的标记，在当中并有属性和值。标记描述了每个网页上的

2、元素，例如文本段落、表格、或者图像等。返回例如HTML代码： 欢迎! 标记是描述文本显示大小。（其中表示标记结束）其中align=“left”是设置文本显示的对齐方式，它是这个标记的属性和值。HTML的特点的特点o应用的简易性 可以使用任何一种文字处理工具； 语法规则比其他编程语言简单的多。o功能的强大性 几乎能够完成所有的设计工作。o兼容性 几乎每个软件都提供了HTML视图模式。HTML的功能的功能o可以设计远程服务表单，用于商务网页中的信息检索和商品订购等；o可以定义标题、文字、表格、列表、图像、声音和影视文件等网页中的各类元素；o通过超链接功能可以将互联网中不同页面或页面中的不同位置进行

3、逻辑链接，以供用户进行定位浏览；o可以将互联网上的不同资源进行链接，以实现资源共享。HTML文档结构标记我们先来看一个标准的HTML文档结构： 标题内容 主要内容在这里！ 将以上代码在浏览器上发布，会是什么结果？在记事本中演示。HTML文档结构文档结构o它是以标签（标签（tag）来标识，而标签本身则由“”号标识，标签内的内容称为元素元素。o绝大多数元素是由三部分组成的，即起始标记起始标记、内内容容和结尾标记结尾标记。 o元素的起始标记叫做起始链接签起始链接签(start tag)，元素结束标记叫做结尾链接签结尾链接签(end tag)。在起始链接签和结尾链接签中间的部分是元素体，即元素内容元素

4、内容。 例子例子oo欢迎进入E商网o 说明：说明：o第一行第一行是元素的起始链接签，它表明元素从此开始。起始链接签的形式为。o第二行第二行是body元素的元素体。o第三行第三行是body元素的结尾链接签。结尾链接签的形式为。 HTML文档结构文档结构o文件或超文本o文本或超文本o 关于编写HTML文档的说明oHTML标记包含在中，以区别于在页面上显示的文本。o大多数HTML标记都成对出现，只有极少数单独出现，例如，标记。oHTML标记不区分大小写。oHTML文档的扩展名为htm，也可以为html。oHTML文档是一个纯文本的文档，可以使用任何文本编辑器来编辑它，例如记事本。o因为浏览器的差异，

5、一些扩充的HTML标记在不同的浏览器上可能显示的结果并不相同。页面基本信息和布局一、HEAD元素格式： 标记说明：HEAD标记是页面的第二层标记，用于包含页面的标题信息。提示： HEAD标记必须在BODY标记开始之前结束，即必须放在之前）。一、一、HEAD元素元素o标题网页标题o基本属性网页的基本属性通常利用meta（元信息），例如字符编码、作者、版权和关键字等。（1）keywords（2）description（3）refresh(4)Content-Type(5)Link,Base,Target,ID等等。Body元素及语法规则o用于定义网页的页面信息，如背景、链接等。o页面颜色背景色彩背

6、景色彩非可链接非可链接文字的色文字的色彩彩可链接文可链接文字的色彩字的色彩正被点击正被点击的可链接的可链接文字的色文字的色彩彩已经被点已经被点击过的可击过的可链接文字链接文字的色彩的色彩#代表色彩值，可以用代表色彩值，可以用6位十六进制的数值表位十六进制的数值表示，也可以用各种颜色的英文单词表示。示，也可以用各种颜色的英文单词表示。如下例所示：如下例所示：FFFFFF：白色 white000000：黑色 blackBody元素及语法规则o设置网页背景图片o设置页面左边的空白语法o设置页面上方的空白语法 #=margin amount，通常设置成默认值。，通常设置成默认值。 1、FONT标记 标

7、记的格式： 标记说明：FONT标记是专门对文本进行设置的标记，该标记共有三个参数：face指定字体的名称，可以设置一种，也可以设置多种，字体名称之间用逗号隔开。Size参数指定字体的大小（字号），数值范围在7(-7)之间。 Color参数用于指定文本的颜色。2、H标记 P29 标记的格式： 文本内容 . 文本内容标记说明：实际H标记是一系列以H开头的标记，使用H标记指定标记之间的文本的大小（共分为6级，数值越大字越小）。(专门用作标题)H标记有一个参数：align, 它用于设置文本的对齐方式，取值为center(居中对齐)、left(左对齐)、 right(右对齐)。e54、B标记、I标记、U

8、标记、 S标记 这四个标记的格式为： 文本 文本 文本 文本标记说明： B标记用于将标记之间的文本设置成粗体。I标记用于将标记之间的文本设置成斜体。U标记用于将标记之间的文本加下划线。S标记用于将标记之间的文本添加删除线。list元素及语法规则元素及语法规则 o（1）无序列表 列表内容1 列表内容2 o（2）有序列表 列表内容1列表内容2 例子oo 财经o 体育o o 足球o 篮球o 其它o o o 娱乐o 文字布局文字布局o行控制 o 回车符，表示一个段落的结束，可以单独使用，不用成对出现。标记后面的正文将另起一段落。（演示）（演示） 换行符，仅表示另起一行，不表示段落的结束，也可以单独使用

9、。 标记后面的正文将另起一行。 （演示）（演示）(2) 对齐 . 其中#=left, center, right，分别表示左对齐，居中和右对齐。 （演示）（演示）(3) 预格式化 所谓预格式化，就是保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示。例如原封不动地保留文档中的空白，如空格、制表符等。. marquee元素及语法规则元素及语法规则 o滚动字幕是网页中常用的文字特效，它通过marquee语句实现，具体的语法规则如下。o 滚动文本内容 表示滚动方向，包括表示滚动方向，包括left、right、up、down，如，

10、如direction= up 表示向上滚动表示向上滚动。 表示滚动方式，包括表示滚动方式，包括scroll、 slide、 alternate，分别为普通，分别为普通、一次性滑动和双向交替式。一次性滑动和双向交替式。 表示循环次数，默认的为无限表示循环次数，默认的为无限循环，当把循环，当把#值设置成值设置成-1时也时也表示无限循环。表示无限循环。 表示一次滚表示一次滚动的距离动的距离 表示两次滚动之表示两次滚动之间的延迟，以毫间的延迟，以毫秒为单位。秒为单位。 表示将鼠标放在字幕上时，表示将鼠标放在字幕上时，停止滚动，鼠标移开时继续停止滚动，鼠标移开时继续滚动。滚动。 普通链接普通链接 o o

11、说明：（1） href=URL 表示链接的目标文件。（2） target=Window_Name 目标文件的打开窗口，默认的是在当前窗口打开，在新窗口打开为target=_blank。 普通链接普通链接o注意 如果是内部链接，则直接使用目标文件在网站中的相对地址。如果是外部链接，则一定要写上协议名称，如链接到网易，则语法为href=http:/。 如果将链接的地址设为mailto:电子邮件地址，则可通过单击此链接自动调用计算机默认的电子邮件程序发送E-mail。 书签书签 o在网页的不同位置定位，提高了浏览效果,书签在DreamWeaver中也被称为锚点。书签在使用时，首先要定义书签，然后再设

12、置书签链接。 o（1）定义书签的语法 . 例如： 导航，意为将文本意为将文本“导航导航”处设置名为处设置名为aaa的书签。的书签。书签书签o（2）书签链接的语法 . o例如：返回导航处 意为将文本意为将文本“返回导航处返回导航处”设置成链接，链接的设置成链接，链接的目标位置为目标位置为index.htm网页中的书签网页中的书签aaa处。处。如果是在本页中进行书签链接，则如果是在本页中进行书签链接，则URL也可以也可以省略，但省略，但#千万不能丢掉。千万不能丢掉。 表格表格表格是网页中常见的元素，设计者通常都使用表格进行网页的布局定位，网页的布局定位，由此得到的网页中的各元素显得更整齐、更美观。

13、 主标题：表明了这个表格的主要内容；表栏： 是表格中用来存放数据的矩形区域；表头： 表示数据项所对应的名称， 数据： 就是存放在表栏中的文字、数字和图像 等信息。 基本表格标记基本表格标记表格的始末标记为，意为定义一个表格。其中表格的属性在起始标记中设定，具体包括如下属性。 属性属性用途用途设置表格的背景色设置表格的背景色设置边框宽度，若不设置此属性，则默认值设置边框宽度，若不设置此属性，则默认值为为0 0设置边框的颜色设置边框的颜色table bordercolorlight=设置边框明亮部分的颜色设置边框明亮部分的颜色table bordercolordark=设置边框昏暗部分的颜色设置边

14、框昏暗部分的颜色设置表格中单元格之间的距离设置表格中单元格之间的距离设置表格中单元格边框与其内部内容之间的设置表格中单元格边框与其内部内容之间的距离距离设置表格宽度，单位用绝对像素值或总宽度设置表格宽度，单位用绝对像素值或总宽度的百分比的百分比设置表格的列数设置表格的列数设置表格的行数设置表格的行数table align=left/right/center设置表格的对齐方式设置表格的对齐方式以上各个属性的设定可以结合使用，如，指将表格背景色设置成浅蓝色，不显示边框，表格宽度占满整个页面。 、标记对标记对 o标记对：用来创建表格中的每表格中的每一行一行。此标记对只能放标记对之间使用，而在此标记对

15、之间加入文本将是无用的 ；o标记对：用来创建表格中一行表格中一行中的每一个单元格中的每一个单元格，此标记对也只有放在标记对之间才是有效的，用户想要输入的文本也只有放在标记对中才能够显示出来。 oalign是水平对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)； ovalign是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐) ；o具有width、colspan、rowspan和nowrap属性。width是单元格的宽度，单位用绝对像素值或总宽度的百分比，colspan表示设置一个单元格跨占的列数(缺省值为1)，row

16、span表示设置一个单元格跨占的行数(缺省值为1)，nowrap表示禁止单元格内的内容自动断行。 、标记对标记对 标记对标记对 o标志对用来设置表头，通常是黑体居中文字。 o用于设置表格的标题，即表格上方显示的内容。 2.5.6.实例实例 图像的基本语法图像的基本语法o src： 规定插入图像的url地址及文件名； align： 指定图像的位置是靠左、靠右、居中、靠上或者是靠底。 默认情况下是靠上，align=top； class和id ： 分别指定图像所属的类型和图像的id号； name： 设定图像的标题。 alt： 设定图像的替代字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，

17、先显示有关此图像的替代字； border ： 设定图片的边框。； height和width： 分别用于指定图像的高度和宽度； hspace和vspace ： 分别用于设定图像的左右边框大小和 上下边框大小 。 图像热点图像热点 o把图像划分成多个作用区域，并链接到不同网页的标记，那就是 地图作用区域标记。 o标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点） class和id 是分别指定热点的类型和id号。 用于设定热点的替代性文字 用于设定该热点所链接的url地址 shape和coords ： 是两个主要的参数，用于设定热点的形状和大小。1、 表示设定热点的形状为矩形

18、，左上角顶点坐标为（x1,y1）， 右下角顶点坐标为（x2,y2）。 2、 表示设定热点的形状为圆形，圆心坐标为（x1,y1），半径为r。3、 表示设定热点的形状为多边形，各顶点坐标依次为（x1,y1）、 （x2,y2）、（x3,y3） .。 表单表单 o 用来创建一个表单，具有action、method和target属性 ；action的值是处理程序的程序名(包括网址或相对路径) ；method属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个；target属性用来指定目标窗口或目标帧。 o 用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在标志

19、对之间。 共提供了八种常见的输入区域，分别为text, password, checkbox, radio, image, hidden, submit, reset ；八种类型的输入区域有一个公共的属性name，此属性用于定义每一个输入区域的名称。 value属性是另一个公共属性，它可用来指定输入区域的缺省值。 表单表单 1）单行文本框和密码框）单行文本框和密码框 o单行文字框的标志如下 ： o密码框的标志如下 ： 例例2.5o在网页的html状态下输入如下语言。oo 姓名：o 密码：o 单选框和复选框单选框和复选框 o单选框的语法如下： o复选框的语法如下： 例例2.6 oo 性别：男 女

20、 o 兴趣爱好：电影    o 旅游    音乐    o 体育 o 3）隐藏域）隐藏域 o 4）图像）图像 5）按钮）按钮 o表单中的按钮通常有三种类型，分别为提交、重置和一般按钮。表单中的按钮通常有三种类型，分别为提交、重置和一般按钮。o 提交按钮表示将表单内容提交给服务器，语句为提交按钮表示将表单内容提交给服务器，语句为。 o 重置按钮表示将表单内容全部清除重置按钮表示将表单内容全部清除,重新填写，语句为重新填写，语句为。o 一般按钮可以设置特殊指令，实现特殊效果，如下语句。一般按钮可以设置特殊指令，实现特殊效果，如下

21、语句。o 列表框列表框 o标记对用来创建一个下拉列表框或可以复选的列表框。此标记对用于标记对之间。 omultiple属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成了可多选式列表。若没有设置multiple属性，显示的将是一个弹出式的列表框。 oname是此列表框的名字。 osize属性用来设置列表的高度，缺省时值为1。 标记标记 o用来指定列表框中的一个选项，它放在标志对之间。 oSelected属性：用来指定默认的被选项；ovalue属性：用来给指定的某一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的选项的value属性来获得该区域选中的数据项。 例例2.

22、7 oo o 北京大学o 清华大学o 南开大学o 天津大学o o 例例2.8 oo o o 北京大学o 清华大学o 南开大学o 天津大学o o 多行文本框多行文本框 o语法为，此标记对用于标记对之间。o具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。 例例2.9 oo 意见栏：o 您的意见对我们很重要o 多媒体多媒体 o多媒体的种类 多媒体文件多为音乐、视频、动画等，其中音乐主要属于REAL、AU、MIDI文件格式 ；WAV文件属于波形原始声音文件，体积相对较大，尽量不要使用；MP3文件属于压缩文件，不同的软件其兼容性不尽相同，使用时应该注意；MIDI属于合成音乐，体积较小，在网页中应用较为广泛；视频文件以REAL、AU文件居多。基本语法规则基本语法规则 oimg标记 1） dynsrc=“url”表示多媒体文件的路径及文件名， 支持的