《网页制作基础教程(Dreamweaver CS6 第2版)》教学指南.docx
《《网页制作基础教程(Dreamweaver CS6 第2版)》教学指南.docx》由会员分享,可在线阅读,更多相关《《网页制作基础教程(Dreamweaver CS6 第2版)》教学指南.docx(23页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、网页制作基础教程(Dreamweaver CS6 第 2 版)电子教学资料子项目2插入APDiv在编辑区域中单击鼠标,使光标出现在编辑区中。移动鼠标单击“插入”菜单,选择“布 局对象”下的“APDiv”命令。子项目3设置AP Div选中AP元素,将鼠标移动到AP元素的左上角,拖动鼠标移动AP元素的位置。选中AP元素,单击AP元素框线,将鼠标指针移动到框线的右下角上,当鼠标指针 变成,时,拖动鼠标,更改AP元素的大小。子项目4使用AP Div完成网页布局选中APDivl,在其区域内双击鼠标,插入图片,调整APDivl的大小,使得其与图片 的大小相当,同时调整其他AP元素的位置和大小。灵活使用AP
2、元素和表格,对于网页布局非常重要,在使用时要细细体味,灵活掌握。 这样你就能做出一个和他人不同的网页。第4章使用框架本章的教学目标为:(1)掌握框架的作用。(2)理解框架的优缺点。(3)能够熟练创建框架和保存框架的方法。(4)掌握设置框架的方法。本章的教学建议:本章是不是全书的重点,内容和其他章节的内容并不连贯,但作为一个知识点,要求学生 灵活掌握。一定要讲框架的作用,为什么在一些网站中频繁使用框架,哪一种类型网站使用框架比较 合适。为什么现在框架的使用范围在缩小对于保存框架需要多次保存的问题,要给学生讲透,跟别学生可能并不理解。本章的教学内容:第4章使用框架项目1框架概述子项目1框架与框架集
3、框架由单个框架和框架集两部分组成。单个框架是指浏览器窗口中的一个区域,显示的 是浏览器窗口中某一个部分的内容。而框架集有若干个单框架组成,每个单框架显示不同的 内容,整个框架集占满整个浏览器的窗口。子项目2框架的优缺点框架的一个优点是,当在一个框架页面中单击超链接时,可以在另一个框架页面中显示 内容,而不需要将第一个框架页面中的内容再做一遍。框架的另一个优点是每一个框架都有 滚动条,浏览者可以独立滚动每一个框架,这对于整个网页的交互性非常有用。但它具有的缺点确定也同样明显,难以实现不同框架中各元素的精确图形对齐,有的浏 览器不支持框架技术等等。项目2创建框架子项目1插入框架单击“插入”菜单,在
4、弹出的猜的那种选择“HTML”,然后选择其下一级菜单的“框架”, 这时弹出多种框架集的相应命令,选择一个命令,网页被分为多个区域,同时弹出“框架标 签辅助功能属性”对话框,为每一个框架制定一个标题,单击“确定”按钮,该对话框被关 闭。子项目2调整框架的大小改变框架的大小是件非常容易的事,只需将鼠标指针移至框架的分界处,当鼠标指针显 示发生变化时,将其拖至适宜的位置即可。子项目3更改框架集的样式通过对框架的拆分、删除等操作,可以实现对框架样式的更改。1.拆分框架单击鼠标,选中框架。单击“修改”菜单,在突然出的菜单中选择“框架集”,然后在 弹出的下一级菜单中选择相应命令。2.删除框架单击鼠标,选中
5、要删除的框架,将鼠标指针移动到框线上,鼠标指针变成双向箭头时, 拖动鼠标到最左端,松开鼠标,框架被删除。子项目4设置框架和框架集的属性单击“窗口”菜单,在下拉菜单中选择“框架”命令,出现“框架”面板。在该对话框 中,可以设置是否显示框架集的边框,以及边框的颜色等。子项目5保存框架保存框架与保存网页不同,Dreamweaver为每一个框架以及整个框架集各提供一个“保 存”对话框。也就是说,有N个框架,就有保存N+1个“另存为”对话框。单击菜单栏上的“文件”,可以发现“文件”菜单下的“保存”命令变成了 “保存框架” 和“框架另存为”等命令。单击“保存框架”命令,可以保存当前光标所在的网页。改变光标
6、的位置,可以激活其他区域,可以完成对所有框架文件的保存。第5章超链接的创建与管理本章的教学目标为:(1)掌握超链接的作用。(2)理解热区文本与热区图片的含义。(3)能够熟练掌握文本超链接的建立与修改。(4)掌握设置电子邮件超链接的方法。(5)熟练掌握设置图片超链接以及图片热区超链接的方法。(6)熟练掌握锚记超链接的设置方法本章的教学建议:本章是全书的核心,即使内容很少,颜色难看,布局混乱,只要存在超链接,就可以将其 称为网页,否则就不能称其为真正意义上的网页,最多只能算是一个多媒体演示文稿。一定要讲清楚超链接的各种分类,与之相对应的应用也要练习清楚,其中的重点是锚记超 链接。有的学习者可能没有
7、接触过锚记超链接,未必能理解其中的含义,最好先浏览因特网 上的实例,然后再由学生进行练习。建立超链接的方法要介绍清楚,在何种情况下用哪一种方法比较合适,最好由学习者来总结,这对于学习者归纳学习有很大帮助。本章的教学内容:第5章使用超链接根据链接的范围,超链接可以分为内部超链接、外部超链接和锚记超链接。内部超链接 是指打开的超链接对象在本网站内;外部超链接是指打开的超链接对象在WWW的其他网站 中;而锚记超链接可以链接到同一网页中的不同位置,类似于书签。根据建立超链接的不同 对象,超链接又可以分为文本超链接和图片超链接。项目1创建文本超链接子项目1创建网站内文本超链接浏览网页时候,常常会看到一些
8、蓝色带下划线的文字,将鼠标指针移动到这些文字上时, 鼠标指针变成手形,单击鼠标会打开另一个网页。这个链接就是一个文本超链接,带下划线 的文字称为热区文本。在网页中选取几个字作为建立超链接的热区文本。单击“属性”面板中的“浏览文件”按,打开“选择文件”对话框,选择网页文件,单击“确认”。除了使用上面的方法以外,还可以使用拖拽的方法。选中热区文本,在“属性”面板中 单击锚记标记金,拖拽到右面“文件”面板中的网页上,松开鼠标,即完成超链接的建立。子项目2创建网站外文本超链接首先选中“百度”两个字,然后在“属性”面板的“链接”栏中输入“百度”的Internet 土也址:子项目3创建电子邮件超链接在网页
9、中拖动鼠标,选择热区文本。单击菜单栏上的“插入”菜单,在弹出的下一级子 菜单中选择“电子邮件链接”命令,打开“电子邮件链接”对话框,输入“yuelan”, 单击“确定”按钮。注意,“mailto:与电子邮件地址(此处为yuelan)之间不能有空格。子项目4修改超链接在编辑窗口中选中需要修改的超链接的热区文本,然后在“属性”面板的“链接”文本 栏中便可以进行修改,修改完后用鼠标在任意区域单击即可。也可以单击“修改”菜单,在 弹出的菜单中单击“更改链接”命令,在其中重新选择需要链接的文件或输入正确的网址, 单击“确定”按钮完成修改。子项目5创建重新打开一个新窗口的超链接在“属性”面板中单击“目标”
10、右边的二J,在下拉菜单中选择“_blank”,然后将网页保 存。除了_blank以外,目标还有三个选项,这三个选项都与框架有关。.parent表示在显示 链接框架的父框架集中打开链接的文档,同时替换整个框架集,也就是说整个框架文件被覆 盖。_self表示在当前框架中打开链接,同时替换该框架中的内容。_top表示在当前浏览器 窗口中打开链接的文档,同时替换所有框架。项目2创建图片超链接 子项目1创建整个图片的超链接选中百度网站的LOGO图片,然后在“属性”面板的“链接”栏中输入“” 保存网页。这样就为图片文件建立了超链接。子项目2创建图片热区超链接选中整个图片,用鼠标单击“属性”面板的“矩形热点
11、工具”按钮口),在被选中的整个图 片上拖动鼠标指针,画一个虚框。单击“属性”面板中的“浏览文件”按钮夜,打开“选择 文件”对话框,在“选择文件”对话框中,选择网页文件,单击“确定”。子项目3鼠标经过图像要想实现鼠标经过图像功能,要事先准备两幅图片,和一个准备打开的网页,单击鼠标确定光标的位置。然后单击“插入”菜单,在弹出的菜单中选择“图像对象” 下的“鼠标经过图像”命令,在“插入鼠标经过图像”对话框中,输入图像名称,然后单击 “原始图像”后面的“浏览”按钮,然后找到事先准备好的第一幅图片,单击“确定”按钮。重复上面的操作,为“鼠标经过图像”选择事先准备好的第二幅图像,然后单击“按下 时,前往的
12、URL”后面的“浏览”按钮,选择事先准备好的网页,单击“确定”按钮。 项目3创建锚记超链接锚记超链接,即网页中所谓的书签,就是到达网页中某个具体位置的链接。当网页内容 过长时,使用书签可以快速地浏览到所关心的信息。子项目1命名锚记光标置于合适位置,单击菜单栏上的“插入”,在弹出的下拉菜单中选择“命名锚记”, 也可以单击“插入”面板“常规”选项卡的“命名锚记”按钮。在打开的“命名锚记”对话 框中输入锚记的名称。子项目2创建锚记超链接选中链接文字,用鼠标拖动“属性”面板中的每到正文锚记标记上。这时,可以发现“属 性”面板的“链接”栏中出现锚记超链接名称。松开鼠标,完成设置。第6章CSS与行为本章的
13、教学目标为:(1)知道样式表的作用。(2)掌握创建使用CSS样式表的方法。(3)掌握使用CSS选择器使用样式表的方法。(4)知道“行为”的作用以及简单的使用。(5)能够利用行为设置网页的背景音乐以及弹出网页问候语对话框和弹出网页窗口的方 法。本章的教学建议:样式分为两种,教材通过实例讲述了使用它们的相应方法,学习者可以依据教材上的讲述 一步步完成相应的设置。对于CSS样式的学习,可以向学习者布置新的任务,如文字闪烁等, 通过练习进行加强。行为是教学重点,因为在后面的教学中要应用到行为的应用。对于这个概念不必花太大的 篇幅去讲解,着重讲解它的作用就可以了。在学习的过程中要注意到以下两点:1.选取
14、整个 网页的方法,注意不是选取整个网页的文字;2.弹出对话框和网页窗口的区别,如果同时设 置,先弹出哪一个?本章的教学内容:第6章CSS与行为项目1使用CSS子项目1 CSS概述样式表也称为样式,是目前网页制作中普遍应用的一项技术,它通过设置HTML代码标 签来实现对网页文本的字体、颜色、填充、边距和字间距等进行格式化操作。CSS是Cascading Style Sheets (层叠样式表单)的简称。子项目2使用CSS设置行间距单击窗口右边“浮动面板”中“CSS”,在打开的面板中单击叵,在弹出菜单中选择“新 建”命令,在“新建CSS规则”对话框中输入:.hangjv,作为样式名称,注意前面一个
15、小数点, 目的是避免与其他标记混淆。选择“定义在”为“(新建样式表文件)”,单击“确定”按 钮,在弹出“hangjv的CSS样式定义”对话框中,单击行高右边的三1在下拉选项中选择 “(值)”,然后再将文本框中的“(值)”删掉,输入“20”,将行高值设为20像素,单 击“确定”按钮,此时,在“CSS”面板中可以发现,出现了名为huangjv.css的一个样式。单击鼠标,使光标出现在第一段文字中,右击样式表中的样式“hangjv”,在弹出的快 捷菜单中选择“应用”。子项目3使用CSS去掉文本超链接下划线在窗口右边的“css”面板中单击叵1,在弹出的快捷菜单中选择“新建”,打开“新建 CSS样式”对
16、话框。选择器类型选择“复合内容(基于选择的内容)”,单击“选择器名称” 右边下拉框的三I,在下拉选项中选择“a:link,这表示对超链接进行操作,如果选择a:hover,表示鼠标指向链接时的效果;选择“a:activ表,表示链接激活时的效果;选 择“a: visited”,表示已点击过的链接效果,单击“确定”按钮。在“a: link的CSS样式 定义”对话框中,选择“none” (也就是无),单击“确定”按钮。子项目4使用CSS滤镜处理图片(Alpha、Blur)1 . Alpha 滤镜单击窗口右边“浮动面板”中“CSS”,在打开的面板中单击自,在弹出菜单中选择“新 建”命令,在“新建CSS规
17、则”对话框中,选择器类型选择“类(可应用于任何HTML元 素)”,单击“选择器名称”中输入“.alpha”作为名字,单击“确定”按钮。在弹出的”.alpha的CSS规则定义”对话框中,选择左边“分类”下的“扩展”。然后 在右边区域选择Filter (滤镜)右边的三I,在弹出的下落菜单中选择“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)? 此处,更改各值为: Alpha(Opacity=30, FinishOpacity=100, Style=l),单击“确定”按钮。将鼠标
18、指针移动到图片上,单击鼠标右键,在弹出的快捷菜单上选择“CSS样式”下的 “alpha”。2 .Wave滤镜单击窗口右边“浮动面板”中“CSS”,在打开的面板中单击叵I,在弹出菜单中选择“新 建”命令,在“新建CSS规则”对话框中,选择器类型选择”类(可应用于任何HTML元 素)”,单击“选择器名称”中输入“.wave”作为名字,单击“确定”按钮。在弹出的“.wave的CSS规则定义”对话框中,选择左边“分类”下的“扩展”。然后 在右边区域选择Filter (滤镜)右边的三I,在弹出的下落菜单中选择“Wave(Add=?, Freq=?, LightStrength=?, Phase二?, S
19、trength=?), 更改各值为:Wave(Add=O, Freq=3, LightStrength=10, Phase=25, Strength=10),单击确定按钮。将鼠标指针移动到图片上,单击鼠标右键,在弹出的快捷菜单上选择“CSS样式”下的 wave 。项目2使用行为子项目1行为概述所谓“行为”,就是响应网页中的某一事件而采取的一个动作。事件可以是鼠标的移动, 网页的打开与关闭、键盘的使用等,动作可以是弹出问候语、刷新页面、播放声音、检查用 户浏览器等。子项目2使用行为设置状态栏信息单击“窗口”菜单,选择“行为”命令,可以调出“行为”选项卡。单击.一在弹出 的菜单中,选择“设置文本”
20、下的“设置状态栏文本”命令,输入文字,单击“确定”按钮。 子项目3使用行为弹出对话框先看第一种方法。在Dreamweaver中打开网页文件“index.htm,单击窗口右下角的按钮body),在“行 为”选项卡中单击司,在弹出的菜单中选择“弹出信息”,输入要显示的信息,单击“确定” 按钮。第二种方法采用“调用JavaScript”行为也可以达到同样的效果。打开“行为”选项卡,在用的下拉菜单中选择命令调用JavaScript”在打开的“调用JavaScript”对话框中输入“alert (请确认您所使用的浏览器为IE5.5以 上版本,否则无法正常显示网页的动态效果!),最后单击“确定”按钮。子项
21、目4使用行为弹出网页窗口新建一个名为“hello.htm”的网页文件。然后单击编辑窗口左下方的C。的,在“行为” 选项卡中单击土,在下拉菜单中选择“打开浏览器窗口”命令,打开“打开浏览器窗口”对话 框,单击“浏览”窗口,打开“选择文件”对话框,选中“heDo.htm”文件,单击“确定” 按钮,返回“打开浏览器窗口”对话框。在“打开浏览器窗口”对话框中,输入弹出窗口的大小以及窗口名称,单击“确定”按 钮。第7章制作多媒体网页本章的教学目标为:(1)熟练掌握在网页中插入音乐的方法。(2)熟练掌握在网页中插入Flash动画的方法。(3)熟练掌握插入视频的方法。(4)掌握设置Spry特效的方法。本章的
22、教学建议:本章内容学生比较感兴趣,要注意讲解清楚各种音频、视频的格式,为什么有的音频和 视频不适合插入到网页中,这一点要让学生有一个直观的感受关于Spry是一个难点,但不是重点,操作中也容易发生问题,这需要学生的耐心和细心, 作为教师在讲解的过程中要注意操作细节,避免学生在操作中可能产生的各种错误。本章的教学内容:第7章制作多媒体网页项目1在网页中插入多媒体文件子项目1插入音乐单击“插入”菜单,选择“媒体”下的“插件”命令,在弹出的“选择文件”对话框中, 选择存放音乐文件的文件夹,选择事先确定好的音乐文件,单击“确定”按钮在Dreamweaver中选择该插件,然后在属性面板中单击“参数”按钮,
23、输入“hidden” 作为参数的值,输入“false”作为值。这两个参数的作用是隐藏播放器插件。子项目2插入Flash动画应用广泛的Flash文件主要由两种,SWF文件主要是动画文件;FLV文件主要是视频文 件。下面的操作是插入SWF文件的过程。首先确定Flash动画文件的位置,然后,单击“插入”菜单,选择“媒体”下的“SWF” 命令,在弹出的“选择SWF”文件对话框中,打开存放网页素材的文件夹,选择要插入的 SWF文件,单击“确定”按钮。子项目3插入视频在网页上插入视频主要分两类,一类是FLV文件,一类是通用的AVI、MPG等文件。 在网页中插入FLV文件的方法和插入SWF文件的方法相似。首
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页制作基础教程Dreamweaver CS6 第2版 网页制作基础教程Dreamweaver CS6 第2版教学指南 网页 制作 基础教程 Dreamweaver 教学 指南
限制150内