WEB页面制作基础

1、第2章 Web页面制作基础 2.1 HTML语言概述语言概述 2.2 文本的格式与风格文本的格式与风格 2.3 加入多媒体与超级链接加入多媒体与超级链接 2.4 制作表格制作表格 2.5 制作表单制作表单 2.6 框架结构框架结构 2.7 CSS基础基础 2.1 HTML语言概述语言概述 2.1.1 HTML2.1.1 HTML概述概述 HTMLHTML是（是（Hyper Text Markup LanguageHyper Text Markup Language，超文本标，超文本标 记语言）的缩写，用来表示网上信息的符号标记语言。记语言）的缩写，用来表示网上信息的符号标记语言。 HTMLHT

2、ML最早源于最早源于SGMLSGML语言语言 . . HTMLHTML语言内容丰富，从功能上大体可分为：文本结语言内容丰富，从功能上大体可分为：文本结 构设置、列表建立、文本属性制定、超链接、图片和构设置、列表建立、文本属性制定、超链接、图片和 多媒体插入、对象、表格以及窗体的操作。多媒体插入、对象、表格以及窗体的操作。 2.1 HTML语言概述语言概述 2.1.2 HTML2.1.2 HTML文档的结构文档的结构 包括包括HEADHEAD、TITLETITLE、BODYBODY三部分，下面是基本结构：三部分，下面是基本结构： 标题部分标题部分 正文部分正文部分 2.1 HTML语言概述语言概

3、述 2.1.3 HTML2.1.3 HTML标记标记 1 1HTMLHTML文档标记文档标记 格式：格式：标志文件开始和结尾的标标志文件开始和结尾的标 记。记。 2 2HTMLHTML文件头标记文件头标记 格式：格式：用于包含文件的基本信息。用于包含文件的基本信息。 3 3HTMLHTML文件主体标记文件主体标记 格式：格式：文件主体标记。文件主体标记。 注意：注意：与与为独立的两个部分，不能为独立的两个部分，不能 互相嵌套。互相嵌套。 2.1 HTML语言概述语言概述 2.1.4 2.1.4 常用常用HTMLHTML编辑工具编辑工具 任何一个文档编辑器都是任何一个文档编辑器都是HTMLHTM

4、L编辑器。编辑器。 为了减少网页设计师的工作设计了专用的网页编辑为了减少网页设计师的工作设计了专用的网页编辑 器，像器，像DreamweaverDreamweaver、FrontPageFrontPage、CutePageCutePage、 QuickSiteQuickSite等，是专门用来制作网页的，具有所见即等，是专门用来制作网页的，具有所见即 所得的功能。所得的功能。 所见即所得的概念。所见即所得的概念。 本书例题均在本书例题均在FrontPage 2000FrontPage 2000编辑环境中调试并通编辑环境中调试并通 过。过。 2.2 文本的格式与风格文本的格式与风格 2.2.1 2

5、.2.1 设置设置的属性的属性 1 1属性概述属性概述 backgroundbackground属性属性 bgcolor bgcolor 属性属性 bgpropertiesbgproperties属性属性 link link ，vlinkvlink， alinkalink属性属性 LeftmarginLeftmargin，topmargintopmargin属性属性 MargingwidthMargingwidth，marginheightmarginheight属性属性 2 2FrontPage 2000FrontPage 2000中的实现中的实现 2.2 文本的格式与风格文本的格式与风格

6、2.2.2 2.2.2 段落格式化段落格式化 1 1标题标记标题标记 格式：格式：， 设置各种大小不同标题的标记。设置各种大小不同标题的标记。 2 2段落标记段落标记 格式：格式：设置段落标记。设置段落标记。 3 3预定格式标记预定格式标记 格式：格式：在浏览器中浏览时，按照文在浏览器中浏览时，按照文 档中预先排好的形式显示内容。档中预先排好的形式显示内容。 2.2 文本的格式与风格文本的格式与风格 4 4分区显示标记分区显示标记 格式：格式：分区显示标记。分区显示标记。 5 5词标记词标记 这种标记有两种：这种标记有两种：和和 格式：格式：强制进行换行标记。强制进行换行标记。 格式：格式：插

7、入水平线标记。插入水平线标记。 6 6注释标记注释标记 格式：格式：!-注释标记。注释标记。 2.2 文本的格式与风格文本的格式与风格 2.2.4 2.2.4 建立列表建立列表 1 1有序列表有序列表 格式：格式： OL type= LI type=” LI type=” 功能：建立有序列表。功能：建立有序列表。 2.2 文本的格式与风格文本的格式与风格 2 2无序列表无序列表 格式：格式： UL type=” LI type=” LI type=” 功能：建立无序列表。功能：建立无序列表。 2.2 文本的格式与风格文本的格式与风格 3 3自定义列表自定义列表 格式：格式： 注意：注意：根据文

8、档的具体要求，列表可以嵌套使用。根据文档的具体要求，列表可以嵌套使用。 在在FrontPage 2000FrontPage 2000中实现。中实现。 2.2 文本的格式与风格文本的格式与风格 2.2.5 2.2.5 字符的格式化字符的格式化 1 1字体设置标记字体设置标记 格式：格式： 功能：设置字体格式标记。功能：设置字体格式标记。 标记提供了几种属性标记提供了几种属性 ： sizesize：设置文字的大小。：设置文字的大小。 faceface：设置字体。：设置字体。 colorcolor：设置文字的颜色。：设置文字的颜色。 2.2 文本的格式与风格文本的格式与风格 其他标记格式其他标记格式

9、功能功能 给字符加下划线 给字符上加横线，表示删除 给字符加粗 将字符设置成斜体 标记使得其中的文字产生闪烁的效果 2.3 2.3 加入多媒体与超级链接加入多媒体与超级链接 2.3.1 2.3.1 加入图像、视频、动画加入图像、视频、动画 图像在网页设计中是必不可少的，所以用户应掌图像在网页设计中是必不可少的，所以用户应掌 握在网页中操作图像的方法。握在网页中操作图像的方法。 格式：格式： 功能：在网页中加入图像、视频、动画等。功能：在网页中加入图像、视频、动画等。 2.3 2.3 加入多媒体与超级链接加入多媒体与超级链接 标记属性功能 src =URL通过URL给出图像来源的位置，不可缺省

10、width=size设置图像宽度 height =size设置图像高度 alt= txt设置在图像未载入前图片位置显示的文字 border= size设置图像边框，缺省为0 align=alignstyle设置对齐方式。取值为：top，middle，bottom，aleft， right hspace=size设置图片左右边沿空白 vspace=size设置图片上下边沿空白 1插入图像插入图像 2.3 2.3 加入多媒体与超级链接加入多媒体与超级链接 2插入视频插入视频 标记属性功能 dynsrc=URL设置多媒体来源位置 loop=size设置视频播放的次数 loopdelay=time设置

11、两次播放的间隔时间 start=value指定何时开始播放视频文件 使用使用FrontPage 2000在网页中插入多媒体在网页中插入多媒体 2.3 2.3 加入多媒体与超级链接加入多媒体与超级链接 2.3.2 加入超级链接格式：加入超级链接格式： 标记属性功能 href=URL给定链接目标的位置 target=frametarget设置显示链接目标的框架 accesskey=character设置快捷键 tabindex=num设置Tab键的顺序 rel=linktype设置到链接的关系 2.4 制作表格制作表格 2.4.1 建立表格建立表格 创建表格是规划页面最常用的方法。创建表格是规划页

12、面最常用的方法。 格式：格式： 功能：创建表格进行页面设计。功能：创建表格进行页面设计。 在浏览器中显示时，表格的整体外观由在浏览器中显示时，表格的整体外观由 标记的属性决定标记的属性决定 。 2.4 制作表格制作表格 标记属性功能 border=size设置表格边框大小 width= size设置表格的宽度 height=size设置表格的高度 cellspacing=size设置单元格间距 cellpadding =size设置单元格的填充距 background =URL设置表格背景图片 bgcolor =colorvalue设置表格背景色 align=alignstyle设置对齐方式

13、cols =size设置表格的列数 2.4 制作表格制作表格 2.4.2 定制表格定制表格 使用使用只是定义空表格，还需要定只是定义空表格，还需要定 义行和单元格。义行和单元格。 格式：格式： 功能：定义表格的一行。功能：定义表格的一行。 对于每一行，可以定义行属性对于每一行，可以定义行属性 2.4 制作表格制作表格 标记属性功能 bgcolor=colorvalue设置行背景颜色。 align=alignstyle设置行对齐方式。 valign=valignstyle设置单元格垂直对齐方式。 行属性：行属性： 2.4 制作表格制作表格 单元格属性：单元格属性： 标记属性功能 bgcolor=

14、colorvalue设置单元格背景颜色 rowspan=num设置单元格所占的行数 colspan =num设置单元格所占的列数 align =alignstyle设置对齐方式 valign =valignstyle设置单元格垂直对齐方式 width =size设置单元格宽度 height=size设置单元格高度 格式：格式：定义表格说明，通过属定义表格说明，通过属 性性align设置标题的对齐方式。设置标题的对齐方式。 2.5 制作表单制作表单 2.5.1 表单的结构表单的结构 格式：格式：定义表单。定义表单。 标记属性功能 action= URL设置处理表单的程序 method=postm

15、ethod设置发送表单的HTTP方法 enctype=contenttype设置发送表单的内容属性 onsubmit= script设置被发送事件 target=frametarget设置显示表单内容的窗口 accept-charset=cdata设置可支持的字符列表 2.5 制作表单制作表单 2.5.2 FORM中常用的标记中常用的标记 1输入域 （1）单行输入域）单行输入域 1）text类型类型 2）password类型类型 3）radio类型类型 4）checkbox类型类型 5）submit类型类型 6）reset类型类型 7）hidden类型类型 2.5 制作表单制作表单 （2 2）

16、多行输入域标记）多行输入域标记 标记属性功能 name=cdata设置FORM提交的输入信息的名称 rows=num设置文本域的行数 cols= num设置文本域的列数 tabindex=num设置tab键的次序 2.5 制作表单制作表单 2按钮按钮 标记属性功能 name=cdata设置已发送表单的关键字。 value=cdata设置已发送表单的值。 type= buttontype设置按钮的类型。 tabindex=num设置tab键的次序。 2.5 制作表单制作表单 3选择域选择域 格式：格式： 选项一选项一 选项二选项二 功能：定义选择栏。功能：定义选择栏。 2.5 制作表单制作表单

17、2.5.3 表单的处理表单的处理 处理信息时，经常配合表格标记，使用循环处理信息时，经常配合表格标记，使用循环 输出的方法。输出的方法。 2.6 框架结构框架结构 2.6.1 2.6.1 框架结构的文件格式框架结构的文件格式 注意：注意：在老版本的浏览器在老版本的浏览器 可能不支持框架结构。可能不支持框架结构。 2.6 框架结构框架结构 2.6.2 2.6.2 框架结构标记的使用框架结构标记的使用 格式：格式： 标记属性功能 rows=size设置多重框架的高度 cols =size设置多重框架的宽度 onload=script设置框架被载入的事件 onunload=script 设置框架被卸

18、载的事件 2.6 框架结构框架结构 2.6.3 FRAME2.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 1用于用于A A标记标记 2 2用于用于BASEBASE标记标记