CSS与表格布局在网页设计中的应用

CSS与表格布局在网页设计中的应用

黄荣喜

【摘 要】摘要：【目的】利用CSS与表格在网页设计中的布局，进行对网页的优化设计，增加网页设计中的动态效果。【方法】阐述表格结合CSS布局的重要性，分析了表格布局的优缺点，以及通过设置以及分析设置CSS结合表格在网页设计中的布局。【结果】CSS的应用提高了网页的布局效果与设计效率，并增添了网页设计中的动态效果。【结论】在网页的布局与设计中，表格与CSS样式结合使用，有利于丰富网页的设计效果。 【期刊名称】广西农学报 【年(卷),期】2017(032)002 【总页数】3

【关键词】表格布局；CSS；网页设计

1 引言

随着网络信息化时代的发展，网络的重要性不言而喻，网络上信息化的主要载体就是网页。网页设计的高效性与美观性决定了网页的浏览频率，在开发设计过程中，如何美化网页的设计是非常重要的一个过程，使用什么样的方式与工具进行开发也是非常重要。目前在网页设计中，基本都是采用Dreamweaver CS,它是由Adobe公司推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件,其中在布局上主要包括的技术有CSS(Cascading Style Sheets)层叠样式表的布局技术，表格与层，第三方构件等,在网页设计中DIV+CSS布局技术非常重要，是网页开发设计者必须要掌握的,但对于一些程序设计不是很在行的人来说，它的开发设计具有一定的难度,如

让初学者也能设计出优美的动态效果，就需要使用表格与CSS来进行设计。这一设计开发，让初学者更易于网页开发的设计与应用。

2 CSS样式表与选择器的概述

CSS在网页设计中的作用非常重要，基本每一个优美的网页,都离不开它。它对网页中元素的精确定位、内容的控制与分离、网页修改的快捷，都起到了很好的作用。

CSS主要是将网页的页面设计分离开来，通过运行后的代码来进行控制页面，起到很好的美化效果。CSS主要分两种方法来进行设计，第一种：是通过程序代码来进行设置。这就要求网页设计者具有一定的网页设计经验，对代码的设计比较熟悉。第二种：主要是通过CSS的界面进行设置。这种设计的优点是既能达到第一种的相同效果，又比较简单容易，只要通过界面的一些基本操作就能达到相关的效果，对广大初学者来说，是一种比较方便有效的方法。无论使用哪一种方法，都是将网页中的内容与相关的布局进行分离，将CSS代码从中隔离出来[1]，对页面进行控制。CSS的共享调用机制，使得网页的设计更加小巧，大大的减少了网页加载的冗余度，加快了网页的下载速度。 2.1 CSS的结构样式

CSS的编辑比较方便，在任何编辑软件中都能打开，大家一般比较喜欢使用记事本软件，用它来进行编辑比较方便快捷。CSS样式主要由两个部分组成即：选择器与属性[2]。具体表现如下： body{background-color：#6C6；}

这是一个简单的页面颜色设置效果，也可以对其进行美化，加入更多的CSS属性设置。

2.2 CSS选择器

CSS选择器主要包括四种即：类、标签、ID、复合内容。不同的选择器代表了不同的操作类别，比如说常用的类选择器，主要通过相关的一些设置来达到想要的效果，可以精确的控制某个元素的具体样式。例如： .a1 {font-size：16px；color：#F00；text-align：center；}

这个就是类的选择器样式，它体现了样式.a1具有字体大小为16个像素，颜色为红色，文字的位置为居中等效果。

在采用CSS布局的过程中，主要是考虑网页设计的结构，在结构确定后的情况下，就需要定义相关的网页元素，最后通过结构模式把整个网页架构起来。因此，在搭建网页中，必须要确定网页中显示的内容，并根据网页的布局来设计相关的一小块，只有这样网页设计才会整齐统一。

3 表格在网页设计中的布局

表格在网页中的使用，是非常简单普遍的。很多的网页都是采用表格来进行搭建，表格在网页中的布局，它主要是方便，快捷，但美观度有所欠缺。 3.1 表格在网页设计中的优点

在网页设计中，表格的整体排版效果是非常好的，整个页面比较整齐，也很容易把网页设计中的相关要素体现出来，对网页的分块划分起到很好的效果[3]。在Dreamweaver中，页面中的主要设计都是通过表格来完成，后期需要体现的效果可以通过其他方面的美化来完成。表格的嵌套或拆分设置，都是很容易做到，在内容的显示上也比较容易控制，例如在不同的浏览器上，表格的显示是比较容易做到，并且可以根据显示器的大小不同，来进行对网页的缩放显示,它显示的位置都是相对的，也具有很好的兼容性。表格在网页中的设计，也由