当前位置: 首页 > >

DIVCSS布局技术在网页设计中的应用

发布时间:

第21卷笔1期
2009笮3嚣

葳汉工程职业技术学院学报
]omnal ofWuhan Eng)neermg]nsttttlte

Vol

21

No

I

March:f}09

DIV+CSS布局技术在网页设计中的应用
梁静琳
(武汉工程职业技术学院 摘
湖北

武汉:430080)



DlV+CSS是目前比较流行的一种髓页布局方式,本文介绍了DlV+CSS的特点,并通过

一个实例说明了DIV+CSS布局的基本用法及核心技术,同时阐述了引入DIV+CSS对今后网页 设*萄У挠跋. 关键词DIV;CSS)布局;两荑设许 中图分类号:TP393 文献标识码:A 文章编号:1671—3524(2009)01—0042—04 方式,在XHTML网站设计标准中,不再使用TA— BLE定位技术,而是采用DIV十CSS的方式实现各 种定位.
1.王

一直以来,网页布局都是采用表格(TABLE)布 局,因为用TABLE进行布局简单,制作速度快.设 诗者霹瑷直接通过图像编辑器蘧躁,切图,最艨弄壹 图像编辑器自动生成表格布局的页面.但用TA— BLE布局的页面,其源代码存在大量的冗余代码, 页甏结枣每与表现混杂在一起,菲常不剩予查找信惠 .和管理,更不涮于修改.DIV+CSS的出现弥补了

DlV简介 DIV元素是用来为HTML文档内大块(block

--level)的内容提供结构翻背景的元素.它可以将 文档分割成多个有意义的区域或模块,DIV的起始 标签和结束标签之间的所有内容都是用来构成这个 块麴,其中所雹含元素的特性由DIV标签的羼魏栗 控制.
1.2

W出LE布局的不足,具有以下三个方面的显著优势:
(1)表现穰蠹容稳分离DlV+CSS将设计部分 剥离出来放在一个独立样式文件中,HTML文件中 只存放文本信息,这样的页面对搜索引擎更加友好; (2)提高页蘧测览速度对于同一个页嚣视觉效 果,采用DIV十CSS重构的页面大小要比TABLE 编码的页面文件小得多,前者一般只有后者的1/2 大小,这样测蹩器就不蔫去解柝大爨冗长的标签; (3)易于维护和改版由于多个页面可以共享一 个CSS文件,这样只需简单的修改CSS文件就可以 重耨布局整个阏蛄的页瑟. 因此,现在一些比较知名的网站均采用DIV+ CSS进行网页的排版布局,DIV+CSS已成为一种 嗣贾设计标准.相应的,在网页设*萄е幸 DIV+CSS也已是趋势,并将对传统的网页设* 学产生较大的影响. 1

CSS简介 CSS(Cascading Style Sheet)译捧滋叠样式袭,

是用于控制网页样式并允许将样式信息与网页内容 分离的一种标记性语言.使用CSS可以将格式和 结构分离,能更好魏控裁夏瑟布蜀,及两剿箨津积菱 小,下载照快的网页.
1.2.1

CSS语法

CSS样式基本语法:Selector{Property:val— ue;),其中Selector是选择符,Property为属性,val— ue为值.属性和属性值之阅用冒号(:)隔开,多个 定义之闽用分号(;)隔开.搠如:
p{COLOR:#FF0000;BACKGROUND:# FFFFFF}

此铡效采是将段落审的文字颜色设秀#

DIV+CSS简介

FF0000,段落的背景颜色没为#FFFFFF.
1.2.2

CSS选择符

ⅨV+CSS是应用在XHTM乙中的一种布局
救疆丑期:2009—02-16

CSS样式的强大,灵活蓠先体现在选择符上.

侔毒篙奔:粱静琳(1981~)t发.鲂教.E-maili§l@wgxy.net

万方数据

粱静琳:DIV+CSS布局技术在网页设计中的应用

43

灵活选用选择符是布局的基础,这里介绍几种基础 的选择符. (1)id选择符 用CSS来布局网页主要通过"div"标签来实现, 而div的样式通常是通过id选择符定义的.例如, 定义一个div: <div id一"main"></div> 然后在样式表中定义id的属性:
#main{height:380px;width:778px;)

编排网页.因为用这种方式排版的网页代码简洁, 更新方便,能兼容更多的浏览器.盒子模型主要具 有4种属性:内容(content),边框距(padding),边界 (border)和边距(margin).下图是CSS盒子模型的 示意图:

要注意的是网页文档中的每个元素的id值不 能重复,只能是唯一的. (2)类型选择符 类型选择符就是网页元素本身,定义时直接使 用元素名称.如在样式表中给body元素定义样
式:
圈1

CSS盒子模型

3 body{/*<定义页面属性>"X-/) (3)通用选择符 通用选择符是一种特殊的选择符,用-R-符号表

DIV+CSS应用实例

用CSS布局,首先要考虑网页信息的语义和结 构.在web中,语义可以理解为构建网页的各种元 素,结构则是由这些语义元素组合搭建起来的框架. 也就是说,首先要清楚页面要显示的信息,并根据这 些信息将一个网页分成不同的内容块.下面以经典 的三栏式布局为例进行介绍. 3.I划分基本区块 首先将网页分为三个内容块:

示,用来定义所有元素对象的样式.例如:
-R-{text—align:center;font—size:12px)

上面的样式将文档中的所有文字居中,大小设
为12px.

(4)分组选择符 分组选择符并不是一种选择符类型,而是一种 选择符使用方法,用于同时对多个对象定义相同的 样式.例如:
td,div,a{font—size:14px;)

(1)heade——页面头部; (2)content——页面主体内容,其中有sider边
栏区域和main主体区域;

将单元格,块内以及超链接中的文字大小设为
14px.

(3)footer-页脚,版权区域.

编写文档如下:

(5)包含选择符 包含选择符用于给一个元素的子元素定义样 式.如:
#siderbar a{text—decoration:none;back- ground—color:#FFFF99;text—decoration: none;display:block;}

<body> <div id="webbody"> <div id="header">头部区域</div> <div id="content"> <div id="sider">边栏区域</div> <div id="main">主要内容区域</div> </div> <div id="footer">版权区域</div> </div>

就是给#siderbar下面的子元素a(超链接)定 义样式. 2

CSS盒子模型

</body> 设置CSS样式如下: *{margin:Opx;padding:0px;)/*<定义所有 标签属性为边界及填充均是0>*/
body{text—align:center;padding—top:5px;}/

CSS的盒子模式是DIV+CSS网页布局的核 心.传统的表格布局是通过大小不一的表格和表格 嵌套来定位排版网页内容,改用CSS布局后,就是 通过由CSS定义的大小不一的盒子和盒子嵌套来

-X*<整个文档中的文字均居中>*/

万方数据

蓬莲

武汉■翟职堑技零肇浣学羧

______-_-______________-___---__-_____H-.....__--_____--.....●_--______-●__●_-一●_______-______________--_--_-________--......_.______________________●-_____--_.______一

辜}webbody{text—align:left;height#800px; width:982px;margin:Opx
auto;

#picnews{background—color:#FF9966;height: 100px;display:block;padding--bottom:lpx} 效果如图3所示.

border--top:lpx;border--right:lpx;border —bottom:lpx;border--left:lpx;}

臣篓

嚣header{height:80px;width:100%;border:lpx
solid#990000;overflow:hidden;}

#content{height:385px;width:i00%;margin—
top:3px;m鑫rgin—bottom:5px; overflow.hidden;) #sider{float:left;height:380px;width:198px;
overflow:hidden;border:lpx solid;}

陌一一■
壅3整磊ul/li谍禺效果霜

匡酉———] ~~……j

2009.I

匾疆隧壅:二:二二:=二二:二二二二二二二]
3.3动态链接 动态链接是网页设计中一个重要技术,链接有 舀静状态:a:link,a:visited,a:hover,a;active,分割 代表默认状态,访问过状态,鼠标经过状态及激活状 态.在定义时,如果需要全部定义,定义顺序不能更 改,郄接照link,visited,hover翻active豹颓穿. 下筒在head区域通过动态链接设置添加导航 条效果. <div id="header"> <div id="banner">banner</div>/*<设鬣广 告条区域>*/ <div id="nay"> 条>*/ <ul> <li><a href="#">首贾</a></li:>< /*<设置导航

#main{float:right;height:380px;width:778px;
overflow:hidden; border:lpx solid嚣0033CC;}

#footer{border:lpx solid#CC0033;height: 40px)

这里通过设置#sider酶float藩往势left,# main的float属性为right实现两竖栏的网页效果. 效果如图2所示

边栏区域

主要内容区域

图2三栏布局

li>I《/li> <li><a href="#">新闻中心<妇></li ><li>l</li> 《li><a href="#"》教育培训</a></li ><li>|</li> <li><a href="#">论坛</a><lli> </ul> </div> </dive> 在导航条通过列表标签ul/li定义,此时导航效 果是竖羲}到表样式,加上CSS群式则将这个捌裘变 为一个横向导航条和超链接. CSS样式设跹如下:
#banner{height:55px;background—color:# 0099CC;padding--bottom:lpx} #nay{height:20px;text—align:center;padding—
top:lpx;padding--left:60px;

3.2利用ul/li元素实现网页信息的弼表显示 ul/li列袭元素能够实现网贾结构化列表,常用 于实现导航菜单,新闻信息,标题划表等.列表可以 配会div元素实现很多的阚页毒麓. 下面代码是在边横区域内利带ul/li实现标题 列袭. <div id="sider"> <ul> <li id="pienews">图片新闻</li> <li>通知与公告</li> <li>今日天气</li> <li>友情链接</li> </ul> </div≥- 设置CSS样式如下:
#sider|i{list~sly|e—type:none;margin:0.5px; }

padding--bottom:Opx)

万方数据

粱静臻;DIV+CSS毒赫蔽零在潮炙设计孛鹃应臻

45

#header li{float:left;list—style—type:none;mar4

#jpin P{text—indent:2em;margin—top: 20px;padding:4px;font—size:14px》

gin:0.3px;}/*通过float属性设置实褒横向导航
镢*| #header a,#header li a:link,#header li
ted
a:visi—

#discrib{float:left;margin:20px;}/*定义 图片和说明文字的属性,使两者一起向左浮动,实现 与文本混撵效果篝/
background—color:# #discrib img{border:0;height:50%;)/*

f text—decoration:none

ffff99;width:100px;height:20px;

border设置为0,这样定义图像为链接对象时,不会 显示薤色懿逮橇鼍/
#discrib li{font—size:12px)效果罔如下:

display:block} #header 99ff99;)
li

a:hover{background—color:#

效果巨魏下:

鞭S鬻文滋辩效桑强

翻4动态链接实现导航菜单效果圈

4

对网页设*萄У挠跋

3.4图文混排 图文混排是制作精美页面所必须面临的技术难 点.下嚣利用CSS实现简单的躁文混排效果,并对 鹜添加了文字说明. 在#main中放置内容:
<div id="main">

DlV十CSS网页布局将成为网页设计的标准. 今后的阙页设*萄б不崴嬷泻芑鸬谋浠,主要 表现:(1)转变网页制作的愚路传统的前台网页设 计首先考虑外观,色彩搭配,而改用CSS布局后首 先考虑页面内容的语义积结枣鼋,因此在教学中器转 变网页设计的思路.(2)转变教学重点采用DIV +CSS布局后,表格将回到基本功能,即显示和组织 数据,不再作为潮荑布局的重要工具.那么教学豹 重点就要转向CSS样式.虽然CSS一直都是比较 重要的内容,但其作用仅是增强网页特效,CSS用于 毒是鼹,要求学溺者对CSS要有更深劐的毽绥. XHTM乙语言也是一个重点,采用CSS布局詹,网 页布局就需要完全的手工编写代码,这需要学*者 熟练掌握XHTML语言. 当然,并不是说DlV十CSS能完全取代表格, CSS也有不足之处:(1)完全用手工编写代码,开发 速度蠖.对初学者来说,完全用CSS操缴网页,甚 至用CSS来描绘完美的设计图,是件非常难的事. 对于刚刚接触网页设计的学生来说,传统的表格布 局憩让学生缀容荔的掌攘基本的网页设计技术. (2)DIV+CSS还没有实现所有浏览器的统一兼 容,也就是说不是所有的浏览器都支持CSS布局的 页瑟,因既使蕉范藩有一定黪局限性. (下转第52页)

<div id="jpin"> <h2>精品课介绍</h2> <div id----"discrib">/*定义discrib,使图片 和说明文字放在一个块中*/ <a href一"#"><img src一"../pic/TUl. 】PG"alt="撬图"/></a> <ul> <li>主讲老师:****"X-***</li> <li>职称:*.X-***簧**</li> </ul> </div> <p>"计算执绘躁"课程是趱着CAD技术在 机械设计过程中……《/p> <p>"计算机绘图"依托机……</p> </div> </div> 设置CSS样式如下:
#jpinh2{padding—bottom.12px;border— bottom:2px solid#9933cc;text—align.center;}

万方数据

52

武投下程联盈技术掌院学摄

并随时补充审稿情况.编辑对各个栏目的稿源情 琵,稿件链予衡耱流翟等都霹浚一嚣了然. 编辑部还可应用财务软件将编辑部的收支,订 阅情况,版面费收入,经销状况,印刷费用全部输入 诗算橇,实褒管理懿系统纯. 3
[2】

2005,(6):153—155.



瓣.沦科技鹈镧壤辑办凳憋爨彝讫与弼终纯[弱.理技镣

掇t2004,(4)ts2一S3. [3]刘黼-姚弘芹,赵臀骖.科技期刊编辑模式现代化实践的探讨 [J].北京理丁大学学报:社科版,8005,7(6)t90~93. £《耪荣照,壤霞笾;瓣络郅壤下攀掇发震熬登赉之路【j3,瀵黧广 播电视太学学搬,2006,23(2):99—100.

结束语

Is]

吴庆嶷,邹继艺.网络时代高校学报编辑管理现代化[J].景德 镇嘉专学摄,2e06,21(1):25—28.

总之,现代化的技术手段改变了传统编辑流程 分工明确,编辑职能比较单一的局鲻,使编辑幽过去 主要翘受藕捧加王,变必集编辑,修改,撵簸,较对于 一黯,大大提高了期刊的编辑印刷臆量,缩缀了期刊 的出版周期.辨把编辑从事务性的劳动中解脱出 来,为编辑更多她转惠毯造性劳动提供了条僚. 参考文献
[i】赛警囊,辩琦.浅薪蘩鞲工箨瑗捷讫疆3.黑霆茳张会群学,

[《袁酪锻.学术期秘瓣维生存与编辑索旋酶挺秀£j:.编辑攀报,
2006.18(5)t389~391.

£7]

黄娟.赋高校学报编辑部管理藤统的初掇[J].广东交通职业 羲零学院擘摄,2007,6(1≥t4s一撼.
'

[8]佟晰,金娜,韩

萍.科技期刊编辑的现代化管理及廊用

[J].科技情报开发妁经济,2008,18(3):90一91+

Towards Changes in Editorial
LI

Work Model

Wenying

paper

Abstract:Computers and network have brought about revolution in editorial work model.Traditional edit changes tO machine edit or online edit.
Key words:modernization in edit;edit model;revolution

(贵经缡辑;蓑晓)

(k-接第45茭)
2007.

参学文献
£l】袋窜宏.CSS潜韭耀菇奉爨志遘[M].就索;潦华太擘壤耀社,

[23郭伟俸.CSS全程拯鬻[M].北京t电子工业出版牡,2008.

The Application of

DIV+CSS in

the

Web

Design

LIANG Jinglin
Abstract:DIV+CSS is a popular web layout style.This paper describes the characteristics of DlV十 CSS,and ullustrates its basic application and key technology in the layout design via an example.At the same time,the influence of introduction of DIV+CSS on the web design teaching is discussed.
Key words:DIV)CSS;layout;web design

(蒲任编辑:策晓)

万方数据




友情链接: