DIV+CSS网页布局案例在教学中的应用
作者：张景峰 王丽芬 胡晓红
来源：《电脑知识与技术》2018年第03期
        摘要：该文将案例教学与兴趣教学相结合，提出了将实际应用案例融入课程的思路。同时也针对课程中采用案例的选取和设计进行了论述。
        关键词：案例设计；案例制作；整体思路；课堂教学
        中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）03-0128-02
        1 概述
        网页设计的实现一般通过两种方式：传统的表格布局方式和CSS布局方式。
        1） 表格布局
        传统的表格布局模式主要运用html中的table元素的无边框特性，设计一个能满足版式要求的表格结构，将内容装入每个单元格中。大量的样式设计代码混杂在单元格中，构成一个多
重嵌套的复杂的表格。这种布局方法，不利于页面的灵活设计和后期修改完善，降低页面的可读性，而且对于页面的维护增加了难度，也提高了成本。复杂的表格设计使得修改非常繁琐，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载解析速度变慢。
        2） div+css布局
        div可以理解为“图层”或者“块”，它是一种比表格简单的元素。Div的功能仅仅是将一段信息标记出来，用于后期的样式定义。而CSS布局的重点不再放在表格元素的设计中，CSS是一个非常灵活的工具，可以将文档的样式内容脱离出来。CSS样式表可以用来改变从文本样式到页面布局的一切，并且能够与JavaScript结合产生动态地显示效果。如：文本格式和颜；图形外观和布局；还有动态操作等等。
        3） 在HTML中有三种方式插入样式表，分别是：
css实现三列布局        （1） 内联样式表（直接写在HTML标签中）
        如：
        （2） 嵌入样式表：是将CSS样式表统一放置在页面的一个固定的位置。
        如：
       
       
       
        *{ margin：0px；Border：0px；Padding：0px；}
        Body{font-family：”黑体”；font-size：15px；color：#fff；}
       
       
       
        …
       
       
        （3） 外部样式表：外部样式表是CSS样式表中较为理想的一种形式。将样式代码单独编写在一个独立的文件中，外部样式文件便于修改。同一个外部样式文件可以被多个网页调用，能够实现代码的最大化使用及网站文件的最优化配置。
        如：
       
       
       
       
        4） CSS的选择符种类：
        （1） ID选择符：在每个网页中每个ID名称都是唯一的，只能用一次。ID选择符使用#进行标识。
        （2） 类选择符：以文档语言对象类型作为选择符。类选择符是在类名称之前用“.”
        ID选择符与class的不同之处在于，id用在唯一的元素上，而class可以用在多个元素上。
        2 典型案例的设计思路
        1） 简单生动的案例解决教学重点。
        在学习之初，设计一款简单生动实用的网页，介绍div与css的设计思路。
        案例1：简单网页制作
        结构要求：具有页眉、主体和页脚三部分。
        制作基本原理：新创建html页面文件和css文件，并将css文件附加到该页面产生联系。
首先在页面插入点添加一个div，构造网页的最外层结构，称之为box，并在css文件中设置box的相应样式：
        #box{
        width：1007px；
        height：888px；
        margin：auto；}
        其中，保持网页在任何浏览器都居中显示的关键设置是边距属性margin的自动参数。
        然后，在网页的页眉处插入页面LOGO元素，就需要在box的开始标签之后，创建一个div（top），并按照布局要求，设置top的css样式：
        #top{
        Width：950px；
        Height：379px；
        Margin：auto；}
        并将logo图片插入到top图层中。
        第三，在页面的top标签之后，创建页面主体main的div，以构建网页的主要内容部分，并在main的框架中平行创建三个子区：
        #main {
        width：942px；
        height：400px；
        margin：auto；}
        #main-left，#main-main，#main-right {
        width：258px；
        height：400px；
        float：left；
        line-height：20px；
        margin：0px 28px 0px 28px；}
        其中，三个子区的并列位置设定，需要一个重要的属性float（浮动定位）的参数设定，如从左向右，则设置float参数为left。确保后面的子区紧随其后，一字排列。
        最后，在页面main标签之后，创建一个id为bottom的div，用以编辑页脚的内容。同时在css中设置页脚div的样式：
        #bottom {
        width：1007；
        height：89px；
        color：#000；
        text-align：center；
        line-height：20px；
        background-image：url（../images/2506.png）；
        background-repeat：no-repeat；
        background-position：center bottom；
        border-top：#093 dashed 1px；
        margin-top：20px；}
        其中，在页眉与主体或主体与页脚之间经常会创建一条相应样式的分割线，使页面看上去既美观又条例。分割线的设置需要一个重要的属性border来实现，包含线条样式、线条颜以及线条粗细等参数设置。
        案例来自一个实际应用的作品，虽然结构简单，但非常典型的概括了网页布局的流程，以及div与css样式的相互作用。课堂上老师先给学生分析分解页面结构，然后一步一步引导学生完成案例，同时，学生掌握了相关知识，了解了页面制作流程。
        2） 典型案例解决教学难点
        掌握了div+css制作网页的基本流程后，通过接下来的典型案例来学习掌握不太规范的页面结构如何合理布局和实现。
        首先，在body样式设置中添加背景，同时在box的div样式中采用另一种方式定义页面宽度，即百分比的方式：width：100%，说明不管在怎样尺寸的显示屏上，在怎样的浏览器上，宽度上都是满屏显示。
        其次，在这种页面的制作中，页眉的元素比较零碎不规则。如何合理规划页眉是一个重要的课题。由于logo区域和导航条区域，结构不一，所以分别设置比较合理。先在box的开始标签之后添加top1，再在top1的开始标签之后添加top1-1来容纳logo图片，并且该div靠左摆放，以插入图片大小为依据，定义css样式。然后再在top1的右侧插入新的div（top1-2），
来存放入口链接。其中右侧的位置定义需要依靠float：right来实现，同时适当定义该图层的右边距。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。