第2章Web页面制作基础.ppt

1、第2章 Web页面制作基础,2.1 HTML概述 2.2 HTML文本设计 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、B

2、ODY三部分，下面是基本结构： 标题部分 正文部分 ,2.1 HTML概述,2.1.3 HTML标记 1HTML文档标记 格式：标志文件开始和结尾的标记。 2HTML文件头标记 格式：用于包含文件的基本信息。 3HTML文件主体标记 格式：文件主体标记。 注意：与为独立的两个部分，不能互相嵌套。,2.1 HTML概述,2.1.4 常用HTML编辑工具 使用记事本等编辑器在保存文档或者更改文件名时，把文件的扩展名设为.htm或者.html即可，那么这个文件就是一个HTML文档。 为了使设计网页更加的方便，很多公司设计了专用的网页编辑器，像Dreamweaver、FrontPage、CutePag

3、e、QuickSite等，是专门用来制作网页的，具有所见即所得的功能。,2.2 HTML文本设计,2.2.1 设置的属性 属性概述： background属性（设置网页的背景图片） bgcolor 属性（设置网页的背景颜色） bgproperties属性（设置背景是否随滚动条滚动） link属性（设置尚未被访问过的超文本链接的颜色） vlink属性（设置已被访问过的超文本链接的颜色） alink属性（设置超文本链接在被单击瞬间的颜色） Leftmargin，topmargin属性（设置网页左和上边的空白） Margingwidth，marginheight属性（设置网页空白的宽度和高度）,2.

4、2 HTML文本设计,2.2.2 段落格式化 1. 标题标记 格式： ， 设置各种大小不同标题的标记。（例2-2） 2段落标记 格式：设置段落标记。 3预定格式标记 格式：在浏览器中浏览时，按照文档中预先排好的形式显示内容。（例2-3）,2.2 HTML文本设计,4分区显示标记 格式：分区显示标记。 Align属性设置标记属性。（例2-4） 5词标记 格式： 功能：强制换行。 格式： 功能：插入水平线标记。 （例2-5） 6注释标记 格式：注释标记。 （例2-6）,2.2 HTML文本设计,2.2.3 建立列表 在网页中经常使用的列表分为：有序列表和无序列表。由带有序号标志（如数字、字母等）的

5、表项组成有序列表。否则就为无序列表。 1. 有序列表 格式： 功能：建立有序列表。,2.2 HTML文本设计,2. 无序列表 格式： 功能：建立无序列表。,2.2 HTML文本设计,3. 自定义列表 格式： 注意：根据文档的具体要求，列表可以嵌套使用。 （例2-7）,2.2 HTML文本设计,2.2.4 字符格式化 1字体设置标记 格式： 功能：设置字体格式标记。 size=size：设置文字的大小。数字的范围为17，取1时最小，取7时最大，默认的数值为3。face=fontstyle：设置字体，如宋体、黑体、隶书等。 color=colorvalue：设置文字的颜色。 （例2-8）,2.2

6、HTML文本设计,2其他标记 （例2-9,例2-91,例2-92 ）,2.3 加入多媒体与超级链接,2.3.1 加入图像、视频、动画 格式： 功能：在网页中加入图像、视频、动画等。 1插入图像 图像在网页设计中是必不可少的，所以用户应掌握在网页中操作图像的方法。 （例2-10）,2.3 加入多媒体与超级链接,2.3 加入多媒体与超级链接,2插入视频 使用插入视频或动画时，含有的属性如下表：（RMVB.HTML）,2.3 加入多媒体与超级链接,2.3.2 加入超级链接 格式： 功能：在当前页和其他内容间建立超链接。 （例2-11）,2.4 制作表格,2.4.1 建立表格 ,2.4 制作表格,2.

7、4.1 建立表格 创建表格是规划页面最常用的方法。 格式： 功能：创建表格进行页面设计。 在浏览器中显示时，表格的整体外观由标记的属性决定 。,2.4 制作表格,2.4 制作表格,2.4.2 定制表格 只是空表格，还需要定义行和单元格。 格式： 功能：定义表格的一行。 格式： 功能：定义表格的表头。 格式： 功能：定义表格中的单元格。 格式： 功能：定义表格标题，显示在表格上方。 （例2-12）,2.5 制作表单,2.5.1 表单的结构 格式：定义表单。(例2-13) 在WEB网页上包含各式各样的输入表单，它们的组成元素基本相同，通过表单可以完成用户和计算机或服务器之间进行的信息交换。,2.5

8、 制作表单,2.5.2 FORM中常用的标记 1输入域 （1）单行输入域 功能：单一标记，主要用来设计表单中提供给用户的输入形式。 主要分为以下几种类型： 1）text单行文本框 2）password密码域 3）radio单选按钮 4）checkbox复选框 5）submit提交按钮 6）reset重置按钮 7）hidden隐藏域 8) image图像发送按钮 9) Button一般按钮,Input标记属性值,2.5 制作表单,2.5.2 FORM中常用的标记 1）text单行文本框 这是TYPE默认类型。如果输入类型为TEXT，则其他属性的含义如下： Name:将输入值传给CGI程序时与输入

9、值相对应的名称。 Size:输入窗口的长度，默认值为20，以字节为单位。 Value:设定预先在窗口显示的信息。 Maxlength：限制最多输入的字节数。,2.5 制作表单,2.5.2 FORM中常用的标记 2）PASSWORD密码域 这种类型同TEXT类型的使用相似。不同在于输入时不显示输入内容，而以“*”回显。其他属性的含义如下： Name:将输入值传给CGI程序时与输入值相对应的名称。 Size:输入窗口的长度，默认值为20，以字节为单位。 Value:设定预先在窗口显示的信息。 Maxlength：限制最多输入的字节数。,2.5 制作表单,2.5.2 FORM中常用的标记 3）RAD

10、IO单选按钮 这种类型为用户提供单选按钮进行选择，只能在多个选项中选择一项。由于选择是唯一的，因此属性name取相同的值，但属性value的值各不相同。其他属性的含义如下： Name:将输入值传给CGI程序时与输入值相对应的名称。 Value:每个选项对应的值。 checked：指明是否被用户选中。,2.5 制作表单,2.5.2 FORM中常用的标记 4）CHECKBOX复选框 这种类型为用户提供复选框进行选择，在多个选项中可以选择一项或者多项。由于每一项都可以被选择，属性name取相同的值，但属性value的值各不相同。其他属性的含义如下： Name:将输入值传给CGI程序时与输入值相对应的

11、名称。 Value:每个选项对应的值。 checked：指明是否被用户选中。,2.5 制作表单,2.5.2 FORM中常用的标记 5）SUBMIT提交按钮 这种类型在浏览器中产生一个提交按钮，当用户用鼠标单击这个按钮后，用户的输入信息即被传送到服务器。对于一个完整的表单，提交按钮是必不可少的。使用SUBMIT时只有属性name和属性Value。其属性的含义如下： Name:将输入值传给CGI程序时与输入值相对应的名称。 Value:每个选项对应的值。,2.5 制作表单,2.5.2 FORM中常用的标记 6）RESET重置按钮 这种类型在浏览器中产生一个重置按钮，当用户用鼠标单击这个按钮后，用户

12、的输入信息全部被清楚，以便用户重新输入。同SUBMIT一样，reset类型只有属性name和属性Value。其属性的含义如下： Name:将输入值传给CGI程序时与输入值相对应的名称。 Value:每个选项对应的值。,2.5 制作表单,2.5.2 FORM中常用的标记 7）Hidden隐藏域 这种类型将Input标记的区域隐藏起来，使之不出现在屏幕中，其作用主要是为了处理程序方便，在发送表单时发送几个不需要用户填写但是程序又需要的数据。,2.5 制作表单,（2）多行输入域标记 定于多行文本输入域（许多浏览器限制文本域中的内容不得超过32KB或者64KB）,2.5 制作表单,2按钮 格式： 功能

13、：定义按钮。,2.5 制作表单,3选择域 格式： 选项一 选项二 功能：定义选择栏。（类似于下拉列表框）,2.6 框架结构,2.6.1 框架结构的文件格式 注意：在老版本的浏览器 可能不支持框架结构。 ,2.6 框架结构,2.6.2 框架结构标记的使用 格式：,2.6 框架结构,2.6.3 FRAME标记 (例2-14),2.6 框架结构,TARGET属性三种常见的用法： 1用于A标记 2用于BASE标记 BASE TARGET= =“WINDOWS_NAME” 3用于FORM标记 ,2.7 CSS基础,2.7.1 CSS样式简介 CSS（Cascading Style Sheets，层叠样式

14、表），又称格式页，它定义很多样式定义方式来辅助HTML。 (例2-15) 使用CSS可以更加精确地控制网页的布局，当很多网页使用同一种标记时，只需要修改一个.CSS文件就可以更改多个网页的外观和格式。 通过CSS可以控制任何HTML标记的样式，如,等，但是有些浏览器不支持CSS，所以要将中间的文字使用括起来，这样当遇到不支持CSS的浏览器时，不会将其中的代码显示出来。,2.7.2 CSS样式表的定义 1通过HTML标记定义 (例2-16) 可以定义任何一个HTML标记，定义时在属性和属性值之间用“：”隔开，当有多重属性时，使用“；”进行分隔。 2用id属性定义样式表 (例2-17) 尽管任何一

15、个HTML标记都可以用来定义相应的样式表，但是对于标记进行定义显得很复杂，而且不灵活，于是引入两个HTML标记的属性id(标识符)和class（类）来定义样式表。 Id以“#”开头，再把标准的属性和属性值写入大括号内。 如果在网页中不使用JavaScript语言，Id属性标记要少用，一位它具有一定的局限性。 3使用class定义样式表 (例2-17) 使用CLASS的方法和id方法基本相同。 Class以“.”开头，把标准的属性和属性值写入大括号内。,2.7 CSS基础,2.7 CSS基础,2.7.3 在HTML中加入CSS的方法 1嵌入式样式表 这种方法只需要在用用样式的HTML标记内书写上CSS属性就可以了，主要用于对具体的标记做特定的调整，作用范围仅限于本标记内，要少用。使用方法如下： 2内联式样式表 这种方法把定义CSS样式的语句放在HTML文件的部分,在网页中使用时,在规定样式的HTML标记中用id=“”或class=“”属性来引用，作用范围是当前页。 3外联式样式表 这种方式把样式定义成一个.CSS文件，再链接到网页中。 4输入式样式表,2.7 CSS基础,2.7.3 在HTML中加入CSS的方法 3外联式样式表 这种方式把样式定义成一个.CSS文件，再链接到网页中。.CSS文件的应