1、第一讲 HTML概述,网页制作概述,网页的基本构成元素文本 (一般宋体、9磅或12px)图像超链接表格表单动画框架,GIF动画,Flash动画,网页的技术构成HTML:超文本标记语言。CSS:层叠样式表 JavaScript VBScriptJscript,script脚本语言,CGI:是网页具有交互功能的一种工具。PHP:一种服务器端html嵌入式脚本语言。JSP:用java语言作为脚本语言ASP:CFML:一种服务器脚本语言。XML:一种因特网上交换数据的标准。ASP.NET:使用面向对象的方法创建动态web应用程序。,动态网页技术,HTML基础,HTML基本概念WWW:world wid
2、e web简称,是一种建立在Internet上的、全球性的、交互的、多平台的、分布式的信息资源网络。 超文本:包含有链接关系的文本,包含多媒体对象文件。URL:统一资源定位器HTTP:超文本传输协议HTML:超文本标记语言,HTM与SGML SGML:标准一般化标记语言HTML的发展历史HTML的设计原则统一化国际化易于掌握HTML的新特点 表格、合成文档、样式表、脚本语言、打印、易于使用,编写第一个HTML文件,HTML文件的编写方法 手工直接编写(可使用记事本) 使用可视化软件(可使用Frontpage、Dreamweaver等工具) 由web服务器一方实时动态生成 如ASP、PHP等,H
3、TML文件的基本结构html文件开始html文件的头部开始 html文件的头部内容html文件的头部结束html文件的主体开始 html文件的主体内容html文件的主体结束html文件结束,HTML的浏览方式使用浏览器浏览,编写文件的注意事项 “”是任何标记的开始和结束。 标记和标记之间可以嵌套。html文件注意事项 在源代码中不区分大小写。与一样 任何回车和空格在源代码中不起作用。 HTML标记中可以放置各种属性。可用“” 在源代码中添加注 释。,第二讲 HTML的头部标记,学习内容:HTML头部标记 基底文字标记 标题标记 元信息标记 基地网址标记 学习重点:各类头标记的使用方法 总课时:
4、2课时,元信息标记 ,标记:通过属性来定义文件信息的名称、内容等。 标记的属性:http-equiv (生成一个标题域)name (表示关键字)content (关键字/取值的内容),定义编辑工具,基本语法:注明:generator:定义编辑器content:定义编辑器的名称,举例: 定义编辑工具,设定关键字,基本语法:注明: keywords :定义关键字content:定义关键字的内容,举例: 定义关键字,设定描述,基本语法:注明: discription :描述定义content:定义描述的内容,举例: 定义描述,设定作者,基本语法:注明: author :作者定义content:定义描
5、述的内容,举例: 定义作者,设定建立网站的日期,基本语法:注: build :网页建设content:定义建设的时间,举例: 设定建立网站的日期,说明版权,基本语法:注: build :版权content:定义版权信息,举例: 说明版权,记载联系人的邮箱,基本语法:注: reply-to :回复content:定义邮箱地址,举例: 记载联系人的邮箱,限制搜索方式,基本语法:注: robots :定义搜索方式content:定义可以采用的方法,举例: 限制搜索方式,设定字符集,基本语法:例:gb2312 :简体中文BIG5 :繁体中文(台湾计算机界实行的汉字编码字符集)UTF-8 :,举例:设定
6、字符集,设定自动刷新,基本语法:(注:时间以秒记)例: ,举例:页面的自动刷新,设定自动跳转,基本格式:例:,举例: 设定自动跳转,设定转场效果,基本语法:Page-enter:进入网页时的网页过渡效果Page-exit :退出网页时的网页过渡效果过渡效果编号: (课本P35表4-6),例:(水平百叶窗)(盒状收缩),举例: 设定转场效果,设定禁用缓存,基本语法:注: cache-control:缓存控制content:定义禁止缓存,举例: 设定禁用缓存,设定有效期限,基本语法:注:日期格式:“星期,日 月 年 时 分 秒 gmt ”例:,举例: 设定有效期限,第三讲 页面的主体标记,学习内容
7、: HTML主体标记 连接文字颜色属性 文字颜色标记 边距属性 背景属性学习重点: HTML主体标记的使用方法总课时:2课时,文字颜色属性TEXT,基本语法注: color-value 是颜色的值,举例: 设定文本颜色,背景颜色属性bgcolor,基本语法注: color-value 是颜色的值,举例: 设定背景颜色,背景图像属性backgroud,基本语法注: img_file_url 是图片的路径,举例: 设定背景图像,背景图像固定属性bgproperties,基本语法注: fixed是固定图像,举例: 设定固定的背景图像非固定背景图像,链接文字的颜色属性,link:设定链接文字默认的颜色
8、alink:设定激活链接时文字的颜色vlink:设定访问过的链接文字的颜色 基本语法:注:color_value是颜色的值,举例: 设定链接文字的颜色,边距属性,topmargin:设定上边距leftmargin:设定左边距基本语法:注:value一般指像素,举例: 设定边距属性,第四讲 文字与段落,学习内容:文字的内容标题字标记文字的修饰标记字体标记段落标记水平线标记其他文字标记 学习重点:文字与段落标记的使用 总课时:2课时,文字的内容,输入普通的文字(直接输入到与之间)输入空格符号基本语法:  ;举例输入特殊符号(表6-1)如: “ -" &-&,举例: 输入特殊符
9、号,注释语句,基本语法:,举例: 插入注释语句,标题字标记,标题字标记 一级标题 大 二级标题 三级标题 四级标题 五级标题 六级标题 小标题字的对齐属性 align 左对齐 居中对齐 右对齐,文字的修饰标记,文字的修饰标记(表6-4)粗体标记,基本语法: 举例斜体标记, 基本语法: 举例,上标标记 基本语法: 举例 下标标记 基本语法: 举例大字号标记 基本语法: 举例 小字号标记 基本语法: 举例,下划线标记 基本语法:举例删除线标记 , 基本语法:举例地址文字标记 基本语法:举例打字机标记 基本语法:举例,等宽文字标记、基本语法: 举例键盘输入文字标记 基本语法: 举例声明变量标记 基本
10、语法:举例,字体标记,基本语法: 字体标记的属性face:字体 size:字号 color:颜色基本语法:,举例: 设定字体属性,基字属性 basefont基本语法:这个标记用于设定基本的文字属性,对于字号,将受这个属性的影响。,举例: 基字标记,段落标记, 、 含义 :: 段落标记(新建一个段落,相当于 enter): 换行标记 ( 相当于软回车:shift+enter): 不换行标记基本语法: 举例 段落对齐属性 align基本语法: 举例, : 标记中强制换行的标记基本语法:举例:强制换行:预格式化标记(也就是页面中显示的与源代码中的格式完全相同)基本语法:举例:预格式化:居中标记基本语
11、法:举例:居中标记:缩排标记基本语法: 举例:缩排标记,水平线标记, :插入水平线标记:水平线的宽度标记:水平线的高度:水平线的颜色:水平线去掉阴影属性标记:水平线对齐属性基本语法: 注:value1、value2表示像素值或百分比value3 表示颜色名称或十六进制数value4 表示left 、right 或 center举例:插入水平线,其他文字标记,忽视html标签标记的标记:与 基本语法:举例,在文字上方标注说明标记,基本语法:被标示的文字说明文字举例: 886 拜拜啦 ,举例: 设定文字上方标注,第五讲 建立列表,学习内容:列表的标记有序列表无序列表列表的嵌套 学习重点: 列表的相
12、关标记使用总课时:2课时,建立列表,列表有两种类型: 无序列表 有序列表 无序列表: 没有顺序的列表项目,使用 等特殊项目符号. 有序列表: 按照字母或数字等顺序排列的列表项目.: 列表项目标记,有序列表,有序列表标记: 基本语法: 项目1项目22. 举例:有序列表,有序列表的属性标记:、基本语法: 项目1项目2注: value1表示有序列表项目符号的类型(如表7-2)value2表示项目开始的数值 举例,有序列表的类型:1 :数字 1 ,2 ,3a : 字母 a , b , cA : 字母 A , B , Ci : 小写罗马数字 I , ii , iiiI : 大写罗马数字,,无序列表,无序
13、列表标记 基本语法:项目1项目2举例,目录列表标记 基本语法:项目1项目22. 举例,定义列表标记 、基本语法:名词1 解释1名词2 解释2注:表示名词;表示对名词的解释。2. 举例,菜单列表标记 基本语法:项目1项目22. 举例,无序列表的类型属性 基本语法: 项目1项目2举例,无序列表的类型:disc 表示 circle 表示 square 表示 ,列表的嵌套,定义列表的嵌套 基本语法:名词1解释1解释2解释3名词2解释1解释2解释32. 举例,无序及有序列表的嵌套基本语法:项目1 二级项目1二级项目2项目2二级项目1二级项目22. 举例,第六讲 建立超链接,学习内容:超链接的概念连接标记
14、内部链接书签链接外部链接其他链接学习重点:超链接相关标记的使用总课时:2课时,超链接的基本概念,超链接:从一个页面指向另一个目的端的链接。 路径 绝对路径:为文件提供的完全路径,包括适用的协议或盘符。也就是你的主页上的文件或目录在硬盘上真正的完整的路径。 例:http:/ / index.htmd:/ wsp / myweb / images / back.jpg,2. 相对路径:指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。 例:文件1.htm的绝对路径是:d:/wsp/myweb/1.htm文件2.htm的绝对路径是:d:/wsp/myweb/2.htm那么:1.htm相
15、对于2.htm的路径就是:1.htm相对链接的使用方法: 如果链接到同一目录下,则只需输入要链接文档的名称 。 例: 如果链接到下一级目录,则需要先输入目录名,然后加 “ / ”,再输入文件名。 例: 如果连接到上一级目录,则需要先输入”/ “,然后再输入目录名、文件名。例:,3. 根路径: 根目录的相对地址。 根路径的书写方式:以斜杠 “ / ” 开头,然后是文件夹名,再写文件名。例:,内部链接与外部链接 内部链接:链接指向站点文件夹之内的文件。 例: 外部链接:链接指向站点文件夹之外的文件。 例: 链接标记: 链接标记的属性:href : 指定链接地址name : 给链接命名title:给
16、链接提示文字target:指定链接的目标窗口accesskey:链接热键,内部链接,制作内部链接基本语法: 链接文字 举例:返回首页设定链接的目标窗口基本语法:链接文字注:target属性中value的取值: _parent :在上一级窗口中打开。 _blank:在新窗口中打开。 _self:在同一窗口中打开。(默认) _top :在浏览器的整个窗口中打开,忽略任何框架。举例 :返回,举例: 制作内部链接,书签链接,建立书签基本语法:文字举例:李白链接同一页面的书签基本语法:文字举例: 李白链接到其他页面中的书签基本语法:文字举例: 李白,举例: 书签链接(同页面)书签链接(不同页面),外部链
17、接,链接路径应使用绝对路径,即带有协议或盘符的路径。链接到外部网站基本语法:链接文字其中“ http:/ ”表示http站点的“ URL ”举例:,举例: 外部链接,链接到 ftp 基本语法:链接文字其中“ ftp:/ ”表示ftp站点的“ URL ”举例:,举例: 链接到ftp站点,链接到 telnet 基本语法:链接文字其中“ telnet:/ ”表示telnet站点的“ URL ”举例:,举例: 链接到telnet站点,链接到 gopher基本语法:链接文字其中“ gopher:/ ”表示gopher站点的“ URL ”举例,举例: 链接到gopher站点,链接到 news新闻组news
18、新闻组是由分布在世界各地的新闻服务器组成的,是个人向新闻服务器所张贴邮件的集合。基本语法:链接文字其中“ news:/ ”表示news服务器的地址举例,举例: 链接到news新闻组,下载文件基本语法:链接文字其中“ file_url ”表示文件所在的绝对路径。举例,举例: 下载文件,发送E-mail ( 建立e-mail链接 )相关概念:暗送:抄送:基本语法: 链接文字 链接文字 链接文字 链接文字语法解释:subject表示电子主题,CC表示抄送收件人,BCC表示暗送收件人,AB.C表示邮件地址。,联系我 解析:发送邮件给 联系我 解析:发送邮件给,主题是:你好吗 联系我 解析:发送邮件给,
19、抄送给 联系我 解析:发送邮件给,暗送给,举例: 发送文件,其 它 链 接,脚本链接基本语法:链接文字其中“ javascript: ”表示用javascript编写的脚本。举例,举例: 脚本链接,空链接空链接:指指向链接后,鼠标变成手形,但单击后仍停 留在当前页面。 基本语法:链接文字其中“ # ”表示空链接。 举例:我的心情,举例: 空链接,第六讲 插入图片,学习内容:图片的基本格式插入图片插入avi视频文件图片的超链接图像映射 学习重点:图片相关标记的使用 总课时:2课时,相关的基本概念,图片的基本格式: Jpg Gif Bmp,插入图片标记及属性,插入图片标记 图片相关属性 :src:
20、描述图片的路径lowsrc:设定分辩率比较低的图片alt:设定图像的提示文字属性width、height:设定图像的宽度和高度border:设定图片的边框vspace:设定图像的垂直间距hspace:设定图像的水平间距align:设定图像的排列属性,图片的插入标记与属性,插入图片 src基本语法:语法解析:是插入图片的标记src 是描述图片路径的属性“ image_url ”表示图片的路径举例:,举例: 插入图片,插入分辨率比较低的图片 lowsrc 基本语法:语法解析: 是描述图片路径的属性“ image_url ”表示图片的路径举例:,举例: 插入低分辨率图片,设定图片的提示文字 alt
21、基本语法:举例:,举例: 设置图片的提示文字,设定图片的宽度: width设定图片的高度:height 基本语法:其中:宽度和高度的单位都是像素 举例:,举例: 设置图片的宽度和高度,设定图像的垂直间距 vspase设定图像的水平间距 hspase基本语法:2. 举例: ,举例: 设置图片的间距,设定图片的边框 border基本语法:举例:,举例: 设置图片的边框,设定图像的排列属性 基本语法:注:value值如下表所示,表示的是相对文字的对齐方式。2. 举例: ,举例: 设置图片的排列,插入avi视频文件,Avi的源文件属性dynsrc基本语法:举例:,举例: 插入avi视频文件,设定avi
22、文件的循环次数属性Loop基本语法:举例:,举例: 设置avi文件的循环,设定avi文件循环延迟属性Loopdelay基本语法:其中,时间以s为单位。(一般 netscape、IE5.0、5.5、6.0都不支持)举例:,举例: 设置avi文件的循环延迟,设定avi文件播放属性start基本语法:其中,播放方式有:fileopen:网页打开时播放。Mouseover:鼠标滑到avi文件上后播放。举例:,举例: 设置avi文件的播放,图片的超链接,图片的超链接就是在图片上建立链接。和文字的链接相同,就是点击过链接的图片或文字后就会跳到相应的目的地址上。图片的超链接与文字相同都是标记,与文字不同的是
23、,文字的链接只能是一个,而图片不同可以是一个或多个。,基本语法:文字举例:返回,举例: 设置图片的链接,图片的映射,一张图片可以有多个超链接,一幅图片被切分成不同的区域,每一个不同的区域可以链接到不同的地址,这每个区域被称为图像的热区。每一个热区可以有自己的链接地址,浏览者单击图片上的热区后,就会转到相应的链接地址上去。这个过程就称为图像的映射。建立图像映射分两部分:图像链接地址的创建和制作图像映射。,图像链接地址的创建先使用html语言创建出包含有文字链接地址的页面;(一般在页面内建立标签或建立页面间链接),举例: 建立页面的书签链接,制作图片映射使用工具(dreamweaver或front
24、page)制作出图像映射,即创建热区,使用、标记。建立图片的映像说明(使用alt属性标签),标记的属性shape:定义图象映射区域的形状rect表示矩形区域 circle表示椭圆形区域poly表示多边形区域href:定义不同区域的链接地址alt:设定替代的文字,提示文字coords:设定区域坐标,标记的基本语法:例如: ,建立热区的基本语法:,建立热区 举例 :,举例: 制作图片映射,第七讲 表格的使用,学习内容:制作表格表格的结构标记表格的属性标记行标记单元格标记表头标记表格嵌套 学习重点:表格相关标记的使用 总课时:2课时,制作表格,基本格式: ,语法解释:表格标记 :行标记 :单元格标记
25、举例说明,举例:表格,表格的边框属性,border:设置表格的边框。(单位为像素) bordercolor:设置表格的边框颜色。 bordercolorlight:设置表格的左上边框或右下边框的颜色。 bordercolordark:设置表格的右下边框或左上边框的颜色。,基本语法:其中,颜色可以是名称或十六进制数。 举例:,举例:设置边框宽度、颜色及亮暗边框色,Width、 Height :设定表格的宽度、高度Bgcolor:设定表格的背景色Background:设定表格的背景图片 基本语法:举例,表格的其他属性,举例:设置表格的属性,单元格的间距属性cellspacing,Cellspaci
26、ng:设定单元格与单元格之间的距离 基本语法:其中,value的单位是像素。 举例 :,举例:设置单元格的间距,单元格的边距属性cellpadding,Cellpadding:设定单元格边框与内容之间的距离 基本语法:其中,value的单位是像素。 举例:,举例:设置单元格的边距,的其他属性设定,表格的水平对齐 align 基本语法:语法解释:对齐方式有: left :居左right : 居右center :居中 举例: ,举例:设置表格的对齐方式,表格的边框样式属性FRAME,基本语法: 举例:,语法解释:表格的边框样式如下above:显示上边框below:显示下边框border:显示上下左
27、右边框 Box:显示上下左右边框 Hsides:显示上下边框vsides:显示左右边框 Lhs:显示左边框 Rhs:显示右边框 Void:不显示边框,举例:设置表格边框样式,基本语法: 语法解释: 表格的内部边框样式如下All :显示所有边框cols:仅显示列边框 Rows:仅显示行边框 groups:显示介于行列间的边框none:不显示内部边框,表格的内部边框样式属性rules,举例:设置表格内部边框样式,表格的标题与表头,表格的标题,:设置表格的标题,默认的情况下居中对齐。 align:设置表格标题的对齐方式,有三种:left(左对齐 ) right(右对齐 )center(居中) val
28、ign:设置表格标题的垂直对齐方式,即可在表格上方或下方,有两种:top (上方) bottom (下方) 基本语法: 举例 ,举例:设置表格的标题,表格的表头的设置,基本格式: ,举例:设置表格的表头姓名 出生年月 张三 1986.1.5 李四 1987.2.16 ,表格行标记的属性,行标记的属性: bgcolor:设置行的背景色。 bordercolor:设置行的边框颜色。 bordercolorlight:设置行的亮边框颜色。 bordercolordark:设置行的暗变框颜色。 align:设置行内容的对齐方式,有三种:left、center、right。 Valign:设置行的垂直对
29、齐方式,有三种:top(居上)、middle(居中)、bottom(居下)。基本语法:,举例:设置表格行的属性,单元格标记属性,单元格标记的属性设置: bgcolor:设置单元格的背景颜色。 background:设置单元格的背景图片。 bordercolor:设置单元格的边框颜色。 bordercolorlight:设置单元格的亮边框颜色。 bordercolordark:设置单元格的暗边框颜色。 width:设置单元格的宽度。 height:设置单元格的高度。 align:设定单元格内容的水平对齐方式,有三种:right(居右)、 left(居左) 、center(居中)。 Valign:
30、设定单元格的垂直对齐属性,有三种:top(居上)、middle(居中)、bottom(居下)。rowspan:单元格的跨行属性。(垂直方向上)Colspan:单元格的跨列属性。(水平方向上),基本语法:举例 ,举例:设置单元格属性,单元格属性练习,表格的表头标记属性,表头标记的属性设置: bgcolor:设置表头的背景颜色。 background:设置表头的背景图片。 bordercolor: 设置表头的边框颜色。 bordercolorlight:设置表头的亮边框颜色。 bordercolordark:设置表头的暗边框颜色。 width:设置表头的宽度。 height:设置表头的高度。 al
31、ign:设定表头内容的水平对齐方式,有三种:right(居右)、 left(居左) 、center(居中)。 Valign:设定表头的垂直对齐属性,有三种:top(居上)、middle(居中)、bottom(居下)。rowspan:表头的跨行属性。Colspan:表头的跨列属性。,基本语法:举例 ,举例:设置表头,表头属性练习,表格的结构标记,表格的表首标记 用于定义表格最上方表首的格式。 基本语法:举例: ,举例:设置表首,表格的结构标记,表格的表主体标记 用于定义表格主体的格式。 基本语法:举例:,举例:设置表主体,表格的结构标记,表格的表尾标记 用于定义表格最下方表尾的格式。 基本语法:
32、举例:,举例:设置表尾,表格的嵌套,基本语法: 举例,举例:表格的嵌套,总 结,通用标记专用标记,第 八 讲 建立表单页面,学习内容:表单的概念表单标记输入标记菜单和列表标记文字域标记 学习重点:菜单相关标记 总课时:2课时,表单的相关概念,表单:实现动态网页的一种主要的外在形式,是html页面与浏览器端实现交互的重要手段。 表单的功能:可收集客户端提交的有关信息。 表单的组成: 描述表单元素的html源代码 客户端的脚本 表单的用途:调查、定购、搜索等。,表单标记,基本语法: 举例,标记的属性,Name属性基本语法:举例:,举例: 表单的命名,标记的属性,Action属性基本语法:举例,举例
33、: 表单的提交地址,Method属性设置信息提交方式 基本语法:语法解释:信息提交的方式有两种,分别是: Get:将表单的内容附加到提交地址后面,对提交信息的长度进行了限制,不能超过8192个字符。 Post:将用户在表单中填写的数据包含在表单的主体中,一起传送到服务器上的处理程序中,没有字符限制。举例:,举例: 表单的提交方式,enctype属性(信息提交的编码方式)基本语法:语法解释:信息提交的编码方式有三种,分别是: Text / plain:以纯文本方式传送信息。 Application / x-www-form-urlencoded:默认的编码形式。 Multipart / form
34、-data:使用mine编码。举例:,举例:表单的信息提交的编码方式,Target属性设置信息返回的窗口 基本语法: 语法解释:窗口属性即表单信息返回的窗口,有四类,分别是:_blank、_parent、_self、_top 举例:,举例: 表单的信息返回窗口,输入标记,基本语法:举例,Type的属性值,文字域 text 功能:设定表单中的文字域,可输入任何类型的文本、数字和字母。 基本语法:语法解释:name表示文字域的名称,maxlength表示文字域的最大输入字符数,size表示文字域的宽度(以字符为单位) ,value表示文字域的默认值。 举例: ,举例: 插入文字域,密码域passw
35、ord 功能:设定表单中的密码域,输入到文本域中的文字均以*或圆点显示。 基本语法:语法解释:name表示密码域的名称,maxlength表示密码域的最大输入字符数,size表示密码域的宽度(以字符为单位),value表示密码域的默认值。 举例:,举例: 插入密码域,文件域file功能:让用户在域中填写自己的硬盘中的文件路径,然后通过表单上传。基本语法:举例:,举例: 插入文件域,复选框checkbox (以方框表示) 功能:让用户进行选择的区域,可选多,也可选一。 基本语法:语法解释:checked表示此项被默认选中,value表示选中项目后传送到服务器的值。 举例:音乐旅游,举例: 插入复
36、选框,单选框radio (以圆框表示) 功能:让用户进行选择的区域,只可选一。 基本语法:举例:广州 深圳北京,举例: 插入单选框,普通按钮 button基本语法: 语法解释:value表示按钮上显示的文字。 举例:,举例: 插入普通按钮,重置按钮 reset基本语法: 语法解释:value表示按钮上显示的文字。 举例:,举例: 插入重置按钮,提交按钮 submit基本语法:语法解释:value表示按钮上显示的文字。 举例:,举例: 插入提交按钮,图像域 image功能:可以用于提交按钮位置上的图片。 基本语法:语法解释:src表示图片的路径。 举例: ,举例: 插入图像域,隐藏域hidden
37、功能:在页面中是不可见的,可以用于收集或发送信息,以利于被处理表单的程序使用,它不会显示结果,只是用于传送数据的标记。 基本语法:语法解释:value表示提交表单时隐藏域返回的值。 举例:,举例: 插入隐藏域,菜单和列表标记 ,功能:是一种供用户选择的工具,可以显示一定数量的选项,用滚动轴表示;也可以只显示一个选项,用下拉菜单表示。,基本语法:选项选项语法解释:name表示菜单和列表的名称,size表示显示选项的数目,multiple表示列表中的项目可多选,value表示选项返回的值,selected表示默认选项。,举例北京南京广州深圳,举例: 插入菜单列表,功能:用来制作多行的文本块,可以在
38、其中输入更多的文本。 基本语法: 语法解释:name表示文本块的名称,rows表示文本块的行数,cols表示文本块的列数,value表示文本块的默认值。 举例: 您的意见反馈,举例: 插入文本块,文本块标记,第九讲 使用框架结构,学习内容:框架的概念框架及框架集标记不支持框架标记浮动框架框架与链接 学习重点:框架相关标记 总课时:2课时,框架的基本概念,框架的作用:把浏览器窗口分成如干区域,每一个区域可以分别显示不同的网页,而且各区域之间相互没有任何干扰。 使用框架的主要目的:创建链接结构。例如:有导航条的网页,导航条被放置在一个框架之中,可以单击导航条向服务器请求网页,链接的网页出现在另外的
39、框架中,而导航栏所在的网页不发生变化。,框架集与框架,框架包含两部分:框架集和框架框架集标记 框架标记基本语法:替代了标记 ,举例: 框架网页,框架集标记的属性,左右分割窗口属性cols 基本语法: 语法解释:value表示各个框架的宽度值,可以是像素或百分比。“ * ”表示分割剩下的部分。 举例:,举例: 框架网页,框架集标记的属性,上下分割窗口属性rows 基本语法: 语法解释:value表示各个框架的高度值,可以是像素或百分比。“ * ”表示分割剩下的部分。 举例:,举例: 框架网页,嵌套分割窗口属性 基本语法:嵌套表格 ,大表格,框架集标记的属性,举例: 框架网页,框架集边框宽度属性
40、framespacing 框架集边框颜色属性 bordercolor基本语法:,框架集标记的属性,举例: 框架网页,框架标记 属性,Src:框架页面源文件属性 name:框架名称属性基本语法:举例:,举例: 框架网页,Frameborder:框架边框显示属性 Scrolling:框架滚动条显示属性 基本语法:语法解释:value1有两个值:0表示不显示边框,1表示显示边框。value2有三个值:yes表示显示滚动条,no表示不显示滚动条,auto表示根据页面的长度自动判断是否显示滚动条。,举例: 框架网页,框架尺寸调整属性noresize 基本语法:语法解释:noresize表示禁止改变框架的
41、尺寸大小。 举例:,举例: 框架网页,框架边缘宽度属性marginwidth 基本语法: 语法解释:指定的是框架的左右边缘宽度,value的值为像素。 举例: 框架边缘宽度属性marginheight 基本语法: 语法解释:指定的是框架的上下边缘高度,value的值为像素。 举例:,举例: 框架网页,不支持框架标记,当浏览器不支持框架时,可显示里面的内容。 基本语法: 举例,举例: 框架网页,浮动框架标记及属性,浮动框架是一种特殊的框架页面,在浏览器在窗口中可以嵌套子窗口,在其中显示页面的内容。 基本语法:举例,举例: 框架网页,Src、width、height、name属性 基本语法:举例f
42、rameborder与scrolling Frameborder:设定框架的边框是否显示,有两种:0表示不显示,1表示显示。scrolling:设定浮动框架滚动条是否显示,有三种:yes表示显示,no表示不显示,auto表示自动显示。 基本语法:举例,浮动框架边缘宽度属性:marginwidth浮动框架边缘高度属性:marginheight浮动框架对齐属性:align基本语法:举例,举例: 框架网页,框 架 与 链 接,普通框架与链接 举例浮动框架与链接 举例,举例: 框架网页,举例: 框架网页,第十讲 多媒体页面,滚动标记及其属性,滚动标记基本语法:滚动文字不仅适用于文字,也适用于图片。举例
43、,举例: 滚动文字,滚动标记的属性,滚动方向属性:direction 基本语法: 语法解释:value的值有四种:up表示向上,down表示向下,left表示向左,right表示向右。 举例,举例: 滚动文字,滚动方式属性behavior 基本语法: 语法解释:value的值有3个:scroll表示循环往复,slide表示只进行一次滚动,alternate表示交替进行滚动。 举例滚动速度属性scrollamount 基本语法: 举例,举例: 滚动文字,举例: 滚动文字,滚动延迟属性scrolldelay 设定每次滚动的间隔产生一段时间的延迟。 基本语法: 举例 滚动循环属性loop 基本语法:
44、 举例 滚动范围width和height 基本语法:举例,举例: 滚动文字,举例: 滚动文字,举例: 滚动文字,滚动背景颜色属性bgcolor 基本语法: 举例滚动空间属性hspace,vspace 设定滚动的水平空间和垂直空间。 基本语法: 举例,举例: 滚动文字,举例: 滚动文字,嵌入多媒体内容,在网页中可放置MP3音乐、电影、flash动画等多媒体内容。 基本语法:语法解释: hidden 设置播放面板的显示和隐藏, hidden_value 有两个值:true(隐藏)、 no(显示); autostart设置多媒体内容的播放方式, auto_value 有两个值:true(自动播放)no(不自动播放) ;loop设定是否循环播放, loop_value有两个值:true(无限次循环播放)no(仅播放一次)。,嵌入Flash动画 如:嵌入MP3音乐 如:,举例,举例,嵌入mpg电影 如: 嵌入avi视频 如: ,举例,举例,背景音乐,以midi格式为主。 基本语法:语法解释: 设定背景音乐的标记,loop设定背景音乐的循环次数。 举例:,举例,嵌入JAVA Applet,Java语言可编写两类程序:应用程序(Application)和小应用程序(Applet)。应用程序可以独立运行,但Applet不能,须嵌入html中运行。 基本语法:举例:,举例,