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，超文本标，超文本标记语言）的缩写，用来表示网上信息的符号标记语言。记语言）的缩写，用来表示网上信息的符号标记语言。 HTMLHTML最早

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

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

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

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

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

7、记。注释标记。 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自定义列表自定义列表格式：格式： 注意：注意：根据文档的具体要求，列表可以嵌套使用。根据文档的具体要求，列表可以嵌套使用。在在FrontPage

8、2000FrontPage 2000中实现。中实现。 2.2 文本的格式与风格文本的格式与风格2.2.5 2.2.5 字符的格式化字符的格式化 1 1字体设置标记字体设置标记格式：格式：功能：设置字体格式标记。功能：设置字体格式标记。标记提供了几种属性标记提供了几种属性 ：sizesize：设置文字的大小。：设置文字的大小。faceface：设置字体。：设置字体。colorcolor：设置文字的颜色。：设置文字的颜色。2.2 文本的格式与风格文本的格式与风格其他标记格式其他标记格式功能功能给字符加下划线给字符上加横线，表示删除给字符加粗将字符设置成斜体标记使得其中的文字产生闪烁的效果2.3 2

9、.3 加入多媒体与超级链接加入多媒体与超级链接 2.3.1 2.3.1 加入图像、视频、动画加入图像、视频、动画 图像在网页设计中是必不可少的，所以用户应掌图像在网页设计中是必不可少的，所以用户应掌握在网页中操作图像的方法。握在网页中操作图像的方法。 格式：格式： 功能：在网页中加入图像、视频、动画等。功能：在网页中加入图像、视频、动画等。 2.3 2.3 加入多媒体与超级链接加入多媒体与超级链接标记属性功能src =URL通过URL给出图像来源的位置，不可缺省width=size设置图像宽度height =size设置图像高度alt= txt设置在图像未载入前图片位置显示的文字border=

10、 size设置图像边框，缺省为0align=alignstyle设置对齐方式。取值为：top，middle，bottom，aleft，righthspace=size设置图片左右边沿空白vspace=size设置图片上下边沿空白1插入图像插入图像 2.3 2.3 加入多媒体与超级链接加入多媒体与超级链接2插入视频插入视频 标记属性功能dynsrc=URL设置多媒体来源位置loop=size设置视频播放的次数loopdelay=time设置两次播放的间隔时间start=value指定何时开始播放视频文件使用使用FrontPage 2000在网页中插入多媒体在网页中插入多媒体 2.3 2.3 加入

11、多媒体与超级链接加入多媒体与超级链接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设置对齐方式cols =size设置表格的列数2.4 制作表格制作表格2.4.2 定制表格定制表格使用使用只是定义空表格，还需要定只是定义空表格，还需要定义行和单元格。义行和单元格。格式：格式：功能：定义表格的一行。功

13、能：定义表格的一行。对于每一行，可以定义行属性对于每一行，可以定义行属性 2.4 制作表格制作表格标记属性功能bgcolor=colorvalue设置行背景颜色。align=alignstyle设置行对齐方式。valign=valignstyle设置单元格垂直对齐方式。行属性：行属性：2.4 制作表格制作表格单元格属性：单元格属性：标记属性功能bgcolor=colorvalue设置单元格背景颜色rowspan=num设置单元格所占的行数colspan =num设置单元格所占的列数align =alignstyle设置对齐方式valign =valignstyle设置单元格垂直对齐方式widt

14、h =size设置单元格宽度height=size设置单元格高度格式：格式：定义表格说明，通过属定义表格说明，通过属性性align设置标题的对齐方式。设置标题的对齐方式。 2.5 制作表单制作表单 2.5.1 表单的结构表单的结构 格式：格式：定义表单。定义表单。 标记属性功能action= URL设置处理表单的程序method=postmethod设置发送表单的HTTP方法enctype=contenttype设置发送表单的内容属性onsubmit= script设置被发送事件target=frametarget设置显示表单内容的窗口accept-charset=cdata设置可支持的字符列

15、表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）多行输入域标记）多行输入域标记标记属性功能name=cdata设置FORM提交的输入信息的名称rows=num设置文本域的行数cols= num设置文本域的列数tabindex=num设置tab键的次序2.5 制作表单制作表单2按钮按钮 标记属性功能name=cdata设置已

16、发送表单的关键字。value=cdata设置已发送表单的值。type= buttontype设置按钮的类型。tabindex=num设置tab键的次序。2.5 制作表单制作表单3选择域选择域格式：格式： 选项一选项一 选项二选项二 功能：定义选择栏。功能：定义选择栏。 2.5 制作表单制作表单2.5.3 表单的处理表单的处理处理信息时，经常配合表格标记，使用循环处理信息时，经常配合表格标记，使用循环输出的方法。输出的方法。 2.6 框架结构框架结构 2.6.1 2.6.1 框架结构的文件格式框架结构的文件格式 注意：注意：在老版本的浏览器在老版本的浏览器 可能不支持框架结构。可能不支持框架结构

17、。 2.6 框架结构框架结构2.6.2 2.6.2 框架结构标记的使用框架结构标记的使用 格式：格式：标记属性功能rows=size设置多重框架的高度cols =size设置多重框架的宽度onload=script设置框架被载入的事件onunload=script 设置框架被卸载的事件2.6 框架结构框架结构2.6.3 FRAME2.6.3 FRAME标记标记 标记属性功能src=URL设置要链接到的HTML文件name=framename表示子窗口的名字marginwidth=size用来控制显示内容和窗口左右边界的距离，默认为1marginheight= size用来控制显示内容和窗口上下边界的距离，默认为1scrolling=scrollingstyle 指定子窗口是否使用滚动条，有YES/NO/AUTO三个值，默认AUTO，即根据窗口内容决定是否有滚动条noresize使用该属性后，指定窗口不能调整窗口大小2.6 框架结构框架结构2.6.4 TARGET属性的使用属性的使用三种常见的用法：三种常见的用法：1 1用于用于A A标记标记 2 2用于用于BASEBASE标记标记 3 3用