19506-Dreamweaver CS5网页制作-电子教案- 模块3

添加多媒体插件
选择【插入】/【媒体】/【插件】菜单命令，打开“选择文件”对 话框，在其中选择需要插入的多媒体，然后在“属性”面板中进行设置。
添加背景音乐
选择【插入】/【标签】菜单命令，打开“标签选择器”对话框， 在其中进行设置。
插入SWF动画
选择【插入】/【媒体】/【SWF】菜单命令，在打开的对话框中 选择SWF动画，再在“属性”面板中设置播放属性。
实训——制作“旅游导航”网页Fra bibliotek作思路习题
（1）打开“zhuye-me.html”网页，将提供的“01.jpg”、“02.jpg” 和“03.jpg”图像插入到网页中，设置边框为“1”。 （2）在“我的动态”图像下插入“04.jpg”图像，设置对齐方式为 “左对齐”，缩小图像尺寸，增加水平边距，然后适当降低图像品质。 （3）分别在“最新留言”图像和“动感相册”图像下插入多媒体 插件和SWF动画，其中插件的尺寸为“538×45”。
美化与优化图像
设置图像效果
选择网页中的图像，单击“属性”面板中的“编辑图像设置” 按钮 ，在打开的对话框中进行设置。
创建鼠标经过图像
将插入点定位到网页最后，选择【插入】/【图像对象】/【鼠 标经过对象】菜单命令，在打开的对话框中进行设置。
制作“新品展台”网页
相关知识点讲解
添加多媒体插件 添加背景音乐 插入SWF动画 插入FLV视频
插入与编辑图像
调整图像对齐方式
基线：将文本基准线对齐图像底端。 顶端：将图像顶端与当前行中最高项（图像或文本）的顶端对齐。 居中：将文本基准线对齐图像中部。 底部：将文本基准线对齐图像底端。 文本上方：将文本行中最高字符和图像的上端对齐。 绝对居中：将文本的中线和图像的中部对齐。 绝对底部：将图像底部和文本的底部对齐（包括字母下部，如字母G）。 左对齐：将图像放置在文本左侧。 右对齐：将图像放置在文本右侧。

3.1 表格的建立和编辑
3.1.4 实战演练：网站“行星大观”页眉导航部分制作
操作步骤： 6）光标移到第2行第1个单元格，在属性面板中设单元格的“宽”为270，“高”为24。鼠标 选中该行其它所有单元格，在属性面板中设单元格设为“宽”为100，水平、垂直方向均为 居中对齐。输入对应文字，如图所示。
（3）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元 格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行 或列的图标出现时，单击鼠标即可选择行或列。
3.1 表格的建立和编辑
3. 设定表格和单元格属性 （1）表格属性
当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板 修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、 宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。
3.1 表格的建立和编辑
2. 选取表格元素 （1）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表
格。或光标放在表格中时，点击菜单“修改”→“表格”→“选择表格”命令。也可以 将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取 整个表格。
（2）选取单元格 将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击， 就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元格，就可以选中不连 续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则 这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标 拖拽的方法可以选取连续的一片单元格。
3.1 表格的建立和编辑
3.1.1 案例制作：2006世界杯E组对阵表

教学过程
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
<
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
作业布置
作业：一～四
主 要
参考资料
《网页设计与制作——Dreamweaver cs6》，王君学、田明编著，人民邮电出版社
￥
备注
]
第38--41课时讲授2学时 实践2学时
章 节
项目十一库和模板──制作馨华学校主页
讲授主
：
要内容
1.库和模板的概念
2.【资源】面板的使用
3.创建和应用库的方法
4.创建和应用模板的方法
5.在模板中插入模板对象的方法
重 点
难 点
！
创建和应用库的方法
创建和应用模板的方法
在模板中插入模板对象的方法
要求掌握
的知识点
库的概念、【资源】面板、创建库项目、删除库项目、模板的概念、创建模板文件、删除模板文件、插入库项目、修改库项目、分离库项目、可编辑区域、重复表格、重复区域、从模板新建网页、在已存在页面应用模板、分离模板
~
第11-16课时讲授2学时 实践4学时
章 节
项目三文本──编排奥斯卡网页
讲授主
】
要内容
1.设置页面属性的方法
2.设置文本字体、大小和颜色的方法
3.设置段落、换行和列表的方法
4.设置文本样式和对齐方式的方法
5.设置文本缩进和凸出的方法
6.插入水平线和日期的方法
重 点
…
难 点
设置文本字体、大小和颜色的方法
教学过程
：
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。

5.2 Dreamweaver CS5站点管理
5.2.3 站点的发布（Windows 7旗舰版平台 ）
1. 安装Internet信息服务
单击“开始”菜单 “控制面板”命令，在窗体中选择“卸载程 2. Web服务器设置 序”，再单击窗体左侧“打开或关闭Windows功能”。 在弹出的“Windows 功能”对话框中，若“Internet信息服务”复 单击“开始”菜单 |“控制面板”命令，在窗体中选择“系统和安 3. IE浏览 选框已勾选，说明本机已安装该组件，否则选中此复选框，单击 全”，再单击窗体右侧“管理工具”，然后启动“ Internet信息服务 启动本机（ Web服务器）IE浏览器，在地址栏输入本机IP地址或 “确定”按钮，等待安装完成。 (IIS) 管理器”应用程序 localhost，进入网站的首页“index.html”
微视频5-2 演示
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
滚动字幕是用来显示滚动文本的，如网站的最新通知等。字幕 可以水平滚动，也可以上下滚动。 在Dreamweaver CS5中利用<marquee>标签插入字幕 。
选中要做字幕的 文本 ，单击菜单 栏“插入”|“标 签”命令，打开 “标签选择器” 对话框
• 网站与网页的创建与管理
• 网页制作的基本操作
• CSS样式表的创建与使用 • 网页的各种布局方式 • 行为的应用
5.1 Dreamweaver CS5概述
5.1.1 Dreamweaver的发展
Dreamweaver 1.0 Dreamweaver CS3
Dreamweaver 2.0
Dreamweaver 2.01 Dreamweaver 3 Macromedia Dreamweaver 4 时代 Dreamweaver 5 Dreamweaver MX Dreamweaver MX 2004 Dreamweaver 8.0 Adobe 时代