项目7 布局网页（课件）《网页设计》（劳动保障出版社）

网页设计与制作 项目七 布局网页 N 1 知识目标 理解元素的浮动属性 掌握元素的各种定位方法 掌握常用的DIV+CSS布局方式 ‹#› 网页设计与制作 2 7.1.1 元素的浮动 任务7.1布局常用属性 默认情况下，网页中的块元素会以标准流的方式进行排列，即将块元素从上到下一一罗列，但在网页实际排版时，有时需要将块元素进行水平排列，这就需要为元素设置浮动属性。 　所谓元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过float属性来设置左浮动或右浮动，其语法格式如下： 选择器{float：left|right|none；} 　设为left或right，使浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止。若不设置float属性，则float属性值默认为none，即不浮动。 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例1-1 未添加float属性 两个盒子都没有添加float属性时，盒子自上而下排列。 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例1-2 未添加float属性 给两个盒子添加float属性 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例2-1 未添加float属性 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例2-2 添加float属性的页面 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 若要段落的文字按原文档流的方式显示，即不受前面浮动元素的影响，则需要清除浮动。在CSS中，使用clear属性清除浮动，其语法格式如下： 选择器{clear:left|right|both;}　 　其中，值为left时，清除左侧浮动的影响；值为right时，清除右侧浮动的影响；值为both时，同时清除左右两侧浮动的影响。常用的属性值是both。 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例2-3 清除浮动影响 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例2-3 清除浮动影响 需要注意的是，clear属性只能清除元素左右两侧浮动的影响，而在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，那么子元素的浮动会对父元素产生影响 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例3 子元素浮动对父元素的影响 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例3 子元素浮动对父元素的影响 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例3-1 子元素浮动对父元素的影响 ‹#› 网页设计与制作 7.1.1 元素的浮动 任务7.1布局常用属性 实例3-1 子元素浮动对父元素的影响 子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。需要使用overflow属性清除浮动，从而使父元素适应子元素的高，进而显示所设置的颜色 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 元素设置浮动属性后，可以使元素灵活地排列，但却无法对元素的位置进行精确控制。使用元素的定位等相关属性可以对元素进行精确定位。 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 1.元素的定位属性 （1）定位方式 在CSS中，position属性用于定义元素的定位方式，其常用语法格式如下： 选择器{position:static|relative|absolute;} ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 position属性值的含义及解释 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 1. 元素的定位属性 　（2）确定元素位置 　position属性仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过left、right、top、bottom四个属性来精确定位元素的位置。 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 元素精确定位的属性值及含义 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 2. 静态定位 　静态定位（static）是元素的默认定位方式，指各个元素按照标准流（包括浮动方式）进行定位。在静态定位状态下，无法通过left、right、top、bottom四个属性来改变元素位置。 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 实例4 静态定位 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 3. 相对定位 　采用相对定位（relative）的元素会相对于自身原本的位置，通过偏移指定的距离到达新的位置。其中，水平方向的偏移量由left或right属性指定，竖直方向的偏移量由top和bottom属性指定。 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 实例5 相对定位 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 4. 绝对定位 　绝对定位（absolute）是将元素依据最近（相对或绝对）定位的父元素进行定位，若所有父元素都没有定位，则依据body元素（浏览器窗口）进行定位。 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 实例6 绝对定位 在网页中定义一个大盒子，其中包含三个子盒子，对第二个盒子进行绝对定位。对父元素设置相对定位，但不对其设置偏移量，同时对子元素two设置绝对定位，并通过right和bottom属性设置其精确位置 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 去掉box的position：relative；属性设置，那么子元素two将相对于浏览器窗口进行定位，将位于浏览器窗口的右下角。绝对定位的元素从标准流中脱离，不再占用标准文档流中的空间。 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 实例7 绝对定位的应用 使用绝对定位制作“苏轼诗词精选”中的“更多>>”的样式，<body>标签中添加文本的代码 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 实例7 绝对定位的应用 为<body>标签中的内容设置CSS样式，对“更多>>”文本所在的<span>标签使用绝对定位。标题行作为父元素，可以设置相对定位，“更多>>”元素作为其中的子元素，设置绝对定位 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 实例7 绝对定位的应用 ‹#› 网页设计与制作 7.1.2 元素的定位 任务7.1布局常用属性 实例7 绝对定位的应用 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.1单列布局 DIV+CSS布局将页面在整体上进行DIV分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。常用的DIV+CSS布局方式有单列布局、两列布局、三列布局和通栏布局。下面分别对常用网页的布局方式进行介绍。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.1单列布局 对页面进行单列布局，页面从上到下分别为：页面头部、导航、焦点图、内容和页面底部，每个块单独占一行，宽度相等，都为980 px。<body>标签中的每部分内容用<div>标签控制。 实例8 单列布局 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.1单列布局 添加CSS样式，对其内容进行修饰。 实例8 单列布局 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.1单列布局 实例8 单列布局 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.2两列布局 单列布局虽然统一、有序，但会让人觉得呆板，所以在实际网页制作中，会采用两列布局。两列布局实际上是将中间内容分成左右两部分。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.2两列布局 实例9 两列布局 对页面进行两列布局，页面内容分别为： 页面头部、导航、焦点图、左侧内容、右侧内容和页面底部。<body>标签中的每部分内容用<div>标签控制，添加CSS样式，对其内容进行修饰。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2 DIV+CSS 布局 7.2.2两列布局 实例9 两列布局 添加文本的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2 DIV+CSS 布局 7.2.2两列布局 实例9 两列布局 添加CSS样式的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2 DIV+CSS 布局 7.2.2两列布局 实例9 两列布局 上面代码中，right块设置了右浮动，实际上也可以设置左浮动。若设置左浮动需要设置margin-left属性使其与左边的left块间隔一定的距离，最终效果是一样的。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.3三列布局 对于内容比较多的网站，有时需要采用三列布局。三列布局实际上是将中间内容分成左中右三部分。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.3三列布局 实例10 三列布局 对页面进行三列布局，页面内容分别为： 页面头部、导航、焦点图、左侧内容、中间内容、右侧内容和页面底部。<body>标签中的每部分内容用<div>标签控制，添加CSS样式对其内容进行修饰。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.3三列布局 实例10 三列布局 添加文本的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.3三列布局 实例10 三列布局 添加CSS样式的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.3三列布局 实例10 三列布局 添加CSS样式的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.3三列布局 实例10 三列布局 注意： 很多浏览器在显示未指定width属性的浮动元素时会出现BUG。一定要求浮动的元素指定width属性。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2 DIV+CSS 布局 7.2.4 通栏布局 现在很多流行的网站常采用通栏布局，即网页中的一些模块。例如，头部、导航或页面底部等经常需要通栏显示。这些模块无论页面放大或缩写，模块的宽度始终保持与浏览器一样的宽度。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2 DIV+CSS 布局 7.2.4 通栏布局 实例11 通栏布局 通栏布局中导航栏和页面底部为通栏显示，它们与浏览器的宽度保持一致。通栏布局的关键在于在通栏模块的外面添加一层div，并且将该层div的宽度设置为100%。将页面进行通栏布局，导航栏和页面底部的宽度与浏览器一样宽，而内容的宽度为980 px。添加CSS样式，对其内容进行修饰。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.4通栏布局 实例11 通栏布局 添加文本的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.4通栏布局 实例11 通栏布局 添加CSS样式的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.4通栏布局 实例11 通栏布局 添加CSS样式的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.2DIV+CSS布局 7.2.4通栏布局 实例11 通栏布局 注意： 　在上面的代码中，导航栏和页面底部要设置通栏的宽度时，之所以要用大块包含子块，是因为导航栏和页面底部的内容仍然要在浏览器中居中显示，为了方便样式设置，要把内容放入子块中。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.3〓综合案例——学院网页布局 实例12 学院网页布局 步骤1： 创建HTML5文档 　打开Dreamweaver软件。选择“文件”→“新建”→“空白页”→“创建”命令，创建HTML5文档，注意在“文档类型”下拉列表中选择“HTML5”类型。空白页带有HTML5的相关格式。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.3〓综合案例——学院网页布局 实例12 学院网页布局 步骤2： 添加文本 　　为网页添加文本，在<title>标签中输入“学院网站主页布局”，<body>标签中的内容分别为：页面头部、导航栏、滚动文字栏、左侧内容、中间内容、右侧内容、常用链接和页面底部。<body>标签中的每部分内容都用<div>标签控制。 添加文本的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.3〓综合案例——学院网页布局 实例12 学院网页布局 步骤3： 添加CSS样式 　在<head>标签中添加<style>标签，对文本中的每部分进行不同设置，具体如下： （1）设置body。设置字体大小为24 px，外边距和内边距设置为0，字体居中。 （2）设置header。设置宽度和高度分别为1000 px和140 px，行高为140 px，背景颜色为#CCC，边距设置为0 auto。 　　 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.3〓综合案例——学院网页布局 实例12 学院网页布局 步骤3： 添加CSS样式 （3）设置nav。设置宽度和高度分别为1000 px和36 px，背景颜色为#CCC，边距为5 px auto。 （4）设置mText。设置宽度和高度分别为1000 px和30 px，背景颜色设置为#CCC，边距设置为0 auto。 （5）设置content。设置宽度为1000 px，并清除浮动的影响，边距设置为5 px auto。 （6）设置left。设置宽度和高度分别为280 px和482 px ，背景颜色设置为#CCC，浮动方向为左浮动。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.3〓综合案例——学院网页布局 实例12 学院网页布局 （7）设置middle。设置宽度和高度分别为460 px和482 px，背景颜色为#CCC，浮动方向为左浮动，边距设置为0 10 px。 （8）设置right。设置宽度和高度分别为240 px和482 px，背景颜色设置为#CCC，边距设置为0 auto。 （9）设置footer。设置宽度和高度分别为1000 px和80 px，行高为80 px，背景颜色为#CCC，边距为5 px auto 0。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.3〓综合案例——学院网页布局 实例12 学院网页布局 添加CSS样式的代码 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务7.3〓综合案例——学院网页布局 实例12 学院网页布局 步骤4： 保存并浏览 ‹#› 网页设计与制作 项目小结 本项目主要介绍了利用DIV+CSS布局页面的知识，具体内容如下。 布局常用属性： 介绍了元素的浮动和元素的定位。 DIV+CSS布局： 介绍了多种布局方式，如单列布局、两列布局、三列布局和通栏布局。 学院网页布局： 介绍了学院网页的设计和制作过程，利用DIV+CSS布局学院网页。 通过本项目的学习，掌握元素的浮动和定位方法，学习多种布局方式，能够利用DIV+CSS布局学院网页。 谢谢 $$