Dreamweaver网页设计与制作项目四.docx

《Dreamweaver网页设计与制作项目四.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计与制作项目四.docx（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程教案授课内容项目四 制作文化公司网站授课班级授课学时12课时教学方法与手段讲授法、演示法、讨论法。多媒体教学项目内容广州皇翼文化发展有限公司是一家拥有丰富资源的新生代文化传播公司，本公司主要从事舞台艺术、演艺演出、展览展示、活动推广等业务。本项目的工作内容就是为该公司建设网站，公司要求如下：1. 简洁美观的全版欢迎页面。2.内容页可以使用色彩对比强烈的风格，少量文字版面内容，以图片显示的版块为主。3. 图片展示是重点，在访客查看图片的时候，图片要有特色的显示链接效果。4. 网站栏目之间有明确的链接。要完成上述任务要求，网站制作必须应用超链接和行为技术。超链接是网站中最重要的组成部分，它指向

2、要访问的目标文档或其他元素，从而使一个网页可以跳转到另一个网页或打开“下载文件”对话框等。利用行为可以实现浮动广告、滚动字幕，以及收缩、放大图像等效果。教学目标学生通过本项目的学习，能：1、 熟练掌握设置各种超链接的方法2、 掌握跳转菜单的设置方法3、 熟练掌握各种行为的设置方法教学重点与难点教学重点：1、熟练掌握设置各种超链接的方法2、掌握跳转菜单的设置方法3、熟悉“行为”面板教学难点：熟练掌握各种行为的设置方法教学过程设计项目效果【任务一】为首页和子页设置链接应用超链接超链接包括很多种，最常用的是常规超链接，另外还有图片链接、下载链接、电子邮件链接等。（一）设置常规超链接常规超链接包括内部

3、超链接和外部超链接。内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。1. 内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接到的网址或网页名称；也可以通过单击“属性”面板上“链接”编辑框后的“浏览文件”按钮，在弹出的“选择文件”对话框中选择要链接到的文件。还有一种方法是单击并拖动“属性”面板上“链接”编辑框后的“指向文件”按钮到“文件”面板中的文件上，前提是此时的“文件”面板中显示的是该网页所在的网站。“属性”面板上“链接”编辑框下方的“目标”下拉列表框表示打开

4、链接文档的方式，默认为在当前窗口中打开链接网页，其中各选项意义如下：l _blank：表示在保留当前网页窗口的状态下，在新窗口中显示被打开的链接网页。l _parent：表示在当前窗口显示被打开的链接网页；如果是框架网页，则在父框架中显示被打开的链接网页。l _self：表示在当前窗口显示被打开的链接网页；如果是框架网页，则在当前框架中显示被打开的链接网页。l _top：表示在当前窗口显示被打开的链接网页，如果是框架网页，则删除所有框架，显示当前网页。2. 外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中输入要链接到的网址。如图所示，为网页中的文本

5、“中国雅虎”设置到雅虎网站的外部超链接。（二）设置图片链接和下载链接所谓图片链接，就是在单击网页中的某小图片时，在新窗口中打开一幅大图片；下载链接是指单击某个超链接时会打开一个“文件下载”对话框（或自动启动下载工具），通过在该对话框中单击“打开”或“保存”按钮，打开或下载文件。实际上，设置这类链接的方法非常简单，选中要设置为链接的文本或图像后，只要在“属性”面板的“链接”编辑框中将链接目标设置为图像文件或压缩文件就可以了，如图所示。此外，如果希望在新窗口中打开大图像，还应将“目标”设置为 “_blank”。（三）设置电子邮件链接很多网站上留有电子邮件地址，单击该地址可打开“Outlook Ex

6、press”的“新邮件”窗口，这是一种特殊类型的链接，又叫电子邮件链接。如果在网站上设置一个这样的链接，可以方便浏览者联系，下面介绍如何设置此类链接。步骤 1拖动鼠标选中要设置电子邮件链接的文本，此处为“联系地瓜”，如图上部分所示。步骤 2在“属性”面板上“链接”编辑框中输入“mailto：电子邮箱地址”，此处为“mailto:master”，如图下部分所示。步骤 3 保存文档后按F12键预览，将光标置于链接文本上方时，光标变为手形，此时单击鼠标可打开“新邮件”对话框，且“收件人”编辑框中显示刚才设置的电子邮件地址。（四）设置命名锚记链接很多时候都需要为一张图片的不同部位设置不同的链接，如何为

7、一张图片设置多个链接呢？这就用到了热点链接。热点链接又叫图像映射，就是使用热点工具将一张图片划分成多个区域，并为这些区域分别设置链接，下面介绍具体操作。步骤 1 打开本项目素材“house”文件夹下的“xishan.html”文档。单击选中要设置链接的图片“dh.jpg”，可看到“属性”面板的左下角出现三个不同形状的热点工具。步骤2 单击其中的“矩形热点工具”按钮，然后移动鼠标至图片“dh.jpg”上“夕照台”所在区域，单击鼠标左键并拖动，绘制一个矩形区域。步骤 3 单击“确定”按钮，关闭提示框。然后在“属性”面板上的“替换”编辑框中为图像映射输入描述性文本。步骤 4 单击文档编辑窗口右侧的按

8、钮，显示“文件”面板，然后拖动“属性”面板上“链接”编辑框后的按钮到要链接的文件“index.html”上。步骤 5 继续在图片上“夕山”所在区域单击鼠标并拖动，绘制一个矩形区域，然后采用同样的方法为该矩形热点区域设置到“xishan.html”的链接。步骤 6 按【Ctrl+S】组合键保存文档，然后按F12键预览。将光标置于文字“夕照台”上方时，光标变为手形（表示此处设置了链接），单击可打开链接的网页。（五）设置热点链接在浏览网页时，经常会遇到这种情况，由于网页的内容非常多，浏览器的滚动条变得很长，浏览者无法快速找到所要的内容。为解决这个问题，可以通过命名锚记链接为网页添加位于该网页内部的超

9、链接，单击该超链接，就跳转到网页中指定的位置。设置命名锚记链接，首先要插入命名锚记，然后创建跳转到该命名锚记的链接，具体操作如下。步骤 1 打开本项目素材“souyi”文件夹下的网页文档“index.html”，在希望插入命名锚记的位置单击以确定插入点，此处为广告条下方“最新商品”所在单元格。步骤 2 单击“常用”插入栏中的“命名锚记”按钮，或选择“插入记录”“命名锚记”菜单，打开“命名锚记”对话框，在“锚记名称”编辑框中输入锚记名称，此处为“001”，然后单击“确定”按钮，即可在插入点所在位置插入命名锚记。步骤 3 添加命名锚记后，就可以创建超链接了。首先选中要链接到命名锚记的文本或图像，此

10、处为网页最下方的圆形按钮图像，然后在“属性”面板上的“链接”编辑框中输入“# 锚记名称”，此处为“#001”。步骤 4 单击图片外任意位置，可以看到设置链接后的图片周围多了蓝色的边框，此时应再次选中图片，然后在“属性”面板上的“边框”编辑框中输入“0”，并按Enter 键确认，去掉边框。步骤 5 保存文档后按F12键在浏览器中预览，单击网页下方的按钮，可直接跳转到插入命名锚记的位置。小提示：命名锚记链接与常规超链接不同的地方，就是在链接的锚记名称前需输入符号“”，它表示当前页。（六）设置跳转菜单跳转菜单相当于一组超链接的集合，在网页中显示为弹出式下拉菜单，如图所示。弹出菜单内的链接没有类型上的

11、限制，可以是内部链接，也可以是到其他网站的链接，还可以是电子邮件链接或命名锚记链接。步骤 1 打开本项目素材“souyi”文件夹下的网页文档“index.html”。将插入点置于页面中要插入跳转菜单的位置，此处为广告条上方的空白单元格，然后选择“插入记录”“表单”“跳转菜单”。步骤 2 弹出“插入跳转菜单”对话框，在“文本”编辑框中输入菜单名称，此处为“搜衣中国”；在“选择时，转到URL”编辑框中输入菜单要链接到的网址，此处为“”，这样第一个菜单项创建完成。步骤 3 单击“添加项”按钮，为跳转菜单添加其他项，并参照步骤2的方法设置文本和 URL链接，最后单击“确定”按钮，完成跳转菜单的创建。“

12、插入跳转菜单”对话框中各设置项的意义如下。l 菜单项：列出了所有创建的菜单项。当新建菜单时，只有一项默认的“unnamed1”。l 文本：用来设置跳转菜单项的名称。l 选择时，转到 URL：用来设置跳转菜单项的链接地址。l 打开 URL于：用来设置跳转菜单项链接目标的打开方式。l 菜单 ID：用来设置便于记忆和理解的跳转菜单名称。l 菜单之后插入前往按钮：勾选此项时会在跳转菜单的后面添加一个“前往”按钮，当浏览者在下拉菜单中选择了相关项后，必须单击这个按钮，浏览器才会打开链接网页。如果不选择此项，表示单击选择某个菜单项即可直接打开链接文档。l 更改 URL后选择第一个项目：勾选此项时允许使用菜

13、单选择提示。步骤 4 单击选择文档窗口中的跳转菜单，然后在“属性”面板上的“初始化时选定”编辑框中单击设置初始菜单项（默认为第 1 项）。步骤5 要修改跳转菜单，可首先单击选中跳转菜单，然后单击“属性”面板上的“列表值”按钮，此时将打开 “列表值”对话框。通过该对话框可以增加、删除菜单项，调整菜单顺序。增加菜单后，可分别单击该菜单的“项目标签”和“值”列，然后输入菜单名称和其链接的网址。步骤 6 如果在“属性”面板中选中“列表”单选钮，然后在“高度”编辑框中设置列表框高度，则跳转菜单将以列表框形式显示。【任务实施】在学习了超链接的用法后，请同学们动动手，为文化公司网站设置超链接。【任务二】为首

14、页添加伴随窗口应用行为（一）认识“行为”面板“行为”面板是应用行为不可缺少的工具，下面认识一下“行为”面板。选择“窗口”“行为”菜单，或按【Shift+F4】组合键，即可打开“行为”面板，如图所示，面板中显示了已添加的行为。（二）应用行为行为可以应用于XHTML标签、图像、链接文本等对象。如果要对某对象应用行为，需要先选中该对象，然后单击“行为”面板上方的“添加行为”按钮，在打开的行为列表中选择动作，并在打开的对话框中设置效果，最后指定设定动作的发生情况，即指定事件。由以上操作可以看出，每个行为都由两部分组成，即事件和动作。所谓事件是指“发生什么”，如鼠标移到对象上方、离开对象或双击对象等；而

15、动作是指“去做什么”，如打开浏览器窗口、播放声音或弹出信息等。简单来说，就是当发生某个事件的时候去执行某项动作。下面分别列出了常用事件和动作的名称及其意义。1. 事件l onAbort：在浏览器中停止加载网页文档时发生的事件。l onMove：移动浏览器窗口时发生的事件。l onLoad：在浏览器中加载完网页时发生的事件。l onClick：鼠标单击对象（如超链接、图片、图片映像、按钮）时发生的事件。l onFocus：对象获得焦点时发生的事件。例如，单击表单中的文本编辑框触发事件。l onMouseDown：单击鼠标左键（不必释放鼠标键）时发生的事件。l onMouseMove：鼠标指针经过

16、对象时发生的事件。l onMouseOut：鼠标指针离开选定对象时发生的事件。l onMouseOver：鼠标指针移至对象上方时发生的事件。l onMouseUp：当按下的鼠标按键被释放时发生的事件。l onReset：表单文档被设定为初始值时发生的事件。l onSubmit：提交表单文档时发生的事件。l onSelect：在文本区域中选定文本内容时发生的事件。l onError：加载网页文档过程中出现错误时发生的事件。l onFinish：（Marquee）字幕结束一个循环时发生的事件。l onStart：（Marquee）字幕开始循环时发生的事件。2. 动作检查插件：检查访问者安装的插件，

17、给其发送不同的页面或给出提示。例如，网页中若包含了Flash动画，则可以利用该动作检查访问者的浏览器是否安装了Flash播放器插件。如果没有安装，则可以给出提示信息。l 拖动 AP元素：利用该动作允许用户拖动AP元素。l 转到 URL：发生指定的事件时跳转到指定的网页。l 跳转菜单：当用户通过选择“插入记录”“表单”“跳转菜单”命令创建一个跳转菜单时，Dreamweaver将创建一个菜单对象，并为其附加行为。在“行为”面板中双击跳转菜单动作可编辑跳转菜单。l 打开浏览器窗口：在新窗口中打开网页，并可设置新窗口的宽度和高度等属性。l 弹出信息：显示带指定信息的.JavaScript警告。用户可在

18、文本中嵌入任何有效的JavaScript 功能，如调用、属性、全局变量或表达式（需用“”括起来）。例如，“本页面的 URL为 window.10cation，今天是 new Date（）”。l 预先载入图像：装入图像，但该图像在页面进入浏览器缓冲区之后不立即显示。它主要用于时间线、行为等，从而防止因下载引起的延迟。l 设置导航栏图像：将图像加入到导航条或改变导航条图像显示。l 设置状态栏文本：在浏览器左下角的状态栏中显示信息。l 显示 -隐藏元素：显示、隐藏一个或多个 AP Div 窗口，或者恢复其缺省属性。l 交换图像：通过改变IMG标记的SRC属性改变图像。利用该动作可创建活动按钮或其他图

19、像效果。l 恢复交换图像：恢复交换图像至原图。（三）应用“弹出信息”行为有时候，打开某个网页或单击网页中的某个元素时可以看到弹出信息框。应用“弹出信息”行为可以轻松实现该功能，下面介绍“弹出信息”行为的应用。步骤 1 首先选择要应用行为的对象，此处为编辑窗口下方状态栏中的“”标签，然后打开“行为”面板，单击“添加行为”按钮，在弹出的行为列表中选择“弹出信息”。步骤 2 打开“弹出信息”对话框，在该对话框中输入想要显示的信息，然后单击“确定”按钮。步骤 3 默认事件为“onLoad”，此处不需要再设置，如要改变事件，可单击事件右侧，在弹出的下拉列表中进行选择。步骤4 保存文档，并按F12键在IE

20、浏览器中预览文档，系统首先会弹出如图 所示的对话框。（四）打开浏览器行为应用“打开浏览器窗口”行为，可实现单击目标文字或图片打开固定大小窗口的效果。许多站点都使用这种方式弹出重要的通知、广告信息等页面。步骤 1 打开本项目素材“lily”文件夹中的“haird.html”文档，拖动鼠标选中文本“美白防晒十话十说”，然后在“属性”面板上的“链接”编辑框中输入符号“#”并按 Enter 键，为文本设置空链接。步骤 2 打开“行为”面板，单击“添加行为”按钮，在弹出的行为列表中选择“打开浏览器窗口”。步骤 3 弹出“打开浏览器窗口”对话框，在该对话框中单击“要显示的URL”编辑框后的“浏览”按钮，弹

21、出“选择文件”对话框，选择要在窗口中显示的网页，此处为“lily”文件夹中的“ha2.html”网页，然后单击“确定”按钮。步骤 4 回到“打开浏览器窗口”对话框，设置窗口宽度和高度，然后单击“确定”按钮。步骤5 在“行为”面板中，单击“事件”列，在其下拉列表中选择“onClick”。步骤 6 保存文档后按F12键预览，单击添加行为的文本，在显示器左下方弹出一个大小为 570600 的窗口。（五）对图像应用“效果”行为“效果”行为包括增大/收缩、挤压、显示/渐隐、晃动、滑动、遮帘和高亮颜色。以“显示 / 渐隐”为例，介绍这类行为的应用方法。步骤 1 继续在上文的文档中操作，首先选择网页左侧的广

22、告图片“left1.gif”，然后单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选择“效果”“显示 / 渐隐”，如图所示。步骤 2 打开“显示/渐隐”对话框，单击选中“切换效果”复选框，其他保持默认，最后单击“确定”按钮。步骤 3 单击“行为”面板中事件名称右侧的下拉按钮，在打开的下拉列表中选择“onLoad”。步骤 4 保存文档并按F12键预览，可以看到图像不断地由有到无，再由无到有进行变换。（六）对图像应用“效果”行为应用“显示隐藏元素”行为，可以控制AP Div的显示和隐藏，通过对AP Div反复应用该行为，可以实现下拉菜单效果。步骤 1 新建文档并定位插入点，然后选择“插入记

23、录”“布局对象”“AP Div”菜单，插入一个 AP Div，在 AP Div 中插入一个小图片。步骤 2 单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选择“显示-隐藏元素”。步骤 3 打开“显示-隐藏元素”对话框，首先在“元素”列表中选择相应元素，此处为刚才插入的AP Div，然后单击“隐藏”按钮，并单击“确定”按钮。步骤 4 在“行为”面板中设置“事件”为“on-MouseOut”。步骤5 保存文档并按F12键预览，最初图片是显示的，当将光标置于图片上方后再拿开时图片就消失了。（七）应用“设置状态栏文本”行为很多个人网站都设置了状态栏文本，以表明网站所属人的状态。下面介绍如何为

24、网页设置状态栏文本。步骤 1 单击“”标签选中整个文档。打开“行为”面板，单击“添加行为”按钮，在弹出的行为列表中选择“设置文本”“设置状态栏文本”。步骤 2 打开“设置状态栏文本”对话框，在“消息”编辑框中输入要在状态栏中显示的文本，然后单击“确定”按钮。步骤 3 在“事件”下拉列表中选择“onLoad”，表示网页下载完毕后即显示设置的状态栏文本。步骤 4 保存文档并按 F12键预览，可看到状态栏中的文本。【任务实施】在学习了应用行为后，请同学们动手，为网站首页添加伴随窗口。效果如图所示。【知识拓展】制作弹出式下拉菜单有些内容较多的网站经常需要用到下拉菜单，使用“显示-隐藏元素”行为可以实现

25、该功能，下面介绍具体操作。步骤 1 打开本项目素材“shipin”文件夹下的“index.html”文档。将插入点置于导航条中“产品展示”下方的单元格中，选择“插入记录”“布局对象”“AP Div”菜单，插入一个 AP Div，默认名为“ap Div1”。步骤 2 在AP Div边框上单击将其选中，在“属性”面板上的“宽”和“高”编辑框中分别输入“80”和“100”，然后按 Enter 键确认。步骤 3 将插入点置于AP Div中，在其中插入一个5行1列，宽为100，边框为0，边距为 3，间距为 1 的表格，并设置表格背景颜色为白色。步骤 4 拖动鼠标选中所有单元格，在“属性”面板上设置单元格

26、背景颜色与导航条颜色一致。步骤 5 在各个单元格中分别输入文本，并设置它们的颜色为白色，居中对齐。步骤 6 单击“标签选择器”中的“”标签，然后在“行为”面板中单击“添加行为”按钮，在弹出的行为列表中选择“显示 -隐藏元素”。步骤 7 打开“显示 -隐藏元素”对话框，选中“divapDiv1”后，单击“隐藏”按钮，最后单击“确定”按钮。步骤 8 在“事件”下拉列表中选择“onLoad”，表示在页面刚加载完毕时执行上面设置的动作，也就是隐藏“apDiv1”。步骤 9 选中“产品展示”所在单元格，单击“添加行为”按钮，在弹出的行为列表中选择“显示 -隐藏元素”，打开“显示 -隐藏元素”对话框。选中

27、“divap Div”后，单击“显示”按钮，最后单击“确定”按钮。步骤 10 在“事件”下拉列表中选择“onMouseOver”，表示鼠标滑过时显示apDiv1。步骤 11 再次给单元格添加“显示-隐藏元素”行为，本次在选中“divapDiv1”后，单击“隐藏”按钮，最后单击“确定”按钮。步骤 12 在“事件”下拉列表中选择“onMouseOut”，表示鼠标离开时隐藏 ap Div1。步骤 13 选中ap Div1，按照给单元格添加行为的方法给其添加同样的行为。保存文档后按F12键预览，当将鼠标放在“产品展示”上时显示下拉菜单。作业：1 请简述网页中的链接包含哪几种，分别有什么含义。2 要在新窗口中打开超链接，应该如何操作？3 简述如何设置状态栏文本？