第 2章 Web页面制作基础
2.1 HTML语言概述
2.2 文本的格式与风格
2.3 加入多媒体与超级链接
2.4 制作表格
2.5 制作表单
2.6 框架结构
2.7 CSS基础
2.1 HTML语言概述
2.1.1 HTML概述
HTML是（ Hyper Text Markup Language，超文本标记语言）的缩写，用来表示网上信息的符号标记语言。
HTML最早源于 SGML语言,
HTML语言内容丰富，从功能上大体可分为：文本结构设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格以及窗体的操作。
2.1 HTML语言概述
2.1.2 HTML文档的结构包括 HEAD,TITLE,BODY三部分,下面是基本结构：
<HTML>
<HEAD>
标题部分
</HEAD>
<BODY>
正文部分
</BODY>
</HTML>
2.1 HTML语言概述
2.1.3 HTML标记
1,HTML文档标记格式,<HTML>… </HTML>标志文件开始和结尾的标记 。
2,HTML文件头标记格式,<HEAD>… </HEAD>用于包含文件的基本信息 。
3,HTML文件主体标记格式,<BODY>… </BODY>文件主体标记 。
注意,<HEAD>与 <BODY>为独立的两个部分,不能互相嵌套 。
2.1 HTML语言概述
2.1.4 常用 HTML编辑工具任何一个文档编辑器都是 HTML编辑器。
为了减少网页设计师的工作设计了专用的网页编辑器，像 Dreamweaver,FrontPage,CutePage、
QuickSite等，是专门用来制作网页的，具有所见即所得的功能。
所见即所得的概念。
本书例题均在 FrontPage 2000编辑环境中调试并通过。
2.2 文本的格式与风格
2.2.1 设置 <BODY>的属性
1,<BODY>属性概述
background属性
bgcolor 属性
bgproperties属性
link,vlink,alink属性
Leftmargin,topmargin属性
Margingwidth,marginheight属性
2,FrontPage 2000中的实现
2.2 文本的格式与风格
2.2.2 段落格式化
1,标题标记格式,<H1>… </H1>,<H2>… </H2>… <H6>… </H6>
设置各种大小不同标题的标记 。
2,段落标记格式,<P>… </P>设置段落标记 。
3,预定格式标记格式,<PRE>… </PRE>在浏览器中浏览时,按照文档中预先排好的形式显示内容 。
2.2 文本的格式与风格
4,分区显示标记格式,<DIV>… </DIV>分区显示标记 。
5,词标记这种标记有两种,<BR>和 <HR>
格式,<BR>强制进行换行标记 。
格式,<HR>插入水平线标记 。
6,注释标记格式,<!--注释内容 -->注释标记 。
2.2 文本的格式与风格
2.2.4 建立列表
1,有序列表格式：
<OL type="符号类型 ">
<LI type=”符号类型,>… </LI>
<LI type=”符号类型,>… </LI>
…
</OL>
功能：建立有序列表。
2.2 文本的格式与风格
2,无序列表格式：
<UL type=”符号类型,>
<LI type=”符号类型,>… </LI>
<LI type=”符号类型,>… </LI>
…
</UL>
功能：建立无序列表。
2.2 文本的格式与风格
3,自定义列表格式,<DL>
<DT>… </DT>
<DD>… </DD>
<DT>… </DT>
<DD>… </DD>
…
</DL>
注意,根据文档的具体要求,列表可以嵌套使用 。
在 FrontPage 2000中实现 。
2.2 文本的格式与风格
2.2.5 字符的格式化
1,字体设置标记格式,<FONT>… </FONT>
功能：设置字体格式标记 。
<FONT>标记提供了几种属性,
size：设置文字的大小 。
face：设置字体 。
color：设置文字的颜色 。
2.2 文本的格式与风格其他标记格式 功能
<U>… </U> 给字符加下划线
<S>… </S> 给字符上加横线,表示删除
<B>… </B> 给字符加粗
<I>… </I> 将字符设置成斜体
<BLINK>… </BLI
NK>
标记使得其中的文字产生闪烁的效果
2.3 加入多媒体与超级链接
2.3.1 加入图像,视频,动画图像在网页设计中是必不可少的,所以用户应掌握在网页中操作图像的方法 。
格式,<IMG>… </IMG>
功能：在网页中加入图像,视频,动画等 。
2.3 加入多媒体与超级链接标记属性 功能
src =URL 通过 URL给出图像来源的位置,不可缺省
width=size 设置图像宽度
height =size 设置图像高度
alt=txt 设置在图像未载入前图片位置显示的文字
border=size 设置图像边框,缺省为 0
align=alignstyle 设置对齐方式 。 取值为,top,middle,bottom,aleft，
right
hspace=size 设置图片左右边沿空白
vspace=size 设置图片上下边沿空白
1．插入图像
2.3 加入多媒体与超级链接
2．插入视频标记属性 功能
dynsrc=URL 设置多媒体来源位置
loop=size 设置视频播放的次数
loopdelay=time 设置两次播放的间隔时间
start=value 指定何时开始播放视频文件使用 FrontPage 2000在网页中插入多媒体
2.3 加入多媒体与超级链接
2.3.2 加入超级链接格式,<A>… </A>
标记属性 功能
href=URL 给定链接目标的位置
target=frametarget 设置显示链接目标的框架
accesskey=character 设置快捷键
tabindex=num 设置 Tab键的顺序
rel=linktype 设置到链接的关系
2.4 制作表格
2.4.1 建立表格创建表格是规划页面最常用的方法 。
格式,<TABLE>… </TABLE>
功能：创建表格进行页面设计 。
在浏览器中显示时,表格的整体外观由
<TABLE>标记的属性决定 。
2.4 制作表格标记属性 功能
border=size 设置表格边框大小
width= size 设置表格的宽度
height=size 设置表格的高度
cellspacing=size 设置单元格间距
cellpadding =size 设置单元格的填充距
background =URL 设置表格背景图片
bgcolor =colorvalue 设置表格背景色
align=alignstyle 设置对齐方式
cols =size 设置表格的列数
2.4 制作表格
2.4.2 定制表格使用 <TABLE>只是定义空表格,还需要定义行和单元格 。
格式,<TR>… </TR>
功能：定义表格的一行 。
对于每一行,可以定义行属性
2.4 制作表格标记属性 功能
bgcolor=colorvalue 设置行背景颜色 。
align=alignstyle 设置行对齐方式 。
valign=valignstyle 设置单元格垂直对齐方式 。
行属性：
2.4 制作表格单元格属性：
标记属性 功能
bgcolor=colorvalue 设置单元格背景颜色
rowspan=num 设置单元格所占的行数
colspan =num 设置单元格所占的列数
align =alignstyle 设置对齐方式
valign =valignstyle 设置单元格垂直对齐方式
width =size 设置单元格宽度
height=size 设置单元格高度格式,<CAPTION>… </CAPTION>定义表格说明，通过属性 align设置标题的对齐方式。
2.5 制作表单
2.5.1 表单的结构格式,<FORM>… </FORM>定义表单 。
标记属性 功能
action= URL 设置处理表单的程序
method=postmethod 设置发送表单的 HTTP方法
enctype=contenttype 设置发送表单的内容属性
onsubmit= script 设置被发送事件
target=frametarget 设置显示表单内容的窗口
accept-charset=cdata 设置可支持的字符列表
2.5 制作表单
2.5.2 FORM中常用的标记
1,输入域
（ 1） 单行输入域 <INPUT>
1） text类型 2） password类型
3） radio类型 4） checkbox类型
5） submit类型 6） reset类型
7） hidden类型
2.5 制作表单
（ 2） 多行输入域标记 <TEXTAREA>
标记属性 功能
name=cdata 设置 FORM提交的输入信息的名称
rows=num 设置文本域的行数
cols= num 设置文本域的列数
tabindex=num 设置 tab键的次序
2.5 制作表单
2．按钮 <BUTTON>
标记属性 功能
name=cdata 设置已发送表单的关键字 。
value=cdata 设置已发送表单的值 。
type= buttontype 设置按钮的类型 。
tabindex=num 设置 tab键的次序 。
2.5 制作表单
3,选择域格式：
<SELECT>
<OPTION>选项一
<OPTION>选项二
…
</SELECT>
功能：定义选择栏。
2.5 制作表单
2.5.3 表单的处理处理信息时，经常配合表格标记，使用循环输出的方法。
2.6 框架结构
2.6.1 框架结构的文件格式
<HTML>
<HEAD>
…
</HEAD> 注意,在老版本的浏览器
<FRAMESET> 可能不支持框架结构 。
<FRAME>
…
<FRAME>
…
</FRAMESET>
</HTML>
2.6 框架结构
2.6.2 框架结构标记的使用格式,<FRAMESET>… </FRAMESET>
标记属性 功能
rows=size 设置多重框架的高度
cols =size 设置多重框架的宽度
onload=script 设置框架被载入的事件
onunload=script 设置框架被卸载的事件
2.6 框架结构
2.6.3 FRAME标记标记属性 功能
src=URL 设置要链接到的 HTML文件
name=framename 表示子窗口的名字
marginwidth=size 用来控制显示内容和窗口左右边界的距离,默认为 1
marginheight= size 用来控制显示内容和窗口上下边界的距离,默认为 1
scrolling=scrollingst
yle
指定子窗口是否使用滚动条,有 YES/NO/AUTO三个值,
默认 AUTO,即根据窗口内容决定是否有滚动条
noresize 使用该属性后,指定窗口不能调整窗口大小
2.6 框架结构
2.6.4 TARGET属性的使用三种常见的用法：
1．用于 A标记
2．用于 BASE标记
3．用于 FORM标记
2.7 CSS基础
2.7.1 CSS样式简介
CSS（ Cascading Style Sheets，层叠样式表），又称格式页。
2.7.2 CSS样式表的定义方法
1．通过 HTML标记定义
2．用 id属性定义样式表
3．使用 class定义样式表
2.7 CSS基础
2.7.3 在 HTML中加入 CSS的方法
1．嵌入式样式表
2．内联式样式表
3．外联式样式表
4．输入式样式表
2.1 HTML语言概述
2.2 文本的格式与风格
2.3 加入多媒体与超级链接
2.4 制作表格
2.5 制作表单
2.6 框架结构
2.7 CSS基础
2.1 HTML语言概述
2.1.1 HTML概述
HTML是（ Hyper Text Markup Language，超文本标记语言）的缩写，用来表示网上信息的符号标记语言。
HTML最早源于 SGML语言,
HTML语言内容丰富，从功能上大体可分为：文本结构设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格以及窗体的操作。
2.1 HTML语言概述
2.1.2 HTML文档的结构包括 HEAD,TITLE,BODY三部分,下面是基本结构：
<HTML>
<HEAD>
标题部分
</HEAD>
<BODY>
正文部分
</BODY>
</HTML>
2.1 HTML语言概述
2.1.3 HTML标记
1,HTML文档标记格式,<HTML>… </HTML>标志文件开始和结尾的标记 。
2,HTML文件头标记格式,<HEAD>… </HEAD>用于包含文件的基本信息 。
3,HTML文件主体标记格式,<BODY>… </BODY>文件主体标记 。
注意,<HEAD>与 <BODY>为独立的两个部分,不能互相嵌套 。
2.1 HTML语言概述
2.1.4 常用 HTML编辑工具任何一个文档编辑器都是 HTML编辑器。
为了减少网页设计师的工作设计了专用的网页编辑器，像 Dreamweaver,FrontPage,CutePage、
QuickSite等，是专门用来制作网页的，具有所见即所得的功能。
所见即所得的概念。
本书例题均在 FrontPage 2000编辑环境中调试并通过。
2.2 文本的格式与风格
2.2.1 设置 <BODY>的属性
1,<BODY>属性概述
background属性
bgcolor 属性
bgproperties属性
link,vlink,alink属性
Leftmargin,topmargin属性
Margingwidth,marginheight属性
2,FrontPage 2000中的实现
2.2 文本的格式与风格
2.2.2 段落格式化
1,标题标记格式,<H1>… </H1>,<H2>… </H2>… <H6>… </H6>
设置各种大小不同标题的标记 。
2,段落标记格式,<P>… </P>设置段落标记 。
3,预定格式标记格式,<PRE>… </PRE>在浏览器中浏览时,按照文档中预先排好的形式显示内容 。
2.2 文本的格式与风格
4,分区显示标记格式,<DIV>… </DIV>分区显示标记 。
5,词标记这种标记有两种,<BR>和 <HR>
格式,<BR>强制进行换行标记 。
格式,<HR>插入水平线标记 。
6,注释标记格式,<!--注释内容 -->注释标记 。
2.2 文本的格式与风格
2.2.4 建立列表
1,有序列表格式：
<OL type="符号类型 ">
<LI type=”符号类型,>… </LI>
<LI type=”符号类型,>… </LI>
…
</OL>
功能：建立有序列表。
2.2 文本的格式与风格
2,无序列表格式：
<UL type=”符号类型,>
<LI type=”符号类型,>… </LI>
<LI type=”符号类型,>… </LI>
…
</UL>
功能：建立无序列表。
2.2 文本的格式与风格
3,自定义列表格式,<DL>
<DT>… </DT>
<DD>… </DD>
<DT>… </DT>
<DD>… </DD>
…
</DL>
注意,根据文档的具体要求,列表可以嵌套使用 。
在 FrontPage 2000中实现 。
2.2 文本的格式与风格
2.2.5 字符的格式化
1,字体设置标记格式,<FONT>… </FONT>
功能：设置字体格式标记 。
<FONT>标记提供了几种属性,
size：设置文字的大小 。
face：设置字体 。
color：设置文字的颜色 。
2.2 文本的格式与风格其他标记格式 功能
<U>… </U> 给字符加下划线
<S>… </S> 给字符上加横线,表示删除
<B>… </B> 给字符加粗
<I>… </I> 将字符设置成斜体
<BLINK>… </BLI
NK>
标记使得其中的文字产生闪烁的效果
2.3 加入多媒体与超级链接
2.3.1 加入图像,视频,动画图像在网页设计中是必不可少的,所以用户应掌握在网页中操作图像的方法 。
格式,<IMG>… </IMG>
功能：在网页中加入图像,视频,动画等 。
2.3 加入多媒体与超级链接标记属性 功能
src =URL 通过 URL给出图像来源的位置,不可缺省
width=size 设置图像宽度
height =size 设置图像高度
alt=txt 设置在图像未载入前图片位置显示的文字
border=size 设置图像边框,缺省为 0
align=alignstyle 设置对齐方式 。 取值为,top,middle,bottom,aleft，
right
hspace=size 设置图片左右边沿空白
vspace=size 设置图片上下边沿空白
1．插入图像
2.3 加入多媒体与超级链接
2．插入视频标记属性 功能
dynsrc=URL 设置多媒体来源位置
loop=size 设置视频播放的次数
loopdelay=time 设置两次播放的间隔时间
start=value 指定何时开始播放视频文件使用 FrontPage 2000在网页中插入多媒体
2.3 加入多媒体与超级链接
2.3.2 加入超级链接格式,<A>… </A>
标记属性 功能
href=URL 给定链接目标的位置
target=frametarget 设置显示链接目标的框架
accesskey=character 设置快捷键
tabindex=num 设置 Tab键的顺序
rel=linktype 设置到链接的关系
2.4 制作表格
2.4.1 建立表格创建表格是规划页面最常用的方法 。
格式,<TABLE>… </TABLE>
功能：创建表格进行页面设计 。
在浏览器中显示时,表格的整体外观由
<TABLE>标记的属性决定 。
2.4 制作表格标记属性 功能
border=size 设置表格边框大小
width= size 设置表格的宽度
height=size 设置表格的高度
cellspacing=size 设置单元格间距
cellpadding =size 设置单元格的填充距
background =URL 设置表格背景图片
bgcolor =colorvalue 设置表格背景色
align=alignstyle 设置对齐方式
cols =size 设置表格的列数
2.4 制作表格
2.4.2 定制表格使用 <TABLE>只是定义空表格,还需要定义行和单元格 。
格式,<TR>… </TR>
功能：定义表格的一行 。
对于每一行,可以定义行属性
2.4 制作表格标记属性 功能
bgcolor=colorvalue 设置行背景颜色 。
align=alignstyle 设置行对齐方式 。
valign=valignstyle 设置单元格垂直对齐方式 。
行属性：
2.4 制作表格单元格属性：
标记属性 功能
bgcolor=colorvalue 设置单元格背景颜色
rowspan=num 设置单元格所占的行数
colspan =num 设置单元格所占的列数
align =alignstyle 设置对齐方式
valign =valignstyle 设置单元格垂直对齐方式
width =size 设置单元格宽度
height=size 设置单元格高度格式,<CAPTION>… </CAPTION>定义表格说明，通过属性 align设置标题的对齐方式。
2.5 制作表单
2.5.1 表单的结构格式,<FORM>… </FORM>定义表单 。
标记属性 功能
action= URL 设置处理表单的程序
method=postmethod 设置发送表单的 HTTP方法
enctype=contenttype 设置发送表单的内容属性
onsubmit= script 设置被发送事件
target=frametarget 设置显示表单内容的窗口
accept-charset=cdata 设置可支持的字符列表
2.5 制作表单
2.5.2 FORM中常用的标记
1,输入域
（ 1） 单行输入域 <INPUT>
1） text类型 2） password类型
3） radio类型 4） checkbox类型
5） submit类型 6） reset类型
7） hidden类型
2.5 制作表单
（ 2） 多行输入域标记 <TEXTAREA>
标记属性 功能
name=cdata 设置 FORM提交的输入信息的名称
rows=num 设置文本域的行数
cols= num 设置文本域的列数
tabindex=num 设置 tab键的次序
2.5 制作表单
2．按钮 <BUTTON>
标记属性 功能
name=cdata 设置已发送表单的关键字 。
value=cdata 设置已发送表单的值 。
type= buttontype 设置按钮的类型 。
tabindex=num 设置 tab键的次序 。
2.5 制作表单
3,选择域格式：
<SELECT>
<OPTION>选项一
<OPTION>选项二
…
</SELECT>
功能：定义选择栏。
2.5 制作表单
2.5.3 表单的处理处理信息时，经常配合表格标记，使用循环输出的方法。
2.6 框架结构
2.6.1 框架结构的文件格式
<HTML>
<HEAD>
…
</HEAD> 注意,在老版本的浏览器
<FRAMESET> 可能不支持框架结构 。
<FRAME>
…
<FRAME>
…
</FRAMESET>
</HTML>
2.6 框架结构
2.6.2 框架结构标记的使用格式,<FRAMESET>… </FRAMESET>
标记属性 功能
rows=size 设置多重框架的高度
cols =size 设置多重框架的宽度
onload=script 设置框架被载入的事件
onunload=script 设置框架被卸载的事件
2.6 框架结构
2.6.3 FRAME标记标记属性 功能
src=URL 设置要链接到的 HTML文件
name=framename 表示子窗口的名字
marginwidth=size 用来控制显示内容和窗口左右边界的距离,默认为 1
marginheight= size 用来控制显示内容和窗口上下边界的距离,默认为 1
scrolling=scrollingst
yle
指定子窗口是否使用滚动条,有 YES/NO/AUTO三个值,
默认 AUTO,即根据窗口内容决定是否有滚动条
noresize 使用该属性后,指定窗口不能调整窗口大小
2.6 框架结构
2.6.4 TARGET属性的使用三种常见的用法：
1．用于 A标记
2．用于 BASE标记
3．用于 FORM标记
2.7 CSS基础
2.7.1 CSS样式简介
CSS（ Cascading Style Sheets，层叠样式表），又称格式页。
2.7.2 CSS样式表的定义方法
1．通过 HTML标记定义
2．用 id属性定义样式表
3．使用 class定义样式表
2.7 CSS基础
2.7.3 在 HTML中加入 CSS的方法
1．嵌入式样式表
2．内联式样式表
3．外联式样式表
4．输入式样式表
