《dreamweaver+cs3网页制作任务实训教程(模块五)》由会员分享，可在线阅读，更多相关《dreamweaver+cs3网页制作任务实训教程(模块五)（53页珍藏版）》请在金锄头文库上搜索。
1、模块五 为网页添加超级链接,主讲老师：付建新,Dreamweaver CS3网页制作任务实训教程,学习目标,掌握文本超级链接和图像超级链接的创建与设置方法 熟悉电子邮件超级链接的创建方法 熟悉并掌握创建和命名锚记的操作,任务一 为“公司介绍”网页创建超级链接,任务目标 在“公司介绍”网页中输入文本，并创建文本超级链接、图像超级链接和电子邮件超级链接，完成后的最终效果如图所示。,为“公司介绍”网页创建超级链接后的效果,任务一 为“公司介绍”网页创建超级链接,操作思路 （1）在提供的“index.html”网页中输入文本并进行适当设置。 （2）为输入的文本创建文本超级链接和电子邮件超级链接。 （3
2、）插入图像并为图像创建超级链接。,为“公司介绍”网页创建超级链接的操作思路,操作一 创建和设置文本超级链接,（1）打开光盘中提供的“index.html”网页素材，将文本插入点定位到正文所在的单元格，单击鼠标右键，在弹出的快捷菜单中选择【表格】【插入行】菜单命令，如图所示。,插入行,操作一 创建和设置文本超级链接,（2）在插入的空行中单击鼠标右键，在弹出的快捷菜单中选择【对齐】【居中对齐】菜单命令，如图所示。 （3）输入文本“公司介绍”，如图所示。,设置对齐方式,输入文本,操作一 创建和设置文本超级链接,（4）插入20个不换行空格，然后输入“员工培训”文本，如图所示。 （5）按照相同方法输入其
3、余文本，如图所示。,输入文本,输入文本,操作一 创建和设置文本超级链接,（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）打开“电子邮件链接”对话框，在“文本”文本框中将自动输入选择的文本内容，在
6、“E-Mail”文本框中输入电子邮箱地址，然后单击“确定”按钮，如图所示。,创建电子邮件链接,输入电子邮箱地址,操作二 创建电子邮件超级链接,（4）此时在创建了电子邮件链接文本的属性检查器的“链接”文本框中将出现“mailto:+电子邮箱地址”的内容，表示创建的超级链接为电子邮件链接，如图所示。,创建的电子邮件链接,操作三 插入图像并创建图像超级链接,（1）在版权信息所在行中单击鼠标右键，在弹出的快捷菜单中选择【表格】【插入行】菜单命令，如图所示。,插入行,操作三 插入图像并创建图像超级链接,（2）在插入的空行中单击鼠标右键，在弹出的快捷菜单中选择【对齐】【居中对齐】菜单命令，如图所示。 （3
7、）单击插入栏的“常用”选项卡下的“图像”按钮 ，打开“选择图像源文件”对话框，在其中选择 “01.jpg”文件，单击“确定”按钮，如图所示。,设置对齐方式,选择图像文件,操作三 插入图像并创建图像超级链接,（4）打开“图像标签辅助功能属性”对话框，直接单击“确定”按钮，如图所示。 （5）选择插入的图像，将其宽度、高度和水平边距分别设置为“300”、“200”和“20”，如图所示。,设置辅助信息,设置图像尺寸和边距,操作三 插入图像并创建图像超级链接,（6）保持图像的选中状态，单击属性检查器中“链接”文本框右侧的“浏览文件”按钮 ，如图所示。,创建图像超级链接,操作三 插入图像并创建图像超级链接
8、,（7）打开“选择文件”对话框，在其中选择“factory.html”文件，单击“确定”按钮，如图示。 （8）此时属性检查器中将显示所选图像链接的文件名称，如图所示。,选择链接文件,创建的图像超级链接,操作三 插入图像并创建图像超级链接,（9）用相同方法插入“02.jpg”图像文件，并设置与前一幅图像相同的宽度、高度和水平间距，然后单击属性检查器中“链接”文本框右侧的“浏览文件”按钮 ，如图所示。 （10）打开“选择文件”对话框，在其中选择“factory.html”文件，单击“确定”按钮，如图所示。,插入并设置图像,选择链接文件,操作三 插入图像并创建图像超级链接,（11）用相同方法插入“0
9、3.jpg”图像，并设置相同的宽度、高度和水平间距，然后单击属性检查器中“链接”文本框右侧的“浏览文件”按钮 ，如图所示。,插入并设置图像,操作三 插入图像并创建图像超级链接,（12）打开“选择文件”对话框，在其中选择“product.html”文件，单击“确定”按钮，如图所示。 （13）此时属性检查器中将显示所选图像链接的文件名称，如图所示。,选择链接文件,创建的图像超级链接,操作三 插入图像并创建图像超级链接,（14）保存设置后，按“F12”键预览，将鼠标指针移至设置的文本超级链接上时指针将变为手形，如图6所示，单击鼠标即可跳转到链接的文件。 （15）将鼠标指针移至创建了电子邮件链接的文本
10、上并单击鼠标，如图所示。,单击文本超级链接,单击电子邮件链接,操作三 插入图像并创建图像超级链接,（16）此时将启动系统中的电子邮件功能以便撰写并向链接的电子邮箱发送电子邮件，如图所示。 （17）将鼠标指针移至设置了图像超级链接的图像上时指针也将变为手形，如图5所示，单击鼠标也可跳转到链接的文件。,启动电子邮件程序,单击图像超级链,任务二 为“红玫瑰化妆品”网页创建超级链接,任务目标 在“红玫瑰化妆品”网页中插入Logo图像并创建图像超级链接，然后输入文本并命名和创建锚记链接，最后对超级链接格式进行设置。完成后的最终效果如图所示。,“红玫瑰化妆品”网页的效果,任务二 为“红玫瑰化妆品”网页创建
11、超级链接,操作思路 （1）在提供的“index.html”网页中插入图像并创建图像超级链接。 （2）输入导航文本并为其中部分文本创建文本超级链接。 （3）在网页适当位置进行锚记命名操作。 （4）为导航文本创建锚记链接。 （5）输入“返回顶部”文本并命名锚记，以方便浏览者浏览网页。 （6）对创建了超级链接的图像和文本显示格式进行适当设置。,为“红玫瑰化妆品”网页创建超级链接的操作思路,操作一 创建文本和图像超级链接,（1）打开光盘提供的“index.html”网页文件，将文本插入点定位在标题文本左侧，单击插入栏的“常用”选项卡下的“图像”按钮 ，如图所示。 （2）打开“选择图像源文件”对话框，在
12、其中选择提供的“pic.png”图像文件，单击“确定”按钮，如图所示。,插入图像,选择图像文件,操作一 创建文本和图像超级链接,（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”，如图所示。,创建锚记链接,操作二 创建和链接命名锚记,（9）选择导航文本“眼妆类产品
16、”，在其属性检查器的“链接”文本框中输入“#yan”，如图所示。 （10）在如图所示的单元格中输入“返回顶部”，并设置其颜色为白色。,命名锚记,输入文本,操作二 创建和链接命名锚记,（11）为输入的文本创建目标为“#top”的锚记链接，如图所示。 （12）将该文本复制到如图所示的两个空白单元格中，完成锚记的命名和创建操作。,创建锚记链接,复制文本,操作三 设置超级链接格式,（1）选择【修改】【页面属性】菜单命令，如图所示。,选择命令,操作三 设置超级链接格式,（2）打开“页面属性”对话框，在“分类”列表框中选择“链接”选项，在右侧的“大小”下拉列表框中输入“14”，如图所示。 （3）将链接颜色和已访问颜色分别设置为“#FF0000”和“#990066”，如图所示。,设置链接字体大小,设置链接和已访问链接的颜色,操作三 设置超级链接格式,（4）将变换图像链接的颜色设置为“#FF9900”，并在“下划线样式”下拉列表框中选择“始终无下划线”，单击“确定”按钮，
