Dreamweercs3中网页布局设计的方法

本文关于表格及样式及网页方面的免费优秀学术论文范文，关于表格相关论文范文数据库,与Dreamweercs3中网页布局设计的方法相关学年毕业论文范文，对不知道怎么写表格论文范文课题研究的大学硕士、本科毕业论文开题报告范文和文献综述及职称论文的作为参考文献资料下载。

摘 要 本文就Dreamweer CS3网页设计,利用表格,美化表格,活学活用CSS样式表,利用模板,提出了Dreamweer CS3网页布局设计方法.

【关 键 词 】表格 拆分 嵌套 美化 CSS样式 模板

Dreamweer是网页制作与开发领域中用户最多、应用最广、功能最强的软件,Dreamweer CS3是Adobe公司在收购了Macromedia公司后推出的最新版本,它采用了多种先进的技术,集网页制作和管理网站于一身的所见即所得网页编辑器,它是一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感效果的网页.根据多年来的教学经验,总结出下面几点Dreamweer CS3网页设计的技巧.

1.布局的首选――表格

表格（table）是页面的重要元素,是页面排版的主要手段.通常的网页都是依靠表格来进行版面布局和各元素组织的,它直接决定了网页是否美观,内容组织是否清晰.尽管DreamweerCS3中的层（layer）也可以实现网页元素的自由定位,但是表格显然更加方便编辑与修改.熟练掌握和运用表格的各种属性,可以让您的页面看起来赏心悦目.但很多人常常忽视对表格的研究,而把目光投向其他的层、图片、特效等等,其实在DreamweerCS3中我们可以非常方便的精细化你的表格,从而使你的网页更加美观精细.因此,我们在设计页面布局的时候,应该做到：

1.1 尽量拆分成多个表格,整个页面不要都嵌套在一个表格里

当设计网页时,可能在网页中插入的图像或文字,可能大小不一,很难设置单元格的宽度或高度. 如果分成由几个表格来完成,这样行行之间的高度和列列之间的宽度不会互相干扰,方便设置单元格的宽度和高度,如下图1和图2所示.如果按图1的方式来布局,这样就增加表格操作的难度,改变主体的单元格会影响到页眉单元格,改变页脚的单元格又会影响到页眉和主体的单元格.如果按图2来设计页面,页眉一个表格,主体一个表格,页脚一个表格,设置其中一个表格不会影响到另外的表格.因此一个网页要尽量避免用整个一张大表格,把网页内容按行分割成几个表格布局.

另外,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,只有整个表格全部解释完成时才把整个页面显示出来,当浏览者在浏览网页时,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果是,当浏览者输入网址,他要先面对一片空白的浏览器很长一段时间,然后所有的网页内容同时出现.但是,如果把整个页面拆分为多个表格,那么可以其中一个表格解释完成时,先显示给浏览者观看,然后继续显示其它表格内容,而且表格小速度快,不会让浏览者等待很长时间无网页内容.因此,一个网页要尽量避免用整个大表格,所有的内容都嵌套在这个大表格之内.

1.2 表格嵌套层次尽量要少,提高网页的下载速度

表格嵌套就是在表格里插入表格.浏览器在读取网页原代码时,从标签开始,要读到标签时,才将表格中的内容显示在屏幕上,读完整一个表格再将它显示出来.而且显示也有优先级,先读到的先显示,这样的话,如果一个大表格中含有多个嵌套表格,大表格包含在嵌套表格外面,必须等大表格读完,才能将嵌套表格一起显示出来,这样造成越复杂,嵌套层次越多的表格下载速度越慢.因此,我们在设计网页时,无论多复杂的版面,都要悉心琢磨一下用什么样的嵌套排版方式使网页的下载速度达到最快,找到最好的解决的办法.因此,表格的嵌套应尽量要少,使网页的下载速度达到最快.

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）样式,可译为“层叠样式表”或“级联样式表”.是一组格式设置规则,用于控制Web页面的外观.通过使用CSS样式设置页面的格式,可将页面的内容和表现形式分离.页面内容存放在HTML文档中,用于定义表现形式的CSS样式规则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分.

2.1 CSS样式的设置

通过CSS样式可以使用更丰富、更灵活的样式,更简单地设计出更美观的网页,使用 CSS 样式可以控制许多文本属性,包括特定字体和字大小；粗体、斜体、下划线和文本阴影；文本颜色和背景颜色；链接颜色和链接下划线等.同时,通过使用 CSS 控制字体,还可以确保在多个浏览器中以更一致的方式处理页面布局和外观,让网页的设计与维护更有效率.

2.2 CSS样式的优势

可以减少图像文件的使用：利用CSS样式提供了很多文字样式的设定,加上CSS样式内建的滤镜特效,可轻松取代原来图像才能表现的视觉效果,也大大提高了下载速度,避免了很多网页为求设计效果,而大量使用图像,以致网页的下载速度变慢. 可以集中管理样式信息：CSS样式的作用可将网页要展示的内容与其表现的样式设定分开,也就是将网页的外观设定信息从网页的内容中独立出来并集中管理.这样,当要改变网页外观时,只需更改CSS样式设定的部分,网页文件本身并不需要任何的更改,这样不仅可以使站点外观的维护更加容易,而且还可以使网页HTML文档代码更加简练,这样将缩短浏览者的网页加载时间.

2.3 CSS样式的规则由两部分组成：选择器和声明

选择器：就是样式的名称,包括自定义的类,HTML标签和CSS选择器样式.

声明：是用于定义样式元素的.声明分两部分：属性（如 font-family）和值（如黑体）.

每个选择器的声明都采用{等}包含,对于一个选择器而言,可以有多个声明,例如一个声明是表示字体,一个声明是表示字体大小,一个声明是表示行高等.

例如： CSS样式的代码片段：

1、.wz {font-family： "黑体"； font-size： 14px； line-height： 30px； }

2..img {border： 2px double #990000；}

其中.wz、.img都属于选择器,font-family、 font-size、line-height和border都属于声明中的属性,而"黑体"、14px、30px、 #990000为属性对应的值.

2.4 CSS样式的形式

类样式：自定义CSS样式,可应用于任何标签,名称必须带有句点“.”和字母开头,比如“.img”.

标签样式：重新定义特定标签的外观,虽说自定义CSS样式可应用任何标签,但对于HTML固有的标签,每次都要选用自定义的样式就显得比较麻烦,所以HTML标签样式的出现就是为了扩展HTML标签的.

高级样式：可用来定义标签的组合,比如“a”表示对超级链接样式的选择,“td”表示对单元格样式的选择,而如果对单元格中超级链接样式的选择则使用“td a”.

3.工厂化你的站点――模板

在建立和维护一个站点的时候,往往需要建立外观及部分内容相同的大量网页,使站点具有统一的风格. 如果逐页建立、修改,这样很费时、费力,而且效率不高,一个站点很难做到有统一的外观及结构.模板提供了几种方便的可以重复使用的部件来解决这个问题.

模板是一种特殊类型的文档,用于设计“固定的”页面布局,然后便可基于模板创建文档,创建文档会继承模板的页面布局.模板由可编辑区域和不可编辑区域两部分组成,不可编辑区域包含了所在页面中的共同元素,即构成页面的基本框架,称为锁定区域；而可编辑区域就是该区域的相应内容是可以编辑的,从而得到与模板类似但又有所不同的新的网页.默认情况下模板的页面中各部分是固定（即不可编辑的）,设计模板时,可以指定在基于模板的文档中哪些内容是用户可编辑的.使用模板,模板创作者控制哪些页面元素可以由模板用户进行编辑,模板创作者可以修改模板并立即更新基于该模板的所有文档中的设计.

网站的建设和维护,麻烦在更新和改版,特别是大规模更新,使用模板建立网页的最大好处是,当修改模板时使用该模板创建的所有网页可以一次自动更新,就大大提高了网页更新维护的效率,只要用好模板工具,使用模板就能减少大量的重复劳动,就能很好地“批发”网页.

Dreamweer CS3是目前世界上最优秀的可视化网页设计制作工具和网站管理工具,灵活应用它的功能和优势,借助它可以让设计师轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页,借助它可以快速、轻松地完成设计、开发、维护网站.

作者单位

广东省梅州市职业技术学校 广东省梅州市 514000