ＤＩＶ＋ＣＳＳ布局可视化尝试.docVIP

ＤＩＶ＋ＣＳＳ布局可视化尝试 　　摘要：用DIV+CSS布局页面，具备结构清晰、缩减页面代码、方便有哪些信誉好的足球投注网站引擎有哪些信誉好的足球投注网站、内容与表现分离等优点，倍受业界推崇。专业的网页制作软件Dreamweaver 8提供了非常强大的CSS功能，如何引导初学者入门，充分利用这一功能对DIV元素进行控制，实现页面布局，关键在于让初学者认识DIV元素，理解CSS样式，掌握应用CSS控制页面元素的方法。 　　关键词：DIV；CSS；布局；可视化 　　中图分类号：TP393文献标识码：A文章编号：1009-3044(2008)26-1821-05 　　DIV+CSS Layout Visual Attempt 　　YANG Fang-ju 　　(Guizhou Vocational Technology College of Electronic Information Computer Science Department, Kaili 556000, China) 　　Abstract: With the DIV+CSS layout page, has the structure clear, the deflation page code, convenience merits and so on search engine. content and performance separation, which are received and esteemed by all .Specialized homepage manufacture software Dreamweaver 8 has provided the extremely formidable CSS function, how to guide the beginner to cross the threshold and fully use this function to carry on the control to the DIV element, realizes the page layout, the key lies in making the beginner understand the DIV element and the CSS pattern; as well as mastering and using the CSS to control the method of page element. 　　Key words: DIV; CSS; layout; visualization 　　目前，业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，许多初学者也想用DIV+CSS设计网页，但由于现在的学习资料介绍的都是DIV+CSS的代码，初学者难以入门，本人在Dreamweaver 8中，进行DIV+CSS布局可视化尝试，觉得简单易行，在此阐述如下，希望能给初学者一点帮助。 　　 　　1 认识DIV标签与CSS样式 　　 　　1.1 DIV标签（也可称DIV元素） 　　DIV 全称 DIVision 意为“区分”，是XHTML中的块状元素，即DIV是矩形的，有自己的高度和宽度。在Dreamweaver 8(下面简称DW)的设计视图中，单击[插入]面板的[布局]工具栏中的“插入DIV标签”插入，然后可在其中输入文字、插入图片等任何页面元素，包括其他的DIV元素。选中DIV元素时，其属性面板中没有任何可设置的属性，也就是说，DIV元素是一个没有任何特性的容器，如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 是一样的，没有任何特别之处，默认情况下，一行只能容纳一个DIV元素。是什么因素导致DIV元素作为网页布局的主力元素呢？这是因为DIV没有任何特性，很容易被CSS控制样式。 　　1.2 CSS样式 　　CSS是Cascading style Sheet的简称，中文译作“层叠样式表”，应用CSS技术，可以有效地对页面的布局、字体、颜色、背景等效果实现更加精确的控制，同时能够实现内容与表现的分离。在DW中，可以直接编辑CSS样式代码，也可以通过[CSS样式]面板来创建和编辑CSS样式规则。 　　 　　2 理解CSS的盒子模型 　　 　　XHTML中大部分的元素（特别是块状元素）都可以视为一个盒子，而网页元素的定位实际就是这些大大小小的盒子在页面中的定位。CSS的盒子模型如图1所示。 　　XHTML中块状元素的结构和图中的盒子相似，除了包含内容（文本或图片）外，还有内边距、边框和外边距一层层的包裹。在定位XHTML元素时要充分地考虑到这些要素，才可以更加自如地摆