基于DIV+CSS 的个人博客网页设计应用研究.docVIP

基于DIV+CSS 的个人博客网页设计应用研究 ? 湛江机电学校 吴冬晨 ? ??? 摘? 要　传统的 TABLE 网页布局采用表格嵌套定位网页，但是生成的HTML代码拖沓冗长不利于查找管理，而用 DIV+CSS进行网页布局是一种具有代码精简、功能更强、灵活性更高的网页布局设计方法。本文针对CSS对不同浏览器存在兼容性问题，给出使用DIV+CSS布局方法的个人博客网页设计应用实例。 ??? 关键词　表格布局；CSS；网页 ? 1　引言 ??? 个人博客是近年来流行的一种网络日记的个人网站形式，它具有界面整洁、便于管理、内容清晰等特点，表格（TABLE）布局和DIV+CSS布局是目前个人博客建设中常见的两种网页布局方法。表格布局具有使用简单、制作速度快，制作方便等优点，但其页面代码冗余、结构与表现混杂在一起。DIV+CSS布局方法弥补了表格布局的不足，实现了表现与内容的分离，便于维护和修改，大大简化了代码，减少网络带宽资源浪费，支持浏览器的向后兼容。 2　整体布局设计 2.1　结构布局 ??? CSS是Cascading Style Sheets 的简称，即“层叠样式表单”。CSS是Web标准化布局语言，它可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS具有强大的适用性，它能控制页面和整个站点的外观，用 CSS 能使网页更加简炼。用 DIV+CSS 基本设计思路是：用 DIV 来定义语义结构；在整体上进行div标记的分块，然后对各个块进行 CSS 定位后用CSS来美化网页，如加入背景、线条边框、对齐属性等。最后在各个模块中添加内容，如文字、图片等。 ??? 以个人博客为例，用 DIV+CSS 的布局方式来重构这个页面，页面大致分为顶部部分、导航部分、侧边，如图1所示。 ??? 其结构代码如下： body div id=”header”/div /* 页面头部*/ div id=menu/div /* 导航条*/ div id=main /*main 块里面嵌套两个子块 */ div id=sidebar/div/* 侧边栏sidebar*/ div id=content/div/* 内容 content*/ /div div id=footer/div/* 页面底部*/ /body 图1 页面结构 ??? 其中设置box的margin属性的左右为 0 auto 实现网页的居中显示，设置 left 的 float 属性为 left，main的 float 属性为 right，实现中间两个竖栏的显示为border 设置边框属性。 2.2　导航条列表显示 ??? 链接的动态展示也是网页设计中一项十分重要的技术 应用最广泛的有 4 种链接状态：未访问的链接 a：link、已访问的链接 a：visited、鼠标指针悬停在链接的状态 a：hover以及被激活的链接 a：active 在网页设计中。通过定义链接伪类，使其呈现这些状态，但必须按照 link visited hover active 的顺序进行定义下面在顶部区域添加导航条，设置链接样式。如图2所示。 ?????????????? 图2 链接样式 2.3　图文混编样式 ??? 图文混排是网页内容排版中的的重要内容，只有通过图文混编，枯燥的文字才能变得生动，多彩的图片才能和文字有序的排列在一起，图3是在 #main 区块内实现图文混排的效果。 图3 混编样式 ??? 代码如下： h2DIV+CSS 网页布局技术应用研究/h2 img src= /study.jpg width=360 height=280/ p使用 Table 进行页面布局是传统的网页布局显示技术，随着Web2.标准化设计理念的普及/p /div CSS 样式设置如下： #main h2{text-align：center；color：#F00；margin-top：10px；} #main img{float：left；height：220px；margin：15px；} #main p{margin-top：15px；padding：2px；font-size：14px；text- indent：2em；color：#03F；} 3　结语 ??? 用DIV+CSS 标准化设计个人博客网站有以下的优点：由于内容表现和结构彻底分离，使得网站建设人员的分工更加明确，开发维护效率明显提高，改版也变得容易，比如同一个页面，相同的内容，而运用不同的CSS文件就能实现不同的实时博客更新效果，页面代码精简程度高，页面载入速度加快，不仅节省大量带宽，而且可以提高搜索引擎的搜索程序效率，网页内容也更容易被搜索引擎收录到，给用户带来了更好的体验。但要想将DIV+CSS综合运用的更好，还需要不断实践和体验。