网页设计教学PPT剖析

《网页设计教学PPT剖析》由会员分享，可在线阅读，更多相关《网页设计教学PPT剖析（64页珍藏版）》请在金锄头文库上搜索。

1、第二章网页设计语言HTML oHTML基础知识 o页面基本信息和布局 o文本修饰 o超文本链接 o表格 o图像 o表单 o多媒体 什么是HTML？ HTML是Hyper Text Markup Language的英文缩写，翻译为“超文 本标识语言”。它是一种用来制作超文 本文档的简单标记语言，是WWW上描 述网页内容和外观的标准。 HTML是一种标识语言，由一些编码和 标注组成，对网页的行为作出说明，允 许Web浏览器解释它们，以便于理解 。 HTML如何表示呢？ o otable示例 o o o o第一列 o第二列 o o o o 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、元素内容 。 例子 o o欢迎进入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用于定义网

6、页的页面信息，如背景、链接等。 o页面颜色 背景色彩 非可链接 文字的色 彩 可链接文 字的色彩 正被点击 的可链接 文字的色 彩 已经被点 击过的可 链接文字 的色彩 #代表色彩值，可以用6位十六进制的数值表 示，也可以用各种颜色的英文单词表示。 如下例所示： FFFFFF：白色 white 000000：黑色 black Body元素及语法规则 o设置网页背景图片 o设置页面左边的空白语法 o设置页面上方的空白语法 #=margin amount，通常设置成默认值。 1、FONT标记 标记的格式： 标记说明：FONT标记是专门对文本进行设置的标 记，该标记共有三个参数：face指定字体的名

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

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

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

10、ternate，分别为普通 、一次性滑动和双向交替式。 表示循环次数，默认的为无限循 环，当把#值设置成-1时也表 示无限循环。 表示一次滚 动的距离 表示两次滚动之 间的延迟，以毫 秒为单位。 表示将鼠标放在字幕上时， 停止滚动，鼠标移开时继续 滚动。 普通链接 o o说明： （1） href=URL 表示链接的目标文件。 （2） target=Window_Name 目标文 件的打开窗口，默认的是在当前窗口打开， 在新窗口打开为target=_blank。 普通链接 o注意 如果是内部链接，则直接使用目标文件在 网站中的相对地址。如果是外部链接，则一 定要写上协议名称，如链接到网易，则语法

11、 为href=。 如果将链接的地址设为mailto:电子邮件地 址，则可通过单击此链接自动调用计算机默 认的电子邮件程序发送E-mail。 书签 o在网页的不同位置定位，提高了浏览效果, 书签在DreamWeaver中也被称为锚点。 书签在使用时，首先要定义书签，然后再设 置书签链接。 o（1）定义书签的语法 . 例如： 导航， 意为将文本“导航”处设置名为aaa的书签。 书签 o（2）书签链接的语法 . o例如： 返回导航处 意为将文本“返回导航处”设置成链接，链接的 目标位置为index.htm网页中的书签aaa处。 如果是在本页中进行书签链接，则URL也可以 省略，但#千万不能丢掉。 表

12、格 表格是网页中常见的元素，设计者通常都使用表格 进行网页的布局定位，由此得到的网页中的各元素 显得更整齐、更美观。 主标题：表明了这个表格的主要内容； 表栏： 是表格中用来存放数据的矩形区域； 表头： 表示数据项所对应的名称， 数据： 就是存放在表栏中的文字、数字和图像 等信息。 基本表格标记 表格的始末标记为，意为定义一个 表格。其中表格的属性在起始标记中设定，具体包括 如下属性。 属性用途 设设置表格的背景色 设设置边边框宽宽度，若不设设置此属性，则则默认值认值 为为0 设设置边边框的颜颜色 设设置边边框明亮部分的颜颜色 设设置边边框昏暗部分的颜颜色 设设置表格中单单元格之间间的距离 设

13、设置表格中单单元格边边框与其内部内容之间间的 距离 设设置表格宽宽度，单单位用绝对绝对 像素值值或总宽总宽 度 的百分比 设设置表格的列数 设设置表格的行数 设设置表格的对齐对齐 方式 以上各个属性的设定可以结合使用，如 ， 指将表格背景色设置成浅蓝色， 不显示边框， 表格宽度占满整个页面。 、标记对 o标记对：用来创建表格中的每 一行。此标记对只能放 标记对之间使用，而在此标记对之间加入文 本将是无用的 ； o标记对：用来创建表格中一行 中的每一个单元格，此标记对也只有放在 标记对之间才是有效的，用户 想要输入的文本也只有放在标 记对中才能够显示出来。 oalign是水平对齐方式，取值为le

14、ft(左对齐)、 center(居中)、right(右对齐)； ovalign是垂直对齐方式，取值为top(靠顶端对齐) 、middle(居中间对齐)或bottom(靠底部对齐) ； o具有width、colspan、rowspan和 nowrap属性。width是单元格的宽度，单位用绝 对像素值或总宽度的百分比，colspan表示设置一 个单元格跨占的列数(缺省值为1)，rowspan表示 设置一个单元格跨占的行数(缺省值为1)， nowrap表示禁止单元格内的内容自动断行。 、标记对 标记对 o标志对用来设置表头，通常是 黑体居中文字。 o用于设置表格的标题，即表格上方显示的内 容。 2.

15、5.6.实例 图像的基本语法 o src： 规定插入图像的url地址及文件名； align： 指定图像的位置是靠左、靠右、居中、靠上或者是靠底。 默认情况下是靠上，align=top； class和id ： 分别指定图像所属的类型和图像的id号； name： 设定图像的标题。 alt： 设定图像的替代字，主要用于在浏览器还没有装入图像 （或关闭图像显示）的时候，先显示有关此图像的替代字； border ： 设定图片的边框。； height和width： 分别用于指定图像的高度和宽度； hspace和vspace ： 分别用于设定图像的左右边框大小和 上下边框大小 。 图像热点 o把图像划分成多个作用区域，并链接到不同 网页的标记，那就是 地图作用区 域标记。 o标记主要用于图像地图，通过该标记可以在 图像地图中设定作用区域（又称为热点） class和id 是分别指定 热点的类型和id号。 用于设定热点的替代 性文字 用于设定该热点所 链接的url地址 shape和coords ： 是两个主要的参数，用于设定热点的形状和大小。 1、