资源预览内容
第1页 / 共63页
第2页 / 共63页
第3页 / 共63页
第4页 / 共63页
第5页 / 共63页
第6页 / 共63页
第7页 / 共63页
第8页 / 共63页
第9页 / 共63页
第10页 / 共63页
亲,该文档总共63页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
授课主要内容授课主要内容n一、一、HTMLHTML文件的架构文件的架构n二、二、设置页面属性(重点和难点)设置页面属性(重点和难点)n三、文字修饰三、文字修饰n四、文本分段四、文本分段n五、插入图片五、插入图片n六、插入超级链接六、插入超级链接n七、制作垂直滚动的字幕七、制作垂直滚动的字幕1.1.1 1.1.1 认识网页认识网页 如果把因特网上的每个网站看成一本书,如果把因特网上的每个网站看成一本书,那么在浏览网站时看到的每个画面则是这本书那么在浏览网站时看到的每个画面则是这本书中的一页,我们称之为中的一页,我们称之为“网页网页”。而在进入网。而在进入网站后显示的第一个画页,我们称其为站后显示的第一个画页,我们称其为“主页主页”。主页就像一本书的目录,它是所有网页的索。主页就像一本书的目录,它是所有网页的索引页。通过单击主页上的超级链接,可以打开引页。通过单击主页上的超级链接,可以打开这个网站中的其他网页。这个网站中的其他网页。 网站就是由一个个网页构成的。网站就是由一个个网页构成的。说明:说明:1. 1. 作为作为WWWWWW基本组成元素的网页,有时也被称为页面或基本组成元素的网页,有时也被称为页面或Web Web 页。页。2.2.通常把一系列逻辑上可以视为一个整体的页面叫做网站。通常把一系列逻辑上可以视为一个整体的页面叫做网站。3. 3. 网站的概念是相对的,大可以到网站的概念是相对的,大可以到“新浪网新浪网”这样的门户网这样的门户网站,页面多得无法计数,而且位于多台服务器上,小可以站,页面多得无法计数,而且位于多台服务器上,小可以到一些个人网站,可能只有零星几个页面,仅在某台服务到一些个人网站,可能只有零星几个页面,仅在某台服务器上占据很小空间。器上占据很小空间。4.“4.“主页主页”是网站中的一个特殊页面,它是作为一个组织或是网站中的一个特殊页面,它是作为一个组织或个人在个人在WWWWWW上开始点的页面,其中包含指向其他页面的超链上开始点的页面,其中包含指向其他页面的超链接。通常主页的名称是固定的,例如叫做接。通常主页的名称是固定的,例如叫做index.htm index.htm 或或index.htmlindex.html等。等。什么是什么是XHTMLnXHTML是是TheExtensibleHyperTextMarkupLanguage(可扩展的超文本标记语言可扩展的超文本标记语言)的缩写。,的缩写。,XHTML是由是由HTML(超文本标记语言)发展而来(超文本标记语言)发展而来的一种网页编写语言,也是目前最常见的网页编的一种网页编写语言,也是目前最常见的网页编写语言之一。写语言之一。nXHTML看起来与看起来与HTML有些相象,只有一些小的有些相象,只有一些小的但重要的区别,但重要的区别,XHTML就是一个扮演着类似就是一个扮演着类似HTML的角色的的角色的XML,所以,本质上说,所以,本质上说,XHTML是一个过渡技术,结合了部分是一个过渡技术,结合了部分XML的强大功能及的强大功能及大多数大多数HTML的简单特性。的简单特性。nHTML是一种基本的是一种基本的WEB网页网页设计设计语言语言n2000年底,国际年底,国际W3C组织组织(WorldWideWebConsortium)组织公布发行了组织公布发行了XHTML1.0版本。版本。XHTML1.0是一种在是一种在HTML4.0基础上优化和基础上优化和改进的的新语言,目的是基于改进的的新语言,目的是基于XML应用。应用。XHTML是一种增强了的是一种增强了的HTML,它的可扩展性和它的可扩展性和灵活性将适应未来灵活性将适应未来网络网络应用更多的需求。应用更多的需求。XML虽然数据转换能力强大,完全可以替代虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的基于但面对成千上万已有的基于HTML语言设计的网语言设计的网站,直接采用站,直接采用XML还为时过早。因此,在还为时过早。因此,在HTML4.0的基础上,用的基础上,用XML的规则对其进行扩的规则对其进行扩展,得到了展,得到了XHTML。所以,建立。所以,建立XHTML的目的目的就是实现的就是实现HTML向向XML的过渡。目前国际上的过渡。目前国际上在网站设计中推崇的在网站设计中推崇的WEB标准就是基于标准就是基于XHTML的应用(即通常所说的的应用(即通常所说的CSSDIV)。)。强制使用的强制使用的XHTML元素元素n所有所有XHTML文档必须进行文件类型声明(文档必须进行文件类型声明(DOCTYPEdeclaration)。)。n在在XHTML文档中必须存在文档中必须存在html、head、body元素,元素,而而title元素必须位于在元素必须位于在head元素中。元素中。n基本的文档结构是这样的:基本的文档结构是这样的:nnnn.nn.n几个最常用的标签几个最常用的标签1 1)-定义网页的开始和结束。定义网页的开始和结束。2 2)-定义网页头的开始和结束。定义网页头的开始和结束。3 3)-定义网页标题的开始和结定义网页标题的开始和结束,浏览网页时,网页的标题将显示在浏览器的标束,浏览网页时,网页的标题将显示在浏览器的标题栏中。题栏中。4 4)-定义网页正文的开始和结束。定义网页正文的开始和结束。XHTML文件的基本结构文件的基本结构nnn头部信息nnn文档主体,正文部分nn同同心心圆圆结结构构所有标签必须闭合所有标签必须闭合n在XHTML中,所有标签必须闭合,对于单独不成对的标签(例如,和),应在标签的最后加“”来关闭(如和)。所有标签和属性名称必须小写所有标签和属性名称必须小写n.标签名必须用小写字母。标签名必须用小写字母。n错误举例:Thisisaparagraphn2.属性名称必须小写属性名称必须小写n错误举例:所有标签的属性必须加引号所有标签的属性必须加引号n错误举例:XHTML元素必须被正确地嵌套元素必须被正确地嵌套错误举例:Thistextisboldanditalic常见的块状标签常见的块状标签标签标签功能功能举例说明举例说明blockquote定义引用文本定义引用文本为块状显示为块状显示引用的文本内容div可以将文档分割为可以将文档分割为多个区域模块多个区域模块多用于网页布局Ul,ol,li用来实现普通的项目用来实现普通的项目列表。分别用来显示列表。分别用来显示有序列表和无序列表有序列表和无序列表和列表中的项目。和列表中的项目。Ul标签表示无顺序的列表ol标签表示有顺序的列表li标签表示列表中的项目dl,dt,dd用于表示定义的项用于表示定义的项目列表。目列表。dl标签表示整个定义的列表dt标签表示定义列表的术语标题dd标签表示定义列表中对术语的解释常见的块状标签常见的块状标签标签标签功能功能举例说明举例说明noframes是在框架型网页中是在框架型网页中使用的标签。使用的标签。在严格型的XHTML中,禁止使用该标签。noscript使用方法和使用方法和noframes标签类标签类似似该标签包含文本域、复选框、单选按钮等,用于向指定的传递用户数据。h1,h2,h3,h4,h5,h6用于创建在网页中用于创建在网页中的标题。的标题。H1标签表示大标题或一级标题H标签表示副标题或二级标题hr用于在网页中插入用于在网页中插入一条水平分隔线一条水平分隔线在XHTML中,hr必须进行关闭。如:常见的块状标签常见的块状标签标签标签功能功能举例说明举例说明fieldset是将表单内的相关是将表单内的相关元素分组。元素分组。可以将表单内容的一部分打包,生成一组相关表单的字段。form为用户创建可输入为用户创建可输入的表单的表单该标签包含文本域、复选框、单选按钮等,用于向指定的传递用户数据。p用于显示段落用于显示段落在默认状态下,段首会空两格,并且会具有一定的上下边界。默认按回车键可插入新的段落。Table,tr,td,th用于表示网页中的用于表示网页中的表格化数据表格化数据Table标签用于表示表格的外框Tr标签用于表示表格的一行td标签用于表示表格的一个单元格th标签用于表示表格中的表头标签标签功能功能举例说明举例说明a表示超链接对象表示超链接对象第1个书签br表示换行符表示换行符在XHTML中,br必须进行关闭。如:img用于定义在网页中用于定义在网页中插入的图像对象插入的图像对象在XHTML中,img标签必须进行关闭。如:span用于表示范围用于表示范围用于为文本或其他内联标签定义样式等用于为文本或其他内联标签定义样式等常见的内联标签常见的内联标签常见的可变标签常见的可变标签标签标签功能功能举例说明举例说明button定义按钮定义按钮可以作为容器,在其中放置图像或文本。iframe在网页中用于创建包含另外在网页中用于创建包含另外一个网页文档的内联框架一个网页文档的内联框架在严格型的XHTML中,禁止使用该标签。map用于在网页中描述图像热区。用于在网页中描述图像热区。在在map标签中,必须使用标签中,必须使用area属性来描述热区的坐标方位。属性来描述热区的坐标方位。在XHTML中,每一个map标签必须有提示信息,即alt属性。1.2网页架构举例网页架构举例n网页制作教学BODY之间则为主要语法所在,也是网页的主要呈现部分。1.1.3 1.1.3 标签解说标签解说n网页就是一堆标签(标签就是指被网页就是一堆标签(标签就是指被包起来的语法)集合起来的,包起来的语法)集合起来的,透过浏览器的消化整理,就便成了美仑美奂的网页了。透过浏览器的消化整理,就便成了美仑美奂的网页了。 n简单而言,通常一份完整的网页包含了二个部份:简单而言,通常一份完整的网页包含了二个部份:网页头网页头(HEADHEAD)、文件体()、文件体(BODYBODY)。也就是上面的)。也就是上面的以及以及。 n在抬头的部份在抬头的部份中,有另一组标签中,有另一组标签。打在打在这里面的文字会出现在浏览器视窗最上头蓝色这里面的文字会出现在浏览器视窗最上头蓝色部份里,当作一篇网页的主题。部份里,当作一篇网页的主题。 n注意:注意:可有可无。这一组标签是告诉浏览器说:我是可有可无。这一组标签是告诉浏览器说:我是一份一份HTMLHTML文件喔!也就是说它是一个网页的格式啦!通常都包在网文件喔!也就是说它是一个网页的格式啦!通常都包在网页的最上下两端,将所有的原始码都包起来。页的最上下两端,将所有的原始码都包起来。基本的基本的XHTMLXHTML语法语法n1 1保存文件时,注意文件的扩展名应该为保存文件时,注意文件的扩展名应该为.htm.htm或或.html.html。文件名中大小写字母的意义可能不同,。文件名中大小写字母的意义可能不同,也不要在文件中使用一些特殊的符号(如空格)。也不要在文件中使用一些特殊的符号(如空格)。n2. HTML2. HTML标记符不区分大小写,如标记符不区分大小写,如和和是相同的。是相同的。n3 3多数多数HTMLHTML标记符可以嵌套,但不可以交叉。标记符可以嵌套,但不可以交叉。n4 4HTMLHTML文件一行可以写多个标记,一个标记也文件一行可以写多个标记,一个标记也可以分多行书写。可以分多行书写。5.5.在在HTMLHTML中,所有的标记符都用尖括号括起来。例中,所有的标记符都用尖括号括起来。例如:如:表示表示HTMLHTML标记符。标记符。6.6.某些标记符,例如换行标记符某些标记符,例如换行标记符,只要求单一标只要求单一标记符号。但绝大多数标记符都是成对出现的,包记符号。但绝大多数标记符都是成对出现的,包括开始标记符和结束标记符。开始标记符和相应括开始标记符和结束标记符。开始标记符和相应的结束标记符定义了标记符所影响的范围。的结束标记符定义了标记符所影响的范围。7.7.标记符的属性标记符的属性 属性属性-用来描述对象的特征。例如:一个人的身用来描述对象的特征。例如:一个人的身高、体重、性别就是这个人的属性。高、体重、性别就是这个人的属性。n-这是单个的标识,其作用是换行显示,相当于word中的硬回车。如果在HTML文件中没有使用,如果显示到窗口的边界,则会自动换行。1.1.4 1.1.4 超文本中的标签超文本中的标签n标签是用标签是用“”“”“”括起来的句子,括起来的句子,是用来控制文字、图形等显示方式的符是用来控制文字、图形等显示方式的符号,标签分号,标签分: :n单标签单标签n双标签双标签n标签属性。标签属性。标签属性标签属性nwidth width 属性定义线的长度,可取相对值,(由一对属性定义线的长度,可取相对值,(由一对“ “ ”号括起来的百分数,表示相对于整个窗口的百分比),号括起来的百分数,表示相对于整个窗口的百分比),也可取绝对值(用整数表示的屏幕像素点的个数,如也可取绝对值(用整数表示的屏幕像素点的个数,如width=300width=300),缺省值是),缺省值是“100%”“100%”。n再举例:再举例:nbody bgcolor=red text=black Link=#999999 vlink=#cccccc alink=#666666 n说明:各属性之间无先后次序,属性也可省略(即取默认说明:各属性之间无先后次序,属性也可省略(即取默认值)。值)。颜色RGB值颜色RGB值black#000000maroon#800000green#008000navy#000080silver#C0C0C0red#FF0000lime#00FF00blue#0000FFgray#808080purple#800080olive#808000teal#008080white#FFFFFFfuchsia#FF00FFyellow#FFFF00aqua#00FFFF2.12.1设置页面背景颜色设置页面背景颜色设置页面背景颜色设置页面背景颜色在在标记符中使用标记符中使用bgcolorbgcolor属性可以为网页设置背景颜色。属性可以为网页设置背景颜色。例如:如果想为网页设置黑色背景,应使用下面的语句:例如:如果想为网页设置黑色背景,应使用下面的语句:或者或者第1章HTML语言RR、GG、BB分别以16进制的形式表示红、绿蓝三原色的数值,范围在“OO”和“FF”之间常用的16种颜色可以直接使用英文单词表示 2.2 2.2 设置页面背景图像设置页面背景图像n使用使用BODYBODY标记符的标记符的backgroundbackground属性可以设置页面背景图像。属性可以设置页面背景图像。BODY background= n使用背景图像时,如果图像小于浏览器窗口的大小,则浏使用背景图像时,如果图像小于浏览器窗口的大小,则浏览器会自动像铺地板砖一样平铺背景图像。例如:以下代览器会自动像铺地板砖一样平铺背景图像。例如:以下代码显示了设置背景图像的效果。码显示了设置背景图像的效果。nnn背景图像示例背景图像示例nnn背景图像示例背景图像示例nn2.42.4表格表格表格的标题表格的标题表格的表头表格的表头插入表格(插入表格(插入表格(插入表格(1 1)第2章HTML语言单元格行列表头插入表格(插入表格(插入表格(插入表格(2 2)第2章HTML语言2) 在网页中插入表格创建一个表格创建一行创建一列1、插入表格第一行第一列第一行第二列第二行第一列第二行第二列标记符创建表格标题标记符创建表格标题n-建立表格的标题,并建立表格的标题,并使用使用alignalign属性定义标题的位置。属性定义标题的位置。alignalign位置属位置属性有性有4 4个值:个值:nTop - Top - 标题在表格上方标题在表格上方nBottom - Bottom - 标题在表格下方标题在表格下方nLeft - Left - 标题在表格左上方标题在表格左上方nright - right - 标题在表格右上方标题在表格右上方n一个表格只能有一个标题。一个表格只能有一个标题。标记符建立表头标记符建立表头n表头是表格中行或列的标题,即表项的名称。表头是表格中行或列的标题,即表项的名称。使用使用可以在表的第一行或第一列加表头,可以在表的第一行或第一列加表头,表头内容写在表头内容写在和和之间,显示时将采用之间,显示时将采用粗体字以醒目。粗体字以醒目。n在表格的第一行加表头的格式为:在表格的第一行加表头的格式为:n品种品种价格价格净重净重生产厂家生产厂家课程练习课程练习写一个制作表格的写一个制作表格的HTML程序(要求包含标题和表头)。程序(要求包含标题和表头)。表格的表头表格的表头表格的标题表格的标题表格宽度 表格的属性设置表格的属性设置表格的属性设置表格的属性设置第1章HTML语言表格高度表格四周的边框线宽度单元格间距单元格中文字与格线的距离表格在父区域中的的摆放位置表格栏位数目单元格中内容垂直排列的位置表格立体边框的迎向光线部分和背向光线部分的颜色表格边框的颜色表格的背景颜色表格的背景图片 表格标签表格标签的属性表的属性表2.32.3 设置文字和超链接的颜色设置文字和超链接的颜色nText-Text-用于设置正文的颜色用于设置正文的颜色nLink-Link-用于设置未被访问的超链接的颜色用于设置未被访问的超链接的颜色nvlink-vlink-用于设置已被访问的超链接的颜色用于设置已被访问的超链接的颜色nalink-alink-用于设置活动超链接(当前选定的超链接)用于设置活动超链接(当前选定的超链接)的颜色的颜色例如:以下语句将在黑色背景下显示白色字符,同时例如:以下语句将在黑色背景下显示白色字符,同时用不同程度的灰色显示不同状态的超链接:用不同程度的灰色显示不同状态的超链接:2.5 2.5 标识的标识的属性属性n-画一条水平线(单标签)画一条水平线(单标签)n标识的标识的属性用来指定分隔线的颜色。属性用来指定分隔线的颜色。n具体格式如下:具体格式如下:nn说明:由说明:由生成的水平线将以一种加阴影的生成的水平线将以一种加阴影的3D3D线的形式线的形式显示出来。但有时我们宁愿使用一条简单的实线,此时就显示出来。但有时我们宁愿使用一条简单的实线,此时就需在需在标记中增加标记中增加noshadenoshade属性,注意属性,注意noshadenoshade属性不需属性不需要指定任何值。上面是要创建一条粗细程度为要指定任何值。上面是要创建一条粗细程度为5 5、长度为、长度为100100像素的一条实心的红色的水平线。像素的一条实心的红色的水平线。2.62.62.62.6 添加注释添加注释添加注释添加注释4、注释语句-不在浏览器中显示,可插入在网页的任何位置。格式例子 第2章HTML语言1) HTML语法2.72.72.72.7 显示特殊字符显示特殊字符显示特殊字符显示特殊字符一般转义符都是以“&”开始,以“;”结束,一个转义符之间不能有空格第1章HTML语言1) 转义字符与特殊字符转义符显示结果描述<大于号或显示标记&&可用于显示其它特殊字符"引号®己注册©版权™商标 半方大的空白 全方大的空白 不断行的空白三、文字修饰三、文字修饰n1.1.设置文字大小设置文字大小 (font size=nfont size=n )n2.2.设置文字的字体(设置文字的字体(font face=“font face=“字体字体”)n3.3.设置文字的颜色(设置文字的颜色(font color=font color=)n4.4.设置文字的字型(设置文字的字型( 设置文字的风格,如黑设置文字的风格,如黑体、斜体、带下划线等体、斜体、带下划线等)n说明:说明:1.font1.font标签用来设置文字的大小。这里标签用来设置文字的大小。这里n n可取可取1 17 7的数字。数字值越大,显示的文字越大。的数字。数字值越大,显示的文字越大。n n的默的默认值是认值是3 3。2.2.此标签一直有效,直到遇到一个新的此标签一直有效,直到遇到一个新的n n值或值或时为止。时为止。3.3.如果给出的如果给出的n n值有正负号,则表示在当前字号的值有正负号,则表示在当前字号的基础上增大或缩小字号。如基础上增大或缩小字号。如“+1”“+1”表示大表示大1 1号。号。3.1设置文字大小设置文字大小FACEFACE属性定义文字的字体属性定义文字的字体格式:格式:font face=“”:n字体字体FONT face=_GB2312欢迎光临欢迎光临FONT face=欢迎光临欢迎光临FONT face=_GB2312欢迎光临欢迎光临 FONT face=欢迎光临欢迎光临 3.4 3.4 设定文字的颜色设定文字的颜色n使用方法:使用方法:文字颜色文字颜色 n使用范例:使用范例:红红红色的字喔!红色的字喔!n橙橙橙色的字喔橙色的字喔!n黄黄黄色的字喔黄色的字喔!n绿绿绿色的字喔绿色的字喔!n蓝蓝蓝色的字喔!蓝色的字喔! n靛靛靛色的字喔靛色的字喔!n 紫紫紫色的字喔!紫色的字喔!n黑黑黑色的字喔!黑色的字喔! n灰灰灰色的字!灰色的字! 设定字体的标题标签设定字体的标题标签n使用方法:使用方法:标题内容标题内容 n标签解说:标题的大小一共有六种,两个标签一组,也就是从标签解说:标题的大小一共有六种,两个标签一组,也就是从到到,最大,最大,最小。使用标题标签时,该标签会将字体变成粗体字,并且会自成一行。最小。使用标题标签时,该标签会将字体变成粗体字,并且会自成一行。 n使用范例:使用范例:标题一标题一标题一标题一n标题二标题二标题二标题二n标题三标题三标题三标题三n标题四标题四标题四标题四n标题五标题五标题五标题五n标题六标题六标题六标题六原始码原始码呈现结果呈现结果 粗体粗体粗体粗体 斜体斜体斜体斜体 底线底线底线底线 上标上标上标上标 下标下标下标下标 加强加强加强设设置置字字型型变变化化标标签签四、文本分段四、文本分段四、文本分段四、文本分段格式段落内容第1章HTML语言1) 划分段落-用段落标记符P,包括和,其中可省略。对齐属性Center,Right,Left床前明月光,疑是地上霜。举头望明月,低头思故乡。2)DIV标记符和标记符和CENTER标记符标记符n如果需要将多个段落使用相同的对齐方式,那么可以不如果需要将多个段落使用相同的对齐方式,那么可以不必在每个段落中设置必在每个段落中设置alignalign属性。例如,以下属性。例如,以下HTMLHTML代码代码将多个段落的内容都设置为居中对齐,效果如图。将多个段落的内容都设置为居中对齐,效果如图。床前明月光,疑是地上霜。举头望明月,低头思故乡。 插入图片(插入图片(插入图片(插入图片(1 1)基本格式第2章HTML语言1.2.3.1 在网页中插入图片图片标记包含图片文件保存的位置和文件名插入图片(插入图片(插入图片(插入图片(2 2)第2章HTML语言1.2.3.2 图片的属性设定图片大小,此宽度、高度一般采用像素作单位。如果不使用图片的真实大小,就可以在显示窗口中得到放大或缩小的图片。设定图片边沿空白,防止文字或其它图片过于贴近本图片Hspace是设定图片左右的空间Vspace设定图片上下的空间图片边框厚度。从0至99的数字调整图片旁边文字的位置可选值:top,middle,bottom,left,right设定替换文字当把鼠标移动到图片上时,无论图片是否显示,替换文字都可以显示出来设定先显示的低解像图片文件名 插入图像插入图像的属性的属性建立超级链接(建立超级链接(建立超级链接(建立超级链接(1 1)1、建立超级链接字符串第2章HTML语言1.2.4.1 指向一个目标超级链接标记链接目标使用绝对路径下一页使用相对路径下一页把超级链接指向上两级目录下的文件返回目录建立超级链接(建立超级链接(建立超级链接(建立超级链接(2 2)2、为图片建立超级链接 第2章HTML语言1.2.4.1 指向一个目标超链接使用标志超链接使用标志的常用属性的常用属性建立超级链接(建立超级链接(建立超级链接(建立超级链接(3 3)3、链接到邮件和多媒体文件链接到邮件请与我联系第2章HTML语言1.2.4.1 指向一个目标插入背景音乐插入背景音乐n访问者打开页面时自动播放的声音,称为背景声音。访问者打开页面时自动播放的声音,称为背景声音。格式如下:格式如下:nn属性:属性:nSrc:Src:用于指定背景音乐的源文件。用于指定背景音乐的源文件。nLoop:Loop:用于指定背景音乐播放的次数,如果缺省用于指定背景音乐播放的次数,如果缺省/-/-1/infinite1/infinite,则背景音乐将一直播放到浏览者离开,则背景音乐将一直播放到浏览者离开该网页为止。该网页为止。嵌入影像嵌入影像n使用嵌入方式加入影像,必须先下载。使用嵌入方式加入影像,必须先下载。n方法如下:方法如下:nn加入影像还可以用加入影像还可以用标志,使用其标志,使用其dynsrc属性。方法如下:属性。方法如下:n标志的标志的autostartautostart属性属性n使用使用标志加入声音,它提供一个标志加入声音,它提供一个autostartautostart属属性来设置是否自动播放声音。性来设置是否自动播放声音。n打开页面时自动播放声音:打开页面时自动播放声音:n n需要点击才播放声音:需要点击才播放声音:n 制作垂直滚动的字幕制作垂直滚动的字幕marquee direction=up behavior=scroll onmouseout=this.start() 制作会移动的文制作会移动的文字字 1.1. direction=up/down/left/right- direction=up/down/left/right-指定滚动的方向指定滚动的方向 2.behavior=scroll2.behavior=scroll(循环滚动)(循环滚动)/side/side(移到边界停止)(移到边界停止)/alternate/alternate(来回移动)(来回移动)-指定滚动的方式。指定滚动的方式。 3.Loop:3.Loop:当设为当设为-1-1或或infinitinfinit或不设置时或不设置时-无限循环无限循环4.scrollamount=“2” -4.scrollamount=“2” -指定滚动速度为指定滚动速度为2 2,取值为正,取值为正整数,默认为无限循环。整数,默认为无限循环。5.scrolldelay=“50“-5.scrolldelay=“50“-指定滚动时间为指定滚动时间为5050毫秒,取值毫秒,取值为正整数,默认为为正整数,默认为0 0,单位为毫秒,单位为毫秒6. align=top/middle/bottom -6. align=top/middle/bottom -设置文字对齐的方式设置文字对齐的方式( (默认为默认为middle)middle)垂直滚动的字幕垂直滚动的字幕含义含义:垂直滚动的字幕垂直滚动的字幕含义含义:7. bgcolor:7. bgcolor:指定滚动区域的背景色,取值是指定滚动区域的背景色,取值是1616进制的进制的RGBRGB颜色,颜色,默认为白色默认为白色8. Width/height= 300/200 -8. Width/height= 300/200 -指定滚动窗口的宽和高,取值指定滚动窗口的宽和高,取值是正整数(单位是正整数(单位: :像素)或百分数,默认像素)或百分数,默认width=100%width=100%9. hspace9. hspace和和vspace:vspace:指定元素到区域边界的水平距离和垂直距离,指定元素到区域边界的水平距离和垂直距离,取值是正整数,单位是像素。取值是正整数,单位是像素。10. onmouseover=this.stop( )10. onmouseover=this.stop( )表示当鼠标经过时停止滚动表示当鼠标经过时停止滚动, , onmouseout=this.start( ) onmouseout=this.start( ) 表示当鼠标移开时又继续滚动表示当鼠标移开时又继续滚动注:任何内容(文字、图片)都可以作为注:任何内容(文字、图片)都可以作为marqueemarquee的移动对象。的移动对象。第一次上机实验内容第一次上机实验内容(地点:地点:512机房机房)n1. 1. 通过记事本用通过记事本用HTMLHTML语言设计一个简单的个人主语言设计一个简单的个人主页页n要求包括要求包括: : n设置页面背景颜色和背景图像设置页面背景颜色和背景图像 设置文字的字体、大小和颜色等等设置文字的字体、大小和颜色等等 设置设置属性属性 制作垂直向上滚动的图片制作垂直向上滚动的图片 插入背景音乐插入背景音乐n上述文件都要求以上述文件都要求以.htm.htm或或.html.html文件名存盘,并在文件名存盘,并在IEIE浏览器中打开该文件预览网页文件的内容。浏览器中打开该文件预览网页文件的内容。n2.2.通过记事本用通过记事本用HTMLHTML语言手写两个网页程序(要求语言手写两个网页程序(要求包括包括: : 插入图片插入图片要求通过超链接实现在两张页要求通过超链接实现在两张页面之间自由地的跳转面之间自由地的跳转) )(假设图片文件名为(假设图片文件名为my.jpgmy.jpg)综合练习综合练习
收藏 下载该资源
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号