《网页设计与制作(HTML+CSS)(第2版)》全册教案教学设计.doc

上传人：胜****

文档编号：82294

上传时间：2022-06-14

格式：DOC

页数：128

大小：62.10MB

《《网页设计与制作(HTML+CSS)(第2版)》全册教案教学设计.doc》由会员分享，可在线阅读，更多相关《《网页设计与制作(HTML+CSS)(第2版)》全册教案教学设计.doc（128页珍藏版）》请在咨信网上搜索。

《网页设计与制作（HTML+CSS）（第2版）》全书教学设计课程名称：授课年级：授课学期：教师姓名： 202 年月课题名称第1章 HTML和CSS网页设计概述计划课时 4课时教学引入在学习HTML和CSS之前，我们首先需要了解一些与网页制作相关的知识，为学习后面章节的内容夯实基础。本章将从网页概述、网页制作技术、网页展示平台以及网页代码编辑工具四个方面详细讲解网页制作的相关知识。教学目标 l 使学生了解网页，能够举例说明网页的构成和相关名词的含义。 l 使学生熟悉网页制作的入门技术，能够归纳总结这些技术的特点。 l 使学生了解网页的展示平台——浏览器，能够说出各主流浏览器的特点。 l 使学生掌握Dreamweaver工具的使用，能够运用Dreamweaver工具搭建一个简单的网页。教学重点 l 创建第一个网页教学难点 l Web标准教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（网页的构成、网页相关名词、Web标准、HTML简介、CSS简介）一、通过直接导入的方式导入新课说到网页，其实大家并不陌生，我们上网时浏览新闻、查询信息、看视频等都是在浏览网页。网页可以看作承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。然而网页是由什么构成的？我们经常提及的Web、网址又是什么？网页有哪些标准？本节将从网页的构成、网页相关名词、Web标准三个方面详细讲解网页的相关知识。二、新课讲解知识点1-网页的构成教师展示PPT，讲解网页的构成。（1）分析淘宝网首页中包含的元素 l 文字 l 图像 l 超链接 l 音频 l 视频 l 动画（2）查看网页的源代码并分析知识点2- 网页相关名词教师展示PPT，讲解网页相关名词。（1） Internet （2） WWW （3） URL （4） DNS （5） HTTP和HTTPS （6） Web （7） W3C组织知识点3-Web标准教师展示PPT，讲解Web标准。（1）结构 l HTML l XML l XHTML （2）表现（3）行为 l ECMAScript l BOM l DOM 知识点4-HTML简介教师展示PPT，讲解HTML简介。（1） HTML概念：HTML（Hyper Text Markup Language，超文本标签语言）是通过标签描述网页中的文本、图像、声音等内容。（2） HTML发展史： l 1989年HTML首次应用到网页设计。 l 1993年HTML首次以因特网草案的形式发布（第一版）。 l 1995年第2.0版。 l 1997年第3.2版。 l 1997年第4.0版。 l 1999年第4.01版。 l 2008年发布了HTML5的工作草案。 l 2014年10月底，W3C宣布HTML5正式定稿。知识点5-CSS简介教师展示PPT，讲解CSS简介。（1） CSS概念：CSS也被称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外观（宽高、边框样式、边距等）以及版面的布局等外观显示样式。（2） CSS发展史： l 1996年12月W3C发布了第一个有关样式的标准CSS1。 l 1998年5月发布了CSS2。 l 2001年5月23日W3C完成了CSS3的工作草案。三、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。四、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。第二课时（网页展示平台）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。下列选项中，属于网页构成要素的有（）。 A、文字 B、超链接 C、音频 D、代码答案：ABC 说明：网页主要由文字、图像和超链接（超链接为单击可以跳转的其他页面的元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。二、通过直接导入的方式导入新课浏览器是网页展示的平台，只有经过浏览器渲染，网页才能将美丽的效果呈现给用户。浏览器的种类有很多，例如IE浏览器、火狐浏览器、谷歌浏览器、Edge浏览器、Safari浏览器和Opera浏览器等。三、新课讲解知识点-网页展示平台教师展示PPT，讲解网页展示平台。（1） IE浏览器（2）火狐浏览器（3）谷歌浏览器四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。第三、四课时（Dreamweaver操作界面、Dreamweaver初始化设置、创建第一个网页）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。请列举常见的网页展示平台？答案：火狐浏览器、谷歌浏览器、IE浏览器。说明：无二、通过直接导入的方式导入新课为了方便网页制作，我们通常会选择一些较便捷的网页代码编辑工具。例如，Hbuilder、sSublime、VS Code、Dreamweaver等。其中前面列举的3种软件，更偏向于Web开发，而Dreamweaver工具则依靠其可视化的网页制作模式，极大地降低了网站建设的难度，使得不同技术水平的设计师，都能搭建出美观的页面。本节将简单介绍Dreamweaver工具的使用，并利用该工具创建本书第一个网页。三、新课讲解知识点1- Dreamweaver操作界面教师展示PPT，讲解Dreamweaver操作界面。（1）菜单栏 l 文件（F）菜单 l 编辑（E）菜单 l 查看（V）菜单 l 插入（I）菜单 l 修改（M）菜单 l 格式（O）菜单 l 命令（C）菜单 l 站点（S）菜单 l 窗口（W）菜单 l 帮助（H）菜单（2）插入栏（3）文档工具栏 l “显示代码视图” l “显示代码和设计视图” l “显示设计视图” l “在浏览器中预览/调试” l “刷新” （4）文档编辑界面（5）属性面板知识点2-Dreamweaver初始化设置教师展示PPT，讲解Dreamweaver初始化设置。（1）设置工作区布局（2）添加必备面板（3）设置新建文档（4）设置代码提示（5）浏览器设置知识点3-创建第一个网页教师展示PPT，讲解创建第一个网页。（1）编写HTML代码（2）编写CSS代码四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。教学后记《网页设计与制作（HTML+CSS）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名： 202 年月课题名称第2章 HTML入门计划课时 6课时教学引入 HTML作为一门标签语言，主要用来描述网页中的文字和图像等元素。使用HTML标签描述网页中的内容是每一个网页制作人员的入门要求。然而什么是HTML标签？又该如何使用HTML标签描述网页中的文字和图像呢？本章将对HTML的入门知识进行详细讲解。教学目标 l 使学生掌握HTML文档基本格式，能够书写符合格式规范的HTML结构代码。 l 使学生掌握文本控制标签的用法，能够合理地使用文本控制标签定义网页元素。 l 使学生掌握图像标签，学会运用图像标签制作图文混排页面。教学重点 l 标签的属性 l 标题标签 l 段落标签 l 文本样式标签 l 文本格式化标签 l 图像标签<img /> l 绝对路径和相对路径 l 【阶段案例】制作图文混排页面教学难点 l 绝对路径和相对路径教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（HTML文档格式、标签分类、标签的属性、标签关系、头部结构标签）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。在Dreamweaver中，能够选择文档视图方式的菜单是（）。 A、插入（I） B、查看（V） C、站点（S） D、文件（F）答案：A 说明：“查看（V）”菜单：用于选择文档的视图方式。例如，设计视图、代码视图等。此外“查看（V）”菜单还可以用于显示或隐藏不同类型的页面元素和工具。二、通过直接导入的方式导入新课 HTML作为一门标签语言，主要用来描述网页中的文字和图像等信息，其最新版本HTML5已经逐渐成为移动互联网的主流。但什么是HTML，又该如何使用HTML标签控制网页中的文字和图像呢？本章对HTML的基础知识进行详细讲解。三、新课讲解知识点1-HTML文档格式教师展示PPT，讲解HTML文档格式。（3） <!DOCTYPE>：<!DOCTYPE>位于文档的最前面，也被称为文档类型声明，用于向浏览器说明当前文档使用哪种HTML标准规范。（4） <html>：<html>位于<!DOCTYPE>之后，也被称为根标签。根标签标示了HTML文档的开始和结束，其中<html>标示HTML文档的开始，</html>标示HTML文档的结束，在它们之间是网页的头部内容和主体内容（5） <head>：<head>用于定义HTML文档的头部内容，也被称为头部标签，该标签紧跟在<html>之后。头部标签主要用来容纳其他位于文档头部的标签，用来描述文档的标题、作者，以及该文档与其他文档的关系。（6） <body>：<body>用于定义HTML文档所要显示的内容，也被称为主体标签。在网页中，所有文本、图像、音频和视频等内容代码都必须放在<body>内，才能最终呈现给用户。知识点2-标签分类教师展示PPT，讲解标签分类。（8）双标签 l 双标签的概念：双标签也被称为“体标签”，是指由开始和结束两个标签符号组成的标签。 l 双标签的基本语法格式： <标签名>内容</标签名> （9）单标签 l 单标签的概念：单标签也被称为“空标签”，是指用一个标签符号即可完整的描述某个功能的标签。 l 单标签的基本语法格式： <标签名 /> 知识点3-标签的属性教师展示PPT，讲解标签的属性。 <标签名属性1="属性值1" 属性2="属性值2" …>内容</标签名> 知识点4-标签关系教师展示PPT，讲解标签关系。（3）嵌套关系嵌套关系也称为包含关系，可以简单理解为一个双标签里面有包含了其他的标签。（4）并列关系并列关系也称为兄弟关系，就是两个标签处于同一级别，并且没有包含关系。知识点5-头部结构标签教师展示PPT，讲解头部结构标签。（3） <title>标签 l <title>标签的概念：用于设置HTML页面的标题，也就是给网页取一个名。 l <title>标签的示例代码： <title>轻松学习HTML5</title> （4） <meta />标签 l <meta name="名称" content="值"/> l <meta http-equiv="名称" content="值" /> 四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。第二课时（标题标签、段落标签、水平线标签、换行标签、文本样式标签、文本格式化标签、特殊字符）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。下列选项中，属于双标签的有（）。 A、<html> B、<body> C、< hr /> D、<meta /> 答案：AB 说明：无。二、通过直接导入的方式导入新课在一个网页中文字往往占有较大的篇幅，为了让文字能够在网页中排版整齐、结构清晰，HTML提供了一系列的文本控制标签。例如，标题标签<h1>~<h6>、段落标签<p>、字体标签<font>等，本节将对这些HTML文本控制标签进行详细介绍。三、新课讲解知识点1-标题标签教师展示PPT，讲解标题标签。（4）标题标签的概念：HTML提供了6个等级的标题，即h1、h2、h3、h4、h5和h6，从h1到h6重要性递减。（5）标题标签的基本语法格式： <hn align="对齐方式">标题文本</hn> （6） align属性的取值： l left：设置标题文字左对齐（默认值）。 l center：设置标题文字居中对齐。 l right：设置标题文字右对齐。知识点2-段落标签教师展示PPT，讲解段落标签。（1）段落标签的概念：在网页中使用<p>标签来定义段落。默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。（2）段落标签的基本语法格式： <p align="对齐方式">段落文本</p> 知识点3-水平线标签教师展示PPT，讲解水平线标签。（1）水平线标签的概念：在网页中，水平线可以将段落与段落之间隔开，使得文档层次分明。水平线可以通过<hr />标签来定义。（2）水平线标签的基本语法格式： <hr 属性="属性值" /> （3）水平线标签的常用属性： l align：设置水平线的对齐方式。 l siza：设置水平线的粗细。 l color：设置水平线的颜色。 l width：设置水平线的宽度。知识点4-换行标签教师展示PPT，讲解换行标签。使用换行标签<br />对文本内容强制换行显示。知识点5-文本样式标签教师展示PPT，讲解文本样式标签。（1）文本样式标签的概念：文本样式标签<font >，用来控制网页中文本的字体、字号和颜色。（2）文本样式标签的基本语法格式： <font 属性="属性值">文本内容</font> （3） <font>标签常用的属性： l face：设置文字的字体，例如微软雅黑、黑体、宋体等。 l size：设置文字的大小，可以取1到7之间的整数值。 l color：设置文字的颜色。知识点6-文本格式化标签教师展示PPT，讲解文本格式化标签。（1）文本格式化标签的概念：在网页制作中，文本格式化标签可以使文字以特殊的方式突出显示，例如网页中常见的粗体、斜体或下画线效果。（2）常用的文本格式化标签： l <b>和<strong>：文字以粗体方式显示（HTML推荐使用strong）。 l <i>和<em>：文字以斜体方式显示（HTML推荐使用em）。 l <s>和<del>：文字以加删除线方式显示（HTML推荐使用del）。 l <u>和<ins>：文字以加下画线方式显示（HTML不赞成使用u）。知识点7-特殊字符教师展示PPT，讲解特殊字符。四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。第三课时（常用图像格式、图像标签<img />、绝对路径和相对路径）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。下列选项中，能够设置文字大小的属性是（） A、face B、size C、color D、width 答案：B 说明：无二、通过直接导入的方式导入新课浏览网页时我们常常会被网页中的图像所吸引，巧妙的在网页中使用图像可以让网页更为丰富多彩。本节将通过对常用图像格式、图像标签、相对路径和绝对路径几个知识点，详细讲解HTML中图像的应用。三、新课讲解知识点1- 常用图像格式教师展示PPT，讲解常用图像格式。（6） GIF格式（7） PNG格式（8） JPEG格式知识点2-图像标签<img /> 教师展示PPT，讲解图像标签<img /> （1）图像标签<img />基本语法格式： <img src="图像URL" /> （2） <img />标签的其他属性 l 图像的替换文本属性alt l 图像的宽度、高度属性width、height l 图像的边框属性border l 图像的边距属性vspace和hspace l 图像的对齐属性align 知识点3-绝对路径和相对路径教师展示PPT，讲解绝对路径和相对路径。（3）绝对路径绝对路径的概念：绝对路径就是网页上的文档或目录在盘符（即C盘、D盘等）中的真正路径，例如“D:\案例源码\chapter02\images\banner1.jpg”就是一个盘符中的绝对路径。（4）相对路径 l 相对路径的概念：相对路径就是相对于当前文档的路径，相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。 l 相对路径的设置. 四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。第四课时（【阶段案例】制作图文混排页面）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。相对路径是网页上的文档在盘符中的真正路径（） A、对 B、错答案：B 说明：相对路径就是相对于当前文档的路径，相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。二、通过直接导入的方式导入新课本章前几个小节重点讲解了什么是HTML、HTML文本控制标签以及HTML图像标签。为了使初学者能够更好地认识HTML，本小节将通过案例的形式分步骤实现网页中常见的图文混排效果。三、新课讲解案例实现1- 分析效果图教师展示PPT，分析效果图。案例实现2-制作页面结构教师编写代码，制作页面结构。案例实现3-控制图像教师编写代码，控制图像。案例实现4-控制文本教师编写代码，控制文本。四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 复习本节课的内容。第五、六课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机一：（考查知识点为HTML标签）形式：单独完成题目：制作电影宣传效果。要求如下： 1. 在Dreamweaver中添加<h2>标题内容、水平线、图像、段落文本，整体作为网页的上半部分。 2. 在Dreamweaver中添加<h2>标题内容、水平线、图像、段落文本，整体作为网页的下半部分。 3. 分别给两部分文本和图像添加样式。 4. 在firefox浏览器中预览。上机二：（考查知识点为文本格式化标签）形式：单独完成题目：城东早春。要求如下： 1. 在Dreamweaver默认文档中写好6个段落。 2. 在每个段落中分别使用不同的文本格式化标签：（1）第一个段落即题目设置为粗体；（2）第二个段落即作者设置为斜体；（3）第四个段落添加下划线效果；（4）第六个段落添加删除线效果。 3. 其他段落使用普通的文本格式输出。教学后记《网页设计与制作（HTML+CSS）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名： 202 年月课题名称第3章 CSS入门计划课时 8课时教学引入随着网页制作技术的不断发展，单调的HTML属性样式已经无法满足网页设计的需求。网页设计人员需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS的出现在不改变原有HTML结构的情况下，增加了丰富的网页样式效果，极大地满足了开发者的需求。本章将详细讲解CSS入门的知识。教学目标 l 使学生掌握CSS选择器的用法，能够运用CSS基础选择器和复合选择器定义标签样式。 l 使学生熟悉CSS文本样式属性的类型，能够运用相应的属性定义文本样式。 l 使学生掌握CSS优先级权重的规律，能够区分CSS选择器权重的大小。 l 使学生了解CSS层叠性和继承性，能够运用CSS层叠性和继承性优化代码结构。教学重点 l CSS样式引入 l 标签选择器 l 类选择器 l id选择器 l 标签指定式选择器 l 后代选择器 l 并集选择器 l 【阶段案例】制作新闻页面教学难点 l CSS层叠性和继承性 l CSS优先级教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一、二课时（CSS样式规则、CSS样式引入、标签选择器、类选择器、id选择器、通配符选择器）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。若想让图像和文字之间有一定距离的排列效果，就需要使用水平边距属性（）。答案：hspace 说明：无二、通过直接导入的方式导入新课在使用CSS之前，我们首先要掌握CSS的基础知识，为熟练使用CSS夯实基础。在学习CSS的过程中，CSS样式规则、CSS样式引入、CSS基础选择器是CSS最核心的内容，本节将详细讲解这些核心基础内容。三、新课讲解知识点1-CSS样式规则教师展示PPT，讲解CSS样式规则。（10） CSS的基本样式规则：选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ······} （11）书写CSS样式代码结构的特点： l CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般将选择器、声明都采用小写的方式。 l 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。 l 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号（一般使用双引号）。 l 在编写CSS代码时，为了提高代码的可读性，可使用“/*注释语句*/”来进行注释。 l 在CSS代码中空格是不被解析的，中括号以及分号前后的空格可有可无。知识点2-CSS样式引入教师展示PPT，讲解CSS样式引入。（4）行内式行内式的基本语法格式： <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名> （5）内嵌式内嵌式的基本语法格式： <head> <style type="text/css"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> （6）外链式 l 外链式的基本语法格式： <head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head> l <link />标签属性：href、type、rel （7）导入式导入式的基本语法格式： <style type="text/css" > @import url(css文件路径);或 @import "css文件路径"; /* 在此还可以存放其他CSS样式*/ </style> 知识点3-标签选择器教师展示PPT，讲解标签选择器。标签选择器的基本语法格式：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 知识点4-类选择器教师展示PPT，讲解类选择器。 l 类选择器的基本语法格式： .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } l 类选择器的注意事项：第一个字符不能使用数字，并且严格区分大小写。知识点5-id选择器教师展示PPT，讲解id选择器。 l id选择器的基本语法格式： #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } l id选择器的注意事项：同一个id也可以应用于多个标签，浏览器并不报错，但是这种做法是不被允许的。知识点6-通配符选择器教师展示PPT，讲解通配符选择器。通配符选择器的基本语法格式： *{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。第三课时（CSS字体样式属性、CSS文本外观属性）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。下列选项中，属于CSS基础选择器的是（）。 A、标签选择器 B、类选择器 C、id选择器 D、通配符选择器答案：ABCD 说明：无。二、通过直接导入的方式导入新课学习HTML时，我们可以使用文本样式标签和属性控制文本内容的显示样式，但是这种方式繁琐且不利于代码的维护。为此，CSS提供了文本样式属性。使用CSS文本样式属性可以轻松方便的控制内容的显示样式。CSS文本样式属性包括CSS字体样式属性和CSS文本外观属性，本节将对这两种属性做详细讲解。三、新课讲解知识点1-CSS字体样式属性教师展示PPT，讲解CSS字体样式属性。（1） font-size:字号 l 作用：用于设置字号。 l 常用的属性值单位em、px、% （2） font-family:字体 l 作用：用于设置字体。 l 使用font-family设置字体时的注意事项。（3） font-weight:字体粗细 l 作用：用于定义字体的粗细。 l 属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。（4） font-variant:变体作用：用于设置英文字符的变体，用于定义小型大写字体。可用属性值：normal、small-caps。（5） font-style:字体风格 l 作用：用于定义字体风格。 l 可用属性值：normal、italic、oblique。（6） font:综合设置字体样式 l 作用：用于对字体样式进行综合设置。 l 基本语法格式：选择器{font:font-style font-variant font-weight font-size/line-height font-family;} （7） @font-face规则 l 作用：用于定义服务器字体。 l 基本语法格式： @font-face{ font-family:字体名称; src:字体路径; } l 使用服务器字体的步骤。 l 服务器字体定义完成后的注意事项。知识点2-CSS文本外观属性教师展示PPT，讲解文本外观属性。（1） color:文本颜色 l 作用：用于设置文本颜色。 l 属性取值：颜色英文单词、十六进制颜色值、RGB颜色值。 l 取值的注意事项。（2） letter-spacing:字间距 l 作用：用于设置字间距。 l 属性取值：不同单位的数值，可以为负数，默认值为normal。（3） word-spacing:单词间 l 作用：用于设置单词之间的间距。 l 属性取值：不同单位的数值，可以为负数，默认值为normal。（4） line-height:行间距 l 作用：用于设置行与行之间的间距。 l 属性值单位：像素（px）、倍率（em）和百分比（%）。（5） text-transform:文本转换 l 作用：用于设置文本大小写的转换。 l 属性取值：none、capitalize、uppercase、lowercase。（6） text-decoration:文本装饰 l 作用：用于设置文本下画线。 l 属性取值：none、underline、overline、line-through。（7） text-align:水平对齐方式 l 作用：用于设置文本水平对齐方式。 l 属性取值：left、right、center。 l 使用text-align属性的注意事项。（8） text-indent:首行缩进 l 作用：用于设置段落文本首行字符缩进 l 属性取值：不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。 l 使用text-indent属性的注意事项。（9） white-space:空白符处理 l 作用：用于设置空格的处理方式。 l 属性取值：normal、pre、nowrap。（10） text-shadow:阴影效果 l 作用：用于设置阴影效果。 l 基本语法格式：选择器{text-shadow:h-shadow v-shadow blur color;} 四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。第四课时（标签指定式选择器、后代选择器、并集选择器、CSS层叠性和继承性、CSS优先级）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。下列选项中，能够设置设置字体的属性是（） A、font-family B、font-weight C、font-style D、font-weight 答案：A 说明：无二、通过直接导入的方式导入新课我们想要使用CSS实现结构与表现的分离，解决工作中出现的CSS调试问题，还需要学习CSS高级特性。CSS高级特性包括CSS复合选择器、CSS层叠性与继承性、CSS优先级，本节将对这些高级特性进行详细讲解。三、新课讲解知识点1- 标签指定式选择器教师展示PPT，讲解指定式选择器。标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。知识点2-后代选择器教师展示PPT，讲解后代选择器。后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的“后代”。知识点3-并集选择器教师展示PPT，讲解并集选择器。并集选择器的各个选择器通过逗号连接而成的，如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。知识点4-CSS层叠性和继承性教师展示PPT，讲解CSS层叠性和继承性。（1）层叠性：是指多种CSS样式的叠加。（2）继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式。知识点5-CSS优先级教师展示PPT，讲解CSS优先级。（1） CSS优先级定义：指的就是CSS样式规则的权重。（2）在考虑权重时，需要注意一些特殊的情况： l 继承样式的权重为0。 l 行内样式优先。 l 权重相同时，CSS的优先级遵循就近原则。 l CSS定义“!important”命令，会被赋予最大的优先级。四、归纳总结 Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。 Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业 Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。 Ø 预习下节课的内容。第五、六课时（【阶段案例】—制作新闻页面）一、复习巩固在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。请简述什么是CSS的继承性，并举例说明。答案：继承性是指书写CSS样式表时，子标签会继承父标签的某些样式。例如，定义主体标签<body>的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为页面其他的标签都嵌套在<body>标签中，是<body>标签的子标签。这些子标签继承了父标签<

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档保存到电脑，查找使用更方便

15 金币

申诉本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请申请举报、认领或删除 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 网页设计与制作HTML+CSS第2版网页设计制作 HTML CSS 教案教学

咨信网温馨提示：
1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【胜****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【胜****】，需本站解决可联系【微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。

关于本文

本文标题：《网页设计与制作(HTML+CSS)(第2版)》全册教案教学设计.doc
链接地址：https://www.zixin.com.cn/doc/82294.html

胜****

内容提供者

实名认证

查看上传人更多文档

部分上传会员的收益排行 01、路***（￥15400+），
02、曲****（￥15300+），
03、wei****016（￥13200+）,
04、大***流（￥12600+），
05、Fis****915（￥4200+），
06、h****i（￥4100+），
07、Q**（￥3400+），
08、自******点（￥2400+），
09、h*****x（￥1400+），
10、c****e（￥1100+）,
11、be*****ha（￥800+），
12、13********8（￥800+）。

相似文档

自信AI助手