前言：寻找写作灵感？中文期刊网用心挑选的网页布局网页设计教学应用，希望能为您的阅读和创作带来灵感，欢迎大家阅读并分享。
摘要：
在现在的网页设计中DIV标签的使用越来越频繁，DIV标签的作用也越来越重要，以前那种以内容为中心的网站已经成为过去式。论文在分析表格布局技术及CSS技术的基础上，阐述了应用DIV+CSS技术进行网页布局的优势。从高校计算机网页设计课程的教学情况出发，文章中提出了DIV+CSS技术在教学中的应用措施。
关键词：
网页布局；DIV+CSS方案；HTML优化；网页设计
只有当好的网页结构和优秀的网页布局相结合，才能达到最好的浏览效果，使浏览网站的用户感受到最好的用户体验，如何设计出这样的网页就是我们现在研究的重点。
1表格布局技术
早期页面布局的方式主要用框架及表格。在HTML和浏览器还不够完美的时候，我们想让页面内的元素能有一个让人满意的格局是比较困难的事情，由于表格不单可以控制单元格的宽度和高度，而且可以相互嵌套，所以为了让每个网页元素能够放在合适的位置，表格就成为网页设计者的主要工具。表格在页面布局上比较容易控制，通过表格的套入可以轻松地实现各种各样的布局，但是当你需要制作一个繁琐的页面时，HTML文档就会充满了标签。同时，因为浏览器需要把整个表格加载完后才会显示出来，因此加入一个表格过长，那么访客就需要等很长的加载时间才可以看到页面内容。使用表格布局页面会让HTML文档的内部结构变得杂乱不堪，HTML文档字节数变得越来越大，在落后的设备上，页面需要大量修改，正是这些弊端，使得网页开发者开始注意Web的标准。
2CSS样式
CSS就是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。CSS是Web标准中表现标准语言。使用CSS可以简化网站的格式代码，加快网页显示的速度，外部链接样式可以同时定义很多个页面，大大降低了重复劳动的工作量。CSS标准中重新定义了HTML中原来的文字显示格式，并增加了一些新理念，比如类、层等，可以对文字进行定位、重叠等操作，提供了更多丰富多彩的格式；同时CSS可进行集中样式管理。CSS还可以将样式定义独自存储于格式文件中，这样可以将显示的内容和显示样式定义分开，以便于多个HTML文件共享样式定义。除此之外，一个HTML文件也可以使用多个CSS样式文件中的样式定义，相对于之前传统HTML的表现而言，在网站的建立及重构过程中使用CSS技术，可以精准的掌握页面里每一个元素属性，例如：字号样式、背景、排列方式、区域尺寸、项目符号等，方便地实现网页的结构与内容表现完全分离，使站点的加载速度及维护更加方便。使网站的功能扩展性达到前所未有的增强。
3DIV+CSS技术
DIV+CSS是目前应用最多的一种网站布局技术，使用DIV+CSS的网页布局方案，首先需要把HTML结构化，我们可以先不考虑网页的外观。先将内容放在设置好的DIV中，让结构由DIV产生，然后再使用CSS进行格式设计，即“外观”设计。在网站设计前需要对网页进行规划设计。例如，一个页面可能有类似这样的几块：网站名称、主页、子页面导航（主菜单）、子菜单、搜索框、展示区、页脚等。与传统的表格布局相比较，使用DIV+CSS进行网页布局还具有以下优势：更快捷的被搜索引擎的引用，加载速度更快；CSS使用灵活，使页面元素样式多变，利于维护和更新；使用DIV+CSS技术，可以减少视觉的相同性，同一网页在不同浏览器中表现的效果相同或基本不变，保持网页的美感；表现和内容相分离、提高页面加载速度。
4DIV+CSS技术在教学中的应用措施
在网页设计课程学习时，经常是使用Dreamweaver网页开发软件，Dreamweaver是一个视觉化网页开发工具，可以方便、高效的实现DIV+CSS技术对页面进行布局，代码自动生成这一特点，一方面能让学生迅速的设计出网页，另一方面不利于学生真正记住和掌握。所以，在使用Dreamweaver的同时，可以让学生使用Notepad++编辑器或用记事本对代码进行录入。在初学DIV+CSS布局网页时，可以选择一个简单的网站，用表格和DIV+CSS技术两种方法进行布局，让学生真正理解这两种方法的区别和特点。针对不同网站使用不同的布局方法。教会学生当前社会网页前端开发师最需要的技术。基于以上论述，笔者认为在教学中加入DIV+CSS布局需要注意以下几个问题。共享学习资源，利用MOOC。教师要给出学习参考书目录，DIV+CSS布局的有关教材已经相当普遍，另外，教师也可以鼓励学生进行MOOC(慕课)学习，或在淘宝购买一些关于类似的视频教程，不论是在课上还是在课下，都能充分利用网上资源，整合成DIV+CSS布局原理、知识和案例的教学资源。将WEB的标准贯彻到网页设计的学习中，由HTML升级到XHTML。当下大部分网页设计教材讲解的内容还是HTML标记语言，但是在WEB结构标准语言中，我们将会使用XHTML，因此需要在HTML学习的基础上要加入升级版的教学内容，既要讲解HTML的普遍用法和主要标签，也要为学生讲解为什么要升级到XHTML以及升级后的XHTML比HTML好在哪里。适当推荐和引用CSS样式表，强化层叠样式表CSS的基础教学，为学习DIV+CSS的页面布局打下良好的基础。在讲解CSS样式时，可以引用网上使用频繁的外部CSS样式，在使用应用外部CSS文件的时候，页面的布局可以变得非常整洁和清新，让人眼前一亮。在CSS教学过程中，除了需要介绍CSS的常用属性之外，最重要的就是要让学生理解和学会使用外部CSS样式，这是学习DIV+CSS网页布局的提高过程。采用任务驱动式教学方法，以案例为驱动，培养学生学习兴趣，提高学生动手制作能力。在学习了基础的DIV+CSS页面布局知识之后，为学生提供一些DIV+CSS布局的网页案例的基础上，加强学生的动手实践训练，给学生一些真实的企业项目或学校网站项目，例如学院主页或各系主页宣传网站等。
5结语
本文探究的主旨在改变现存的网页设计课程的教学方法与模式，以培育精英级的网页设计人才为目的，扎实提升学生的自主学习能力，实现社会对网页设计精英的技术要求，从而保证该门课程的市场特色和教学质量。为了达到这个目的，我们对教学内容进行改变与扩充，使教学素材更加接近实际需求，竭力使学生更适合当今市场的需要，并为后面课程的学习打下坚实基础。
作者：田红玉 单位：黑龙江信息技术职业学院
参考文献
[1]高川程.浅谈基于DIV+CSS的网页布局技术应用研究[J].计算机光盘软件与应用,2013(1):231-232.
[2]刘坤彪,程旭东,陈铭.基于CSS的标准网页布局设计[J].南阳理工学院学报,2012(6):23-28.
[3]黄玉春,陈霞.DIV+CSS布局在网页设计教学中的应用研究[J].电脑知识与技术,2013(30):6837-6838.