从今天开始我要出几期关于WEB开发技巧的文章,希望给大家有所帮助!这一篇主要介绍html和css的使用技巧,在后期的文章中将会有javascript,jsp等与web开发相关的文章发表。
一、 什么叫多窗口 |
我们用一个例子说明多窗口概念, 本内容首页是一个多窗口网页,它有三个窗口, 上面一个窗口,下面两个窗口,左下方的窗口带有滚动条。 从屏幕上我们可以看到,这三个窗口内容有一定的联系。屏幕上方的窗口是办公电话的大分类,将办公电话分成六类,每一类用一个矩形图标表示,当鼠标点击上方窗口中的某一类时,左下方窗口的内容随之改变,左下方窗口列出该类电话的部门。当鼠标点击左下方某个部门后,右下方窗口出现该部门的电话号码。和单窗口的屏幕相比,多窗口的信息量增加了,而且易于操作,非常直观。 |
二、 分割窗口 |
在屏幕上分割多个窗口是如何实现的呢?下面介绍用HTML书写多窗口格式。在HTML中,使用<FRAMESET>做为分割窗口的标记。<FRAMESET>是一个双向标记,有开始和结束标记。 |
<FRAMESET>标记内使用了一个标记符号<FRAME>,用它来指定每一个窗口的内容。包含<FRAMESET>的HTML文档中不能包含<BODY>标记,如果在<FRAMESET>的定义中又使用了<BODY>标记,则浏览器只解释<BODY>包含的内容,而忽略<FRAMESET>。 |
用<FRAMESET>……</FRAMESET>取代<BODY>……</BODY>标记后,可以在屏幕上安排多个窗口。 |
1:横向分割窗口 |
<FRAMESET>的ROWS属性说明窗口的横向分割,ROWS的等号后面是一串数字,它们之间用逗号隔开,有几个数字就划分成几个窗口,窗口之间有明显的分隔线。ROWS后面的数字可以用像素值、 百分比或剩余值以及这三种方式的混合使用。 下面用百分比表求法说明窗口的横向分割。 |
ROWS等号后面使用百分比是最直观的,每一个百分比数字表示窗口占总窗口的百分比。例如,ROWS后面的百分数取值为20%、40%、40%,一般百数值在1%-100%之间,如果几个窗口的取值总和超过百分之百,则每个窗口按比例缩小。如果不足百分之百,则每个窗口按比例扩大。 |
如例29其代码如下 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例29</title> </head>
<frameset rows="20%,40%,40%">
<frame src="file1.htm"> <frame src="file2.htm"> <frame src="file3.htm"> </frameset><noframes> </noframes> </html>
|
显示结果是将屏幕横向分成三个窗口,窗口的比例是2:4:4。注意暗绿色字本代码。 |
2:纵向分横窗口 |
纵向分割窗口是在<FRAMESET>标记中,用COLS属性实现的,COLS的使用方法与ROWS属性使用方法相同。例如仿照横向分割窗口的方法,按照百分比对屏幕做纵向分割。 |
例30 纵向分割窗口,其代码如下: |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例30</title> </head>
<frameset cols="20%,40%,40%">
<frame src="file4.htm"><frame src="file5.htm"><frame src="file6.htm"></frameset><noframes></noframes> </html>
|
(注意暗绿色字体代码)代码中<fram>将在下面解释。 |
3:纵向、横向同时分割窗口 |
如果想在同一屏幕上同时做纵向和横向分隔,则需要使用<FRAMESET>嵌套。格式如下: |
<FRAMESET COLS=….> |
<FRAMESET ROWS=….> |
</FRAMESET> |
<FRAMESET ROWS=…> |
………. |
</FRAMESET> |
…. |
</FRAMESET> |
例如,用ROWS和COLS两个属性可以设置这样的窗口,将屏幕纵向分成左右两部分,左边分成上下两个窗口,右边分成上下三个窗口。 |
例31 在屏幕横向纵向同时分割窗口。 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例31</title> </head>
<frameset cols=50%,50%"> <frameset rows="50%,50%"> <frame src="file7.htm"><frame src="file8.htm"></frameset> <frameset rows="33%,33%,33%"> <frame src="file9.htm"><frame src="file10.htm"><frame src="file11.htm"></frameset> </frameset><noframes></noframes> </html>
|
要仔细理解暗绿色字体的意思。其中<fram>将在下面解释。 |
这个例31将屏幕纵向平均分隔成两部分,每部分占50%;左半部分用<FRAME>语句上下分成两部分,每部分各占50%;右半部分用<FRAME>语句上下分成三部分,每部分各占33%。所以,这段语句执行的结果是屏幕上共有五个窗口,左边两上,右边三个。 |
三、 窗口修饰 |
用FRAMESET分割窗口之后,需要在窗口内加入内容以及对窗口加以修饰,这里介绍一个新的标记<frame>可以完成这两个功能,本节介绍如何用<FRAME>修饰窗口。 |
<FRAME>是个单向标记。使朦胧和时将它写在<frameset>的开始和结束标记之间,它用六个属性描述每个窗口风格,这六个属性是:SRC、NAME、MARGINWIDTH、MARGINHEIGHT、SCROLLING、NORESIZE。 |
应用<FRAM>的格式是: |
<FRAMESET ROLS……> |
<FRAME….> |
1:下面介绍<FRAME>六个属性 |
①:SRC属性 |
SRC属性用来链接一个HTML文件,格式如下: |
SRC="URL" |
如果一个<FRAME>中没有SRC属性,则该窗口显示为空。 |
②;NAME属性 |
NAME属性表示该窗口的名字,该属性是可选的。 |
③:MARGINWIDTH属性 |
MARGINWIDTH属性是用来控制窗口内显示的内容与窗口左右边缘的距离,该属性是取一个像素值,默认为1,若设定值小于1,则各个窗口与窗口之间的内容距离太近,显示效果不好,该属性是可选的。格式如下: |
MARGINWIDTH=n |
④:MARGINHEIGHT属性 |
MARGINHEIGHT属性用来控制窗口内显示内容与窗口上下边缘的距离,与MARGINWIDTH使用相同,该属性也是可选的。格式如下: |
MARGINHEIGHT=n |
⑤:SCROLLING属性 |
SCROLLING属性,用于描述该窗口是否设有滚动条,它可以有YES/NO/AUTO三种取值。YES表示无论什么情况都有滚动条;NO表示无论什么情况都没有滚动条;AUTO表示根据具体情况决定有无滚动条。也就是说,前两种取值表示滚动条与窗口内容多少无关,而第三种取值表示当内容充满窗时,才有滚动条。该属性也是可选的,默认值是AUTO。格式如下: |
SCROLLING=YES或NO或AUTO |
⑥:NORESIZE属性 |
NORESIZE属性是一个标记,没有取值。它说明用户是否可以自行用鼠标调整窗口大小,如果设定了NORESIZE属性,则窗口不能调整。如果缺省,则可以自行调整窗口大小。 |
2:<NOFRAMES>标记的使用 |
<NOFRAMES>标记是一个双向标记,包含在<NOFRAMES>标记之间的内容,是给不能使用多窗口的用户浏览的,而能够使用多窗口的用户,看不到<NOFRAMES>标记之间的内容。 |
例如,<NOFRAMES>的语句,给读者一个提示,如果读者使用版本低的浏览器,就会看到该语句标记的内容。格式如下: |
<NOFRAMES> |
如果你看到这个信息,说明你的浏览器不能阅读FRAME窗口的内容,请更换浏览器版本。 |
</NOFRAMES> |
四:将文件内容放入相应窗口 |
多窗口建立起来以后,要在各个窗口内放入相应内容。如本章前面的例子所述,屏幕上的每一个窗口对应一个FRAME语句。有<FRAME>标志中的SRC属性链接相应的文件,该文件内容就显示在<FRAME>对应的窗口之中。各个窗口内容可以是互相独立的,也可以是互相关联的。如本页面所求,右边是列出目录,当鼠标单击一个目录时,右边窗口中出现该目录所对应的内容。 |
例32 将屏幕纵向分成两个窗口,左窗口放一个文件内容,右窗口放另一个文件的内容,两个窗口的内容相互独立。其代码如下: |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例32</title> </head> <FRAMESET COLS="50%,50%"> <frame src="UntitledFrame-1.htm"> <frame src="UntitledFrame-2.htm"> </FRAMESET><noframes></noframes>
</html>
|
如果窗口之间的内容是关联的,鼠标在一个窗口操作,另外一个窗口的内容会随之改变,这就需要在窗口之间建立链接。怎样实现这种链接呢?这里我们介绍一个新的属性TARCET,用这个属性可以国在HTML的多个标记中,其中常用的几种方式是: |
1:写在<A>标记中:除了写出被链接的文件之外,还要写出被链接文件将显示的窗口名。 |
格式如下: |
<a href="url"tarcet+"被链接的文件名"> |
2:写在<BASE>标记中 |
如果在同一个HTML文件中有多个链接,这多个链接的内容又想在同一个窗口显示,可以在这个HTML文件中加入一个语句,用<BASE>标记写在<HEAD>标记中。 |
格式如下: |
<base trget="文件名"> |
五、本章小结 |
本章重点讲解多窗口的制作,介绍了两个标记:<FRAMESET>....</FRAMESET>和<FRAME> 以及它们的属性,另外,扩展了一个属性TARGET的应用。 |
<FRAMESET>和<FRAME>这两个标记,用来划分窗口,并定义每个窗口的名称及大小。利用〈FRAMESET〉的属性,可以根据使用者的需要划分任意个窗口,而每个窗口内显示的内容,用<FRAME>标记引出。 |
TARCET这个属性可以用在许多标记中,本章介绍了它在<A>和<BASE>标记中的使用。 |
本章需要熟悉的标记及属性。 |
标记、属性 |
用 途 |
<FRAMESET>....</FRAMESET> |
多窗口标记 |
<ROWS> |
<FRAMESET>中的一个属性,横向分隔窗口,它的取值有四种方式:
剩余值表示,如:*,*, |
像素值表示:如20,30 |
百分比表示:如20%,30% |
混合表示:如20%,30,* |
|
CLOS |
<FRAMESET>中的一个属性,纵向分隔窗口,它的取值与ROWS属性相同 |
<FRAME> |
定义一个窗口 |
SRC |
<FRAME>中的一个属性,用于链接一个HTML文件 |
NAME |
<FRAME>中的一个属性,用于定义一个窗口的名称 |
MARGINWIDTH |
<FRAME>的一个属性,用于控制窗口内容与左右窗框的距离 |
MARGINHEIGHT |
<FRAME>的一个属性,,用于控制窗口中内容与上下窗框的距离。 |
SCROLLING |
<FRAME>中的一个属性,用于定义窗口是否设滚动条。有YES、NO、AUTO三种取值方式。 |
NOSIZE |
是<FRAME>中的一个属性,它是一个标志性属性,若<FRAME>中带有NOSIZE,则窗口大小不能用鼠标调整 |
<NOFRAME>...</NOFRAME> |
当浏览器支持<FRAME>功能时,不显示<NOFRAME>..</NOFRAME>之间的内容,当不支持时则显示。 |
TARGET(<BAST>) |
在多窗口显示中,用于指定链接文件的窗口,是<BASE>标记的一个属性,同一个HTML文件中被链接文件放在由TARGET指定窗口中。 |
TARGET(<A>) |
是<A>标记的一个属性,<A>标记中链接的文件内容放在由TARGET指定的窗口中。 |
|
一、使用STYLE属性
将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如:
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签
将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
例如:
<STYLE TYPE="text/css">
<!--
BODY {
color: BLUE;
background: #FFFFCC;
font-size: 9pt}
TD, P {
COLOR: GREEN;
font-size: 9pt}
-->
</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。
三、使用 LINK标签
将样式规则写在.css的样式档案中,再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入
跟LINK用法很像,但必 放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">
<!--
@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如:
<STYLE TYPE="text/css">
<!--
@import url(http://yourweb/ example.css);
-->
</STYLE>
要注意的是,行末的分号是绝对不可少的!
五、使用<span></span>标记引入样式
例如:<span style="font:12px/20px 宋体 #000000;">网页教学网</span>
http://blog.csdn.net/success_dream/article/details/1361404
相关推荐
web开发必备,含:ajax实战中文版.pdf,CSS中文手册.chm、Div+CSS 布局.pdf,DOM文档.chm、HTML基础.chm、xml手册.chm,正则表达式.CHM,JS宝典.chm
iOS Web开发入门经典:使用HTML、CSS、JavaScript和Ajax
Web设计与前端开发秘籍:HTML & CSS 设计与构建网站 [HTML & CSS: Design and Build Websites] 英文版, 非扫描版, 带章节书签
Web编程入门经典:HTML、XHTML和CSS(第2版),喜欢的随便下
本文档是《使用HTML和CSS开发WEB网站》一书所整理的一份文档,涵盖书本上基本知识要点,及通用、常用知识点总结、归纳于一体,是学习WEB网站开发的好助手!
前端设计人员必备教程;图文并茂,轻松掌握最新设计技术;全面应用HTML5和CSS3,一步跨入量前沿。 本书将当前WEB设计中热门的响应式设计技术与HTML5和CSS3结合起来,为...本书适合各个层次的web开发和设计人员阅读。
Written for web programmers and designers, this reference alphabetically lists every HTML tag supported by Netscape Navigator and Internet Explorer, along with their attributes, event handlers, CSS ...
资源名称:跨平台的移动Web开发实战 HTML5 CSS3资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
Web前端开发案例教程(HTML5+CSS3)(微课版)_源代码.zip
HTML5与CSS3web前端开发技术习题答案
HTML5及CSS3web前端开发技术习题答案解析
HTML5+CSS3移动Web开发实战(第2版)-电子教案.rar
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能灵活使用 CSS排版 能力目标 学会使用 CSS制作电子相册 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 ...
Web前端开发案例教程(HTML5+CSS3)(微课版)_PPT课件.zip
本书原著作者是美国的J.DucKett,主要介绍了HTML、XHTML和CSS的基础知识,内容详实、深入浅出,是学习前端web开发技术的一本非常优秀的教材。在学习最新和更高级的web前端开发内容,如HTML5和JavaScript之前,使用这...
自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版不仅介绍了文本、图像、链接、列表、表格...
《HTML5+CSS3 Web前端开发》 编著:唐四薪 出版社:清华大学出版社 ISBN: 978-7-302-49192-7 页数:308页 定价:39元 出版时间:2018年5月
《响应式Web开发项目教程(HTML5+CSS3+Bootstrap)》-教学PPT.rar,需要下载的从速!