网页设计制作第2章.ppt

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

1、第2章 超文本标记语言HTML,网页设计与制作教程,HTML是HyperText Markup Language（超文本标记语言）的缩写，它是一种用于网页制作的排版语言，是构成Web页面的最基本元素。,目 录,2.1.1 HTML概述2.1.2 HTML语法2.1.3 HTML文件的基本结构,2.1.1 HTML概述HTML是一种描述性语言，用HTML可以创建能在互联网上传输的信息页，即通常所称的主页或网页。HTML语言使用描述性标记符（称为标记）来指明文本的不同内容。HTML是一种语言，但并不算是“程序”语言。HTML文档包含两种信息：页面本身的文本和表示页面元素、结构、格式、及其他超文本链

2、接的HTML标记。,2.1.2 HTML语法受标记影响的内容受标记影响的内容例如，可以用字体标记的字号属性size指定文字的大小，HTML语句如下：本行字将以较小字体显示,2.1.3 HTML文件的基本结构,网页的标题文档主体，正文部分,2.1.3 HTML文件的基本结构HTML文件头2.HTML文件主体,1.HTML文件头TITLE 标记：标题名META标记：给浏览器、搜索引擎或其他应用程序提供本HTML文件的有关信息（如作者，终止日期，关键词列表等等）。,META标记的格式为：,name属性主要用于描述网页，其常用的选项有GENERATOR、Keywords、description、rob

3、ots、author等。GENERATOR用来说明制作本网页所用的编辑工具，Keywords用来告诉搜索引擎本网页的关键字是什么，description用来告诉搜索引擎本网页的主要内容，robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引，author用来标注网页的作者。,http-equiv属性相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，其常用的选项有Content-Type、Expires、Refresh等等。Content-Type用以说明网页所使用的字符集；Expires用于设定网页的到期时间；一旦网页过期，必须到服务器上

4、重新传输；Refresh用于自动刷新并指向新页面。Name属性和http-equiv属性不能在同一个标记中使用。,Content属性则根据name选项或http-equiv选项的定义来决定此项填写什么样的字符串。例如：向搜索引擎说明本网页的关键词。告诉搜索引擎本网站的主要内容。,通知浏览器本HTML文件使用了gb2312字符集，是简体中文网页。可以使当前网页在2秒后自动转到北京化工大学北方学院的主页（）去，这就是META的刷新作用，在Content中，2代表设置的时间（单位为秒），而URL就是在指定的时间后自动连接的网页地址。如果网页地址就是本页的地址，那么就是自动刷新。,使用META标记，还

5、可以在进入网页或者离开网页时实现动画效果。例如的意思是，进入本页面（http-equiv=”Page-Enter”）时，页面将按水平百叶窗（transition=9）的形式展开，整个展开过程历时3秒（duration=3）。的意思是离开本网页时，页面将按圆形收缩的形式切换成其他网页，并且整个切换时间为5秒。,2.HTML文件主体HTML文件主体标记的格式为：网页的内容,Background：设置网页的背景图像；Bgcolor：设置网页的背景色；Text：设置文本的颜色Link：设置尚未被访问过的超文本链接的颜色；Vlink：设置已被访问过的超文本链接的颜色；Alink：设置超文本链接在被访问瞬

6、间的颜色。,以命名方式定义常用的颜色，如RED、blue等。以RGB值表示，如#FF0000表示red，#0000ff表示blue。,常用16种色彩的英文名和RGB值对照,一个简单的HTML示例我是中国人，我热爱我的祖国。,例2-1,2.2.1 标题文字标记2.2.2 文字标记2.2.3 段落标记,标题文字标记的格式为：标题文字属性n用来指定标题文字的大小，可以取16的整数值，取1时文字最大，6时文字最小。在一个标题行中无法使用不同大小的字体。属性align用来设置标题在页面中的对齐方式，有left（左对齐）、center（居中）和right（右对齐）三种选择。,例2-2 用设置标题,设置标题

7、 第1级标题H1 第2级标题H2 第3级标题H3 第4级标题H4,例2-2,文字标记的格式为：被设置的文字,属性size用来设置文字的大小。数字的取值范围从17，size取1时文字最小，取7时文字最大。属性face用来设置字体。如黑体、宋体、楷体_GB2312、仿宋_Gb2312、隶书、Times New Roman等。属性color用来设置文字颜色。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，参见表2-1。,例2-3 用设置文字的大小、字体和颜色。,用FONT标记设置文字大小、字体和颜色普通文字1号字7号字宋体4号字华文彩云3号字红色蓝色隶属6号字,例2-3,表2-2 设

8、置各种字型的标记,例2-4 设置字型,设置字型普通文字 加粗字 斜体字 加下划线 大型字体小型字体 加删除线 X2+Y2=Z2,例2-4,强制换行标记强制换段标记设置段落标记水平线,强制换行标记强制换行的格式为：文字,例2-5 强制换行标记的使用,强制换行标记的使用登鹤雀楼白日依山尽黄河入海流欲穷千里目，更上一层楼。登鹤雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,例2-5,2.强制换段标记段落标记放在一段文字的末尾，就定义了一个新段落的开始。标记不但能使后面的文字换到下一行，还可以是两段之间留一空行。由于一段的结束意味着新一段的开始，所以使用也可省略结束标记。强制换段标记的格式为：文

9、字强制换段标记可以看作两个强制换行标记,设置段落标记设置段落标记的格式为：文字其中属性align用来设置段落的对齐方式，可以为left、center或right，分别表示段落左对齐、段落居中、段落右对齐。默认为left。,例2-6 段落标记的使用。,段落标记的使用登鹤雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,例2-6,4.水平线水平线标记的格式为：。,Align属性：设定线条放置的位置，可选择left、right或 center。Size属性：设定线条厚度，以像素作单位，默认为2。Width属性：设定线条长度，可以是绝对值或相对值，默认值为100%。Color属性：设定线条颜色，默

10、认为黑色。Noshade属性：设定线条为平面显示（没有三维效果），若 缺省，则有阴影或立体效果。,例2-7 水平线标记的使用,水平线标记的使用,例2-7,2.3.1 无序列表2.3.2 有序列表2.3.3 列表的嵌套,无序列表无序列表中每一个表项的前面是项目符号（如、等）。建立无序列表使用标记和表项标记。格式为：第一个列表项 第二个列表项,标记：是单标记，即一个表项的开始，就是前一个表项的结束。Type：指定每个表项左端的符号类型，可为disc（实心圆点）、circle（空心圆点）、square（方块），还可以自己设置图片，如默认为实心圆点。,例2-8 无序列表标记的使用,无序列表标记的使用

11、网络的拓扑结构 总线结构星型结构环型结构,例2-8,2.3.2 有序列表使用标记可以建立有序列表，表项的标记仍为LI，格式为：第一个表项 第二个表项,type属性可设定5种序号：数字（type=1）、大写英文字母（type=A）、小写英文字母（type=a）、大写罗马字母（type=I）、小写罗马字母（type=i），缺省的序号标记是数字。,例2-9 有序列表标记的使用。,有序列表标记的使用通过拨号网络连接Internet的步骤 安装调制解调器 创建拨号连接 设置拨号网络 设置拨号网络,例2-9,2.3.3 列表的嵌套列表嵌套可以把网页分为多个层次，例如书的目录，给人以很强的层次感。有序列表和

12、无序列表不仅可以自身嵌套，而且可以互相嵌套。,例2-10 无序列表中套无序列表。,例2-11 有序列表中套无序列表。,例2-10,例2-11,2.4.1 网页中的图片2.4.2 图片标记2.4.3 设定图片的布局,2.4.1 网页中的图片Web中图片的几种常用格式为GIF、JPEG和PNG，此外还可使用矢量格式。其中最常用的是GIF和JPEG格式，几乎所有浏览器都支持这两种格式。,2.4.2 图片标记图片标记的格式为：,2.4.3 设定图片的布局布局是图像放在网页中的位置以及图像与文本的排放关系。实现这种功能，除了利用标记的align属性外，还有、等标记。1.设置图像的对齐方式2.设置图像与文

13、本间的关系,1.设置图像的对齐方式图像可放在页面的左边（left）、中间（center）和右边（right）。使用标记的align属性可实现图像的居左、居中和居右。格式为：另外，实现图像居中还可以使用标记，格式为：,例 2-12 设置图像的对齐方式,例2-12,2.设置图像与文本间的关系（1）设置图像与文本之间的空白（2）文本与图像在垂直方向上的对齐（3）文本环绕图像,2.设置图像与文本间的关系（1）设置图像与文本之间的空白标记的hspace和vspace属性可实现该功能。,2.设置图像与文本间的关系（2）文本与图像在垂直方向上的对齐文本 文本其中align的值可取：top文本与图像的顶部对齐

14、；middle文本与图像的中央对齐；bottom文本与图像的底部对齐。,2.设置图像与文本间的关系,（3）文本环绕图像文本其中align的值可取：left 图像居左，文本在图像的右边；right 图像居右，文本在图像的左边。使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图像，可用标记，其后的文本将不再环绕图像。其格式为：,例 2-13 设置图像与文本间的关系,例2-13,2.5.1 建立简单表格2.5.2 表格的属性设置,2.5.1 建立简单表格一般格式为：标题 表头1 表头2表头n 表项11表项12表项1n 表项m1表项m2表项mn,例 2-14 一个简

15、单的表格,例2-14,2.5.2 表格的属性设置 1.表格标记属性 2.单元格的合并 3.表格的分组显示 4.表格边框和分隔线的显示控制,2.5.2 表格的属性设置 1.表格标记属性（1）标记的属性设置（2）标记的属性设置（3）标记的属性设置,2.5.2 表格的属性设置 1.表格标记属性（1）标记的属性设置,2.5.2 表格的属性设置 1.表格标记属性（2）标记的属性设置,2.5.2 表格的属性设置 1.表格标记属性（3）标记的属性设置,例 2-15 表格的属性设置,例2-15,2.5.2 表格的属性设置 2.单元格的合并 其中，i表示合并的列数，j表示合并的行数。,例 2-16 表格单元格的

16、合并,例2-16,例 2-17 表格单元格的随意合并,例2-17,2.5.2 表格的属性设置 3.表格的分组显示（1）按行分组（2）按列分组,2.5.2 表格的属性设置 3.表格的分组显示（1）按行分组 表头 表尾 表体1 表体n,例2-18 按行组制作表格。,例2-18,2.5.2 表格的属性设置 3.表格的分组显示（2）按列分组 标记可一次设定列组中的列数以及各列属性。其格式为：标记可以设定一列的属性，它可以放在中使用，也可单独用于定义列组以外列的属性，但它不能构造列组。其格式为：,例2-19 设置列组。,例2-19,2.5.2 表格的属性设置4.表格边框和分隔线的显示控制（1）边框的显示

17、可以通过在标记中设置frame属性来控制。其方法为：属性值box（显示所有4个边框）、above（只显示上边框）、below（只显示下边框）、hsides（只显示上、下边框）、vsides（只显示左、右边框）、lhs（只显示左边框）、rhs（只显示右边框）和void（不显示任何边框）。,2.5.2 表格的属性设置4.表格边框和分隔线的显示控制（2）分隔线的显示可以通过在标记中设置rules属性来控制。其方法为：属性值可以为all（显示所有分隔线）、groups（只显示组与组之间的分隔线）、rows（只显示行与行之间的分隔线）、cols（只显示列与列之间的分隔线）、none（不显示任何分隔线）。

18、,例2-20 表格边框和分隔线的显示控制,例2-20,2.6.1 超链接标记2.6.2 页面链接2.6.3 书签链接2.6.4 电子邮件链接,2.6.1 超链接标记热点属性href为超文本引用，它的值为一个URL地址，是目标资源的有效地址。可以是相对路径或者绝对路径。属性name指定当前文档内的一个字符串，作为链接时可以使用的有效的 目标资源的地址。属性target用于设定链接被按后结果所要显示的窗口。可选值为_blank（或new）、_parent、_self、_top、框架名称。,2.6.2 页面链接字符串,2.6.3 书签链接 首先在目标位置设置标记，称为书签，设置格式为：text在跳转

19、调用处定义超链接，格式为：text如果在一个网页中（如A页面）要建立指向其他页面（如B页面）中某一处的超链接，方法为：在B页面中要跳转到的目标位置设置标记，格式为：在A页面中定义超链接，格式为：text。,2.6.4 电子邮件链接热点文本,例2-21 超链接标记的使用。,例2-21,2.7.1 表单的标记2.7.2 常用的表单域,2.7.1 表单的标记HTML中与设计表单有关的常用标记有、等标记。,2.7.1 表单的标记（1）表单标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的URL地址。其基本格式为：,2.7.1 表单的标记（1）Action 属性用于设定处理表单数据程序的URL

20、地址。这样的程序通常是ASP之类的应用程序，采用电子邮件方式时，用action=”mailto：指定的电子邮件地址”。Method 属性指定数据传送到服务器的方式。有两种主要的方式，其中POST方式较为常用。当method=get 时，将输入数据加在action指定的地址后面传送到服务器；当method=post 时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。Name 属性用于设定表单的名称。Onsubmit 和 onreset 主要针对“submit”按钮和“reset”按钮来说的，分别设定在按下相应的按钮之后要执行的子程序。Targ

21、et 属性指定输入数据结果显示在哪个窗口，这需要与标记配合使用。,2.7.1 表单的标记（2）标记在表单中使用最频繁，大部分表单内容需要用到此标记。它主要用来设计表单中提供给用户的输入形式。其基本格式为：,2.7.1 表单的标记（2）name属性设定当前表项的名称，主要在处理表单时起作用。type 属性决定了表单中表项的类型。其选项较多，有text、password、checkbox、radio、submit、reset、file、hidden、image、button等。value属性用于设定输入默认值，即如果用户不输入的话，就采用此默认值。src属性是针对type=image的情况来说的，

22、设定图像文件的URL地址。checked属性表示选择框（单选钮或复选框）中，此项被默认选中。maxlength属性表示在输入单行文本的时候，最大输入字符个数。size属性用于设定单行文本区域的宽度。,2.7.2 常用的表单域,文本框和密码框单选钮和复选框列表框多行文本框按钮,2.7.2 常用的表单域,文本框和密码框（1）单行文本框的基本格式为：（2）密码框的基本格式为：在密码框中输入的表单内容将以“*”显示。,2.7.2 常用的表单域,单选钮和复选框（1）单选钮就是从一组选择项中选取一项。其基本格式为：注意同组单选钮必须具备相同的name名称。（2）复选框就是可以从一组选择项中选取多项。其基本

23、格式为：同组复选框也必须具备相同的name名称。在其中还可以加入checked属性表示默认选定值。,2.7.2 常用的表单域,3.列表框一个列表框的基本格式为：选项1 选项2 选项n,2.7.2 常用的表单域,4.多行文本框基本格式为：,2.7.2 常用的表单域,按钮按钮包括“提交”按钮（type=submit）、“重置”按钮（type=reset）和普通按钮（type=button）。“提交”按钮是将表单内容提交给服务器的按钮，“重置”按钮是将表单内容全部清除，让浏览者重新填写的按钮。按钮的基本格式为：,例2-22 表单的使用。,例2-22,2.8.1 建立框架2.8.2 框架的属性设置2.

24、8.3 框架间的链接,2.8.1 建立框架一个框架的基本结构为：1.标记 2.标记 3.标记,2.8.1 建立框架 1.标记基本格式为：,2.8.1 建立框架 2.标记标记是一个单标记，其格式为：,2.8.1 建立框架 3.标记。例如：很抱歉，您使用的浏览器不支持框架功能，请转用新的浏览器。,例2-23 框架的嵌套。,例2-23,2.8.2 框架的属性设置1.设定框架的有无和颜色2固定边框3页面空白区域的设置4滚动条的设置,2.8.2 框架的属性设置1.设定框架的有无和颜色（1）frameborder属性可以设定有无边框。格式为：或（2）bordercolor属性可以给边框着色。格式为：或,2

25、.8.2 框架的属性设置2固定边框 在缺省情况下，浏览者可用鼠标拖动边框改变页面的大小。使用标记的noresize属性可以固定边框的位置。其格式为：Noresize属性没有属性值，加入noresize属性则固定边框。,2.8.2 框架的属性设置3页面空白区域的设置的marginhigh和marginwidth属性可以设置框架内容与框架的边框之间的空白，其中marginhight属性设置框架内容与上下边框间保留的空间，marginwidth属性设置框架内容与左右边框间保留的空间。标记中的framespacing属性可以用来设置各个框架窗口之间的空白。,2.8.2 框架的属性设置4滚动条的设置在标

26、记中的属性scrolling用来设置滚动条，它可以取“yes”、“no”和“auto”3种值，分别表示始终有滚动条、始终没有滚动条和自动启动滚动条，默认值是自动启动滚动条。,例2-24 框架嵌套修改后的页面。,例2-24,2.8.3 框架间的链接在很多网页中，常在一个框架内显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应的内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示目标文件的框架。使用标记的target属性就是可以控制目标文件在哪个框架内显示。当单击热点文本时，目标文件就会出现在由target指定的框架内。,例2-25 框架间的链接。,图2-25 框架间的链接,例2-25,例2-25 框架间的链接。,图2-26 单击热点“李白”后的显示效果,例2-25,例2-25 框架间的链接。,图2-27 单击热点“送孟浩然之广陵”后的显示效果,例2-25,谢 谢 同 学 们,