《Dreamweaver网页设计》教案
2018-07-17 36页 doc 148KB 106阅读
is_637320
暂无简介
举报
《Dreamweaver网页设计》教案《Dreamweaver网页设计》教案
2012 — 2013学年第1学期
课程名称 Dreamweaver网页制作 授课对象 全校各专业学生 授课教师 周 改 云 职 称 讲 师 教材版本 《dreamweaver网页制作实用教程》
张新成 缪亮编著 参 考 书1.《Dreamweaver 经典范例教程》
2.dreamweaver网页设计与制作》
平顶山学院教务处印制
第1章 网页设计基础
熟记站标、导航条、广告条、按钮等网页构成要素，以及
网页、网站、IP地址、域名、网址等概念;了解网页的本教学目标与要求...
《Dreamweaver网页》
2012 — 2013学年第1学期
课程名称 Dreamweaver网页制作 授课对象 全校各专业学生 授课教师 周 改 云 职 称 讲 师 教材版本 《dreamweaver网页制作实用教程》
张新成 缪亮编著 参 考 书1.《Dreamweaver 经典范例教程》
2.dreamweaver网页设计与制作》
平顶山学院教务处印制
第1章 网页设计基础
熟记站标、导航条、广告条、按钮等网页构成要素，以及
网页、网站、IP地址、域名、网址等概念;了解网页的本教学目标与要求
质和网页的布局类型和HTML文档的基本结构，熟练掌握
网站建设的基本流程。
重点:站标、导航条、广告条、网页、网站、IP地址、域教学重点
名、网址等概念，以及网站建设的流程
难点: IP地址、域名、网址，HTML文档的基本结构及其教学难点
常见标签
提问、启发、图示、情景教学、案例、课堂讨论 教学方法
教学课时 2课时
第1章 网页设计基础 教学
提示
以提问的方式引入课程 导入课程:大家会输入文字、制作和处理图像、
设计动画，如何把这些作品放到internet中，
让更多的人去查阅和欣赏呢,---DW就可以制
作网页。
采用课堂讨论教学法，打开几个典型1.网页的构成要素和组成元素
的网页让同学们讨论总结构成要素, 网页的构成要素:站标、导航条、广告条、和组成元素。
标题栏和按钮;
, 网页的组成元素:文字、图片、动画(gif、
flash)、表单(交互功能)、音频、视频、
超链接、表格、框架、导航等。
2.网页相关知识简介
, 基本概念: 打开一个搜狐主页，保存成不同的类
型，让大家看保存的效果，加深对网, 网页的本质
页本质的理解;
先打开一个网页的源文件，结合网络
常识，详细讲解网页的定义，然后略, 网页、网站、主页、互联网
讲网站和主页的概念。并提醒同学理 解并记忆这些概念。
以注册和登录邮箱为例，对比讲解动
态网页和静态网页的特点和区别。 , 动态网页、静态网页 以平顶山学院和搜狐网站的IP地址
, IP地址、域名、网址(url)、浏览器与域名为例，简要讲述这两个概念。
通过查看知名网站的网址引入等概念
url的定义和组成，其它概念略讲。 提醒学生理解并记忆上述概念。
打开一网页(详细讲解网页布局效果 的教程)让学生讨论、分析总结布局
, 网页布局 类型。
, 网页布局的相关概念
, 常见的布局类型 根据学生特点简要讲解ps、flash、
fw等软件在网页设计中的功能。 , 网站管理与网页制作相关软件
, 制作和管理网页工具;
, 制作和优化网页图像工具;
, 制作网页动画工具;
, 其中Dreamweaver、 fireworks、
flash这三个软件合称为网页“三
剑客”。
, 其他小工具软件。 打开搜狐主页的源代码，让学生认识
一下html语言及其结构，然后分别, HTML语言
用记事本和dw创建2个最简单的网, HTML的概念 页，让学生细看其源代码，并详细讲
解8个基本标签及其结构关系，最后, HTML文档的基本结构
根据时间酌情讲解其它几个常见标, 几个常见的html标签: html、签。
head、title、style、script、link、
meta、body、img、p、font等。 简要讲解这两个概念，然后创建一个
网页，复制无缝循环的代码并粘贴到, XHTML语言简介 网页的body标签，让学生了解脚本
, 脚本语言简介 语言的功能。
让学生欣赏插入后的效果，吸引学生
dw的相关代码。 结合上网的经验，让学生总结网页的
设计理念。 3.网页的设计理念和配色
色彩的三要素和心理表现学生在上, 网页的设计理念 学期的ps课程中学习过，采用提问
, 色彩的三要素 法，进行复习;然后打开几个典型网
站，分析其配色方案，最后总结网页, 网页中的色彩心理与网页表现
中色彩运用的原则。
, 色彩搭配应遵循的原则
4.网站的开发流程 根据设计的先后顺序和学生一起分
析总结网站的开发流程，并用图加以? 网站需求分析
解释，重点讲解网站的需求分析，以? 设计制作网站页面 加深学生对重点知识的掌握。
? 空间和域名申请
? 测试和发布网站
? 网站推广
第一阶段:网站需求分析
规划网站 准备素材
第二阶段:创建站点，设计制作各级页面
定义站点 设置页面属性 制作页面
第三阶段:申请空间和域名 第四阶段:测试和发布网站
第五阶段:网站推广
采用课堂讨论教学法，打开几个典型5.典型网站分析 的网页让同学们讨论总结网站的构
成要素、组成元素、布局结构和配色, 页面结构
方案。 , 色彩运用
作业布置:
1.察看并对比分析大型网站(如中国网、著名学校网、著名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、著名出版社网、cctv
提问 网站、sohu、yahoo、IBM、微软等)的风格、色彩搭配与布局。 2 .察看的同时下载自己需要的文章、图片、软件等资源。
,.课后习题。
小结:通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合
运用，提高了学生的学习兴趣，从学生的反应看，授课效果很好。
第2章 Dreamweaver基础知识
熟悉Dreamweaver 8工作界面 ，熟记几个常用的工具按钮
和菜单命令;熟练掌握站点的创建步骤，能快速地创建教学目标与要求
站点;能够快速创建、打开、保存网页文档;能熟练设置页
面的属性。
1.创建站点并组织站点的结构;2. 在站点中创建网页3.页教学重点
面的属性设置
教学难点 HTML基础
教学方法 举例为主，适当讲授操作要领，提问以测试课题效果。 教学课时 2课时
第2章 Dreamweaver基础知识 教学 提示 我们一贯都是浏览网页，想自己动手做网站吗,抛出问题，引入新课
用什么工具做网站,怎样做呢,---
启动dw，详细讲解插入栏、文档标Dreamweaver网页制作工具。 签与“文档”工具栏、状态栏的作2.1 熟悉Dreamweaver 8工作界面 用，区分标签检查器、标签选择器、
标记选择符3个概念及其作用
2.2 网站创建与管理 详细讲解站点的定义、组成、结构，
2.2.1 站点的定义、组成和结构 以及文件和文件夹的命名规则。
2.2.2 网页文档与文件夹命名规则
演示站点的创建过程和步骤，着重2.2.3创建本地站点的步骤 提出保存和站点文件夹的命名。
详细讲解站点结构的组织方法和原
则。 2.2.4组织站点结构 分别演示这几个操作 2.3 网页文档基本操作
新建、保存、预览、打开、关闭 通过dw设计视图分别创建1个网
页，分别演示文档标题和边距、背2.4 基本页面属性设置 景颜色和背景图像、文本和链接属
制定文档标题和边距、网页背景颜色和背景性，以及跟踪图像的属性的设置方
法和步骤，帮助学生掌握页面的设图像，为网页设置文本属性、链接属性和跟
置过程。并总结页面设置和创建过踪图像的属性，总结页面的使用的技巧: 程中的一些使用技巧。 作业:习题一第1，2, 3 题
小结:本次课内容操作性很强，经过学生自己上台操作，发现大多数学生都能创建并组织好一个站点，还能快速地设置网页的属性，达到了教学目标的要求。
第3章 网页中的基本元素
1.熟练操作网页中的文本;
2.熟练插入各种格式的图像并设置其属性;
教学目标与要求 3.了解图像切片的作用;
4.熟练制作图像切片，并插入到dw中
1.文本对象的插入和格式设置;
2.GIF、PNG和JPEG三种图像格式 的异同点和使用环境; 教学重点
3.用fireworks制作网页切片的方法;
1.设置文本标题;段落的设置效果;
2.GIF、PNG和JPEG三种图像格式的异同点和使用环境;
教学难点 3.Dreamweaver 8.0中使用图像的一些基本方法和技巧;
4. 在dreamweaver中插入用fireworks制作的切片
课堂讲授为辅，多媒体演示为主，适当举例，提问以测试课
教学方法
题效果，实验式教学。
教学课时 4课时
第3章网页中的基本元素 教学提示
复习上节内容: 以提问的方式复习1( 如何创建站点, 上次课内容 2( 如何站点结构的组织
3.1网页中文本的操作
结合WORD，通过复习,.,., 认识文本按钮及属性面板
的方式，总结dw中• 思考题:根据以前所学知识说出文本的编辑和设置属性各
文本的操作; 包括几个方面,
,.,., 插入文本和对象
先简要演示一下各, 将文本(英文、中文、数字)添加到文档中的3种方法。 种文本符号的插入, 插入特殊字符 方法，然后输入一, 水平线 首小诗，调整其格, 插入日期:菜单法;插入栏按钮法 式;接着复制一篇, 对插入的文本也可以执行删除、搜索、替换、检查拼写文章粘贴到dw中;
最后导入一篇word(文本,检查拼写,shift+f7)等操作。
文档; ,.,., 设置文本格式
字符的样式包括的方面及其设置方法
先简要讲述一下文,.,., 设置文本标题
本格式、标题、段 标题的含义与作用
落的设置的含义和3.,., 设置段落效果
步骤，然后让学生1 . 设置段落格式
走上讲台对上述插, .缩进段落
入的文本设置相应,(对齐段落 (4种对齐方式) 的字符格式、标题,.分段与换行的相关操作和区别: 级别、段落效果，,.,.,创建项目列表 并选择个别段落创,.,网页图像的运用 建项目列表，以加,.,.,网页中图像格式简介 深印象。
1. 图像在网页中的作用和网页中常用图像格式有:GIF 、
JPEG 、PNG。
2.三种图像格式的特点和在网页中的使用场合。
在Web页上显示图片之前，通常需要考虑下列三个问题:
通过比较法讲解各,.,.,在网页中使用图像
图像格式的特点 1.插入图像: 举例:在文档中插2.插入图像占位符:注意图像占位符的命名规则和作用 入各种图像对象，3.创建鼠标经过图象(轮换图像) 并设置其格式属4. 在dw中图像的编辑功能仅适用于GIF 和JPEG 图像格式。 性。
, 在属性检面板中编辑图像，上述设置也可通过菜单实
现:修改---图像
, 用fireworks优化图像。
,(热点工具的使用和图像热区的添加
,.设置图文混排的效果:
7.制作电子相册:命令——创建网站相册
3.2.3切片在fw中的创建和在dw使用 演示制作图像热区打开大图片网页时，总是等待很长时间，怎样处理才能减少图片和图文混排的效的下载时间呢,-----做成切片。 果;演示制作电子1.切片的定义和作用 相册 2.切片在fw中的创建方法和步骤 3.在DW中插入Fireworks HTML(切片)的方法和步骤 以问题的形式引入
将Fireworks HTML插入到Dreamweaver中的方法。 切片的定义和作方法1:将切片从Fireworks复制到剪贴板上，然后直接粘贴到用。
本内容尽量调整在Dreamweaver文档代码视图中的相应位置处。
机房讲解。详细讲方法2:直接将Fireworks HTML插入到Dw中的操作步骤
解并演示切片在fw,.,网页多媒体的运用
中制作和在dw中插3.3.1在网页中使用视频flash
入的方法与步骤。 1.网页中常见的视频文件格式和插入方法;
用比较法总结网页
中出现的视频文件
的格式及其特点，2.常见的flash文件格式和插入方法; 举例讲解视频文件flash文件(.fla格式)、flash影片文件(.swf格式)、flash的插入方法和属性
设置; 模板文件(swt格式)、flash元素文件(.swc格式)、flash视
用比较法总结网页频文件(.flv格式)
中出现的flash文
件的格式及其特
点，重点讲解flash3.3.2在网页中使用音频
按钮、flash文本和
添加声音需要考虑的因素:添加的的、文件大小、声音品质和flash视频的插入在不同浏览器中的差异。 方法和属性设置; 1.音频文件的格式和相应的特点:
, 网页中常见的音频格式有: 用比较法总结网页
, mid/midi格式:。 中常见的音频文件
格式及其特点。 , wav和aif(aiff)文件
举例演示音频文件2.在网页中插入音频文件的2种方式:
的插入和属性设, 链接到音频文件
置，重点讲解背景, 嵌入声音文件
音乐的插入和设3.4dw扩展插件
置。
1.安装扩展插件
2.使用扩展插件
使用扩展插件主要有2个步骤: 重点讲解页面过度
? 先安装插件 效果、sound、
? 然后启动dreamweaver，在相应的位置找到调用扩展的命marquee和滚动链
令即可。 接的AP元素4个插
3.在“类型”栏中显示扩展的类型含义: 件的用法和设置
先演示这几个常用类型 含义
扩展插件的安装和对象 在dw界面的“插入”工具栏调用该扩展插件
使用方法，然后让命令 在dw的“命令”菜单中调用扩展
学生上台操作，教行为 在dw的“行为”面板中调用扩展
师指点操作过程和4.常用扩展插件的安装和使用
方法 Page 要选定整个页面(即body标签)，再在命令
扩展这本分内容安
transitions 菜单中找到该命令即可实现(效果见实例站排到行为之后讲解 命
有超级链接时，点中guodong1.html、 guodong2.html 、
令
页过渡(进入/guodong3.html )
退出)效果
Typewriter.mxp 先把要添加该效果的对象放入AP元素中，模拟打字 然后在行为面板中找到
行
yaromat|typewriter即可实现，文字的打
为
印效果就显示在AP元素中。
(guodong1.html中打印文字) Sound.mxp 对要选定整个页面(即body标签)，再在“常插入背景音乐 象 用”插入栏中找到sound按钮即可实现 Marquee.mxp 对要选定整个页面(即body标签)，再在“常滚动文字插件 象 用”插入栏中找到marquee按钮即可实现 Insert 把光标定位在页面的合适位置，然后选择
对
Greeting.mxp “插入”栏中的“CN Insert Greeting”按
象
插入问候语 钮即可实现
Calander.mxp 把光标定位在页面的合适位置，然后选择
对
“插入”栏中的“calander”按钮即可实
象
现
Persistent 先把要添加该效果的对象放入AP元素中，行
layers 然后在行为面板中找到ribbers zeewolde| 为
滚动链接的APPersistent layers即可实现，一般用来显
元素 示广告信息。( guodong1.html中的”送给
你了“)
作业:
1 . 填空题
(1)使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体______ ______(如粗体或斜体)和______。 (2)若要插入更多的特殊字符，请选择______ | ______ | ______或在______栏中选择______图标，选择一个字符，然后单击【确定】。 (3)在计算机领域中，图像分为________和________2大类。 (4)GIF图像采用的是________压缩格式。
2 . 选择题
(1)在网页中连续输入空格的方法是_______。
A(连续按空格键
B(按下Ctrl键再连续按空格键
C(转换到中文的全角状态下连续按空格键
D(按下Shift键再连续按空格键
(2)网页通常可以支持的图像格式有___________。
A(GIF B(BMP C(AVI
D(PSD E(PNG F(JPEG。
3.简答题
(1)网页中常用的图像格式有哪些,各有什么特点,如果在网页中添加动画格式的浮动广告，采用何种格式,为什么,电子相册，应该用哪种格式最好,
(2)如何创建鼠标变换图像和图像热点,
4.操作题:
搜集自己的喜爱的图片，制作一个电子相册。
小结:本章内容较多，但交简单，需要边讲解边对比总结，通过对比总结
和学生上台操作演示，从学生上机的作业来看，授课效果很好。
第4章 使用表格与布局表格布局网页
1.了解表格和布局表格在网页布局中的作用;
2.掌握表格和布局表格的插入方法和基本编辑方法; 教学目标与要求 3.掌握表格和布局表格、单元格和布局单元格的属性设置;
4.通过对表格和布局表格的学习，提高学生学习网页制作的兴
趣，增强学生的审美观
1(表格的插入方法、基本编辑方法与应用; 教学重点
2(布局表格和布局单元格的绘制方法、属性设置与应用
1.表格和单元格的属性设置与应用;
教学难点
2.布局表格和布局单元格的绘制与属性设置 教学方法 多媒体演示，案例教学，任务驱动，引导教学;提问式教学。 教学课时 2学时
第4章 使用表格与布局表格布局网页 教学提示
展示一个布局合理、美观用表格控制文字、图片、动化等对象的位置，使网页的布局
的网页，激起学生的学习紧凑又整齐美观。常用的页面设计布局类型有:表格、布局
兴趣。 表格和AP元素三种，本章着重讲解如何使用表格和布局表格
布局页面。
4.1.表格模式
简要讲解并3种表格模1.dw中表格的3种模式 式的作用，重点演示不同2.模式切换的操作方式: 模式下按钮的使用 查看--表格模式---标准模式/布局模式/表格扩展模式。
3.模式的区别与注意事项:
, 只有在“设计”视图中才可切换到“布局”模式;
, 在不同模式下，工具栏的各个按钮作用不同;
, 在布局模式中不能像布局表格的空白区域插入内容，
只能创建布局单元格，布局单元格才是承载具体内容
回顾word和excel中讲的容器。
过的有关表格的概念和4.2使用表格布局网页
基本操作，引入dw中表1(表格的作用 格的概念和基本操作。重2.表格的组成部分 点讲解表格的属性设置
含义。 表格的行、列、单元格、边距、间距、边框
插入一个表格，并在每个3.表格的标记
格中插入不同的内容，然, 标记、
| 标记
后切换到代码视图，让学, 三者的对应位置关系
生识记三个标签。逐一演4.表格的基本操作
示表格的各个基本操作。 , 表格的插入、选择、删除、大小调整; 重点讲解创建嵌套表格, 单元格的选择、合并、拆分、大小调整; 的原因 , 表格在“扩展表格”模式和“标准”模式下的应用 打开一个示例网页，让学5.嵌套表格 生上讲台比照着制作出, 表格嵌套的作用 相同效果
讨论总结表格布局的缺, 创建嵌套表格的操作方法。
点 6.导入和导出表格数据、
7. 表格布局网页的应用实例
8. 表格布局的缺点
4.3布局表格布局网页
重点演示并总结绘制布1.绘制布局表格 局表格和布局单元格的绘制布局表格的注意事项: 注意事项。
2.绘制布局单元格
绘制布局单元格的注意事项: 演示设置布局表格和单3.设置布局表格和布局单元格的属性和参数 元格的属性;
在设置好属性的布局单4.在布局单元格中添加内容
元格中添加文章、图像和5.课堂实例――用布局表格布局网站主页
多媒体。
先和学生一起分析左侧
网页的操作思路和主要
步骤，然后让学生上台操
作，以加深印象。
作业:
课堂作业:1.叙述3种模式的概念及切换方法。
2.说出表格和布局表格的作用
3.叙述“表格扩展模式”的作用
4.什么是间隔图像,
书面作业:课后习题。
小结:通过与学生熟悉的word中表格的操作对照讲解，本章的讲解显得较轻松;让学生上台操作，提高了学生的学习积极性和主动性，教学效果较好。
第5章 使用框架布局网页
了解框架网页的概念;熟练创建、保存框架网页，并设置框教学目标与要求
架和框架集的属性;框架中超级链接的创建和目标属性设置
熟练创建保存框架网页，并设置框架和框架集的属性;框架教学重点
中超级链接的创建和目标属性设置
框架网页的概念和保存;框架中超级链接的创建和目标属性教学难点
设置
多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲教学方法
授，师生互动，提问式教学。
教学课时 2学时
第5章 框架网页 教学提示
通过看看5.1框架和框架集的概念、结构和应用
和分析知1.基本概念
名网站使, 框架网页、框架集、框架
用框架的, 框架和框架集的关系
布局效果，2(框架网页的结构
引入框架3.认识框架面板: 和框架集4.框架网页的应用:通常用于导航。 的概念 5.框架网页的优缺点 5.2 创建和保存框架与框架集 5.2.1 使用预设的框架集
1.创建新的空预设框架的具体操作步骤。
修改框架名称必须以字母开头，可以包含数字、下划线(_);
但不允许是javascript中的保留字(如top或navigator)、连字
符(-)、句点、空格和;而且区分大小写。
2.创建预设的框架集并在某一框架中显示现有文档
5.2.2 创建和编辑框架
举例演示1.创建框架 框架的创2.删除框架 建和保存3.建立嵌套的框架集 操作 4.保存框架和框架集 5.3设置框架及框架集的属性 打开框架
面板，查看1.选择框架:通过“框架”面板来选择框架和子框架。
并总结框2.设置框架属性
架和框架, 框架的背景颜色可以在页面属性中进行设置
集的属性, 在框架的属性面板中进行设置框架的的名称、源文件、链接、
设置及其边距、滚动、边框和能否调整大小等。
含义 3.设置框架集属性:边框、边框大小和边框颜色。 5.4设置框架集中的超级链接 5.4.1在框架网页中建立超链接 演示框架5.4.2框架网页中设置超级链接的目标打开方式 中的超级1.相对链接目标:_blank 、_top 、_parent、_self 链接效果
2.绝对链接目标:mainframe、Leftframe、Rightframe、Topframe。
5.6课堂实例――制作一个框架网页
举例演示
框架网页
的设计与
制作
作业:
1.使用框架的优点是什么,
2.课后习题
小结:本章介绍了框架网页的创建、保存和属性设置，着重讲解了框架网页的中超级链接的创建和目标设置，内容较少，授课效果较好。
第6章 AP元素的创建和使用
理解AP元素的作用;熟记AP元素的命名原则和特点;掌握教学目标与要绘制AP元素和插入AP元素的方法和区别;熟练设置AP元求 素的属性;灵活、合理地使AP元素随心所欲的布局页面内
容。
AP元素的作用;AP元素的插入和绘制;AP元素的属性设置;教学重点
AP元素的特点;AP元素的应用
教学难点 AP元素的作用;AP元素的属性设置;AP元素的应用 教学方法 多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲
授，师生互动，提问式教学。
教学课时 2课时
第6章AP元素的创建和使用 教学提示
大家 在浏览网页时，注意到滚动的广告图片了吗,---它是抛出问题，引入使用AP元素做出来的效果。 新课 6.1应用AP元素布局网页 强调AP元素在6.1.1AP元素的概述 页面布局中的
1、AP元素的应用:布局网页;制作简单动画;设计特效作用
等。
2、AP元素的定义、AP元素的特点、AP元素的分类、AP
元素的优缺点、AP元素面板。 6.1.2创建AP元素 演示AP元素的
1.在首选参数对话框中设置AP元素的参数，可设置AP绘制要领;
元素嵌套和显示AP元素锚记。
2.插入AP元素与绘制AP元素
3.绘制AP元素和插入AP元素的差别
4.AP元素的html代码
5.AP元素的绝对定位(一般是默认设置)和相对定位 选择AP元素，6.1.3.AP元素属性详解 让学生观察的
1.单个AP元素的属性:AP元素编号、左和上、宽和高、属性，并详细讲
Z 轴、背景图像、背景颜色、剪辑、可见性、溢出: 解各属性的设
2.多个AP元素的属性: 置含义。
6.1.4AP元素的基本操作
激活AP元素、选择AP元素、调整AP元素大小、移动AP演示AP元素的
元素、对齐AP元素、吸附AP元素到网格 各种操作
6.1.5嵌套AP元素
6.1.6.AP元素和表格的相互转换 6.2 课堂实例――用AP元素布局网站首页 综合举例 作业:课后习题
上机作业:使用AP元素、表格和css排版网站首页
小结:本章着重讲解AP元素的创建、命名和属性设置，让学生亲自上台制作案例，加深了对新知识的印象。上机时发现学生基本都能完成操作任务，总体感觉授课效果较好。
第7章超级链接
了解超级链接的路径和链接结构;熟记超级链接目标打开方教学目标与要求 式的设置含义;熟练掌握超级链接的4种创建方法;能快速
完成5种特殊超级链接的创建方法和步骤。
1.超级链接的各种创建步骤
2.超级链接目标打开方式的设置含义
教学重点
3.超级链接的4种创建方法
4. 5种特殊超级链接的创建方法和步骤
1.超级链接的路径
教学难点
2.超级链接目标打开方式的设置含义
教学方法 多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲
授，师生互动，提问式教学。
教学课时 2课时
第7章 超级链接 教学提示 大家已经会创建不同内容的网页了，怎样把这些分散抛出问题，引入新课。的网页组合成一个统一的整体，让浏览者只打开主页(2分钟) 就能访问到其它各个面呢,----需要创建超级链接。 7.1超级链接的定义和目标选项的含义 打开几个典型网站的1 .超级链接的定义 主页，让大家分析超级2.属性检查器的“目标”弹出菜单中各个选项的含链接的功能，进而引入义:_blank、_parent、_self、_top。 超级链接的定义、分类
和目标列表的设置。让3:创建一个完整的超级链接必须考虑的4个方面:
学生讨论总结创建超 ?链接的载体 ?链接的目标
级链接的注意事项(20 ?链接的路径 ?链接目标的打开方式
分钟) 7.2超级链接的路径
通过举例和配图讲解 在dreamweaver中有三种类型的链接路径: 绝对路径、
链接路径的类型和在文档相对路径、站点根目录相对路径。
创建超级链接时路径
的书写方法(20分钟)
采用讨论法，让学生讨
7.3超级链接的分类 论总结超级链接的分
,按照链接路径的不同，网页中超链接一般分为内部链类。(8分钟)
接、锚点链接、外部链接3种类型。
,按照使用对象的不同，网页中的链接又可以分为以下
几种:文本超链接、图像超链接、电子邮件链接、锚点
链接、软件下载链接、多媒体文件链接、空链接等。 7.4超级链接的创建方法 举例讲解各种方法下
1. 使用属性检查器中链接后的文本框创建各种各样的超超级链接的创建方法
级链接; 和创建步骤，并总结各
2.使用属性检查器中的浏览文件图标创建各种各样的超级种方法的使用情况
链接; (25分钟)
3.使用“指向文件”图标创建超级链接; 借助上面讲过的创建
4.使用菜单中的“超级链接”命令创建超级链接; 方法，让学生上台操作7.5几种特殊的超级链接详解 实践，创建各种类型的
1(锚记链接 超级链接。根据情况不
2(创建脚本链接 部分内容调整到机房
3(给图像热区加上超级链接 讲解。(30分钟)
4(创建电子邮件超链接 简要讲述超级链接的
5(创建空链接 修改与更新操作。(157.6超级链接的基本操作:更新、修改、检查 分钟)
结构较为简单(15分7.7超级链接的结构 钟) 7.8总结创建超级链接的5点建议 总结并提出建议。(10
分钟) 作业:1.叙述超级链接的定义 2.说出超级链接的路径
3.说出超级链接的4种创建方法。
小结:本章内容较多，超级链接的路径较难理解;其他内容相对容易，且操作性较强，易掌握，学生基本都能创建各种类型的超级链接，总体 感觉授课效果还好。
第8章交互(行为、图AP元素和时间轴的综合运用，以及javascript)
1. 熟练地应用行为，能够随心所欲地制作出具交互功能的网
页;
2. 掌握时间轴的概念和基本用法;
教学目标与要求
3. 通过对行为的学习应用，增加网页设计的特殊效果，提高
学生对学习网页制作的兴趣，培养大家的动手操作能力。
4. 了解java脚本的基本用法
1.行为的概念和创建，2.使用DW内置的行为3.AP元素、行教学重点
为和时间轴的综合运用
1.使用DW内置的行为;2.高级行为的应用;3.AP元素、行教学难点
为和时间轴的综合运用
教 学 方 法 多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲
授，师生互动，提问式教学;任务驱动、引导教学、理论与
操作紧密结合。
教 学 课 时 4课时
第8章交互(行为、图AP元素和时间轴的综合运用，以教学提示 及js)
问题:大家已经会在网页中的特殊效果如:弹出消息、检抛出问题，导入查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、新课 礼花绽放等，这样的动态网页是如何制作的呢,使用行为 就可以实现。 举出几个典型8.1.1初步认识行为 的带有行为的1、DW行为的引出 网页显示行为2、行为的概念 的应用，进而引3、与行为相关的三个重要部分:对象、事件和动作。 出行为的作用4、认识行为面板 和相关概念(258.1.2行为的创建、修改和更新 分钟)
创建行为的三个步骤 举例讲解行为
修改行为 的创建步骤。
更新行为 (10分钟)
8.1.3使用DW内置的行为
dw8.0自带的行为主要有: 演示常用的DW1.弹出消息 2、“播放声音”实例 内置行为的操3、跳转菜单和跳转菜单开始 4、打开浏览器窗口 作步骤和要领，5、交换图象与恢复交换图象 6、控制shockshave或flash 部分调整在机7、设置导航栏图像 8、设置文本 房讲解;(30分9、显示弹出菜单(下拉菜单) 10、显示和隐藏AP元素 钟) 11、拖动AP元素 12、滚动链接的AP元素 本部分为选讲8.1.4高级行为的应用 内容。举例讲解1、插入滚动字幕 高级行为的应示例:文本自动向上循环滚动，鼠标放到上面还会暂停 用;重点讲解42、下载安装扩展插件 种扩展插件的3、下载网页特效，适当修改相关代码，再把代码放到代码视图的安装和应用效具体位置。 举例:花瓣、棉花糖。 果。(30分钟) 8.2AP元素、行为和时间轴的综合运用 举典型实例演1.时间轴面板 示AP元素和行2、时间轴和图AP元素的综合运用 为综合应用效(1)滚动字幕 (2)网页浮动动画 果(40分钟) (3)设置文字的阴影效果(4)幻灯片效果 引入特效代码，(5)控制图像播放动画 (6)制作滚动的折叠菜单 举例讲解js在(7)具有预览功能的电子相册效果 Dw中的应用。8.3在网页中应用javascript (20分钟)
1.认识代码片段面板
2.应用代码片段
3.应用举例
作业:课后习题,、,、,题
小结:通过举例，详细讲解了AP元素、时间轴和行为的综合运用。本节的内容较多，步骤也繁琐。通过视频演示和实际操作演示，加深对行为的理解，加强了学生的实际操作能力。希望同学们下去自己多多练习。学完本章，大家应该能灵活的制作出较为简单的具有特殊效果的动态网页。
第9章cssAP元素叠样式表
1.了解css的概念及样式类型
2.熟练掌握css的属性设置、能熟练操作(创建、导入、导教学目标与要求
出)cssAP元素叠样式表;
3.css和表格、css和div的综合运用
css的概念及样式类型;Css的创建及属性设置;css和表格教学重点
的综合运用
教学难点 Css的创建及属性设置;css和表格、css和div的综合运用 教学方法 多媒体演示为主，课堂讲授，师生互动，案例教学。 教学课时 4课时
第9章cssAP元素叠样式表 教学提示
抛出问题，引入打开一个没有应用样式设置的预先准备好的网页，先让学
新课 生观察设计视图中的效果，然后在IE中预览，让学生总结
显示效果的变化，这是怎么回事呢,---没有使用样式。
9.1css基础
打开几个典型1. css样式表的基本概念
的应用css的, 样式、cascading和css 网页，让大家分, Css可能改变的性质 析css的优点，, 外部css样式表的扩展名是.css。 进而引入css2.css的5个优点: 的定义、类型。 3. css面板
打开样式面板，, 打开css面板的3种方法
演示各按钮的, css面板中的按钮和功能
作用; adobe建议用css面板作为创建和编辑css的主要工具。用户可
以自己创建AP元素叠样式表，还可以dw附带的AP元素叠样式表
4.样式表类型(理解即可)
打开css样式选择器有三种(常见)类型，可以创建4种不同选择器类型的样创建的对话框，式: 通过创建过程(1)自定义css规则(类样式)，命名规则 的选择讲解css(2)html标签样式表 的类型。
(3)对于高级样式(也称ID、伪类选择器)
9.2 CSS规则详解
通过举例详细在“规则对话框”中，我们可以通过类型、背景、区块、方框、
讲解css规则边框、列表、定位和扩展项的设置，来美化页面。在定义某个CSS
的各项设置内样式时，不需要对每一个项都进行设置，需要什么效果，就选择相
容。 应的项进行设置。
先演示css创9.3创建新的CSS规则 建的具体步骤，
然后让学生上
台操作演练。
9.4应用CSS样式
9.4.1各种样式表的应用
, 应用自定义CSS样式，有下列3种方法
, 对于html标签样式和高级样式，定义仅对该文档后，会自动
应用到相应的文档中。 先讲解应用的, 对于外部的css样式表:在样式面板中选择附件样式表按钮，方法，然后通过
打开“链接外部样式表”对话框，可以链接外部的CSS样式大量举例讲解
文件。 各种样式的创
建和应用 。举, 清除样式:选中要清除样式的对象,设置成“无”样式即可。
了4个例子，分, 使用范例css样式表
别是类样式、伪9.4.2应用举例(参看课本p131-139示例)
类样式、ID样1.课堂实例――用CSS格式化文本
式、标签样式。 2.课堂实例――用CSS控制表格
3.用CSS控制列表 4.用CSS控制背景 5.用CSS控制区块 6.CSS样式滤镜的应用 9.5 编辑CSS规则和CSS样式
编辑CSS规则:在样式面板中直接双击进行修改。
编辑CSS样式:在样式列表中选中需要编辑的规则的名称，直接
单击“编辑样式”按钮，在弹出的“CSS规则定义”对话框中修
改相应的设置。
9.6 CSS样式的三种存放方式
打开代码视图，(1)直接插入 (叫内部标签):
观察各种样式
|
浙公网安备 33021202002483