Download presentation
Presentation is loading. Please wait.
1
ASP动态网页设计实用教程 主讲教师： 开课单位:
2
第3章 Web页面制作基础 主要内容 学习目标 新课讲授 本章小结 本章习题 返回
3
本章主要内容 本章主要介绍了HTML的基本结构；介绍了文本格式标记、列表标记、超链接标记、加入音频、视频和图像的标记、表格标记、表单标记、CSS样式表、框架标记等HTML标记的语法及应用。 目录页
4
本章学习目标 识记HTML的基本结构，掌握用HTML编写简单网页的方法。 识记常用的文本格式标记，掌握其应用。
识记常用的列表标记，掌握其应用。 识记超链接标记，掌握其应用。 识记加入音频、视频和图像的标记，掌握其应用。 识记表格标记，掌握其应用。 识记表单标记，掌握其应用。 识记CSS样式表的定义，掌握CSS样式表的应用。 识记框架的结构标记，掌握框架的应用。 识记其他HTML标记,如：滚动字幕、地址标记、分区标记、块引用标记及特殊字符的写法等。 目录页
5
第3章 Web页面制作基础 3．1 Web的基本结构标记 3．2 文本格式标记结构标记 3．3 列表标记 3．4 超链接标记
3．2 文本格式标记结构标记 3．3 列表标记 3．4 超链接标记 3．5 加入音频、视频和图像 3．6 表格标记 3．7 表单标记 3．8 CSS基础 3．9 框架标记 3．10 其他标记 3．11 小结 目录页
6
第3章 Web页面制作基础 3．1 Web的基本结构标记 3．1．1 HTML文档的开始和结束标记
<html>……</html> HTML文件总是以<html>标记开头，它告诉浏览器正在处理的是HTML。HTML文件中最后一行总是以</html>标记结束。 3．1．2 头部标记 <head>…</head>中包含html的一些常规信息，一般并不显示在浏览器上。它可以包含一些标示元素如：title、base等。其中，title最常用。
7
3．1．3 标题标记 <title>… </title>之间的内容作为网页的标题，其字符长度不超过64个字符。
3．1．3 标题标记 <title>… </title>之间的内容作为网页的标题，其字符长度不超过64个字符。 每个HTML文档都应该有一个标题，它不是正文的一部分，只是显示在浏览器窗口中标题栏的一段信息，这便于浏览者初步了解文档的内容。语法为： <title>标题的文本</title>
8
3．1．4 主体标记 HTML文档的正文部分，一般包括在body元素的开始与结束标记中。 语法：
3．1．4 主体标记 HTML文档的正文部分，一般包括在body元素的开始与结束标记中。 语法： <body>……</body> 在<body>和</body>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。 <body>标签有自己的属性，设置 <body>标签内的属性，可控制整个页面的显示方式，
9
3．1．4 主体标记 <body>标签的属性: 属性描述link设定页面默认的连接颜色 alink设定鼠标正在单击时的连接颜色
3．1．4 主体标记 <body>标签的属性: 属性描述link设定页面默认的连接颜色 alink设定鼠标正在单击时的连接颜色 vlink设定访问后连接文字的颜色 background设定页面背景图像 bgcolor设定页面背景颜色 leftmargin设定页面的左边距 topmargin设定页面的上边距 bgproperties设定页面背景图像为固定，不随页面的滚动而滚动 text设定页面文字的颜色
10
3．1．5 页面背景属性 1．设置背景颜色 <body bgcolor=颜色值>网页内容</body>
3．1．5 页面背景属性 1．设置背景颜色 <body bgcolor=颜色值>网页内容</body> ⑴ RGB格式的数字 颜色是由"red"、"green"、"blue"三原色组合而成的，在 HTML 中对颜色的定义使用十六进制，对于三原色HTML分别给予两个十六进位去定义。 如：白色的组成是red=ff, green=ff, blue=ff, RGB 值即为ffffff 红色的组成是red=ff, green=00, blue=00, RGB 值即为ff0000 绿色的组成是red=00, green=ff, blue=00, RGB 值即为00ff00 蓝色的组成是red=00, green=00, blue=ff, RGB 值即为0000ff 黑色的组成是red=00, green=00, blue=00, RGB 值即为000000 应用时常在每个RGB值之前加上“#“符号，如：<body bgcolor="#ffff00">
11
3．1．5 页面背景属性 ⑵ 关键字 用英文名字表示颜色时直接写名字。如：<body bgcolor="yellow">
3．1．5 页面背景属性 ⑵ 关键字 用英文名字表示颜色时直接写名字。如：<body bgcolor="yellow"> Windows VGA(视频图像阵列)形成了16个关键字:aqua，black，blue，fuchsia,gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，and yellow。
12
2．设置图像背景 用图像作背景，只要在body的标识符里定义background属性就可以了。语法如下：
<body background=背景图像的URL>网页内容</body>
13
3．1．6 说明信息标记及注释标记 说明信息标记可以为文件加上说明，但不被显示。语法如下： <!—注释内容-->
14
3．2 文本格式标记结构标记 3．2．1 标题字体 <hn align=left|center|right>标题文字</hn> 说明： ⑴ n为文字大小，值1-6，1最大。 ⑵ “align”参数用来设置对齐方式，默认为左对齐“left”。 举例： <h1>河北机电职业技术学院</h1>
15
3．2．2 字体大小 1. basefont 属性 basefont是用来定义字体大小基本值的，其语法如下：
3．2．2 字体大小 1. basefont 属性 basefont是用来定义字体大小基本值的，其语法如下： <basefont size=字体的大小> 说明： ⑴ size的取值1-7，默认是3。 ⑵ 该命令的作用是控制了整个网页字体的大小。 2. font 属性 <font size=n face=字体名 color=颜色>被设置的文字</font> ⑴ size取7最大。 ⑵ size 的默认值是3。
16
3．2．3 段落 段落标记：<p> 作用：另起一段，为文字、图像、表格等之间留一空白行。 3．2．4 换行
3．2．3 段落 段落标记：<p> 作用：另起一段，为文字、图像、表格等之间留一空白行。 3．2．4 换行 换行标记：<br> 作用：另起一行，令文字、图像、表格等显示于下一行。
17
3．2．5 水平线 网页里的水平线就是在页面加上一条平行的横线，主要是用来美化网页的页面的。 水平线的标识符：<hr>
3．2．5 水平线 网页里的水平线就是在页面加上一条平行的横线，主要是用来美化网页的页面的。 水平线的标识符：<hr> 语法如下： <hr align=对齐方式 size=粗细 width=长度 color=颜色代码 noshade> 说明： ⑴ size 属性是用来定义水平线的宽度的，默认值是2个像素。 如：<hr size=5> ⑵ width属性是用来确定水平线长度的。它的格式是： <hr width=像素值或是（整个浏览器的长度的）百分比> 如：<hr width=50% size=3> ⑶ align属性是用来确定水平线的位置的。在hr里默认值是居中。 Align的取值可以是：left、right、center ⑷ noshade 属性是让水平线给人以实线的感觉，而不是好像是一条横穿网页的凹槽。 举例：<hr size=3 width=50% align=left color=# noshade>
18
3．2．6 字体格式化及原样显示等标记 1． 字体格式化标记 字符修饰符号成对出现，对其中的文字起修饰作用。常用的有如表3.2所示：
19
2. 原样显示标记
20
3．3 列表标记 3．3．1 有序列表标记 语法： <ol type=值 start=N> <li>第一个列表项目
3．3 列表标记 3．3．1 有序列表标记 语法： <ol type=值 start=N> <li>第一个列表项目 <li>第二个列表项目 <li>第三个列表项目 …… <li>第N个列表项目 </ol> 说明： ⑴ type属性如表3.4所示。
21
3．3 列表标记 ⑵ 如果项目编号不是从符号的第一个编起，就要用到start属性。
3．3 列表标记 ⑵ 如果项目编号不是从符号的第一个编起，就要用到start属性。 如果type=A，start=3,那么编号列表的项目符号就从“C”开始编起。 项目编号举例： <ol> <li>Coffee</li> <li>Milk</li> </ol> 在浏览器中显示为:
22
3．3．2 无序列表标记 语法： <ul type=值> <li>第一个列表项目 <li>第二个列表项目
3．3．2 无序列表标记 语法： <ul type=值> <li>第一个列表项目 <li>第二个列表项目 <li>第三个列表项目 …… <li>第N个列表项目 </ul> 说明： type属性如表3.5所示。
23
3．3．3 解释列表及综合列表标记 1. 解释列表 解释列表以标记<dl>开始。要解释的名词放在<dt>的后面，解释的内容放在<dd>后面，最后以</dl>结尾。 语法： <dl> <dt>第一个词语部分<dd>定义部分 <dt>第二个词语部分<dd>定义部分 <dt>第三个词语部分<dd>定义部分 …… <dt>第N个词语部分<dd>定义部分 </dl>
24
2．综合列表标记 综合列表标记就是在一个列表中嵌套其他列表，将上述的有序列表、无序列表和解释列表综合在一起的列表。 举例：
25
3．4 超链接标记 3．4．1 文本链接 语法：<a href= " URL " >显示文本</a>
3．4 超链接标记 3．4．1 文本链接 语法：<a href= " URL " >显示文本</a> 文本链接实例如表3.6所示。
26
3．4．2 图像链接 语法：<a href="URL"><img src="图片文件名"></a>
3．4．2 图像链接 语法：<a href="URL"><img src="图片文件名"></a> 举例：<a href=" src="tu1.jpg"></a 3．4．3 站内链接 语法：<a href="URL">显示文本或图片</a> 说明：超链接的目标位置是站内的某个文件。 举例：<a href="简介.htm">我的简介</a>
27
3．4．4 站外链接及锚点链接 1． 站外链接 语法：<a href=”URL”>显示文本或图片</a>
3．4．4 站外链接及锚点链接 1． 站外链接 语法：<a href=”URL”>显示文本或图片</a> 说明：超链接的目标位置是站外的某个URL。 举例：<a href=” 2． 锚点链接 锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页，通过点击命名锚点，能够快速重定向网页特定的位置（比如快速到页首、页尾或者网页中某篇文章处），便于浏览者查看网页内容。 创建到命名锚点的链接的过程分为两步：创建命名锚点和链接到命名锚点。
28
3．5 加入音频、视频和图像 3．5．1 加入音频 1．设置可控制的音乐
3．5 加入音频、视频和图像 3．5．1 加入音频 1．设置可控制的音乐 语法：<a href=”声音文件的URL”>链接声音的标志或是名称</a> 说明：当浏览者打开网页时，他要欣赏你所设置的音乐，只点击你所设置的链接音乐的标志或是名称，浏览器就能自动播放所链接的音乐，而此时显示的网页页面是不会有任何改变的。 举例：<a href="二泉映月.mp3">链接音乐</a>
29
2. 设置自动播放的音乐 语法： <bgsound src="背景音乐文件名或是URL" loop=参数> 说明：
2. 设置自动播放的音乐 语法： <bgsound src="背景音乐文件名或是URL" loop=参数> 说明： ⑴ 当浏览者打开网页时，自动播放所指定的背景音乐。 ⑵ loop属性用来控制背景音乐的播放次数。其取值可以是自然数，也可以是INFINTE，即循环播放。 举例：<bgsound src=="midboth.mid">
30
3．5．2 加入视频 语法： <img src="图像URL" dynsrc="视频URL" start=属性 loop=属性 controls loopdelay=属性> 说明： ⑴ src引导的图像是在视频文件准备播放而正在载入时，暂时在视频显示的位置显示的内容，dynsrc后边所引导的是你指定的要播放的正式视频文件。 ⑵ start属性是用来设置视频文件播放的开始时间的。 ⑶ loop属性用来设定视频文件播放的次数，它的取值可以是自然数，也可以是INFINTE，即循环播放。 ⑷ controls属性就是给你定义的视频文件在播放时，在视频窗口添加一个MS-Windows的视频播放控制条，主要是为了让浏览者控制视频文件的播放。 ⑸ 视频的loopdelay属性主要是指定视频文件的延时播放的，它的取值是自然数，表示延时多少毫秒。
31
3．5．3 加入图像 语法： <img src="图像的URL"> 举例：<img src="sun.jpg">
32
3．6 表格标记 3．6．1 表格 表格的标识符是table,它的基本格式： <table>……</table>
3．6 表格标记 3．6．1 表格 表格的标识符是table,它的基本格式： <table>……</table> 3．6．2 表格标题 表格的标题是caption，总是设置在table的前边。它的基本格式： <caption valign=值 align=值>标题名称</caption>
33
3．6．2 表格标题
34
3．6．3 表格行 <tr>……</tr>标识符是用来标示表格行，每一个<tr>就代表了一个行。
3．6．3 表格行 <tr>……</tr>标识符是用来标示表格行，每一个<tr>就代表了一个行。 3．6．4 单元格及属性 1． 单元格 <th>……</th>标识符是用来标志表格内数据的名称的，它的显示效果是加重的黑体，特别醒目。 <td>……</td>标识符是用来标志表格内具体的数据的，是一般的正常显示。 2. 属性 border属性标示表格的边框，它的取值是数字，如1、2、3等。 <table border=2>表示表格带有边框，数字指定边框的宽度（以像素为单位）。缺省值是border=1，border=0时表格没有边框。
35
3．7 表单标记 3．7．1 表单 表单的标识符是form，表单的格式如下：
3．7 表单标记 3．7．1 表单 表单的标识符是form，表单的格式如下： <form action=" " method=get或是post>表单的具体内容</form> 说明：要丰富表单里的内容，就要用到input和textareat等标识符。textarea标识符可以生成多行文本框；input标识符的type属性有9种取值：submit、text、password、checkbox、radio、image、hidden、reset、button，下面我们将逐一介绍。 3．7．2 单行文本框 1．文本框 input标识符的type取值为text时，表示生成的是文本框。 语法： <input type="text" name=值 size=值 maxlength=值> 说明： ⑴ name的值用来指定当前表单域的名称。 ⑵ size的值用来指定当前表单域的显示宽度。 ⑶ maxlength的值用来指定当前表单域在输入单行文本的时候，最大输入字符个数。
36
3．7．2 单行文本框 2． 密码输入框 input标识符的type取值为password时，表示生成的是密码输入框，它和文本框一样，只是运行时输入的内容显示为“*”。
37
3．7．3 多行文本框 textarea标识符，表示生成的是多行文本框。 语法：
3．7．3 多行文本框 textarea标识符，表示生成的是多行文本框。 语法： <textarea rows=值 name=值 cols=值></textarea> 说明： ⑴ name的值用来指定当前表单域的名称。 ⑵ rows的值用来指定多行文本框的行数。 ⑶ cols的值用来指定多行文本框的列数。
38
3．7．4 单选按钮 input标识符的type取值为radio时，表示生成的是单选按钮 3．7．5 复选框
3．7．4 单选按钮 input标识符的type取值为radio时，表示生成的是单选按钮 3．7．5 复选框 input标识符的type取值为checkbos时，表示生成的是复选框。 3．7．6 下拉菜单 下拉菜单又称列表框，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。 语法： <select name="列表框名称"> <option>第一个选项内容 <option>第二个选项内容 … <option>第N个选项内容 </select>
39
3．7．7 滚动菜单 滚动菜单可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。 语法：
3．7．7 滚动菜单 滚动菜单可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。 语法： <select name=值 size=值 multiple> <option value="value" selected>选项1 <option value="value">选项2 … </select> 说明： ⑴ name的值用来指定当前表单域的名称。 ⑵ size的值用来指定多行文本框显示的选项行数。 ⑶ multiple列表中的项目多选 ⑷ value选项值 ⑸ selected 默认选项
40
3．7．8 提交按钮 语法： <input type="submit" value=值 name=值> 说明：
3．7．8 提交按钮 语法： <input type="submit" value=值 name=值> 说明： ⑴ name的值用来指定当前表单域的名称。 ⑵ value的值用来指定按钮上显示的文本内容。 3．7．9 重置按钮以及表单的处理及应用 1. 重置按钮 <input type="reset" value=值 name=值>
41
3．7．9 重置按钮以及表单的处理及应用 2． 表单的处理及应用 表单的处理 表单的创建格式可以表述为： <form action="" method=get或是post>表单具体内容</form> 其中，method设定了传送数据的方式。 只有在“提交”以后，才能将表单中的数据发送到action指定的程序。
42
3．8 CSS基础 3．8．1 CSS样式简介 1． CSS即层叠样式表或级联样式表 类型1：类选择器样式 基本语法：
标记名.类名{样式属性:取值;样式属性;取值;...} 也可写作： .类名{样式属性:取值;样式属性:取值;...} 例如： .red{color:red} 如一段文字要应用这一样式则：<p class=red>……</p> 如果red类的样式全部应用于页面中的<p>标记内，则需写作：p.red{color:red}
43
1． CSS即层叠样式表或级联样式表 类型2：ID选择器样式 基本语法： #.标识名{样式属性:取值;样式属性:取值;...}
例如：将页面一个ID为page的页面元素字体设置为黑体，定义样式语句为： #page{font-family:黑体} 如要应用此样式，只需在网页元素的标记内设置ID为page即可。即：ID="page" 类型3：重定义标记样式 重定义标记样式是对页面的同一类元素重新设置其默认样式，只对选择的标记有效。 例如：对页面所有的二级标题设置样式，就可以直接对H2标记设置。 标记{样式属性:取值;样式属性:取值;...} 例如：将页面的二级标题设置为20像素大小的样式：H2{font-size:20px}
44
1． CSS即层叠样式表或级联样式表 基本语法： 标记{样式属性:取值;样式属性:取值;...}
例如：将页面的二级标题设置为20像素大小的样式：H2{font-size:20px} 类型4：特殊样式 常用的4种： a:link 链接文字的默认样式 a:active 链接文字使用中的效果，即鼠标正在按下时链接文字的样式。 a:visited 访问过的链接文字样式。 a:hover 当鼠标位于链接文字上方时的样式。 例如：a:visited{color:#ff0000;font-family:“宋体”}
45
2． css样式表的设置方法 方法1：链入外部样式表 需要在<head>区域用<link>标记链接。 基本语法：
<link rel="stylesheet" type="text/css" href="样式表源文件地址"> 方法2：导入外部样式表 <style type="text/css"> @import url(样式表的地址) 选择符{样式属性:取值;样式属性:取值;...} ... </style>
46
2． css样式表的设置方法 方法3：内部样式表
将css的定义<style>..</style>写在HTML原始文件<head>..</head>标记之间，然后通过<style>标记插入，样式表的有效范围仅为该HTML页面。 基本语法： <style type="text/css"> 选择符{样式属性：取值；样式属性：取值;...} ...... </style> 由于存在有些低版本无法识别style标记，所以用了html的注释语句隐藏样式表的定义内容，实际应用的时候，语法写作： <!--选择符{样式属性：取值；样式属性：取值;…} ... --> 方法4 内嵌样式 内嵌样式是混合在HTML标记里使用的，与内嵌css最大的不同是局部引用仅会影响引用该段的样式，而不会影响其他非引用的部分。 <标记名 style="样式属性：取值；样式属性：取值；...">
47
3. CSS样式表书写原则 如果属性的值是多个单词组成，则必须使用引号将属性值括起来。
如果要对一个选择符指定多个属性，则需要使用分号；将所有的属性和值分开。 可以将具有相同属性和属性值的选择符组合起来，用逗号隔开。例如： p，table{font-size:9pt} 等效于：p{font-size:9pt} table{font-size:9pt} css样式表中的注释语句为“/*……*/”。 如：/*定义段落的样式表*/ p{color:black;font-family:arial/*颜色为黑色，字体为arial*/} 如果在同一个选择器上使用不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。 不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。 优先级从高到低：ID选择符，类选择符和html标记选择符。
48
3．8．2 CSS样式表的定义及应用 演示书63页案例
49
3．9 框架标记 3．9．1 框架的结构 框架文件包括框架集和框架文件。框架集是访问框架文件的入口文件，也是存放框架结构的文件。如果框架网页由左右两个框架组成,那么需要三个文件（一个总的框架集文件和左右两个网页文件）来保存。 3．9．2 结构标记的使用 ⑴ 框架集文件的基本语法: <html> <head> <title>框架页面的标题< /title> </head> <frameset 参数> <frame 参数> … </frameset></html>
50
3．9．2 结构标记的使用 ⑵ FRAMESET的ROWS和COLS属性
3．9．2 结构标记的使用 ⑵ FRAMESET的ROWS和COLS属性 考虑分割方式的不同，框架结构分为三种：水平分割窗口,垂直分割窗口和嵌套分割窗口。 ⑶ FRAMESET的FRAMEBORDER属性 FRAMEBORDER属性用来设置边框显示。 语法： <frameset frameborder=值> 说明： frameborder的值为0(隐藏)或1(显示) 在frameset中设置将会对整个框架有效,在frame中则只对当前这个框架有效。
51
3．9．2 结构标记的使用 ⑷ FRAMESET的FRAMESPACING属性 FRAMESPACING属性用来设置边框宽度。 语法：
3．9．2 结构标记的使用 ⑷ FRAMESET的FRAMESPACING属性 FRAMESPACING属性用来设置边框宽度。 语法： <frameset framespacing=值> 说明： 边框宽度是在页面中的各个边框之间线条的宽度。 framespacing只对框架集使用，对单个框架无效。 ⑸ FRAMESET的BORDERCOLOR属性 BORDERCOLOR属性用来设置框架的边框颜色。 <frameset bordercolor="颜色代码"> 说明：bordercolor只对框架集有效，对单个框架无效。
52
3．9．3 FRAME标记的使用 1. frame标记 语法：
<frame src=值 name=值 noresize marginwidth=值 marginheight=值 scrolling=值 frameborder=值> 说明： src的值为“页面源文件地址”。 name的值为“页面名称”。 如果加上“noresize”参数，则固定框架窗口的大小保持不变。 marginwidth的值用来设定边框与页面内容的水平边距。 marginheight的值用来设定边框与页面内容的垂直边距。 scrolling的值用来设定是否显示框架的滚动条。有三种取值：yes、no、auto。 frameborder的值为0(隐藏)或1(显示)。
53
3．9．3 FRAME标记的使用 2．noframes 不支持框架标记 语法: <noframe> 内容......
54
3．10 其他标记 3．10．1 滚动字幕 3．10．2 常用URL类型 3．10．3 闪烁的字体 3．10．4 分区标记
3．10 其他标记 3．10．1 滚动字幕 3．10．2 常用URL类型 3．10．3 闪烁的字体 3．10．4 分区标记 3．10．5 块引用标记及特殊字符的写法
55
3．11 小结 本章作为承前启后的内容，需要学生全部识记常用的HTML标记语言，为ASP网页编程打下基础。
56
第3章 Web页面制作基础 The End！
Similar presentations
