Dreamweaver网页设计教案
Dreamweaver CS6网页设计与制作教学教案
《Dreamweaver CS6网页设计与制作标准教程》教学教案掌握互联网基础和网站建设基本流程。
掌握网站建设基础和网页设计基础。
掌握网页的制作常用软件和标准技术。
熟练掌握网站建设的基本流程。
熟练掌握网页设计基础知识。
软件的应用和标准技术。
掌握软件的工作界面和创建网站框架。
掌握管理站点文件和文件夹的方法。
掌握管理站点和网页文件头设置。
熟练掌握Dreamweaver CS6工作界面的基本操作。
熟练掌握Dreamweaver CS6的站点。
在Dreamweaver CS6中站点的建立及编辑。
第3讲掌握输入文本和设置文本属性的方法。
掌握项目符号和编号列表的创建方法。
掌握水平线、网格与标尺的使用方法。
熟练掌握文本的多种创建方法和编辑技巧。
熟练掌握项目符号、编号列表和水平线的使用方法。
能够正确输入文本并编辑相关属性。
3.1.14 设置文本样式3.1.15 段落文本3.2 项目符号和编号列表3.2.1 课堂案例——电器城网店3.2.2 设置项目符号或编号3.2.3 修改项目符号或编号3.2.4 设置文本缩进格式3.2.5 插入日期3.2.6 特殊字符3.2.7 插入换行符3.3 水平线、网格与标尺3.3.1 课堂案例——摄影艺术网页3.3.2 水平线3.3.3 显示和隐藏网格3.3.4 标尺3.4 课堂练习——有机果蔬网页3.5 课后习题——休闲旅游网页小结1、熟练掌握文本的使用方法和技巧。
2、了解并掌握项目符号和编辑列表的使用方法和技巧。
作业第4讲熟练掌握图像的插入方法。
掌握多媒体在网页中的应用。
熟练掌握图像的格式与模式。
熟练掌握Flash文件的插入与设置。
能够正确使用图像和图像的属性设置、Flash文件的格式及设置属性。
4.4 课后习题——房源网页小结1、熟练掌握图像的格式与插入方法和使用技巧。
2、掌握Flash动画的插入和属性的设置。
作业第5讲了解超链接的概念与路径知识。
掌握文本、图像超链接的创建方法。
dreamweaver网页制作教(学)案
dreamweaver网页制作教案（Dreamweaver MX）一、Dreamweaver MX中文版建站初步建立一个，首先要在本地机器上做好，再传到网上的虚拟空间上。
现在免费的网页空间很少了，在还可以申请到可以使用几个月的免费空间，这对于学习网页制作已经够了。
接下来主要介绍本地站点的建立，站点文件命名。
简明步骤：在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。
目标是做一个个人。
打开“我的电脑”，打开C盘，点鼠标右键，选择新建。
选择文件夹选项C盘下会出现一个新建文件夹图标输入你想要的站点名称，这里输入media,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！现在开始在Dreamweaver MX中把media这个文件夹定义为站点。
打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点接下来需要给站点起一个名字，可以起任意一个名字。
这里起名为media,按下一步按下一步按钮，选择是否使用服务器技术。
因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
按下一步，选择要定义的本地根文件夹这里选择media文件夹点“选择”按钮，因为没有使用远程服务器，就选择“无”。
按下一步按完成按钮，一个站点就定义好了。
二、文件命名与修改默认扩展名站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。
给新建的文件输入名称新建文件夹与新建文件类似，就不重复了。
在文件命名和站点结构方面，养成良好的习惯很重要。
首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm 等。
同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。
Dreamweaver网设计教案
1 2
•
⏹⏹⏹⏹⏹
➢
➢
⏹◆◆
学生对学习网页制作的兴趣,培养大家的动手操作能力;
4.了解java脚本的基本用法
教学重点1.行为的概念和创建,2.使用DW内置的行为元素、行为和时间轴的综合运用
教学难点1.使用DW内置的行为；2.高级行为的应用；元素、行为和时间轴的综合运用
教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲
授,师生互动,提问式教学；任务驱动、引导教学、理论与
操作紧密结合;
教学课时4课时
第8章交互行为、图AP元素和时间轴的综合运用,以及
js
教学提示
问题：大家已经会在网页中的特殊效果如：弹出消息、检查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、礼花绽放等,这样的动态网页是如何制作的呢使用行为就可以实现;
8.1.1初步认识行为
1、DW行为的引出
2、行为的概念
3、与行为相关的三个重要部分：对象、事件和动作;
4、认识行为面板
8.1.2行为的创建、修改和更新
创建行为的三个步骤
修改行为
更新行为
8.1.3使用DW内置的行为
自带的行为主要有:
1.弹出消息 2、“播放声音”实例
3、跳转菜单和跳转菜单开始
4、打开浏览器窗口抛出问题,导入新课
举出几个典型的带有行为的网页显示行为的应用,进而引出行为的作用和相关概念25分钟
举例讲解行为的创建步
骤;10分钟
演示常用的DW 内置行为的操作步骤和要领,部分调整在机房讲解；。
Dreamweaver教案
Dreamweaver教案教案：Dreamweaver教学指南I. 简介A. 介绍Dreamweaver的定义和作用B. 引出使用Dreamweaver的好处和重要性II. Dreamweaver界面介绍A. 工作区域1. 代码视图2. 设计视图3. 分割视图B. 标签栏和菜单栏功能解析C. 文件管理器和属性检查器的使用方法III. 创建网页文件A. 新建网页文件的步骤B. 文件保存和命名规则C. 文件类型介绍（HTML、CSS、JavaScript等）IV. 网页设计与布局A. 网页尺寸和分辨率的选择B. 页面布局和网格系统1. 响应式设计2. 网格设置和对齐方式C. 添加图片和多媒体元素1. 图片格式和优化2. 视频和音频的嵌入V. 网页内容与链接A. 文本编辑和字体样式B. 超链接的创建和管理1. 内部链接2. 外部链接3. 锚点链接C. 表格的插入和编辑1. 表格属性和样式2. 表单的设计和构建VI. 网页交互与响应A. JavaScript基础知识1. 语法和变量2. 函数和事件B. 表单验证和数据处理C. 用户反馈和交互效果1. 轮播图和画廊设计2. 动画效果和弹出窗口VII. 网页发布与维护A. 网站目录结构B. 网站的测试和调试C. 文件上传和部署到服务器D. 网站的维护和更新策略VIII. 实例演练A. 根据实际案例进行网页设计和制作B. 老师讲解演示和学生跟随实操C. 学生个人或小组自行完成一个网页项目IX. 教学方法和评估方式A. 方法：理论与实践相结合，灵活授课B. 评估：参与度和个人作品展示X. 总结和展望A. 简要回顾所学内容B. 对学生的能力提升和未来发展的展望通过以上教学指南，学生将能全面了解Dreamweaver的使用方法，掌握网页设计与制作的基础知识，为以后的网页开发和设计工作打下坚实基础。
希望通过这门课程，学生们能够在网页制作领域有出色的表现，并将所学技能应用到实践中。
Dreamweaver MX 网页设计与制作教案DW (5)
6.F12查看生成网页
7.层和表格之间转换
电子教案
课程
DreamweaverＭＸ网页设计与制作
任课教师
课
题
图像映射、层的使用
班级
16电商
人数
19
课堂类型
实践
教学方法
多媒体与课堂讲授相结合，讲练结合。
授课时间
年月日星期第节教学周第周课时节
教学目的
【知识目标】
1.掌握图像映射的原理和使用
2.掌握热点的使用
3.使学生掌握层的使用
4.使学生掌握层和表格的相互Dreamweaver，新建一个网页，将图片插入到页面中。
3.【地图工具】单击鼠标左键点击图片，这时候软件下方的属性面板就会变成和图片相关的属性。
注：如果没有上图显示的热点地图工具，是地图工具属性隐藏了，可以点击属性面板右侧的三角符号打开。
4.绘制热点：注意方块、圆形、多边形三个小图标，它们就是我们要用的“图片热点”工具，不同的热点工具可以绘制出不同形状的热点区域。
“替换”就是鼠标悬浮在该区域时提示的文字。一般使用"_blank"，指超链接将在新窗口打开。
6.修改热点：对热点区域进行拖动或者局部调整，如果需要修改热点区域，或者需要进行微调。点击热点区域，热点区域四周会出现浅蓝色的点。光标放在浅蓝色的点，点击鼠标左键，即可调整热点区域的大小。
7.多个图片添加热点：
Dreamweaver MX 2004可以利用层来建立自己的结构，然后将它们转换为表格。
Dreamweaver网页设计制作电子教案2墨攻网页制作
据要求自主处理，发挥学生的创造力
肯定自己的成绩，正视自己的不足
肯定自己的成绩，正视自己的不足
教师归纳
本节课主要通过实际的例子让学生们掌握网页的制作流程，掌握dw的工作界面培养学生的自主学习的能力。
作业布置
1、dw的窗口是由哪几部分组成的？
2、插入水平线的方法？
3、如何修改水平线的颜色？
。
学生讨论网页风格，并进行总结
锻炼同学们的自主学习能力
通过学生自己操作查询，让学生养成自主学习的习惯
通过学生自己操作查询，让学生养成自主学习的习惯
教师展示最终的效果图，学生可以根据其特点自行设计
得分最低的小队要进行“奖励”或表演节目
以效果图导入提高学生兴趣
通过学生自己操作查询，让学生养成自主学习的习惯
（2）单击【代码】按钮，可以将编辑区域切换到【代码】视图，在其中可以编写或修改网页源代码。
（3）单击【拆分】按钮，可以将编辑区域切换到【拆分】视图，在该视图中整个编辑区域分为上下两个部分，上方为【代码】视图，下方为【设计】视图。
4、【属性】面板
如果没有显示【属性】面板，在主菜单中选择【窗口】／【属性】命令即可显示。
项目
分析
项目重点
Dw的概述和基本设置
项目难点
Dw的基本设置和墨攻网页的制作
项目要求
要求同学们能够熟练掌握Dw的概述和基本设置
任务内容
1、Dw的概述2、DwΒιβλιοθήκη 基本设置3、墨攻网页的制作
教学
方法
演示法、任务驱动法、启发式教学
课前准备
1、按8s标准，课前清扫、清洁、整理、整顿
2、教师清点人数、查鞋套、收手机
4、【插入】面板
设计DW教案
THANKS
布局和弹性图片等。学
（flexbox）和网格布局 会使用CSS来创建适应
（grid）。了解不同布 不同设备和屏幕尺寸的
局技术的优缺点及适用 页面布局和视觉效果。
场景，以便在实际项目
中选择合适的布局方案。
动画和过渡：了解CSS 动画和过渡的基本概念 和语法，如关键帧 （keyframes）、 transition和animation 属性等。学会使用这些 技术来为页面元素添加 动画效果和过渡效果， 提升用户体验。
在FTP客户端中查看文件上传状态， 确保所有文件均已成功上传至服
务器。
பைடு நூலகம்
网站维护更新策略分享
定期备份网站数据
为了防止数据丢失，应 定期备份网站数据，包 括数据库、文件和图片
等。
监控网站运行状态
通过网站监控工具实时 监控网站的运行状态， 及时发现并解决潜在问
题。
定期更新网站内容
为了保持网站的活力和 吸引力，应定期更新网 站内容，包括文字、图
调整单元格的宽度、高度、背景色、 边框样式等，实现表格的个性化设置。
布局模式选择与调整
流动布局
基于HTML的流动模型，通过DW 的流动布局工具进行页面元素的 布局调整，实现元素的自动排列 和对齐。
定位布局
利用CSS的定位属性，如relative、 absolute和fixed等，通过DW的 定位工具对页面元素进行精确定位。
05
04
03
02
01
测试网站运行状况
在服务器上解压并配置好网站文件 后，对网站进行全面测试，确保各 项功能正常运行。
网站文件打包和压缩
将制作好的网站文件进行打包和压 缩，以便后续上传至服务器。
dreamweaver网页设计教学计划(2024)
2024/1/29
4
网页设计基本概念
2024/1/29
01
网页设计是指使用各种网页制作工具和技术，将网页元素（ 如文字、图片、视频等）进行排版、美化和优化，以呈现出 良好的视觉效果和用户体验。
02
网页设计需要遵循一定的设计原则和规范，如页面布局、色 彩搭配、字体选择等，以保证网页的整体美感和易用性。
12
表格布局方法
2024/1/29
插入表格
在Dreamweaver中，可以通过插入表格的方式来布局页 面。选择合适的行数和列数，并设置表格的宽度、高度、 边框等属性。
嵌套表格
通过嵌套表格的方式，可以进一步细化页面的布局。在表 格中插入另一个表格，并设置其属性，可以实现更复杂的 布局效果。
表格属性设置
页面结构规划
确定页面主题和风格
在开始设计之前，需要明确页面的主题和风 格，以便后续的布局和排版工作能够围绕主 题展开。
2024/1/29
划分页面区域
根据页面主题和风格，将页面划分为不同的区域， 如页头、导航、主体内容、页脚等。
设计页面草图
在划分好页面区域后，可以设计页面草图， 用简单的图形和线条勾勒出页面的大致布局 和排版。
30
THANKS
感谢观看
2024/1/29
31
21
表单元素添加及验证方法
设置表单元素属性
根据需要设置表单元素的属性， 如名称、值、类型等。
添加验证规则
选择需要验证的表单元素，在行
为面板中添加验证规则，如检查 是否为空、检查格式是否正确等
。
自定义验证提示信息
根据需要自定义验证提示信息， 以便用户更好地理解验证结果。
添加表单元素
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1 2
•
⏹
⏹⏹⏹
⏹
➢
⏹◆
◆
⏹表格的插入、选择、删除、大小调整；
⏹单元格的选择、合并、拆分、大小调整；
⏹表格在"扩展表格〞模式和"标准〞模式下的应用
5.嵌套表格
⏹表格嵌套的作用
⏹创立嵌套表格的操作方法。
6.导入和导出表格数据、
7.表格布局网页的应用实例
8. 表格布局的缺点
4.3布局表格布局网页
1.绘制布局表格
绘制布局表格的考前须知：
2.绘制布局单元格
绘制布局单元格的考前须知：
3.设置布局表格和布局单元格的属性和参数
4.在布局单元格中添加容
5.课堂实例――用布局表格布局主页本操作。
重点讲解创立嵌套表格
的原因
翻开一个例如网页，让学生上讲台比照着制作出一样效果
讨论总结表格布局的缺点
重点演示并总结绘制布局表格和布局单元格的考前须知。
演示设置布局表格和单元格的属性；
在设置好属性的布局单元格中添加文章、图像和多媒体。
先和学生一起分析左侧网页的操作思路和主要步骤，然后让学生上台操作，以加深印象。
修改框架名称必须以字母开头，可以包含数字、下划线〔_〕；但不允许是javascript中的保存字〔如top或navigator〕、连字符〔-〕、句点、空格和；而且区分大小写。
2.创立预设的框架集并在*一框架中显示现有文档
创立和编辑框架
1.创立框架
2.删除框架
3.建立嵌套的框架集
4.保存框架和框架集
5.3设置框架及框架集的属性
1.选择框架：通过"框架〞面板来选择框架和子框架。
2.设置框架属性
⏹框架的背景颜色可以在页面属性中进展设置
⏹在框架的属性面板中进展设置框架的的名称、源文件、、边
距、滚动、边框和能否调整大小等。
3.设置框架集属性：边框、边框大小和边框颜色。
5.4设置框架集中的超级
在框架网页中建立超
框架网页中设置超级的目标翻开方式
1.相对目标：_blank 、_top 、_parent、_self
2.绝对目标：mainframe、Leftframe、Rightframe、Topframe。
5.6课堂实例――制作一个框架网页举例演示框架的创立和保存操作
翻开框架面板，查看并总结框架和框架集的属性设置及其含义
演示框架中的超级效果
举例演示框架网页的设计与制作
教学课时4课时
第8章交互〔行为、图AP元素和时间轴的综合运用，以
及js〕
教学提示
问题：大家已经会在网页中的特殊效果如：弹出消息、检查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、礼花绽放等，这样的动态网页是如何制作的呢？使用行为就可以实现。
8.1.1初步认识行为
1、DW行为的引出
2、行为的概念
3、与行为相关的三个重要局部：对象、事件和动作。
4、认识行为面板
8.1.2行为的创立、修改和更新
创立行为的三个步骤
修改行为
更新行为
8.1.3使用DW置的行为
dw8.0自带的行为主要有:
1.弹出消息 2、"播放声音〞实例
3、跳转菜单和跳转菜单开场
4、翻开浏览器窗口
5、交换图象与恢复交换图象
6、控制shockshave或flash
7、设置导航栏图像
8、设置文本
9、显示弹出菜单〔下拉菜单〕 10、显示和隐藏AP元素
11、拖动AP元素12、滚动的AP元素
8.1.4高级行为的应用
1、插入滚动字幕
例如：文本自动向上循环滚动，鼠标放到上面还会暂停
2、下载安装扩展插件
3、下载网页特效，适当修改相关代码，再把代码放到代码视图的具体位置。
举例：花瓣、棉花糖。
8.2AP元素、行为和时间轴的综合运用抛出问题，导入新课
举出几个典型的带有行为的网页显示行为的应用，进而引出行为的作用和相关概念〔25分钟〕
举例讲解行为的创立步骤。
〔10分钟〕
演示常用的DW 置行为的操作步骤和要领，局部调整在机房讲解；〔30分钟〕
本局部为选讲容。
举例讲解高级行为的应用；重点讲解4种扩展插件的安装和应用效果。
〔30分钟〕举典型实例演
教学方法任务驱动、引导教学，学生自学为主，教师讲授为辅，简
单演示
教学课时1课时
第13章综合实例——制作"宝贝爱〞教学提示
13.1 规划
13.1.1 命名
一般情况下，公司直接以公司名作为名即可，个人可依自己爱好命名。
名应该能反映出的性质。
本章要制作的是一个专营婴幼用品的公司，名为公司名"宝贝爱〞。
13.1.2 划分栏目并确定构造
如果想要使建站的过程更顺利，就必须事先规划好的栏目和构造，这样在后面的制作中才能做到有章可循。
经过对容的分析，将该划分为以下6个栏目：首页、公司简介、我们的产品、我们的效劳、我们的动向和联系我们。
13.1.3 确定风格
一般情况下，要根据公司的性质或标志来确定风格。
本章要制作一个专营婴幼用品的公司，所以选用了代表沉静、理智、老实的蓝色和代表生命、活力、青春的绿色作为主色调；又以浅灰色作为点缀，不仅突出了重点，又能产生强烈的视觉效果。
整个看起来特色鲜明，生机勃勃。
13.1.4 设置本地站点目录并定义站点以"宝贝爱〞为例，演示整个的制作过程。
在编辑网页之前，首先要定义一个站点。
站点的定义我们在前面已讲了不止一次，这里只简单地介绍一下定义过程。
收集和整理素材
网页设计素材的收集是相当重要的。
通常情况下，素材的来源主要有下面几种。
●客户提供的素材：主要是与产品或企业相关的图像和文字，
比方产品外观图像等，本例中主要指"我们的产品〞中用到
的图片。
●网上收集的素材：主要是一些辅助性的图像，这些图像的装
饰性较强，比方背景图像等。
●单独创作的素材：主要是整个页面中视觉面积最大、最有说
服力的图像，比方广告图像、标题图片等。
13.2 制作
13.2.1制作库工程：考虑把信息制作成库工程
13.2.2制作网页模板
1．新建模板文档
2．设置模板容
3．创立可编辑区域
4．在模板中定义CSS样式表
制作首页
在制作好网页模版后，下面在其根底上制作的首页。
13.2.4 制作一级子页
一级子页主要包括我们的产品、我们的效劳和我们的动向的下级页面，这里以我们的产品的下级页面为例，来讲解一级子页的制作方法。
13.2.5 制作二级子页
13.2.6 设置超
超是的灵魂，有了超，才能在中的各个页面之间来回跳转。
接下来为各个页面添加超。
1．为模版设置
2．为首页设置最后用15分钟时间总结创立的详细步骤
作业：创立dw精品课程
小结：本章详细演示了创立的详细过程和步骤，从学生的反响情况看，学生对知识的掌握较结实。