DIV+CSS布局在网页设计教学中的应用研究.docVIP

DIV+CSS布局在网页设计教学中的应用研究 　　摘要：该文分析了当前网页设计中的网页布局的方法，DIV+CSS的网页布局的优点。针对高职计算机网页设计课程的教学现状，该文提出了在网页设计课程中采用任务驱动的教学模式，将DIV+CSS的网页布局方法在网页设计教学中加以应用与实践。 　　关键词：网页布局；DIV+CSS；XHTML；教学实践 　　中图分类号：G718.5 文献标识码：A 文章编号：1009-3044（2013）30-6837-02 　　1 概述 　　网页布局在网页设计与制作中变得越来越重要了，访问者不愿再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功结合时，这种网页才是受人喜欢的。 　　2 早期网页布局的方法 　　早期页面布局的方法主要用表格和框架。在HTML和浏览器还不完善的时候，要想页面内的元素能有一个比较好的格局是比较麻烦的事情，由于表格不仅可以控制单元格的宽度和高度，而且可以互相嵌套，所以为了让各个网页元素能够放在预设的位置，表格就成为网页制作者的得力工具。 　　表格在版面布局上比较容易掌控，通过表格的嵌套可以很轻易地实现各种版式布局，但是在制作一个比较复杂的页面时，HTML文档内将充满和标签。同时，由于浏览器需要把整个表格下载完后才会显示，因此如果一个表格过长的话，那么访问者要等很长时间才能看到页面内容。用表格布局存在着HTML文档的内部结构变得混乱，HTML文档字节数变得越来越大，在手持设备上不支持，页面修改工作量大等缺点，正是这些弊病，使得网页设计者开始关注Web标准。 　　3 CSS概述 　　CSS是web一系列标准中的一个，是web标准中表现标准语言。在web标准中，将网页主要划分成3部分：结构、表现和行为。其中结构对应的标准就是结构化标准语言，主要包括XHTML和XML；表现对应的是表现标准语言主要包括CSS；行为对应的是行为标准语言主要包括对象模型（如W3C DOM）、ECMAScript等。 　　CSS（Cascading Style Sheets，层叠样式表）目前推荐遵循的标准是W3C于1998年5月12日发布的CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格布局、帧和其他表现语言。纯CSS布局于结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 　　CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，又称为“级联样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。 　　CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，能够根据设计者意图，对网页字体、段落、列表、背景、边框等进行随心所欲的控制，是目前基于文本展示最优秀的表现设计语言。纯CSS布局与结构式XHTML相结合能够将网页的外观与结构分离，使站点的访问及维护更加容易。 　　4 DIV+CSS布局方案 　　根据新的Web标准，采用DIV+CSS的页面布局方案，首先要求把HTML结构化，对于网页的外观可暂不考虑。也就是把内容放在DIV中，结构由DIV产生，最后使用CSS来进行“外观”设计，即进行网页的布局。 　　在网页设计前对网页进行规划。例如，一个页面可能得到类似这样的几块： 　　标志和站点名称（网页头部）、主页面内容、站点导航（主菜单）、子菜单、搜索框、功能区、页脚（版权信息）等。 　　采用DIV+CSS进行网页布局相对与传统的TABLE网页布局相比还具有表现和内容相分离、更方便搜索引擎的搜索、提高页面浏览速度、易于维护和改版等优势，采用DIV+CSS对网站重构可以大大提升网站用户与搜索引擎的友好度。 　　5 DIV+CSS布局在教学中的实践 　　在网页设计教学中，通常是通过对网页设计软件（例如dreamweaver8.0）用法的讲解来介绍网页设计的一些概念和方法，在网页布局上更多的是使用表格或层来实现，当前高职网页设计教材对网页布局介绍通常都是以表格布局为例，对CSS介绍的比较少，用DIV+CSS布局的介绍就更少，用DIV+CSS布局的网页案例十分少见。但在技能型人才的培养上，我们我们必须让学生掌握当前主流的网页布局技术，现在个公司在网页设计人才的需求上，对掌握DIV+CSS网页布局技术也是一个基本要求了，因此在网页设计课程教学中加入DIV+CSS布局的内容就显得十分必要。基于上述原因，我在教学中注重以下几个问题。 　　1）收集有关教学资料，丰富教学资源。由于DIV+CSS布局的教材难以找到，因此我就在网上找一些有关DIV+CSS布局的技术文章和用DIV+CSS布局的网