HTMLCSSJavaScript网页制作教学课件作者刘瑞新第5章节DivCSS布局页面课件.pptVIP

HTML+CSS+JavaScript网页制作 机械工业出版社同名教材 配套电子教案 5.1 Web标准 5.2 认识Div+CSS布局 5.3 案例：网络花店页面顶部的布局——盒模型 5.4 案例：商城登录页面整体布局——定位与浮动 5.5 典型的CSS布局样式 5.6 实训：网络花店热卖鲜花局部页面 第5章 Div+CSS布局页面 5.1.1 Web标准的概念 Web标准不是某一种标准，而是一系列标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为3类：结构化标准语言主要包括XHTML和XML，表现标准语言主要为CSS，行为标准主要包括对象模型W3C DOM、ECMAScript等。 5.1 Web标准 5.1.2 建立Web标准的优点 建立Web标准的优点如下： ? 提供最大利益给最多的网站用户； ? 确保任何网站文档都能够长期有效； ? 简化代码，降低建设成本； ? 让网站更容易使用，能适应更多不同用户和更多网络设备； ? 当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。 5.1 Web标准 5.1.3 理解表现和结构相分离 了解了Web标准之后，本小节将介绍如何理解表现和结构相分离。在此以一个实例来详细说明。首先必须先明白一些基本的概念：内容、结构、表现和行为。 所有HTML页面都由结构、表现和行为3个方面内容组成。内容是基础层，然后是附加上的结构层和表现层，最后再对这3个层做点“行为”。 5.1 Web标准 5.2.1 Div+CSS布局的优点 采用Div+CSS布局方式的优点如下： ? Div用于搭建网站结构，CSS用于创建网站表现，将表现与内容分离，便于大型网站的协作开发和维护。 ? 缩短了网站的改版时间，设计者只要简单地修改CSS文件就可以轻松地改版网站。 ? 强大的字体控制和排版能力，使设计者能够更好的控制页面布局。 ? 使用只包含结构化内容的HTML代替嵌套的标签，提高有哪些信誉好的足球投注网站引擎对网页的索引效率。 ? 用户可以将许多网页的风格格式同时更新。 5.2 认识Div+CSS布局 5.2.2 将页面用Div分块 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的关系。 5.2 认识Div+CSS布局 【案例展示】使用盒模型的基本知识制作网络花店页面顶部的布局，本例文件5-3.html在浏览器中的显示效果，如图5-6所示。 5.3 案例：网络花店页面顶部的布局——盒模型 5.3.1 盒模型简介 所谓盒模型，就是把每个HTML元素看作一个装了东西的盒子，盒子里面的内容有属性“宽（width）”和“高（height）”；盒子里面的内容到盒子的边框之间的距离叫“内边距（padding）”；盒子本身有“边框（border）”；而盒子边框外和其他盒子之间的距离叫“外边距（margin）”，如图5-7所示。元素的尺寸与边框等样式表属性的关系，如图5-8所示。 5.3 案例：网络花店页面顶部的布局——盒模型 5.3.2 外边距、边框与内边距 1．外边距 外边距也称为外补丁。外边距设置属性有：margin-top、margin-right、margin-bottom、margin-left，可分别设置，也可以用margin属性，一次设置所有边距。 2．边框 常用的边框属性有7项：border-top、border-right、border-bottom、border-left、border-width、border-color、border-style。其中border-width可以一次性设置所有的边框宽度，border-color同时设置四面边框的颜色时，可以连续写上4种颜色，并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序（顺时针）。 5.3 案例：网络花店页面顶部的布局——盒模型 5.3.2 外边距、边框与内边距 3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了4项属性：padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），内边距属性不允许负值。与外边距类似，内边距也可以用padding一次性设置所有的对象间隙，格式也和margin相似，这里