《web基础(框架和层叠样式表)》由会员分享，可在线阅读，更多相关《web基础(框架和层叠样式表)（47页珍藏版）》请在金锄头文库上搜索。
1、第三章,框架和层叠样式表,回顾,创建表格结构？合并表中的行和列的属性分别是？创建表单的格式？表单传递数据几种方式？列举表单元素有哪些？,rowspan,colspan,表单控件,post,get,文本框，密码框，单选框，复选框，下拉列表框，多行文本框，隐藏域,预习检查,一个框架结构是由两部分组成的： 和 框架集(frameset)页面被划分的区域多少是通过属性 和 来设置的。表示将浏览器窗口分割为 3列，第一个子窗口在 ，窗体宽度为整个浏览器窗口宽度的40%；第二个子窗口在 ，窗体宽度为整个浏览器窗口宽度的 ；第三个子窗口在 ，窗体宽度为整个浏览器窗口宽度的40%；,框架集(frameset)
2、,框架(frame),rows,cols,第一列,第二列,第三列,20%,4,预习检查,简述样式表的基本结构？ 关于文本、边框、背景的常用样式属性有哪些？ 常用的样式表的选择器有哪些？,P color:red; font-size:30px; font-family:隶书;,文档样式表开始，类型为CSS样式,样式规则,样式表声明结束,1、常用的文本属性 font-size、font-family、font-weight、color、text-align 2、常用的背景属性 background-color、background-image 3、常用的边框属性 border-width、bord
3、er-color,HTML选择器、Class选择器、ID选择器,本章目标,了解框架的作用 了解框架结构 掌握框架的建立 掌握框架的布局方式 了解什么是层叠样式表 掌握层叠样式表的基本语法 掌握常用的样式表选择器 掌握简单的DIV+CSS布局,框架,框架基础：框架可以生成独立变化和滚动的窗口，从而能将一个窗口分割为若干个子窗体。 一个包含多个HTML的文档的HTML文件称为框架页面 框架在网页中的作用：把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。,框架页面,框架,框架,框架,页面1,页面2,页面3,框架结构图,框架效果图片,框架的属性,标签作用于将窗口分割为若干个子窗体，子窗口
4、的数目取决于嵌套在该标签中标签的数目。 标签有两个属性：rows和cols，分别用来确定各自窗口的高度和宽度，格式为：这两个属性的参数值可以是数字、百分数或符号”*” 数字表示子窗口高度(宽度)所占的像素点数。 百分数表示子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比。 符号”*”表示当符号只出现一次。即其他子窗口的大小都有明确的定义时，表该子窗体的大小将根据浏览器窗口的大小而自动调整。,;,;,框架的属性,标签用来标识子窗口(框架)。 常用的属性：,设置无框架边框,不显示滚动条,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,常见的框架结构,左右分割窗口,嵌套
5、分割窗口,上下分割窗口, ,框架的基本结构,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,框架页面的基本语法：,框架的基本结构,rows_cols框架,将窗口分割成上中下3部分,窗口边框的宽度,查看源代码,小结1：如何创建嵌套分割窗口,要实现如下图所示的窗口，该如何制作？,1、分成上下两个窗口 2、把下面的窗口分成左右两个窗口,top窗口,left 窗口,right窗口,1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html”,关键代码如下：,关键代码
6、,在同一个浏览器窗口中，将其既按照行来分割，又按照列来分割，这种框架称为嵌套框架。,如何设置窗口链接的显示位置,target目标窗口属性 四个特殊的窗口显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口,新启一个窗口打开文件 “right.html”,小结2,top.html,left.html,right1.html或right2.html,frame_sets.html,编写如下图所示效果对应的html代码,bottom.html,小结2,关键代码：left页面：, IT之行，始于足下。框架把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。,内嵌框架,iframe能
7、在不改变页面结构的情况下，灵活的嵌入其它页面的内容。 基本语法：,右边是iframe内嵌窗口,内嵌框架,内嵌框架效果图：,关键代码演示：,什么是样式表？,CSS（Cascading Style Sheet），层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标签语言。,什么是样式表,样式表的基本语法, ,什么是样式表,注意： 标签必须放在和标记之间。,HTML选择器,body,p,td,th,div font-family:Tahoma,Verdana;font-size:12px;color:#0000; ,CSS样式的选择器,HTML选择器使用HTML标签的名称来标识。,如
8、何让网页中所有P标签的颜色都为“灰色”，字体为“黑体”， 字体大小为“24px”？,p font-family:”黑体”;font-size:24px;color:#666666; ,Class选择器（类选择器）, . title color:red; . 这个段落颜色特殊 这是普通段落 这个段落颜色也特殊 ,CSS样式的选择器,Class选择器是将HTML标签进行分类， 然后根据类名来标识。 Class选择器用“.”表示，如“.title”。,解决方案：使用Class选择器。,刚才将网页中所有P标签的颜色都设置为“灰色”，字体为“黑体”，字体大小为“24px”；但是现在我希望某几个段落的颜色
9、为红色，该怎么办？,ID选择器（类选择器）, #title color:red; . 这个段落颜色特殊 这是普通段落 ,CSS样式的选择器,ID选择器是根据HTML标签的id属性 来进行标识的。 ID选择器用“#”表示，如“#title”。,解决方案：使用Class选择器也是可以的，但是使用ID选择器是非常好的选择。,刚才是某几个段落特殊；但是现在我希望某一个段落的颜色为红色，还可以怎么做？,伪类,a:link color: #FF0000 /*未访问的链接 */ a:visited color: #00FF00 /* 已访问的链接 */ a:hover color: #FF00FF /* 鼠
10、标移动到链接上 */ a:active color: #0000FF /* 选定的链接 */,CSS样式的选择器,1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。,在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态 、已被访问状态、未被访问状态和鼠标悬停状态。,注意：,应用样式到网页中,内嵌样式表 内嵌样式表使用格式如下：行内（内联）样式表 外部样式表文件（导入样式）,样式规则,如果希望本网页内的所有同类标签都
11、采用统一样式，这时应采用内嵌样式。,其实前面所用的就是内联样式表这种方式,样式表的三大应用方式：,内嵌样式表, h2color:blue;font-weight:normal;font-size:16px;font-family:黑体; P font-family:“隶书“;font-size:18px;color:#FF0000; 改变别人 不如改变自己改变别人很难其实 改变你自己更难你固有的观点你刻意坚持的理念对于你也许很适用但这不等于别人也同样适用 ,样式表,所有的段落都采用 P样式，保证样式统一,改变别人 不如改变自己改变别人很难其实 改变你自己更难你固有的观点你刻意坚持的理念对于你也
12、许很适用但这不等于别人也同样适用 ,行内（内联）样式表,解决方案：添加行内样式。,如果要将“其实 你改变自己更难”这个段落得文字加上下划线，怎么办？,本段标签采用了行内样式,行内（内联）样式表, h2color:blue;font-weight:normal;font-size:16px;font-family:黑体; P font-family:“隶书“;font-size:18px;color:#FF0000; 改变别人 不如改变自己改变别人很难其实 改变你自己更难你固有的观点你刻意坚持的理念对于你也许很适用但这不等于别人也同样适用 ,样式表,所有的段落都采用 P样式，保证样式统一,外部样
13、式表(导入样式),解决方案：使用外部样式表。,前面我们谈到样式表就像网页华丽的外衣，可以让网页随时更换衣裳，那如何实现呢？如果希望一个网站中多个页面的样式保持一致，又该如何做？,外部样式表(导入样式),两种让网页与外部样式表关联的方式： 链接（LINK ）外部样式表 导入（import）外部样式表,使用LINK（链接）标签 :,第一步：创建样式表文件outcss.css,第二步：在网页中链接此样式表,第三步：浏览查看各网页,引入的样式文件,链接外部样式表（LINK）,使用import （导入）标签 : import newstyle.css;,引入的样式文件,导入外部样式表（Import）,注
14、意：其他的CSS规则应该仍然包括在Style元素中，但所有的import声明必须放在样式表的开始部分。,有三种方式将CSS应用到网页中：使用行内样式表使用内嵌样式表使用外部样式表,CSS常用的选择器：HTML选择器、ID选择器、Class选择器，还有伪类。,34,CSS有哪些常用的选择器？ 有几种方式将CSS应用到网页中？ 标签可以放在标签中吗？,小结1,标签不可以放在标签中，它只可以放在标签中。,35,常用的样式属性,常用的文本属性font-size 文本的字体大小font-family 文本的字体font-weight 文本字体的粗细font-style 文本的字体样式color 设置文本
15、的颜色text-align 设置文本的对齐方式,注意：设置文本颜色用“color”，而不是“font-color”。,36,常用的样式属性,常用的边界、边框和填充属性,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,margin,border,padding,border-width 边框的宽度,padding-left 左填充,padding-bottom 下填充,37,常用的样式属性,常用的背景属性background-color 设置背景颜色background-image 设置背景图像background-repeat 指定背景图像是否如何铺排,menu background-image: url(“images/menu.gif“); background-repeat: repeat-y; p background-color: #00FF00;color:#FFF; ,38,小结2,要实现如下的样式效果，应该如何编写代码。,代码示例,39,DIV+CSS布局实例,本例将要完成的布局效果如下图。,如何让多个DIV在同一行显示？,代码示例,40,DIV+CSS布局实例, 顶部广告区 导航区纵向导航区内容A内容B内容C内容D内容E内容F内容G内容H底部版权区,
