HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第9章 设置背景、边框、边距和补白_第1页
HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第9章 设置背景、边框、边距和补白_第2页
HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第9章 设置背景、边框、边距和补白_第3页
HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第9章 设置背景、边框、边距和补白_第4页
HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第9章 设置背景、边框、边距和补白_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号9授课日期月日月日月日月日授课班级课内教学内容：第9章设置背景、边框、边距和补白课外学习任务：（1）课前：以小组为单位，讨论设置背景、边框、边距和补白的相关知识并以PPT的形式记录下来。（2）课后：=1\*GB3①使用相关属性为元素添加背景图像，并设置背景图像的平铺方式和滚动模式。=2\*GB3②使用边框属性为网页中元素添加边框样式。=3\*GB3③使用margin属性和padding属性来设置网页中元素的边距和补白。教学目标：知识目标掌握背景颜色的设置。掌握背景图像的设置。掌握边框的设置。掌握边距的设置。掌握补白的添加。能力目标能够掌握使用CSS实现背景、边框、边距和补白的设置；素质目标较强的专业知识和自学能力；丰富知识结构，提升专业知识；掌握背景、边框、边距和补白的CSS属性，理解并应用专业知识。重点难点及解决方法：（1）重点：使用CSS设置背景和边框解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解元素背景和边框样式的设置，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握背景和边框相关属性的使用；培养学生的思维能力和分析问题解决问题的能力。（2）难点：使用CSS添加边距和补白解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用CSS为元素添加边距和补白。帮助学生掌握CSS中关于边距和补白相关属性的使用方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段【导引示例】jQuery提供了十分丰富的工具函数，这些工具函数主要用于数据操作。例如，使用jQuery的数组操作函数对数组元素进行批量操作。1.背景颜色背景通常是指除了文本与边框之外的所有颜色。在CSS中可以使用background-color来设置背景颜色。background-color属性的语法格式如下。background-color:transparent|颜色|inherit各属性值的含义如下。transparent：设置背景颜色为透明，该值为默认值。颜色：可以为英文颜色名、RGB颜色或百分比颜色。inherit：继承父级样式。HTML中的大多数标签都可以设置背景颜色，如<body>、<div>、<td>等。2.背景图像【设置背景图像】在HTML中设置网页背景图像的方式为<bodybackground="图片URL">。在CSS中设置背景图像的属性为background-image，该属性不但可以设置网页背景图像，还可以设置表格、单元格、按钮等元素的背景图像。background-image属性的语法格式如下。background-image:none|url(uri)|inherit各属性值的含义如下。none：无背景图像，该值为默认值。url(uri)：图像的URL地址，该类地址可以是绝对地址或相对地址。inherit：继承父级样式。【设置固定背景图像】通常在为网页设置背景图像之后，背景图像都会平铺在网页的下方。当网页内容比较多时，拖动滚动条，网页的背景图像会跟着网页的内容一起滚动。在CSS中使用background-attachment属性可以将背景图像固定在浏览器上，此时拖动滚动条，背景图像不会随着网页内容的滚动而滚动，看起来好像文字是浮动在图片上似的。background-attachment属性的语法格式如下。background-attachment:scroll|fixed|inherit各属性值的含义如下。scroll：背景图像随内容滚动，该值为默认值。fixed：背景图像固定，不随内容滚动。inherit：继承父级样式。【设置背景图像平铺方式】在HTML中，如果背景图像小于浏览器窗口大小，浏览器会自动将背景图像平铺以充满整个浏览器窗口。不过在很多情况下，这种方式并不是展现背景图像最好的方式。在

CSS

中可以通过background-repeat属性来设置背景图像的平铺方式，background-repeat属性的语法格式如下。background-repeat:repeat|no-repeat|repeat-x|repeat-y|inherit各属性值的含义如下。repeat：平铺背景图像，该值为默认值。no-repeat：不平铺背景图像。repeat-x：背景图像在水平方向平铺。repeat-y：背景图像在垂直方向平铺。inherit：继承父级样式。【背景图像定位】在默认情况下，背景图像都是从元素的左上角开始显示的。使用background-position属性可以更改背景图像的开始显示位置，其语法格式如下。background-position:位置的具体值设置背景图像位置的属性值有多种方式：可以为x、y轴方向的百分比或绝对值方式，也可以使用表示位置的英文名称方式。设置背景图像位置的具体的属性取值及其含义如表9.1所示。表9.1设置背景图像位置的具体的属性取值及其含义属性取值方式及取值含义百分比（x%y%）起始位置与左上角的距离占整个元素的比例，包括水平方向和垂直方向。例如，设置页面的背景图像，则会以整个页面的大小为依据绝对值（x,y）起始位置的绝对坐标（以左上角为原点），包括横坐标和纵坐标。使用这种格式时需要同时设置长度单位top使图像在垂直方向上居于顶端bottom使图像在垂直方向上居于底端left使图像在水平方向上居于左端right使图像在水平方向上居于右端center使图像在水平方向或垂直方向居中显示在这些取值方式中，百分比方式和绝对值方式可以混用，即前面是百分比，后面是数值；同样地，前面可以是数值，后面可以是百分比。注意：无论使用哪一种取值方式，都应该包括水平方向和垂直方向两个位置，它们之间用空格分开。3.边框【设置边框样式】边框样式在边框的几个属性中可以说是最重要的。设置边框样式除了可以改变HTML中呆板的边框样式外，在某些时候还可以控制边框是否显示。在CSS中设置边框样式的属性为border-style，该属性的语法格式如下。border-style:边框的样式值开发者可以为边框设置多种线条效果，也就是设置边框的样式值，如实线、点线、短线等。边框的线条具体属性取值及其含义效果如表9.2所示。属性值含义线条的效果none无边框solid实线效果dotted点线效果，即边框由点组成dashed短线效果，即边框由多个短线组成double双实线效果groove带立体效果的沟槽ridge突出的脊形效果inset内嵌一个立体的边框outset外嵌一个立体的边框注意：只有边框和元素以及页面其他属性结合在一起时，才能真正展现页面的风格。表9.2中给出的效果可能不能很好地体现出来，读者可以在实例中应用不同的值来体会其风格。其中，groove、ridge、inset、outset和边框颜色结合设置能达到更好的效果。【设置不同的边框样式】使用border-style属性也可以为对象的4个边框设置不同的样式，其设置方法与border-width属性类似。开发者可以直接使用border-style属性设置4个边框的样式，它们对应的边框顺序依次是上边框、右边框、下边框和左边框。如果只设置了1个边框样式，则会对4个边框同时起作用；如果设置了2个，则第1个用于上下边框，第2个用于左右边框；如果提供3个，则第1个用于上边框，第2个用于左右边框，第3个用于下边框。【设置边框宽度】在HTML中可以使用border属性来设置table元素的边框宽度，在CSS中可以使用border-width属性来设置边框宽度。border-width属性不仅可以设置表格的边框宽度，还可以设置任何一个有边框的对象的边框宽度。border-width属性的语法格式如下。border-width:medium|thin|thick|数值各属性值的含义如下。medium：默认宽度。thin：比默认宽度小。thick：比默认宽度大。数值：以绝对单位数值或相对单位数值来指定边框的宽度。【设置不同的边框宽度】使用border-width属性不仅可以设置整个边框的宽度，还可以设置单个边框的宽度。其用法与设置边框样式一样，如果只设置了1个边框宽度，则会对4个边框同时起作用；如果设置了2个边框宽度，则第1个应用于上下边框，第2个应用于左右边框；如果提供3个边框宽度，则第1个应用于上边框，第2个应用于左右边框，第3个应用于下边框。【设置边框颜色】在HTML中无法为表格设置边框颜色，而CSS中的border-color属性可以做到，并且不仅可以为表格设置边框颜色，还可以设置几乎所有块对象的边框颜色，如p、div等。border-color属性的语法格式如下。border-color:颜色|transparent各属性值的含义如下。颜色：边框的颜色，可以是颜色英文名、RGB表示法和百分数表示法。transparent：透明颜色，即不设置颜色。【设置不同的边框颜色】使用border-color属性不仅可以统一设置4个边框的颜色，还可以设置单个边框的颜色，其设置方法与border-width属性和border-style属性类似。【综合设置边框效果】在CSS中，还可以使用border属性直接设置边框的整体效果，其语法格式如下。border:边框宽度边框样式边框颜色开发者可以只设置其中的一项或几项属性值，但如果要正常显示设置的边框效果，就需要设置边框的样式，即使是采用默认的solid。说明：border属性一般用于设置统一的边框风格，即使用该属性设置边框后，元素的4个边框都采用该效果。即使设置了多个宽度，也只取最后一个值。如果希望元素4个边框的效果不同，还是要分别设置。4.边距【设置上边距】在CSS中可以分别为一个元素设置其各个方向的边界宽度。上边距就是指元素与它上面的元素之间的距离，采用的是margin-top属性。设置上边距的语法格式如下。margin-top:距离值这里的距离值可以是百分比方式，也可以是由数值和单位组成的确定距离。如果只给出一个数值，则默认单位是px。百分比是以该元素的上一级元素为基础设置的。【设置下边距】下边距与上边距相对，是指元素距离下方元素的边距值，其语法格式如下。margin-bottom:距离值这里的距离值同样可以是百分比或具体的数值加单位方式。如果只给出一个数值，则会认为其单位是px。【设置左边距】左边距就是指元素与其左侧元素的距离。设置左边距的语法格式如下。margin-left:距离值这里的距离值可以采用百分比方式，也可以采用数值加单位方式来设置。如果仅给出一个数值，其单位默认为px。【设置右边距】右边距就是指元素与其右侧元素的距离。设置右边距的语法格式如下。margin-right:距离值这里的距离值可以是百分比方式的，也可以是具体的数值方式的。设置为具体数值时，可以同时设置其单位；如果不设置单位，则默认单位为px。【综合设置边距】如果要同时设置某个元素的4个边距，除了可以分别设置外，还可以使用复合属性margin设置。其语法格式如下。margin:各个边距的值这里可以设置1~4个边距值。设置1个值时，同时作用于元素的4个方向；设置2个值时，分别作用于上下和左右边距；设置3个值时，分别作用于上边距、左右边距和下边距；设置4个值时，按照上、右、下、左的顺序起作用。5.补白【设置顶端补白】顶端补白是指元素的内容与其上边框的距离，一般用来设置页面补白。其语法格式如下。padding-top:距离值其中，距离值一般采用数值的方式，并可以为其添加单位。如果没有设置单位，则默认以px为单位。【设置底部补白】底部补白就是指设置页面元素与下边框的距离。其语法格式如下。padding-bottom:距离值其中，距离值一般采用数值加单位的方式。如果省略单位，则默认以px为单位。【设置左侧补白】左侧补白是指页面中的元素与左侧边界的间隔。其语法格式如下。padding-left:距离值一般采用数值加单位的方式设置距离。如果省略单位，则默认以px为单位。【设置右侧补白】右侧补白是指页面中元素与右侧边界的间隔。其语法格式如下。padding-right:距离值一般采用数值加单位的方式设置距离。如果省略单位，则默认以px为单位。【综合设置补白】如果要同时设置某个元素的4个补白，除了可以分别设置外，还可以使用复合属性padding来设置。其语法格式如下。padding:各个方向的补白这里可以设置1~4个补白值。设置1个值时，同时作用于4个方向；设置2个值时，分别作用于上下和左右方向；设置3个值时，分别作用于顶端补白、左右补白和底部补白；设置4个值时，按照上、右、下、左的顺序起作用。6.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。7．上机指导1．使用相关属性为元素添加背景图像，并设置背景图像的平铺方式和滚动模式。2．使用边框属性为网页中元素添加边框样式。3．使用margin属性和padding属性来设置网页中元素的边距和补白。8.板书设计背景颜色背景图像边框边距补白教学评价上机指导课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《分析如何设置背景、边框、边距和补白》要求：以小组为单位，分析设置背景、边框、边距和补白，同时制作汇报PPT，提交到

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

温馨提示

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

最新文档

评论

0/150

提交评论