作者：核心期刊目录查询发布时间：2020-07-15
目前，在网页设计中页面的布局主要是采用框架布局、表格布局、图层布局等方法。相比于以上的布局技术，DIV+CSS网页布局作为目前的主流技术，具有十分明显的优势。通过CSS技术的应用，可使网页设计中的格式定义得到有效简化，提高网页维护的便捷性，相比于以往的HTML标记符，CSS技术具有强大的格式设置功能，可使网页具有更强的视觉表现力。将CSS与DIV两种网页布局技术进行结合应用，能够彻底解决以往表格布局中所带来的不足，从而使网页的页面布局以及外观样式变得更加灵活、简单。
关键词：页面布局；网页设计；DIV；CSS
互联网的快速发展，使越来越多精美的网页作品不断涌现，并吸引了大量用户的眼球，在网页作品设计中，首先要采用相应的页面布局技术来对网页进行合理的布局，以此确保网页内的各个要素能够处于恰当的位置。现如今，大多数商家在网页设计中，都倾向于采用更加灵活、便捷、功能更加强大的页面布局方法，而DIV+CSS页面布局技术的出现，使上述要求得到了有效满足，从而深受广大网页开发人员的青睐。通过将DIV与CSS技术进行结合应用，能够使网页设计工作中的各个模块内容得到合理布局，其属于一种盒子式的开放式布局技术，利用该技术可通过对多个盒子进行嵌套操作，以此实现对网页的合理编排，从而使网页的代码变得更加简洁，并且便于对网页的后续更新与维护，同时还能实现对不同浏览器的有效兼容。
一、页面布局技术中的关键技术手段
在Xhtml页面设计中，常常采用DIV+CSS页面布局技术，该技术成功取代了以往的Table定位技术，实现了对Xhtml网页中各个模块的合理编排与定位。
（一）CSS技术
CSS技术的英文全称为cascadingstylesheet，其又被称之为层叠样式表技术，CSS技术作为页面布局技术中的一种关键技术，能够对网页样式进行控制，使样式信息能够从网页中分离出来，CSS属于一种具有标识性的计算机语言，自20世纪90年代中期开始，CSS技术便正式被w3c进行审核后予以通过，同时将其作为推荐产品。通过在html语言中应用CSS技术，可使页面设计变得更加精美。CSS技术是以html语言为基础的，实现了对html功能的有效扩展，并且能够对网页格式进行更加有效的设置。在网页设计工作中，当设计人员需要设置网页外观时，可对更改样式进行定义，不需要对HTML文件进行更改即可完成。在CSS技术中，目前主要有三种定义，分别是外部样式表、行内样式表以及内嵌样式表，其中外部样式表是在CSS样式文件中添加一个CSS后缀，该样式文件可在各种网页中进行应用。而内嵌样式表则对<STYLE>标记符内对具体的样式信息进行定义，这种样式表只能在当前页面中应用。对于行内样式表来说，则是将样式信息直接嵌套至标记符内，这种定义方式只局限在本标签。CSS技术的格式化功能非常丰富，能够实现对网页中字体、背景、颜色等各个要素的设计，同时还能兼容诸多可视化浏览器，具有非常丰富的样式风格。通过CSS技术，可实现对网页中结构与格式的有效分离，从而使页面布局工作得到有效控制，在减小了网页体积的同时，还能提高网页的下载速度。
（二）DIV技术
在HTML中，DIV技术是对HTML页面的各个层进行标记的<div>符，通过<div>层标记符，能够实现对各种复杂页面的灵活布局，从而使页面内的各个模块能够在任意位置中进行定位。在HTML页面的各个层中，主要有文本层、图像层等，这些层往往是被嵌套或重叠在一起的，利用DIV技术可使这些层变得可见，同时还可为HTML设置子层来添加新的页面要素，正是DIV技术，使HTML页面设计工作能够对各个层进行灵活方便的设置，进而使网页设计从以往的二维平面设计进一步拓展至三维平面设计。
二、网页设计中页面布局技术的选择
在网页设计工作中，以往的网页布局技术主要有表格布局、单元格布局、框架布局以及图层布局等，这些页面布局技术的出现，使网页设计变得更加灵活、便捷。以下便对网页设计中不同页面布局技术的选择进行逐一探讨。
（一）表格布局
表格布局在对网页中各个要素进行组织时，通常是以行列形式来完成的，这样便于用户对网页进行浏览。在网页设计中应用表格布局技术时，需要结合网页中不同版式的划分情况，在表格单元格内添加相应的网页元素，以此确保这些元素能够在网页页面中进行正确定位。当网页布局工作较为复杂且繁琐时，需要对不同大小的表格进行设置，然后将这些表格按照需要来进行嵌套，即可使网页内容得到合理的定位与排版，此时在网页中的行标签<tr>、表格标签<table>以及单元格标签<td>之间是彼此交织的，但这也造成网页的代码结构变得非常复杂，从而使网站的后续更新、维护与开发存在较大难度。当需要对网站中的表格进行改版时，往往要对该页面中的全部结构代码进行更改，操作起来势必会极为繁琐。并且，因需要对表格内容进行下载，这样才能使表格得以显示出来，如果网页中的内容非常多，还会影响到用户对网页的浏览速度。
（二）图层布局
在一个网页中，往往包含着许多图层，这些图层都是网页要素的载体，网页设计人员可以将文字、表格、图像等放置到图层之中，然后在页面中对该图层的位置进行定位，在定位过程中还可对图层进行重叠，这也使网页在布局过程中变得更加灵活，从而有效弥补了框架布局与表格布局在应用过程中所存在的不足。图层布局不仅可利用层来完成页面的布局，还可将行与层结合起来，从而使某些图层能够根据需要进行显示与隐藏，并且在页面中设置一些移动层，还能给页面的展示效果带来更多的选择。
（三）框架布局
在页面显示中，利用框架可使页面空间得到有效分割，进而使不同的网页能够独立显示其不同内容，通过框架可使网页布局变得更加丰富，使页面组织形式变得更加多样化。框架布局能够帮助用户便捷地切换到不同的页面之中，网页设计人员在设置网页导航时，便常常采用框架布局，利用框架来对页面进行布局，不需要对页面进行重新加载，并且各个框架均配置有对应的滚动条，这能够使页面中的模块逻辑关系变得更加清晰、明确。
（四）DIV+CSS技术布局
在网页设计工作中，DIV技术又被叫作图层技术，其以<div>层作为核心，通过对</div>层内容进行编辑，以此实现对网页的布局。相比于表格布局以及框架布局来说，DIV技术相当于一个用于填装物体的容器，被填装的物体便是页面中的各个元素，网页设计人员可在网页中对CSS的显示样式进行设置，并将网页中的图层摆放在指定位置，以此实现对网页的布局。通过对DIV与CSS这两种布局技术的结合运用，可将网页的内容与外观样式信息进行分离，从而便于对网页要素的集中式管理，在应用过程中需要改变网页的显示外观时，不需更改HTML文件，只需对样式定义进行更改即可。通过对CSS文件进行修改，并应用到HTML文件中，能够使页面自动对CSS文件中的更改样式进行自动套用，进而有效简化了网页设计流程，同时也使网页的后期更新与维护变得更加便捷。相比于以往的表格嵌套方式，利用DIV+CSS网页布局技术，能够使页面具有更快的加载速度，并且使页面的区域划分变得更加独立、灵活，用户在访问页面时，页面只需按照图层来进行加载即可，不需通过嵌套表格的方式在一个统一的表格中对页面进行固定。
三、基于页面布局技术的网页设计研究
（一）将CSS文件按照css后缀进行保存
在网页设计中，需要将CSS文件按照css后缀格式来进行保存，而这就需要对CSS样式进行定。
（二）将网页文档按照htm后缀进行保存
在对html格式网页文档进行保存时，需要在样式面板的附加样式弹出列框中找到mystyle.css文件，然后在代码视图的<body>标签内添加一个新的<div>标签，并在该标签中设置相应的ID样式，部分代码为：在上述代码编辑完毕后对文档进行保存，然后对网页进行预览，即可看到网页的实际展示效果，通过对CSS样式进行定义，能够设置网页中图层的大小、所在位置以及内容格式，利用DIV技术能够在不同图层中纳入想要的页面元素，从而使其成为网页结构中的组成部分，利用CSS技术来展示页面的外观样式，能够使网页中的内容与外观样式得以相互分离，进而在网页后续改版与更新时，只需对CSS进行便捷的修改即可。
四、结语
总而言之，通过CSS技术的应用，可使网页设计中的格式定义得到有效简化，提高网页的维护便捷性，相比于以往的HTML标记符，CSS技术具有强大的格式设置功能，可使网页具有更强的视觉表现力。将CSS与DIV两种网页布局技术进行结合应用，能够彻底解决以往表格布局中所带来的不足，从而使网页的页面布局以及外观样式变得更加灵活、简单。
参考文献：
〔1〕冯兴利，洪丹丹，罗军锋，锁志海.视频自适应技术在网页设计中的实现〔J〕.现代电子技术，2016，（24）：18-21.
〔2〕杨瑞梅.浅谈DIV+CSS布局技术在网页设计与制作中的应用〔J〕.信息记录材料，2017，（7）：118-120.
〔3〕冯兴利，洪丹丹，罗军锋，锁志海.自适应网页设计中的关键技术〔J〕.计算机应用，2016，（S1）：249-251，256.
作者：曹瑞燕
上一篇：多媒体技术在小学体育的应用
下一篇：师徒制教学模式在电子类专业的运用