在APdiv中创建以后嵌套 多层嵌套是什么意思思
点击联系发帖人
时间：2016-12-08 00:55
豆丁微信公众号
君，已阅读到文档的结尾了呢~~
DW-APDiv的基本操作
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
DW-APDiv的基本操作
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='http://www.docin.com/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口问题：  æ
[填空题] 可以按住（）键，在【AP元素】面板中将某一个APDiv拖曳到另一个AP Div上面，形成嵌套AP Div。
汽缸什么部位容易产生热疲劳裂纹？其特点是什么？
斜管沉淀池的理论根据是什么？为什么斜管倾角通常采用60°？
何谓水电站保证出力？
什么叫水电站汛末蓄水位？
混合与返混合在概念上有何区别？返混合是如何造成的？
可以按住（）键，在【AP元素】面板中将某一个APDiv拖曳到另一个AP Div上面，形成嵌套AP Div。
参考答案：Ctrl
●&&参考解析
支付宝红包Dreamweaver 教学思路 教案_学霸学习网
Dreamweaver 教学思路 教案
重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智重庆电讯职业学院教 案 学年第 1 学期系部计算机与传媒系艺术设计教 研 室 ( 实 验室 ) 课 授 主 职 总课时 程 课 讲 名 班 教 称 级 师 称Dreamweaver12 级计算机多媒体平面 1 班 徐顺智 讲师64重庆电讯职业学院教务处制1 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智教 学 进 度 计 划 表周 周 节 教 学 内 容 备 注1、第 1 章 Dreamweaver8 简述和操作界面 2、第 2 章规划站点 3、第 3 章创建文档 1、第 4 章编辑文本 2、第 5 章图像的应用 1、第 6 章使用 CSS 样式 2、第 7 章网络多媒体应用 1、 第 8 章使用链接 2、第 9 章使用表格 1、 第 10 章使用表格的“布局模式” 2、 第 11 章层的使用 1、 第 12 章创建交互式菜单 2、 第 13 章使用行为 1、 第 14 章使用框架和框架集 2、 第 15 章使用模板和库 1、 第 16 章站点管理 2、 第 17 章综合实例（课程设计）2 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智前课程名称言课程编码Dreamweaver类别 任课教师 授课对象 授课方式 执笔人 参考资料总计：64 学时 讲课：40 学时 必修课（√） 选修课（ ） 理论课（ ） 实践课（ ） 实训：24 学时 计算机与传媒系-----徐顺智 12 级计算机多媒体平面 1 班 课堂提问、课堂训练、作业讲评、辅导答疑及课堂模拟等实践环节。 徐顺智 《网站规划与网页设计》谢成开，孙丹丽编著，西南师范大学出版社 《网页设计与配色经典案例解析》旭日东升主编，星辰副主编，电子工业出版 社。 目的：建立站点，添加页面元素，使用 CSS 样式和交互行为 职称 讲师教学 目的 要求要求：该教程使用 Dreamweaver CS5 作为开发工具，结合老师的网站开发经验， 为大家讲解网页制作的每个环节。希望通过本套课程的学 习，大家能灵活运用 Dreaweaver 完成网站的开发。Adobe 公司发布了 Dremweaver CS5，作为网页制作最便捷的开发工具，它 拥有操作便捷高效，可视化开发界面，丰富的站点管理功能等优点。在保持原 有特点的同时，最新版本的推出为我们带来不少惊喜，更简洁、人性化的用户 界面；对 CSS 更丰富的设置；实时视图导航；PHP 代码提示等。教学概况概述：Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即 所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的 视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览 器限制的充满动感的网页。 dw是设计网站的所见即所得工具，非常的方便，是适合设计人员，非常容 易上手。打个比喻，.一个完整的网站可以看成是一份作业， dw是你的笔，代 码是你的作业 空间和域名相当于作业本。dw是一个方便你编写代码的工具。 dw只是编写代码的工具 你需要知道怎么用，也就是看你的作业题（和解析作 业题。同时还需要一个能解析题的工具，fw将作业题解析（切片） 。作为一只 笔，你只需要知道怎么用它就可以。3 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智教学内容 与手段本科程的具体内容包括： 1 网页设计基础 2 制作网页的基本操作 3 建立网页链接 4 了解HTML 5 表格处理 6 框架结构 7 插入多媒体元素 8 AP DIV元素 9 行为特效 10 应用CSS样式 11 DIV层布局与Spry构建 12 网站发布 授课的基本手段为：多媒体教学演示及实践环节。 对学生的建议： 1．掌握网页设计整体的策略性思考方法； 2．学会网页设计中“网页三剑客”软件； 3．在学习过程中，配合课堂学习，注意观察和研究生活中的实际网页设计案 例； 4．选择必要的参考资料，配合本课程的学习，能制作出静态网站。4 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第一章网页设计基础目的、要求: 通过本章的学习，了解网页基础及制作流程，有目的、有重点地培养艺术设计复合型人才打下良好的 基础。 知识要点： 网站的概述――网页设计基础与制作流程 网页的组成元素 Adobe Dreamweaver CS5 简介，安装，应用界面 网页文件的基本属性 设置网页外观属性 如何创建站点设置默认图像文件夹 重点： 网页的组成元素 难点： 如何创建站点 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：5 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第一课：网页设计基础 导入：在网络高速发展的今天，网站已经成为一个自我展示和宣传的平台，一个网站是 由多个相关联的网页构成的。 一般网页上都会有文本和图像信息， 复杂一些的网页上还会有 声音、视频、动画、多媒体。要制作出精美的网页，不仅需要能够熟练的使用软件，还需要 掌握一些网页制作的相关知识。 现在我们常用的浏览器有 IE,火狐，欧朋，谷歌，搜狗，360，遨游，百度浏览器，hao123 浏览器，腾讯 TT。这些国产的浏览器大部分是以 IE 为内核的。因为浏览器的内核不同，所 以同样的代码在浏览器上的显示可能不一样。如果制作页面的话，我建议用火狐或者 IE。 一 、网站的概述 1、 网页与网站 浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了 一个网站。 举例：www.sohu.com (搜狐网) www.baidu.com(百度网) www.youku.com(优酷网)等等。 2、 浏览网页的工具-浏览器 浏览器：用于打开显示网页的软件。最常见的是 Windows 系统自带的 IE 浏览器。 还有火狐 Firefox、360 安全浏览器、遨游、腾讯 TT 等等。 1） 网址：用于定位某个网站某个页面的一串字符，通常是这种格式 http://sports.sohu.com/nba.shtml 2） 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。 3、 认识网页的组成元素网页标题导航栏 LOGO 图片视频表单文 本超级链接二、初识 Dreamweaver Dreamweaver CS5 是一款由 Adobe 公司大力开发的专业 HTML 编辑器，用于对 WEB 站点，WEB 页面和 WEB 应用程序进行设计、编码和开发。利用 Dreamweaver 中的可视化 编辑功能，用户可以快速创建页面而无须编写任何代码。 1、制作网站的流程 规划网站类型及主题 ? 搜集资料素材 ? 使用软件进行网页制作 ? 测试及发布6 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2、认识 Dreamweaver 是当前最流行、最方便的网页设计和网站开发工具软件。 Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。 Dream：梦想 weaver：织布者，织工 早期是 Macromedia 公司推出的“网页三剑客”之一。 “网页三剑客”指的是 Dreamweaver、 Flash、Fireworks 这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为 了网站开发中的专用利器。 它集网页制作和管理网站于一身的所见即所得网页编辑器， 它是 第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年 Macromedia 公司被 Adobe 公司收购，DM CS5 是最新推出的版本。 【操作演示】启动 Dreamweaver 实例：制作一个简单页面(两种方法对照)7 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智三、Dreamweaver 的用户界面菜单栏 文档工具栏插入面板文档编辑窗口浮动面板状态栏属性面板提高：工作窗口的设置、保存、恢复 【操作演示】关闭 Dreamweaver8 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智四、网页文件的基本操作 基本网页的文件类型为 HTML 文档，保存的文件扩展名为 “.html” 1. 创建网页文档（HTML 文档） ? 文件→新建→新建文档→常规→类别→基本页 2. 保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存） ? 文件→保存（或 Ctrl+S) ? 文件→另存为 ? 文件→保存全部 注意：1、网页文件要用英文或数字进行命名，莫用中文。 2、基本网页的扩展名为.html 3. 打开已建的 HTML 文档 ? 文件→打开 ? 右击文件，选择 Dreamweaver 打开。 ? 拖动到 Dreamweaver 4. 关闭文件 ? 文件→关闭 还未保存的网页（*） ，关闭时会提示你是否保存。 其他操作： 1）多个编辑文件的切换选择 2）预览编辑中的网页 (快捷键 F12) 五、设置网页外观属性 网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。 六、创建站点 1、什么是站点 Dreamweaver 的站点是一种管理网站中所有相关联文件的工具。 通过站点可以对网站的 相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器， 测试网站。 站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过 这个文件夹（站点） ，对我们的网站进行管理，有次序，一目了然。 2、创建站点 《我的足球网》 站点根目录为 D：//jcwww 七、设置默认图像文件夹 八、管理站点 1、在“文件”面板中实现以下操作 ? 选择编辑网页文件 ? 创建文件或文件夹 ? 剪切、粘贴、复制、删除、重命名文件或文件夹 2、站点管理 ? 编辑站点 ? 复制站点 ? 删除站点9 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智实际操作设置站点： 1 执行“站点》新建站点”命令，弹出“站点设置对象”对话框，在该对话框中的“站 点名称”文本框中输入站点的名称，单击“本地站点文件夹”文本框后面的“浏览”按钮， 弹出“选择根文件夹”对话框，可以浏览到本地站点的位置。2，单击“选择”按钮，确定本地站点根文件的位置，打开“站点设置对象”对话框。 单击“保存”按钮，即可完成本地站点的创建。执行“窗口》文件”命令，打开“文件”面 板，在“文件”面板中显示出刚创建的本地站点。在大多数情况下，都是在本地站点中编辑网页，再通过 FTP 上传到远程服务器。还可 以执行“站点》管理站点”命令，在弹出的“管理站点”对话框中单击“新建站点”按钮， 同样可以弹出“站点设置对象”对话框。10 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智设置服务器 1)如果用户需要使用 Dreamweaver 连接远程服务器， 将站点中的文件通过 Dreamweaver 上传到远程服务器，则在创建站点时需要设置“服务器”选项卡中的相关选项，否则不需要 设置“服务器”选项卡上的相关选项。在“站点设置对象”对话框中单击“服务器”选项， 可以切换到“服务器”选项卡，在该选项卡中可以指定远程服务器和测试服务器。2) 单 击 “ 添 加 新 服 务 器 ” 按 钮 ， 可 以 弹 出 “ 服 务 器 设 置 ” 对 话 框3)服务器的基本选项 1，在“服务器设置”窗口中分为“基本”和“高级”两个选项卡，在“基本”选项卡中可 以对服务器的相关基本选项进行设置。 2，服务器名称：在该文本框中可以指定服务器的名称，该名称可以是用户任意定义的名称。 3，连接方法：再该选项的下拉列表中可以选择连接到远程服务器的方法，在 Dreamweaver 中提供了七种连接远程服务器的方法。11 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智FTP：该选项为默认的远程服务器的连接方法，大多数情况下都是通过 FTP 来连接到远程服 务器的，FTP 也是目前最常用的链接远程服务器的方法。 其他比较复杂，有心情的可以自己研究，也不好解释，自己动手，丰衣足食啊。 4，FTP 地址：在该文本框种输入要将站点文件上传到其中的 FTP 服务器的地址。FTP 服务 器的地址是计算机系统中完整的 Interner 名称。注意，在这里需要输入完整的 FTP 地址，并 且不要输入任何多余的文本，特别是不要在地址前面加上协议名称。 5，端口：端口 21 是接收 FTP 链接的默认端口，可以通过编辑右侧的文本框更改默认的端 口号。 6，用户名和密码：分别在“用户名和密码”文本框中输入用于连接到 FTP 服务器的用户名 和密码，选中“保存”复选框，可以保存所舒服的 FTP 用户名和密码。 7，测试按钮：完成 FTP 地址、用户名和密码的选项的设置后，可以通过单机“测试”按钮， 测试与 FTP 误区七的链接。 8，在该选项的文本框中输入远程服务器上用于存储站点文件的目录。在有些服务器上，根 目录就是首次使用 FTP 连接到的目录。用户也可以连接到远程服务器，如果在“文件”面 板中的“远程文件”驶入中出现 public_html、www 或用户名这样带名称的文件夹，他可能 就是 FTP 的根目录。 在站点中新建文件夹文件 1，默认情况下， “文件”面板位于 DREAMWEAVER 工作区的右下方，打开文件面板， 在文件面板中的站点根目录中单击鼠标右键， 在弹出的快捷菜单中选择 “新建文件夹” 选项。2，在站点中新建一个文件夹，默认新建的文件夹名称为 untitled,直接为新建的文件夹重命 名为“我的第一个文件夹” 。 3，建立文件的方式与建立文件夹的方式相同。 4，在文件面板中只可以新建默认格式的 HTML 页面，而通过新建文档对话框可以新建多种 格式的文件，并且还可以新建具有布局实力的页面和多种与网页相关文件。12 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第二章目的、要求: 能基本操作本软件网页设计基本操作知识要点： 网页中添加文本――普通文本，空格，日期时间，水平线，特殊字符 编辑文本――world 文本，格式，分段与换行，段落格式，使用 HTML 段落样式 在网页中添加图片――ＧＩＦ，ＪＰＥＧ，ＰＮＧ；获取网页图像；设置图像基本属性 图文混排 编辑图像 鼠标经过更换图片特效 重点： 图文混排 编辑图像 难点： 鼠标经过更换图片特效 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：13 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第二课：制作网页的基本操作 一 、在网页中添加文本 1） 添加普通文本 方法： A、直接输入 （1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入 文字的起始位置。 （2）选择适当的输入法输入文字 B、复制和粘贴 C、从其他文件导入ｗｏｒｌｄ文档 2） 添加空格 输入法切换到半角状态， 按空格键只能输入一个空格。 如果需要输入多个连续的空格可以通 过以下几种方法来实现： （1）菜单“插入记录”-&HTML-&特殊字符-&不换行空格 （2）直接按“Ctrl+Shift+Space”组合键：添加空格 （3）设置软件首选参数-允许连续空格 3）添加日期时间 在文档的最后一行插入形式如“Friday,
9:47 AM”所示的日期，且要求每次保存 网页时自动更新日期。具体操作过程如下： （1）切换到“常用”插入工具栏。 （2）按 Enter 键，添加一空行，将光标放置在空行与正文对齐的最左端。 （3）单击菜单【插入】→【日期】 ，或者单击“常用”插入栏的【日期】按钮，将弹出 “插入日期”对话框。 （4）在“插入日期”对话框中， “星期格式”下拉表框中选取“Thursday,” ， “日期格式” 选取“” ，在“时间格式”下拉列表框选取“10:18PM”，选中“储存时自动更新”复 选框，然后单击【确定】按钮，最后生成的日期效果为“Friday, 9:47 AM”的形式。 （5）保存插入的日期，且浏览网页。 4 ) 插入水平线 （1）将“插入”工具栏切换到“HTML”类型。 （2）将光标放置到标题最后一个字符的右边。 （3）单击 HTML 插入工具栏的“水平线”按钮，即可向网页中标题与正文之间插入一条水 平线。 5）添加特殊字符 （1）通过菜单【插入】→【HTML】→【特殊字符】插入 先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】→【HTML】→【特 殊字符】 ，在【特殊字符】的级联菜单中选择需要插入的特殊字符。14 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智（2）通过“文本”插入工具栏插入 先在 Dreamweaver cs5 的“插入”工具栏中选择“文本” ，显示“文本”插入工具栏。 将光标放置到需要插入特殊字符的位置，然后单击工具栏中的“文本” ，单击所需插入 的特殊字符即可插入到网页中。 二、编辑文本 1）网页中输入的文本可以像 Word 文档一样，进行编辑。 1. 拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。 2. 按 BackSpace 键或 Delete 键实现删除文本操作。 3. 实现复制、剪切、粘贴等操作。 4. 实现查找与替换操作。 5. 实现撤消或重做操作。2）设置文本格式 字体(通用性问题)、大小、颜色、风格 注： CSS （ Cascading Style Sheet ，可译为 “层叠样式表 ” 或 “级联样式表 ” ）是一组格式设 置规则，用于控制 Web 页面的外观。 3）分段与换行 分段按 Enter 回车键（隔一行） 、换行按 Shift+Enter（不分段） 4）设置段落格式 a.对齐方式 b.列表编号 列表可以将文本段落用符号或序号标注起来，有两种类型：项目列表和编号列表。 设置项目列表的操作过程如下: （1）选择要添加列表的若干文本段落 （2）单击属性检查器中的“项目列表”按钮或“编号列表”按钮 c.缩进 5) 使用 Html 段落样式三、在网页中添加图片 1）网页中常用的图片格式 使用图片的原则： 在保证画质的前提下尽可能使图片的数据量小一些， 这样有利用户快速的 浏览我们的网页。 .GIF 格式 特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持 256 种颜色。15 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智用途： 大量用于网站的图标 Logo、 广告条 Banner 及网页背景图像。 但由于受到颜色的显示， 不适合用于照片级的网页图像。 .JPEG 格式 特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。 用途：通常用于显示照片等颜色丰富的精美图像。 .PNG 格式 特点： 是一种逐步流行的网络图像格式。 既融合了 GIF 能做成透明背景的特点， 又具有 JPEG 处理精美图像的优点。 用途：常用于制作网页效果图。 2）如何获取网页图像 网上下载（我要素材网 www.51scw.net） 、购买素材光盘、使用图像制作软件创作 3）插入图像 插入→图像 插入面板→常用→图像 直接将图像文件拖入编辑区 注意： ? 在插入图像前应先将网页文件已保存，从而使所插图像引用正确。 ? 图像插入网页后，应确定图像文件已存入站点，否则在下次打开网 页时，会出现看不到图像的情况。 技巧：图像的位置、替换文字4）设置图像的基本属性 图像→设置的名称 宽、高→可缩小和放大图片的显示尺寸。 源文件→图片的路径和名称。 替代→图像的说明文字 边框→图片是否要加边框四、图文混排 垂直边距和水平边距→图片四周突出的尺寸 对齐→在一行中图形和文本的对齐方式五、编辑图像 裁切 锐化 对比度/亮度 重新采样：当图片的宽、高缩小后，重新生成更小的图片。 优化（为图片瘦身）16 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智六、鼠标经过更换图片特效 1）概念：是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一 张图像。 2）步骤： a 将光标放到要插入图像的地方。 b 单击菜单“插入记录”----&“图像对象”--?“鼠标经过图像” ，打开“插入鼠标 经过图像对话框” 。c 设置完成，单击确定。17 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第三章目的、要求: 知识要点： 了解超链接 创建超链接 图像热区链接 创建图像导航条 脚本链接 超链接的管理创建超级链接重点： 图像热区链接 创建图像导航条 难点：到网页某一特定位置的超链接DD锚点链接教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：18 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第三章、创建超级链接 一、了解超链接 1）什么是超链接 所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以 是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个 应用程序。 二、创建超链接 1) 到网站内页面的超链接DD内部链接（网站内部页面之间创建相互链接关系） 步骤 1 选中页面中的文字或图像， 在属性面板中单击“链接”文本框右侧的文件夹图标， 以通过浏览选择一个文件 步骤 2 从“目标”下拉菜单中，选择文档的打开位置。 _self：会在当前网页所在的窗口或框架中打开（默认方式） 。 _blank :每个链接会创建一下新的窗口。 _new：会在同一个刚创建的窗口中打开。 _parent：如果是嵌套的框架，则在父框架中打开。 _top：会在完整的浏览器窗口中打开。2) 到网站外页面的超链接DD外部链接 步骤 1 选中文字或图像之后， 直接在属性面板的“链接”文本框中输入外部的链 接地址，如 http://www.51zxw.net 步骤 2 然后在“目标”下拉菜单中设置这个链接的目标窗口。 内部链接 这种链接的目标点是同个网站中的其他网页（文档） ，称为内部链接 外部链接 这种链接的目标点是不同站点或本站点以外的网页（文档） ，称为外部链接。 注意：链接中使用完整的 URL 地址 网络协议） www.51zxw.net（域名） 如：http://www.51zxw.net http:// （是浏览网页3) 链接样式 链接颜色：指定应用于链接文字的颜色 已访问链接：指定链接被访问过的颜色 变换图像链接：指定当鼠标位于链接上时的颜色。 活动链接：指定但鼠标在链接上点击时的颜色。4) 到网页某一特定位置的超链接DD锚点链接 ? 锚点链接 这种链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到 当前网页中的某一指定位置上，也可以跳转到其他网页中的某一指定位置上。 步骤 1 创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。 步骤 2 属性面板的链接栏中直接输入 “# 锚点名” 注意： 1） 如果链接的目标锚点标记在当前页面即输入 # 锚点名； 2） 如果链接的目标锚点标记在其他网页，即要输入目标网页的地址和名称， 然后再输入“# 锚点名”19 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智5) 其他一些链接。 A. 创建 E-mail 电子邮件链接 Email 链接 单击这种链接，可以启动电子邮件程序（例如：Offiece 办公软件中的 Outlook）书写邮件，并发送到指定的地址。 步骤 1 选中文本和图像 步骤 2 插入栏｜常用｜电子邮件链接｜输入邮件地址 或在属性面板的链接栏中直接输入 “mailto:邮件地址”B. 创建下载链接：当被链接的文件是 exe 文件或 zip、rar 类型的文件时，浏览器无法 直接打开，便会提示文件会被下载，这就是网上下载的方法。C. 创建空链接：空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以 为之添加行为。 ? 方法：选中要制作空链接的对象，在链接文本框中直接输入＃。 ? 在一般站点首页的导航栏中的首页链接，就可以是一个空链接三、图像热区链接 图像热区指在一幅图片上创建多个区域（热点） ，并可可以点击触发。当用户单击某个 热点时，会发生某种链接或行为。 步骤： 1. 选中图像 2. 在图像属性面板中，使用热区工具（矩形、椭圆、多边形） ，在图像上划分热区。 3. 为绘制的每一个热区设置不同的链接地址和替代文字。四、创建图像导航条 使用鼠标经过变换图像的特效，创建图像导航条五、创建跳转菜单 跳转菜单是网页中的弹出式菜单，可以创建任何文件类型的链接。 步骤： 1、插入栏｜表单｜跳转菜单 2、在“插入跳转菜单”对话框中，单击＋号添加菜单项 3、在“选择时。转到 URL”文本框中，输入该文件的路径。20 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智六、脚本链接 通过连接触发脚本命令 1. 添加到收藏夹： javascript:window.external.addFavorite('http://www.51zq.net','我的足球网') 2. 表示关闭窗口：javascript:window.close() 3. 表示弹出一个提示对话框：javascript:alert(?hello！?) 4. 设置为默认主页： （需通过空链接#触发 onClick 事件） onClick=&this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.51zq.com/') ;&七、超链接的管理 1、链接路径 对链接路径的正确理解是确保链接有效的先决条件。链接的路径有 3 种表达方式 1）绝对路径：如果在链接中使用完整的 URL（统一资源定位符）地址，这种链接路径 就称作绝对路径。 一般用于链接外部网站或外部文件资源时，例如：http://www.51zxw.net/list.aspx?cid=321 2）相对于文档路径：表述源端点与链接目标端点之间的相互位置。一般我们默认使用这 种方式链接同站点的不同文件。用“. . / ”上一层的文件夹 3）相对于站点根目录路径: 所有链接的路径都是从站点的根目录开始的。 “ / ”表示根 目录。 2、自动更新链接 当文件的位置被改动时，自动的更新该网页中的链接路径，同时也自动更新其他网页链 接到这个网页的路径。 3、检查链接21 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第四章 ＨＴＭＬ超文本标记目的、要求: 知识要点： ＨＴＭＬ定义 ＨＴＭＬ文件结构 常见ＨＴＭＬ标记 认识文件头信息 重点： ＨＴＭＬ文件结构 常见ＨＴＭＬ标记 难点：认识文件头信息 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：22 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第四章、了解 HTML 超文本标记 1、什么是 HTML？超文本标记语言，用于编写网页。HTML 是一切网页实现的基础，在网络中浏览的网页都是一个个由 HTML 标记构成的文件。 一个 HTML 文件包含了很多 HTML 标记，用来告诉浏览器应该如何显示文本、图像以及网 页的背景等等 2、HTML 文件结构&html& &head& &title&暑假结束了 &/title& &/head& &body& 开学了，第一天上课有点累呀！ ！以前我可是睡到中午才起床的！ &/body& &/html&HTML 的文件结构相当简单，其主体结构主要由以下。 &html& &head& 文件头信息 &/head& &body& 在浏览器中显示的 HTML 文件的正文 &/body& &/html& HTML 文档通常分为文件头和正文两部分。文件头用以纪录与网页相关的重要信息， 例如标题、关键字等等，通常文件头部分不会在浏览器中显示，而正文部分，则是网页的主 体内容，将在浏览器中显示。 3、常见 HTML 标记 &p& &/p& 段落标记 &br& 回车换行标记 &title& &/title& 网页标题标记 &hr & 水平线 &img& 图像标记 &a& &/a& 超链接标记23 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智4、小结 1) 2) 3) 4)任何 HTML 标记都是由”&“和”&”号所括住，标记名不区分大小写，但建议用小写。 多数标记是成对出现。 少数标记单独出现。如&br&、&hr&等。 部分标记可以拥有属性。如颜色、大小等等 &body bgcolor=“blue”&5、认识文件头信息 设置头部信息&head&&/head& 网页头部信息的内容作为网页的一些辅助信息。并不会直接在网页中显示。 1) 2) 3) 插入“刷新”，可以定时的刷新网页。 插入“关键字” ，有利于搜索引擎收集你的页面，关键字作为搜索的依据 插入“说明” 对网页进行说明描述，同样会得到搜索引擎的收集。24 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第五章 处理表格目的、要求: 知识要点： 表格的作用 插入表格 设置表格大小 页眉与辅助功能 表格的设置――――案例操作 表格的ＨＴＭＬ标记 表格嵌套――案例操作 重点：表格嵌套――案例操作 难点：表格嵌套――案例操作 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：25 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第五章 表格处理 1、表格的作用： 1）存放数据 2）布局页面2、插入表格 步骤： 1） 单击网页中需要插入表格的地方 2） 在菜单栏选择“插入记录”-&“表格”命令，或者单击“常用”工具栏里的“表格” 按钮 ，或者运用组合键 CTRL+ALT+T3、设置表格大小行数和列数： 表格宽度：表示表格在页面中宽度的大小。像素设置的是表哥宽度的实际值， 百分比设置的是表格与页面宽度的相对比值。 边框粗细：设置表格边框的粗细效果。 单元格边距：是指单元格中填充内容距离边框的距离大小。 单元格间距：是指相邻单元格之间的距离。 概念：单元格，指的是表格里的每一个格子，就叫做单元格。26 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智理解表格边框、单元格边框、间距、填充（边距）4、页眉与辅助功能 页眉：用于设置表格的行或列的标题 无：表示不设置表格的行或列的标题 左：表示一行归为一类，可以为每行在第一栏设置一个标题 顶部：表示一列归为一类，可以为每列在头一栏设置一个标题 两者：表示可以同时输入“左”端和“顶部”的标题 标题：设置表格的标题名称，默认会出现在表格的上方。 摘要：为表格的备注，不会在网页中显示。27 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智二、表格的设置 1 实例一 足球明星相册要求： 1) 标题“足球明星” 设置字体：黑体、大小：36 像素、 颜色：#FFCC33、居中对齐 2) 创建导航位置的表格 1 行 5 列、表格宽度 700 像素、边框为 0、填充 3、间距 0、背景 颜色为：#FF99CC、每个单元格必须一样宽，且里面的文字居中对齐。 3) 设置网页背景颜色为：#009900，设置导航链接 4) 创建图像展示表格 3 行 4 列。 宽度 边框粗细 边框颜色 单元格边距 单元格间距 表格背景颜色 第一行背景颜色 第二行背景颜色 第三行背景颜色 700 像素 1 像素 # 像素 10 像素 #FFCC #FFFF66 #66FF00知识点： 1）选定表格和单元格 表格包括行、列、单元格 3 个组成部分 。 A、选定整个表格 B、选定行或列 C、选定单元格 2）设置表格和单元格的属性 3）调整表格的尺寸 选定表格→鼠标拖动 设置属性值 调整行和列的宽度28 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2、实例二、制作课程表 步骤一：插入 5 行 6 列的表格，宽度为 500 像素，边框、填充、间距各为 1；并调整表格录 入文字如下图所示：知识点： 1）添加/删除行列 通过表格【属性】面板增加与删除表格的行和列 通过【修改】菜单完成增加与删除表格的行和列 2）单元格的合并和拆分 3）单元格的复制、粘贴、移动和清除 在网页编辑窗口中选中要复制的对象 1. 复制－－按 Ctrl+C，或【编辑】｜【复制】命令。 2. 移动－－按 Ctrl+X，或【编辑】｜【剪切】]命令。 3. 粘贴－－按 Ctrl+V，或【编辑】｜【粘贴】命令。 4. 拖动－－按住 Ctrl＋拖，则完成复制操作。直接拖曳可完成对象的操作。 5. 清除－－按 Delete，或【编辑】｜【清除】命令。步骤二：在步骤一的基础上，设置表格属性，如下图所示效果：29 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智表格属性参数：宽度 边框粗细 边距 间距 表格背景颜色 表格边框颜色 对齐500 像素 1 像素 1 像素 1 像素 #D2E2EF #B6C9D7 居中对齐步骤三：设置单元格属性，完成课程表。如下图所示：要求：1）所有单元格居中对齐，字体大小为 12px 2）第一列和第二行字体加粗 3）第二行背景颜色设置为：#B6C9D7；填写科目的单元格设置背景颜色：#E9F1F8 4）最上一行字体：隶书 36px 红色；设置行高 70 像素；背景图片：bg.gif 5）左上角单元格，插入图片 logo.gif，设置图片宽和高为 60,并设置图片在单元格的 顶部对齐。 6）最下一行设置行高 20 像素；背景颜色：#B6C9D7，边框颜色：#FF000030 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智3、表格的 html 标记 表格的标签： &table width=&200& border=&1&& &tr& &td&&&/td& &td&&&/td& &/tr& &tr& &td&&&/td& &td&&&/td& &/tr& &/table& &table& &/table& &tr& &/tr& &td& &/td& & 表格标记 行标记 单元格标记 空格三、表格嵌套 1．概念：就是在表格的单元格中再插入表格，形成嵌套的结构。或者就是说在已有的表格 中再创建表格。 2．步骤 A：光标定位到需要插入嵌套表格的单元格里 B： 按照插入表格的方式，插入新的表格 实例一：下载页面要求：1、背景图片为 bg.gif 2. 单元格颜色 #33B3F0 和 #C8EAFB实例二 个人简历31 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智四、应用表格布局页面 1） 、类型： 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框 架型、封面型、Flash 型、变化型。 A、国字型32 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智B 拐角型C 正文型D 左右框架型33 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智E Flash 型2、页面的构成 1）网页尺寸 根据屏幕分辨率的大小设计网页的宽度。 一般如果屏幕分辨率为 800*600 那么设计网页的尺寸为 780*428，如果屏幕分辨率为 ，那么设计页面尺寸为 980*600 2）页头（页眉） 通常放置 logo（网站标志）和 banner（广告条） 3）页脚 放置版权信息、联系电话、网站介绍、备案信息等等。 4）导航栏实例：国字型 网页制作34 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第六章 框架目的、要求: 知识要点： 框架的定义 框架的基本操作 实例操作――网页书 自定义框架集 网页中的网页 重点： 实例操作――网页书 自定义框架集 难点：网页中的网页 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：35 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第 6 章 框架 一、什么是框架？ 一个框架就是一个区域，可以单独打开一个 HTML 文档。 多个框架就把浏览器窗口分成不同的区域，每个区域显示不同的 HTML 文档。多个框架就组成一个框架集。 在网页中， 框架的作用是将浏览器的窗口划分为多个部分进行显示， 每个部分显示不同 的网页元素。 框架结构多用于较为固定的导航栏， 同导航栏中相对应的较多变化的具体内容 进行组合。框架结构是由框架和框架集组成的。 框架：是浏览器窗口中的另一个组成部分，其可以显示与窗口中内容无关的网页文件。 框架集： 是将一个浏览器窗口运行几行几列的方式划分成多个组成部分， 每部分的内容 显示不同的网页元素。 这是一个左右结构的框架。 事实上这样的一个结构是由三个网页文件组成的。 首先外部 的框架集是一个文件，图中我们用 index.htm 命名。框架中左边命名为 L，指向的是一个网 页 A.htm。右边命名为 R，指向的是一个网页 B.htm。 &frameset cols=&80,*& & &frame src=&a.html& name=&L& id=&L& /& &frame src=&b.html& name=&R& id=&R& /& &/frameset& &noframes&&body&&/body&&/noframes&36 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智二、框架的基本操作 1、建立框架 两种方法： A 1、单击菜单“新建”-?“文件” ，打开“新建文档”对话框，做如下选择，点击“确定” 。 2、打开要插入框架的页面。单击“布局”插入栏中的“框架”按钮 出的菜单中选择需要的框架类型。 B 新建页-示例的页-框架集 可以实现 例子：新建一个左右结构的框架页面 右侧的按钮 ，在弹2、保存框架和框架集 1） ．保存框架：鼠标置于要保存的框架，选择“文件/保存框架”命令 2） ．保存框架集：选择要保存的框架集，选择“文件/保存框架页”或者“文件/框架集 另存为”命令。 3） ．保存全部：这时是保存整个框架结构，保存的时候虚线笼罩的就是你现在保存的框 架。 3、编辑框架页 1. 选择框架页，并进行编辑。保存框架三、实例：网页书知识点： 1、框架的作用 1．做网页的布局，将网页分成不同的部分 2．简化网页的编写：网页之间相同的内容只需要编写一次 3．加快网页的浏览：每次网页只更新那个变化的框架内容 2、设置框架和框架集的属性 1）框架集 选中框架集：鼠标单击框架的边框，虚线显示的部分就是选中的框架集 设置框架集属性： 边框， 边框宽度， 边框颜色 行：值，单位（像素，百分比，相对） 2）框架 选中框架：框架面板中单击要设置的框架或者按住【alt】键，在框架窗口内单击 设置框架属性：37 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智框架名称，源文件，边框，滚动，不能调整大小 边框颜色，边界宽度，边界高度。 3、设置框架中的链接四、自定义框架集 如果框架集不满足我们的需要时，我们需要自己建立框架。看例子：1、 拆分 方法： 1．拖动编辑窗口的边框：鼠标置于编辑窗口的边框，变成 或者 2．拖动窗口中的框架边框：按住【Alt】键，鼠标变成 或者 注意：当指向拖动一小段边框时，先选中当前框架，再拖动。 例如： 2、框架的删除 方法：拖动不需要的边框和别的边框合并，或者拖到编辑窗口外。时拖动。 时拖动。五、网页中的网页 Iframe在 IFrame 框架中调用的各个二级页面内容的高度并不是统一的，当框架调用内容比较 多，页面比较长时，IFrame 框架就会出现滚动条，如果想使框架无论调用的页面内容多少 时，都不出现滚动条。可以在&iframe&标签中添加框架高度自适应代码即可，代码如下： Onload=”this.height=this.Document.body.scrollHeight”.IFRAME 元素也就是文档中的文档，或者好像浮动的框架 (FRAME) 。 &iframe name=&a& width=&120& height=&160& src=&tx1.html& frameborder=&0& scrolling=&no&&&/iframe&Name 框架的名字 Src 链接的源文件38 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智Frameborder Scrolling框架的边框设置 滚动条设置授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第七章 插入多媒体元素目的、要求: 知识要点： 什么是多媒体元素 插入多媒体元素――ＦＬＡＳＨ按钮，ＦＬＡＳＨ文本，图像查看器，ＦＬＡＳＨ ＬＡＳＨ视频 插入音频 制作ＦＬＡＳＨ相册 重点：插入多媒体元素与音频 难点：制作ＦＬＡＳＨ相册 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：Ｐａｐｅｒ，Ｆ39 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第七章 插入多媒体元素一、什么是多媒体元素？ 多媒体：Multimedia是指文本、图像、声音、动画、视频（Video）等媒体元素的统称二、有哪些多媒体元素1、Flash 多媒体元素 2、音频 3、视频 三、插入 Flash 多媒体元素1 Flash 动画插入的 Flash 动画文件，扩展名为“.swf”2 插入 Flash 按钮1．概念：实际上是用 Flash 动画，效果是按钮的效果，可以直接使用 Dreamweaver 本 身自带的 Flash 按钮，也可以自己做。实际是扩展名为“.swf”的文件。 2． 插入方法： 同插入 Flash 动画的方法类似。 选择菜单 “插入记录” ? “媒体” ? “Flash 按钮”3 插入 Flash 文本1．概念：Dreamweaver 可以帮你指定的文本制作为动画效果，生成动画文件。 2．插入方法：选择菜单“插入记录”?“媒体”?“Flash 文本”4 插入图像查看器（制作 Flash 相册）1．概念：图像查看器，类似电子相册，最后保存为扩展名为“.swf”的 Flash 文件。40 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2．插入方法： a& 选择菜单“插入记录”?“媒体”?“图像查看器” ，系统会自动弹出“保存 Flash 元素”对话框，如下所示： b& 键入文件名，单击保存。这时就插入了 Flash 元素 c& 在属性面板可以对它做简单的设置。d& 设置“Flash 元素”的参数，为 Flash 相册指定调用的图片、设置相册外观。点击 菜单“窗口”→“标签检查器”，现在我们可以 Dreamweaver 右栏中看到一个“Flash 元素”面板。 一些常用的参数：imageurls，设置要显示的图片 imageLinks，设置点击每张图片后访问的网址。 showControls，定义是否显示 Flash 相册的播放控制按钮。 slideAutoPlay，定义 Flash 相册是否自动播放。 transitionsType： 定义 Flash 相册过渡效果的类型， 默认为随机效果： Random。 slidedelay：图片播放的间隔时间 title、titleColor、titleFont、titleSize： 添加自定义的相册标题、颜色、字体、大小等值。 frameShow、frameThickness、frameColor：用于定义 Flash 相册是否有边框及边 框宽度、颜色值。5 插入 Flash Paper1．概念：office 文档转换成的 Flash 文件，所以叫做“Flash Paper” ，Paper 就是文档的 意思。 2．插入方法：选择菜单“插入记录”?“媒体”?“Flash Paper”6 插入 Flash 视频（.flv）1．概念：Flash 视频是一种体积小，下载快的视频格式文件。 2．插入方法：选择菜单“插入记录”?“媒体”?“Flash 视频” 参数： 1.品质41 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智在影片播放期间控制抗失真。设置越高，影片的观看效果就越好；但这要求处理器速度 更快， 以使影片在屏幕上正确显示。 “低品质”设置意味着更看重显示速度而非外观，而“高 品质”设置意味着更看重外观而非显示速度。 “自动低品质”意味着首先看重显示速度，但 如有可能则改善外观。 “自动高品质”意味着首先看重这两种品质，但根据需要可能会因为 显示速度而影响外观。 2.比例 全部显示：使在指定区域中可以看到整个 SWF 文件，同时保持 SWF 文件的纵横比并 避免扭曲；背景颜色的边框可以出现在 SWF 文件的两侧。 无边框：近似于全部显示，只是 SWF 文件的某些部分可能会被裁剪掉。 严格匹配：整个 SWF 文件将填充指定区域，但不保持 SWF 文件的纵横比并且可能会出 现扭曲。 3.视频的类型 累进式下载视频---将 Flash 视频(FLV)文件下载到站点访问者的硬盘上， 然后播放。 但是， 与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视 频文件。 流视频----- 对 Flash 视频内容进行流式处理，并在一段可确保流畅播放的很短的缓冲时 间后在 Web 页面上播放该内容。四、插入音频1． 现有有的声音文件： a& MIDI 格式 以 MIDI 格式存储的音频的格式是 .mid 或 .midi。 b& RealAudio 格式 以 RealAudio 格式存储的音频，其扩展名是 .rm 或 .ram。 c& AU 格式 以 AU 格式存储的音频，其扩展名是 .au。 d& WMA 格式 以 WMA 格式存储的音频，其扩展名是 .wma。 e& SND 格式 以 SND 格式存储的音频，其扩展名是 .snd。 f& WAVE 格式 以 WAVE 格式存储的音频，其扩展名是 .wav。 g& MP3 格式 (MPEG) 以 MP3 格式存储的音频，其后缀是 .mp3, 或 .mpga（针对 MPG Audio） 。 使用哪种格式？42 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智经常使用的格式： MP3 格式，RealAudio 格式，wma 格式 ，mid 格式2． 插入方法： 1） 直接插入 Html 标记 &bgsound src=&11.mp3& autostart=true loop=-1& 2）插件嵌入到网页中 1. 概念：将声音直接集成到页面中，但访问者具有所选声音文件的适当插件后， 声音才可以播放。 2. 作用：可以用作背景音乐，可以在页面上控制播放器外观，声音的开始点和 结束点，声音的音量等。 3. 方法： 1) 在“设计”视图中，将插入点放置在您要嵌入文件的地方，然后执行以下操作之一： a：在“插入”栏的“常用”类别中，单击“媒体”按钮，然后从弹出菜单中选 择“插件”图标。 b：选择“插入记录 ”&“媒体”&“插件” 。 2) 在属性检查器中，单击“链接”文本框旁的文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路 3) 通过在适当的文本框中输入值或者通过在 “文档” 窗口中调整插件占位符的大小，输入宽度和高度。 4) 这些值确定音频控件在浏览器中以多大的大小显示。43 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第八章 ＡＰ目的、要求: 知识要点： ＡＰ ＤＩＶ元素的定义 编辑ＡＰ ＤＩＶ元素――案例 层的可见性设置 层的溢出与裁切 层的嵌套 ＡＰ ＤＩＶ元素与表格的转换 重点：编辑ＡＰ ＤＩＶ元素――案例 难点：层的嵌套 ＡＰ ＤＩＶ元素与表格的转换 教学步骤： 基础知识讲解――实践操作讲解――学生实践ＤＩＶ元素教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作44 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智课后分析与小结：第八章：AP DIV 元素 一、创建 AP DIV 元素 什么是 Ap Div？ AP 元素（绝对定位元素）, 是一种 HTML 网页元素，一般称为 “层”。即网页内 容的容器，包含文本，图像或其他任何可以在 HTML 文档正文中放入的内容。 且可以精确定位在网页中的任何地方。 特点： 1、作为容器，可以放置其他网页元素。 2、灵活定位。DIV 是一个容器，在 HTML 页面中的每个标签对象几乎都可以称得上是一个容器，例 如使用 P 段落标签对象。 &div&文字内容&/div& DIV 是 HTML 指定的，专门用于布局设计的容器对象。在传统的表格式的布局当中之 所以能进行页面的排版布局设计，完全依赖于表哥对象 table。在页面当中绘制一个由多个 单元格组成的表格，在相应的表格中放置内容，通过表格单元格的位置设置，达到实现布局 的目的。 如果需要在网页中插入 DIV，可以像插入其他的 HTML 元素一样，只需在代码中应用 &div&&/div&这样的标签形式，将内容放置在其中，便可以应用 DIV 标签。45 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智在 CS5 中， 系统使用 DIV 标记和 CSS 技术来实现 AP 层对象的效果， 所以也称 绝对定位的 DIV 标记。二、编辑 AP DIV 元素 1、调整层的大小 2、层的层次关系 3、层的首选设置 4、层的对齐 实例：课程预览三、层的可见性设置 1. AP 面板的使用（选择、命名、隐藏、次序） 2. 层的可见性 3. 简单的层特效 实例：点击控制图片的显示四、层的溢出与裁切 1．溢出可见性 2．裁切显示46 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智五、层的嵌套DIV 对象除了可以直接放入文本和其他标签，还可以多个 DIV 标签进行嵌套使用，最 终的目的是合理表示出页面的区域。 在插入点：选择该选项，即在当前光标所在的位置插入相应的 DIV。 在标签之前：选择该选项后，在第二个下来列表中选择标签，可以在所选择的标签之前 插入相应的 DIV。在开始标签之后：选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签 的开始标签之后插入相应的 DIV. 在结束标签之前：选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签 的结束标签之前插入相应的 DIV。 在标签之后：选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签之后 插入相应的 DIV. PS:大家都知道 HTML 标签是成对出现的，以上结果大家可以动手测试，不要太懒。嵌套的含义：嵌套并不表示一个在另外一个里面显示，而是指一个 AP 元素的代 码在另一个 AP 元素代码的内部。嵌套的 AP 元素会随着父 AP 元素的移动而 移动，继承父 AP 元素的可见性。 1、 AP 层对象元素的嵌套方法： 1）.将光标置于 AP 元素内。 2）.工具栏中，插入-布局-拖动“绘制 AP Div”到 AP 元素内。47 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2、 标尺、辅助线的使用六、AP DIV 与表格的转换 1、不重叠性 2、网格的使用 3、表格与 AP DIV 的转换授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排２ ４教学单元（教学章、节或主题） ：第九章 行为目的、要求: 知识要点： 晃动的图片 弹出窗口实例 设置文本行为 交换图片实例 拖动ＡＰ元素 修改属性行为 动态菜单实例 特效脚本代码的使用 重点：交换图片实例――案例 难点：拖动ＡＰ元素 特效脚本代码的使用 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作48 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智课后分析与小结：第九章：行 为 一、晃动的图片 1）什么是行为？ “行为” 可以说是 Dreamweaver 中最具特色的功能之一， 它提供了很多实 用的动作，每个动作可以完成特定的任务，为网页添加不少特殊效果。 2）实例制作：晃动的图片 技巧：添加行为的时候一般遵循 3 个步骤： ? 选择对象。 ? 添加动作。 ? 调整事件。 对象是指接受事件的主体 1. 事件 ? 事件是触发动态效果的原因，它可以被附加在各种页面元素上，也 可以被附加到 HTML 标记中。常用的事件：鼠标的移动或者点击 时，键盘的输入和控制等等。 2. 动作 ? 动作其实是一段网页上的 JavaScript 代码，这些代码在特定事件被 激发时执行，从而实现访问者与 Web 页进行交互，以多种方式更 改页面或执行某些任务。 行为是动作和触发该动作的事件的结合体49 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智注意使用动作的对象必须要有个 ID二、弹窗实例 1 行为面板的使用 1) 打开行为面板（快捷方式：Shift+F4） 2) 认识行为面板显示设置事件 显示所有事件 添加行为 删除事件 移动事件顺序 命令控制菜单 2 实例： 弹出信息 刚刚的实例，对象是：网页正文部分；事件是： onload 页面打开； 动作是弹出信息框。 常见事件： OnMouseOver 鼠标经过 OnMouseout 鼠标离开 OnLoad 打开 OnUnload 关闭3 实例：弹出网页窗口三、设置文本行为 1 ) 状态栏文字 2）设置文本域文字（注意使用动作的对象必须要有个 ID）事件解读： onFocus 事件在对象获得焦点时发生50 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智onBlur 事件会在对象失去焦点时发生 onClick 事件会发生在点击时 onDblclick 事件会发生在双击时 onmouseDown 事件会在鼠标按键被按下时发生 onmouseUp 事件会在鼠标按键被松开时发生 onmouseOver 事件会在鼠标指针移动到指定的对象上时发生 onmouseOut 事件会在鼠标指针离开到指定的对象上时发生 onmouseMove 事件会在鼠标指针移动时发生 onkeyDown 事件会在用户按下一个键盘按键时发生 onkeyPress 事件会在键盘按键被按下并释放一个键时发生 onkeyUp 键盘按键被松开时发生 四、交换图片实例 该行为可以实现图片的转换，常用来做广告条或产品展示。五、拖动 AP 元素 实例：拼图游戏 背景层参数 height: 220 width: 220 background-color: #F9EEF2; border: 1px solid #009900; 图片层 width:110 height:110六、修改属性行为 一种比较灵活的行为，可以通过事件来触发某个对象属性值的变化。 注意：每个被修改属性的对象必须设置唯一的 ID。51 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智七、动态菜单实例八、效果行为的应用九、特效脚本代码的使用 实例 1：跑马灯文字效果52 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智实例 2：鼠标特效的使用实例 3：图片展播53 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智1）样式 1 代码&script& var widths=282; //图片宽 var heights=164;//高 var counts=4;//图片数量 img1=new Image ();img1.src='sx/1.jpg'; //图片的位置 img2=new Image ();img2.src='sx/2.jpg'; img3=new Image ();img3.src='sx/3.jpg'; img4=new Image ();img4.src='sx/4.jpg'; url1=new Image ();url1.src='http://www.51zxw.net';//图片链接地址 url2=new Image ();url2.src='http://www.51zxw.net'; url3=new Image ();url3.src='http://www.51zxw.net'; url4=new Image ();url4.src='http://www.51zxw.net'; var nn=1; var key=0; function change_img() {if(key==0){key=1;} else if(document.all) {document.getElementById(&pic&).filters[0].Apply();document.getElementById(&pic&).filters[ 0].Play(duration=2);} eval('document.getElementById(&pic&).src=img'+nn+'.src'); eval('document.getElementById(&url&).href=url'+nn+'.src'); for (var i=1;i&=i++){document.getElementById(&xxjdjj&+i).className='axx';} document.getElementById(&xxjdjj&+nn).className='bxx'; nn++;if(nn&counts){nn=1;} tt=setTimeout('change_img()',4000);} //图片过渡时间长度 function changeimg(n){nn=n;window.clearInterval(tt);change_img();} document.write('&style&'); document.write('.axx{padding:1px 7border-left:#cccccc 1}'); document.write('a.axx:link,a.axx:visited{text-decoration:color:#line-height:12fo nt:9px sans-background-color:#666;}'); document.write('a.axx:active,a.axx:hover{text-decoration:color:#line-height:12f ont:9px sans-background-color:#999;}');54 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智document.write('.bxx{padding:1px 7border-left:#cccccc 1}'); document.write('a.bxx:link,a.bxx:visited{text-decoration:color:#line-height:12fo nt:9px sans-background-color:#D34600;}'); document.write('a.bxx:active,a.bxx:hover{text-decoration:color:#line-height:12f ont:9px sans-background-color:#D34600;}'); document.write('&/style&'); document.write('&div style=&width:'+widths+'height:'+heights+'overflow:text-overflow:&&'); document.write('&div&&a id=&url&&&img id=&pic& style=&border:0filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyl e=4, motion=forward)& width='+widths+' height='+heights+' /&&/a&&/div&'); document.write('&div style=&filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2text-align:top:-12position:margin:1height:12padding:0margin:0border:0&&'); for(var i=1;i&counts+1;i++){document.write('&a href=&javascript:changeimg('+i+');& id=&xxjdjj'+i+'& class=&axx& target=&_self&&'+i+'&/a&');} document.write('&/div&&/div&'); change_img(); &/script&1） 样式 2 代码 以下代码放入&head&&/head&之间&style type=&text/css&& /* Reset style */ * { margin:0; padding:0; word-break:break- } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans- } h1, h2, h3, h4, h5, h6 { font-size:1 } a { color:#0287CA; text-decoration: } a:hover { text-decoration: } ul, li { list-style: } fieldset, img { border: } legend { display: } em, strong, cite, th { font-style: font-weight: } input, textarea, select, button { font:12px Helvetica, Arial, sans- } table { border-collapse: } html { overflow:-moz-scrollbars- } /*Always show Firefox scrollbar*/ /* iFocus style */ #ifocus { width:525 height:245 margin:20 border:1px solid #DEDEDE; background:#F8F8F8; } #ifocus_pic { display: position: float: width:410 height:225 overflow: margin:10px 0 0 10 } #ifocus_piclist { position: } #ifocus_piclist li { width:410 height:225 overflow: } #ifocus_piclist img { width:410 height:225 } #ifocus_btn { display: float: width:91 margin:9px 9px 0 0; } #ifocus_btn li { width:91 height:57 cursor: opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_btn img { width:75 height:45 margin:7px 0 0 11 } #ifocus_btn .current { background: url(http://zzjs.net/by yourself) no- opacity:1; -moz-opacity:1; filter:alpha(opacity=100); } #ifocus_opdiv { position: left:0; bottom:0; width:410 height:35 background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_tx { position: left:8 bottom:8 color:#FFF; } #ifocus_tx .normal { display: } &/style& &script type=&text/javascript&& function $(id) { return document.getElementById(id); }55 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智function addLoadEvent(func){ var oldonload = window. if (typeof window.onload != 'function') { window.onload = } else { window.onload = function(){ oldonload(); func(); } } } function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) if (!document.getElementById(elementID)) var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = &0px&; } if (!elem.style.top) { elem.style.top = &0px&; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { } if (xpos & final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + } if (xpos & final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - } if (ypos & final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + } if (ypos & final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - } elem.style.left = xpos + &px&; elem.style.top = ypos + &px&; var repeat = &moveElement('&+elementID+&',&+final_x+&,&+final_y+&,&+interval+&)&; elem.movement = setTimeout(repeat,interval); } function classNormal(iFocusBtnID,iFocusTxID){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); for(var i=0; i&iFocusBtns. i++) { iFocusBtns[i].className='normal'; iFocusTxs[i].className='normal'; }56 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智} function classCurrent(iFocusBtnID,iFocusTxID,n){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); iFocusBtns[n].className='current'; iFocusTxs[n].className='current'; } function iFocusChange() { if(!$('ifocus')) $('ifocus').onmouseover = function(){atuokey = true}; $('ifocus').onmouseout = function(){atuokey = false}; var iFocusBtns = $('ifocus_btn').getElementsByTagName('li'); var listLength = iFocusBtns. iFocusBtns[0].onmouseover = function() { moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (listLength&=2) { iFocusBtns[1].onmouseover = function() { moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } } if (listLength&=3) { iFocusBtns[2].onmouseover = function() { moveElement('ifocus_piclist',0,-450,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } } if (listLength&=4) { iFocusBtns[3].onmouseover = function() { moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } } } setInterval('autoiFocus()',5000); var atuokey = function autoiFocus() { if(!$('ifocus')) if(atuokey) var focusBtnList = $('ifocus_btn').getElementsByTagName('li'); var listLength = focusBtnList. for(var i=0; i&listL i++) { if (focusBtnList[i].className == 'current') var currentNum = } if (currentNum==0&&listLength!=1 ){ moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } if (currentNum==1&&listLength!=2 ){ moveElement('ifocus_piclist',0,-450,5);57 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } if (currentNum==2&&listLength!=3 ){ moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } if (currentNum==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==1&&listLength==2 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==2&&listLength==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } } addLoadEvent(iFocusChange); &/script&以下代码为：复制到需要展示的位置&div id=&ifocus&& &div id=&ifocus_pic&& &div id=&ifocus_piclist& style=&left:0; top:0;&& &ul& &li&&a href=&#&&&img src=&cimg/11.jpg& alt=&zzjs net& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li&&a href=&#&&&img src=&cimg/22.jpg& alt=&zzjs net& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li&&a href=&#&&&img src=&cimg/33.jpg& alt=&zzjs net& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li&&a href=&#&&&img src=&cimg/00.jpg& alt=&zzjs net& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &/ul& &/div& &div id=&ifocus_opdiv&&&/div& &div id=&ifocus_tx&& &ul& &li class=¤t&&视频教学：www.51zxw.net&/li& &li class=&normal&&专注于网页特效及广告代码。&/li& &li class=&normal&&找 js 特效，来这里就对啦，做最帅最酷的 js 特效网站。&/li& &li class=&normal&&站长，网页设计师，看了都会喜欢的网站，收藏起来吧。&/li& &/ul& &/div& &/div&58 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智&div id=&ifocus_btn&& &ul& &li class=¤t&&&a href=&&#ZC_BLOG_HOST#&?cat=12& target=&_blank&&&img src=&cimg/11.jpg& alt=&& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li class=&normal&&&a href=&&#ZC_BLOG_HOST#&?cat=10& target=&_blank&&&img src=&cimg/22.jpg& alt=&& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li class=&normal&&&a href=&&#ZC_BLOG_HOST#&?cat=5& target=&_blank&&&img src=&cimg/33.jpg& alt=&& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li class=&normal&&&a href=&http://www.zzjs.net& target=&_blank&&&img src=&cimg/00.jpg& alt=&& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &/ul& &/div& &/div&授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排２ ４教学单元（教学章、节或主题） ：第十章 ＣＳＳ样式表的应用目的、要求: 知识要点： ＣＳＳ概念 如何编辑ＣＳＳ样式 ＣＳＳ样式选择器 案例――――ＣＳＳ美化页面 选择器的复合声明 ＣＳＳ的嵌套与继承 应用ＣＳＳ到网页 综合实例操作 CSS 使用技巧 重点：ＣＳＳ样式选择器 案例――――ＣＳＳ美化页面 选择器的复合声明 难点：ＣＳＳ的嵌套与继承59 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：第十章 CSS 样式表的应用如果说目前在 Web 设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV 页面的布局 无疑是其中之一1．CSS 的概念 ：CSS（Cascading Style Sheet），中文译为层叠样式表，是用 于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 对于一个网页设计者来说，HTML 语言一定不会感到陌生，因为它是所有 网页制作的基础。 但是如果希望网页能够美观、 大方， 并且升级方便， 维护轻松， 那么仅仅 HTML 是不够的，CSS 在这中间扮演着重要的角色。本课从 CSS 的基本 概念出发，介绍 CSS 语言的特点，以及如何在网页中引入 CSS，并对 CSS 进行初 步的体验。（其实我们在前面的课程中已经接触到） 作用：例子演示。 从 CSS 对标记的控制入手， 讲解 CSS 的初步知识以及编辑方法。希望大家能够掌 握下一面几个方面的内容：? ? ?标记的概念 传统 HTML 的缺点 CSS 的引入&style type=&text/css&&60 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智&!-body,td,th { font-size: 12 color: #FF0000; } --& &/style& 特点：1） 灵活控制网页中的每个元素的样式 2） 把内容和格式处理相分离，提高工作效率注：CSS 是 1996 年由 W3C 审核通过，并且推荐使用的。简单的说 CSS 的引入就 是为了使得 HTML 能够更好的适应页面的美工设计。它以 HTML 为基础，提供了丰 富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针 对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影 仪、PDA 等等。CSS 的引入随即引发了网页设计的一个又一个新高潮，使用 CSS 设计的优秀页面层出不穷。 2.如何编辑 CSS 样式1) 属性面板快捷操作 2）使用 CSS 样式面板A．管理 CSS 规则按钮（添加按钮、链接按钮、修改按钮、删除按钮） B．显示规则列表（显示全部元素的样式、显示当前编辑元素的样式） C．显示所选规制属性 D．查看 CSS 属性视图按钮（分类、按字母排列、显示设置）61 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智3）手工输入代码3.CSS 选择器 选择器（selector）是 CSS 中很重要的概念，所有 HTML 语言中的标记都是通过 不同的 CSS 选择器进行控制的。用户只需要通过选择器对不同的 HTML 标签进行 控制，并赋予各种样式声明，即可实现各种效果。希望大家能够掌握以下几个方 面的内容：标记选择器（对标记起作用）类别选择器ID 选择器62 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智同一个 Id 选择器不能同时出现在两个标记中的，原因是 id 不但用于 CSS 同时 也是 javascript 语法的一个目标设置。所以相同的 id 名称会造成混乱。 4.小试牛刀-css 美化页面1） 2） 3) 4） 设置网页属性设置（字体 12 像素、黑色；背景图片 bg.gif；边距均为 0） 创建表格边框样式 .line （颜色#CC66FF） 设置底部文字的样式 .white （字体白色） 美化输入文本框样式 .input5．选择器的复合声明 在利用 CSS 选择器控制 HTML 标记时， 除了每个选择器的属性可以一次声明多个， 选择器本身也可以同时声明多个， 并且任何形式的选择器包括标记选择器、 class 类别选择器、ID 选择器等都是合法的。 6． CSS 的嵌套与继承 1）选择器的嵌套 2 继承，简单的说就是将各个 HTML 标记看作一个个容器，其中被包含的小容器 会继承所包含它的大容器的风格样式。 我们在这里从页面各个标记的父子关系出 发，讲解 CSS 的继承。 7. 应用 CSS 到网页中 在对 CSS 有了大致的了解后， 便希望使用 CSS 对页面进行全方位的控制。我们在 这里主要介绍如何使用 CSS 控制页面，以及其控制页面的各种方法，包括行内样 式、内嵌式、链接式、导入式等。并最后探讨各种方式的优先级问题。希望大家 能够掌握以下几个方面的内容：? ? ? ?内嵌式 行内样式 链接式 导入样式（写在 head 头部信息中） （写到 html 标记里面） （适合多个页面使用）63 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智?各种方式的优先级问题 》链接式行内样式》内嵌式 8.综合实例1） ．新建名称为“.title1”的类样式，定义在样式表文件“css2.css”中，具体设 置如下：类型分类下设置：字体“隶书” ，大小“24” ，颜色“#FF0000”理解 “行高” 的定义2）.新建名称为“.tb”的类样式，定义在样式表文件“css2.css”中，具体设置 如下：在“背景”分类下设置背景颜色为“#EEDEDB” 。64 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智3） ．新建关于标签“body”的样式，定义在新的样式表文件“ css2.css”中，具 体设置如下：分类 类型 背景 区块具体设置 字体“楷体” ，大小“14” ，行高“16” 背景颜色“#DFC0BB” 文本对齐“居中”所有浏览器都支持 vertical-align 属性。可能的值值 描述 默认。元素放置在父元素的基线上。baseline65 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智sub垂直对齐文本的下标。 H20 垂直对齐文本的上标super52=25top把元素的顶端与行中最高元素的顶端对齐 把元素的顶端与父元素字体的顶端对齐 把此元素放置在父元素的中部。 把元素的顶端与行中最低的元素的顶端对齐。 把元素的底端与父元素字体的底端对齐。 长度单位与基线的位移数值 使用 &line-height& 属性的百分比值来排列此元素。允许使用负值。 规定应该从父元素继承 vertical-align 属性的值。text-topmiddlebottomtext-bottomlength%inherithttp://www.w3school.com.cn/css/css_reference.asp4） ．新建名称为“.copy”的类样式，定义在样式表文件“css2.css”中，具体设 置如下： 分类 类型 具体设置 字体“宋体” ，大小“12” ，行高“25” 颜色“#333333” 背景 区块 背景颜色“#04A292” 文本对齐“居中”5）. 新建名称为“.img01”的类样式，定义在样式表文件“ css2.css”中，具体 设置如下： 分类 边框 方框 具体设置 样式 “outset” ， 宽度 “4px” ， 颜色 “#846761” 宽“270px” ，高“180px” ，浮动“向左” 填充“5px” ，边界“5px”66 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智6）. 新建名称为“.lead”的类样式，定义在样式表文件“css2.css”中，具体设 置如下： 分类 类型 具体设置 字体“宋体” ，大小“14” ，行高“25” 颜色“#FFFFFF” 背景 背景颜色“#03756B”67 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智区块 方框 边框文本对齐“居中” 宽“109” ，高“25” 样式： “上”下拉列表框中选择“实线” 宽度：取消全部相同 “右”下拉列表框 “1”“上” 、 “下” 、 “左”下拉列表框 “0” 颜色：取消全部相同 “右”下拉列表框 “#FFFFFF”7） ．设置链接样式 超级链接的 4 种状态 a:link a:visited a:hover a:active 超链接默认状态 已经浏览过的链接 鼠标经过时 点击链接时鼠标经过时背景颜色为：#33FF998．重建 css 样式表文件 css3.css，改变网页风格。例如:下图样例。 要点：1)、练习配色。68 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2) 使用样式表的滤镜，对图片增加效果。69 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=300, FinishY=240); height: 300 width: 660Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity：透明度级别，范围是 0-100，0 代表完全透明，100 代表完全不透明。 FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是 0 到 100。 Style： 设置渐变透明的样式， 值为 0 代表统一形状、1 代表线形、2 代表放射状、 3 代表长方形。 StartX 和 StartY：代表渐变透明效果的开始 X 和 Y 坐标。 FinishX 和 FinishY：代表渐变透明效果结束 X 和 Y 的坐标。9. CSS 使用技巧70 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智1）CSS 禁用/启用 CSS 禁用/启用允许您直接从 CSS 样式面板禁用和重新启用 CSS 属性。 禁用 CSS 属性只 会取消指定属性的注释，而不会实际删除该属性。 2）CSS 检查 检查模式允许您以可视化方式详细显示 CSS 框模型属性，包括填充、边框和边距，无需读 取代码，也不需要独立的第三方实用程序（如 Firebug） 。 3）浏览器兼容性测试 由于不同的浏览器对 CSS 样式标准的执行情况不一样，会导致同样的网页在不同的浏览器 中显示的差异性。DIV＋CSS 网页排版具有利于 SEO 和网页打开速度更快的优点，然而浏览器兼容 问题一直困绕着许多从事 DIV＋CSS 网页排版的美工人员。 设计时主要要兼顾 IE 系列浏览器（ie 6、ie7、ie8） 火狐浏览器71 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第十一章 DIV层布局与Spry构建目的、要求: DIV 布局页面：ＤＩＶ＋ＣＳＳ页面布局是网页设计的发展方向，很多网站从表格布局发展到ＤＩＶ 布局，本节主要是入门，了解如何使用 DIV 布局页面。 知识要点：重点：Spry 构件，可以把 Spry 构件看做一种控件，是事先已经设计好的模块，我们可以直接将其添加 到网页中，快速的实现比较炫酷的网页效果。 难点： 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：72 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智1;认识 Spry 构件：Spry 功能不仅增加了页面布局形式，简化并增强了表单的验证功能，还 与 XML 数据相结合，方便构造动态数据显示，本例就将一些新功能集合到一个网页中。 1）Spry 构件 2）Spry 验证表单 3）Spry XML 数据显示重点学习：Spry 构件，可以把 Spry 构件看做一种控件，是事先已经设计好的模块，我们可 以直接将其添加到网页中，快速的实现比较炫酷的网页效果。 Spry 构件类型： 1）Spry 菜单栏 2）Spry 选项卡式面板 3）Spry 折叠式 4）Spry 折叠面板 5）Spry 工具提示我们将通过一个综合实例，结合 DIV 布局来学习各种构件的使用。 2 DIV 布局页面：ＤＩＶ＋ＣＳＳ页面布局是网页设计的发展方向，很多网站从表格布局发 展到ＤＩＶ布局，本节主要是入门，了解如何使用 DIV 布局页面。 1）先建立 DIV 标签 2）设置对应的 CSS 样式 注意：插入 DIV 标签的位置 技巧：默认情况下两个 DIV 标记上下进行编排的，如果要让两个 DIV 层并排显示，可以用 float 这个属性。 3 Spry 菜单栏 4 Spry 选项卡式面板 5 Spry 折叠式 6 Spry 折叠面板 7 Spry 工具提示73 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第十二章 网站的发布目的、要求:了解Dreamweaver，学会利用Dreamweaver制作网页。知识要点：Dream weaver 的基本知识；用 Dreamweaver 发布网站。重点： 难点： 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：74 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智75 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智76 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智77 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智【学习步骤】在发布网站之前先使用 Dreamweaver 站点管理器对你的网站文件进行检查和整理， 这一步很 必要。可以找出断掉的链接、错误的代码和未使用的孤立文件等，以便进行纠正和处理。 步骤如下：在编辑视图点「站点」菜单＞选“检查站点范围的链接”，弹出“结果”对话框， 如下图下图是检查器检查出本网站与外部网站的链接的全部信息， 对于外部链接， 检查器不能 判断正确与否，请自行核对。下图是检查器找出的孤立文件， 这些文件您的网页没有使用， 但是仍在你的网站文件夹 里存放，上传后它会占据有效空间，应该把它清除。}
君，已阅读到文档的结尾了呢~~
DW-APDiv的基本操作
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
DW-APDiv的基本操作
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='http://www.docin.com/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口问题：  æ
[填空题] 可以按住（）键，在【AP元素】面板中将某一个APDiv拖曳到另一个AP Div上面，形成嵌套AP Div。
汽缸什么部位容易产生热疲劳裂纹？其特点是什么？
斜管沉淀池的理论根据是什么？为什么斜管倾角通常采用60°？
何谓水电站保证出力？
什么叫水电站汛末蓄水位？
混合与返混合在概念上有何区别？返混合是如何造成的？
可以按住（）键，在【AP元素】面板中将某一个APDiv拖曳到另一个AP Div上面，形成嵌套AP Div。
参考答案：Ctrl
●&&参考解析
支付宝红包Dreamweaver 教学思路 教案_学霸学习网
Dreamweaver 教学思路 教案
重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智重庆电讯职业学院教 案 学年第 1 学期系部计算机与传媒系艺术设计教 研 室 ( 实 验室 ) 课 授 主 职 总课时 程 课 讲 名 班 教 称 级 师 称Dreamweaver12 级计算机多媒体平面 1 班 徐顺智 讲师64重庆电讯职业学院教务处制1 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智教 学 进 度 计 划 表周 周 节 教 学 内 容 备 注1、第 1 章 Dreamweaver8 简述和操作界面 2、第 2 章规划站点 3、第 3 章创建文档 1、第 4 章编辑文本 2、第 5 章图像的应用 1、第 6 章使用 CSS 样式 2、第 7 章网络多媒体应用 1、 第 8 章使用链接 2、第 9 章使用表格 1、 第 10 章使用表格的“布局模式” 2、 第 11 章层的使用 1、 第 12 章创建交互式菜单 2、 第 13 章使用行为 1、 第 14 章使用框架和框架集 2、 第 15 章使用模板和库 1、 第 16 章站点管理 2、 第 17 章综合实例（课程设计）2 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智前课程名称言课程编码Dreamweaver类别 任课教师 授课对象 授课方式 执笔人 参考资料总计：64 学时 讲课：40 学时 必修课（√） 选修课（ ） 理论课（ ） 实践课（ ） 实训：24 学时 计算机与传媒系-----徐顺智 12 级计算机多媒体平面 1 班 课堂提问、课堂训练、作业讲评、辅导答疑及课堂模拟等实践环节。 徐顺智 《网站规划与网页设计》谢成开，孙丹丽编著，西南师范大学出版社 《网页设计与配色经典案例解析》旭日东升主编，星辰副主编，电子工业出版 社。 目的：建立站点，添加页面元素，使用 CSS 样式和交互行为 职称 讲师教学 目的 要求要求：该教程使用 Dreamweaver CS5 作为开发工具，结合老师的网站开发经验， 为大家讲解网页制作的每个环节。希望通过本套课程的学 习，大家能灵活运用 Dreaweaver 完成网站的开发。Adobe 公司发布了 Dremweaver CS5，作为网页制作最便捷的开发工具，它 拥有操作便捷高效，可视化开发界面，丰富的站点管理功能等优点。在保持原 有特点的同时，最新版本的推出为我们带来不少惊喜，更简洁、人性化的用户 界面；对 CSS 更丰富的设置；实时视图导航；PHP 代码提示等。教学概况概述：Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即 所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的 视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览 器限制的充满动感的网页。 dw是设计网站的所见即所得工具，非常的方便，是适合设计人员，非常容 易上手。打个比喻，.一个完整的网站可以看成是一份作业， dw是你的笔，代 码是你的作业 空间和域名相当于作业本。dw是一个方便你编写代码的工具。 dw只是编写代码的工具 你需要知道怎么用，也就是看你的作业题（和解析作 业题。同时还需要一个能解析题的工具，fw将作业题解析（切片） 。作为一只 笔，你只需要知道怎么用它就可以。3 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智教学内容 与手段本科程的具体内容包括： 1 网页设计基础 2 制作网页的基本操作 3 建立网页链接 4 了解HTML 5 表格处理 6 框架结构 7 插入多媒体元素 8 AP DIV元素 9 行为特效 10 应用CSS样式 11 DIV层布局与Spry构建 12 网站发布 授课的基本手段为：多媒体教学演示及实践环节。 对学生的建议： 1．掌握网页设计整体的策略性思考方法； 2．学会网页设计中“网页三剑客”软件； 3．在学习过程中，配合课堂学习，注意观察和研究生活中的实际网页设计案 例； 4．选择必要的参考资料，配合本课程的学习，能制作出静态网站。4 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第一章网页设计基础目的、要求: 通过本章的学习，了解网页基础及制作流程，有目的、有重点地培养艺术设计复合型人才打下良好的 基础。 知识要点： 网站的概述――网页设计基础与制作流程 网页的组成元素 Adobe Dreamweaver CS5 简介，安装，应用界面 网页文件的基本属性 设置网页外观属性 如何创建站点设置默认图像文件夹 重点： 网页的组成元素 难点： 如何创建站点 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：5 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第一课：网页设计基础 导入：在网络高速发展的今天，网站已经成为一个自我展示和宣传的平台，一个网站是 由多个相关联的网页构成的。 一般网页上都会有文本和图像信息， 复杂一些的网页上还会有 声音、视频、动画、多媒体。要制作出精美的网页，不仅需要能够熟练的使用软件，还需要 掌握一些网页制作的相关知识。 现在我们常用的浏览器有 IE,火狐，欧朋，谷歌，搜狗，360，遨游，百度浏览器，hao123 浏览器，腾讯 TT。这些国产的浏览器大部分是以 IE 为内核的。因为浏览器的内核不同，所 以同样的代码在浏览器上的显示可能不一样。如果制作页面的话，我建议用火狐或者 IE。 一 、网站的概述 1、 网页与网站 浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了 一个网站。 举例：www.sohu.com (搜狐网) www.baidu.com(百度网) www.youku.com(优酷网)等等。 2、 浏览网页的工具-浏览器 浏览器：用于打开显示网页的软件。最常见的是 Windows 系统自带的 IE 浏览器。 还有火狐 Firefox、360 安全浏览器、遨游、腾讯 TT 等等。 1） 网址：用于定位某个网站某个页面的一串字符，通常是这种格式 http://sports.sohu.com/nba.shtml 2） 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。 3、 认识网页的组成元素网页标题导航栏 LOGO 图片视频表单文 本超级链接二、初识 Dreamweaver Dreamweaver CS5 是一款由 Adobe 公司大力开发的专业 HTML 编辑器，用于对 WEB 站点，WEB 页面和 WEB 应用程序进行设计、编码和开发。利用 Dreamweaver 中的可视化 编辑功能，用户可以快速创建页面而无须编写任何代码。 1、制作网站的流程 规划网站类型及主题 ? 搜集资料素材 ? 使用软件进行网页制作 ? 测试及发布6 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2、认识 Dreamweaver 是当前最流行、最方便的网页设计和网站开发工具软件。 Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。 Dream：梦想 weaver：织布者，织工 早期是 Macromedia 公司推出的“网页三剑客”之一。 “网页三剑客”指的是 Dreamweaver、 Flash、Fireworks 这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为 了网站开发中的专用利器。 它集网页制作和管理网站于一身的所见即所得网页编辑器， 它是 第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年 Macromedia 公司被 Adobe 公司收购，DM CS5 是最新推出的版本。 【操作演示】启动 Dreamweaver 实例：制作一个简单页面(两种方法对照)7 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智三、Dreamweaver 的用户界面菜单栏 文档工具栏插入面板文档编辑窗口浮动面板状态栏属性面板提高：工作窗口的设置、保存、恢复 【操作演示】关闭 Dreamweaver8 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智四、网页文件的基本操作 基本网页的文件类型为 HTML 文档，保存的文件扩展名为 “.html” 1. 创建网页文档（HTML 文档） ? 文件→新建→新建文档→常规→类别→基本页 2. 保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存） ? 文件→保存（或 Ctrl+S) ? 文件→另存为 ? 文件→保存全部 注意：1、网页文件要用英文或数字进行命名，莫用中文。 2、基本网页的扩展名为.html 3. 打开已建的 HTML 文档 ? 文件→打开 ? 右击文件，选择 Dreamweaver 打开。 ? 拖动到 Dreamweaver 4. 关闭文件 ? 文件→关闭 还未保存的网页（*） ，关闭时会提示你是否保存。 其他操作： 1）多个编辑文件的切换选择 2）预览编辑中的网页 (快捷键 F12) 五、设置网页外观属性 网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。 六、创建站点 1、什么是站点 Dreamweaver 的站点是一种管理网站中所有相关联文件的工具。 通过站点可以对网站的 相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器， 测试网站。 站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过 这个文件夹（站点） ，对我们的网站进行管理，有次序，一目了然。 2、创建站点 《我的足球网》 站点根目录为 D：//jcwww 七、设置默认图像文件夹 八、管理站点 1、在“文件”面板中实现以下操作 ? 选择编辑网页文件 ? 创建文件或文件夹 ? 剪切、粘贴、复制、删除、重命名文件或文件夹 2、站点管理 ? 编辑站点 ? 复制站点 ? 删除站点9 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智实际操作设置站点： 1 执行“站点》新建站点”命令，弹出“站点设置对象”对话框，在该对话框中的“站 点名称”文本框中输入站点的名称，单击“本地站点文件夹”文本框后面的“浏览”按钮， 弹出“选择根文件夹”对话框，可以浏览到本地站点的位置。2，单击“选择”按钮，确定本地站点根文件的位置，打开“站点设置对象”对话框。 单击“保存”按钮，即可完成本地站点的创建。执行“窗口》文件”命令，打开“文件”面 板，在“文件”面板中显示出刚创建的本地站点。在大多数情况下，都是在本地站点中编辑网页，再通过 FTP 上传到远程服务器。还可 以执行“站点》管理站点”命令，在弹出的“管理站点”对话框中单击“新建站点”按钮， 同样可以弹出“站点设置对象”对话框。10 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智设置服务器 1)如果用户需要使用 Dreamweaver 连接远程服务器， 将站点中的文件通过 Dreamweaver 上传到远程服务器，则在创建站点时需要设置“服务器”选项卡中的相关选项，否则不需要 设置“服务器”选项卡上的相关选项。在“站点设置对象”对话框中单击“服务器”选项， 可以切换到“服务器”选项卡，在该选项卡中可以指定远程服务器和测试服务器。2) 单 击 “ 添 加 新 服 务 器 ” 按 钮 ， 可 以 弹 出 “ 服 务 器 设 置 ” 对 话 框3)服务器的基本选项 1，在“服务器设置”窗口中分为“基本”和“高级”两个选项卡，在“基本”选项卡中可 以对服务器的相关基本选项进行设置。 2，服务器名称：在该文本框中可以指定服务器的名称，该名称可以是用户任意定义的名称。 3，连接方法：再该选项的下拉列表中可以选择连接到远程服务器的方法，在 Dreamweaver 中提供了七种连接远程服务器的方法。11 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智FTP：该选项为默认的远程服务器的连接方法，大多数情况下都是通过 FTP 来连接到远程服 务器的，FTP 也是目前最常用的链接远程服务器的方法。 其他比较复杂，有心情的可以自己研究，也不好解释，自己动手，丰衣足食啊。 4，FTP 地址：在该文本框种输入要将站点文件上传到其中的 FTP 服务器的地址。FTP 服务 器的地址是计算机系统中完整的 Interner 名称。注意，在这里需要输入完整的 FTP 地址，并 且不要输入任何多余的文本，特别是不要在地址前面加上协议名称。 5，端口：端口 21 是接收 FTP 链接的默认端口，可以通过编辑右侧的文本框更改默认的端 口号。 6，用户名和密码：分别在“用户名和密码”文本框中输入用于连接到 FTP 服务器的用户名 和密码，选中“保存”复选框，可以保存所舒服的 FTP 用户名和密码。 7，测试按钮：完成 FTP 地址、用户名和密码的选项的设置后，可以通过单机“测试”按钮， 测试与 FTP 误区七的链接。 8，在该选项的文本框中输入远程服务器上用于存储站点文件的目录。在有些服务器上，根 目录就是首次使用 FTP 连接到的目录。用户也可以连接到远程服务器，如果在“文件”面 板中的“远程文件”驶入中出现 public_html、www 或用户名这样带名称的文件夹，他可能 就是 FTP 的根目录。 在站点中新建文件夹文件 1，默认情况下， “文件”面板位于 DREAMWEAVER 工作区的右下方，打开文件面板， 在文件面板中的站点根目录中单击鼠标右键， 在弹出的快捷菜单中选择 “新建文件夹” 选项。2，在站点中新建一个文件夹，默认新建的文件夹名称为 untitled,直接为新建的文件夹重命 名为“我的第一个文件夹” 。 3，建立文件的方式与建立文件夹的方式相同。 4，在文件面板中只可以新建默认格式的 HTML 页面，而通过新建文档对话框可以新建多种 格式的文件，并且还可以新建具有布局实力的页面和多种与网页相关文件。12 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第二章目的、要求: 能基本操作本软件网页设计基本操作知识要点： 网页中添加文本――普通文本，空格，日期时间，水平线，特殊字符 编辑文本――world 文本，格式，分段与换行，段落格式，使用 HTML 段落样式 在网页中添加图片――ＧＩＦ，ＪＰＥＧ，ＰＮＧ；获取网页图像；设置图像基本属性 图文混排 编辑图像 鼠标经过更换图片特效 重点： 图文混排 编辑图像 难点： 鼠标经过更换图片特效 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：13 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第二课：制作网页的基本操作 一 、在网页中添加文本 1） 添加普通文本 方法： A、直接输入 （1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入 文字的起始位置。 （2）选择适当的输入法输入文字 B、复制和粘贴 C、从其他文件导入ｗｏｒｌｄ文档 2） 添加空格 输入法切换到半角状态， 按空格键只能输入一个空格。 如果需要输入多个连续的空格可以通 过以下几种方法来实现： （1）菜单“插入记录”-&HTML-&特殊字符-&不换行空格 （2）直接按“Ctrl+Shift+Space”组合键：添加空格 （3）设置软件首选参数-允许连续空格 3）添加日期时间 在文档的最后一行插入形式如“Friday,
9:47 AM”所示的日期，且要求每次保存 网页时自动更新日期。具体操作过程如下： （1）切换到“常用”插入工具栏。 （2）按 Enter 键，添加一空行，将光标放置在空行与正文对齐的最左端。 （3）单击菜单【插入】→【日期】 ，或者单击“常用”插入栏的【日期】按钮，将弹出 “插入日期”对话框。 （4）在“插入日期”对话框中， “星期格式”下拉表框中选取“Thursday,” ， “日期格式” 选取“” ，在“时间格式”下拉列表框选取“10:18PM”，选中“储存时自动更新”复 选框，然后单击【确定】按钮，最后生成的日期效果为“Friday, 9:47 AM”的形式。 （5）保存插入的日期，且浏览网页。 4 ) 插入水平线 （1）将“插入”工具栏切换到“HTML”类型。 （2）将光标放置到标题最后一个字符的右边。 （3）单击 HTML 插入工具栏的“水平线”按钮，即可向网页中标题与正文之间插入一条水 平线。 5）添加特殊字符 （1）通过菜单【插入】→【HTML】→【特殊字符】插入 先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】→【HTML】→【特 殊字符】 ，在【特殊字符】的级联菜单中选择需要插入的特殊字符。14 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智（2）通过“文本”插入工具栏插入 先在 Dreamweaver cs5 的“插入”工具栏中选择“文本” ，显示“文本”插入工具栏。 将光标放置到需要插入特殊字符的位置，然后单击工具栏中的“文本” ，单击所需插入 的特殊字符即可插入到网页中。 二、编辑文本 1）网页中输入的文本可以像 Word 文档一样，进行编辑。 1. 拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。 2. 按 BackSpace 键或 Delete 键实现删除文本操作。 3. 实现复制、剪切、粘贴等操作。 4. 实现查找与替换操作。 5. 实现撤消或重做操作。2）设置文本格式 字体(通用性问题)、大小、颜色、风格 注： CSS （ Cascading Style Sheet ，可译为 “层叠样式表 ” 或 “级联样式表 ” ）是一组格式设 置规则，用于控制 Web 页面的外观。 3）分段与换行 分段按 Enter 回车键（隔一行） 、换行按 Shift+Enter（不分段） 4）设置段落格式 a.对齐方式 b.列表编号 列表可以将文本段落用符号或序号标注起来，有两种类型：项目列表和编号列表。 设置项目列表的操作过程如下: （1）选择要添加列表的若干文本段落 （2）单击属性检查器中的“项目列表”按钮或“编号列表”按钮 c.缩进 5) 使用 Html 段落样式三、在网页中添加图片 1）网页中常用的图片格式 使用图片的原则： 在保证画质的前提下尽可能使图片的数据量小一些， 这样有利用户快速的 浏览我们的网页。 .GIF 格式 特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持 256 种颜色。15 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智用途： 大量用于网站的图标 Logo、 广告条 Banner 及网页背景图像。 但由于受到颜色的显示， 不适合用于照片级的网页图像。 .JPEG 格式 特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。 用途：通常用于显示照片等颜色丰富的精美图像。 .PNG 格式 特点： 是一种逐步流行的网络图像格式。 既融合了 GIF 能做成透明背景的特点， 又具有 JPEG 处理精美图像的优点。 用途：常用于制作网页效果图。 2）如何获取网页图像 网上下载（我要素材网 www.51scw.net） 、购买素材光盘、使用图像制作软件创作 3）插入图像 插入→图像 插入面板→常用→图像 直接将图像文件拖入编辑区 注意： ? 在插入图像前应先将网页文件已保存，从而使所插图像引用正确。 ? 图像插入网页后，应确定图像文件已存入站点，否则在下次打开网 页时，会出现看不到图像的情况。 技巧：图像的位置、替换文字4）设置图像的基本属性 图像→设置的名称 宽、高→可缩小和放大图片的显示尺寸。 源文件→图片的路径和名称。 替代→图像的说明文字 边框→图片是否要加边框四、图文混排 垂直边距和水平边距→图片四周突出的尺寸 对齐→在一行中图形和文本的对齐方式五、编辑图像 裁切 锐化 对比度/亮度 重新采样：当图片的宽、高缩小后，重新生成更小的图片。 优化（为图片瘦身）16 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智六、鼠标经过更换图片特效 1）概念：是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一 张图像。 2）步骤： a 将光标放到要插入图像的地方。 b 单击菜单“插入记录”----&“图像对象”--?“鼠标经过图像” ，打开“插入鼠标 经过图像对话框” 。c 设置完成，单击确定。17 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第三章目的、要求: 知识要点： 了解超链接 创建超链接 图像热区链接 创建图像导航条 脚本链接 超链接的管理创建超级链接重点： 图像热区链接 创建图像导航条 难点：到网页某一特定位置的超链接DD锚点链接教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：18 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第三章、创建超级链接 一、了解超链接 1）什么是超链接 所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以 是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个 应用程序。 二、创建超链接 1) 到网站内页面的超链接DD内部链接（网站内部页面之间创建相互链接关系） 步骤 1 选中页面中的文字或图像， 在属性面板中单击“链接”文本框右侧的文件夹图标， 以通过浏览选择一个文件 步骤 2 从“目标”下拉菜单中，选择文档的打开位置。 _self：会在当前网页所在的窗口或框架中打开（默认方式） 。 _blank :每个链接会创建一下新的窗口。 _new：会在同一个刚创建的窗口中打开。 _parent：如果是嵌套的框架，则在父框架中打开。 _top：会在完整的浏览器窗口中打开。2) 到网站外页面的超链接DD外部链接 步骤 1 选中文字或图像之后， 直接在属性面板的“链接”文本框中输入外部的链 接地址，如 http://www.51zxw.net 步骤 2 然后在“目标”下拉菜单中设置这个链接的目标窗口。 内部链接 这种链接的目标点是同个网站中的其他网页（文档） ，称为内部链接 外部链接 这种链接的目标点是不同站点或本站点以外的网页（文档） ，称为外部链接。 注意：链接中使用完整的 URL 地址 网络协议） www.51zxw.net（域名） 如：http://www.51zxw.net http:// （是浏览网页3) 链接样式 链接颜色：指定应用于链接文字的颜色 已访问链接：指定链接被访问过的颜色 变换图像链接：指定当鼠标位于链接上时的颜色。 活动链接：指定但鼠标在链接上点击时的颜色。4) 到网页某一特定位置的超链接DD锚点链接 ? 锚点链接 这种链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到 当前网页中的某一指定位置上，也可以跳转到其他网页中的某一指定位置上。 步骤 1 创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。 步骤 2 属性面板的链接栏中直接输入 “# 锚点名” 注意： 1） 如果链接的目标锚点标记在当前页面即输入 # 锚点名； 2） 如果链接的目标锚点标记在其他网页，即要输入目标网页的地址和名称， 然后再输入“# 锚点名”19 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智5) 其他一些链接。 A. 创建 E-mail 电子邮件链接 Email 链接 单击这种链接，可以启动电子邮件程序（例如：Offiece 办公软件中的 Outlook）书写邮件，并发送到指定的地址。 步骤 1 选中文本和图像 步骤 2 插入栏｜常用｜电子邮件链接｜输入邮件地址 或在属性面板的链接栏中直接输入 “mailto:邮件地址”B. 创建下载链接：当被链接的文件是 exe 文件或 zip、rar 类型的文件时，浏览器无法 直接打开，便会提示文件会被下载，这就是网上下载的方法。C. 创建空链接：空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以 为之添加行为。 ? 方法：选中要制作空链接的对象，在链接文本框中直接输入＃。 ? 在一般站点首页的导航栏中的首页链接，就可以是一个空链接三、图像热区链接 图像热区指在一幅图片上创建多个区域（热点） ，并可可以点击触发。当用户单击某个 热点时，会发生某种链接或行为。 步骤： 1. 选中图像 2. 在图像属性面板中，使用热区工具（矩形、椭圆、多边形） ，在图像上划分热区。 3. 为绘制的每一个热区设置不同的链接地址和替代文字。四、创建图像导航条 使用鼠标经过变换图像的特效，创建图像导航条五、创建跳转菜单 跳转菜单是网页中的弹出式菜单，可以创建任何文件类型的链接。 步骤： 1、插入栏｜表单｜跳转菜单 2、在“插入跳转菜单”对话框中，单击＋号添加菜单项 3、在“选择时。转到 URL”文本框中，输入该文件的路径。20 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智六、脚本链接 通过连接触发脚本命令 1. 添加到收藏夹： javascript:window.external.addFavorite('http://www.51zq.net','我的足球网') 2. 表示关闭窗口：javascript:window.close() 3. 表示弹出一个提示对话框：javascript:alert(?hello！?) 4. 设置为默认主页： （需通过空链接#触发 onClick 事件） onClick=&this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.51zq.com/') ;&七、超链接的管理 1、链接路径 对链接路径的正确理解是确保链接有效的先决条件。链接的路径有 3 种表达方式 1）绝对路径：如果在链接中使用完整的 URL（统一资源定位符）地址，这种链接路径 就称作绝对路径。 一般用于链接外部网站或外部文件资源时，例如：http://www.51zxw.net/list.aspx?cid=321 2）相对于文档路径：表述源端点与链接目标端点之间的相互位置。一般我们默认使用这 种方式链接同站点的不同文件。用“. . / ”上一层的文件夹 3）相对于站点根目录路径: 所有链接的路径都是从站点的根目录开始的。 “ / ”表示根 目录。 2、自动更新链接 当文件的位置被改动时，自动的更新该网页中的链接路径，同时也自动更新其他网页链 接到这个网页的路径。 3、检查链接21 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第四章 ＨＴＭＬ超文本标记目的、要求: 知识要点： ＨＴＭＬ定义 ＨＴＭＬ文件结构 常见ＨＴＭＬ标记 认识文件头信息 重点： ＨＴＭＬ文件结构 常见ＨＴＭＬ标记 难点：认识文件头信息 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：22 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第四章、了解 HTML 超文本标记 1、什么是 HTML？超文本标记语言，用于编写网页。HTML 是一切网页实现的基础，在网络中浏览的网页都是一个个由 HTML 标记构成的文件。 一个 HTML 文件包含了很多 HTML 标记，用来告诉浏览器应该如何显示文本、图像以及网 页的背景等等 2、HTML 文件结构&html& &head& &title&暑假结束了 &/title& &/head& &body& 开学了，第一天上课有点累呀！ ！以前我可是睡到中午才起床的！ &/body& &/html&HTML 的文件结构相当简单，其主体结构主要由以下。 &html& &head& 文件头信息 &/head& &body& 在浏览器中显示的 HTML 文件的正文 &/body& &/html& HTML 文档通常分为文件头和正文两部分。文件头用以纪录与网页相关的重要信息， 例如标题、关键字等等，通常文件头部分不会在浏览器中显示，而正文部分，则是网页的主 体内容，将在浏览器中显示。 3、常见 HTML 标记 &p& &/p& 段落标记 &br& 回车换行标记 &title& &/title& 网页标题标记 &hr & 水平线 &img& 图像标记 &a& &/a& 超链接标记23 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智4、小结 1) 2) 3) 4)任何 HTML 标记都是由”&“和”&”号所括住，标记名不区分大小写，但建议用小写。 多数标记是成对出现。 少数标记单独出现。如&br&、&hr&等。 部分标记可以拥有属性。如颜色、大小等等 &body bgcolor=“blue”&5、认识文件头信息 设置头部信息&head&&/head& 网页头部信息的内容作为网页的一些辅助信息。并不会直接在网页中显示。 1) 2) 3) 插入“刷新”，可以定时的刷新网页。 插入“关键字” ，有利于搜索引擎收集你的页面，关键字作为搜索的依据 插入“说明” 对网页进行说明描述，同样会得到搜索引擎的收集。24 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第五章 处理表格目的、要求: 知识要点： 表格的作用 插入表格 设置表格大小 页眉与辅助功能 表格的设置――――案例操作 表格的ＨＴＭＬ标记 表格嵌套――案例操作 重点：表格嵌套――案例操作 难点：表格嵌套――案例操作 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：25 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第五章 表格处理 1、表格的作用： 1）存放数据 2）布局页面2、插入表格 步骤： 1） 单击网页中需要插入表格的地方 2） 在菜单栏选择“插入记录”-&“表格”命令，或者单击“常用”工具栏里的“表格” 按钮 ，或者运用组合键 CTRL+ALT+T3、设置表格大小行数和列数： 表格宽度：表示表格在页面中宽度的大小。像素设置的是表哥宽度的实际值， 百分比设置的是表格与页面宽度的相对比值。 边框粗细：设置表格边框的粗细效果。 单元格边距：是指单元格中填充内容距离边框的距离大小。 单元格间距：是指相邻单元格之间的距离。 概念：单元格，指的是表格里的每一个格子，就叫做单元格。26 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智理解表格边框、单元格边框、间距、填充（边距）4、页眉与辅助功能 页眉：用于设置表格的行或列的标题 无：表示不设置表格的行或列的标题 左：表示一行归为一类，可以为每行在第一栏设置一个标题 顶部：表示一列归为一类，可以为每列在头一栏设置一个标题 两者：表示可以同时输入“左”端和“顶部”的标题 标题：设置表格的标题名称，默认会出现在表格的上方。 摘要：为表格的备注，不会在网页中显示。27 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智二、表格的设置 1 实例一 足球明星相册要求： 1) 标题“足球明星” 设置字体：黑体、大小：36 像素、 颜色：#FFCC33、居中对齐 2) 创建导航位置的表格 1 行 5 列、表格宽度 700 像素、边框为 0、填充 3、间距 0、背景 颜色为：#FF99CC、每个单元格必须一样宽，且里面的文字居中对齐。 3) 设置网页背景颜色为：#009900，设置导航链接 4) 创建图像展示表格 3 行 4 列。 宽度 边框粗细 边框颜色 单元格边距 单元格间距 表格背景颜色 第一行背景颜色 第二行背景颜色 第三行背景颜色 700 像素 1 像素 # 像素 10 像素 #FFCC #FFFF66 #66FF00知识点： 1）选定表格和单元格 表格包括行、列、单元格 3 个组成部分 。 A、选定整个表格 B、选定行或列 C、选定单元格 2）设置表格和单元格的属性 3）调整表格的尺寸 选定表格→鼠标拖动 设置属性值 调整行和列的宽度28 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2、实例二、制作课程表 步骤一：插入 5 行 6 列的表格，宽度为 500 像素，边框、填充、间距各为 1；并调整表格录 入文字如下图所示：知识点： 1）添加/删除行列 通过表格【属性】面板增加与删除表格的行和列 通过【修改】菜单完成增加与删除表格的行和列 2）单元格的合并和拆分 3）单元格的复制、粘贴、移动和清除 在网页编辑窗口中选中要复制的对象 1. 复制－－按 Ctrl+C，或【编辑】｜【复制】命令。 2. 移动－－按 Ctrl+X，或【编辑】｜【剪切】]命令。 3. 粘贴－－按 Ctrl+V，或【编辑】｜【粘贴】命令。 4. 拖动－－按住 Ctrl＋拖，则完成复制操作。直接拖曳可完成对象的操作。 5. 清除－－按 Delete，或【编辑】｜【清除】命令。步骤二：在步骤一的基础上，设置表格属性，如下图所示效果：29 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智表格属性参数：宽度 边框粗细 边距 间距 表格背景颜色 表格边框颜色 对齐500 像素 1 像素 1 像素 1 像素 #D2E2EF #B6C9D7 居中对齐步骤三：设置单元格属性，完成课程表。如下图所示：要求：1）所有单元格居中对齐，字体大小为 12px 2）第一列和第二行字体加粗 3）第二行背景颜色设置为：#B6C9D7；填写科目的单元格设置背景颜色：#E9F1F8 4）最上一行字体：隶书 36px 红色；设置行高 70 像素；背景图片：bg.gif 5）左上角单元格，插入图片 logo.gif，设置图片宽和高为 60,并设置图片在单元格的 顶部对齐。 6）最下一行设置行高 20 像素；背景颜色：#B6C9D7，边框颜色：#FF000030 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智3、表格的 html 标记 表格的标签： &table width=&200& border=&1&& &tr& &td&&&/td& &td&&&/td& &/tr& &tr& &td&&&/td& &td&&&/td& &/tr& &/table& &table& &/table& &tr& &/tr& &td& &/td& & 表格标记 行标记 单元格标记 空格三、表格嵌套 1．概念：就是在表格的单元格中再插入表格，形成嵌套的结构。或者就是说在已有的表格 中再创建表格。 2．步骤 A：光标定位到需要插入嵌套表格的单元格里 B： 按照插入表格的方式，插入新的表格 实例一：下载页面要求：1、背景图片为 bg.gif 2. 单元格颜色 #33B3F0 和 #C8EAFB实例二 个人简历31 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智四、应用表格布局页面 1） 、类型： 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框 架型、封面型、Flash 型、变化型。 A、国字型32 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智B 拐角型C 正文型D 左右框架型33 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智E Flash 型2、页面的构成 1）网页尺寸 根据屏幕分辨率的大小设计网页的宽度。 一般如果屏幕分辨率为 800*600 那么设计网页的尺寸为 780*428，如果屏幕分辨率为 ，那么设计页面尺寸为 980*600 2）页头（页眉） 通常放置 logo（网站标志）和 banner（广告条） 3）页脚 放置版权信息、联系电话、网站介绍、备案信息等等。 4）导航栏实例：国字型 网页制作34 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第六章 框架目的、要求: 知识要点： 框架的定义 框架的基本操作 实例操作――网页书 自定义框架集 网页中的网页 重点： 实例操作――网页书 自定义框架集 难点：网页中的网页 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：35 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第 6 章 框架 一、什么是框架？ 一个框架就是一个区域，可以单独打开一个 HTML 文档。 多个框架就把浏览器窗口分成不同的区域，每个区域显示不同的 HTML 文档。多个框架就组成一个框架集。 在网页中， 框架的作用是将浏览器的窗口划分为多个部分进行显示， 每个部分显示不同 的网页元素。 框架结构多用于较为固定的导航栏， 同导航栏中相对应的较多变化的具体内容 进行组合。框架结构是由框架和框架集组成的。 框架：是浏览器窗口中的另一个组成部分，其可以显示与窗口中内容无关的网页文件。 框架集： 是将一个浏览器窗口运行几行几列的方式划分成多个组成部分， 每部分的内容 显示不同的网页元素。 这是一个左右结构的框架。 事实上这样的一个结构是由三个网页文件组成的。 首先外部 的框架集是一个文件，图中我们用 index.htm 命名。框架中左边命名为 L，指向的是一个网 页 A.htm。右边命名为 R，指向的是一个网页 B.htm。 &frameset cols=&80,*& & &frame src=&a.html& name=&L& id=&L& /& &frame src=&b.html& name=&R& id=&R& /& &/frameset& &noframes&&body&&/body&&/noframes&36 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智二、框架的基本操作 1、建立框架 两种方法： A 1、单击菜单“新建”-?“文件” ，打开“新建文档”对话框，做如下选择，点击“确定” 。 2、打开要插入框架的页面。单击“布局”插入栏中的“框架”按钮 出的菜单中选择需要的框架类型。 B 新建页-示例的页-框架集 可以实现 例子：新建一个左右结构的框架页面 右侧的按钮 ，在弹2、保存框架和框架集 1） ．保存框架：鼠标置于要保存的框架，选择“文件/保存框架”命令 2） ．保存框架集：选择要保存的框架集，选择“文件/保存框架页”或者“文件/框架集 另存为”命令。 3） ．保存全部：这时是保存整个框架结构，保存的时候虚线笼罩的就是你现在保存的框 架。 3、编辑框架页 1. 选择框架页，并进行编辑。保存框架三、实例：网页书知识点： 1、框架的作用 1．做网页的布局，将网页分成不同的部分 2．简化网页的编写：网页之间相同的内容只需要编写一次 3．加快网页的浏览：每次网页只更新那个变化的框架内容 2、设置框架和框架集的属性 1）框架集 选中框架集：鼠标单击框架的边框，虚线显示的部分就是选中的框架集 设置框架集属性： 边框， 边框宽度， 边框颜色 行：值，单位（像素，百分比，相对） 2）框架 选中框架：框架面板中单击要设置的框架或者按住【alt】键，在框架窗口内单击 设置框架属性：37 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智框架名称，源文件，边框，滚动，不能调整大小 边框颜色，边界宽度，边界高度。 3、设置框架中的链接四、自定义框架集 如果框架集不满足我们的需要时，我们需要自己建立框架。看例子：1、 拆分 方法： 1．拖动编辑窗口的边框：鼠标置于编辑窗口的边框，变成 或者 2．拖动窗口中的框架边框：按住【Alt】键，鼠标变成 或者 注意：当指向拖动一小段边框时，先选中当前框架，再拖动。 例如： 2、框架的删除 方法：拖动不需要的边框和别的边框合并，或者拖到编辑窗口外。时拖动。 时拖动。五、网页中的网页 Iframe在 IFrame 框架中调用的各个二级页面内容的高度并不是统一的，当框架调用内容比较 多，页面比较长时，IFrame 框架就会出现滚动条，如果想使框架无论调用的页面内容多少 时，都不出现滚动条。可以在&iframe&标签中添加框架高度自适应代码即可，代码如下： Onload=”this.height=this.Document.body.scrollHeight”.IFRAME 元素也就是文档中的文档，或者好像浮动的框架 (FRAME) 。 &iframe name=&a& width=&120& height=&160& src=&tx1.html& frameborder=&0& scrolling=&no&&&/iframe&Name 框架的名字 Src 链接的源文件38 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智Frameborder Scrolling框架的边框设置 滚动条设置授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第七章 插入多媒体元素目的、要求: 知识要点： 什么是多媒体元素 插入多媒体元素――ＦＬＡＳＨ按钮，ＦＬＡＳＨ文本，图像查看器，ＦＬＡＳＨ ＬＡＳＨ视频 插入音频 制作ＦＬＡＳＨ相册 重点：插入多媒体元素与音频 难点：制作ＦＬＡＳＨ相册 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：Ｐａｐｅｒ，Ｆ39 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智第七章 插入多媒体元素一、什么是多媒体元素？ 多媒体：Multimedia是指文本、图像、声音、动画、视频（Video）等媒体元素的统称二、有哪些多媒体元素1、Flash 多媒体元素 2、音频 3、视频 三、插入 Flash 多媒体元素1 Flash 动画插入的 Flash 动画文件，扩展名为“.swf”2 插入 Flash 按钮1．概念：实际上是用 Flash 动画，效果是按钮的效果，可以直接使用 Dreamweaver 本 身自带的 Flash 按钮，也可以自己做。实际是扩展名为“.swf”的文件。 2． 插入方法： 同插入 Flash 动画的方法类似。 选择菜单 “插入记录” ? “媒体” ? “Flash 按钮”3 插入 Flash 文本1．概念：Dreamweaver 可以帮你指定的文本制作为动画效果，生成动画文件。 2．插入方法：选择菜单“插入记录”?“媒体”?“Flash 文本”4 插入图像查看器（制作 Flash 相册）1．概念：图像查看器，类似电子相册，最后保存为扩展名为“.swf”的 Flash 文件。40 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2．插入方法： a& 选择菜单“插入记录”?“媒体”?“图像查看器” ，系统会自动弹出“保存 Flash 元素”对话框，如下所示： b& 键入文件名，单击保存。这时就插入了 Flash 元素 c& 在属性面板可以对它做简单的设置。d& 设置“Flash 元素”的参数，为 Flash 相册指定调用的图片、设置相册外观。点击 菜单“窗口”→“标签检查器”，现在我们可以 Dreamweaver 右栏中看到一个“Flash 元素”面板。 一些常用的参数：imageurls，设置要显示的图片 imageLinks，设置点击每张图片后访问的网址。 showControls，定义是否显示 Flash 相册的播放控制按钮。 slideAutoPlay，定义 Flash 相册是否自动播放。 transitionsType： 定义 Flash 相册过渡效果的类型， 默认为随机效果： Random。 slidedelay：图片播放的间隔时间 title、titleColor、titleFont、titleSize： 添加自定义的相册标题、颜色、字体、大小等值。 frameShow、frameThickness、frameColor：用于定义 Flash 相册是否有边框及边 框宽度、颜色值。5 插入 Flash Paper1．概念：office 文档转换成的 Flash 文件，所以叫做“Flash Paper” ，Paper 就是文档的 意思。 2．插入方法：选择菜单“插入记录”?“媒体”?“Flash Paper”6 插入 Flash 视频（.flv）1．概念：Flash 视频是一种体积小，下载快的视频格式文件。 2．插入方法：选择菜单“插入记录”?“媒体”?“Flash 视频” 参数： 1.品质41 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智在影片播放期间控制抗失真。设置越高，影片的观看效果就越好；但这要求处理器速度 更快， 以使影片在屏幕上正确显示。 “低品质”设置意味着更看重显示速度而非外观，而“高 品质”设置意味着更看重外观而非显示速度。 “自动低品质”意味着首先看重显示速度，但 如有可能则改善外观。 “自动高品质”意味着首先看重这两种品质，但根据需要可能会因为 显示速度而影响外观。 2.比例 全部显示：使在指定区域中可以看到整个 SWF 文件，同时保持 SWF 文件的纵横比并 避免扭曲；背景颜色的边框可以出现在 SWF 文件的两侧。 无边框：近似于全部显示，只是 SWF 文件的某些部分可能会被裁剪掉。 严格匹配：整个 SWF 文件将填充指定区域，但不保持 SWF 文件的纵横比并且可能会出 现扭曲。 3.视频的类型 累进式下载视频---将 Flash 视频(FLV)文件下载到站点访问者的硬盘上， 然后播放。 但是， 与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视 频文件。 流视频----- 对 Flash 视频内容进行流式处理，并在一段可确保流畅播放的很短的缓冲时 间后在 Web 页面上播放该内容。四、插入音频1． 现有有的声音文件： a& MIDI 格式 以 MIDI 格式存储的音频的格式是 .mid 或 .midi。 b& RealAudio 格式 以 RealAudio 格式存储的音频，其扩展名是 .rm 或 .ram。 c& AU 格式 以 AU 格式存储的音频，其扩展名是 .au。 d& WMA 格式 以 WMA 格式存储的音频，其扩展名是 .wma。 e& SND 格式 以 SND 格式存储的音频，其扩展名是 .snd。 f& WAVE 格式 以 WAVE 格式存储的音频，其扩展名是 .wav。 g& MP3 格式 (MPEG) 以 MP3 格式存储的音频，其后缀是 .mp3, 或 .mpga（针对 MPG Audio） 。 使用哪种格式？42 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智经常使用的格式： MP3 格式，RealAudio 格式，wma 格式 ，mid 格式2． 插入方法： 1） 直接插入 Html 标记 &bgsound src=&11.mp3& autostart=true loop=-1& 2）插件嵌入到网页中 1. 概念：将声音直接集成到页面中，但访问者具有所选声音文件的适当插件后， 声音才可以播放。 2. 作用：可以用作背景音乐，可以在页面上控制播放器外观，声音的开始点和 结束点，声音的音量等。 3. 方法： 1) 在“设计”视图中，将插入点放置在您要嵌入文件的地方，然后执行以下操作之一： a：在“插入”栏的“常用”类别中，单击“媒体”按钮，然后从弹出菜单中选 择“插件”图标。 b：选择“插入记录 ”&“媒体”&“插件” 。 2) 在属性检查器中，单击“链接”文本框旁的文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路 3) 通过在适当的文本框中输入值或者通过在 “文档” 窗口中调整插件占位符的大小，输入宽度和高度。 4) 这些值确定音频控件在浏览器中以多大的大小显示。43 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第八章 ＡＰ目的、要求: 知识要点： ＡＰ ＤＩＶ元素的定义 编辑ＡＰ ＤＩＶ元素――案例 层的可见性设置 层的溢出与裁切 层的嵌套 ＡＰ ＤＩＶ元素与表格的转换 重点：编辑ＡＰ ＤＩＶ元素――案例 难点：层的嵌套 ＡＰ ＤＩＶ元素与表格的转换 教学步骤： 基础知识讲解――实践操作讲解――学生实践ＤＩＶ元素教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作44 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智课后分析与小结：第八章：AP DIV 元素 一、创建 AP DIV 元素 什么是 Ap Div？ AP 元素（绝对定位元素）, 是一种 HTML 网页元素，一般称为 “层”。即网页内 容的容器，包含文本，图像或其他任何可以在 HTML 文档正文中放入的内容。 且可以精确定位在网页中的任何地方。 特点： 1、作为容器，可以放置其他网页元素。 2、灵活定位。DIV 是一个容器，在 HTML 页面中的每个标签对象几乎都可以称得上是一个容器，例 如使用 P 段落标签对象。 &div&文字内容&/div& DIV 是 HTML 指定的，专门用于布局设计的容器对象。在传统的表格式的布局当中之 所以能进行页面的排版布局设计，完全依赖于表哥对象 table。在页面当中绘制一个由多个 单元格组成的表格，在相应的表格中放置内容，通过表格单元格的位置设置，达到实现布局 的目的。 如果需要在网页中插入 DIV，可以像插入其他的 HTML 元素一样，只需在代码中应用 &div&&/div&这样的标签形式，将内容放置在其中，便可以应用 DIV 标签。45 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智在 CS5 中， 系统使用 DIV 标记和 CSS 技术来实现 AP 层对象的效果， 所以也称 绝对定位的 DIV 标记。二、编辑 AP DIV 元素 1、调整层的大小 2、层的层次关系 3、层的首选设置 4、层的对齐 实例：课程预览三、层的可见性设置 1. AP 面板的使用（选择、命名、隐藏、次序） 2. 层的可见性 3. 简单的层特效 实例：点击控制图片的显示四、层的溢出与裁切 1．溢出可见性 2．裁切显示46 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智五、层的嵌套DIV 对象除了可以直接放入文本和其他标签，还可以多个 DIV 标签进行嵌套使用，最 终的目的是合理表示出页面的区域。 在插入点：选择该选项，即在当前光标所在的位置插入相应的 DIV。 在标签之前：选择该选项后，在第二个下来列表中选择标签，可以在所选择的标签之前 插入相应的 DIV。在开始标签之后：选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签 的开始标签之后插入相应的 DIV. 在结束标签之前：选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签 的结束标签之前插入相应的 DIV。 在标签之后：选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签之后 插入相应的 DIV. PS:大家都知道 HTML 标签是成对出现的，以上结果大家可以动手测试，不要太懒。嵌套的含义：嵌套并不表示一个在另外一个里面显示，而是指一个 AP 元素的代 码在另一个 AP 元素代码的内部。嵌套的 AP 元素会随着父 AP 元素的移动而 移动，继承父 AP 元素的可见性。 1、 AP 层对象元素的嵌套方法： 1）.将光标置于 AP 元素内。 2）.工具栏中，插入-布局-拖动“绘制 AP Div”到 AP 元素内。47 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2、 标尺、辅助线的使用六、AP DIV 与表格的转换 1、不重叠性 2、网格的使用 3、表格与 AP DIV 的转换授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排２ ４教学单元（教学章、节或主题） ：第九章 行为目的、要求: 知识要点： 晃动的图片 弹出窗口实例 设置文本行为 交换图片实例 拖动ＡＰ元素 修改属性行为 动态菜单实例 特效脚本代码的使用 重点：交换图片实例――案例 难点：拖动ＡＰ元素 特效脚本代码的使用 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作48 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智课后分析与小结：第九章：行 为 一、晃动的图片 1）什么是行为？ “行为” 可以说是 Dreamweaver 中最具特色的功能之一， 它提供了很多实 用的动作，每个动作可以完成特定的任务，为网页添加不少特殊效果。 2）实例制作：晃动的图片 技巧：添加行为的时候一般遵循 3 个步骤： ? 选择对象。 ? 添加动作。 ? 调整事件。 对象是指接受事件的主体 1. 事件 ? 事件是触发动态效果的原因，它可以被附加在各种页面元素上，也 可以被附加到 HTML 标记中。常用的事件：鼠标的移动或者点击 时，键盘的输入和控制等等。 2. 动作 ? 动作其实是一段网页上的 JavaScript 代码，这些代码在特定事件被 激发时执行，从而实现访问者与 Web 页进行交互，以多种方式更 改页面或执行某些任务。 行为是动作和触发该动作的事件的结合体49 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智注意使用动作的对象必须要有个 ID二、弹窗实例 1 行为面板的使用 1) 打开行为面板（快捷方式：Shift+F4） 2) 认识行为面板显示设置事件 显示所有事件 添加行为 删除事件 移动事件顺序 命令控制菜单 2 实例： 弹出信息 刚刚的实例，对象是：网页正文部分；事件是： onload 页面打开； 动作是弹出信息框。 常见事件： OnMouseOver 鼠标经过 OnMouseout 鼠标离开 OnLoad 打开 OnUnload 关闭3 实例：弹出网页窗口三、设置文本行为 1 ) 状态栏文字 2）设置文本域文字（注意使用动作的对象必须要有个 ID）事件解读： onFocus 事件在对象获得焦点时发生50 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智onBlur 事件会在对象失去焦点时发生 onClick 事件会发生在点击时 onDblclick 事件会发生在双击时 onmouseDown 事件会在鼠标按键被按下时发生 onmouseUp 事件会在鼠标按键被松开时发生 onmouseOver 事件会在鼠标指针移动到指定的对象上时发生 onmouseOut 事件会在鼠标指针离开到指定的对象上时发生 onmouseMove 事件会在鼠标指针移动时发生 onkeyDown 事件会在用户按下一个键盘按键时发生 onkeyPress 事件会在键盘按键被按下并释放一个键时发生 onkeyUp 键盘按键被松开时发生 四、交换图片实例 该行为可以实现图片的转换，常用来做广告条或产品展示。五、拖动 AP 元素 实例：拼图游戏 背景层参数 height: 220 width: 220 background-color: #F9EEF2; border: 1px solid #009900; 图片层 width:110 height:110六、修改属性行为 一种比较灵活的行为，可以通过事件来触发某个对象属性值的变化。 注意：每个被修改属性的对象必须设置唯一的 ID。51 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智七、动态菜单实例八、效果行为的应用九、特效脚本代码的使用 实例 1：跑马灯文字效果52 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智实例 2：鼠标特效的使用实例 3：图片展播53 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智1）样式 1 代码&script& var widths=282; //图片宽 var heights=164;//高 var counts=4;//图片数量 img1=new Image ();img1.src='sx/1.jpg'; //图片的位置 img2=new Image ();img2.src='sx/2.jpg'; img3=new Image ();img3.src='sx/3.jpg'; img4=new Image ();img4.src='sx/4.jpg'; url1=new Image ();url1.src='http://www.51zxw.net';//图片链接地址 url2=new Image ();url2.src='http://www.51zxw.net'; url3=new Image ();url3.src='http://www.51zxw.net'; url4=new Image ();url4.src='http://www.51zxw.net'; var nn=1; var key=0; function change_img() {if(key==0){key=1;} else if(document.all) {document.getElementById(&pic&).filters[0].Apply();document.getElementById(&pic&).filters[ 0].Play(duration=2);} eval('document.getElementById(&pic&).src=img'+nn+'.src'); eval('document.getElementById(&url&).href=url'+nn+'.src'); for (var i=1;i&=i++){document.getElementById(&xxjdjj&+i).className='axx';} document.getElementById(&xxjdjj&+nn).className='bxx'; nn++;if(nn&counts){nn=1;} tt=setTimeout('change_img()',4000);} //图片过渡时间长度 function changeimg(n){nn=n;window.clearInterval(tt);change_img();} document.write('&style&'); document.write('.axx{padding:1px 7border-left:#cccccc 1}'); document.write('a.axx:link,a.axx:visited{text-decoration:color:#line-height:12fo nt:9px sans-background-color:#666;}'); document.write('a.axx:active,a.axx:hover{text-decoration:color:#line-height:12f ont:9px sans-background-color:#999;}');54 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智document.write('.bxx{padding:1px 7border-left:#cccccc 1}'); document.write('a.bxx:link,a.bxx:visited{text-decoration:color:#line-height:12fo nt:9px sans-background-color:#D34600;}'); document.write('a.bxx:active,a.bxx:hover{text-decoration:color:#line-height:12f ont:9px sans-background-color:#D34600;}'); document.write('&/style&'); document.write('&div style=&width:'+widths+'height:'+heights+'overflow:text-overflow:&&'); document.write('&div&&a id=&url&&&img id=&pic& style=&border:0filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyl e=4, motion=forward)& width='+widths+' height='+heights+' /&&/a&&/div&'); document.write('&div style=&filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2text-align:top:-12position:margin:1height:12padding:0margin:0border:0&&'); for(var i=1;i&counts+1;i++){document.write('&a href=&javascript:changeimg('+i+');& id=&xxjdjj'+i+'& class=&axx& target=&_self&&'+i+'&/a&');} document.write('&/div&&/div&'); change_img(); &/script&1） 样式 2 代码 以下代码放入&head&&/head&之间&style type=&text/css&& /* Reset style */ * { margin:0; padding:0; word-break:break- } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans- } h1, h2, h3, h4, h5, h6 { font-size:1 } a { color:#0287CA; text-decoration: } a:hover { text-decoration: } ul, li { list-style: } fieldset, img { border: } legend { display: } em, strong, cite, th { font-style: font-weight: } input, textarea, select, button { font:12px Helvetica, Arial, sans- } table { border-collapse: } html { overflow:-moz-scrollbars- } /*Always show Firefox scrollbar*/ /* iFocus style */ #ifocus { width:525 height:245 margin:20 border:1px solid #DEDEDE; background:#F8F8F8; } #ifocus_pic { display: position: float: width:410 height:225 overflow: margin:10px 0 0 10 } #ifocus_piclist { position: } #ifocus_piclist li { width:410 height:225 overflow: } #ifocus_piclist img { width:410 height:225 } #ifocus_btn { display: float: width:91 margin:9px 9px 0 0; } #ifocus_btn li { width:91 height:57 cursor: opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_btn img { width:75 height:45 margin:7px 0 0 11 } #ifocus_btn .current { background: url(http://zzjs.net/by yourself) no- opacity:1; -moz-opacity:1; filter:alpha(opacity=100); } #ifocus_opdiv { position: left:0; bottom:0; width:410 height:35 background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_tx { position: left:8 bottom:8 color:#FFF; } #ifocus_tx .normal { display: } &/style& &script type=&text/javascript&& function $(id) { return document.getElementById(id); }55 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智function addLoadEvent(func){ var oldonload = window. if (typeof window.onload != 'function') { window.onload = } else { window.onload = function(){ oldonload(); func(); } } } function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) if (!document.getElementById(elementID)) var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = &0px&; } if (!elem.style.top) { elem.style.top = &0px&; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { } if (xpos & final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + } if (xpos & final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - } if (ypos & final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + } if (ypos & final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - } elem.style.left = xpos + &px&; elem.style.top = ypos + &px&; var repeat = &moveElement('&+elementID+&',&+final_x+&,&+final_y+&,&+interval+&)&; elem.movement = setTimeout(repeat,interval); } function classNormal(iFocusBtnID,iFocusTxID){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); for(var i=0; i&iFocusBtns. i++) { iFocusBtns[i].className='normal'; iFocusTxs[i].className='normal'; }56 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智} function classCurrent(iFocusBtnID,iFocusTxID,n){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); iFocusBtns[n].className='current'; iFocusTxs[n].className='current'; } function iFocusChange() { if(!$('ifocus')) $('ifocus').onmouseover = function(){atuokey = true}; $('ifocus').onmouseout = function(){atuokey = false}; var iFocusBtns = $('ifocus_btn').getElementsByTagName('li'); var listLength = iFocusBtns. iFocusBtns[0].onmouseover = function() { moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (listLength&=2) { iFocusBtns[1].onmouseover = function() { moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } } if (listLength&=3) { iFocusBtns[2].onmouseover = function() { moveElement('ifocus_piclist',0,-450,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } } if (listLength&=4) { iFocusBtns[3].onmouseover = function() { moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } } } setInterval('autoiFocus()',5000); var atuokey = function autoiFocus() { if(!$('ifocus')) if(atuokey) var focusBtnList = $('ifocus_btn').getElementsByTagName('li'); var listLength = focusBtnList. for(var i=0; i&listL i++) { if (focusBtnList[i].className == 'current') var currentNum = } if (currentNum==0&&listLength!=1 ){ moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } if (currentNum==1&&listLength!=2 ){ moveElement('ifocus_piclist',0,-450,5);57 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } if (currentNum==2&&listLength!=3 ){ moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } if (currentNum==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==1&&listLength==2 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==2&&listLength==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } } addLoadEvent(iFocusChange); &/script&以下代码为：复制到需要展示的位置&div id=&ifocus&& &div id=&ifocus_pic&& &div id=&ifocus_piclist& style=&left:0; top:0;&& &ul& &li&&a href=&#&&&img src=&cimg/11.jpg& alt=&zzjs net& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li&&a href=&#&&&img src=&cimg/22.jpg& alt=&zzjs net& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li&&a href=&#&&&img src=&cimg/33.jpg& alt=&zzjs net& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li&&a href=&#&&&img src=&cimg/00.jpg& alt=&zzjs net& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &/ul& &/div& &div id=&ifocus_opdiv&&&/div& &div id=&ifocus_tx&& &ul& &li class=¤t&&视频教学：www.51zxw.net&/li& &li class=&normal&&专注于网页特效及广告代码。&/li& &li class=&normal&&找 js 特效，来这里就对啦，做最帅最酷的 js 特效网站。&/li& &li class=&normal&&站长，网页设计师，看了都会喜欢的网站，收藏起来吧。&/li& &/ul& &/div& &/div&58 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智&div id=&ifocus_btn&& &ul& &li class=¤t&&&a href=&&#ZC_BLOG_HOST#&?cat=12& target=&_blank&&&img src=&cimg/11.jpg& alt=&& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li class=&normal&&&a href=&&#ZC_BLOG_HOST#&?cat=10& target=&_blank&&&img src=&cimg/22.jpg& alt=&& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li class=&normal&&&a href=&&#ZC_BLOG_HOST#&?cat=5& target=&_blank&&&img src=&cimg/33.jpg& alt=&& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &li class=&normal&&&a href=&http://www.zzjs.net& target=&_blank&&&img src=&cimg/00.jpg& alt=&& onload=&return imgzoom(this,600);& onclick=&javascript:window.open(this.src);& style=&cursor:&/&&/a&&/li& &/ul& &/div& &/div&授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排２ ４教学单元（教学章、节或主题） ：第十章 ＣＳＳ样式表的应用目的、要求: 知识要点： ＣＳＳ概念 如何编辑ＣＳＳ样式 ＣＳＳ样式选择器 案例――――ＣＳＳ美化页面 选择器的复合声明 ＣＳＳ的嵌套与继承 应用ＣＳＳ到网页 综合实例操作 CSS 使用技巧 重点：ＣＳＳ样式选择器 案例――――ＣＳＳ美化页面 选择器的复合声明 难点：ＣＳＳ的嵌套与继承59 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：第十章 CSS 样式表的应用如果说目前在 Web 设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV 页面的布局 无疑是其中之一1．CSS 的概念 ：CSS（Cascading Style Sheet），中文译为层叠样式表，是用 于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 对于一个网页设计者来说，HTML 语言一定不会感到陌生，因为它是所有 网页制作的基础。 但是如果希望网页能够美观、 大方， 并且升级方便， 维护轻松， 那么仅仅 HTML 是不够的，CSS 在这中间扮演着重要的角色。本课从 CSS 的基本 概念出发，介绍 CSS 语言的特点，以及如何在网页中引入 CSS，并对 CSS 进行初 步的体验。（其实我们在前面的课程中已经接触到） 作用：例子演示。 从 CSS 对标记的控制入手， 讲解 CSS 的初步知识以及编辑方法。希望大家能够掌 握下一面几个方面的内容：? ? ?标记的概念 传统 HTML 的缺点 CSS 的引入&style type=&text/css&&60 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智&!-body,td,th { font-size: 12 color: #FF0000; } --& &/style& 特点：1） 灵活控制网页中的每个元素的样式 2） 把内容和格式处理相分离，提高工作效率注：CSS 是 1996 年由 W3C 审核通过，并且推荐使用的。简单的说 CSS 的引入就 是为了使得 HTML 能够更好的适应页面的美工设计。它以 HTML 为基础，提供了丰 富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针 对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影 仪、PDA 等等。CSS 的引入随即引发了网页设计的一个又一个新高潮，使用 CSS 设计的优秀页面层出不穷。 2.如何编辑 CSS 样式1) 属性面板快捷操作 2）使用 CSS 样式面板A．管理 CSS 规则按钮（添加按钮、链接按钮、修改按钮、删除按钮） B．显示规则列表（显示全部元素的样式、显示当前编辑元素的样式） C．显示所选规制属性 D．查看 CSS 属性视图按钮（分类、按字母排列、显示设置）61 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智3）手工输入代码3.CSS 选择器 选择器（selector）是 CSS 中很重要的概念，所有 HTML 语言中的标记都是通过 不同的 CSS 选择器进行控制的。用户只需要通过选择器对不同的 HTML 标签进行 控制，并赋予各种样式声明，即可实现各种效果。希望大家能够掌握以下几个方 面的内容：标记选择器（对标记起作用）类别选择器ID 选择器62 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智同一个 Id 选择器不能同时出现在两个标记中的，原因是 id 不但用于 CSS 同时 也是 javascript 语法的一个目标设置。所以相同的 id 名称会造成混乱。 4.小试牛刀-css 美化页面1） 2） 3) 4） 设置网页属性设置（字体 12 像素、黑色；背景图片 bg.gif；边距均为 0） 创建表格边框样式 .line （颜色#CC66FF） 设置底部文字的样式 .white （字体白色） 美化输入文本框样式 .input5．选择器的复合声明 在利用 CSS 选择器控制 HTML 标记时， 除了每个选择器的属性可以一次声明多个， 选择器本身也可以同时声明多个， 并且任何形式的选择器包括标记选择器、 class 类别选择器、ID 选择器等都是合法的。 6． CSS 的嵌套与继承 1）选择器的嵌套 2 继承，简单的说就是将各个 HTML 标记看作一个个容器，其中被包含的小容器 会继承所包含它的大容器的风格样式。 我们在这里从页面各个标记的父子关系出 发，讲解 CSS 的继承。 7. 应用 CSS 到网页中 在对 CSS 有了大致的了解后， 便希望使用 CSS 对页面进行全方位的控制。我们在 这里主要介绍如何使用 CSS 控制页面，以及其控制页面的各种方法，包括行内样 式、内嵌式、链接式、导入式等。并最后探讨各种方式的优先级问题。希望大家 能够掌握以下几个方面的内容：? ? ? ?内嵌式 行内样式 链接式 导入样式（写在 head 头部信息中） （写到 html 标记里面） （适合多个页面使用）63 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智?各种方式的优先级问题 》链接式行内样式》内嵌式 8.综合实例1） ．新建名称为“.title1”的类样式，定义在样式表文件“css2.css”中，具体设 置如下：类型分类下设置：字体“隶书” ，大小“24” ，颜色“#FF0000”理解 “行高” 的定义2）.新建名称为“.tb”的类样式，定义在样式表文件“css2.css”中，具体设置 如下：在“背景”分类下设置背景颜色为“#EEDEDB” 。64 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智3） ．新建关于标签“body”的样式，定义在新的样式表文件“ css2.css”中，具 体设置如下：分类 类型 背景 区块具体设置 字体“楷体” ，大小“14” ，行高“16” 背景颜色“#DFC0BB” 文本对齐“居中”所有浏览器都支持 vertical-align 属性。可能的值值 描述 默认。元素放置在父元素的基线上。baseline65 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智sub垂直对齐文本的下标。 H20 垂直对齐文本的上标super52=25top把元素的顶端与行中最高元素的顶端对齐 把元素的顶端与父元素字体的顶端对齐 把此元素放置在父元素的中部。 把元素的顶端与行中最低的元素的顶端对齐。 把元素的底端与父元素字体的底端对齐。 长度单位与基线的位移数值 使用 &line-height& 属性的百分比值来排列此元素。允许使用负值。 规定应该从父元素继承 vertical-align 属性的值。text-topmiddlebottomtext-bottomlength%inherithttp://www.w3school.com.cn/css/css_reference.asp4） ．新建名称为“.copy”的类样式，定义在样式表文件“css2.css”中，具体设 置如下： 分类 类型 具体设置 字体“宋体” ，大小“12” ，行高“25” 颜色“#333333” 背景 区块 背景颜色“#04A292” 文本对齐“居中”5）. 新建名称为“.img01”的类样式，定义在样式表文件“ css2.css”中，具体 设置如下： 分类 边框 方框 具体设置 样式 “outset” ， 宽度 “4px” ， 颜色 “#846761” 宽“270px” ，高“180px” ，浮动“向左” 填充“5px” ，边界“5px”66 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智6）. 新建名称为“.lead”的类样式，定义在样式表文件“css2.css”中，具体设 置如下： 分类 类型 具体设置 字体“宋体” ，大小“14” ，行高“25” 颜色“#FFFFFF” 背景 背景颜色“#03756B”67 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智区块 方框 边框文本对齐“居中” 宽“109” ，高“25” 样式： “上”下拉列表框中选择“实线” 宽度：取消全部相同 “右”下拉列表框 “1”“上” 、 “下” 、 “左”下拉列表框 “0” 颜色：取消全部相同 “右”下拉列表框 “#FFFFFF”7） ．设置链接样式 超级链接的 4 种状态 a:link a:visited a:hover a:active 超链接默认状态 已经浏览过的链接 鼠标经过时 点击链接时鼠标经过时背景颜色为：#33FF998．重建 css 样式表文件 css3.css，改变网页风格。例如:下图样例。 要点：1)、练习配色。68 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智2) 使用样式表的滤镜，对图片增加效果。69 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=300, FinishY=240); height: 300 width: 660Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity：透明度级别，范围是 0-100，0 代表完全透明，100 代表完全不透明。 FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是 0 到 100。 Style： 设置渐变透明的样式， 值为 0 代表统一形状、1 代表线形、2 代表放射状、 3 代表长方形。 StartX 和 StartY：代表渐变透明效果的开始 X 和 Y 坐标。 FinishX 和 FinishY：代表渐变透明效果结束 X 和 Y 的坐标。9. CSS 使用技巧70 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智1）CSS 禁用/启用 CSS 禁用/启用允许您直接从 CSS 样式面板禁用和重新启用 CSS 属性。 禁用 CSS 属性只 会取消指定属性的注释，而不会实际删除该属性。 2）CSS 检查 检查模式允许您以可视化方式详细显示 CSS 框模型属性，包括填充、边框和边距，无需读 取代码，也不需要独立的第三方实用程序（如 Firebug） 。 3）浏览器兼容性测试 由于不同的浏览器对 CSS 样式标准的执行情况不一样，会导致同样的网页在不同的浏览器 中显示的差异性。DIV＋CSS 网页排版具有利于 SEO 和网页打开速度更快的优点，然而浏览器兼容 问题一直困绕着许多从事 DIV＋CSS 网页排版的美工人员。 设计时主要要兼顾 IE 系列浏览器（ie 6、ie7、ie8） 火狐浏览器71 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第十一章 DIV层布局与Spry构建目的、要求: DIV 布局页面：ＤＩＶ＋ＣＳＳ页面布局是网页设计的发展方向，很多网站从表格布局发展到ＤＩＶ 布局，本节主要是入门，了解如何使用 DIV 布局页面。 知识要点：重点：Spry 构件，可以把 Spry 构件看做一种控件，是事先已经设计好的模块，我们可以直接将其添加 到网页中，快速的实现比较炫酷的网页效果。 难点： 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：72 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智1;认识 Spry 构件：Spry 功能不仅增加了页面布局形式，简化并增强了表单的验证功能，还 与 XML 数据相结合，方便构造动态数据显示，本例就将一些新功能集合到一个网页中。 1）Spry 构件 2）Spry 验证表单 3）Spry XML 数据显示重点学习：Spry 构件，可以把 Spry 构件看做一种控件，是事先已经设计好的模块，我们可 以直接将其添加到网页中，快速的实现比较炫酷的网页效果。 Spry 构件类型： 1）Spry 菜单栏 2）Spry 选项卡式面板 3）Spry 折叠式 4）Spry 折叠面板 5）Spry 工具提示我们将通过一个综合实例，结合 DIV 布局来学习各种构件的使用。 2 DIV 布局页面：ＤＩＶ＋ＣＳＳ页面布局是网页设计的发展方向，很多网站从表格布局发 展到ＤＩＶ布局，本节主要是入门，了解如何使用 DIV 布局页面。 1）先建立 DIV 标签 2）设置对应的 CSS 样式 注意：插入 DIV 标签的位置 技巧：默认情况下两个 DIV 标记上下进行编排的，如果要让两个 DIV 层并排显示，可以用 float 这个属性。 3 Spry 菜单栏 4 Spry 选项卡式面板 5 Spry 折叠式 6 Spry 折叠面板 7 Spry 工具提示73 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智授课时间 授课方式 （请打√） 理论课√ 讨论课□ 实践课√ 习题课√ 其他□课次 课时 安排1 2教学单元（教学章、节或主题） ：第十二章 网站的发布目的、要求:了解Dreamweaver，学会利用Dreamweaver制作网页。知识要点：Dream weaver 的基本知识；用 Dreamweaver 发布网站。重点： 难点： 教学步骤： 基础知识讲解――实践操作讲解――学生实践 教具及教学手段： （如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等） 电脑，资料光盘，案例讲解，多媒体讲解，实践操作 课后分析与小结：74 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智75 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智76 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智77 重庆电讯职业学院计算机与传媒系课程： 《Dreamweaver》教案执笔人：徐顺智【学习步骤】在发布网站之前先使用 Dreamweaver 站点管理器对你的网站文件进行检查和整理， 这一步很 必要。可以找出断掉的链接、错误的代码和未使用的孤立文件等，以便进行纠正和处理。 步骤如下：在编辑视图点「站点」菜单＞选“检查站点范围的链接”，弹出“结果”对话框， 如下图下图是检查器检查出本网站与外部网站的链接的全部信息， 对于外部链接， 检查器不能 判断正确与否，请自行核对。下图是检查器找出的孤立文件， 这些文件您的网页没有使用， 但是仍在你的网站文件夹 里存放，上传后它会占据有效空间，应该把它清除。}
我要回帖
更多关于 linux 创建嵌套文件夹 的文章
更多推荐
- ·田馥甄代表歌曲发行过几张正式专辑？
- ·微博微信号好久没有登录怎么把他找回 突然登录如何找回以前的收藏？
- ·欲贷款买车，哥瑞，思域，买卡罗拉还是本田XRV好-V选哪个？
- ·电视剧绿色青山好日子全部演员中钱满多儿子的扮演者是谁？叫什么名字？
- ·无名指手指头被篮球砸了一弯就疼怎么回事到不能弯曲很痛对以后生长有影响吗？
- ·平板电脑电充上没反应怎么连不上电呢
- ·为什么我的百度贴吧总是未响应登不上，大家有这种情况吗，总是显示获取数据失败
- ·韩泰韩泰汽车轮胎怎么样样 韩泰轮胎选购指南
- ·易语言怎么注释的注释到底会不会被编译出来
- ·笔记本电脑要不要装电脑管家下载电脑管家
- ·数据类型的隐式类型转换规则则主要有哪两种？
- ·微信安卓收藏转发朋友圈如何同时导出几篇文章转发给朋友
- ·只要加入远程开启对方摄像头号码能摄像
- ·简单的c语言程序简单问题
- ·大家看看我的读书方法可以吗？我先把想读书不知道读什么词的意思给标出来，再用百度一下。一章一章的把文章读懂读通。
- ·皇家利华注册需要邮箱验证吗？
- ·怎么样才能把公司资质放在网上怎样查询企业资质
- ·华为应用市场的安全卡怎么用华为花瓣兑换换
- ·绘制计算机绘制网络拓扑图软件的步骤?
- ·在APdiv中创建以后嵌套 多层嵌套是什么意思思
- ·壹门徒壹心娱乐公司地址址在哪里?
- ·到底该不该熟悉了解 掌握 熟悉 精通struts2的ONGL
- ·有没有一款可以拼读英语单词拼读的软件打比方，播放一个单
- ·到底什么是xmos数字界面面
- ·如何在百度知道升级中升级？
- ·非常见问题需要大神！ps。photoshop，ctrl＋alt＋T的问题，command ctrl＋alt＋t变换意外变形的问题！
- ·如何将变量里的东西变成字符串如何变成数组
- ·2016年12月银行转账1日后微信转账多久能到
- ·免费officee作用
- ·那些独立游戏制作人人或者主程序员都会玩自己出的游戏么
- ·赛钛客rat鼠标rat系列怎么样
- ·持球位，催化林梅与催化甄淑喜谁更强
- ·打了封闭针肌肉萎缩可以治愈吗后还会继续萎缩吗
