《网页设计与制作基础》课程教学大纲 一、课程基本信息 课程代码：16021102 课程名称：网页设计与制作基础 英文名称：Fundamentals of Web Design and Production 课程类别：通识课 学时：32（其中实验学时16学时） 学分：2 适用对象：部分专业本科学生 考核方式：考查 先修课程：计算机应用基础 二、课程简介 本课程是部分专业本科学生必修的一门通识课程，属于高等学校计算机基础教育 第二层次课程。本课程以网页设计软件作为技术支持，由浅入深系统地介绍了网页的 构思、规划、制作和网站律设的全时程，旨在让学生堂据TL语言及常用网页设计 工具的使用，并能亲手设计出自己喜爱的网页。本课程内容主要包括：网页设计基础 HTML基础、Dreamweaver基本操作、Dreamweaver网页布局设计以及Dreamweaver高 级应用等。 This course is a compulsory general course for some undergraduate students. It belongs to the second level curriculum of computer basic education in Universities.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, is for the purpose of enabling the student to grasp the HTML language and the commonly used homepage designs the tool the use,and can personally design the homepage which own like.The content of this course mainly includes:web design basis,HTML foundation,Dreamweaver basic operation,Dreamweaver web page layout design and Dreamweaver advanced application etc. 三、课程性质与教学目的 本课程是一门实用性极强，面向网页设计以及制作的通识必修课，主要使学生了 解网站的建设流程，要求学生掌握网页设计与制作的基本知识，熟悉常用的网页制作 软件，并且具备利用这些软件设计与制作网页的能力，使之能够理论和实践相结合， 并为学生今后进一步学习动态网站设计课程打下坚实的基础。此外，以课程学习为契 机，增强学生对传统艺术的了解，深化学生对中国传统文化的认知，内化学生对社会
1 《网页设计与制作基础》课程教学大纲 一、课程基本信息 课程代码：16021102 课程名称：网页设计与制作基础 英文名称：Fundamentals of Web Design and Production 课程类别：通识课 学时：32(其中实验学时 16 学时) 学分：2 适用对象:部分专业本科学生 考核方式：考查 先修课程：计算机应用基础 二、课程简介 本课程是部分专业本科学生必修的一门通识课程，属于高等学校计算机基础教育 第二层次课程。本课程以网页设计软件作为技术支持，由浅入深系统地介绍了网页的 构思、规划、制作和网站建设的全过程，旨在让学生掌握 HTML 语言及常用网页设计 工具的使用，并能亲手设计出自己喜爱的网页。本课程内容主要包括：网页设计基础、 HTML 基础、Dreamweaver 基本操作、Dreamweaver 网页布局设计以及 Dreamweaver 高 级应用等。 This course is a compulsory general course for some undergraduate students. It belongs to the second level curriculum of computer basic education in Universities. 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, is for the purpose of enabling the student to grasp the HTML language and the commonly used homepage designs the tool the use, and can personally design the homepage which own like. The content of this course mainly includes: web design basis, HTML foundation, Dreamweaver basic operation, Dreamweaver web page layout design and Dreamweaver advanced application etc. 三、课程性质与教学目的 本课程是一门实用性极强，面向网页设计以及制作的通识必修课，主要使学生了 解网站的建设流程，要求学生掌握网页设计与制作的基本知识，熟悉常用的网页制作 软件，并且具备利用这些软件设计与制作网页的能力，使之能够理论和实践相结合， 并为学生今后进一步学习动态网站设计课程打下坚实的基础。此外，以课程学习为契 机，增强学生对传统艺术的了解，深化学生对中国传统文化的认知，内化学生对社会
主义核心价值观的理解，进一步强化了大学生对主流价值的感性认识，从而增强了大 学生的文化自信。 四、教学内容及要求 第一章 网页设计基础 (一)目的与要求 1. 了解网站与网页的基本概念、网站创建流程。 2.熟表搜集网页素材的方法。 3. 掌握网页文档结构。 (二)教学内容 第一节基本概念 1.主要内容 (1)WWW基础 (2)网页 (3)网站 (④)Internet服务器 (⑤)本地计算机 (⑥)本地站点与远端站点 (7)Internet服务程序 (⑧)HTML语言 (9)脚本语言 2.基本概念和知识点 W及其特点、网页、网站以及HTML语言。 3.问题与应用（能力要求） 问题：什么是网页文档规范？ 要求学生完成本节学习后，对网页和网站设计与制作的基础知识有个初步的了解 第二节网站创建流程 1.主要内容 (1)站点规划与设计 (②)素材准备 (3)建立网站与网页制作 (4)网站测试 (5)网站发布 (6)维护更新 2.基本概念和知识点 了解各流程的具体工作部署。 2
2 主义核心价值观的理解，进一步强化了大学生对主流价值的感性认识，从而增强了大 学生的文化自信。 四、教学内容及要求 第一章 网页设计基础 (一) 目的与要求 1. 了解网站与网页的基本概念、网站创建流程。 2. 熟悉搜集网页素材的方法。 3. 掌握网页文档结构。 (二) 教学内容 第一节 基本概念 1. 主要内容 (1) WWW 基础 (2) 网页 (3) 网站 (4) Internet 服务器 (5) 本地计算机 (6) 本地站点与远端站点 (7) Internet 服务程序 (8) HTML 语言 (9) 脚本语言 2. 基本概念和知识点 WWW 及其特点、网页、网站以及 HTML 语言。 3. 问题与应用（能力要求） 问题：什么是网页文档规范？ 要求学生完成本节学习后，对网页和网站设计与制作的基础知识有个初步的了解。 第二节 网站创建流程 1. 主要内容 (1) 站点规划与设计 (2) 素材准备 (3) 建立网站与网页制作 (4) 网站测试 (5) 网站发布 (6) 维护更新 2. 基本概念和知识点 了解各流程的具体工作部署
3.问题与应用（能力要求） 问题：网页设计常用工具有哪些？其主要的功能分别是什么？ 要求学生完成本节学习后，对网页的发布流程有个粗略的了解。特别是在网站主 题选择方面要求学生尽量从以下几方面进行考虑：从当今社会热点、难点出发；从专 业角度出发，将学生德育教育及专业知识有机地融合到教学任务中，贯彻思政导向。 第三节TL文档的基本结构 1.主要内容 (I)HTML的基本语法 (2)HTML文档的基本结构 (3)HTML文档的编辑 2.基本概念和知识点 标记、标记属性。 文档标记、文档头标记、文档标题标记、文档主体标记。 利用记事本编辑HTML文档。 3.问题与应用（能力要求） 问题：标记属性有哪些语法规则？ 要求学生完成本节学习后，熟练掌握TML的基本语法、TL文档的基本结构和 HTML文档的编辑。 (三)思考与实践 让学生课后通过浏览一些网页来了解网页和网站设计与制作的基础知识：并掌握 网页文档结构，以及能用文本编辑软件制作简单的网页文档。 完成实验项目一（网页的认识）。 (四)教学方法与手段 本章教学主要借助多煤体课件采用课堂讲授的方式进行。 第二章 HTL基础 (一)目的与要求 L.熟练掌握常用网页基本元素的HTML标记。 2.善于利用这些标记制作网页文档。 (二)教学内容 第一节文本格式应用 1.主要内容 (1)文本段落格式 (②)文字的显示效果 (3)列表格式 2.基本概念和知识点 3
3 3. 问题与应用（能力要求） 问题：网页设计常用工具有哪些？其主要的功能分别是什么？ 要求学生完成本节学习后，对网页的发布流程有个粗略的了解。特别是在网站主 题选择方面要求学生尽量从以下几方面进行考虑：从当今社会热点、难点出发；从专 业角度出发，将学生德育教育及专业知识有机地融合到教学任务中，贯彻思政导向。 第三节 HTML 文档的基本结构 1. 主要内容 (1) HTML 的基本语法 (2) HTML 文档的基本结构 (3) HTML 文档的编辑 2. 基本概念和知识点 标记、标记属性。 文档标记、文档头标记、文档标题标记、文档主体标记。 利用记事本编辑 HTML 文档。 3. 问题与应用（能力要求） 问题：标记属性有哪些语法规则？ 要求学生完成本节学习后，熟练掌握 HTML 的基本语法、HTML 文档的基本结构和 HTML 文档的编辑。 (三) 思考与实践 让学生课后通过浏览一些网页来了解网页和网站设计与制作的基础知识；并掌握 网页文档结构，以及能用文本编辑软件制作简单的网页文档。 完成实验项目一（网页的认识）。 (四) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第二章 HTML 基础 (一) 目的与要求 1. 熟练掌握常用网页基本元素的 HTML 标记。 2. 善于利用这些标记制作网页文档。 (二) 教学内容 第一节 文本格式应用 1. 主要内容 (1) 文本段落格式 (2) 文字的显示效果 (3) 列表格式 2. 基本概念和知识点
文本段落格式（注释标记、分段标记、换行/不换行标记、标题标记、分节标记、 水平线标记、文本居中标记)。 文字的显示效果（字体标记、字符样式标记、转义字符）。 列表格式（无序列表标记、有序列表标记） 3.问题与应用（能力要求） 问题：常用的转义字符有哪些呢？ 要求学生完成本节学习后，熟练掌握网页中最基本的元素-一文本的各种TML标 记。 第二节超链接 1.主要内容 (1)错点标记 (②)页面跳转链接 (3)书答超链接 (4)下载文件链接 (5)电子邮件链接 2.基本概念和知识点 锚点标记、页面跳转链接、书签超链接、下载文件链接、电子邮件链接 3.问题与应用（能力要求） 问题：什么是书签超链接 要求学生完成本节学习后，熟练掌握网页基本元素一一超链接的HTL标记。 第三节多媒体元素应用 1.主要内容 (1)图片 (2)音频和视频 (3)动态元素 2.基本概念和知识点 图片标记、图片超链接、网页背景。 链接音频或视频文件、网页背景音乐、内嵌音频或视频播放插件 动态元素。 3.问题与应用（能力要求） 问题：作为网页背景的图片文件格式有哪些？ 要求学生完成本节学习后，熟练掌握网页基本元素-一多媒体元素（包括图片、网 页背景、音频和视频、动态元素)的TML标记。 第四节表格 1.主要内容
4 文本段落格式（注释标记、分段标记、换行/不换行标记、标题标记、分节标记、 水平线标记、文本居中标记）。 文字的显示效果（字体标记、字符样式标记、转义字符）。 列表格式（无序列表标记、有序列表标记） 3. 问题与应用（能力要求） 问题：常用的转义字符有哪些呢？ 要求学生完成本节学习后，熟练掌握网页中最基本的元素---文本的各种 HTML 标 记。 第二节 超链接 1. 主要内容 (1) 锚点标记 (2) 页面跳转链接 (3) 书签超链接 (4) 下载文件链接 (5) 电子邮件链接 2. 基本概念和知识点 锚点标记、页面跳转链接、书签超链接、下载文件链接、电子邮件链接。 3. 问题与应用（能力要求） 问题：什么是书签超链接？ 要求学生完成本节学习后，熟练掌握网页基本元素---超链接的 HTML 标记。 第三节 多媒体元素应用 1. 主要内容 (1)图片 (2)音频和视频 (3)动态元素 2. 基本概念和知识点 图片标记、图片超链接、网页背景。 链接音频或视频文件、网页背景音乐、内嵌音频或视频播放插件 动态元素。 3. 问题与应用（能力要求） 问题：作为网页背景的图片文件格式有哪些？ 要求学生完成本节学习后，熟练掌握网页基本元素---多媒体元素（包括图片、网 页背景、音频和视频、动态元素）的 HTML 标记。 第四节 表格 1. 主要内容
(1)表格基本结构 (2)表格内容的对齐 (3)表格在页面中的对齐 (4)不规则表格 (5)表格颜色与背景 2.基本概念和知识点 表格基本结构 表格内容的对齐（水平方向对齐方式、垂直方向对齐方式）。 表格在页面中的对齐】 不规则表格 表格颜色和背景。 3.问题与应用（能力要求） 问题：网页中不规则表格如何实现？ 要求学生完成本节学习后，熟练掌握网页基本元素-一表格的有关TL标记。 第五节表单 1.主要内容 (1)表单基本概念 (2)单行文本框和密码框 (3)按钮 (4)复选框和单选按钮 (5)选择栏 (6)多行文本框 (7)表单综合示例 2.基本概念和知识点 表单的基本概念。 单行文本框和密码框 按钮（提交按钮、重置按钮、自定义按钮）。 复选框和单选按钮。 选择栏。 多行文本框」 3.问题与应用（能力要求） 问题：表单中常用的表单项有哪些？ 要求学生完成本节学习后，熟练掌握网页基本元素-一表单的有关TML标记。 (一)思考与实践 思考题：如何使用表格来布局表单？ 5
5 (1)表格基本结构 (2)表格内容的对齐 (3)表格在页面中的对齐 (4)不规则表格 (5)表格颜色与背景 2. 基本概念和知识点 表格基本结构。 表格内容的对齐（水平方向对齐方式、垂直方向对齐方式）。 表格在页面中的对齐。 不规则表格 表格颜色和背景。 3. 问题与应用（能力要求） 问题：网页中不规则表格如何实现？ 要求学生完成本节学习后，熟练掌握网页基本元素---表格的有关 HTML 标记。 第五节 表单 1. 主要内容 (1)表单基本概念 (2)单行文本框和密码框 (3)按钮 (4)复选框和单选按钮 (5)选择栏 (6)多行文本框 (7)表单综合示例 2. 基本概念和知识点 表单的基本概念。 单行文本框和密码框。 按钮（提交按钮、重置按钮、自定义按钮）。 复选框和单选按钮。 选择栏。 多行文本框。 3. 问题与应用（能力要求） 问题：表单中常用的表单项有哪些？ 要求学生完成本节学习后，熟练掌握网页基本元素---表单的有关 HTML 标记。 (一) 思考与实践 思考题：如何使用表格来布局表单？
让学生熟练学握常用网页基本元素的TML标记。 完成实验项目二(HTM标记的使用)。 (二)教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行， 第三章 Dreamweaver基本操作 (-） 目的与要求 L.了解Dreamweaver软件。 熟悉Dreamweaver环境下文档的基本操作。 3.熟练掌握利用Dreamweaver软件实现各种网页基本元素的插入和设置。 (二)教学内容 第一节Dreamweaver操作界面 1.主要内容 ()Dreamweaver简介 (2)Dreamweaver功能 (3)Dreamweaver界面 2.基本概念和知识点 了解Dreamweaver的历史以及功能熟悉Dreamweaver的界面 3.问题与应用（能力要求） 问题：如何打开一个屏幕上不可见的面板？ 要求学生完成本节学习后，对网页制作软件Dreamweaver有个初步的认识并熟悉 其操作界面。 第二节网站建立 1.主要内容 (1)规划站点 (2)使用Dreamweaver创建本地站点 2.基本概念和知识点 站点结构的规划、站点导航机制的规划 3.问题与应用（能力要求） 问题：站点结构的规划要注意什么细节？ 要求学生完成本节学习后，熟悉使用Dreamweaver创建本地站点。 第三节Dreamweaver文档操作 1.主要内容 (1)创建网页 (2)保存网页 (3)打开现有网页 6
6 让学生熟练掌握常用网页基本元素的 HTML 标记。 完成实验项目二（HTML 标记的使用）。 (二) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第三章 Dreamweaver 基本操作 (一) 目的与要求 1. 了解 Dreamweaver 软件。 2. 熟悉 Dreamweaver 环境下文档的基本操作。 3. 熟练掌握利用 Dreamweaver 软件实现各种网页基本元素的插入和设置。 (二) 教学内容 第一节 Dreamweaver 操作界面 1. 主要内容 (1) Dreamweaver 简介 (2) Dreamweaver 功能 (3) Dreamweaver 界面 2. 基本概念和知识点 了解 Dreamweaver 的历史以及功能；熟悉 Dreamweaver 的界面。 3. 问题与应用（能力要求） 问题：如何打开一个屏幕上不可见的面板？ 要求学生完成本节学习后，对网页制作软件 Dreamweaver 有个初步的认识并熟悉 其操作界面。 第二节 网站建立 1. 主要内容 (1)规划站点 (2)使用 Dreamweaver 创建本地站点 2. 基本概念和知识点 站点结构的规划、站点导航机制的规划。 3. 问题与应用（能力要求） 问题：站点结构的规划要注意什么细节？ 要求学生完成本节学习后，熟悉使用 Dreamweaver 创建本地站点。 第三节 Dreamweaver 文档操作 1. 主要内容 (1) 创建网页 (2) 保存网页 (3) 打开现有网页
(4)浏览网页 2.基本概念和知识点 文档操作（网页文件的新建、保存、关闭、打开和预览以及设置页面属性等）： 3.问题与应用（能力要求 问题：如何设置站点首页？ 要求学生完成本节学习后，熟悉Dreamweaver环境下网页文件的基本操作。 第四节网页基本元素（一） 1.主要内容 (1)文字 (2)图像 (3)超链接 2.基本概念和知识点 文本的输入及设置 图像的基本格式、图像的插入及设置： 相对路径及绝对路径的使用方法，超链接的创建 3.问题与应用（能力要求） 问题：网页中常用的图片格式有哪些？ 要求学生完成本节学习后，熟练掌握网页基本元素（包括文字、图像及超链接等） 的插入及设置。 第五节网页基本元素（二） 1.主要内容 (1)多媒体对象 (2)表格 (3)表单 2.基本概念和知识点 在网页中插入和播放各种多媒体对象： 表格的创建及设置； 表单及表单对象的创律，利用表格归整表单 3.问题与应用（能力要求） 问题：如何利用普通表格归整表单？ 要求学生完成本节学习后，熟练掌握网页基本元素（包括多媒体对象、表格及表 单等)的插入及设置。 (一)思考与实践 思考题：理解各种链接路径的含义。 让学生通过实践掌握使用Dreamweaver软件来规划和创建本地站点的方法：熟悉 7
7 (4) 浏览网页 2. 基本概念和知识点 文档操作（网页文件的新建、保存、关闭、打开和预览以及设置页面属性等）； 3. 问题与应用（能力要求） 问题：如何设置站点首页？ 要求学生完成本节学习后，熟悉 Dreamweaver 环境下网页文件的基本操作。 第四节 网页基本元素（一） 1. 主要内容 (1) 文字 (2) 图像 (3) 超链接 2. 基本概念和知识点 文本的输入及设置； 图像的基本格式、图像的插入及设置； 相对路径及绝对路径的使用方法，超链接的创建。 3. 问题与应用（能力要求） 问题：网页中常用的图片格式有哪些？ 要求学生完成本节学习后，熟练掌握网页基本元素（包括文字、图像及超链接等） 的插入及设置。 第五节 网页基本元素（二） 1. 主要内容 (1) 多媒体对象 (2) 表格 (3) 表单 2. 基本概念和知识点 在网页中插入和播放各种多媒体对象； 表格的创建及设置； 表单及表单对象的创建，利用表格归整表单。 3. 问题与应用（能力要求） 问题：如何利用普通表格归整表单？ 要求学生完成本节学习后，熟练掌握网页基本元素（包括多媒体对象、表格及表 单等）的插入及设置。 (一) 思考与实践 思考题：理解各种链接路径的含义。 让学生通过实践掌握使用 Dreamweaver 软件来规划和创建本地站点的方法；熟悉
Dreamweaver的基本文档操作，熟练掌握各种网页基本元素的插入和设置。 完成实验项目三(Dreamweaver基本操作（一）)及实验项目四(Dreamweaver基 本操作（二）)。在这两个实验项目中均是以中国古诗词为网站主题，通过任务驱动的 方式，让学生在完成任务的过程中去领略古诗词中蕴含的人生哲理、审美价值以及艺 术感染力。 (二)教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第四章CSS样式表 (一)目的与要求 了解CSS样式表的基本知识： 2.熟悉CSS样式表的创建及应用。 第一节CSS简介 1.主要内容 (1)CSS的概念及优点 (2)CSS的分类 (3)CSS的语法结构 (4)CSS的优先级 2.基本概念和知识点 CSS样式表的概念，优点，分类，样式优先级顺序，语法 3.问题与应用（能力要求） 问题：TL及CSS是如何分工合作的？ 要求学生完成本节学习后，熟练掌握CS$样式表的相关知识并能运用其来设置网 页格式、定位网页布局等。 第二节CSS样式表的创建及应用 1.主要内容 (1)CSS样式的创建与编辑修改 (2)CSS样式的应用 2.基本概念和知识点 “CSS样式”面板（功能，各选项）。 “新建CSS规则”对话框中其他各选项的含义。 CSS属性设置（打开【CSS规则定义】对话框，创建8种CSS样式类型）。 应用CSS样式（利用“CSS样式”面板，利用“属性”面板）。 3.问题与应用（能力要求） 问题：什么是CSS的滤镜功能？ 要求学生完成本节学习后，熟练学握CS$样式表的相关知识并能运用其来设置网 8
8 Dreamweaver 的基本文档操作，熟练掌握各种网页基本元素的插入和设置。 完成实验项目三（Dreamweaver 基本操作（一））及实验项目四（Dreamweaver 基 本操作（二））。在这两个实验项目中均是以中国古诗词为网站主题，通过任务驱动的 方式，让学生在完成任务的过程中去领略古诗词中蕴含的人生哲理、审美价值以及艺 术感染力。 (二) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第四章 CSS 样式表 (一) 目的与要求 1. 了解 CSS 样式表的基本知识； 2. 熟悉 CSS 样式表的创建及应用。 第一节 CSS 简介 1. 主要内容 (1) CSS 的概念及优点 (2) CSS 的分类 (3) CSS 的语法结构 (4) CSS 的优先级 2. 基本概念和知识点 CSS 样式表的概念，优点，分类，样式优先级顺序，语法。 3. 问题与应用（能力要求） 问题： HTML 及 CSS 是如何分工合作的? 要求学生完成本节学习后，熟练掌握 CSS 样式表的相关知识并能运用其来设置网 页格式、定位网页布局等。 第二节 CSS 样式表的创建及应用 1. 主要内容 (1) CSS 样式的创建与编辑修改 (2) CSS 样式的应用 2. 基本概念和知识点 “CSS 样式”面板（功能，各选项）。 “新建 CSS 规则”对话框中其他各选项的含义。 CSS 属性设置（打开【CSS 规则定义】对话框，创建 8 种 CSS 样式类型）。 应用 CSS 样式（利用“CSS 样式”面板，利用“属性”面板）。 3. 问题与应用（能力要求） 问题：什么是 CSS 的滤镜功能? 要求学生完成本节学习后，熟练掌握 CSS 样式表的相关知识并能运用其来设置网
页格式。 (一)思考与实践 思考题：理解各种选择器的含义。 让学生理解CSS的含义，熟练掌握CSS样式表的创建和应用。在讲授“CSS选择器 如何美化网页元素”的案例教学中引入一些能体现人文精神、仁爱之心的网页例文素 材，把价值观培育有机地融入课程，润物无声，立德树人。 完成实验项目五(CSS样式表). (二)教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第五章Dreamweaver网页布局设计 (一)目的与要求 1.熟练掌握表格的网页定位技术。 2。熟练掌握框架的网页定位技术。 3.使用层来布局页面。 4.熟练学握基于CSS的网页布局设计 (二)教学内容 第一节布局表格 1.主要内容 (1)标准模式与布局模式切换 (2)绘制布局表格与布局单元格 (3)修改布局表格与布局单元格 (4)在布局单元格中添加网页元素 (⑤)表格规划主页布局实例 2.基本概念和知识点 布局表格（布局视图模式，布局表格以及布局单元格的绘制、属性设置以及基本 操作)。 利用布局表格来规划主页。中华民族有着五千年的历史，饮食文化作为其中的重要 组成部分，不仅折射了朝代更迭的繁荣与落寞，而且也演变成为了一个民族生生不息 的灵魂与支柱。在讲授“利用布局表格布局网页”时以中国八大美食为主题，让学生 在举握网页布局知识的同时能更加了解中国的传统文化，增强民族自豪感和自信心。 3.问题与应用（能力要求） 问题：Dreamweaver中的表格可分为哪两种？ 要求学生完成本节学习后，熟练掌握表格用于在HTL页面上显示格式化数据以及 对网页元素进行布局。 第二节框架
9 页格式。 (一) 思考与实践 思考题：理解各种选择器的含义。 让学生理解 CSS 的含义，熟练掌握 CSS 样式表的创建和应用。在讲授“CSS 选择器 如何美化网页元素”的案例教学中引入一些能体现人文精神、仁爱之心的网页例文素 材，把价值观培育有机地融入课程，润物无声，立德树人。 完成实验项目五（CSS 样式表）。 (二) 教学方法与手段 本章教学主要借助多媒体课件采用课堂讲授的方式进行。 第五章 Dreamweaver 网页布局设计 (一) 目的与要求 1. 熟练掌握表格的网页定位技术。 2. 熟练掌握框架的网页定位技术。 3. 使用层来布局页面。 4. 熟练掌握基于 CSS 的网页布局设计。 (二) 教学内容 第一节 布局表格 1. 主要内容 (1) 标准模式与布局模式切换 (2) 绘制布局表格与布局单元格 (3) 修改布局表格与布局单元格 (4) 在布局单元格中添加网页元素 (5) 表格规划主页布局实例 2. 基本概念和知识点 布局表格（布局视图模式，布局表格以及布局单元格的绘制、属性设置以及基本 操作）。 利用布局表格来规划主页。中华民族有着五千年的历史,饮食文化作为其中的重要 组成部分,不仅折射了朝代更迭的繁荣与落寞,而且也演变成为了一个民族生生不息 的灵魂与支柱。在讲授“利用布局表格布局网页”时以中国八大美食为主题，让学生 在掌握网页布局知识的同时能更加了解中国的传统文化，增强民族自豪感和自信心。 3. 问题与应用（能力要求） 问题：Dreamweaver 中的表格可分为哪两种？ 要求学生完成本节学习后，熟练掌握表格用于在 HTML 页面上显示格式化数据以及 对网页元素进行布局。 第二节 框架
1.主要内容 (①)框架与框架集 (②)创建框架集 (3)编辑框架集及框架 (4)利用框架设计主页 2.基本概念和知识点 框架与框架集（概念，缺点，组成）。 创建框架集（创建预定义框架集，自定义框架集）。 编辑框架集及框架（选取框架集或框架，设置框架大小，删除框架，拆分框架， 设置框架集或框架属性，设置超链接目标框架，保存框架集及框架)。 利用框架设计主页 3.问题与应用（能力要求） 问题：如何保存框架集及框架？ 要求学生完成本节学习后，熟练掌握框架的基本操作并能制作使用框架排版的网 页。 第三节层 1.主要内容 (1)层的定位与插入 (2)改变层顺序与可见性 (3)设置层的属性 (4)通过层对网页元素进行页面布局 2.基本概念和知识点 层（概念，特点，局限性及适用范围）。 层的基本操作（创建层，激活和选中层，调整、移动和对齐层，设置层的属性， 层面板的使用)。 利用层设计主页。 3.问题与应用（能力要求） 问题：层的特点是什么？ 要求学生完成本节学习后，熟练学握层的概念，熟悉层的基本操作以及利用层来 布局页面。 第四节基于CSS的网页布局设计 1.主要内容 (I)CSS盒子模式 (2)CSS盒子的浮动 (3)CSS盒子的定位 10
10 1. 主要内容 (1) 框架与框架集 (2) 创建框架集 (3) 编辑框架集及框架 (4) 利用框架设计主页 2. 基本概念和知识点 框架与框架集（概念，缺点，组成）。 创建框架集（创建预定义框架集，自定义框架集）。 编辑框架集及框架（选取框架集或框架，设置框架大小，删除框架，拆分框架， 设置框架集或框架属性，设置超链接目标框架，保存框架集及框架）。 利用框架设计主页。 3. 问题与应用（能力要求） 问题：如何保存框架集及框架？ 要求学生完成本节学习后，熟练掌握框架的基本操作并能制作使用框架排版的网 页。 第三节 层 1. 主要内容 (1) 层的定位与插入 (2) 改变层顺序与可见性 (3) 设置层的属性 (4) 通过层对网页元素进行页面布局 2. 基本概念和知识点 层（概念，特点，局限性及适用范围）。 层的基本操作（创建层，激活和选中层，调整、移动和对齐层，设置层的属性， 层面板的使用）。 利用层设计主页。 3. 问题与应用（能力要求） 问题：层的特点是什么？ 要求学生完成本节学习后，熟练掌握层的概念，熟悉层的基本操作以及利用层来 布局页面。 第四节 基于 CSS 的网页布局设计 1. 主要内容 (1) CSS 盒子模式 (2) CSS 盒子的浮动 (3) CSS 盒子的定位