第9章 模板和库 实战Dreamweaver8网页制作教程电子教案
Dreamweaver8网页全教案
网页制作基础（Dreamwaver 8 教程）第一章Dreamweaver8.0的操作环境第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来理解Dreamweaver8的操作环境，完成站点的创建。
一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。
Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。
我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首先将显示一个起始页，能够勾选这个窗口下面的“不在显示此对话框”来隐藏它。
在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。
新建或打开一个文档，进入Dreamweaver8的标准工作界面。
Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题显示栏启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。
2、菜单栏Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和协助。
其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。
文件：用来管理文件。
例如新建，打开，保存，另存为，导入，输出打印等。
编辑：用来编辑文本。
例如剪切，复制，粘贴，查找，替换和参数设置等。
查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。
修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。
Dreamweaver网页设计电子教案(全)完整版课件整套教学课件
第1章
本章内容目录
1. 9 插入Flash：在线游戏 1.10 插入视频和声音 1.11 本章小结 1.12 本章习题
第1章
1.1 基本操作
1.1.1 网页的基本概念
网页：通常是HTML格式（文件扩展名为.html或.htm）。网页通常用
图像来提供图画，网页要透过网页浏览器来阅读。
HTML语言：HTML的全称是Hyper Text Markup Language，中文翻译
框架主要用于将浏览器划分为多个窗口，在各个窗口中显示多个不同 的HTML文档。通过设定这些文档之间的相互关系，从而实现文档导 航和文档操作的目的。
框架技术主要有两种类型的 元素：一是框架集，另外一 个是框架。
基于框架技术制 作的BBS
第1章
1.7.2 上机操作
制作一个基本框架框架
在框架的左侧插入12行1列的表 格，在右侧插入2行1列的表格
4．表格一般被划分为_______、 _______、 _______ 3部分。
5．框架是由两种元素_______和_______组成。
第1章
二、选择题
1．创建虚拟链接使用的符号是：____
A.@
B.#
C.$
D.*
2．GIF格式的图像的有点有______ A.支持动画格式 B.持透明图标 C.无损压缩方式 D.支持24位真彩色
都可以
第2章
第2章 CSS样式表与模板
本章学习知识点
● 认识CSS ● 使用CSS编辑器 ● 背景样式的定义 ● 滤镜的使用
上 一 张
返 回
下 一 张
第2章
本章内容目录
2.1 文字和图像的处理：生日贺卡 2.2 CSS样式：独具风格的主页 2.3 对文字运用CSS滤镜：蓝色生死恋 2.4 对图像运用CSS滤镜：图片滤镜 2.5 层模板：海底世界 2.6 库项目的应用：公司主页 2.7 总结提高 2.8 本章习题
Dreamweaver网页设计 课程标准(电商网站方向)
《Dreamweaver网页设计》课程标准适用专业：电子商务专业学分数：7总学时数：108 理论课时：64 实践课时：44一、理论教学部分（一）课程的性质和任务1．课程性质：《Dreamweaver网页设计》本课程是计算机各专业的一门实践性很强的技术基础课，是一门必修的专业课。
主要学习如何利用Dreamweaver这个软件进行网页的设计与制作。
2．课程任务：本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。
目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。
（二）教学内容和教学要求第一章 Dreamweaver基础（2学时）【教学内容】一、Dreamweaver 的历史和简介；二、Dreamweaver 8.0的安装过程；三、Dreamweaver 8.0 的全新界面；四、改进的设计与开发环境；五、主菜单介绍；六、对象控制面板介绍。
【教学目的与教学要求】掌握Dreamweaver的基本特点、新增功能及界面组成。
基本操作，如安装、新建、打开、导入、保存、关闭等；理解新增功能、界面组成的优点；了解Dreamweaver可以为我们做些什么。
第二章网页设计语言基础（7学时）【教学内容】一、HTML及XHTML语言介绍；二、常用的网页语法标记。
【教学目的与教学要求】理解HTML及XHTML语言介绍，常用的网页语法标记。
第三章文本和图像处理（4学时）【教学内容】一、文本属性面板介绍；二、编辑文本和插入对象；三；设置文本的格式；四、编号与项目符号；五、在网页中插入图像；六、图像的应用。
【教学目的与教学要求】掌握设置文本属性和格式，编号与项目符号的使用，插入、编辑和排版图像；理解如何进行图像调整。
DREAMWEAVER8教案
DREAMWEAVER8教案多媒体课件制作教案使用专业：教育学、心理学使用年级：三年级撰写人：潘威课程性质：选修课使用教材：授课时数：34第一章网页制作概述 2学时教学目的：了解网页及网站基本概念及网页的基本要素分析及网站设计流程教学重点与难点：网页、网站设计流程，网页基本要素第一节网页和网站一、网页网页又称为Web页，是网站的基本信息单位二、网站互联网上服务器所承载的一组相关网页。
三、网页的基本功能第二节网页中的主要元素一、文本网页发布信息所用的主要形式。
二、图像网页上的图形格式一般使用JPEG和GIF，四、链接标志通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。
链接有网页外、网页内、邮件链接五、其他的基本要素第三节网页制作工具一、网页编辑工具二、网页图像编辑工具三、动态网页技术第四节网页设计的基本流程一、网站的设计流程二、网页的设计与制作三、网页的测试四、网页上传和发布第二部分 FRONTPAGE讲解 16学时第三部分DREAMWEAVER讲解 16学时第一章 Dream weaver基础 2学时教学目的：了解DW8的操作界面及常用命令，掌握规划和创建站点的操作，掌握基本的网页操作知识。
教学重点与难点：规划站点的结构、网页的基本操作第一节 Dream weaver 8工作界面一、启动和退出Dreamweaver二、Dreamweaver8操作界面第二节规划与创建站点一、规划网站的整体结构规划站点结构是设计站点的必要前提，其操作是将不同的文件分类存放在文件夹中以便于设计者管理。
●在制作站点之前需要先建立一个文件夹以保存在网页制作过程中产生的文件，从而方便管理。
发布站点时只需将这个文件夹上传到WEB服务器上即可。
●在制作网页过程中合理地命名文件和文件夹是很重要的，一般以易于记忆和理解的英文或汉语拼音命名。
站点规划好后，可以绘制网站结构草图。
还需要确定整个网站的风格和样式，颜色及页面的布局等。
网页设计与制作Dreamweaver8网页设计培训课件
第一页
工具栏下面的区域是“网页编辑区 上一页 域”，在Dreamweaver 8启动时显示一个
“起始页”，其中包括“打开最近项目”、 下一页 “创建新项目”、“从范例创建”三个较
方便使用的项目。选中任意项，出现“网
最后页
页编辑窗口” ，则“网页编辑区域”就会 退出 出现“网页编辑窗口”，用户可以在文档
开网页的话，在后面还会显示该网页的一些信息， 下一页 如网页标题、所在位置及文件名称，右边有3个
按钮，分别对应Dreamweaver 8窗口的最小化、 最后页 最大化和关闭的操作。
退出
3.1 Dreamweaver 8简介
3.1.3 菜单栏
第一页
“标题栏”的下面是“菜单栏”， 菜单栏中提供了
“文件”、“编辑”、“查看”、“插入”、“修改”、 上一页 “文本”、“命令”、“站点”、“窗口”和“帮助”
十个菜单项。单击其中任意一个菜单，会出现一个
下一页 下拉式指令菜单，如果指令选项为浅灰色的话，
则代表该指令在当前的状态下不能执行。有些指
最后页 令的右边会有键盘的代码，这是该指令的快捷键，
熟练使用快捷键将会有助于提高工作效率。有些
退出 指令的右边会有一个小黑三角的标记，它代表该
指令还包含有下一级的指令，鼠标停留片刻即可
如果要制作一个完整的网站，在制作网站的 第一页 具体页面之前，首先需要创建一个本地站点。下
面我们以本章案例的站点建设为例，说明本地站
上一页
点创建与管理的方法。
下一页
3.2.1 建立站点
创建过程如下：打开“文件”面板 ； 单击 最后页 “管理站点”，出现 “管理站点”对话框；单击
“新建”按钮，并从下拉菜单中选择“站点”命 退出 令 ，按向导新建站点。
Dreamweaver8教案
教学进度计划表周周节教学内容备注7 6 1、第1章Dreamweaver8简述和操作界面2、第2章规划站点3、第3章创建文档8 6 1、第4章编辑文本2、第5章图像的应用9 6 1、第6章使用CSS样式2、第7章网络多媒体应用10 6 1、第8章使用链接2、第9章使用表格11 6 1、第10章使用表格的“布局模式”2、第11章层的使用12 6 1、第12章创建交互式菜单2、第13章使用行为13 6 1、第14章使用框架和框架集2、第15章使用模板和库14 6 1、第16章站点管理2、第17章综合实例（课程设计）课题第1章Dreamweaver8简述和操作界面课时 2 日期10月.9 课节 3.4教学目的1、了解Dreamweaver 8 的界面组成以及面板的使用方法。
2、掌握Dreamweaver 8 工作区的布局，并能够使用工具栏中的快速按钮以及界面板组。
重点与难点Dreamweaver 8 的操作界面及界面板组教学方法讲授与演示法教学内容及过程与环节备注要从事网页设计工作，就必须学习如何制作网页。
在过去，只有掌握了HTML（超文本标记语言）才能编写出网页。
如今，即使不了解任何网页编写语言，也一样可以快速地创建出精美的网页。
1.1教学目标1、了解Dreamweaver 8 的界面组成、新增功能以及面板的使用方法。
2、掌握Dreamweaver 8 工作区的布局，并能够使用工具栏中的快速按钮以及界面板组。
1.2 理论指导1.2.1 Dreamweaver 8 简述使用Dreamweaver 不仅可以制作出任何结构复杂的静态网页，而且在以下几个方面也有着强大的功能。
完美的操作界面强大的模板功能创建动态网页强大的代码编辑功能1.2.2 Dreamweaver 8 的新功能1. 新的工作流程2. 增强的CSC支持3. 快速的文件传输功能4. 对XML/XSLT的远景支持1.2.3 Dreamweaver 8 的操作界面1. 查看Dreamweaver 8 的操作界面Dreamweaver 8 的操作界面由“文档”窗口、工具栏、状态栏、上下文菜单、工具栏和属性检查器等部分组成。
《Dreamweaver_8基础与实例教程》_jy_01
34
1.3.1 创建网页和打开网页
1.新建网页 单击“文件”菜单下“新建”命令，即可弹出“新
建文档”对话框。从“类别”列表框中选择“基 本页”选项，然后选择“基本页”列表框中的 “HTML”选项。单击“创建”按钮，即可新建 一个空白的HTML网页文档。
23
步骤6：单击“下一步”按钮，开始设置网页的 存储方法和存储路径。在上半部分的单选项中选 择第一项“编辑我的计算机上的本地副本，完成 后再上传到服务器（推荐）”。如果申请的网站 空间支持在线编辑功能，那么可以选择“使用本 地网络直接在服务器上编辑”单选项。
24
25
步骤7：完成以上的设置后单击“下一步”按钮， 在这里选择连接服务器的方式，以及网页在服务 器上的存储位置。
30
1.2.2 管理站点
3．删除站点 如果不需要某个站点时，可以将其从站点列表中删
除。选择“站点”菜单下的“管理站点”命令， 打开“管理站点”对话框，在该对话框中选择一 个站点，单击“删除”按钮，即可删除一个站点， 对某一个站点进行删除操作后，网站的文件仍保 存在硬盘原来的位置上，并没有从硬盘上删除。
42
1.5 练习制作简单的网页站点
2. 创建一个“个人求职主页”的站点，将其中的本地站 点保存在“D:﹨self”文件夹下，远程站点保存在 “D:﹨self”文件夹下。根据网站的主页，为“个人求职主 页”网站建立一个存放图片的文件夹“images”，并依据 如图所示的网页建立网站目录，建立所需要的网页文件 ，最后设置index.html的页面属性。
41
1.5 练习制作简单的网页站点
1.创建一个名为“计算机基础精品课程”的站点，将其中 的本地站点保存在“D:﹨computer”文件夹下，远程站 点保存在“D:﹨computer”文件夹下。根据如图所示的网 站的逻辑图，为“计算机基础精品课程”网站建立一个存 放图片的文件夹“images”，并新建名为“index.html”、 “teacher.html”、“jiaoxue.html”、“shiyan.html”、 “rili.html”、“kejian.html”和“luxiang.html”的网页文件 ，最后设置index.html的页面属性。
Dreamweaver网页制作教案
Dreamweaver网页制作教案第一章：Dreamweaver概述1.1 课程介绍了解Dreamweaver作为网页制作工具的优势熟悉Dreamweaver的工作界面1.2 创建和管理网页创建新文档打开和保存网页管理标签库1.3 实践操作制作一个简单的网页学会使用Dreamweaver的实时视图和代码视图第二章：网页基本结构2.1 网页元素文本图像表格表单2.2 排版和格式化字体和大小颜色和样式段落对齐和间距2.3 实践操作制作一个包含文本、图像和的网页学习使用Dreamweaver的排版和格式化工具第三章：CSS样式3.1 CSS介绍了解CSS的作用和优势熟悉CSS的基本语法3.2 创建和应用CSS样式创建样式表应用样式到网页元素编辑和删除样式3.3 实践操作制作一个使用CSS样式的网页学习使用Dreamweaver的CSS面板第四章：网页布局4.1 布局技术表格布局CSS布局框架布局4.2 常用布局方法固定布局可变布局响应式布局4.3 实践操作制作一个使用表格布局的网页学习使用CSS布局和响应式布局第五章：表单和交互5.1 表单元素表单标签输入框选择框文件5.2 验证和提交表单表单验证方法提交表单到服务器接收服务器返回的数据5.3 实践操作制作一个简单的表单页面学习表单的验证和交互功能第六章：Dreamweaver 网站管理6.1 网站结构规划了解网站结构的重要性学习如何规划网站结构熟悉网站的目录和文件组织方式6.2 站点设置和管理创建和定义站点管理站点文件和目录更新和网站文件6.3 实践操作规划并创建一个简单的网站结构配置和管理Dreamweaver 站点第七章：Dreamweaver 模板和框架7.1 模板的概念和应用理解模板的作用学习如何创建和使用模板掌握模板的插入点和使用技巧7.2 框架和框架集了解框架和框架集的概念学习如何创建和编辑框架掌握框架的布局和内容管理7.3 实践操作创建一个简单的模板文件使用模板创建网站的多个页面制作一个使用框架的网页布局第八章：Dreamweaver 动画和多媒体8.1 动画技术概述了解Dreamweaver 支持的视频和动画格式学习如何插入和编辑动画元素8.2 多媒体元素的应用插入图像、音频和视频设置多媒体属性和行为掌握交互式多媒体元素的制作8.3 实践操作制作一个包含动画和多媒体元素的网页学习使用Dreamweaver 的行为面板为网页添加交互功能第九章：Dreamweaver 网页编程9.1 行为和事件理解行为和事件的概念学习如何使用行为为网页添加功能掌握常见行为的使用方法9.2 JavaScript 基础了解JavaScript 的基本概念学习如何在Dreamweaver 中编写JavaScript 代码掌握Dreamweaver 的JavaScript 调试工具9.3 实践操作编写简单的JavaScript 代码为网页添加功能学习使用Dreamweaver 的JavaScript 面板和调试工具第十章：Dreamweaver 网站发布和维护10.1 网站测试学习网站在不同浏览器和设备上的测试方法掌握网站性能测试和优化技巧10.2 网站发布了解网站发布的流程和注意事项学习如何使用Dreamweaver 发布网站10.3 网站维护和更新学习网站的日常维护和更新技巧掌握网站安全和备份方法10.4 实践操作对一个网站进行全面的测试和优化发布和维护一个简单的网站第十一章：Dreamweaver 数据库和动态内容11.1 数据库基础了解数据库的概念和作用学习如何连接和操作不同类型的数据库11.2 动态内容创建学习如何创建动态网页和表单掌握Dreamweaver 内置的服务器模型和数据源11.3 实践操作连接一个数据库并创建一个动态表单使用Dreamweaver 插入动态内容到网页第十二章：Dreamweaver 扩展性和高级技巧12.1 扩展Dreamweaver学习如何安装和使用Dreamweaver 插件和扩展掌握Dreamweaver 扩展的创建和分享12.2 高级网页技术学习如何使用CSS3 和HTML5掌握响应式设计和移动网页制作技巧12.3 实践操作制作一个使用CSS3 和HTML5 的网页创建一个响应式设计的网页layout第十三章：Dreamweaver 与其他工具的集成13.1 图像和图形编辑工具学习如何使用Adobe Photoshop 和Fireworks 与Dreamweaver 协同工作掌握图像和图形的导入和编辑技巧13.2 代码编辑和调试工具学习如何使用Dreamweaver 的代码编辑功能掌握使用外部代码编辑器和调试工具的技巧13.3 实践操作使用Photoshop 和Fireworks 制作网页素材在Dreamweaver 中导入和应用图像和图形第十四章：Dreamweaver 项目管理和团队协作14.1 项目管理学习如何管理Dreamweaver 项目文件和资源掌握Dreamweaver 项目的备份和版本控制14.2 团队协作了解团队协作的重要性学习如何在团队中使用Dreamweaver 和版本控制系统14.3 实践操作管理一个Dreamweaver 项目并实现版本控制在团队中使用Dreamweaver 进行协作第十五章：Dreamweaver 综合实战项目15.1 项目规划和设计学习如何进行项目规划和设计熟悉项目的时间管理和资源分配15.2 项目实施学习如何实施Dreamweaver 项目掌握项目的时间管理和问题解决技巧15.3 项目评估和优化学习如何评估Dreamweaver 项目的效果掌握项目的优化和维护技巧15.4 实践操作完成一个Dreamweaver 综合实战项目进行项目评估和优化以提高网站质量和性能重点和难点解析重点：Dreamweaver的工作界面和基本操作网页基本结构元素的插入和编辑CSS样式的创建和应用网页布局技术，包括表格布局、CSS布局和响应式布局表单的创建和交互功能的实现网站的管理和站点的设置模板和框架的使用动画和多媒体元素的插入网页编程，包括行为和事件的应用、JavaScript基础网站的测试、发布和维护数据库连接和动态内容的创建扩展性和高级技巧的运用与其他工具的集成和项目管理的实践团队协作和综合实战项目的实施难点：CSS样式的复杂应用和调试网页布局的高级技巧，如响应式布局的实现表单验证和交互逻辑的编写网站管理和站点配置的细节处理模板和框架的精细操作JavaScript代码的编写和调试数据库连接和动态内容的管理扩展性和高级技巧的深入应用团队协作和项目管理的策略制定综合实战项目的规划和实施通过理解和掌握这些重点和难点，学生将能够熟练使用Dreamweaver进行网页制作，并能够应对真实世界的网页设计挑战。
DREAMWEAVER电子教案
DREAMWEAVER电子教案第一章：DREAMWEAVER简介1.1 课程目标：了解DREAMWEAVER的发展历程和功能特点掌握DREAMWEAVER的基本操作和界面布局1.2 教学内容：DREAMWEAVER的发展历程DREAMWEAVER的功能特点DREAMWEAVER的基本操作DREAMWEAVER的界面布局1.3 教学方法：讲解演示学生实操问答互动1.4 课后作业：熟悉DREAMWEAVER的界面布局练习基本的DREAMWEAVER操作第二章：网页设计与制作基础2.1 课程目标：了解网页设计的基本原则掌握HTML和CSS的基础知识学会使用DREAMWEAVER制作基本网页元素2.2 教学内容：网页设计的基本原则HTML和CSS的基础知识使用DREAMWEAVER制作、段落、和图片等基本网页元素2.3 教学方法：讲解演示学生实操问答互动2.4 课后作业：学习HTML和CSS的基础知识练习使用DREAMWEAVER制作基本网页元素第三章：布局与排版3.1 课程目标：了解网页布局的基本方法掌握DREAMWEAVER的布局工具学会使用CSS进行页面排版3.2 教学内容：网页布局的基本方法DREAMWEAVER的布局工具：表格、div、框架等使用CSS进行页面排版3.3 教学方法：讲解演示学生实操问答互动3.4 课后作业：练习使用DREAMWEAVER的布局工具进行网页布局学习CSS进行页面排版第四章：网页交互与动画4.1 课程目标：了解网页交互的基本概念掌握DREAMWEAVER的交互功能学会制作网页动画4.2 教学内容：网页交互的基本概念DREAMWEAVER的交互功能：表单、行为、组件等制作网页动画：Flash、GIF等4.3 教学方法：讲解演示学生实操问答互动4.4 课后作业：练习使用DREAMWEAVER的交互功能学习制作网页动画第五章：网页发布与维护5.1 课程目标：了解网页发布的流程掌握DREAMWEAVER的站点管理功能学会网页的维护和更新5.2 教学内容：网页发布的流程DREAMWEAVER的站点管理功能：创建站点、文件等网页的维护和更新：备份、修复、更新等5.3 教学方法：讲解演示学生实操问答互动5.4 课后作业：练习使用DREAMWEAVER的站点管理功能学习网页的维护和更新的方法第六章：响应式网页设计6.1 课程目标：理解响应式网页设计的重要性学习媒体查询和移动设备适配技术掌握DREAMWEAVER的响应式设计工具6.2 教学内容：响应式网页设计的概念与原则CSS媒体查询的使用移动设备适配技术DREAMWEAVER的响应式设计工具使用6.3 教学方法：讲解演示学生实操问答互动6.4 课后作业：练习使用媒体查询进行样式调整设计并实现一个简单的响应式网页第七章：网页前端技术进阶7.1 课程目标：学习前端开发的高级技术掌握DREAMWEAVER的高级功能了解现代前端框架和库7.2 教学内容：前端开发高级技术：JavaScript、jQuery、Ajax等DREAMWEAVER的高级功能：代码视图、代码片段、代码提示等现代前端框架和库：React、Vue、Angular等7.3 教学方法：讲解演示学生实操问答互动7.4 课后作业：学习并实践JavaScript基础使用jQuery或现代前端框架制作互动网页第八章：网页后端技术概述8.1 课程目标：理解网页后端技术的作用学习服务器端编程基础掌握DREAMWEAVER与服务器端技术的集成8.2 教学内容：网页后端技术概述服务器端编程语言：PHP、、Node.js等DREAMWEAVER与服务器端技术的交互：服务器行为、数据库连接等8.3 教学方法：讲解演示学生实操问答互动8.4 课后作业：了解服务器端编程语言的基础练习在DREAMWEAVER中设置服务器行为第九章：网页项目实战9.1 课程目标：培养学生独立完成网页项目的能力学习项目规划和管理掌握网页项目的最佳实践9.2 教学内容：项目规划和管理网页项目设计流程最佳实践：代码规范、团队协作、版本控制等9.3 教学方法：讲解演示学生实操问答互动9.4 课后作业：完成一个个人网页项目的设计和开发第十章：电子教案的制作与发布10.1 课程目标：学习电子教案的设计原则掌握DREAMWEAVER制作电子教案的方法了解电子教案的发布和应用10.2 教学内容：电子教案的设计原则使用DREAMWEAVER制作电子教案：页面布局、内容组织、交互设计等电子教案的发布和应用：到学习平台、分享给学生等10.3 教学方法：讲解演示学生实操问答互动10.4 课后作业：设计并制作一个简单的电子教案练习将电子教案到学习平台进行分享重点和难点解析重点环节一：DREAMWEAVER的基本操作和界面布局重点：熟悉DREAMWEAVER的界面布局，包括各种面板和工具栏的功能。
第9章 模板和库 实战Dreamweaver8网页制作教程电子教案
更新，更新完成后，会出现一个“更新网
页”对话框，说明更新情况。
9.2 库的建立与应用
3.使文档中的库项目可编辑 库项目添加到文档后，如希望专门针对该页编辑此项目，则必须断开文档中的项
目和库之间的链接。在使库项目的实例可编辑之后，当库项目发生更改时不会更
新该实例。 操作步骤： 1）在当前文档中选择库项目。 2）在“属性”窗口中，单击“从源文件中分离”按钮。
“收藏”列表仅显示您明确选择的资源。 在这两个列表中，资源被分成九类，显示在“资 源”面板的左侧。
9.1 模板的建立与应用
2.模板 在Dreamweaver中，模板文件最显著的特征存在可编辑区域和锁定区域两部分之分。
锁定区域是用来锁定网站风格部分，是相对固定、不可改变的；可编辑区域是用来定
3）在“资源”面板中的另一个区域中单击，或者按 Enter 键使更改生效。
4）Dreamweaver 将询问是否要更新基于此模板的文档。若要更新站点中所有基于此 模板的文档，请单击“更新”。如果不想更新基于此模板的任何文档，则单击“不 更新”。
（2）在“资源”面板中删除模板文件：
1）在“资源”面板（“窗口” →“资源”）中，选择面板左侧的“模板”类别。 2）单击模板的名称以选择该模板。 3）单击面板底部的“删除”按钮，然后确认要删除该模板。
选择需要更新的网页，单击“更新”，弹出“更新页面”对话框(如图所示)，单击完 成，即可对所选网页完成更新。
9.2 库的建立与应用
9.2.1 案例制作：利用库修改站点导航
9.2 库的建立与应用
2. 修改库项目 在“资源”面板中双击库项目
“zddh”，打开该项目，进行编辑。编辑
完成后，进行保存，打开“更新库项目” 对话框，单击“更新”按钮完成。
网页设计与制作案例教程(第2版)(胡秀娥) 项目九(模 板 与 库)
步骤 1 启动Dreamweaver CC，打开blog站点。
步骤 2 单击“文件”→“新建”菜单，打开“新建文 档”对话框。在左侧列表中选择“新建文档”选项，在 “文档类型”列表中选择“HTML模板”选项，在“布局” 列表中选择“<无>”选项，如图所示。
01
任务一 模板的基本操作
使用模板可以高效率地制作同一网站中结构相同的页面。 本任务将介绍模板的基础知识，以及使用Dreamweaver CC利 用模板制作网页的基本操作。
Dreamweaver CC中创建模板的方法有两种。一种是新建空白模板文档，然后像制作普通网页一在样设置模 板内容；另一种是将已经制作好的普通网页转换为模板。（本项目内容都将以blog站点为例，即本书配套素材“ 项目九”→“blog”文件夹，读者可先使用该文件夹创建站点，便于后续学习。） 1．新建空白模板文档
相同的其他页面。 步骤 1 继续在前面的blog站点中操作，双击“文件”面板中的“bowen1.html”选项，打开网页文 档。将插入点置于“代码”视图中，单击“文件”→“另存为模板”菜单。 步骤 2 打开“另存模板”对话框，在“另存为”文本框中输入模板文档名，此处为“t2”，单击“保存” 按钮，打开“Dreamweaver”对话框，询问是否更新链接，一般情况下都应单击“是”按钮，如图所示。
“新建文档”对话框
步骤 3 单击“创建”按钮，使用模板创建的网页文 档便出现在文档窗口中，该文档中只有可编辑区域的 内容可以修改，如图所示。
步骤 4 按“Ctrl+S”组合键，打开“另存为”对话 框，保存位置选择站点根目录，在“文件名”文本框 中输入“bowen2.html”，单击“保存”按钮，如图 所示。
《Dw CC网页制作案例教程》教学课件 第9章 模板和库的应用
步骤 02
在“文档类型〞列表中选择 “网站模板〞，在“站点〞列 表中选择“ydjt〞，在“站点 ‘ydjt’的模板〞列表中选择 “xinwen〞。
第9章 模板和库的应用
24
案例实施
一、网页、网站和主页
步骤 03 单击“创立〞按钮，基于模板创立文档，如以下图所示。
第9章 模板和库的应用
25
案例实施
中文版Dreamweaver CC 网页制作案例教程
目录页
CONTENTS PAGE
第9章 模板和库的应用
案例一 案例二
创建并应用库项目制作新闻显示页面——库的基本操作
案例说明
使用模板可以高效率地制作同一网站 中结构相同的网页。本案例通过创立 模板，并应用模板制作网站新闻显示 页面，来学习模板的根本操作。
第9章 模板和库的应用
20
案例实施
在学习了模板的创立、编辑、应用和管 理后，下面通过在企业网站中创立一个 模板，并使用该模板制作一个网页，以 进一步学习模板的创立和应用，网页效 果如右图所示。
一、网页、网站和主页
第9章 模板和库的应用
21
案例实施
一一、、网创页立、模网板站和主页
步骤 01 在“文件〞面板中翻开“ydjt〞站点，并双击翻开其中的网页文档“xinwen.html〞。 步骤 02 翻开“另存模板〞对话框。在“另存为〞文本框中输入“xinwen〞作为模板名，然后单
CONTENTS PAGE
第9章 模板和库的应用
案例一 案例二
案例说明
使用库工程可以将网页中的常用页面元素保存起 来，然后在多个网页中重复使用。本案例主要学 习创立和应用库工程的根本操作。
第9章 模板和库的应用
《Dreamweaver 8精品教程》教学课件 第9章
9.2.2 创立库工程
首先在文档窗口选择需要保存为库工程的对象，然后 选择“修改〞>“库〞>“增加对象到库〞菜单并输入 库工程名称，即可将所选对象添加到库中。
预览库工程
库工程列表 将库工程插 入到文档
新建库工程 编辑库工程 删除库工程
9.2.3 插入库工程
将库工程插入到文档中的操作非常简单，只需在“资 源〞面板的库窗口中将库工程拖入到文档的适当位置 即可。 也可以选中库中的工程，然后单击“资源〞面板底部 的“插入〞按钮，将库工程插入到文档中。
9.2 使用“库〞工程
9.2.1 什么是库工程
库工程是一种特殊的Dreamweaver文件，我们可以 将当前网页中已使用的任意页面元素定义为库工程， 如图像、表格、文本、声音和Flash影片等。 创立库工程的好处是可以在多个页面中重复使用它们， 每当更改某个库工程的内容时，所有使用了该工程的 页面都将同时更新。
制作的象 选中状态
库工程选 中状态
9.2.4 编辑库工程
要编辑库工程，可以在“资源〞面板中双击库工程， Dreamweaver会在网页编辑窗口中翻开库工程。
编辑库工程
更新使用了库 工程的网页
9.3 上机实践——应用模板和库工程制作网页
接下来我们一起来制作一个应用库工程的模板，然后 再应用该模板制作新文档。 我们将该实例分为制作模板和应用模板两局部(具体 操作见视频9-1和9-2)。
第9章 使用模板与库工程
使用模板 使用库工程 上机实践——应用模板和库工程制作网页
9.1 使用模板
Dreamweaver模板是一种特殊类型的文档，用于 设计“固定〞的页面布局。设计模板时，可以指定 在基于模板的文档中用户可以编辑文档的哪些区域。
dreamweaver8教案
dreamweaver8教案第1课Dreamweaver8基础知识教学目的：对Dreamweaver8有总体了解，掌握Dreamweaver8工作界面的组成。
教学重点：掌握工作界面的快捷工具栏，网页编辑窗口，属性面板和浮动面板显示及使用。
教学难点：快捷工具栏的显示及组成、使用，浮动面板的显示与隐藏教学方式：多媒体演示，教师讲解、演示，学生思考分析、记忆。
教学课时：2课时教具使用：多媒体教室投影显示教学内容及过程：1、导入新课：提问学生对网站的了解，internet网与我们生活的联系及重要性。
引发学生思考，带着颖问进入教学课题。
2、讲授新课：多媒体教师操作演示讲解和幻灯片的演示或板书：一、简介Dreamweaver8是著名的“所见即所得”的可视化网站开发工具，是国内外普遍应用的专用网页设计软件。
在国内，它被称为“织梦者”，它不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具。
Dreamweaver8优势：1、所见即所得与兼顾HTML源代码两种模式相互切换编辑。
2、不仅有同类软件的所有功能，而且有自身的许多出色设计理念。
3、无需手写代码，就能轻松创建各种动态效果。
4、有强大的自定义及扩展功能，提高了工作效率。
5、支持跨浏器和层叠样式表。
6、Dreamweaver8最新版本，采用多种先进技术，能够高效地创建极具表现力和动感效果的网页。
7、易学，易用，初学者也可制作精致的网页。
二、Dreamweaver8工作环境1、启动Dreamweaver8从开始菜单启动，出现工作区设置对话框，选择设计器工作区。
设计器是标准的工作区。
2、Dreamweaver8工作界面认识Dreamweaver8工作界面，对掌握和提高制作效率是关键的一步。
（1）、标题栏：左侧有网页标题，所在位置及文件名称，右侧有最小化，最大化和关闭。
（2）、菜单栏：有“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”。
Dreamweaver 8中文版网页制作-教学大纲第9章 使用CSS和Div标签-电子教案
教研室：
课程名称：Dreamweaver 8中文版网页制作
任课教师：
XXXX学校教务处制
中等职业学校教案
第9次课讲授4学时实践4学时
章节
第9章使用CSS和Div标签
讲授主
要内容
1.CSS样式的类型和属性。
2.创建和应用CSS样式的方法。
3.插入Div标签的方法。
4.使用CSS样式与Div标签进行网页布局的方法。
重点
难点
创建和应用CSS样式的方法
使用CSS样式与Div标签进行网页布局的方法
要求掌握
的知识点
【CSS样式】面板、CSS样式的类型、定义CSS样式的方法、CSS的【类型】等属性对话框、创建超级链接的高级CSS样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式、插入Div标签、使用CSS样式与Div标签进行网页布局
1、教学思路
2、教学手段
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
作业：一～三
主要
参考资料
备注
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第9章 模板和库
9.3 商业网站模板的应用
案例制作：商业网站模板的应用
通过本案例的操作，你将学会： 如何在Photoshop中对模板进行编辑、 分割、如何将分割的图像储存为网页、
如何在网页中进行调整生成自己的网页。
9.16
9.6
第9章 模板和库
9.1 模板的建立与应用
4. 通过更新模板来更新网页 通过模板创建网页可以方便快捷的建立格式相同的一组网页，而在网页的维护中
，如果需要修改该组网页的共同部分，则可以通过更新模板来更新本组网页。
9.7
第9章 模板和库
9.1 模板的建立与应用
9.1.3技巧提示
利用模板可以方便的创建和维护一组格式相同，内容不同的网页，对于有的格 式相近的网页，我们也可以利用现成的模板创建，然后使网页与模板相脱离，使之 成为一个独立的网页，这样即可以利用模板快速生成网页的格式，又可以脱离模板 的限制，用户可以对其进行自由的编辑。
1.创建模板并利用模板生成网页。 2. 使模板与文件脱离。选择“修改” →“模板”→“从模板中分离”命令， 网页与模板脱离，成为独立的网页，空白可编辑区域名称变为一般文本。
9.8
第9章 模板和库
9.1 模板的建立与应用
3. 管理模板 使用“资源”面板的“模板”类别可以管理现有模板，包括重命名模板文件和
9.9
第9章 模板和库
9.1 模板的建立与应用
9.1.4 实战演练：通过更新模板来更新网页
操作步骤： ❖ 将光标置于“精彩射门集锦”一栏内，选择“修改” →“模板”→“删除模板标志” 命令，将“精彩射门集锦”一栏修改为锁定区域，修改“精彩射门集锦”一栏的内容。 ❖ 选择“文件” →“保存”命令，弹出“更新模板文件”对话框。 ❖ 选择需要更新的网页，单击“更新”，弹出“更新页面”对话框(如图所示)，单击完 成，即可对所选网页完成更新。
第9章 模板和库
学习目标
❖ 了解资源面板的构成。 ❖ 能够创建、编辑模板，并利用模板创建网页。 ❖ 能够建立库项目并使用库项目编辑网页。
9.1
第9章 模板和库
本章内容
9.1 模板的建立与应用 9.2 库的建立与应用 9.3 实战演练：商业网站模板的应用
9.2
第9章 模板和库
9.1 模板的建立与应用
9.1.1案例制作：使用模板制作明星网站
通过本案例的操作，你 将学会：如何创建模板、 如何建立与取消模板可 编辑区域、如何使用模 板创建网页
9..5
第9章 模板和库
9.1 模板的建立与应用
3. 模板的创建 ❖ 建立模板可以有三种方法：①首先建立一个普通的页面，制作完成后保存为模板。 ②在“新建文件”对话框中选择“模板页”来建立。③在“资源”面板中选择“模板” 界面，点击右下角的“新建模板”按钮创建。 ❖ 在创建模板时，除了建立可编辑区域外，还可以添加可选区、重复区和重复表格。 ❖ 嵌套模板。嵌套模板其实就是利用另一个模板再创建的模板，在新的模板中，可 以对基础模板中定义的可编辑区作进一步的定义。
9.13
第9章 模板和库
9.2 库的建立与应用
2. 编辑库项目 项目应用到网页上之后，在网页上是不能 编辑的，如果想要编辑库项目，操作步骤 如下： 1）先打开资源面板的库项目显示状态，选 中要编辑的库项目，单击资源面板下方的 按钮，即可将库项目的原始文件调出。 2）修改完成后，选择“文件” →“保存” 命令，保存库项目，如果该项目应用在其 他网页里，会弹出“更新库项目”对话框。 3）单击“更新”按钮，选中的网页会自动 更新，更新完成后，会出现一个“更新网 页”对话框，说明更新情况。
9.14
第9章 模板和库
9.2 库的建立与应用
3.使文档中的库项目可编辑 库项目添加到文档后，如希望专门针对该页编辑此项目，则必须断开文档中的项 目和库之间的链接。在使库项目的实例可编辑之后，当库项目发生更改时不会更 新该实例。 操作步骤： 1）在当前文档中选择库项目。 2）在“属性”窗口中，单击“从源文件中分离”按钮。
删除模板文件。 （1）在“资源”面板中重命名模板： 1）在“资源”面板（“窗口” →“资源”）中，选择面板左侧的“模板”类别。 2）选择要要修改的模板,再次单击模板的名称,然后输入一个新名称。 3）在“资源”面板中的另一个区域中单击，或者按 Enter 键使更改生效。 4）Dreamweaver 将询问是否要更新基于此模板的文档。若要更新站点中所有基于此 模板的文档，请单击“更新”。如果不想更新基于此模板的任何文档，则单击“不 更新”。 （2）在“资源”面板中删除模板文件： 1）在“资源”面板（“窗口” →“资源”）中，选择面板左侧的“模板”类别。 2）单击模板的名称以选择该模板。 3）单击面板底部的“删除”按钮，然后确认要删除该模板。
将光标定位在需要插入库项目的位置 ，选择库项目，单击资源面板下方的按钮 ，如图所示，即可插入库项目。
9.12
第9章 模板和库
9.2 库的建立与应用
9.2.2 新知解析
1. 创建库项目 创建库项目可以直接创建，也可以将网页上的元素直接转换为库项目文件，方法如下： 1）打开“qiuyuan”模板，选取“站点导航”，打开资源面板并切换到显示库项目资源的 状态下，单击资源面板下方的新建库项目，可将选中的元素加入到资源面板中，原区域高 亮显示。 2）在库资源中为新增的库项目取名为”zddh”，完成后Dreamweaver会在站点下新建一个 Library文件夹，并将库项目保存在该文件夹中。
9.10
第9章 模板和库
9.2 库的建立与应用
9.2.1 案例制作：利用库修改站点导航
9.11
第9章 模板和库
9.2 库的建立与应用
2. 修改库项目 在“资源”面板中双击库项目
“zddh”，打开该项目，进行编辑。编辑 完成后，进行保存，打开“更新库项目” 对话框，单击“更新”按钮完成。 3.在文档中插入库项目