《网页设计与制作（活页式）》 教案 项目7 布局网页_第1页
《网页设计与制作（活页式）》 教案 项目7 布局网页_第2页
《网页设计与制作（活页式）》 教案 项目7 布局网页_第3页
《网页设计与制作（活页式）》 教案 项目7 布局网页_第4页
《网页设计与制作（活页式）》 教案 项目7 布局网页_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与制作》教学设计课程名称：网页设计与制作授课年级：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单列布局对页面进行单列布局，页面从上到下分别为：页面头部、导航、焦点图、内容和页面底部，每个块单独占一行，宽度相等，都为980px。<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%。将页面进行通栏布局，导航栏和页面底部的宽度与浏览器一样宽，而内容的宽度为980px。添加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。设置字体大小为24px，外边距和内边距设置为0，字体居中。（2）设置header。设置宽度和高度分别为1000px和140px，行高为140px，背景颜色为#CCC，边距设置为0auto。步骤3：添加CSS样式（3）设置nav。设置宽度和高度分别为1000px和36px，背景颜色为#CCC，边距为5pxauto。（4）设置mText。设置宽度和高度分别为1000px和30px，背景颜色设置为#CCC，边距设置为0auto。（5）设置content。设置宽度为1000px，并清除浮动的影响，边距设置为5pxauto。（6）设置left。设置宽度和高度分别为280px和482px，背景颜色设置为#CCC，浮动方向为左浮动。（7）设置middle。设置宽度和高度分别为460px和482px，背景颜色为#CCC，浮动方向为左浮动，边距设置为010px。（8）设置right。设置宽度和高度分别为240px和482px，背景颜色设置为#CCC，边距设置为0auto。（9）设置footer。设置宽度和高度分别为1000px和80px，行高为80px，背景颜色为#CCC，边距为5pxauto0。添加CSS样式的代码步骤4：保存并浏览（2）学生自主提问，教师对疑难问题进行解答。项目小结本项目主要介绍了利用DIV+CSS布局页面的知识，具体内容如下。布局常用属性：介绍了元素的浮动和元素的定位。DIV+CSS布局：介绍了多种布局方式，如单列布局、两列布局、三列布局和通栏布局。学院网页布局：介绍了学院网页的设计和制作过程，利用DIV+CSS布局学院网页。通过本项目的学习，掌握元素的浮动和定位方法，学习多种布局方式，能够利用DIV+CSS布局学院网页。实训14实训名称元素的定位实训目标静态定位实训实施在网页中定义一个大盒子，其中包含三个子盒子，所有元素采用静态定位，即按标准的方式定位。要求如下。1.大盒子的样式，宽350px，高350px，背景颜色为#CCC。2.子盒子的样式，宽100px，高100px，背景颜色为#0FF，边框为1px，边框颜色为#333。（作品点评）教师对学

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论