《网站开发与管理》课程教学大纲 一、课程基本信息 课程代码：16218002 课程名称：网站开发与管理 英文名称：Website Development and Management 课程类别：通识课 学时：32（其中实验学时12学时、其他教学环节8学时） 学分：2 适用对象：各专业本科生 考核方式：考查 先修课程：无 二、课程简介 中文简介 本课程是适合各专业本科学生选修的一门通识课。该课程以Dreamweaver网页设 计软件作为技术支持，由浅入深系统地介绍了网页的构思、规划、制作和网站建设的 全过程，旨在让学生了解网站规划、设计的思想和全部流程、掌握HTL语言及常用 网页设计工具的使用，并能亲手设计出自己喜爱的网页。本课程内容主要包括：网页 设计基础、HTML基础、Dreamweaver基本操作、CSS选择器以及DIV+CSS网页布局设 计等。 英文简介 This course is an elective course for all majors.It is a part specialized undergraduate's compulsory special course.This course by the homepage design software took the technical support,systematically introduced from the shallow to the deep the homepage idea,the plan,the manufacture and the website construction entire process.The aim is to let students understand the website planning,design ideas and all the process,master the HTMl language and the use of commonly used web page design tools,and can design their own favorite pages.The content of this course mainly includes:web design basis.HTML foundation,Dreamweaver basic operation and Dreamweaver web page layout design etc 三、课程性质与教学目的 本课程属于通识选修课，其实用性极强，是一门面向网站开发与管理、网页设计 与制作的课程，主要使学生了解网站的建设流程，要求学生掌握网页设计与制作的基 本知识，熟悉常用的HTL标记，并能结合CSS知识设计与制作网页，使之能够理论 和实践相结合，并为学生今后进一步学习动态网站设计课程打下坚实的基础。此外， 1
1 《网站开发与管理》课程教学大纲 一、课程基本信息 课程代码：16218002 课程名称：网站开发与管理 英文名称：Website Development and Management 课程类别：通识课 学时：32(其中实验学时 12 学时、其他教学环节 8 学时) 学分：2 适用对象：各专业本科生 考核方式：考查 先修课程：无 二、课程简介 中文简介 本课程是适合各专业本科学生选修的一门通识课。该课程以 Dreamweaver 网页设 计软件作为技术支持，由浅入深系统地介绍了网页的构思、规划、制作和网站建设的 全过程，旨在让学生了解网站规划、设计的思想和全部流程、掌握 HTML 语言及常用 网页设计工具的使用，并能亲手设计出自己喜爱的网页。本课程内容主要包括：网页 设计基础、HTML 基础、Dreamweaver 基本操作、CSS 选择器以及 DIV+CSS 网页布局设 计等。 英文简介 This course is an elective course for all majors.It is a part specialized undergraduate's compulsory special course .This course by the homepage design software took the technical support, systematically introduced from the shallow to the deep the homepage idea, the plan, the manufacture and the website construction entire process. The aim is to let students understand the website planning, design ideas and all the process, master the HTML language and the use of commonly used web page design tools, and can design their own favorite pages. The content of this course mainly includes:web design basis, HTML foundation, Dreamweaver basic operation and Dreamweaver web page layout design etc. 三、课程性质与教学目的 本课程属于通识选修课，其实用性极强，是一门面向网站开发与管理、网页设计 与制作的课程，主要使学生了解网站的建设流程，要求学生掌握网页设计与制作的基 本知识，熟悉常用的 HTML 标记，并能结合 CSS 知识设计与制作网页，使之能够理论 和实践相结合，并为学生今后进一步学习动态网站设计课程打下坚实的基础。此外
本课程在设计和组织教学内容和准备教学素材中充分结合了思政元素，在网站主题的 选择和网页的素材准备方面有机引入中国传统文化、中华传统元素、社会主义核心价 值观等具有中因元素、中国文化、中因形象等文化元素：在案例描述和案例分析环节， 融入增强民族自豪感和文化自信的思政素材元素。总之通过以课程学习为契机，加深 了学生对传统艺术的了解，深化了学生对中国传统文化的认知，内化学生对社会主义 核心价值观的理解，进一步强化了大学生对主流价值的感性认识，从而增强了大学生 的文化自信，让本课程也能成为铸魂育人的生动课堂。 四、教学内容及要求 第一章网页设计基础 (一)目的与要求 1. 了解网站与网页的基本概念、网站建立方式与网站设计的一般原则与方法。 2. 了解网页设计常用工具的功能与用途。 掌握TML文档的基本语法及其基本结构。 4.熟练掌握HTML文档的编辑。 5.熟练掌握各种网页基本元素的HTML标记。 （二)教学内容 第一节基本概念 1.主要内容 ()WWW基础 (2)网页 (3)网站 (4)Weh标准 2.基本概念和知识点 WWW及其特点、网页、网站以及Web标准。 3.问题与应用（能力要求） 问题：网页设计常用工具有哪些？其主要的功能分别是什么？ 要求学生完成本节学习后，对网站设计与网页制作有个初步的了解。 第二节网页发布流程 1.主要内容 (①)站点规划与设计 (②)素材准备 (3)建立网站与网页制作 (4)网站测试 (5)网站发布 (6)维护更新
2 本课程在设计和组织教学内容和准备教学素材中充分结合了思政元素，在网站主题的 选择和网页的素材准备方面有机引入中国传统文化、中华传统元素、社会主义核心价 值观等具有中国元素、中国文化、中国形象等文化元素；在案例描述和案例分析环节， 融入增强民族自豪感和文化自信的思政素材元素。总之通过以课程学习为契机，加深 了学生对传统艺术的了解，深化了学生对中国传统文化的认知，内化学生对社会主义 核心价值观的理解，进一步强化了大学生对主流价值的感性认识，从而增强了大学生 的文化自信，让本课程也能成为铸魂育人的生动课堂。 四、 教学内容及要求 第一章 网页设计基础 (一) 目的与要求 1. 了解网站与网页的基本概念、网站建立方式与网站设计的一般原则与方法。 2. 了解网页设计常用工具的功能与用途。 3. 掌握 HTML 文档的基本语法及其基本结构。 4. 熟练掌握 HTML 文档的编辑。 5. 熟练掌握各种网页基本元素的 HTML 标记。 (二) 教学内容 第一节 基本概念 1. 主要内容 (1) WWW 基础 (2) 网页 (3) 网站 (4) Web 标准 2. 基本概念和知识点 WWW 及其特点、网页、网站以及 Web 标准。 3. 问题与应用（能力要求） 问题：网页设计常用工具有哪些？其主要的功能分别是什么？ 要求学生完成本节学习后，对网站设计与网页制作有个初步的了解。 第二节 网页发布流程 1. 主要内容 (1) 站点规划与设计 (2) 素材准备 (3) 建立网站与网页制作 (4) 网站测试 (5) 网站发布 (6) 维护更新
2.基本概念和知识点 网页中常用的图片格式有哪些？它们有什么优弊？ 3.问题与应用（能力要求） 问题：怎样选取网站的主题？ 要求学生完成本节学习后，对网页的发布流程有个大致的了解。特别是在网站主 题选择方面要求学生尽量从以下几方面进行考虑：从当今社会热点、难点出发；从专 业角度出发，将学生德育教育及专业知识有机地融合到教学任务中，贯彻思政导向。 第三节 TML文档的基本结构、常用标记及相关属性 1.主要内容 (I)HTML的基本语法 (2)HTL文档的基本结构 (3)HTML文档的编辑 (4)HWL文档的常用标记及相关属性， 2.基本概念和知识点 文本段落标记、图片标记、超链接标记、表格标记以及列表标记。 3.问题与应用（能力要求） 问题：标记属性有哪些语法规则？ 要求学生完成本节学习后，熟练掌握HTML的基本语法、HTL文档的基本结构、用 文本编辑软件实现TL文档的编辑、TML常用标记及相关属性。 (三)思考与实践 思考题：文本编辑软件能创建网站站点吗？ 让学生熟悉TML文档的基本结构：能利用记事本来编辑TML文档并浏览：并熟 练使用L常用标记及相关属性进行网页基本元素的添加和设置。 完成实验项目一(HTML标记)。 (四)教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第二章 Dreamweaver (一)目的与要求 1. 了解Dreamweaver软件。 2.熟悉Dreamweaver环境下文档的基本操作。 3. 热练掌握利用Dreamweaver软件实现基本网页基本元素的插入和设置。 (二)教学内容 第一节Dreamweaver介绍 1.主要内容 (1)关于Dreamweaver
3 2. 基本概念和知识点 网页中常用的图片格式有哪些？它们有什么优弊？ 3. 问题与应用（能力要求） 问题： 怎样选取网站的主题？ 要求学生完成本节学习后，对网页的发布流程有个大致的了解。特别是在网站主 题选择方面要求学生尽量从以下几方面进行考虑：从当今社会热点、难点出发；从专 业角度出发，将学生德育教育及专业知识有机地融合到教学任务中，贯彻思政导向。 第三节 HTML 文档的基本结构、常用标记及相关属性 1. 主要内容 (1) HTML 的基本语法 (2) HTML 文档的基本结构 (3) HTML 文档的编辑 (4) HTML 文档的常用标记及相关属性。 2. 基本概念和知识点 文本段落标记、图片标记、超链接标记、表格标记以及列表标记。 3. 问题与应用（能力要求） 问题：标记属性有哪些语法规则？ 要求学生完成本节学习后，熟练掌握 HTML 的基本语法、HTML 文档的基本结构、用 文本编辑软件实现 HTML 文档的编辑、HTML 常用标记及相关属性。 (三) 思考与实践 思考题：文本编辑软件能创建网站站点吗？ 让学生熟悉 HTML 文档的基本结构；能利用记事本来编辑 HTML 文档并浏览；并熟 练使用 HTML 常用标记及相关属性进行网页基本元素的添加和设置。 完成实验项目一（HTML 标记）。 (四) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第二章 Dreamweaver (一) 目的与要求 1. 了解 Dreamweaver 软件。 2. 熟悉 Dreamweaver 环境下文档的基本操作。 3. 熟练掌握利用 Dreamweaver 软件实现基本网页基本元素的插入和设置。 (二) 教学内容 第一节 Dreamweaver 介绍 1. 主要内容 (1) 关于 Dreamweaver
(2)Dreamweaver的优缺点 (3)Dreamweaver的版本 (4)Dreamweaver的启动和工作环境 2.基本概念和知识点 了解Dreamweaver的历史以及功能：熟悉Dreamweaver的界面。 3.问题与应用（能力要求） 问题：用记事本和软件Dreamweaver在创建网站和制作网页方面有何区别？ 要求学生完成本节学习后，对Dreamweaver软件有个基本的了解。 第二节Dreamweaver基本操作 1.主要内容 (1)站点操作 (2)文档操作 2.基本概念和知识点 创建本地站点、网页文件的新建、保存、关闭、打开和预览以及设置页面属性等 3.问题与应用（能力要求） 问题：创律本地站点的流程是怎么样的？ 要求学生完成本节学习后，熟练地掌握在工具软件Dreamweaver平台上创建站点 和建立网页。 第三节在Dreamweaver环境下添加基本网页元素 1.主要内容 ()文字 (2)图像 (3)超链接 (4)多煤体对象 (5)表格 (6)列表 2.基本概念和知识点 文本的输入及设留 图像的基本格式、图像的插入及设置： 相对路径及绝对路径的使用方法，超链接的创建： 在网页中插入和播放各种多媒体对象： 表格的创建及设置： 列表的创建及设置。 3.问题与应用（能力要求） 问题：如何用不同的浏览器浏览网页？ 4
4 (2) Dreamweaver 的优缺点 (3) Dreamweaver 的版本 (4) Dreamweaver 的启动和工作环境 2. 基本概念和知识点 了解 Dreamweaver 的历史以及功能；熟悉 Dreamweaver 的界面。 3. 问题与应用（能力要求） 问题：用记事本和软件 Dreamweaver 在创建网站和制作网页方面有何区别？ 要求学生完成本节学习后，对 Dreamweaver 软件有个基本的了解。 第二节 Dreamweaver 基本操作 1. 主要内容 (1) 站点操作 (2) 文档操作 2. 基本概念和知识点 创建本地站点、网页文件的新建、保存、关闭、打开和预览以及设置页面属性等。 3. 问题与应用（能力要求） 问题：创建本地站点的流程是怎么样的？ 要求学生完成本节学习后，熟练地掌握在工具软件 Dreamweaver 平台上创建站点 和建立网页。 第三节 在 Dreamweaver 环境下添加基本网页元素 1. 主要内容 (1) 文字 (2) 图像 (3) 超链接 (4) 多媒体对象 (5) 表格 (6) 列表 2. 基本概念和知识点 文本的输入及设置； 图像的基本格式、图像的插入及设置； 相对路径及绝对路径的使用方法，超链接的创建； 在网页中插入和播放各种多媒体对象； 表格的创建及设置； 列表的创建及设置。 3. 问题与应用（能力要求） 问题：如何用不同的浏览器浏览网页？
要求学生完成本节学习后，熟悉Dreamweaver环境下网站的创建和网页文件的基 本操作。 (三)思考与实践 思考题：理解各种链接路径的含义。 让学生通过实践掌握使用Dreamweaver软件来规划和创建本地站点的方法：熟悉 Dreamweaver的基本文档操作，熟练掌握各种网页基本元素的插入和设置。 完成实验项目二(Dreamweaver基本操作)。在该实验项目中以中国古诗词为网站 主题，通过任务驱动的方式，让学生在完成任务的过程中去领略古诗词中蕴含的人生 哲理、审美价值以及艺术感染力。 (四)教学方法与手段 本章教学主要借助多媒体课件采用课微讲授的方式讲行 第三章 CSS选择器 (一)目的与要求 1. 了解CSS样式表的基本知识。 熟悉各种基本选择器及常用的复合选择器： 3.熟悉CSS样式表的创建及应用。 4.掌握用CSS美化网页元素的方法 (二)教学内容 第一节CSS基本知识及CSS选择器 1.主要内容 ()引入CSs的核心目的 (2)CSS组成 (3)CSS选择器语法结构 (4)选择器的分类 (⑤)CSS选择器优先级 (6)在HTM中使用CSS的方法 2.基本概念和知识点 CSS样式表的概念，优点，分类，样式优先级顺序，语法。 3.问题与应用（能力要求） 问题：HTML及CSS是如何分工合作的？ 要求学生完成本节学习后，熟练地掌握CS$样式表的相关知识并能准确地选择合 适的选择器。 第二节使用DW进行CSS设置 1.主要内容 (1)CSS样式的创建与编辑修改
5 要求学生完成本节学习后，熟悉 Dreamweaver 环境下网站的创建和网页文件的基 本操作。 (三) 思考与实践 思考题：理解各种链接路径的含义。 让学生通过实践掌握使用 Dreamweaver 软件来规划和创建本地站点的方法；熟悉 Dreamweaver 的基本文档操作，熟练掌握各种网页基本元素的插入和设置。 完成实验项目二（Dreamweaver 基本操作）。在该实验项目中以中国古诗词为网站 主题，通过任务驱动的方式，让学生在完成任务的过程中去领略古诗词中蕴含的人生 哲理、审美价值以及艺术感染力。 (四) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第三章 CSS 选择器 (一) 目的与要求 1. 了解 CSS 样式表的基本知识。 2. 熟悉各种基本选择器及常用的复合选择器。 3. 熟悉 CSS 样式表的创建及应用。 4. 掌握用 CSS 美化网页元素的方法。 (二) 教学内容 第一节 CSS 基本知识及 CSS 选择器 1. 主要内容 (1) 引入 CSS 的核心目的 (2) CSS 组成 (3) CSS 选择器语法结构 (4) 选择器的分类 (5) CSS 选择器优先级 (6) 在 HTML 中使用 CSS 的方法 2. 基本概念和知识点 CSS 样式表的概念，优点，分类，样式优先级顺序，语法。 3. 问题与应用（能力要求） 问题： HTML 及 CSS 是如何分工合作的? 要求学生完成本节学习后，熟练地掌握 CSS 样式表的相关知识并能准确地选择合 适的选择器。 第二节 使用 DW 进行 CSS 设置 1. 主要内容 (1) CSS 样式的创建与编辑修改
(2)CSS样式的应用 2.基本概念和知识点 “CSS样式”面板 “新建CSS规则”对话框中其他各选项的含义。 CSS属性设置。 应用CSS样式。 3.问题与应用（能力要求） 问题：外部样式有什么优点？ 要求学生完成本节学习后，能熟练掌握在DW中建立、编辑样式表。 第三节 用CSS美化网页元索 1,主要内容 (1)利用CSS设置网页格式 (②)使用CSS滤镜产生多媒体效果 2.基本概念和知识点 CSS滤镜。 多彩超链接。 3.问题与应用（能力要求） 问题：什么是CSS的滤镜功能？ 要求学生完成本节学习后，熟练掌握CSS样式表的相关知识并能运用其来设置网 页格式。 (三)思考与实践 思考题：理解各种选择器的含义。 让学生理解CSS的含义，熟练掌握CSS样式表的创建和应用。在讲授“CSS选择 器如何美化网页元素”的案例教学中引入一些能体现人文精神、仁爱之心的网页例文 素材，把价值观培育有机地融入课程，润物无声，立德树人。 完成实验项目三（利用CSS美化网页）。 (四)教学方法与手段 本章教学主要借助多煤体课件采用课堂进授的方式讲行。 第四章 CSS盒模型 (一)目的与要求 1.掌握CSS盒子内部结构。 2.熟悉单个及各种关系CSS盒子的添加。 3.了解CSS盒子相关属性。 (二)教学内容 第节CSS盒子
6 (2) CSS 样式的应用 2. 基本概念和知识点 “CSS 样式”面板。 “新建 CSS 规则”对话框中其他各选项的含义。 CSS 属性设置。 应用 CSS 样式。 3. 问题与应用（能力要求） 问题：外部样式有什么优点? 要求学生完成本节学习后，能熟练掌握在 DW 中建立、编辑样式表。 第三节 用 CSS 美化网页元素 1. 主要内容 (1) 利用 CSS 设置网页格式 (2) 使用 CSS 滤镜产生多媒体效果 2. 基本概念和知识点 CSS 滤镜。 多彩超链接。 3. 问题与应用（能力要求） 问题：什么是 CSS 的滤镜功能? 要求学生完成本节学习后，熟练掌握 CSS 样式表的相关知识并能运用其来设置网 页格式。 (三) 思考与实践 思考题：理解各种选择器的含义。 让学生理解 CSS 的含义，熟练掌握 CSS 样式表的创建和应用。在讲授“CSS 选择 器如何美化网页元素”的案例教学中引入一些能体现人文精神、仁爱之心的网页例文 素材，把价值观培育有机地融入课程，润物无声，立德树人。 完成实验项目三（利用 CSS 美化网页）。 (四) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第四章 CSS 盒模型 (一) 目的与要求 1. 掌握 CSS 盒子内部结构。 2. 熟悉单个及各种关系 CSS 盒子的添加。 3. 了解 CSS 盒子相关属性。 (二) 教学内容 第一节 CSS 盒子
1.主要内容 ()盒模型 (②)盒子的组成部分 (3)盒子的相关属性 2.基本概念和知识点 盒模型结构图。 盒子的相关属性。 3.问题与应用（能力要求） 问题：盒子的margin属性有哪些与习惯性思维不太一致的地方？ 要求学生完成本节学习后，对盒子有个较为深入的了解。 第二节 CSS盒子分类及display属性 1.主要内容 (1)CSS盒子的分类 (2)CSS盒子的display属性 2.基本概念和知识点 块级元素。 行内元素。 inline-block 3.问题与应用（能力要求） 问题：块级元素与行内元素的区别在哪里？ 要求学生完成本节学习后，了解不同种类的盒子及其特点 第三节通用块级元素及行内元素 主要内容 (1)通用块级元素 (②)通用行内元素 2. 基本概念和知识点 通用的含义。 通用块级元素div。 通用行内元素span。 3. 问题与应用（能力要求） 问题：通用块级元素div与通用行内元素span的区别在哪里？ 要求学生完成本节学习后，理解通用块级元素与通用行内元素的特点并能根据实 际需要选用合适的元素。 第四节 单个CSS盒子及各种关系的CSS盒子的添加 1.主要内容
7 1. 主要内容 (1) 盒模型 (2) 盒子的组成部分 (3) 盒子的相关属性 2. 基本概念和知识点 盒模型结构图。 盒子的相关属性。 3. 问题与应用（能力要求） 问题：盒子的 margin 属性有哪些与习惯性思维不太一致的地方？ 要求学生完成本节学习后，对盒子有个较为深入的了解。 第二节 CSS 盒子分类及 display 属性 1. 主要内容 (1) CSS 盒子的分类 (2) CSS 盒子的 display 属性 2. 基本概念和知识点 块级元素。 行内元素。 inline-block 3. 问题与应用（能力要求） 问题：块级元素与行内元素的区别在哪里？ 要求学生完成本节学习后，了解不同种类的盒子及其特点。 第三节 通用块级元素及行内元素 1. 主要内容 (1) 通用块级元素 (2) 通用行内元素 2. 基本概念和知识点 通用的含义。 通用块级元素 div。 通用行内元素 span。 3. 问题与应用（能力要求） 问题：通用块级元素 div 与通用行内元素 span 的区别在哪里？ 要求学生完成本节学习后，理解通用块级元素与通用行内元素的特点并能根据实 际需要选用合适的元素。 第四节 单个 CSS 盒子及各种关系的 CSS 盒子的添加 1. 主要内容
(1)单个盒子的添加 (②)兄弟盒子的添加 (3)父盒子的添加 (4)子盒子的添加 2.基本概念和知识点 盒子与DIV标记对的关系。 盒子之间的关系 3.问题与应用（能力要求） 问题：盆子之间的关系有哪些？ 求学生完成本节学习后，理解盒子盒子之间的关系并能熟练地插入不同关系的 盒子 (三)思考与实践 思考题：盒子的margin属性有哪些与习惯性思维不太一致的地方？ 让学生熟悉盒模型，并能熟练添加不同关系的盒子。 完成实验项目四(CSS盒子) (四)教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行 第五章盒子的浮动 (一)目的与要求 1.掌握盒子的浮动内涵。 2.熟悉利用盒子的浮动实现网页页面的布局的方法。 3.了解清浮动的各种方法及其利弊。 (仁)教学内容 第一节 盒子浮动原理 1.主要内容 (1)CSS盒子在标准流中的定位原则 (2)浮动的含义 (3)浮动的实现方式 (4)盒子浮动实例 2.基本概念和知识点 标准流。 浮动的含义 浮动的实现方式。 3.问题与应用（能力要求） 问题：盒子设置了浮动属性后一般浮动到哪里？
8 (1) 单个盒子的添加 (2) 兄弟盒子的添加 (3) 父盒子的添加 (4) 子盒子的添加 2. 基本概念和知识点 盒子与 DIV 标记对的关系。 盒子之间的关系。 3. 问题与应用（能力要求） 问题：盒子之间的关系有哪些？ 要求学生完成本节学习后，理解盒子盒子之间的关系并能熟练地插入不同关系的 盒子。 (三) 思考与实践 思考题：盒子的 margin 属性有哪些与习惯性思维不太一致的地方？ 让学生熟悉盒模型，并能熟练添加不同关系的盒子。 完成实验项目四（CSS 盒子）。 (四) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第五章 盒子的浮动 (一) 目的与要求 1. 掌握盒子的浮动内涵。 2. 熟悉利用盒子的浮动实现网页页面的布局的方法。 3. 了解清浮动的各种方法及其利弊。。 (二) 教学内容 第一节 盒子浮动原理 1. 主要内容 (1) CSS 盒子在标准流中的定位原则 (2) 浮动的含义 (3) 浮动的实现方式 (4) 盒子浮动实例 2. 基本概念和知识点 标准流。 浮动的含义。 浮动的实现方式。 3. 问题与应用（能力要求） 问题：盒子设置了浮动属性后一般浮动到哪里？
要求学生完成本节学习后，对盒子的浮动有个较为深入的了解并能利用盒子的浮 动实现页面的布局 第二节盒子浮动后带来的影响 1. 主要内容 (1)盒子浮动后对兄弟盒子带来的影响 (2)盒子浮动后对父盒子带来的影响 2. 基本概念和知识点 盒子浮动后对兄弟盒子带来的影响。 盒子浮动后对父盒子带来的影响。 3. 问题与应用（能力要求） 问题：盒子浮动后对其父盒子和兄弟盒子会带来什么样的影响？ 要求学生完成本节学习后，了解盒子浮动后带来的影响。 第三节清浮动 1.主要内容 (1)清浮动的含义 (②)兄弟关系盒子的清浮动 (3)父子关系盒子的清浮动 2.基本概念和知识点 清除盒子浮动后对兄弟盒子带来的影响 清除盒子浮动后对父盒子带来的影向。 3.问题与应用（能力要求） 问题：清除盒子浮动后对父盒子带来的影响有哪些方法？ 要求学生完成本节学习后，能掌握不同关系盒子的清浮动并了解各种方法的利弊 (三)思考与实践 思考题：我们学校网站的主页的网页架构用盒子的浮动技术怎么实现？ 让学生熟悉盒子的浮动及清浮动技术，并能运用这些技术布局页面。在讲授“盒 子的浮动”时以中国古建筑文化为主题，让学生在掌握网页布局知识的同时，也对中 国古代建筑史有了初步的了解，从中国古代建筑重内涵的布局方式中领悟中国人的 “中庸”精神，进而对中国传统文化、艺术有了更深层次的感悟。 完成实验项目五（盒子的浮动）。 (四)教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第六章 盒子的定位 (一)目的与要求 1.掌握利用各种定位技术相互配合实现网页布局。 9
9 要求学生完成本节学习后，对盒子的浮动有个较为深入的了解并能利用盒子的浮 动实现页面的布局。 第二节 盒子浮动后带来的影响 1. 主要内容 (1) 盒子浮动后对兄弟盒子带来的影响 (2) 盒子浮动后对父盒子带来的影响 2. 基本概念和知识点 盒子浮动后对兄弟盒子带来的影响。 盒子浮动后对父盒子带来的影响。 3. 问题与应用（能力要求） 问题：盒子浮动后对其父盒子和兄弟盒子会带来什么样的影响？ 要求学生完成本节学习后，了解盒子浮动后带来的影响。 第三节 清浮动 1. 主要内容 (1) 清浮动的含义 (2) 兄弟关系盒子的清浮动 (3) 父子关系盒子的清浮动 2. 基本概念和知识点 清除盒子浮动后对兄弟盒子带来的影响。 清除盒子浮动后对父盒子带来的影响。 3. 问题与应用（能力要求） 问题：清除盒子浮动后对父盒子带来的影响有哪些方法？ 要求学生完成本节学习后，能掌握不同关系盒子的清浮动并了解各种方法的利弊。 (三) 思考与实践 思考题：我们学校网站的主页的网页架构用盒子的浮动技术怎么实现？ 让学生熟悉盒子的浮动及清浮动技术，并能运用这些技术布局页面。在讲授“盒 子的浮动”时以中国古建筑文化为主题，让学生在掌握网页布局知识的同时，也对中 国古代建筑史有了初步的了解，从中国古代建筑重内涵的布局方式中领悟中国人的 “中庸”精神，进而对中国传统文化、艺术有了更深层次的感悟。 完成实验项目五（盒子的浮动）。 (四) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第六章 盒子的定位 (一) 目的与要求 1. 掌握利用各种定位技术相互配合实现网页布局
2.熟悉盒子的各种定位技术。 3.了解相对定位和绝对定位的异同。 (二)教学内容 第一节 相对定位 1.主要内容 ()相对定位格式 (2)相对定位特点 (3)相对定位示例 2.基本概念和知识点 相对定位的特点。 相对定位的实现。 3.问题与应用（能力要求） 问题：设置了相对定位的盒子有无脱离标准流？ 要求学生完成本节学习后，对盒子的相对定位有个较为深入的了解。 第二节 绝对定位 1.主要内容 (①)绝对对定位格式 (2)绝对定位特点 (3)绝对定位示例 (4)定位层级 2.基本概念和知识点 绝对对定位的特点。 绝对定位的实现 定位层级。 3.问题与应用（能力要求） 问题：相对定位和绝对定位如何配搭来布局页面？ 要求学生完成本节学习后，理解盒子的绝对定位。 第三节固定定位 1.主要内容 (1)固定定位格式 (2)固定定位特点 (3)固定定位示例 2.基本概念和知识点 固定对定位的特点 固定定位的实现。 0
10 2. 熟悉盒子的各种定位技术。 3. 了解相对定位和绝对定位的异同。 (二) 教学内容 第一节 相对定位 1. 主要内容 (1) 相对定位格式 (2) 相对定位特点 (3) 相对定位示例 2. 基本概念和知识点 相对定位的特点。 相对定位的实现。 3. 问题与应用（能力要求） 问题：设置了相对定位的盒子有无脱离标准流？ 要求学生完成本节学习后，对盒子的相对定位有个较为深入的了解。 第二节 绝对定位 1. 主要内容 (1) 绝对对定位格式 (2) 绝对定位特点 (3) 绝对定位示例 (4) 定位层级 2. 基本概念和知识点 绝对对定位的特点。 绝对定位的实现。 定位层级。 3. 问题与应用（能力要求） 问题：相对定位和绝对定位如何配搭来布局页面？ 要求学生完成本节学习后，理解盒子的绝对定位。 第三节 固定定位 1. 主要内容 (1) 固定定位格式 (2) 固定定位特点 (3) 固定定位示例 2. 基本概念和知识点 固定对定位的特点。 固定定位的实现