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

黄荣喜

摘要：【目的】利用CSS与表格在网页设计中的布局，进行对网页的优化设计，增加网页设计中的动态效果。【方法】阐述表格结合CSS布局的重要性，分析了表格布局的优缺点，以及通过设置以及分析设置CSS结合表格在网页设计中的布局。【结果】CSS的应用提高了网页的布局效果与设计效率，并增添了网页设计中的动态效果。【结论】在网页的布局与设计中，表格与CSS样式结合使用，有利于丰富网页的设计效果。

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

中图分类号：P393文献标识码：文章编号：1003-4374（2017）02-0027-03

Abstract：【Objective】o optimize the design of web pages by applying the layout of CSS and tables in web design， and to increase the dynamic effect in Web design.【Method】he importance of the form combined with CSS layout is expounded， and the advantages and disadvantages of the table layout are analyzed.he layout of the CSS collection table in the web design is also analyzed.【Results】he application of CSS can improve the layout and design efficiency of web pages， and increase the dynamic effect of web design.【Conclusion】In the layout and design of the web page， the combination of the form and the CSS style is helpful to enrich the design effect.

Key words：able layout；CSS；Web design

1引言

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

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

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

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

2.1CSS的结构样式

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

body{background-color：#6C6；}

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

2.2CSS选择器

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

.a1 {font-size：16px；color：#F00；text-align：center；}

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

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

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

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

3.1表格在网页设计中的优点endprint

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

3.2表格在网页设计中需注意的问题

在网页设计中，利用表格排版的时候，最忌讳的就是在整个网页中使用一个表格，表面上这样比较统一整齐，但实际上这样不利于网页下载浏览，网页的完全显示，要等网页中的一个表格全部显示出来了，才能打开整个页面，这样就影响到了网页打开的速度，不利于网页浏览。在使用表格设计的过程中，一定要划分好相关的模块，然后通过分割表格的方式进行布局，把一个表格拆分成很多个小的表格，有利于加快网页的下载。在网页设计中，表格的嵌套也不能太多，一般三层嵌套就足够了，太多的嵌套，也会影响网页的加载速度。

4网页中CSS结合表格的布局

表格结合CSS的使用是网页设计中必不可少的，下面就用一个简单网页的设计来阐述如何在网页中使用CSS与表格的结合布局[4]。首先构思好网页的布局，把网页划分为几个部分，如网页的Logo导航条，主要板块内容等。具体如下图所示：

主要的设计步骤如下：

（1）建立一个html网页文件，在网页界面中插入相关的表格，并编辑好相关的模块。

（2）在网页中的“发表意见，评分，与我们联系处（称之为A处），建立一个以表格与CSS结合应用的一个模块，设置相关的动态效果。

（3）在A处嵌套一个表格，并把表格的名称，命名为Nav，在Nav中输入：“发表意见，评分，与我们联系，即A处。

（4）选中Nav，并在CSS样式处，打开CSS样式，创建一个CSS样式。在选择器类型：选择复合内容，在选择器名称处输入：#Nav a：hover，表示鼠标放上去具有什么样的效果。在选择定义规则的位置处，选择仅限该文档，具体如图2所示：

（5）进入到CSS规则定义中，对相关的效果进行设置，如：背景，区块，边框，方框等设置成想要的效果即可，如图3所示：

所有的设置完成后，效果就出来了，当把鼠标放在A处，即效果如图4所示：

通过以上的网页设计制作，CSS与表格的结合使用，其效果是很明显的，在网页的浏览中增添了不少的风采。

结束语

在网页设计中，网页中元素的定位以及网页的美化效果是必不可少的，通过以上的论述可知，网页中的CSS能起到很好的定位与美化动态效果，并实现了内容与代码的独立使用。CSS也可以使用外部链接的效果来实现，外部链接的效果可以在多个网页中使用，能起到了共享的作用，减少了网页代码的冗余度，加快了网页的运行速度。本文中使用的是仅限于本文档中的使用，即内部的CSS使用方式。

总之，CSS技术使用非常的广泛，利用它在网页中进行设置，可以收到很好的美化网页的效果，而且随着CSS技术的不断进步，使得网站的开发效率得到了很大的提升。因此，CSS样式与表格的结合布局为网页的建设增添了丰富的效果。

参考文献：

[1]温盛萍.DIV+CSS布局技术在网页设计中的应用.信息化建设，201，（10）：7.

[2]周金容.网页制作过程与技巧.软件导刊，2016，（6）：149-11.

[3]陈静.基于项目驱动法的网页设计基础课程课堂教学改革探索.人才资源开发，201，（20）：186-187.

[4]李念.网页设计中的DIV+CSS技术应用研究.软件导刊，2013，（3）：137-138.

李玉荣.浅谈DIV+CSS布局技术在网页设计中的应用.电子制作，201，（3）：8.endprint