【期刊】网页设计教学中DIV+CSS的研究.pdf

ISSN1009-3044 E-mail:wltx@ ComputerKnowledgeandTechnology电脑知识与技术 第10卷第23期 (2014年8月) ComputerKnowledgeandTechnology 电脑知识与技术 Vol.10,No.23,August2014 Tel:+86-55165690964 网页设计教学中DIV+CSS的研究 彭珊珊，王菁 （湖南涉外经济学院信息科学与工程学院，湖南长沙410205) 摘要：针对很多高校都开设了《网页设计》这门专业课的情况，该文以目前非常流行的网页设计技术DIV+CSS为研究对象， 阐述了网页设计教学现状，介绍了DIV+CSS布局的原理，分析了其优势，并在此基础上提出了该技术在教学中的具体实施 办法。 关键词：DIV；CSS；网页设计 中图分类号：G642 文献标识码：A 文章编号：1009-3044(2014)23-5470-02 ResearchonDIV+CSSinWebDesignCourse PENGShan-shan,WANGJing (HunanInternationalEconomicsUniversity,Changsha410205,China) Abstract: Formanycollegeshaveopenedthecoursewebdesign,basedonthecurrentpopularDIV+CSSwebdesigntech- nologyastheresearchobject,thispaperexpoundsthewebdesignteachingpresentsituation,introducestheprincipleofDIV+ CSSlayout，analyzesontheadvantagesoftheDIV+CSS,andbasedonthis,advancestheconcretemeasuresforimplementation ofthetechnologyintheteaching. Keywords:DIV;CSS;Webdesign 近年来，随着互联网的飞速发展，网页设计已成为现代社会中最吸引人的技术之一。各高校计算机、电子商务专业等都将《网 页设计》课程列为专业必修课程，而网页制作的相关知识和技能也成为计算机类人才知识结构不可或缺的一个重要组成部分。 1网页设计课程教学现状 在网页设计课程的教学中，通常是介绍网页设计软件(例如Dreamweaver、Flash、Fireworks)的用法，以此介绍网页设计的一些概 念和方法，在网页布局上使用表格或层来实现，对DIV和CSS的介绍比较少，而用DIV+CSS布局的网页案例就更少了。但在培养应 用型人才的目标下，我们必须让学生掌握当前主流的网页布局技术，现在各公司在网页设计人才的需求上，对掌握DIV+CSS网页 布局技术也是一个基本要求了，因此在网页设计课程教学中加入DIV+CSS布局的内容就显得十分必要。 2DIV+CSS布局的原理 DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格布局定位的方式不同，它可以实现网页页面内容与 表现相分离。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内 容都是用来构成这个块的。 CSS是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。 简单地说，DIV用于搭建网站结构（框架）、CSS用于创建网站表现（样式/美化），实质是使用XHTML对网站进行标准化重构，使 用CSS将表现与内容分离，便于网站维护，简化HTML页面代码，可以获得一个较优秀的网站结构。 3DIV+CSS在网页设计中的优势 掌握DIV+CSS的网页布局方式，是实现Web标准的基础。 1)结构标准化，布局更灵活 在使用表格布局时，垃圾代码很多，一些修饰的样式和布局的代码混合在一起，很不美观，而且页面布局采用表格的多层嵌 套、单元格的拆分、合并来实现，通常对一个单