为网页添加超级链接（模块五）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt

《为网页添加超级链接（模块五）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt》由会员分享，可在线阅读，更多相关《为网页添加超级链接（模块五）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt（54页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、为网页添加超级链接（模块五）电子课件 中职Dreamweaver+CS3网页制作任务实训教程（高教版）模块五 为网页添加超级链接 主讲老师：*Dreamweaver CS3网页制作任务实训教程学习目标u掌握文本超级链接和图像超级链接的创建与设置方法u熟悉电子邮件超级链接的创建方法u熟悉并掌握创建和命名锚记的操作任务一 为“公司介绍”网页创建超级链接u任务目标在“公司介绍”网页中输入文本，并创建文本超级链接、图像超级链接和电子邮件超级链接，完成后的最终效果如图所示。为“公司介绍”网页创建超级链接后的效果任务一 为“公司介绍”网页创建超级链接u操作思路（1）在提供的“index.html”网页中输

2、入文本并进行适当设置。（2）为输入的文本创建文本超级链接和电子邮件超级链接。（3）插入图像并为图像创建超级链接。为“公司介绍”网页创建超级链接的操作思路操作一 创建和设置文本超级链接（1）打开光盘中提供的“index.html”网页素材，将文本插入点定位到正文所在的单元格，单击鼠标右键，在弹出的快捷菜单中选择【表格】【插入行】菜单命令，如图所示。插入行操作一 创建和设置文本超级链接（2）在插入的空行中单击鼠标右键，在弹出的快捷菜单中选择【对齐】【居中对齐】菜单命令，如图所示。（3）输入文本“公司介绍”，如图所示。设置对齐方式输入文本操作一 创建和设置文本超级链接（4）插入20个不换行空格，然后

3、输入“员工培训”文本，如图所示。（5）按照相同方法输入其余文本，如图所示。输入文本输入文本操作一 创建和设置文本超级链接（6）拖动鼠标选择前面输入的“公司介绍”文本，单击属性检查器中“链接”文本框右侧的“浏览文件”按钮，如图所示。（7）打开“选择文件”对话框，在其中选择提供的“index.html”文件，单击“确定”按钮，如图所示。选择文本选择链接文件操作一 创建和设置文本超级链接（8）此时所选文本的属性检查器的“链接”文本框中将出现相应的链接对象名称，如图所示。（9）取消文本的选中状态，此时创建了超级链接后的文本格式将变为蓝色加下划线的形式，如图所示。链接后的文本创建超级链接后的文本格式操作

4、一 创建和设置文本超级链接（10）选择“员工培训”文本，单击属性检查器中“链接”文本框右侧的“浏览文件”按钮，如图2所示。（11）打开“选择文件”对话框，在其中选择提供的“training.html”文件，单击“确定”按钮，如图所示。选择文本选择链接文件操作一 创建和设置文本超级链接（12）此时所选文本格式也将自动变为创建了超级链接后的格式，如图所示。创建超级链接后的文本格式操作一 创建和设置文本超级链接（13）用相同方法将“产品展示”文本链接到“product.html”文件，如图所示。（14）将“注册会员”文本链接到“register.html”文件，如图所示。创建文本超级链接创建文本超级

5、链接操作一 创建和设置文本超级链接（15）将“搜索产品”文本链接到“search.html”文件，如图所示。（16）将“用户查询”文本链接到“user.html”文件，如图所示。创建文本超级链接创建文本超级链接操作二 创建电子邮件超级链接（1）在“用户查询”文本后插入20个不换行空格，并输入文本“联系我们”，如图所示。输入文本操作二 创建电子邮件超级链接（2）选择文本“联系我们”，然后选择【插入记录】【电子邮件链接】菜单命令（也可单击插入栏中“常用”选项卡下的“电子邮件链接”按钮），如图所示。（3）打开“电子邮件链接”对话框，在“文本”文本框中将自动输入选择的文本内容，在“E-Mail”文本框

6、中输入电子邮箱地址，然后单击“确定”按钮，如图所示。创建电子邮件链接输入电子邮箱地址操作二 创建电子邮件超级链接（4）此时在创建了电子邮件链接文本的属性检查器的“链接”文本框中将出现“mailto:+电子邮箱地址”的内容，表示创建的超级链接为电子邮件链接，如图所示。创建的电子邮件链接操作三 插入图像并创建图像超级链接（1）在版权信息所在行中单击鼠标右键，在弹出的快捷菜单中选择【表格】【插入行】菜单命令，如图所示。插入行操作三 插入图像并创建图像超级链接（2）在插入的空行中单击鼠标右键，在弹出的快捷菜单中选择【对齐】【居中对齐】菜单命令，如图所示。（3）单击插入栏的“常用”选项卡下的“图像”按钮

7、，打开“选择图像源文件”对话框，在其中选择“01.jpg”文件，单击“确定”按钮，如图所示。设置对齐方式 选择图像文件操作三 插入图像并创建图像超级链接（4）打开“图像标签辅助功能属性”对话框，直接单击“确定”按钮，如图所示。（5）选择插入的图像，将其宽度、高度和水平边距分别设置为“300”、“200”和“20”，如图所示。设置辅助信息设置图像尺寸和边距操作三 插入图像并创建图像超级链接（6）保持图像的选中状态，单击属性检查器中“链接”文本框右侧的“浏览文件”按钮，如图所示。创建图像超级链接操作三 插入图像并创建图像超级链接（7）打开“选择文件”对话框，在其中选择“factory.html”文

8、件，单击“确定”按钮，如图示。（8）此时属性检查器中将显示所选图像链接的文件名称，如图所示。选择链接文件创建的图像超级链接操作三 插入图像并创建图像超级链接（9）用相同方法插入“02.jpg”图像文件，并设置与前一幅图像相同的宽度、高度和水平间距，然后单击属性检查器中“链接”文本框右侧的“浏览文件”按钮，如图所示。（10）打开“选择文件”对话框，在其中选择“factory.html”文件，单击“确定”按钮，如图所示。插入并设置图像选择链接文件操作三 插入图像并创建图像超级链接（11）用相同方法插入“03.jpg”图像，并设置相同的宽度、高度和水平间距，然后单击属性检查器中“链接”文本框右侧的“

9、浏览文件”按钮，如图所示。插入并设置图像操作三 插入图像并创建图像超级链接（12）打开“选择文件”对话框，在其中选择“product.html”文件，单击“确定”按钮，如图所示。（13）此时属性检查器中将显示所选图像链接的文件名称，如图所示。选择链接文件创建的图像超级链接操作三 插入图像并创建图像超级链接（14）保存设置后，按“F12”键预览，将鼠标指针移至设置的文本超级链接上时指针将变为手形，如图6所示，单击鼠标即可跳转到链接的文件。（15）将鼠标指针移至创建了电子邮件链接的文本上并单击鼠标，如图所示。单击文本超级链接单击电子邮件链接操作三 插入图像并创建图像超级链接（16）此时将启动系统中

10、的电子邮件功能以便撰写并向链接的电子邮箱发送电子邮件，如图所示。（17）将鼠标指针移至设置了图像超级链接的图像上时指针也将变为手形，如图5所示，单击鼠标也可跳转到链接的文件。启动电子邮件程序单击图像超级链任务二 为“红玫瑰化妆品”网页创建超级链接u任务目标在“红玫瑰化妆品”网页中插入Logo图像并创建图像超级链接，然后输入文本并命名和创建锚记链接，最后对超级链接格式进行设置。完成后的最终效果如图所示。“红玫瑰化妆品”网页的效果任务二 为“红玫瑰化妆品”网页创建超级链接u操作思路（1）在提供的“index.html”网页中插入图像并创建图像超级链接。（2）输入导航文本并为其中部分文本创建文本超级

11、链接。（3）在网页适当位置进行锚记命名操作。（4）为导航文本创建锚记链接。（5）输入“返回顶部”文本并命名锚记，以方便浏览者浏览网页。（6）对创建了超级链接的图像和文本显示格式进行适当设置。为“红玫瑰化妆品”网页创建超级链接的操作思路操作一操作一 创建文本和图像超级链接创建文本和图像超级链接（1）打开光盘提供的“index.html”网页文件，将文本插入点定位在标题文本左侧，单击插入栏的“常用”选项卡下的“图像”按钮，如图所示。（2）打开“选择图像源文件”对话框，在其中选择提供的“pic.png”图像文件，单击“确定”按钮，如图所示。插入图像选择图像文件操作一操作一 创建文本和图像超级链接创建

12、文本和图像超级链接（3）打开“图像标签辅助功能属性”对话框，单击“确定”按钮，如图所示。（4）选择插入的图像，在属性检查器中将其宽度和高度分别设置为“129”和“96”，然后单击属性检查器中“链接”文本框右侧的“浏览文件”按钮，如图所示。设置辅助信息 设置图像尺寸操作一操作一 创建文本和图像超级链接创建文本和图像超级链接（5）打开“选择文件”对话框，在其中选择“introduction.html”文件，单击“确定”按钮，如图所示。选择链接文件操作一操作一 创建文本和图像超级链接创建文本和图像超级链接（6）为插入的图像创建了超级链接后，在标题文本下的空行中输入导航文本（各文本之间需插入若干不换行

13、空格），然后将文本颜色设置为白色，如图所示。（7）选择文本“其他产品”，单击属性检查器中“链接”文本框右侧的“浏览文件”按钮，如图所示。输入导航文本 选择文本操作一操作一 创建文本和图像超级链接创建文本和图像超级链接（8）打开“选择文件”对话框，在其中选择“other.html”文件，单击“确定”按钮，如图所示。（9）选择“关于我们”文本，单击属性检查器中“链接”文本框右侧的“浏览文件”按钮，如图所示。选择链接文件 选择文本操作一操作一 创建文本和图像超级链接创建文本和图像超级链接（8）打开“选择文件”对话框，在其中选择“us.html”文件，单击“确定”按钮完成文本超级链接的创建，如图所示。

14、选择链接文件操作二操作二 创建和链接命名锚记创建和链接命名锚记（1）将文本插入点定位到“脸妆类产品”文本右侧，选择【插入记录】【命名锚记】菜单命令，如图所示。（2）打开“命名锚记”对话框，在“锚记名称”文本框中输入“lian”，单击“确定”按钮，如图所示。选择命令命名锚记操作二操作二 创建和链接命名锚记创建和链接命名锚记（3）此时文本旁边将出现命名的锚记标记，如图所示。（4）将文本插入点定位在“唇妆类产品”文本右侧，单击插入栏的“常用”选项卡下的“命名锚记”按钮，如图所示。命名的锚记定位文本插入点操作二操作二 创建和链接命名锚记创建和链接命名锚记（5）打开“命名锚记”对话框，在“锚记名称”文本

15、框中输入“chun”，单击“确定”按钮，如图所示。（6）用相同方法在“眼妆类产品”文本右侧创建名称为“yan”的锚记，如图所示。命名锚记命名锚记操作二操作二 创建和链接命名锚记创建和链接命名锚记（7）在标题文本右侧创建名称为“top”的锚记，如图所示。（8）选择导航文本“脸妆类产品”，在其属性检查器的“链接”文本框中输入“#lian”，如图所示。其中“#”代表锚记标记，“lian”为锚记名称。命名锚记创建锚记链接操作二操作二 创建和链接命名锚记创建和链接命名锚记（9）选择导航文本“唇妆类产品”，在其属性检查器的“链接”文本框中输入“#chun”，如图所示。创建锚记链接操作二操作二 创建和链接命

16、名锚记创建和链接命名锚记（9）选择导航文本“眼妆类产品”，在其属性检查器的“链接”文本框中输入“#yan”，如图所示。（10）在如图所示的单元格中输入“返回顶部”，并设置其颜色为白色。命名锚记 输入文本操作二操作二 创建和链接命名锚记创建和链接命名锚记（11）为输入的文本创建目标为“#top”的锚记链接，如图所示。（12）将该文本复制到如图所示的两个空白单元格中，完成锚记的命名和创建操作。创建锚记链接 复制文本操作三操作三 设置超级链接格式设置超级链接格式（1）选择【修改】【页面属性】菜单命令，如图所示。选择命令操作三操作三 设置超级链接格式设置超级链接格式（2）打开“页面属性”对话框，在“分

17、类”列表框中选择“链接”选项，在右侧的“大小”下拉列表框中输入“14”，如图所示。（3）将链接颜色和已访问颜色分别设置为“#FF0000”和“#990066”，如图所示。设置链接字体大小 设置链接和已访问链接的颜色操作三操作三 设置超级链接格式设置超级链接格式（4）将变换图像链接的颜色设置为“#FF9900”，并在“下划线样式”下拉列表框中选择“始终无下划线”，单击“确定”按钮，如图所示。（5）关闭对话框后可看到网页中创建了超级链接的文本格式发生了相应变化，如图所示。设置其他链接样式 设置后的效果操作三操作三 设置超级链接格式设置超级链接格式（6）选择标题文本左侧的Logo图像，单击文档工具栏

18、中的 按钮，如图所示。选择图像操作三操作三 设置超级链接格式设置超级链接格式（7）此时代码视图中将选中图像对应的代码，如图所示。（8）在代码“height=96”后面输入“border=0”，表示将图像边框清除，如图所示。显示代码输入代码操作三操作三 设置超级链接格式设置超级链接格式（9）单击文档工具栏中的 按钮，此时Logo图像的边框即可消失，如图所示。（10）保存设置后的网页，然后按“F12”键预览。单击Logo图像即可调整到链接的网页文件中，如图所示。清除图像边框单击图像超级链接操作三操作三 设置超级链接格式设置超级链接格式（11）单击设置了锚记链接的“唇妆类产品”文本，如图所示。（12

19、）此时网页将跳转到命名了相同锚记名称的位置，如图所示。单击超级链接跳转到相应的位置操作三操作三 设置超级链接格式设置超级链接格式（13）单击“返回顶部”超级链接，如图所示。（14）此时将快速返回到网页顶部，如图所示。单击超级链接返回网页顶部效果实训一实训一 为为“汽车销售汽车销售”网页添加链接网页添加链接u实训目标在提供的“sale.html”网页中输入导航文本、插入图像并创建相应的文本超级链接、图像超级链接和电子邮件超级链接，制作出如图所示的网页效果。“汽车销售”网页效果实训一实训一 为为“汽车销售汽车销售”网页添加链接网页添加链接u实训分析（1）打开提供的“sale.html”网页，输入导

20、航文本并为各文本创建超级链接，链接文件名称与文本同名。（2）在右上角的单元格中输入“联系我们”，并为输入的文本创建电子邮件超级链接，链接的邮箱地址为“”。（3）在下方的空白单元格中插入提供的“pic01.jpg”图像，并为其创建图像超级链接，链接文件为“gainian.html”。为“汽车销售”网页创建超级链接的操作思路实训二 为“车友之家”网页添加链u实训目标在提供的“home.html”网页中创建并命名锚记，制作出如图所示的网页效果。“车友之家”网页效果实训二 为“车友之家”网页添加链u实训分析（1）打开提供的“home.html”网页，输入导航文本。（2）在标题文本右侧命名“top”锚记。（3）在各栏目右侧命名相应名称锚记（参见效果文件）。（4）为输入的导航文本创建对应的锚记链接。（5）在各栏目右侧输入“返回顶部”并创建“#top”锚记链接。（6）为导航文本“更多”创建文本超级链接。为“车友之家”网页创建超级链接的操作思路