分析CSS和表格布局的应用对于网页设计的影响及

时间:2019-09-27

　　摘要：使用CSS与表格， 能够优化网页设计布局， 从而优化网页， 提高其动态效果。本文主要论述了CSS布局的重要性， 并对其表格布局优缺点进行了分析。分析了CSS和表格布局的应用对于网页设计的影响， 并在网页设计中增加了动态效果。
　　
　　关键词：CSS; 表格布局； 网页设计； 应用；

　　在本文中， 主要是利用表格和DIV+CSS相结合的方式， 对于网页中存在的大框架， 可以利用表格建立， 这样便能够固定， 并且在每个拆分的小模块中， 利用DIV+CSS实现， 既有利于修改， 又提高了运行速度。
 

　　1 表格布局和CSS布局方法
　　
　　1.1 表格布局
　　
　　网页布局十分重要的布局元素就是表格， 并且能够利用文字和图形以及图像等等， 给用户浏览带来更多便利， 在表格布局的过程中， 按照版式进行划分， 针对不同的网页元素， 都可以放置在表格单元格中， 并且能够根据既定的位置， 在页面上进行显示。表格自身也存在着很多功能， 存在美化的作用， 但是因为其代码冗余， 并且内容繁多， 十分难以进行修改和维护。
　　
　　1.2 CSS布局
　　
　　常用的CSS布局主要有两种：浮动式布局和定位式布局。浮动式布局十分灵活， 同时也容易产生网页错位。定位式布局能够快速对元素的位置进行定位， 但是其灵活性非常差。利用CSS定位式进行布局的形式也很多， 例如相对定位和绝对定位以及固定定位等， 常常使用最多的是相对定位和绝对定位。使用相对定位可以以不破坏文档流作为前提， 绝对定位方式能够突破网页流， 并且对元素进行任意定位。
　　
　　2 CSS样式表与选择器的概述
　　
　　在设计网页中基本都离不开CSS的使用， 尤其是我们看到的优美的网页中， 基本都是利用了该样式。CSS在使用中， 能够针对网页元素， 开展有效定位， 并且能够将内容进行有效控制， 或者分离操作， 从而使得网页修改效率提高， 在很多方面， 都发挥着重要的作用。
　　
　　就CSS来看， 其最重要的功能便是在网页中， 分离出网页设计， 之后使用代码， 对页面进行控制， 从而能够实现美化功能。在其设计的过程中， 通常是有两种方式：首先是在设置的过程中， 使用程序代码。这个操作需要有很高的要求， 并且需要有很多的设计经验， 能够熟练运用代码进行设计。第二种便是使用CSS界面， 利用这个方法， 有着独特的优点， 不但能够和上述方法达到相同的效果， 并且在操作中十分简便， 容易上手， 只需要一些基本的操作便可以取得很好的效果， 对于很多的初学者来讲， 这种方法也是十分简便和行之有效的。但是， 无论是使用哪一个方式， 都是必须在网页中， 能够有效地分离内容和布局， 并且隔离CSS代码， 这样才能使得页面控制具有有效性。CSS共享调用的机制， 促使网页发展更加精巧， 并且降低了网页在加载中的冗余度， 显着地提高了网速。
　　
　　2.1 CSS的结构样式
　　
　　在所有的编辑软件中， 都能够十分快捷地使用CSS编辑。并且在日常生活中， 大家都喜欢使用记事本软件， 这种软件有着很强的实用性， 十分方便快捷。在CSS样式中， 其有着选择器与属性这两个组成部分。具体有：
　　

　　这个主要是针对页面， 进行颜色的设置， 操作简单， 能够进行美化， 并且在最后， 有着很多的属性设置。
　　
　　2.2 CSS选择器
　　
　　CSS选择器主要有四种， 为类、标签、ID和复合内容。在不同的选择器中， 需要的操作类别也都不一样。比如， 经常使用的为的类选择器， 可以利用一些基本的设置来实现自己想要的效果， 并且可能够对确切控制元素的具体样式。
　　

　　上述为类的选择器样式， .表示为有字体大小， 16个像素， 其颜色是红色， 在文字位置上是居中的效果。
　　
　　利用CSS布局的时候， 主要是对网页设计结构的考虑， 确定了结构之后， 可以对网页元素进行定义， 然后利用结构模式对网页进行有效的架构。因此， 在网页搭建的过程中， 需要指导在网页中存在的内容， 然后再根据网页布局， 对一小块进行有效的设计， 只有这样， 才能够促进网页设计的有效统一。
　　
　　3 在网页设计中表格的布局
　　
　　3.1 在网页设计中表格的优势分析
　　
　　设计网页的过程中， 就其表格整体排版看来， 取得的效果不错， 并且整个页面都十分整齐干净， 同时也能够快速地体现出网页设计中不同的要素， 从而能够有效地划分网页分块。Dream weaver软件的使用中， 在全部的设计操作中， 都会利用到表格， 在后期， 可以将想要的效果利用美化来实现。设计表格的过程中， 嵌套和拆分很容易操作， 并且就内容显示来看， 十分方面操作和进行控制。在各个浏览器上， 都可以进行畅通的显示， 并且按照不同显示器的尺寸， 根据其大小， 有效地缩放网页， 其显示位置具有很强大相对性， 同时也存在很大的兼容性。在网页中表格的设计， 也会因为其存在的整体性， 导致在很多细小的地方无法做到细化， 同时在内容设置上， 常常也缺乏丰富性。
　　
　　3.2 在网页设计中表格的利用问题
　　
　　利用表格进行网页设计的排版时， 要杜绝在整个网页中， 利用一个表格， 这在表面上能够整齐干净， 但是在实际上， 却无法进行有效的网页下载。只有当里边的表格内容都显示出来才能够打开页面， 这样显着降低了网页打开的效率。在进行表格设计的过程中， 首先就是确切划分好各个不同的模块， 之后采用分割形式进行布局， 拆分表格， 这样才能够提高下载的效率。
　　
　　4 网页中CSS结合表格的布局
　　
　　网页设计中， 表格和CSS结合的使用是很多的， 以下将举一个简单的例子来说明。首先， 针对网页布局， 需要开展整体的构思， 可以对网页进行分类， 分成几个小部分， 比如Logo导航条以及重要的板块等， 具体参考图1.
　　
　　主要的设计步骤如下：

　　
　　图1 网页设计界面
　　
　　

　　
　　（1） 构建html网页文件， 在网页界面中， 有效插入表格， 并进行模块的编辑。
　　
　　（2） 将“发表意见， 评分， 与我们联系”处 （称之为A处） , 在这个区域中， 形成可以和CSS进行综合使用的模块， 并且增加一定的动态效果。
　　
　　（3） 在A处， 进行表格的套嵌， 输入表格名称， 将其命名Nav, 在其中输入：“发表意见， 评分， 与我们联系”, 即A处。
　　
　　（4） 将Nav处进行选中， 并且在CSS样式中打开， 另外再创建CSS样式。
　　
　　（5） 进入到CSS的规则定义内， 针对里边的效果开展有效的设置， 例如其中的背景和区块， 以及边框和方框等等， 都可以改成自己喜欢的效果。
　　
　　完成全部的设置以后， 就能够看出效果了。当把鼠标放在A处， 即效果如图2所示。
　　

　　图2 CSS动态效果
　　
　

　　
　　通过上述方式， 在网页设计中， 能够综合使用CSS和表格， 有着显着的效果， 给网页浏览带来了很多的乐趣。
　　
　　参考文献
　　[1]叶潮流， 马林山。基于HTML5+CSS3+jQuery的响应式布局网页设计[J].梧州学院学报， 2018, 28 （03） :22~35.
　　[2]王钧玉。基于微信公众平台的移动学习系统设计---以“网页设计与制作”课程为例[J].岳阳职业技术学院学报， 2018, 33 （03） :82~85.
　　[3]程序。基于DIV+CSS布局技术的网页设计实现与优化[J].信息记录材料， 2018, 19 （05） :75~76.
　　[4]王至宏， 陈小赓。论CSS3在网页开发中的特性[J].电脑迷， 2018 （01） :187.

TAG标签： CSS  表格布局  网页设计  

上一篇：探究云存储容器的动态迁移技术
下一篇：分析网页设计中平面视觉元素的作用