《Dreamweaver制作网页设计制作全程教程.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver制作网页设计制作全程教程.ppt（107页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML第一讲第一讲主讲：吴涛主讲：吴涛硅谷动力网络学院硅谷动力网络学院专业铸造品质专业铸造品质 知识成就未来知识成就未来-硅谷动力网络学院硅谷动力网络学院作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系HTML概念概念HTML（Hyper Text Markup Language 超文本标识语言）超文本标识语言）是一种用来制作超文本文档的是一种用来制作超文本文档的简单标记语言。简单标记语言。用用HTML编写的超文本文档称编写的超文本文档称为为HTML文档。文档。HTML文档的编写方法文档的编写方法1.手工直接编写手工直接编写记事本等，存成记事本
2、等，存成.htm.html格格式式2.使用可视化使用可视化HTML编编 辑辑 器器Frontpage、Dreamweaver等等3.由由Web 服务器（服务器（或称或称HTTP 服服务器）务器）一一 方实时动态地生成。方实时动态地生成。网页文件命名网页文件命名1.*.htm或或*.html2.无空格无空格3.无特殊符号（例如无特殊符号（例如&符号），只符号），只可以有下划线可以有下划线“_”，只可以为，只可以为英文、数字英文、数字4.区分大小写区分大小写5.首页文件名默认为：首页文件名默认为：index.htm 或或 index.htmlHTML 文件结构文件结构.元素：是元素：是HTML语言
3、的基本部分。语言的基本部分。元素总是成对出现，每一对元素一元素总是成对出现，每一对元素一般都有一个开始的标记（如般都有一个开始的标记（如），也有一个结束的标记），也有一个结束的标记（如（如）。元素的标记要用）。元素的标记要用一对尖括号括起来，并且结束的标一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。记总是在开始的标记前加一个斜杠。HTML 文件结构文件结构(Document Structures)HTML HTML 文件的正文文件的正文 第一张网页（第一张网页（01.htm）my first page This is my first homepage!基本组成部分基本组成部分
4、HTML元素属性元素属性HTML元素可以有自己的相关属元素可以有自己的相关属性，每一个属性还可以由我们网页性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现编制者赋一定的值。元素属性出现在元素的在元素的内内，并且和元素名之，并且和元素名之间有间有一个空格一个空格分隔；属性值用分隔；属性值用“”引起来。引起来。第二张网页（第二张网页（02.htm）my first page This is my first homepage!HTML基本结构的基本结构的有关元素和元素属性有关元素和元素属性HEAD元素元素1 元素出现在文档的开头部元素出现在文档的开头部分。分。与与之间的内容之间的内容不
5、会在浏览器的文档窗口显示，但不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。是其间的元素有特殊重要的意义。元素定义元素定义HTML文档的标文档的标题。题。与与之间的内容之间的内容将显示在浏览器窗口的标题栏。将显示在浏览器窗口的标题栏。HTML基本结构的基本结构的有关元素和元素属性有关元素和元素属性HEAD元素元素2元素元素 元素下面可以插入很多很元素下面可以插入很多很有用的元素属性。下面介绍四种：有用的元素属性。下面介绍四种：用来标记搜索引擎在搜索你的页用来标记搜索引擎在搜索你的页面时所取出的关键词。面时所取出的关键词。HTML基本结构的基本结构的有关元素和元素属性有关元素和元素属
6、性HEAD元素元素3元素元素 用来标记文档的作者。用来标记文档的作者。HTML基本结构的基本结构的有关元素和元素属性有关元素和元素属性HEAD元素元素4元素元素 用来标记你的页面的解码方式。用来标记你的页面的解码方式。HTML基本结构的基本结构的有关元素和元素属性有关元素和元素属性HEAD元素元素5元素元素 用来自动刷新网页用来自动刷新网页练习（练习（03.htm）编写一个网页，要求编写一个网页，要求3秒钟后自动跳转到硅谷动秒钟后自动跳转到硅谷动力学院的网站。力学院的网站。my first page 三秒钟后本网页将自动跳转三秒钟后本网页将自动跳转到硅谷动力网络学院首页到硅谷动力网络学院首页
7、元素及元素属性元素及元素属性1元素表明是元素表明是HTML文档的文档的主体部分。在主体部分。在与与之之间，通常都会有很多其它元素；这间，通常都会有很多其它元素；这些元素和元素属性构成些元素和元素属性构成HTML文文档的主体部分。档的主体部分。元素及元素属性元素及元素属性2元素中有下列元素属性：元素中有下列元素属性：(1)bgcolorbgcolor属性标志属性标志HTML文档的背文档的背景颜色。如：景颜色。如：bgcolor=#CCFFCC。例：例：04.htmHTML对颜色的控制对颜色的控制HTML对颜色的控制也有自己的对颜色的控制也有自己的语法。语法。HTML使用使用16进制的进制的RGB
8、颜色值对颜色进行控制。颜色值对颜色进行控制。16 进制的数码有进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.颜色颜色颜色名和颜色名和RGB值值黑色黑色Black=”#000000”银色银色Silver=”#c0c0c0”红色红色Red=”#ff0000”蓝色蓝色Blue=”#0000ff”白色白色White=”#ffffff”黄色黄色Yellow=”ffff00”绿色绿色Green=”#00ff00”海蓝色海蓝色Aqua=”#00ffff”常见颜色的代码常见颜色的代码元素及元素属性元素及元素属性3元素中有下列元素属性：元素中有下列元素属性：(2)backgrou
9、ndbackground属性标志属性标志HTML文档文档的背景图片。如：的背景图片。如：background=“images/bg.gif。可以使用的图片格式为可以使用的图片格式为GIF，JPG例：例：05.htm、06.htm元素及元素属性元素及元素属性4元素中有下列元素属性：元素中有下列元素属性：(3)bgproperties=fixedbgproperties=fixed使背景图片成使背景图片成水印效果，即图片不随着滚动条水印效果，即图片不随着滚动条的滚动而滚动。的滚动而滚动。例：例：07.htm和和08.htm对比对比元素及元素属性元素及元素属性5元素中有下列元素属性：元素中有下列元素
10、属性：(4)texttext属性标志属性标志HTML文档的正文文文档的正文文字颜色。如：字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇元素定义的颜色将应用于整篇文档。文档。例：例：09.htm元素及元素属性元素及元素属性6元素中有下列元素属性：元素中有下列元素属性：(5)超级链接颜色超级链接颜色link、vlink、alink分别控制普通分别控制普通超级链接、访问过的超级链接、超级链接、访问过的超级链接、当前活动超级链接颜色。当前活动超级链接颜色。例：例：10.htm元素及元素属性元素及元素属性7元素中有下列元素属性：元素中有下列元素属性：(6)leftmargi
11、n和和topmargin设置网页主体内容距离网页顶端设置网页主体内容距离网页顶端和左端的距离如：和左端的距离如：leftmargin=20 topmargin=30“例：例：11.htmHTML第二讲第二讲主讲：吴涛主讲：吴涛专业铸造品质专业铸造品质 知识成就未来知识成就未来-硅谷动力网络学院硅谷动力网络学院硅谷动力网络学院硅谷动力网络学院作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系文字标签属性文字标签属性1文字属性标记文字属性标记1.文字颜色文字颜色 指定颜色指定颜色 .#=RRGGBB 16 进制数码进制数码例：例：01.htm文字标签属
12、性文字标签属性2文字属性标记文字属性标记2.文字字体文字字体.#=客户端可获得的字体客户端可获得的字体02.htm文字标签属性文字标签属性3文字属性标记文字属性标记3.文字大小文字大小.#=1,2,3,4,5,6,7 or+#,-#例：例：03.htm文字标签属性文字标签属性4文字属性标记文字属性标记4.文字标题文字标题.#=1,2,3,4,5,6例：例：04.htm文字布局行的控制行的控制 段段(Paragraph)(可以看作是空行可以看作是空行)空白占位符空白占位符 例：例：05.htm文字布局行的控制行的控制 HTML的段落与段落之间有一定的空隔。的段落与段落之间有一定的空隔。
13、如果不希望出现空隔而只想换行的话，如果不希望出现空隔而只想换行的话，就要用到另一个元素，即就要用到另一个元素，即元素。元素。元素可以使所在的位置出现换行。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类这种换行和浏览器的自动换行的效果类似。似。元素不是成对出现的。元素不是成对出现的。例：例：06.htm不换行不换行 07.htmHTML文字与段落格式控制 倾斜文本倾斜文本 粗体文本粗体文本 下划线文本下划线文本 删除线文本删除线文本 例：例：08.htm、09.htm、10.htm、11.htm(综合练习综合练习)基本组成部分基本组成部分HTML注释注释HTML文档可以插入注释
14、。注释文档可以插入注释。注释内容不会在浏览器窗口显示内容不会在浏览器窗口显示HTML注释的格式为：注释的格式为：例：例：12.htm文字的对齐文字的对齐.(n=1,2,3,4,5,6).(#=left,center,right)例：例：13.htm文字的分区显示文字的分区显示.(#=left,center,right)例：例：14.htm3.HTML段落与分行控制段落与分行控制居中居中-元素元素元素是一个独立的使所元素是一个独立的使所标记的字符居中的元素。它的标记的字符居中的元素。它的作用与使用作用与使用元素里的元素里的align=“center”类似类似例如：例如：居中段落居中段落15.ht
15、m3.HTML段落与分行控制段落与分行控制标尺线标尺线：设定线宽：设定线宽：设定线长：设定线长：设定对齐方式：设定对齐方式#=left,right ：设定线的颜色：设定线的颜色例：例：16.htm3.HTML的段落与分行控制的段落与分行控制无序列表元素无序列表元素1列表在列表在HTML的文档里有重要的的文档里有重要的地位地位,HTML规定了多种列表元素。规定了多种列表元素。列表所起的主要作用是使特定的文列表所起的主要作用是使特定的文本有序化。本有序化。3.HTML的段落与分行控制的段落与分行控制无序列表元素无序列表元素2无序列表是由无序列表是由和和元素定义的元素定义的:sports food
16、drink friends 例：例：17.htm3.HTML的段落与分行控制的段落与分行控制无序列表元素无序列表元素3无序列表的默认符号是圆点。无序列表的默认符号是圆点。元素有元素有type属性，通过定属性，通过定义不同的义不同的type属性可以改变列表属性可以改变列表的项目符号。目前，的项目符号。目前，type属性的属性的属性值有：属性值有：disc(圆圆)、circle（圆圈）、（圆圈）、square（方块）（方块）例：例：18.htm3.HTML的段落与分行控制的段落与分行控制有序列表元素有序列表元素1有序列表由有序列表由和和定义定义:sports drink friends例：例：17
17、.htm3.HTML的段落与分行控制的段落与分行控制有序列表元素有序列表元素2元素也有自己的元素也有自己的type属性属性，type属属性的属性值有性的属性值有1、A、a、I、i等。例如，等。例如，我们以我们以A、B、C作为列表的编号作为列表的编号例：例：19.htm元素还可以定义列表的起始编号，元素还可以定义列表的起始编号，如我们希望列表的第一个编号为如我们希望列表的第一个编号为5，而不是而不是1，则需要定义，则需要定义元素的元素的start属性属性例：例：20.htm4.超级链接超级链接普通超级链接普通超级链接1超级链接是整个超级链接是整个WWW应用的核心应用的核心和基础。如果没有超级链接
18、的概念，和基础。如果没有超级链接的概念，那么，我们现在所有的那么，我们现在所有的WWW的应的应用将不复存在。所以，对超级链接用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。的掌握具有特殊重要的意义。4.超级链接超级链接普通超级链接普通超级链接2超级链接是用锚元素超级链接是用锚元素定义的定义的 在在元素下，有元素属性元素下，有元素属性href,href的属性值为一个的属性值为一个URL地址地址如：如：指向学院的超级链接指向学院的超级链接 如：如：普通超级普通超级链接链接例：例：21.htm4.超级链接超级链接E-mail超级链接超级链接 超级链接可以指向超级链接可以指向E-mail地址地
19、址如：如：指向指向E-mail地址的超级链地址的超级链接接例：例：22.htm4.超级链接超级链接新开链接窗口新开链接窗口开一个新的开一个新的(浏览器浏览器)窗口窗口(Target Window).例：例：26.htm4.超级链接超级链接去除下划线去除下划线去掉超级连接的下划线：去掉超级连接的下划线：style=“text-decoration:none”例：例：25.htm4.超级链接超级链接其他超级链接其他超级链接 WWW应用仅仅是应用仅仅是Internet应用的应用的一种一种,Internet还有其他很多应用，还有其他很多应用，如：如：Ftp等。实际上等。实际上mailto也属于也属于非
20、非WWW应用。我们可以类似的创应用。我们可以类似的创建指向建指向Ftp等的超级链接等的超级链接;指向其他指向其他Internet应用的超级链接应用的超级链接不是我们掌握的重点。不是我们掌握的重点。4.超级链接超级链接锚点锚点(书签书签)1 指向本页面锚点指向本页面锚点aa的超级链接的超级链接例：例：23.htm指向指向23页页面的锚点面的锚点top的超级链接的超级链接例：例：24.htm练习：手写代码实现练习：手写代码实现链接（新开窗口与链接（新开窗口与Email）、背景、）、背景、文字颜色、字体、换行、页面标题。文字颜色、字体、换行、页面标题。练习：练习：27.htmHTML对图片的控制对图
21、片的控制-1基本语法基本语法:引用图片必须用引用图片必须用元素标志。元素标志。元素下的基本元素属性是元素下的基本元素属性是src属属性，性，src的属性值为所引用的图片的的属性值为所引用的图片的URL地址。地址。src属性是必须的。属性是必须的。Src的的URL可以是可以是绝对地址绝对地址，也可以是，也可以是相对地址相对地址例：例：28.htmHTML对图片的控制对图片的控制-2所谓图片的替代文本，指图片不能所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显文本或当鼠标移到图片上时也会显示替代文本。示替代文本。定义图片替代文
22、本的方法是：定义图片替代文本的方法是：例：例：28.htmHTML对图片的控制对图片的控制-3图片的显示大小图片的显示大小我们可以指定一幅图片在浏览器窗口里我们可以指定一幅图片在浏览器窗口里的显示大小。的显示大小。定义图片的显示大小的方法是：定义图片的显示大小的方法是：width指定图片的宽度，指定图片的宽度，height指定高指定高度。它们的度。它们的属性值可以是象素，也可属性值可以是象素，也可以是以是%。例：例：29.htmHTML对图片的控制对图片的控制-4图片的边框图片的边框我们可以为一幅图片加一个边我们可以为一幅图片加一个边框以突出显示：框以突出显示：border的属性值为象素数的属
23、性值为象素数例：例：30.htmHTML对图片的控制对图片的控制-5图片的对齐方式图片的对齐方式图片可以相对于页面或单元格有一个对图片可以相对于页面或单元格有一个对齐方式。齐方式。定义水平对齐方式的方法是：定义水平对齐方式的方法是：例：例：31.htm31.htmHTML对图片的控制对图片的控制-6图片的对齐方式图片的对齐方式定义图片的垂直对齐方式：定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。但是以上的几种是最常用的。例：例：32.htmHTML对图片的控制对图片的控制-7定义图片与左、右的文本之间的间距定义图片与左、右
24、的文本之间的间距图片在显示时，与左右的文本之间可图片在显示时，与左右的文本之间可以有一定的间距以有一定的间距 Hspace(horizontal)定义定义水平间距水平间距；Vspace(vertical)定义定义垂直间距垂直间距。单位。单位都是象素数都是象素数.例：例：33.htmHTML对图片的控制对图片的控制-8图象的超级链接图象的超级链接 图象的超级链接是指整个图象的超级图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级会打开这个超级链接。定义默认超级链接的方法是：链接的方法是：所以，所谓超级链接实际上就是用所
25、以，所谓超级链接实际上就是用元素标志一个图象的引用元素标志一个图象的引用;例：例：34.htmHTML对图片的控制对图片的控制-9图象映射图象映射所谓图象映射是指一个图片上的所谓图象映射是指一个图片上的不同位置被指定了不同的超级不同位置被指定了不同的超级链接；点击图片的不同位置会链接；点击图片的不同位置会打开不同的超级链接目标。这打开不同的超级链接目标。这与前面的默认超级链把整个图与前面的默认超级链把整个图片作为超级链接的元素是很不片作为超级链接的元素是很不一样的。一样的。HTML对图片的控制对图片的控制-10图象映射（只要求理解标记含义）图象映射（只要求理解标记含义）图象映射由图象映射由定义
26、。定义。有一有一个个基本属性基本属性是是name。Name给图象映给图象映射命名，这个命名将会被射命名，这个命名将会被元素元素用用usemap属性引用。所以，图象上属性引用。所以，图象上的图象映射实际上是对的图象映射实际上是对定义的定义的映射的一个引用。映射的一个引用。在定义图象映射时，可以定义在定义图象映射时，可以定义三种形状的映射：三种形状的映射：circle(圆形圆形)、rect(矩形矩形rectangle)、poly(多边形多边形)HTML对图片的控制对图片的控制-11图象映射实例（图象映射实例（35.htm）HTML第三讲第三讲主讲：吴涛主讲：吴涛专业铸造品质专业铸造品质 知识成就未
27、来知识成就未来-硅谷动力网络学院硅谷动力网络学院硅谷动力网络学院硅谷动力网络学院作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系一月一月二月二月三月三月120010001500单元格（用单元格（用来表来表示，每个单示，每个单元格可以有元格可以有背景颜色和背景颜色和背景图片）背景图片）表格（用表格（用来表来表示，表格可以有背景颜示，表格可以有背景颜色、背景图片）色、背景图片）表格边框表格边框每一行可以用每一行可以用来表示，来表示，单元格放在行单元格放在行中，每行可以中，每行可以有很多的单元有很多的单元格。格。表头（用表头（用来来表示，表头是特表示，
28、表头是特殊的单元格，其殊的单元格，其中的文字加进去中的文字加进去之后默认是居中之后默认是居中并且加粗）并且加粗）表格表格(TABLE)标记标记-1 元素：定义一个表格。每一个表元素：定义一个表格。每一个表格只有一对格只有一对和和，一张页，一张页面中可以有多个表格。面中可以有多个表格。元素：定义表格的行，一个表格可元素：定义表格的行，一个表格可以有多行，所以以有多行，所以对于一个表格来说对于一个表格来说不是唯一的。不是唯一的。元素：定义表格的一个单元格。每元素：定义表格的一个单元格。每行可以有不同数量的单元格，在行可以有不同数量的单元格，在和和之间是单元格的具体内容。之间是单元格的具体内容。需要
29、注意的是：上述的需要注意的是：上述的三个元素必须、三个元素必须、而且只能够配对使用而且只能够配对使用。缺少任何一个元。缺少任何一个元素，都无法定义出一个表格。素，都无法定义出一个表格。表格表格(TABLE)标记标记-2表格的基本结构表格的基本结构定义表格定义表格定义表头定义表头定义表行定义表行定义单元格定义单元格例：例：02.htm表格表格(TABLE)标记标记-3表格的属性表格的属性 1width属性：指定表格或某一属性：指定表格或某一个表格单元格的宽度。单位可个表格单元格的宽度。单位可以是以是%或者象素。或者象素。height属性：指定表格或某一属性：指定表格或某一个表格单元格的高度。单位
30、可个表格单元格的高度。单位可以是以是%或者象素。或者象素。border属性：表格边线粗细属性：表格边线粗细例例03.htm、04.htm、05.htm表格表格(TABLE)标记标记-2表格的属性表格的属性 14、bgcolor属性：指定表格或某属性：指定表格或某一个单元格的背景颜色。一个单元格的背景颜色。5、background属性：指定表格属性：指定表格或某一个单元格的背景图片。或某一个单元格的背景图片。其属性值为一个其属性值为一个URL地址。地址。例：例：07.htm表格表格(TABLE)标记标记-3表格的属性表格的属性 26、bordercolor属性：指定表格属性：指定表格或某一个单元
31、格的边框颜色。或某一个单元格的边框颜色。例：例：08.htm7、Bordercolorlight属性：亮边属性：亮边框的颜色框的颜色8、Bordercolordark属性：暗边属性：暗边框的颜色框的颜色例：例：09.htm表格表格(TABLE)标记标记-3表格的属性表格的属性 29、align属性：指定表格或某属性：指定表格或某一个单元格里的内容（文本、一个单元格里的内容（文本、图片等）的对齐方式。图片等）的对齐方式。例：例：10.htm表格表格(TABLE)标记标记-3表格的属性表格的属性 210、cellspacing属性：单元格间属性：单元格间距。距。例：例：11.htm11、cellp
32、adding属性：单元格边属性：单元格边距。距。例：例：12.htm表格表格(TABLE)标记标记-4单元格属性单元格属性1、valign属性：指定某一个单元格里属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：方式。垂直对齐方式的属性值包括：top：顶端对齐；：顶端对齐；middle：居中对齐；：居中对齐；bottom：底端对齐：底端对齐;Baseline：相对于基线对齐：相对于基线对齐;例：例：13.htm表格表格(TABLE)标记标记-5单元格属性单元格属性2、Colspan：属性值表示当前单：属性值表示当前单元格跨越
33、几列元格跨越几列例：例：14.htm3、Rowspan：属性值表示当前单：属性值表示当前单元格跨越几行元格跨越几行例：例：16.htm表格表格(TABLE)标记标记-6行属性行属性1、valign属性：指定某一个单元属性：指定某一个单元格里的内容（文本、图片等）格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方的垂直对齐方式。垂直对齐方式的属性值包式的属性值包top：顶端对齐；：顶端对齐；middle：居中对齐；：居中对齐；bottom：底端对齐。：底端对齐。Baseline：相对于基线对齐。：相对于基线对齐。表格表格(TABLE)标记标记-7行属性行属性2、align属性：指定表格或某一个
34、属性：指定表格或某一个单元格里的内容（文本、图片单元格里的内容（文本、图片等）的对齐方式等）的对齐方式3、height属性：指定表格或某一属性：指定表格或某一个表格单元格的高度。单位可个表格单元格的高度。单位可以是以是%或者象素或者象素表格进阶表格进阶表格的嵌套表格的嵌套在在 之间插入表格，实之间插入表格，实现表格嵌套现表格嵌套例：例：17.htm表格的作用一般只是控制文本表格的作用一般只是控制文本和图像的显示，而和图像的显示，而不显示表格不显示表格的边框的边框例：例：18.htm综合案例综合案例表格的综合使用表格的综合使用例：例：19.htm表单表单(FORM)标记标记HTML表单是表单是H
35、TML页面与浏览页面与浏览器端实现交互的重要手段。利用表器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。单可以收集客户端提交的有关信息。在在HTML里，我们可以定义表单，里，我们可以定义表单，并且使表单与并且使表单与CGI或或ASP等服务器等服务器端的表单处理程序配合。我们在网端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。页设计课程中不会涉及程序编制。表单表单(FORM)标记标记表单是网页上的一个特定区域。这表单是网页上的一个特定区域。这个区域是由一对个区域是由一对元素定义元素定义的。的。元素元素action属性属性：用来定义表单处理：用来定义表单处理程序（一个程序
36、（一个ASP、CGI等程序）等程序）的位置的位置(相对地址或绝对地址相对地址或绝对地址)。Method定义表单结果从浏览器定义表单结果从浏览器传送到服务器的方法，一般有传送到服务器的方法，一般有两种方法：两种方法：get、post。表单表单(FORM)标记标记表单的基本语法表单的基本语法:.*=GET有数据量限制，有数据量限制，POST无以上限制无以上限制,以文件形以文件形式传输式传输例：例：22.htm表单表单(FORM)标记标记2.文本框文本框?文本框的名字文本框的名字*text,password*默认值默认值*长度长度?最大输入字符数最大输入字符数例例20.htm表单表单(FORM)标记
37、标记3.文本域文本域.例：例：20.htm表单表单(FORM)标记标记4.按钮按钮包括普通按钮、重置按钮和提包括普通按钮、重置按钮和提交按钮交按钮例：例：21.htm表单表单(FORM)标记标记5.复选框复选框(Checkbox)在一个表单里的所有多选框可在一个表单里的所有多选框可以有一个或多个被选中。以有一个或多个被选中。例例25.htm表单表单(FORM)标记标记6.单选框单选框(RadioButton)一个表单里的所有变量名相同的单选一个表单里的所有变量名相同的单选框只能够有一个被选中。框只能够有一个被选中。各个选项的各个选项的name必须一样必须一样才能达到才能达到预期效果预期效果例：
38、例：26.htm注意注意262.htm的写法是错误的的写法是错误的表单表单(FORM)标记标记7.下拉列表下拉列表基本语法基本语法说明说明说明说明2 例：例：28.htm表单表单(FORM)标记标记7.下拉列表下拉列表（2）列表框的长度）列表框的长度（3）允许多选）允许多选例：例：29.htm、30.htm表单表单(FORM)标记标记8.图象域图象域例：例：image.htm表单表单(FORM)标记标记综合练习（综合练习（*）实现留言簿实现留言簿要求：背景、文字颜色、字体、要求：背景、文字颜色、字体、换行、页面标题、表单文本框、换行、页面标题、表单文本框、文本域、单选框、复选框、下文本域、单选
39、框、复选框、下拉列表、图象域、提交与取消拉列表、图象域、提交与取消按钮，内容以按钮，内容以mail形式提交。形式提交。HTML第四讲第四讲主讲主讲:吴涛吴涛专业铸造品质专业铸造品质 知识成就未来知识成就未来-硅谷动力网络学院硅谷动力网络学院硅谷动力网络学院硅谷动力网络学院作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系网页中的框架网页中的框架制作框架页面的步骤：制作框架页面的步骤：1.编写所有子框架页面编写所有子框架页面2.编写主框架页面编写主框架页面3.在主框架页面中设定子框架名称在主框架页面中设定子框架名称4.如果框架页面之间存在链接，在子如
40、果框架页面之间存在链接，在子框架中设定链接。框架中设定链接。注意：框架页面是注意：框架页面是不含不含标签标签的的网页中的框架网页中的框架1.基本语法基本语法您的浏览器不支持框架，请考虑升级您的您的浏览器不支持框架，请考虑升级您的浏览器！浏览器！网页中的框架网页中的框架定义框架的基本语法定义框架的基本语法框架由一对框架由一对定义定义有两个属性：有两个属性：rows和和colsRows定义上下分割的框架的大小；定义上下分割的框架的大小；cols定义左右分割的框架的大小；定义左右分割的框架的大小；在定义大小时，在定义大小时，rows和和cols可以使用相可以使用相对大小或以百分比为单位。对大小或以百
41、分比为单位。网页中的框架网页中的框架各窗口的尺寸设置各窗口的尺寸设置 横排多个窗口横排多个窗口 排列方式：排列方式：ABC例：例：02.htm网页中的框架网页中的框架各窗口的尺寸设置各窗口的尺寸设置 纵向排列多个窗口纵向排列多个窗口 排列方式：排列方式：A B C例：例：01.htm网页中的框架网页中的框架COLS&ROWS：纵横排列多个窗口：纵横排列多个窗口 排列方式：排列方式：BAC例：例：14.htm网页中的框架网页中的框架框架边框的颜色框架边框的颜色bordercolor=ff0000“例：例：03.htm各窗口边框的设置各窗口边框的设置 frameborder=#=yes,no/1,
42、0例：例：04.htm框架边框的宽度框架边框的宽度framespacing=10 例：例：04.htm网页中的框架网页中的框架的属性的属性name：定义该框架的名字。这个名：定义该框架的名字。这个名字可以被一些网页元素引用，如被字可以被一些网页元素引用，如被元素引用。元素引用。例：例：06.htm、07.htmSrc：在本框架里显示网页的：在本框架里显示网页的URL。Target：目标框架：目标框架,引用的是目标框架引用的是目标框架的名字。的名字。网页中的框架网页中的框架1.在当前框架中打开超链接页面在当前框架中打开超链接页面默认就是在当前框架页中打开默认就是在当前框架页中打开,也可以采用也可
43、以采用Target=“_self”2.在指定框架中打开超级链接页面在指定框架中打开超级链接页面Target=“name”3.新开窗口打开链接页面新开窗口打开链接页面Target=“_blank”4.跳出整个框架集跳出整个框架集Target=“_parent”网页中的框架网页中的框架的属性的属性Scrolling：是否显示滚动条。：是否显示滚动条。yes,no,auto例：例：08.htm、09.htmNoresize：框架在浏览器里不：框架在浏览器里不可以被调整大小。可以被调整大小。例：例：10.htm、11.htm网页中的框架网页中的框架内含窗口内含窗口.#=初始页面的初始页面的 URL#=
44、框架名称框架名称(Frame Name)例：例：15.htm会移动的文字会移动的文字1.基本语法基本语法.例：例：16.htm2.文字移动属性文字移动属性(1)方向方向：direction=#=left,right,up,down例：例：17.htm会移动的文字会移动的文字2、文字移动属性、文字移动属性(2)方式：方式：behavior=#=scroll(循环循环),slide(只走一次只走一次),alternate(来回走来回走)例：例：18.htm(3)循环循环:loop=#=次数；若未指定则循环不止次数；若未指定则循环不止(infinite)例：例：19.htm会移动的文字会移动的文字2
45、、文字移动属性、文字移动属性(4)速度速度:scrollamount=#例：例：20.htm(5)延时延时:scrolldelay=#例：例：21.htm会移动的文字会移动的文字3、其他属性、其他属性(1)底色底色:bgcolor=#=RRGGBB 16 进制颜色代码进制颜色代码例：例：22.htm(2)面积面积:height=#width=#例：例：23.htm(3)空白空白:hspace=#vspace=#例：例：24.htm多媒体页面多媒体页面用用嵌入多媒体对象嵌入多媒体对象 基本语法基本语法#=URL注：注：1.使用使用 标记之前，需要安装插件才标记之前，需要安装插件才可以；可以；2.
46、对于不同的对于不同的plugin，其，其embed属性也不同。属性也不同。例：例：25.htm(Flash动画动画)例：例：26.htm(rmi音乐文件音乐文件)例：例：27.htm(avi动画动画)例：例：28.htm(mpeg影像文件影像文件)多媒体页面（多媒体页面（*）嵌入背景音乐嵌入背景音乐#=WAV 文件的文件的 URL#=循环数循环数例例29.htm(WAV背景音乐背景音乐)多媒体页面（多媒体页面（*）特殊标记元素特殊标记元素Object元素用来包含图像、动态元素用来包含图像、动态图像、图像、Java小程序。小程序。元素用以替换更具体的元素用以替换更具体的和和元素，以及元素，以及和和元素。元素。例例 30.htm