第章ppt.ppt

《第章ppt.ppt》由会员分享，可在线阅读，更多相关《第章ppt.ppt（29页珍藏版）》请在三一文库上搜索。

1、网页设计,目 录,第1章 HTML基础 第2章 列表、图像及超链接 第3章 表格、表单及框架 第4章 CSS 第5章 网页制作技术进阶,课件下载,第1章 HTML基础,1.1 HTML 概述 1.2 页面颜色控制 1.3 文本段落控制 1.4 文字格式控制,如今，公司、企业和个人都在建设自己的Web站点，编写自己的Web网页，HTML正是创建网页的基础语言。 HTML是英文Hyper Text Markup Language的缩写，意为超文 本标记语言，是一种用来编写超文本文档的简单标记语言。用HTML编写超 文本文档称为HTML文档，它用于描述网页内容的排版、显示方式，最后要 通过WWW浏览

2、器显示出来，就是我们看到的网页。所谓超文本是指文档中 还可以有图片、声音、动画、影视等内容。 HTML带来了超链接的技术，即浏览网页时通过单击鼠标可以从一个主 题跳转到另一个主题，从一个页面跳转到另一个页面，从而可以与世界各地 主机文件链接，直接获取相关主题。,HTML的具体功能： 1格式化文本。如设置文本的对齐方式、字体、颜色等。 2建立超链接。鼠标点击获得指定的目标；设置超链接样式等。 3建立列表。以列表方式显示信息，方便阅读。 4插入图形。如设置图像的样式（如大小、边框、布局等）。 5建立表格。 6加入表单、控键等。这是客户与网页交互的主要渠道。 7加入多媒体。如声音、视频、动画。,1.

3、1.1 HTML的功能,1.1 HTML概述,1.1.2 创建一个简单的HTML页面,创建HTML文档可以使用熟悉的文本编辑器(如记事本或写字板)，浏览HTML页面需要使用Web浏览器，如IE (Internet Explorer)、Firefox等。,【例1-1】创建一个简单网页，网页文件名为Cha1-1.htm。 (1) 用记事本编辑HTML文档 单击“开始”“所有程序” “附件”“记事本”， 在其中输入HTML文档内容， 如右图所示。, 保存HTML页面文件：在记事本菜单栏中单击“文件”“保存”，在弹出的“另存为”对话框中选择存放的文件夹“第1章”，文件名栏中输入“Cha1-1.htm”

4、，选择保存类型为“所有文件”，如下图所示。, 最后单击【保存】，则一个文件名为“Cha1-1.htm”的HTML网页文件创建完毕。下图所示就是保存在第1章文件夹下的HTML网页文件“Cha1-1.htm”。 HTML文件的后缀名为.htm或.html。,(2) 浏览HTML页面 找到“Cha3-1.htm”文件，双击它，或右键单击后再单击“打开”，显示结果如图所示。, Cha1-1.htm文档说明,到称为头部 “简单网页示例”定义页面标题； “”之间的内容构成注释部分。注释可以有多行，注释的内容不会在浏览器上显示。 到是内容部分 “ 进入”是定义一段文字“进入”； “”是设置一条水平线； “

5、Web世界! ”是以“h1”字号(最大号)定义一个标题“Web世界!”。,1.1.3 HTML文档中的标签,HTML文档是纯文本文件，由如 、 这样一些标签组成。标签用来标记文档中的元素，以设置文档的布局、文字的格式、图象的位置等等。 标签结构： 说明： 标签中的标签名字不可少，但属性可选, 如就是没包含属性。 标签中的字母不区分大小写，如可写成。 “”与标签名字之间不能有空格，标签名字中也不能加入空格(尾标签中也，同样)。,标签有双标签和单标签之分。 双标签是由和组成的成对标签。 如 和 是一对双标签。单标签就是只有始标签而没有尾标签的，控制的内容跟随其后。 如就是个单标签。,1.1.4 H

6、TML文档的基本结构,1. HTML文档的基本结构,2. HTML文档的头部 HTML文档的头部在、双标签中，但头标签对、 可以省略。 头部用于放置网页标题、网页基地址、元信息、关联链接等信息，这些信息在网页中是不显示的。 一个HTML文档可以没有头部。, 头部信息 ,在头部中可以放置下列标签： 、 设置HTML网页的基地址，基地址定义其后所有链接的相对地址起点。 说明一些与网页有关的信息，如网页语言的编码方式。 设置网页语言的编码方式时使用 标签中charset属性，纯英文网页可以不设编码，简体中文网页使用 charset=gb2312，繁体中文使用charset=big5。如简体中文可如下

7、设置： ,3. HTML文档的主体 主体中放置要在网页中显示的内容，如文本、图像、表单、超链接等等。 主体中可以包含标题、段落、表格、水平线、层等标签。 和必须成对使用。, 文档主体(正文) ,1.1.5 习题,1. HTML文档的基本结构由哪几部分组成？ 2. 使用记事本创建网页有哪几个主要步骤？ 3. 按照例1-1的步骤，将该例在计算机上做一遍。 4. 编写一个HTML文档，显示结果如右图。,1.2 页面颜色控制,1.2.1 标签的属性,每个标签都有自己的一些属性，它们用于进一步设置该标签相关的显示方式，其格式如下： 双标签中，属性只能放在始标签中。 属性是可选的，可以按任何顺序设置。如未

8、设置某个属性，就使其默认值。 标签名、属性名、等号、属性值之间允许有空格和换行符，很多属性值的双引号也可以省略，但建议不要省略，更规范一些。,主体标签有多个属性，它们是控制整个页面显示方式的。控制颜色的属性如右（表1-1）。,1.2.2 设置页面的背景色和前景色,默认情况下，网页的背景色为白色，前景色为黑色。 利用 标签中的 bgclcor 属性和 text 属性可分别设置网页的背景颜色和文字颜色。 【例1-2】 创建一个简单网页，设置其背景色为黄色，文字为红色。网页文件名为Cha2-1.htm。 步骤：（1）利用修改 Cha1-1.htm建立文档， 以减少编辑工作量。 在打开Cha1-1.h

9、tm文档 后，将文档内容修改为 如右图所示。,（2）保存。利用“另存为”命令文件将保存为：“Cha1-2.htm”。 显示效果：,1.2.3 颜色值,HTML文档中的颜色是由三原色“red”、“green”和“blue”组合而成的RGB格式数字，每个原色都有256个色度，即可取值0255，具体是用十六进制数来代表，所以只需要2位即可表示。由于每个原色有256种，故三种原色一共可组合成1677721种颜色。 颜色值表示： “#RRGGBB”格式 其中的每个字母代表一个十六进制数，RR、GG、BB分别 设置红、绿、蓝三色的彩度。 例. bgcolor=“#00ff00”，表示将背景颜色设置为绿色。

10、, “RGB(r,g,b)”格式 其中的r、g、b是个0255之间的整数。 例. bgcolor=“RGB(0,255,0)”，表示将背景色设为绿色。 “RGB(r%,g%,b%)”格式 其中的r、g、b是个0100之间的实数，也就是将 格式中的0255数字转换为百分比表示。 例. bgcolor=“RGB(100%,0%,0%)”，表示将背景颜色设置为红色 。,对于一些常用的基本颜色，还有相应的英文词对应，以方便使用，如cha1-2.htm文档中的用法：bgcolor=“yellow”。,1.2.4 设置页面的背景图案,利用标签中的background属性可将网页的背景设置为一个图片。,【例

11、1-3】创建一个简单网页，将其背景设置为一个图片。,（1）编写文档 打开Cha1-2.htm文档，做如下修改： 修改为： “现在网页的背景是黄色”修改为：“现在网页的背景是图片” 注意：“BaiYun.jpg”是个图象文件，要放在Cha1-3.htm文档一起。如果图象文件在其它文件夹中，如在D盘根目录下，则该句应改为： （2）保存文档。文档另存为Cha1-3.htm。 显示结果：,1.2.5 习题,1. 回答下列问题： 控制整个页面显示方式的属性应该放在哪里？ 设置文字颜色的属性名怎样拼写？ 设置背景颜色的属性名怎样拼写？ 怎样设置页面的背景图案？ 2. 写出颜色的三种表示方法。 3. 重新制

12、作1.1.5中习题4的网页，使背景颜色变为黄色。 4.到计算机中搜索一幅图片，将该图片作为背景图案加入到1.1.5中习题4的网页中。,1.3 文本段落控制,1.3.1 标题标签 、分段标签和换行标签,文本是网页的基本内容，标题标签、分段标签和换行标签是控制文本格式的标签。 1. 标题标签 文本按内容分为不同层次，标题是不同层次的文本内容的概述。 标题由双标签、控制，格式如下： 标题内容 其中的n是标题的级别，分为6级：h1、h2、h3、h4、h5和h6。每一级在浏览器中的显示样式都不同, n越小, 级别越高,即字号越大。,标签有个“align”属性，取值有left、center、right，它

13、们控制标题的三种对齐方式：左、中、右，默认是靠左。,1.3.1 标题标签 、分段标签和换行标签,使用标题 这是一级标题 这是二级标题 这是 三级标题 这是 四级标题 这是五级标题 这是六级标题 这里不是标题 ,【例1-4】创建一网页，在其中设置6个级别的文本标题。 文档的代码：,2. 分段标签和换行标签 HTML中使用双标签、对文本进行分段，尾标签可以省略。 标签也有“align”属性，取值和意义与标题标签相同。 、之间可以包含文本等内容，也可以包含后面章节介绍的内联标签，如、等标签，但不可以包含标题标签。,浏览器显示一个标签分段时，前后自动换行，并空出一行。内容默认左对齐，首行不退格。每对分

14、段标签之间的文本中原有的换行及其多于一个的空格将被忽略。 用标签控制文本段落时，两个段落之间会空出一行。如果不希望中间有空行，则可使用换行标签，这是个很简单的单标签，其作用就是回车换行。,【例1-5】 使用分段标签和换行标签显示文本。, 分段标签、换行标签示例 1.3.1 标题、分段和换行标签 , 分段标签之间可以包含文本等内容，也可以包含后面 章节介绍的内联标签，但不可以包含标题标签。 浏览器显示一个分段时，前后自动换行，并空出一行。 每对分段标签之间的 文本中原有的换行 及其多于一个的空格将 被忽略，内容 默认 左对齐。 首行不退格。 ,1.3.2 居中对齐标签和原样显示标签,居中对齐标签

15、是双标签，用于控制段落居中对齐。 原样显示标签也是双标签，在中的文本将呈原样显示，包括空格、换行等。,【例1-6】居中对齐标签和原样显示标签示例。, 居中对齐标签和原样显示标签示例 现在是标题，居中对齐 现在是段落，居中对齐 现在文本呈原样显示（现字前有4个空格） 比上一行再多空4格（2个中文字） 前面有12个空格 h3级标题，h前有2个空格 ,1.3.3 层标签和短行标签,1. 层标签 层标签是双标签，作用和段标签类似，使控制的内容连续地显示，忽略文本中的换行符及过多的空格。但p标签使控制的内容与前后其它元素间自动保持一个空行，而div标签控制的内容结束时不空行。 另外，div标签可以嵌套，

16、可以与自己嵌套，也可以嵌入p标签中，而p标签是无法嵌套的。 【例1-7】层标签示例。, p标签使控制的内容连续地显示，忽略文本中的换行符及过多的空格。现在是p的 显示样式。 p标签使控制的内容与前后其它元素间自动保持一个空行。现在是p的显示样式。 div标签使控制的内容连续地显示，忽略文本中的换行符及过多的空格。现在是div 的显示样式。 div标签控制的内容结束时不空行。现在是div的显示样式。 p标签不能嵌套，而div标签能嵌套。本段正是嵌套在 内层的div标签控制的内容。 现在外层结束。 ,2. 短行标签 短行标签是双标签，与标签、标签类似，也是使控制的内容连续地显示，忽略文本中的换行符

17、及过多的空格。但是，p标签和div标签都控制着整个行，控制的区域形成一个矩形块，而span标签仅仅控制行中的一部分，所以叫做短行标签。span标签也能够嵌套，它往往嵌入p、div等标签中，控制行中一部分的内容 。,【例1-8】 短行标 签示例。, p标签、div标签、span标签都使控制的内容连续地显示， 忽略文本中的换行符及过多的空格。 但是，p标签和div标签都控制着整个行，控制的区域形成一个矩形块。而span标签仅仅控制行中的一部分， 所以叫做短行标签。 span标签也能够嵌套，它往往嵌入p、div等标签中，控制行中一部分的内容。 ,1.3.4 习题,1. 回答下列问题： 本节的七个标签

18、的名称怎样拼写？哪些是单标签？ 段标签的文本中，换行及其多于一个的空格起作用吗？ 如果希望多段文本都居中对齐，用什么方法最简便？ 原样显示标签中的换行及多个空格起作用吗？ 2. 利用 、 设计如右上图所示的页面。 3. 利用、设计如右图所示网页。 4. 利用居中标签中嵌套原样显示标签设计如下图所示网页，要求所有文字都始终相对居中，例如窗口变宽时的效果如下面右图所示。,1.4 文字格式控制,1.4.1 文字格式控制标签,网页中的文字可以通过文字格式控制标签 (双标签)控制格式，它有以下三个属性： face 设置文字的字体。 face的取值有多种。如宋体(默认值)、黑体、隶书、 楷体_gb2312

19、、Times New Roman、Arial等； size 设置文字的字号。 size的取值为17，默认值为3，数字越大文字就越大。 还可用+、-来设定字号的相对值(相对于默认值3的值)； color 设置文字的颜色。 color的取值就是1.2 节所介绍的颜色取值方法。 【例1-9】文字格式控制示例。, 文字格式控制 默认格式的文字 黑体 3号字 红色 隶书 6号字 绿色 Arial 黄色 6号字 Times New Roman 1号字 ,1.4.2 HTML的专用字符,有些字符在HTML语言中有特殊意义，例如“”，称为专用字符。 在网页文本中显示专用字符时，必须使用对应的特殊编码或对应的字

20、符代码(称为预定义实体或转义码)，否则有可能会出现不正确的显示结果。 HTML的预定义实体由字符）三部分组成，分号可省略。 部分特殊字符,1.4.3 文字样式标签,HTML中还有一套专门控制文字样式的标签，利用这些标签可以得到特别风格的文字。 文字样式标签,【例1-10】文字样式控制示例。, 粗体显示小于号< 斜体 上标26 下标34 多种效果： 粗斜体且带下划线 ,1.4.4 水平线标签,水平线标签是个单标签，它用于分割页面。 有下列属性用于控制样式： width: 设定水平线宽度。 可以取绝对长度值(像素)或相对长度值，默认值为打开页面窗口长度的100%； size：设定线条的粗细(以

21、像素作单位，默认值为 2)； align：对齐方式。 取值有：left(靠左)、center(居中,默认值)、right(靠右)； color：设定线条的颜色(默认黑色)。 【例1-11】使用水平线标签示例。, 下面线段属性：宽100，粗6，居中，绿色 下面线段属性：宽50%，粗4，靠左，红色 下面线段属性使用默认值 ,1.4.5 习题,1. 关于下面代码片断的说法中，( )是正确的: a. size是指水平线的长度 b. size是指水平线的宽度 c. width是指水平线的宽度 d. width 是指水平线的高度 2. 关于下面代码片断的说法中，( )是正确的: a. 水平线的长度为200 b. 水平线的宽度为200 c. 这是一条水平方向的线 d. 这是一条垂直方向的线 3. 编写一个HTML文档，页面如右图所示。 4. 尝试使用文字控制相关标签编写一个HTML文档，实现如下图所示页面。,