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

《网页设计与制作》 教学设计 课程名称： 网页设计与制作 授课年级： 20 年级 授课学期： 20 学年第一学期 教师姓名： 老师 20 年 月 日 课题名称 项目七布局网页 计划课时 课时 内容分析 将多个块合理地安排到网页上是网页布局的关键，这也是网页制作中核心的问题。传统网页是采用表格进行布局的，但这种方式已经退出设计舞台，取而代之的是符合Web标准的DIV+CSS布局方式。 教学目标 · 理解元素的浮动属性 · 掌握元素的各种定位方法 · 掌握常用的DIV+CSS布局方式 重点及措施 教学重点：合理设置元素浮动；使用DIV+CSS布局页面；制作学院网站首页 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：制作学院网站首页 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 任务7.1布局常用属性 7.1.1元素的浮动 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 为什么要设置元素的浮动属性？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 默认情况下，网页中的块元素会以标准流的方式进行排列，即将块元素从上到下一一罗列，但在网页实际排版时，有时需要将块元素进行水平排列，这就需要为元素设置浮动属性。 · 知识点讲解 · 讲解元素的浮动 （1）教师展示PPT，对元素的浮动进行具体讲解。 默认情况下，网页中的块元素会以标准流的方式进行排列，即将块元素从上到下一一罗列，但在网页实际排版时，有时需要将块元素进行水平排列，这就需要为元素设置浮动属性。 　　所谓元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过float属性来设置左浮动或右浮动，其语法格式如下： 选择器{float：left|right|none；} 　　设为left或right，使浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止。若不设置float属性，则float属性值默认为none，即不浮动。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解实例1 未添加float属性 （1）教师展示PPT，对实例1 未添加float属性进行具体讲解。 实例1-1 未添加float属性 实例1-2 未添加float属性 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解实例2-1 未添加float属性 （1）教师展示PPT，对实例2-1 未添加float属性进行具体讲解。 实例2-1 未添加float属性 实例2-2 添加float属性的页面 若要段落的文字按原文档流的方式显示，即不受前面浮动元素的影响，则需要清除浮动。在CSS中，使用clear属性清除浮动，其语法格式如下： 选择器{clear:left|right|both;} 　　　　其中，值为left时，清除左侧浮动的影响；值为right时，清除右侧浮动的影响；值为both时，同时清除左右两侧浮动的影响。常用的属性值是both。 实例2-3 清除浮动影响 需要注意的是，clear属性只能清除元素左右两侧浮动的影响，而在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，那么子元素的浮动会对父元素产生影响 实例3 子元素浮动对父元素的影响 实例3-1 子元素浮动对父元素的影响 子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。需要使用overflow属性清除浮动，从而使父元素适应子元素的高，进而显示所设置的颜色， （2）学生自主提问，教师对疑难问题进行解答。 7.1.2元素的定位 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 元素的定位有哪些方式？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 静态定位、相对定位和绝对定位。 · 知识点讲解 · 讲解元素的定位属性 （1）教师展示PPT，对元素的定位属性进行具体讲解。 1）定位方式 　　在CSS中，position属性用于定义元素的定位方式，其常用语法格式如下： 选择器{position:static|relative|absolute;} position属性值的含义及解释 2）确定元素位置 position属性仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过left、right、top、bottom四个属性来精确定位元素的位置。 元素精确定位的属性值及含义 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解静态定位 （1）教师展示PPT，对静态定位进行具体讲解。 静态定位（static）是元素的默认定位方式，指各个元素按照标准流（包括浮动方式）进行定位。在静态定位状态下，无法通过left、right、top、bottom四个属性来改变元素位置。 实例4 静态定位 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解相对定位 （1）教师展示PPT，对相对定位进行具体讲解。 采用相对定位（relative）的元素会相对于自身原本的位置，通过偏移指定的距离到达新的位置。其中，水平方向的偏移量由left或right属性指定，竖直方向的偏移量由top和bottom属性指定。 实例5 相对定位 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解绝对定位 （1）教师展示PPT，对绝对定位进行具体讲解。 绝对定位（absolute）是将元素依据最近（相对或绝对）定位的父元素进行定位，若所有父元素都没有定位，则依据body元素（浏览器窗口）进行定位。 实例6 绝对定位 在网页中定义一个大盒子，其中包含三个子盒子，对第二个盒子进行绝对定位。对父元素设置相对定位，但不对其设置偏移量，同时对子元素two设置绝对定位，并通过right和bottom属性设置其精确位置 去掉box的position： relative；属性设置，那么子元素two将相对于浏览器窗口进行定位，将位于浏览器窗口的右下角。绝对定位的元素从标准流中脱离，不再占用标准文档流中的空间。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解实例7 绝对定位的应用 （1）教师展示PPT，对实例7 绝对定位的应用进行具体讲解。 使用绝对定位制作“苏轼诗词精选”中的“更多>>”的样式，<body>标签中添加文本的代码 为<body>标签中的内容设置CSS样式，对“更多>>”文本所在的<span>标签使用绝对定位。标题行作为父元素，可以设置相对定位，“更多>>”元素作为其中的子元素，设置绝对定位 （2）学生自主提问，教师对疑难问题进行解答。 任务7.2DIV+CSS布局 7.2.1单列布局 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 什么是单列布局？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 将页面上的块从上到下依次排列，即单列布局。 · 知识点讲解 · 讲解单列布局 （1）教师展示PPT，对单列布局进行具体讲解。 实例8 单列布局 对页面进行单列布局，页面从上到下分别为： 页面头部、导航、焦点图、内容和页面底部，每个块单独占一行，宽度相等，都为980 px。<body>标签中的每部分内容用<div>标签控制。 添加CSS样式，对其内容进行修饰。 （2）学生自主提问，教师对疑难问题进行解答。 7.2.2两列布局 · 内容学习 · 知识点讲解 · 讲解实例9 两列布局 （1）教师展示PPT，对实例9 两列布局进行具体讲解。 实例9 两列布局 对页面进行两列布局，页面内容分别为： 页面头部、导航、焦点图、左侧内容、右侧内容和页面底部。<body>标签中的每部分内容用<div>标签控制，添加CSS样式，对其内容进行修饰。 添加文本的代码 添加CSS样式的代码 上面代码中，right块设置了右浮动，实际上也可以设置左浮动。若设置左浮动需要设置margin-left属性使其与左边的left块间隔一定的距离，最终效果是一样的。 （2）学生自主提问，教师对疑难问题进行解答。 7.2.3三列布局 · 内容学习 · 知识点讲解 · 讲解实例10 三列布局 （1）教师展示PPT，对实例10 三列布局进行具体讲解。 实例10 三列布局 对页面进行三列布局，页面内容分别为： 页面头部、导航、焦点图、左侧内容、中间内容、右侧内容和页面底部。<body>标签中的每部分内容用<div>标签控制，添加CSS样式对其内容进行修饰。 添加文本的代码 添加CSS样式的代码 注意： 　很多浏览器在显示未指定width属性的浮动元素时会出现Bug。一定要为浮动的元素指定width属性。 （2）学生自主提问，教师对疑难问题进行解答。 7.2.4通栏布局 · 内容学习 · 知识点讲解 · 讲解实例11 通栏布局 （1）教师展示PPT，对实例11 通栏布局进行具体讲解。 现在很多流行的网站常采用通栏布局，即网页中的一些模块。例如，头部、导航或页面底部等经常需要通栏显示。这些模块无论页面放大或缩写，模块的宽度始终保持与浏览器一样的宽度。 通栏布局中导航栏和页面底部为通栏显示，它们与浏览器的宽度保持一致。通栏布局的关键在于在通栏模块的外面添加一层div，并且将该层div的宽度设置为100%。将页面进行通栏布局，导航栏和页面底部的宽度与浏览器一样宽，而内容的宽度为980 px。添加CSS样式，对其内容进行修饰。 添加文本的代码 添加CSS样式的代码 注意： 　在上面的代码中，导航栏和页面底部要设置通栏的宽度时，之所以要用大块包含子块，是因为导航栏和页面底部的内容仍然要在浏览器中居中显示，为了方便样式设置，要把内容放入子块中。 （2）学生自主提问，教师对疑难问题进行解答。 任务7.3综合案例——学院网页布局 · 知识点讲解 · 讲解实例12 学院网页布局 （1）教师展示PPT，对实例12 学院网页布局进行具体讲解。 实例12 学院网页布局 本案例是学院网页布局，新建一个HTML5文件，在文件中首先定义页面布局的结构，然后再定义各个布局块的样式。 　　步骤1： 创建HTML5文档 打开Dreamweaver软件。选择“文件”→“新建”→“空白页”→“创建”命令，创建HTML5文档，注意在“文档类型”下拉列表中选择“HTML5”类型。空白页带有HTML5的相关格式 步骤2： 添加文本 为网页添加文本，在<title>标签中输入“学院网站主页布局”，<body>标签中的内容分别为：页面头部、导航栏、滚动文字栏、左侧内容、中间内容、右侧内容、常用链接和页面底部。<body>标签中的每部分内容都用<div>标签控制。 步骤3： 添加CSS样式 在<head>标签中添加<style>标签，对文本中的每部分进行不同设置，具体如下。 （1）设置body。设置字体大小为24 px，外边距和内边距设置为0，字体居中。 （2）设置header。设置宽度和高度分别为1000 px和140 px，行高为140 px，背景颜色为#CCC，边距设置为0 auto。 步骤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，浮动方向为左浮动。 （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。 添加CSS样式的代码 　　 步骤4： 保存并浏览 （2）学生自主提问，教师对疑难问题进行解答。 项目小结 本项目主要介绍了利用DIV+CSS布局页面的知识，具体内容如下。 布局常用属性： 介绍了元素的浮动和元素的定位。 DIV+CSS布局： 介绍了多种布局方式，如单列布局、两列布局、三列布局和通栏布局。 学院网页布局： 介绍了学院网页的设计和制作过程，利用DIV+CSS布局学院网页。 通过本项目的学习，掌握元素的浮动和定位方法，学习多种布局方式，能够利用DIV+CSS布局学院网页。 实训14 · 实训名称 元素的定位 · 实训目标 静态定位 · 实训实施 在网页中定义一个大盒子，其中包含三个子盒子，所有元 素采用静态定位，即按标准的方式定位。要求如下。 1. 大盒子的样式，宽350 px，高350 px，背景颜色为#CCC。 2. 子盒子的样式，宽100 px，高100 px，背景颜色为#0FF，边框为1 px，边框颜色为#333。 （作品点评） 教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 · 布置作业 · 完成教师布置的作业。 · 预习下章内容。 项目测评 1.float属性能够正确使用float属性 2.clear属性能够正确使用clear属性 3.overflow属性能够正确使用overflow属性 4.静态定位能够对元素进行静态定位 5.相对定位能够对元素进行相对定位 6.绝对定位能够对元素进行绝对定位 7.网页布局能够使用四种布局方式进行网页布局 8.学院网页布局能够使用CSS外部样式表设置页面中各个块的样式 9.课后习题能够完成课后习题 10.课堂表现能够遵守纪律，完成学习任务 教 学 后 记 学科网（北京）股份有限公司 $$