网页设计PPT课件-第1章.ppt

《网页设计PPT课件-第1章.ppt》由会员分享，可在线阅读，更多相关《网页设计PPT课件-第1章.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.1.1 HTML的功能,1.1 HT

3、ML概述,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文档说明,到称为头部“简单网页示例”定义页面标题；“”之间的内容构成注释部分。注释可以有多行，注释的内容不会在浏览器上显示。到是内容部分“进入”是定义一段文字“进入”；“”是设置一条水平线；“Web世界!”是以“h1”字号(最大号)定义一个标题“Web世界!”。,1

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

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

7、、表格、水平线、层等标签。和必须成对使用。,文档主体(正文),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.htm文档后，将文档内容修改为如右图所示。,（2）保存。利用“另存为”命令文件将保存为：“Cha1-2.htm”。显示效果：,1.2.3 颜色值,HTML文档中的颜色是

9、由三原色“red”、“green”和“blue”组合而成的RGB格式数字，每个原色都有256个色度，即可取值0255，具体是用十六进制数来代表，所以只需要2位即可表示。由于每个原色有256种，故三种原色一共可组合成1677721种颜色。颜色值表示：“#RRGGBB”格式 其中的每个字母代表一个十六进制数，RR、GG、BB分别设置红、绿、蓝三色的彩度。例.bgcolor=“#00ff00”，表示将背景颜色设置为绿色。,“RGB(r,g,b)”格式 其中的r、g、b是个0255之间的整数。例.bgcolor=“RGB(0,255,0)”，表示将背景色设为绿色。“RGB(r%,g%,b%)”格式 其

10、中的r、g、b是个0100之间的实数，也就是将格式中的0255数字转换为百分比表示。例.bgcolor=“RGB(100%,0%,0%)”，表示将背景颜色设置为红色。,对于一些常用的基本颜色，还有相应的英文词对应，以方便使用，如cha1-2.htm文档中的用法：bgcolor=“yellow”。,1.2.4 设置页面的背景图案,利用标签中的background属性可将网页的背景设置为一个图片。,【例1-3】创建一个简单网页，将其背景设置为一个图片。,（1）编写文档 打开Cha1-2.htm文档，做如下修改：修改为：“现在网页的背景是黄色”修改为：“现在网页的背景是图片”注意：“BaiYun.j

11、pg”是个图象文件，要放在Cha1-3.htm文档一起。如果图象文件在其它文件夹中，如在D盘根目录下，则该句应改为：（2）保存文档。文档另存为Cha1-3.htm。显示结果：,1.2.5 习题,1.回答下列问题：控制整个页面显示方式的属性应该放在哪里？设置文字颜色的属性名怎样拼写？设置背景颜色的属性名怎样拼写？怎样设置页面的背景图案？2.写出颜色的三种表示方法。3.重新制作中习题4的网页，使背景颜色变为黄色。4.到计算机中搜索一幅图片，将该图片作为背景图案加入到中习题4的网页中。,1.3 文本段落控制,1.3.1 标题标签、分段标签和换行标签,文本是网页的基本内容，标题标签、分段标签和换行标签

12、是控制文本格式的标签。1.标题标签 文本按内容分为不同层次，标题是不同层次的文本内容的概述。标题由双标签、控制，格式如下：标题内容 其中的n是标题的级别，分为6级：h1、h2、h3、h4、h5和h6。每一级在浏览器中的显示样式都不同,n越小,级别越高,即字号越大。,标签有个“align”属性，取值有left、center、right，它们控制标题的三种对齐方式：左、中、右，默认是靠左。,1.3.1 标题标签、分段标签和换行标签,使用标题 这是一级标题 这是二级标题 这是 三级标题 这是 四级标题 这是五级标题 这是六级标题 这里不是标题,【例1-4】创建一网页，在其中设置6个级别的文本标题。文

13、档的代码：,2.分段标签和换行标签 HTML中使用双标签、对文本进行分段，尾标签可以省略。标签也有“align”属性，取值和意义与标题标签相同。、之间可以包含文本等内容，也可以包含后面章节介绍的内联标签，如、等标签，但不可以包含标题标签。,浏览器显示一个标签分段时，前后自动换行，并空出一行。内容默认左对齐，首行不退格。每对分段标签之间的文本中原有的换行及其多于一个的空格将被忽略。用标签控制文本段落时，两个段落之间会空出一行。如果不希望中间有空行，则可使用换行标签，这是个很简单的单标签，其作用就是回车换行。,【例1-5】使用分段标签和换行标签显示文本。,分段标签、换行标签示例 1.3.1 标题、

14、分段和换行标签,分段标签之间可以包含文本等内容，也可以包含后面 章节介绍的内联标签，但不可以包含标题标签。浏览器显示一个分段时，前后自动换行，并空出一行。每对分段标签之间的 文本中原有的换行 及其多于一个的空格将 被忽略，内容 默认 左对齐。首行不退格。,1.3.2 居中对齐标签和原样显示标签,居中对齐标签是双标签，用于控制段落居中对齐。原样显示标签也是双标签，在中的文本将呈原样显示，包括空格、换行等。,【例1-6】居中对齐标签和原样显示标签示例。,居中对齐标签和原样显示标签示例 现在是标题，居中对齐 现在是段落，居中对齐 现在文本呈原样显示（现字前有4个空格）比上一行再多空4格（2个中文字）

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

16、在是div的显示样式。div标签控制的内容结束时不空行。现在是div的显示样式。p标签不能嵌套，而div标签能嵌套。本段正是嵌套在 内层的div标签控制的内容。现在外层结束。,2.短行标签 短行标签是双标签，与标签、标签类似，也是使控制的内容连续地显示，忽略文本中的换行符及过多的空格。但是，p标签和div标签都控制着整个行，控制的区域形成一个矩形块，而span标签仅仅控制行中的一部分，所以叫做短行标签。span标签也能够嵌套，它往往嵌入p、div等标签中，控制行中一部分的内容。,【例1-8】短行标签示例。,p标签、div标签、span标签都使控制的内容连续地显示，忽略文本中的换行符及过多的空格

17、。但是，p标签和div标签都控制着整个行，控制的区域形成一个矩形块。而span标签仅仅控制行中的一部分，所以叫做短行标签。span标签也能够嵌套，它往往嵌入p、div等标签中，控制行中一部分的内容。,1.3.4 习题,1.回答下列问题：本节的七个标签的名称怎样拼写？哪些是单标签？段标签的文本中，换行及其多于一个的空格起作用吗？如果希望多段文本都居中对齐，用什么方法最简便？原样显示标签中的换行及多个空格起作用吗？2.利用、设计如右上图所示的页面。3.利用、设计如右图所示网页。4.利用居中标签中嵌套原样显示标签设计如下图所示网页，要求所有文字都始终相对居中，例如窗口变宽时的效果如下面右图所示。,1

18、.4 文字格式控制,1.4.1 文字格式控制标签,网页中的文字可以通过文字格式控制标签(双标签)控制格式，它有以下三个属性：face 设置文字的字体。face的取值有多种。如宋体(默认值)、黑体、隶书、楷体_gb2312、Times New Roman、Arial等；size 设置文字的字号。size的取值为17，默认值为3，数字越大文字就越大。还可用+、-来设定字号的相对值(相对于默认值3的值)；color 设置文字的颜色。color的取值就是1.2 节所介绍的颜色取值方法。【例1-9】文字格式控制示例。,文字格式控制 默认格式的文字 黑体 3号字 红色 隶书 6号字 绿色 Arial 黄色

19、 6号字 Times New Roman 1号字,1.4.2 HTML的专用字符,有些字符在HTML语言中有特殊意义，例如“”，称为专用字符。在网页文本中显示专用字符时，必须使用对应的特殊编码或对应的字符代码(称为预定义实体或转义码)，否则有可能会出现不正确的显示结果。HTML的预定义实体由字符）三部分组成，分号可省略。部分特殊字符,1.4.3 文字样式标签,HTML中还有一套专门控制文字样式的标签，利用这些标签可以得到特别风格的文字。文字样式标签,【例1-10】文字样式控制示例。,粗体显示小于号< 斜体 上标26 下标34 多种效果：粗斜体且带下划线,1.4.4 水平线标签,水平线标签是

20、个单标签，它用于分割页面。有下列属性用于控制样式：width:设定水平线宽度。可以取绝对长度值(像素)或相对长度值，默认值为打开页面窗口长度的100%；size：设定线条的粗细(以像素作单位，默认值为 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文档，实现如下图所示页面。,