基于新Web标准下的DIV_CSS网页布局方法探讨
更新时间:2023-08-13 17:15:01 阅读量: IT计算机 文档下载
- web标准是什么推荐度:
- 相关推荐
网页制作的资料
本栏目责任编辑:贾薇薇计算机工程应用技术
基于新Web标准下的DIV+CSS网页布局方法探讨
陈道贺,王芳
(郑州大学升达经贸管理学院资讯系,河南郑州451191)
摘要:随着利用旧的页面布局的弊端逐渐暴露,新Web标准的重要性越来越被人们所重视。本文主要讨论了在新Web标准下的DIV+CSS网页布局方法,这种方法使网页外观与结构分离,使站点的访问及维护更加容易,最后通过一个实例介绍了其基本操作流程。关键词:网页布局;DIV;CSS样式
中图分类号:TP309文献标识码:A文章编号:1009-3044(2008)11-20343-04
TheDiscussionaboutLayoutStructureofDIV+CSSBasedontheNewWebStandard
CHENDao-he,WANGFang
(ComputerScience,ShengdaEconomics,Trade&ManagementCollegeofZZUniversity,Zhengzhou450000,China)
Abstract:Withthenastyplayoftheoldwebpagelayoutstructure,thenewWebStandardhasreceivedimportancemoreandmore.ThepaperisconcernedthelayoutstructureofDIV+CSSbasedonthenewWebStandard.Themethodseparateswebpageappearancefromstructure,whichmakesiteasytovisitandmaintainwebsite.Aninstanceismadetointroducetheoperationflow.
Keywords:layoutstructure;DIV;CSS
1早期常用的网页布局方法
早期的网页布局,通常采用以下四种方法
,如表1所示:
这些布局的方法在很长时间以来,都是较为流行的网页布局方式,或是其中的一种,或是这四种布局方式的混合使用。随着网络技术的不断发展和许多新的上网设备的出现,使得这些网页布局方式越来越不能适应新的要求。
新的Web标准在国内逐渐普及,一种基于DIV+CSS的新型网页布局方式开始流行,一些大型门户网站都已经完成了网站重构,一些中小型网站也在逐步改善之中。
2新的Web标准
结构(Structure)、表现(Presentation)和行为Web标准是一系列标准的集合,在Web标准中,把网页分成4部分:内容(Content)、
(Behavior)。
文档或者图片等。注意这里强调的“真正”,是指纯粹的数据信息本身。比如“内容”就是页面实际要传达的真正信息,包含数据、
一些辅助的信息,像导航菜单、装饰性图片等。
作者、章、节、段落和列表,这些就称为结构。结构使内容更加具有逻辑“结构”就是把混乱的内容进行结构化,比如加上标题、
性,易用性。
虽然定义了结构,但是内容还是原来的样式没有改变,例如字体没有变大,正文的颜色也没有变化,没有背景,没有修饰。所有这些用来改变内容外观的东西,称之为“表现”。
“行为”就是对内容的交互及操作,例如,使用JavaScript判断一些表单提交,或者实现菜单的显示和隐藏等。
内容、结构、表现和行为”这4个方面组成的。“内容”是基础,然后是附加上去的“结构”和“表HTML和XHTML页面都是由“
现”,最后再对它们加上“行为”。针对“结构、表现和行为”这三个部分,W3C组织制定了大部分的标准:
(1)结构化标准语言XHTML和XML;
收稿日期:2008-02-27
作者简介:陈道贺(1978-),女,河南郑州人,讲师,硕士,主要研究方向为计算机网络;王芳(1973-),女,河南郑州人,讲师,硕士,主
要研究方向为多媒体技术及应用。343
网页制作的资料
计算机工程应用技术本栏目责任编辑:贾薇薇(2)表现标准语言CSS;
(3)行为标准主要包括对象模型(如W3C的DOM)、ECMAScript等。
这些标准大部分由W3C(WorldWideWebConsortium)起草和发布,也有其他的一些组织,比如上面的ECMA(EuropeanCom-puterManufacturersAssociation)的ECMAScript标准。
新的Web标准是W3C在2000年底发布的XHTML1.0和XML1.0,CSS2.0等。
手持设备或其它支持采用新标准的优点有很多:使得网页下载速度更快;内容可以被更广泛的设备所访问,比如屏幕阅读器、
上网的新型设备;更少的代码和组件,网站易于维护;带宽要求低,成本降低等等。
3DIV+CSS网页布局方案
根据新的Web标准,采用DIV+CSS的网页布局方案,可以把“内容”放在DIV(Division,区块)中,结构由DIV产生,最后使用
表现”重构网站布局,丢弃繁冗复杂的表格。DIV+CSS的布局方式使得内容和表现CSS(CascadingStyleSheet,层叠样式表)来进行“
分离,如果采用外部样式表,可以大大简化网站代码的字节数,降低了服务器的负担,使得下载速度更快。
DIV+CSS的布局方法是基于盒模型的概念,可以把每个DIV块看成是一个盒子,盒子里面的东西和盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1
所示。
图1盒子模型
用DIV+CSS设计思路是这样的:
(1)用DIV来定义语义结构;
(2)为这个CSS定义的盒子内加上内容,如文字、图片等;
线条边框、对齐属性等;(3)最后用CSS来美化网页,如加入背景、
下面通过一个实例来具体说明,用表格布局的页面如图2所示,接下来我们用DIV+CSS
的布局方式来重构这个页面。
图2用表格布局的页面
首先用div来定义结构:
这个页面的布局是一个典型的上中下版面分栏结构,如图3
所示。
图3
其结构代码如下:用div来定义结构
<body>
<divid="header"></div>
<divid="main">/*main块里面嵌套了两个子块*/
<divid="menu"></div>
<divid="content"></div>344电脑知识与技术
网页制作的资料
本栏目责任编辑:贾薇薇
</div>
<divid="footer"></div>
</body>计算机工程应用技术
上面我们定义了四个大盒子,分别是body、header、main、footer,在main这个盒子中又分了左右两个小盒子:menu(菜单栏)和content(内容)。把header、main和footer这三个盒子放进body这个大盒子,是为了让这些盒子等宽,并从上到下整齐排列,然后在整个页面中居中对齐,方便控制。
定义body的样式是:
body{
font-family:"宋体",Arial,sans-serif;/*定义网页默认字体样式*/
font-size:12px;
margin:10pxauto;/*定义上下边界为10px,左右自动,使得左右居中*/
height:auto;width:800px;/*定义宽和高*/
border:1pxsolid#006633;/*定义边界为1px宽,实线,颜色为#006633*/
}
在页头的整个区块里,应用一幅背景图header.gif即可。其样式代码为:
#header{
height:145px;width:800px;/*定义宽和高*/
background-image:url(header.gif);/*定义背景图片*/
background-repeat:no-repeat;/*定义背景图片不平铺*/
margin:0px;/*定义上下左右边界为0px*/
}
为了统一定位menu和content这两个子区块,main区块里放置两个区块,的样式代码为:
#main{
height:330px;
width:800px;
margin:0px;
}
菜单栏menu区块了放置了一个背景图片menu.gif,靠左浮动,代码如下:
#menu{
float:left;/*定义menu区块的位置为左浮动,一般定义两个并排放置的区块时常用float属性*/
background-image:url(menu.gif);/*定义背景图片*/
background-repeat:no-repeat;/*定义背景图片不平铺*/
margin:0px3px0px0px;/*依次分别为上下左右边界*/
width:200px;height:330px;
}
超链接的文字用无项目列表充当内容,在menu区块里加入链接的内容项:
<divid="menu">/*这是常用的定义导航栏的方法*/
<ul>
<li><ahref="#">公司结构</a></li>
<li><ahref="#">企业文化</a></li>
<li><ahref="#">新闻资讯</a></li>
<li><ahref="#">产品展示</a></li>
<li><ahref="#">客户案例</a></li>
<li><ahref="#">留言反馈</a></li>
<li><ahref="#">联系我们</a></li>
</ul>
</div>
把ul和li也可以理解成小的区块,下面定义样式如下:
#menuul{
margin:60px60px60px55px;
font-size:14px;
list-style-type:none;
}
#menulia{/*定义导航栏超链接的样式*/
color:#000000;
text-decoration:none;/*文字无下划线*/
padding-top:4px;
display:block;
width:90px;
height:22px;
text-align:center;
background-color:#97c0ff;
margin-left:2px;
}
#menulia:hover{/*定义鼠标移到超链接文字的样式*/
text-decoration:underline;/*文字有下划线*/
color:#ffffff;345
网页制作的资料
计算机工程应用技术
}
内容部分主要放入公司的一些说明,在content中先填入内容:
<divid="content"><p>本公司实行全程服务……</div>
然后定义content块的样式,代码如下:
#content{
float:left;
padding:30px30px;
}
对于版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,样式代码如下:
#footer{
height:20px;width:800px;
margin:0px;
text-align:center;
background-color:#609FFF;
}
最终可以把所有的样式存到另一个样式文件style.css中,其全部样式代码结构如下:
<style>
body{
……
}
#header{
……
}
#main{
……}
#menu{
……}
#menuul{
……}
#menulia{
……
}
#menulia:hover{
……}
#content{
……}
#footer{
……}
</style>
index.htm中的结构代码是这样的:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>飞达电脑维修公司</title>
<linkhref="style.css"rel="stylesheet"type="text/css"/></head>
<body>
<divid="header"><imgsrc="header.gif"/></div>
<divid="main">
<divid="menu">
<ul>
<li><ahref="#">公司结构</a></li>
<li><ahref="#">企业文化</a></li>
<li><ahref="#">新闻资讯</a></li>
<li><ahref="#">产品展示</a></li>
<li><ahref="#">客户案例</a></li>
<li><ahref="#">留言反馈</a></li>
<li><ahref="#">联系我们</a></li>
</ul>
</div>
<divid="content">
<p>本公司实行全程服务……</div>
</div>
<divid="footer">Copyright©2007飞达电脑维修公司版权所有</div>
</body>
</html>
346电脑知识与技术本栏目责任编辑:贾薇薇(下转第376页)
网页制作的资料
计算机工程应用技术本栏目责任编辑:贾薇薇基于点到点交换方式的公共工具访问集成方式比较符合集成开发环境开发过程中的串行工作方式。
图5公共工具访问
5.2构件之间的通信机制
在该集成开发环境中,构件可动态配置且不同类型的构件可集成到系统中,构件之间通信的高效性成为一个不容忽视的问题。在TosIDE中,各功能模块之间通过工具总线进行双向的消息传递。消息是一个用于构件与软总线之间信息交换的数据包,通常包
消息含消息头和消息体。消息头中定义了一系列的约定属性,比如同步/异步,控制/数据,校验信息等等;消息体即为欲交换的数据。
可以处理同步和异步系统调度。
图6消息传递机制示意图
整个系统消息传递机制可描述如下:
(1)构件发出消息,总线查询对应的代理,若无代理则通知组件重发或者处理异常;
(2)如果消息有效,则消息进入总线消息队列中,根据消息头信息,总线可能需要将消息拆分,并根据订阅信息将相关消息送往各个订阅的构件代理,如果没有构件订阅该种消息,向发出消息的构件代理送回异常;
(3)代理在收到系统总线的服务调用后,判断构件有效性,有效则向构件请求服务调用,否则向发出消息的构件代理送回异常;(4)构件在收到代理发来的服务调用请求后,响应并直接和发送消息的构件通信;
(5)系统中各个代理,根据需要轮询系统消息队列,如果得到新的消息则将消息取出,过滤掉不需要的消息,转换为组件能够处理的消息,并根据时序重新组织消息提供给组件;
6结束语
本文是基于无线传感器网路操作系统TinyOS的集成开发环境的研究与设计。针对集成开发环境将各功能模块集成为一个整体的特性,采用“软总线+软构件”的体系结构,这种体系结构具备可扩展性、可维护性、可复用性。
参考文献:
[1]KurtC.Wallnau.PeterH.Feiler.ToolIntegrationandenvironmentArchitecture.TechnicalreportofSEI,CarnegieMeltonUniversity,1994.[2]PaulF.Zarrella.CASEToolIntegrationandStandardization.TechnicalreportofSEICarnegieMellonUniversity.l994.
[3]蔡勇,桑楠,熊光泽.一种基于工具总线的CASE集成模型[J].计算机应用,2002.
[4]杨芙清,梅宏,李克勤.软件复用与软件构件技术[J].电子学报,1999,2(27):68-75.
[5]郭兵,熊光泽,沈艳,等.工具总线模型研究[J].计算机应用,2003,23(5):1-3.
[6]ReissS.Connectingtoolsusingmessagepassinginthefieldenvironment.IEEESoftware,1990,7(4):57-66.
[7]DavidGay,PhilLevis,DavidCuller.SoftwareDesignPatternsforTinyOS.LCTES'05,Chicago,Illinois,USA,June15-17,2005.
[8]罗昔军,马征.定制软件开发平台的研究与设计[J].计算技术与自动化,2006,25(2):108-110.(上接第346页)
4结语
DIV+CSS网页布局方法已经逐步成为主流的网页布局方法,当然在这个过渡时期,并不是所有的网站都已采用这种方法,有些仍然在使用表格及框架的混合,或者是表格及浮动框架的混合,但基于新Web标准下的DIV+CSS网页布局方法必定逐步取代这些旧的布局模式,成为未来发展的方向。
参考文献:
[1]曾顺,精通CSS+DIV网页样式与布局,北京,人民邮电出版社,2007.
[2]李烨,别具光芒DIV+CSS网页布局与美化,北京,人民邮电出版社,2007.
376电脑知识与技术
正在阅读:
基于新Web标准下的DIV_CSS网页布局方法探讨08-13
2015年江苏省高考作文 205-03
班级管理专题博文精选60篇12-26
小四综合实践-关注生活垃圾教案06-11
长期班驱动随堂试题01-16
加强理论学习是增强党性修养的基本途径06-13
Ansys 14.0使用笔记03-26
- 供应商绩效评价考核程序
- 美国加州水资源开发管理历史与现状的启示
- 供应商主数据最终用户培训教材
- 交通安全科普体验教室施工方案
- 井架安装顺序
- 会员积分制度
- 互联网对美容连锁企业的推动作用
- 互联网发展先驱聚首香港
- 公司文档管理规则
- 机电一体化系统设计基础作业、、、参考答案
- 如何选择BI可视化工具
- 互联网产品经理必备文档技巧
- 居家装修风水的布置_家庭风水布局详解
- 全省基础教育信息化应用与发展情况调查问卷
- 中国石油--计算机网络应用基础第三阶段在线作业
- 【知识管理专题系列之五十八】知识管理中如何实现“场景化协同”
- 网络推广方案
- 中国石油--计算机网络应用基础第二阶段在线作业
- 汽车检测与维修技术专业人才培养方案
- 详解胎儿颈透明层
- 布局
- 探讨
- 基于
- 网页
- 标准
- 方法
- Web
- DIV
- CSS
- 厦门市园林绿化工程质量监督站
- 户型解说流程(户型说辞)
- 八年级下册英语第五单元学案
- _一带一路_背景下的环境冲突与矛盾化解_叶琪
- 日本宗教信仰
- 塔罗指导书
- 2011中山大学专业学位研究生入学统一考试-333-《教育综合》考试科目命题指导意见
- 风系统中静压箱特性的研究及应用
- 影视后期制作实习报告
- 高血压是最常见的心血管疾病
- 03第三章 血液080717(66h)
- 周三多管理学第四版试题
- 东华镇联村联户为民富民行动简介
- 2014年秋季期中考试总结表彰大会教导主任发言稿
- 2010山西省NCRE二级VB最新考试试题库
- 建设工程合作协议书
- 如何编制发改委立项用铂金漏板项目可行性研究报告(甲级-发改委-经信委-商务局-备案-核准)
- 2010年4月自学考试传播学概论试题及答案
- 4、销售话术通关演练
- 新编英语教材入门教学