浅谈Dreamweaver cs3中网页布局设计方法.docVIP

浅谈Dreamweaver cs3中网页布局设计方法 　　摘 要 本文就Dreamweaver CS3网页设计，利用表格，美化表格，活学活用CSS样式表，利用模板，提出了Dreamweaver CS3网页布局设计方法。 　　【关键词】表格 拆分 嵌套 美化 CSS样式 模板 　　Dreamweaver是网页制作与开发领域中用户最多、应用最广、功能最强的软件，Dreamweaver CS3是Adobe公司在收购了Macromedia公司后推出的最新版本，它采用了多种先进的技术，集网页制作和管理网站于一身的所见即所得网页编辑器，它是一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感效果的网页。根据多年来的教学经验，总结出下面几点Dreamweaver CS3网页设计的技巧。 　　1 布局的首选――表格 　　表格（table）是页面的重要元素，是页面排版的主要手段。通常的网页都是依靠表格来进行版面布局和各元素组织的，它直接决定了网页是否美观，内容组织是否清晰。尽管DreamweaverCS3中的层（layer）也可以实现网页元素的自由定位，但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性，可以让您的页面看起来赏心悦目。但很多人常常忽视对表格的研究，而把目光投向其他的层、图片、特效等等，其实在DreamweaverCS3中我们可以非常方便的精细化你的表格，从而使你的网页更加美观精细。因此，我们在设计页面布局的时候，应该做到： 　　1.1 尽量拆分成多个表格，整个页面不要都嵌套在一个表格里 　　当设计网页时，可能在网页中插入的图像或文字，可能大小不一，很难设置单元格的宽度或高度。 如果分成由几个表格来完成，这样行行之间的高度和列列之间的宽度不会互相干扰，方便设置单元格的宽度和高度，如下图1和图2所示。如果按图1的方式来布局，这样就增加表格操作的难度，改变主体的单元格会影响到页眉单元格，改变页脚的单元格又会影响到页眉和主体的单元格。如果按图2来设计页面，页眉一个表格，主体一个表格，页脚一个表格，设置其中一个表格不会影响到另外的表格。因此一个网页要尽量避免用整个一张大表格，把网页内容按行分割成几个表格布局。 　　另外，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，只有整个表格全部解释完成时才把整个页面显示出来，当浏览者在浏览网页时，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果是，当浏览者输入网址，他要先面对一片空白的浏览器很长一段时间，然后所有的网页内容同时出现。但是，如果把整个页面拆分为多个表格，那么可以其中一个表格解释完成时，先显示给浏览者观看，然后继续显示其它表格内容，而且表格小速度快，不会让浏览者等待很长时间无网页内容。因此，一个网页要尽量避免用整个大表格，所有的内容都嵌套在这个大表格之内。 　　1.2 表格嵌套层次尽量要少，提高网页的下载速度 　　表格嵌套就是在表格里插入表格。浏览器在读取网页html原代码时，从标签开始，要读到标签时，才将表格中的内容显示在屏幕上，读完整一个表格再将它显示出来。而且显示也有优先级，先读到的先显示，这样的话，如果一个大表格中含有多个嵌套表格，大表格包含在嵌套表格外面，必须等大表格读完，才能将嵌套表格一起显示出来，这样造成越复杂，嵌套层次越多的表格下载速度越慢。因此，我们在设计网页时，无论多复杂的版面，都要悉心琢磨一下用什么样的嵌套排版方式使网页的下载速度达到最快，找到最好的解决的办法。因此，表格的嵌套应尽量要少，使网页的下载速度达到最快。 　　1.3 美化表格，使网页的页面更加美观 　　（1）利用CSS样式表美化表格，定义表格边框主要是在样式编辑器的“边框”选项中，“样式”可以定义边框的样式，常用的为实线（solid），其它类型还有：点划线（dotted）、虚线（dashed）、双线（double）、槽状（groove）、脊状（ridge）、凹陷（inset）、凸出（outset）；宽度代表上下左右的边框宽度；颜色可以分别定义上下左右边框的颜色。 　　例如：可以通过设置样式、宽度和颜色，并结合多个样式的应用，虚线表格效果如图3所示。 　　（2）利用表格属性美化表格，首先我们需要了解表格属性面板上的参数：填充和间距。填充是指表格中两个单元格之间的距离，间距是指每个单元格与它中间的内容之间的间隔距离。通过改变这两个参数，并配合背景色彩的变化，可以做出1像素的细线表格边框。 　　例如：设置边框为0、填充为0、间距为1，表格背景颜色为#FAA331，单元格背景颜色为#FFFF99，最终效果如下： 　　2 活学活用――CSS样式 　　CSS（Cascading Style Sheet）样式，可译为“层叠样式表”