HTML第三章(精品).ppt

《HTML第三章(精品).ppt》由会员分享，可在线阅读，更多相关《HTML第三章(精品).ppt（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三章第三章框架和层叠样式表回顾创建表格结构？合并表中的行和列的属性分别是？创建表单的格式？表单传递数据几种方式？列举表单元素有哪些？rowspan,colspan表单控件表单控件post,get文本框，密码框，单选框，复选框，下拉列表框，多行文本框，文本框，密码框，单选框，复选框，下拉列表框，多行文本框，隐藏域隐藏域预习检查一个框架结构是由两部分组成的：和框架集(frameset)页面被划分的区域多少是通过属性 和 来设置的。表示将浏览器窗口分割为 3列，第一个子窗口在 ，窗体宽度为整个浏览器窗口宽度的40%；第二个子窗口在 ，窗体宽度为整个浏览器窗口宽度的 ；第三个子窗口在 ，窗体宽度为整

2、个浏览器窗口宽度的40%；框架集框架集(frameset)框架框架(frame)rowscols第一列第二列第三列20%4预习检查简述样式表的基本结构？关于文本、边框、背景的常用样式属性有哪些？常用的样式表的选择器有哪些？P color:red;font-size:30px;font-family:隶书隶书;文档样式表开始，文档样式表开始，类型为类型为CSSCSS样式样式样式规则样式规则样式表声明结束样式表声明结束1、常用的文本属性、常用的文本属性font-size、font-family、font-weight、color、text-align2、常用的背景属性、常用的背景属性backgro

3、und-color、background-image3、常用的边框属性、常用的边框属性border-width、border-colorHTML选择器、选择器、Class选择器、选择器、ID选择器选择器本章目标了解框架的作用了解框架结构掌握框架的建立掌握框架的布局方式了解什么是层叠样式表掌握层叠样式表的基本语法掌握常用的样式表选择器掌握简单的DIV+CSS布局框架框架基础框架基础：框架可以生成独立变化和滚动的窗口，从而能将一个窗口分割为若干个子窗体。一个包含多个HTML的文档的HTML文件称为框架页面称为框架页面框架在网页中的作用框架在网页中的作用：把浏览器窗口划分为若干个区域，每个区域可以分

4、别显示不同的网页。框架页面框架框架框架页面1页面2页面3框架结构图框架结构图框架效果图片框架的属性标签作用于将窗口分割为若干个子窗体，子窗口的数目取决于嵌套在该标签中标签的数目。标签有两个属性：rows和cols，分别用来确定各自窗口的高度和宽度，格式为：这两个属性的参数值可以是数字、百分数或符号”*”数字表示子窗口高度(宽度)所占的像素点数。百分数表示子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比。符号”*”表示当符号只出现一次。即其他子窗口的大小都有明确的定义时，表该子窗体的大小将根据浏览器窗口的大小而自动调整。;框架的属性标签用来标识子窗口标签用来标识子窗口(框架框架)。常用的属

5、性：常用的属性：.设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超文本链接锚标签文本链接锚标签target属性所引用属性所引用常见的框架结构左右分割窗口左右分割窗口嵌套分割窗口嵌套分割窗口上下分割窗口上下分割窗口 框架的基本结构边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右右3个部分个部分,可选可选将窗口分割成上将窗口分割成上下下2个部分个部分,可选可选第一个窗口要第一个窗口要显示的网页显示的网页框架页面的基本语法：框架页面的基本语法：框架的基本结构rows_cols框架框架 将窗口分割成将窗口分割成上中下上中下3

6、部分部分窗口边框窗口边框的宽度的宽度查看源代码查看源代码小结1：如何创建嵌套分割窗口 要实现如下图所示的窗口，该如何制作？要实现如下图所示的窗口，该如何制作？1、分成上下两个窗口、分成上下两个窗口2、把下面的窗口分成、把下面的窗口分成 左右两个窗口左右两个窗口top窗口窗口left窗口窗口right窗口窗口 1、创建一个、创建一个HTML页面页面“top.html”2、创建一个、创建一个HTML页面页面“left.html”3、创建一个、创建一个HTML页面页面“right.html”关键代码如下：关键代码如下：关键代码关键代码在同一个浏览器窗口中，在同一个浏览器窗口中，将其既按照行来分割，又

7、将其既按照行来分割，又按照列来分割，这种框架按照列来分割，这种框架称为嵌套框架。称为嵌套框架。如何设置窗口链接的显示位置target目标窗口属性四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口 新启一个窗口打开文新启一个窗口打开文件件“right.html”小结2top.htmlleft.htmlright1.html或或right2.htmlframe_sets.html编写如下图所示效果对应的编写如下图所示效果对应的html代码代码bottom.html小结2关键代码：关键代码：left页面：页面：IT之行，始于足下。框架把浏览器窗口划分为若干个区域，每个区域

8、可以分别显示不同的网页。内嵌框架iframe能在不改变页面结构的情况下，灵活的嵌入其它页面的内容。能在不改变页面结构的情况下，灵活的嵌入其它页面的内容。基本语法：基本语法：右边是iframe内嵌窗口 内嵌框架内嵌框架内嵌框架效果图：关键代码演示：什么是样式表？CSS（Cascading Style Sheet），层叠样式表。是用于），层叠样式表。是用于控制控制网页样式网页样式并允许将样式信息与网页并允许将样式信息与网页内容分离内容分离的一种的一种标签语言标签语言。什么是样式表 样式表的基本语法 什么是样式表 注意：注意：标签必须放在标签必须放在和和标记之间。标记之间。HTML选择器body,p

9、,td,th,div font-family:Tahoma,Verdana;font-size:12px;color:#0000;CSS样式的选择器 HTML选择器使用选择器使用HTML标签的名称来标识。标签的名称来标识。如何让网页中所有如何让网页中所有P标签的颜色都为标签的颜色都为“灰色灰色”，字体为，字体为“黑体黑体”，字体大小为字体大小为“24px”？p font-family:”黑体黑体”;font-size:24px;color:#666666;Class选择器（类选择器）.titlecolor:red;.这个段落颜色特殊这个段落颜色特殊这是普通段落这是普通段落这个段落颜色也特殊这个

10、段落颜色也特殊CSS样式的选择器 Class选择器是将选择器是将HTML标签进行分类，标签进行分类，然后根据类名来标识。然后根据类名来标识。Class选择器用选择器用“.”表示，如表示，如“.title”。解决方案：解决方案：使用使用Class选择器。选择器。刚才将网页中所有刚才将网页中所有P标签的颜色都设置为标签的颜色都设置为“灰色灰色”，字体为，字体为“黑体黑体”，字，字体大小为体大小为“24px”；但是现在我希望；但是现在我希望某几个段落某几个段落的颜色为红色，该怎么办的颜色为红色，该怎么办？ID选择器（类选择器）#titlecolor:red;.这个段落颜色特殊这个段落颜色特殊这是普通

11、段落这是普通段落CSS样式的选择器 ID选择器是根据选择器是根据HTML标签的标签的id属性属性来进行标识的。来进行标识的。ID选择器用选择器用“#”表示，如表示，如“#title”。解决方案：使用解决方案：使用Class选择器也是可以的，但是选择器也是可以的，但是使用使用ID选择器是非常选择器是非常好的选择。好的选择。刚才是某几个段落特殊；但是现在我希望刚才是某几个段落特殊；但是现在我希望某一个段落某一个段落的颜色为红色，还可的颜色为红色，还可以怎么做？以怎么做？伪类a:link color:#FF0000 /*未访问的链接未访问的链接*/a:visited color:#00FF00 /*

12、已访问的链接已访问的链接*/a:hover color:#FF00FF /*鼠标移动到链接上鼠标移动到链接上*/a:active color:#0000FF /*选定的链接选定的链接*/CSS样式的选择器 1、在、在 CSS 定义中，定义中，a:hover 必须被置于必须被置于 a:link 和和 a:visited 之后，才是有效的。之后，才是有效的。2、在、在 CSS 定义中，定义中，a:active 必须被置于必须被置于 a:hover 之后，才是有效的。之后，才是有效的。在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态、已被访问状态、未被访问状态和

13、鼠标悬停状态。注意：注意：应用样式到网页中 内嵌样式表内嵌样式表使用格式如下：行内（内联）样式表外部样式表文件（导入样式）样式规则样式规则 如果希望本网页内的所有同类标签都采如果希望本网页内的所有同类标签都采用用统一样式统一样式，这时应采用内嵌样式。，这时应采用内嵌样式。其实前面所用的就是内联其实前面所用的就是内联样式表这种方式样式表这种方式样式表的三大应用方式：内嵌样式表 h2color:blue;font-weight:normal;font-size:16px;font-family:黑体黑体;P font-family:隶书隶书;font-size:18px;color:#FF0000

14、;改变别人改变别人 不如改变自己不如改变自己 改变别人很难改变别人很难 其实其实 改变你自己更难改变你自己更难 你固有的观点你固有的观点 你刻意坚持的理念你刻意坚持的理念 对于你也许很适用对于你也许很适用 但这不等于别人也同样适用但这不等于别人也同样适用样式规则样式规则选择符选择符样样式式表表所有的段落都采用所有的段落都采用 P 样式，保证样式统一样式，保证样式统一 改变别人改变别人 不如改变自己不如改变自己 改变别人很难改变别人很难 其实其实 改变你自己更难改变你自己更难 你固有的观点你固有的观点 你刻意坚持的理念你刻意坚持的理念 对于你也许很适用对于你也许很适用 但这不等于别人也同样适用但

15、这不等于别人也同样适用行内（内联）样式表 解决方案：解决方案：添加行内样式。添加行内样式。如果要将如果要将“其实其实 你改变自己更难你改变自己更难”这个段落得文字加上下划线，怎么办这个段落得文字加上下划线，怎么办？本段本段标签采标签采用了行内样式用了行内样式行内（内联）样式表 h2color:blue;font-weight:normal;font-size:16px;font-family:黑体黑体;P font-family:隶书隶书;font-size:18px;color:#FF0000;改变别人改变别人 不如改变自己不如改变自己 改变别人很难改变别人很难 其实其实 改变你自己更难改变

16、你自己更难 你固有的观点你固有的观点 你刻意坚持的理念你刻意坚持的理念 对于你也许很适用对于你也许很适用 但这不等于别人也同样适用但这不等于别人也同样适用样式规则样式规则选择符选择符样样式式表表所有的段落都采用所有的段落都采用 P 样式，保证样式统一样式，保证样式统一 外部样式表(导入样式)解决方案：解决方案：使用外部样式表。使用外部样式表。前面我们谈到样式表就像网页华丽的外衣，可以让网页随时更换衣裳，那如何实现呢？如果希望一个网站中多个页面的样式保持一致，又该如何做？样式文件样式文件.css网页网页2网页网页3网页网页1外部样式表(导入样式)两种让网页与外部样式表关联的方式：链接（LINK）

17、外部样式表导入（import）外部样式表使用LINK（链接）标签:第一步：创建样式表文件第一步：创建样式表文件outcss.css 第二步：在网页中链接此样式表第二步：在网页中链接此样式表第三步：浏览查看各网页第三步：浏览查看各网页样式文件：样式文件：outcss.css Link_Outcss1.htmlLink_Outcss2.html 引入的样引入的样式文件式文件链接外部样式表（LINK）使用import（导入）标签:import newstyle.css;引入的样式文引入的样式文件件导入外部样式表（Import）注意：其他的注意：其他的CSS规则应该仍然包括在规则应该仍然包括在Styl

18、e元素中，但所有的元素中，但所有的import声明必须放在样式表的开始部分。声明必须放在样式表的开始部分。有三种方式将CSS应用到网页中：使用行内样式表使用内嵌样式表使用外部样式表CSS常用的选择器：HTML选择器、ID选择器、Class选择器，还有伪类。34CSS有哪些常用的选择器？有几种方式将CSS应用到网页中？标签可以放在标签中吗？小结1 标签不可以放在标签中，它只可以放在标签中。35常用的样式属性 常用的文本属性font-size文本的字体大小font-family文本的字体font-weight文本字体的粗细font-style文本的字体样式color设置文本的颜色text-alig

19、n设置文本的对齐方式 注意：设置文本颜色用注意：设置文本颜色用“color”，而不是，而不是“font-color”。36常用的样式属性 常用的边界、边框和填充属性margin-right右边界右边界margin-left左边界左边界margin-top上边界上边界margin-bottom下边界下边界marginborderpaddingborder-width边框的宽度边框的宽度padding-left左填充左填充padding-bottom下填充下填充37常用的样式属性 常用的背景属性background-color设置背景颜色background-image 设置背景图像backgro

20、und-repeat 指定背景图像是否如何铺排menu background-image:url(images/menu.gif);background-repeat:repeat-y;p background-color:#00FF00;color:#FFF;38小结2要实现如下的样式效果，应该如何编写代码。代码示例代码示例39DIV+CSS布局实例本例将要完成的布局效果如下图。如何让多个如何让多个DIV在在同一行显示？同一行显示？代码示例代码示例40DIV+CSS布局实例顶部广告区导航区 纵向导航区 内容A 内容B 内容C 内容D 内容E 内容F 内容G 内容H 底部版权区41DIV+CS

21、S布局实例*margin:0px;padding:0px;#top,#nav,#mid,#footerwidth:500px;margin:0px auto;#topheight:80px;background-color:#ddd;#navheight:25px;background-color:#fc0;42DIV+CSS布局实例#midheight:300px;#leftwidth:98px;height:298px;border:1px solid#999;float:left;background-color:#ddd;#rightheight:298px;background-co

22、lor:#ccc;43DIV+CSS布局实例.contentwidth:98px;height:148px;background-color:#c00;border:1px solid#999;float:left;#content2background-color:#f60;#footerheight:80px;background-color:#fc0;44总结本章我们主要学习了以下方面的内容：样式表的基本概念。样式表即CSS，Cascading Style Sheet，层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标签语言。样式表的常用选择器。HTML选择器、Clas

23、s选择器、ID选择器以及伪类。如何将样式表应用到网页中？三种方式：行内、内嵌、外部样式表。超链接样式有哪几种？常用的样式表属性。DIV+CSS布局实例。总结创建一个框架页面至少需要哪两个标签？target设定目标资源所要显示的窗口，其取值可以为哪些？请先阅读下面的代码，根据代码意思选择一个正确的答案（）。框架集框架集(frameset)和框架和框架(frame)_blank _self _parent _topA.将浏览器分为2个窗口B.将浏览器分为3个窗口C.将浏览器分为4个窗口D.以上都不是C作业课后作业1、2、3、4题将例题重新敲一遍，加深代码熟练度上机指导IT之行，始于足下之行，始于足下