《Dreamweaver 网页设计 教学课件 ppt 作者 吴权威 王绪溢 第四章》由会员分享，可在线阅读，更多相关《Dreamweaver 网页设计 教学课件 ppt 作者 吴权威 王绪溢 第四章（85页珍藏版）》请在金锄头文库上搜索。
1、1,第4章 超链接与分割框架,4-1 超链接 4-2 让图像变成链接地图 4-3 分割网页画面的框架工具 4-4 小知识,返回,2,4-1 超链接,4-1-1 文字超链接的设置 4-1-2 打开新窗口显示超链接网页 4-1-3 设置打开新窗口的大小 4-1-4 建立电子邮件链接 4-1-5 长网页中的定位锚点,返回,3,4-1-1 文字超链接的设置,当网页中某段文字有相关的网页或网站时，可以为这些文字加上超链接设置，浏览者只要点选这些链接，就可以打开超链接指定的网页，做更深入的了解。 （1）移动鼠标把要变成超链接的文字设成标记区域，接着打开属性面板，然后单击“浏览”文件按钮。,4,4-1-1
2、文字超链接的设置,将文字设成 标记区域,选择 按钮,5,4-1-1 文字超链接的设置,（2）出现“选择文件”对话框后，在“查找范围”切换文件所在文件夹，接着在列表中选择链接文件名，然后单击“确定”按钮。 （3）移动鼠标单击 在浏览器中预览/调试按钮，再从弹出的菜单中选择“预览在iexplore”（也可以按下【F12】键，快速打开浏览窗口）。,6,4-1-1 文字超链接的设置,选择“预览 在iexplore”,7,4-1-1 文字超链接的设置,变成超链接的文字会改变颜色，并被加上下划线，当鼠标移到这些文字上时会变成图标 。 Dreamweaver的另一个特色就是用 指向文件按钮，直接拖动到文件面
3、板列表中要链接的文件上，则“链接”栏马上就会显示链接的位置路径。,8,4-1-1 文字超链接的设置,直接拖动到要链接的文件上,返回,9,4-1-2 打开新窗口显示超链接网页,原始网页和新网页同时被查看 ：将超链接目标属性设为_blank 。 目标菜单中有4个属性供选择 ： _blank：超链接的内容会另外打开一个新窗口来显示。 _parent：超链接的内容会显示在主框架内。 _self：超链接的内容会显示在目前的窗口或框架内。 _top：若是此网页有框架，则会拆除目前所有的框架，并显示在主窗口内。,10,4-1-2 打开新窗口显示超链接网页,选择超链接文字后，在“目标”列表中选择“_blank
4、”。,选择“_blank”,11,4-1-2 打开新窗口显示超链接网页,按下【F12】键，打开浏览窗口后，移动鼠标选择超链接文字，系统就会自动另外打开一个新窗口来显示。,返回,12,4-1-3 设置打开新窗口的大小,除了另外打开新窗口显示链接网页外，还可以自订新窗口的大小，设置窗口是否要显示工具栏、滚动条等。 （1）移动鼠标选择文字后，接着打开属性面板，在“链接”栏输入javascript:;，然后打开行为面板并单击 添加行为按钮，再从弹出的菜单中选择“打开浏览器窗口”。,13,4-1-3 设置打开新窗口的大小,选择此按钮,选择“打开浏览器窗口”,选取超链接文字,输入javascript:;,
5、14,4-1-3 设置打开新窗口的大小,（2）出现“打开浏览器窗口”对话框后，移动鼠标单击“浏览”按钮。,15,4-1-3 设置打开新窗口的大小,（3）出现“选择文件”对话框后，在“查找范围”栏中切换文件所在文件夹，接着在列表中选择文件名称，然后单击“确定”按钮。,16,4-1-3 设置打开新窗口的大小,（4）回到“打开浏览器窗口”对话框后，分别在“窗口宽度”栏和“窗口高度”栏输入打开窗口的大小，接着在“属性”区勾选“需要时使用滚动条”，然后单击“确定”按钮。,设置窗口 的大小,勾选“需要时使用滚动条”,17,4-1-3 设置打开新窗口的大小,设置好行为事件后，接下来移动鼠标选择超链接文字，则
6、出现的浏览窗口不会显示任何工具栏，但会出现滚动条。 单击 按钮，从弹出的下拉列表中可以更改鼠标的动作事件。,可选择其他的鼠标事件,18,4-1-3 设置打开新窗口的大小,若是鼠标事件很少，表示所选择的浏览 器版本较旧，可单击 添加行为按钮，接着选择 “显示事件”，再从弹出的 子菜单中选择较新的浏览 器版本就可以了。,返回,19,4-1-4 建立电子邮件链接,（1）将光标移到要插入电子邮件链接的位置，然后到常用模式上单击 电子邮件链接按钮。,将光标移到要插入电子邮件链接的位置,20,4-1-4 建立电子邮件链接,（2）出现“电子邮件链接”对话框后，在“文本”栏输入要显示的链接文字，接着在“E-M
7、ail”栏输入电子邮件地址，然后单击“确定”按钮。,输入要显示 链接的文字,输入电子 邮件地址,21,4-1-4 建立电子邮件链接,单击【F12】就可看到设置的效果了。,选择电子 邮件链接,22,4-1-4 建立电子邮件链接,打开电子邮件窗口如下。 若在E-mail地址后加上“?subject=主题文字”，则启动链接打开新邮件窗口时，主题文字会自动显示在邮件窗口的“主题”栏中。,返回,23,4-1-5 长网页中的定位锚点,当网页内容长度超过一个画面可容纳的范围时，可以在适当位置插入锚点（anchor），以方便浏览长网页的内容。,将光标移到要插入锚点的位置,选择 按钮,24,4-1-5 长网页中
8、的定位锚点,出现“命名锚记”对话框后，在“锚记名称”栏输入自定义的锚点名称，然后单击“确定”按钮。 设置好锚点后，回到编辑区，就会出现一个 锚点标记，可以清楚地知道锚点位置（锚点标记在实际浏览时是不会出现 ）。,25,4-1-5 长网页中的定位锚点,另外一种插入锚点的方法是，移动鼠标到菜单栏依序选择“插入/命名锚点”。 加入定位锚点后，若看不到锚点标记，则可以从菜单栏依序选择“查看/可视化助理/不可见元素”，让锚点标记显示出来。,另外一种插入锚点的方法是，移动鼠标到菜单栏依序选择“插入/命名锚点”。,26,4-1-5 长网页中的定位锚点,必须要设置超链接到锚点位置，锚点才能真正发挥作用。 链接
9、到锚点的方法： 移动鼠标选择要链接的文字后，将画面移到要链接锚点的位置，打开属性面板，移动鼠标选 择指向文件图标，接着按住鼠标不放，并拖动到要链接的锚点上。,27,4-1-5 长网页中的定位锚点,选取要链 接的文字,拖动到要链接的锚点上,选择此按钮,28,4-1-5 长网页中的定位锚点,也可直接在“链接”栏输入锚点的名称，记得名称前要加上#符号。按下【F12】键，打开浏览窗口后，选择超链接文字，画面就会自动跳到指定的锚点位置。 此外，也可以先将光标移到要插入链接文字的位置，接着选择常用模式的超链接按钮。出现“超级链接”对话框后，在“文本”栏输入超链接 文字，然后在“链接”列 表中选择目标名称，
10、就 可以链接到指定的目标 位置上。,返回,29,4-2 让图像变成链接地图,4-2-1 在图像上画出链接范围 4-2-2 修改链接区域范围 4-2-3 移动和删除链接区域范围,返回,30,4-2-1 在图像上画出链接范围,图像地图分为矩形、椭圆形和多边形3种链接区域范围，若选择多边形，则可以画出任意形状的链接区域范围。 在图像上画出任意形状链接范围的操作如下： （1）移动鼠标选择图片后，接着打开属性面板，然后单击 多边形链接区域工具按钮。,31,4-2-1 在图像上画出链接范围,选择图片,选择 按钮,32,4-2-1 在图像上画出链接范围,（2）当鼠标变成图标后，在图片上单击鼠标左键，建立图像
11、地图的起始点。,单击鼠标左键建立图像地图起始点,33,4-2-1 在图像上画出链接范围,（3）顺着图案边缘，画出链接区域范围，每单击一下鼠标左键可以定出一个转折点，最后回到起始点双击鼠标左键。,按鼠标左键 定出转折点,顺着图案绘 制图像地图,34,4-2-1 在图像上画出链接范围,（4）移动鼠标到属性面板选择“浏览文件”按钮。 （5）出现“选择文件”对话框后，在“查找范围”栏中选择文件所在磁盘与文件夹，接着在列表中选择文件名，然后单击“确定”按钮。 （6）设置好链接文件后，接着在“替代”栏输入要显示的替代说明文字。,35,4-2-1 在图像上画出链接范围,输入替代 说明文字,链接文件,36,4
12、-2-1 在图像上画出链接范围,在打开浏览窗口，若将鼠标移到图像地图的范围上，会显示替代说明文字 。,显示替代 说明文字,单击鼠标左键会显示图像地图范围并打开链接文件,返回,37,4-2-2 修改链接区域范围,多边形链接区域通常都是由很多节点所绘制出来的，只要移动鼠标拖动节点的位置，就可以修改图像地图的范围。,返回,38,4-2-3 移动和删除链接区域范围,平移链接区域范围 ：选中图像地图后，接着按住鼠标不放，并拖动到其他位置。 删除链接区域范围 ：选中链接区域范围后，接着按下【Del】键，将图像地图删除。,39,4-2-3 移动和删除链接区域范围,图像地图属性面板的4个工具按钮名称说明如下：
13、,返回,40,4-3 分割网页画面的框架工具,4-3-1 建立框架 4-3-2 指定框架内的网页 4-3-3 存储框架设置 4-3-4 调整框架大小 4-3-5 修改边框粗细和颜色 4-3-6 在框架中显示滚动条 4-3-7 修改框架名称 4-3-8 指定链接目标框架 4-3-9 删除框架,返回,41,4-3 分割网页画面的框架工具,下面这个网页，是3个框架的网页分割，网页中的每一个框架都指定显示特定的内容。,框架组,将网页分割为3个框架,42,4-3 分割网页画面的框架工具,框架表单提供13个分割框架的工具按钮如下：,43,4-3-1 建立框架,在框架列表里选择一个分割方式的按钮，就可以将一
14、个完整网页分割成好几个框架。,返回,44,4-3-2 指定框架内的网页,（1）执行“窗口“框架”命令。 （2）打开框架面板后，移动鼠标选择leftFrame，接着在属性面板的“源文件”栏旁单击“浏览文件”按钮。,选择“浏览”按钮,选择leftFrame,45,4-3-2 指定框架内的网页,（3）出现“选择HTML文件”对话框后，在“查找范围”栏切换文件所在磁盘与文件夹，接着在列表中选择文件名，然后单击“确定”按钮。,46,4-3-2 指定框架内的网页,（4）出现提示信息窗口后，移动鼠标勾选“不再显示这个信息”，接着单击“确定”按钮。,47,4-3-2 指定框架内的网页,重复步骤2、步骤3，移动
15、鼠标在框架面板选择mainFrame，然后在原“源文件”栏指定文件路径，最后左侧框架和右侧框架都会分别显示指定的网页内容。,框架内分别显示指定的网页内容,返回,48,4-3-3 存储框架设置,方法同保存文件，若是没有在框架中指定网页内容，则存储时，会出现3次存盘窗口，分别将左侧框架、右侧框架和框架组存储起来。 若只想存储框架组网页，则要从菜单栏依序选择“文件/保存框架页”。,返回,49,4-3-4 调整框架大小,使用鼠标法：将鼠标光标放在框架线上，当出现 图标进行拖动即可。 修改属性法：在 属性面板选择要 修改的框架，接 着在“单位”列表 中选择像素，然 后输入框架的大 小。,返回,50,4-
16、3-5 修改边框粗细和颜色,移动鼠标选择左侧框架后，在属性面板的“边框”列表中选择“是”，接着在“边框宽度”栏输入6，然后单击边框颜色按钮选择边框颜色。,51,4-3-5 修改边框粗细和颜色,完成设置后，打开浏览窗口会看到在左侧框架和右侧框架中间有一条紫色的边框。,边框,返回,52,4-3-6 在框架中显示滚动条,系统在默认的状态下，并不会显示滚动条，除非框架内的网页内容长度超过浏览窗口画面才会显示 。 可以一打开就设置此框架不论在任何状态下，都显示滚动条。 打开框架面板后，移动鼠标选择leftFrame，接着在属性面板的“滚动”列表中选择“是”。,53,4-3-6 在框架中显示滚动条,选择leftFrame,选择“是”,完成设置后，不论leftFrame框架的内容是否超过窗口画面，都会显示滚动条。相反地，若在“滚动”列表中选择“否”，则无论如何都不会显示滚动条。,返回,54,4-3-7 修改框架名称,移动鼠标选择框架面板的mainFrame，接着打开属性面板，然后在“框架名
