网页设计与制作课件 项目8：掌握运用插入及创建链接

网页设计与制作——项目8：掌握运用插入

及创建链接Project8项目8职场情境文本与表格在网页的学习中已经完成了，一个能够吸引人的网页单单靠表格的布局精彩的文字是不能够成为一个合格的网页的，在网页中创建链接、插入图像、插入多媒体，这些能够吸引人的图像和视频能够把当前的网页衬托的更加非富多彩，如何才能在网页中创建链接、插入图像等操作是小艾非常想要知道的，在她对着计算机发呆的时候，凯程来到了她的身边，告诉小艾，超级链接、漂亮的图片才是网页的灵魂，图像有着丰富的色彩和表现形式，恰当地利用图像可以加深用户对网站的印象。这些图像是文本的说明及解释，可以使文本清晰易读、更加具有吸引力，目前的网页也不再是单一的文本，图像、声音和动画等多媒体技术更多地应用到了网页之中。在网络中，超级链接是将所有数据串连起来的基础。借由超级链接，就可随心所欲的畅游网络世界而不受时空的限制，如果把网站比喻为住家，那么超级链接就是四通八达的道路系统，将整个网络世界架构起来。接下来，大家就跟随小艾一同走进Dreamweaver中的插入图像、鼠标经过图像、插入多媒体及其创建超级链接。和小艾一起进行相关内容的学习，在网页设计的道路上展现自己的才华，好了，下面我们就一起来进行学习和进步吧！。Project8项目8学习目标〓知识目标〓掌握在网页中插入图像的方法。掌握以背景的方式插入图像。掌握如何在

Dreamweaver中编辑图像。掌握鼠标经过图像的方法。掌握插入声音及视频。掌握插入超级链接。掌握检查链接的方法。〓技能目标〓学会插入图像。学会以背景的方式插入图像。学会编辑图像。学会插入超级链接学会创建文件下载链接〓素质目标〓要学会将各个元素在网页的整体中进行运用，要知道螺丝虽小可定万斤的道理。不要只会学不会用，要做到实践与知识共同进步。对自己要有信心，信心是万事开头的基石，要做到有信心、有能力的全新工作者。CONTENTS任务1掌握网页中插入图像目录任务2掌握Dreamweaver中图片编辑任务3掌握插入鼠标经过图像任务4掌握插入声音及多媒体综合实战—创建鼠标经过并设置链接课后习题任务5了解超链接概念任务6掌握各种链接方式任务1掌握网页中插入图像图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也加深用户对网站风格的印象。活动1掌握插入图像在

Dreamweaver中创建表格并设置表格的宽度与高度后，将光标放置到其中的一个单元格，执行菜单栏中的“插入/Image”命令，打开“选择图像源文件”对话框，在对话框中找到需要插入的图像，如图所示。设置完毕单击“确定”按钮，会将选择的图像插入到鼠标指针所在的表格中，如图所示。将鼠标指针放置到第2行中，再次选择一个图像将其插入到表格中，如图所示。。任务1掌握网页中插入图像在Dreamweaver中插入的图像不但可以直接插入，还可以以背景的形式插入，此时图像就相当于单元格中的背景，在单元格中还可以再次插入图像和文本，背景插入过程如下。课堂实操—通过background插入背景图片任务1掌握网页中插入图像图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也加深用户对网站风格的印象。活动2掌握将图像设置为整个网页的背景背景图像有“单一图像”及“拼贴”二种效果类型，虽然使用“拼贴”方式的图像文档容量小，不过效果却较为单调。若要强调站点的风格，则可以考虑“单一图像”。默认情况下被当成网页背景的图像是以“拼贴”方式显示的，在“属性”面板中单击“页面属性”按钮，打开“页面属性”面板，单击“背景图像”后面的“浏览”按钮，可以选择作为背景的图像，如图所示。设置完成单击“确定”按钮，可以看到当前网页的背景以背景图像进行显示，如图所示。任务1掌握网页中插入图像在预设情况下Dreamweaver会将指定的图像文件自动拼贴填满网页画面，不过各位也可以根据页面效果的需要来调整拼贴模式，在“属性”面板中单击“页面属性”按钮，打开“页面属性”面板，在这里可以设置图像显示的不同方式，如图所示。。下表8-1就是各种拼贴模式的效果说明，一起来了解拼贴方式。设置类型图像排列方式画面预览No-repeat不重复不会将图像图片拼贴填满整个网页画面，所以只会在左上角看到背景图像。Repeat重复会将图像图片以拼贴方式填满整个网页画面。Repeat-x水平重复会将图像图片以水平方式进行拼贴，所以只会在页面最上方看到背景图像。Repeat-y垂直重复会将图像图片以垂直方式进行拼贴，所以只会在页面最左方看到背景图像。任务2掌握Dreamweaver中图片编辑虽然图片及效果在网站设计初期就已经决定好，不过最后在利用Dreamweaver进行整合时，还是有可能做一些修改或调整，以配合整个网页的风格。要调整或编修图片属性，通常都是通过“属性”面板来处理，以下针对Dreamweaver所提供的各项功能来为各位做个说明。活动1掌握调整图片大小图片加入到Dreamweaver后，如果发现图片尺寸需要缩小，可以透过以下方式做修正。点击插入的图片后，在“属性”面板中改变图片的尺寸来做修正，如图所示。选择插入的图像后，将鼠标放置到图像的右下角控制点上，按下鼠标进行拖曳，此时可以看到图像会跟随拖曳来改变大小，即可选中表格，如所示。任务2掌握Dreamweaver中图片编辑为图片加上边框可强化图像效果，不过必须新增CSS样式才能加入图片边框，还可以通过“CSS设计器”面板来完成。课堂实操—通过CSS设计器为图片添加边框任务2掌握Dreamweaver中图片编辑活动2掌握加入方块阴影图片除了可以添加边框以外，各位也可以轻松为图片加入阴影喔！只要在“box-shadow”的属性上设置阴影的垂直/水平偏移值、模糊半径、扩散半径或色彩，如图所示。此时只要就可以透过“实时视图”功能看到效果，如图所示。此阴影不需要再通过绘图软件来处理。任务2掌握Dreamweaver中图片编辑活动3掌握设置图片对齐当段落文字及图片并存时，如果希望文字能够沿着图片右侧或左侧依序排列，那么可利用鼠标右键来选择“对齐”的方式，如图为选择“右对齐”；还可以在“CSS设计器”中进行对齐设置，选择图片后，在“属性”中选择“布局”按钮

，在下来列表中设置“float”，以此来设置对其方式，如图所示。任务2掌握Dreamweaver中图片编辑选择“左对齐”或“右对齐”的方式后，会形成文绕图的编排效果，这是一般网页上常看到的编排方式，效果如图所示。。任务3掌握插入鼠标经过图像在Dreamweaver中插入图像还可以通过鼠标经过时改变为另一张图片，插入过程如下：。课堂实操—通过鼠标经过图像命令设置鼠标经过效果任务3掌握插入鼠标经过图像实践经验：如果觉得在Dreamweaver根据切片创建表格的方法比较麻烦，我们可以在“将优化结果储存为”对话框中，设置“格式”为HTML和图像，如图所示。之后在Dreamweaver中直接将HTML直接打开，然后在对图像进行鼠标经过的图像替换即可。素养小课堂万丈高楼是由每一块砖组成的，缺少任意的一块，建设的高楼就不会稳，就有倒塌的危险。网页制作就是运用了这个道理，汇聚之前学过的小知识，将其运用到整体的网页制作中，要知道每个小知识都是网页不可或缺组成部分。任务4掌握插入声音及多媒体在网页中可以添加各种不同格式的声音文件，但在加入声音文件之前要考虑用途、文件大小、声音品质和浏览器差别等因素，多媒体文件是当前网页中更离不开一项内容。活动1掌握关于音频文件格式音频文件格式常见的特点有：要在计算机内播放或是处理音频文件，也就是要对声音文件进行数、模转换，这个过程同样由采样和量化构成，人耳所能听到的声音，最低的频率是

20Hz，最高频率是

20KHz，20KHz以上人耳是听不到的，因此音频文件格式的最大带宽是

20KHz，故而采样速率需要介于

40~50KHz之间，而且对每个样本需要更多的量化比特数。音频数字化的标准是每个样本

16位-96dB的信噪比，采用线性脉冲编码调制

PCM，每一量化步长都具有相等的长度。在音频文件的制作中，正是采用这一标准。音频格式日新月异，常见的音频格式包括：CD格式、WAVE（*.WAV）、AIFF、AU、MP3、MIDI、WMA、RealAudio、VQF、OggVorbis、AAC、APE。任务4掌握插入声音及多媒体通过提示，可以在代码视图中插入代码。在输入某些字符时，将显示一个列表，列出完成条目所需要的选项。下面通过代码提示讲述背景音乐的插入，具体操作步骤如下。课堂实操—通过bgsound插入背景音乐任务4掌握插入声音及多媒体实践经验：浏览器可能需要某种附加的音频支持来播放声音，因此，具有不同插件的不同浏览器所播放声音的效果通常会有所不同任务4掌握插入声音及多媒体活动1掌握插入HTML5VideoHTML5目前是网页发展的趋势，将HTML5的视频轻松添加到网站上，可让网站具有娱乐效果。目前HTML5支持的格式包括*.ogg、*.mp4、*.m4v、*.webm、*.ogv、*.3gp等格式，打开一个网页后，将鼠标指针放置到中间的一个表格中，设置“水平”为“居中对齐”、“垂直”为“居中”，如图所示。执行菜单栏中“插入/HTML/HTML5Video”命令，页面自动加入此对象，请点选该对象后，在“属性”面板中的“源”后面单击“浏览”按钮，如图所示。任务4掌握插入声音及多媒体单击后，系统会打开“选择视频”对话框，找到一个“.mp4”格式的视频，如图所示。选择视频后单击“确定”按钮，就可以将视频插入到网页中，此时在“属性”面板中设置视频的尺寸、是否自动播放、重复、以及是否显示控件等内容，如图所示。保存文档，按

F12键在浏览器中预览，效果如图所示。任务5了解超链接概念超级链接是从一个网页或文件到另一个网页或文件的链接，包括图像或多媒体文件，还可以指向电子邮件地址或程序。当网站访问者单击超级链接时，将根据目标的类型执行相应的操作，即在

Web浏览器中打开或运行。要正确创建链接，就必须了解链接与被链接文档之间的路径。每个网页都有一个唯一的地址，称为统一资源定位符（URL）。当在网页中创建内部链接时，一般不会指定链接文档的完整

URL，而是指定一个相对当前文档或站点根文件夹的相对路径。路径可分为绝对路径和相对路径。一．了解绝对路径绝对路径是包括服务器规范在内的完全路径。不管源文件在什么位置，通过绝对路径都可以非常精确地将目标文档找到，除非它的位置发生变化，否则链接不会失败。采用绝对路径的好处是，它同链接的源端点无关。只要网站的地址不变，则无论文档在站点中如何移动，都可以正常实现跳转而不会发生错误。另外，如果希望链接到其他站点上的文件，就必须使用绝对路径。采用绝对路径的缺点在于，这种方式的链接不利于测试。如果在站点中使用绝对路径，那么要想测试链接是否有效，就必须在

Internet服务器端对链接进行测试。二.了解相对路径相对路径也叫文档相对路径，对于大多数的本地链接来说，是最适用的路径。在当前文档与所链接的文档处于同一文件夹内时，文档相对路径特别有用。文档相对路径还可用来链接到其他文件夹中的文档，方法是利用文件夹的层次结构，指定从当前文档到所链接文档的路径。任务6掌握各种链接方式超级链接功能不只是用来链接网址及页面，它还包括电子邮件、文件下载及锚点链接等其它形式的链接效果。也因此要先了解各种超级链接的功能，才能根据需求选用适合的超级链接。活动1掌握网站内部链接内部链接的作用是链接到网站中的其它页面，让浏览者可以浏览到网站中的其它页面数据。1.掌握创建文字链接文字超级链接是最基本的链接方式，请先输入如图中的内容。输入链接文字时请在每组文字间加入空白及分隔线，这样不仅看起来美观，同时也可避免点选时的困扰。新建一个网页文档，输入六组链接文字，将第一组文字进行选取，在“属性”栏中“链接”后面的“浏览文件”按钮

，如图所示。单击此按钮后，弹出“选择文件”对话框，在对话框中选择文字对应的网页，如图所示。单击“确定”按钮，完成文字的链接创建，效果如图所示。任务6掌握各种链接方式2.掌握使用“插入”面板中的超级链接功能接下来我们来练习如何透过“插入”面板来插入超级链接，新建空白文档，在“插入”面板中选择“HTML”后，单击“Hyperlink”按钮，如图8-52所示。单击后弹出“Hyperlink”对话框，输入文本后，在“链接”后面设置链接的文件，如图8-53所示。设置完毕单击“确定”按钮，完成文字链接的创建，如图8-54所示。任务6掌握各种链接方式3.掌握创建超级链接图片当浏览网页时，鼠标经过图像时，会出现一个手形图标，提示浏览者这是带链接的图像。此时单击鼠标，会打开所链接的网页，这就是图像超级链接。运用图片来创建超级链接的做法和文字相同，都是通过“属性”面板来设置，在打开的网页文档中选择一个需要创建连接的图像，之后在“属性”栏中“链接”后面的“浏览文件”按钮

，选择一个链接文档即可，如图所示。任务6掌握各种链接方式网站外部链接是指要连到其它网址，目前有很多网站都会互相交换链接，以扩大网站的曝光率。不论是文字或图片，在创建网站外部链接时的做法都一样。这里我们要链接到可进行搜索的百度首页，“/”网站，如图所示。活动2掌握网站外部链接任务6掌握各种链接方式电子邮件链接提供了一个方便的通讯管道，除了信件及电话以外，几乎所有的商业网站，都有提供电子邮件的链接，以做为服务的一部份。活动3掌握电子邮件链接1.掌握通过创建文字来设置邮箱打开一个文档，在单元格空白处点击后，执行菜单栏中的“插入/HTML/电子邮件链接”命令，也可以在“插入”面板中直接点击“电子邮件链接”按钮，弹出“电子邮件链接”对话框，设置“文本”和“电子邮件”，如图所示。设置完毕单击“确定”按钮，即可创建邮件的链接，如图所示。任务6掌握各种链接方式电子邮件链接提供了一个方便的通讯管道，除了信件及电话以外，几乎所有的商业网站，都有提供电子邮件的链接，以做为服务的一部份。活动3掌握电子邮件链接2.掌握通过图片设置邮箱各位也可以在图片上直接创建电子邮件链接，不过链接要在电子邮件地址前面加上“mailto：”而非“http：//”，选择图片后，设置邮箱链接地址，如图所示。任务6掌握各种链接方式在广告邮件非常泛滥的今天，一些没有信件主旨的邮件很容易被认为是广告邮件而删除，为了避免误删的情形发生，各位可以在电子邮件链接中另外加上邮件的「信件主题”，这样在收信时，就会知道这是一封浏览者表达意见的邮件了。请在电子邮件链接的后面加上「?subject=读者意见”文字，而完整的写法为「mailto:caopeiqiangcr@163.com?subject=读者意见”，其中的「读者意见”四个字是本节中的范例，各位可以视需要自行改成其它的文字，如图所示。任务6掌握各种链接方式如果要在网站中提供下载资料，就需要为文件提供下载链接，如果超级链接指向的不是一个网页文件，而是其他文件例如

zip、mp3、exe文件等，在网页文档中点击图片或选择文本后，在“属性”栏中“链接”后面的“浏览文件”按钮

，如图所示。单击此按钮后，弹出“选择文件”对话框，在对话框中选择需要下载的文件，如图所示。单击“确定”按钮，完成下载链接的创建，储存后按“F12”，在网页中点击就可以完成下载，效果如图所示。活动4掌握文件下载链接任务6掌握各种链接方式图像地图是一种网页导览结构，它能在单一图像上创建许多的链接区域。因此可以设计一张导览图像，然后利用图像地图的功能，在上面创建多个链接区域，如此即可让页面风格完整呈现，又可同时兼顾导览链接的功能。图像地图的链接区域有“矩形”、“圆形”及“多边形”三个外形可以选用，各位可以从属性面板上做选择。打开一个网页文档选择其中的图像后，在“属性”栏中选择“矩形热点工具”

，在图像中的“国际线路”区域创建矩形热点区域，如图所示。之后创建链接的方法与文字和图像一样，这里我们直接在“链接”文本框中输入“#”，将其作为空链接，选择“圆形热点工具”

或“多边形热点工具”

，创建热区并设置空链接，如图所示。活动5掌握图像地图创建热区链接任务6掌握各种链接方式拓展知识前面为各位介绍了软件中的各种超级链接创建方式，不过还没就此结束，因为Dreamweaver还可进一步的替超级链接文字加上“下划线样式”及“颜色”等效果样式，让超级链接与页面风格更具一致性。活动1取消链接底线和设置超级链接的文字格式1.取消链接底线超级链接文字上的底线可算是超级链接的商标，不过这个底线是可以依据页面风格的需要而取消的，请在“属性”栏中单击“页面属性”按钮，打开“页面属性”对话框，透过“链接”下的“下划线样式”来做设置。设置完毕单击“确定”按钮，此时会将原来的下划线隐藏，如图所示。样式名称作用始终有下划线在超级链接文字上使用下划线效果。始终无下划线在超级链接文字上不使用下划线效果。仅在变换图像时显示下划线平时不显示底线，当鼠标移过时才显示底线。变换图像时隐藏下划线平时会显示底线，当鼠标移过时才隐藏底线。任务6掌握各种链接方式2.超级链接的文字格式Dreamweaver将页面上的超级链接文字分为四种使用状态，并且还可以对这四种状态分别设置不同的文字颜色，好让浏览者可以根据颜色来判断页面的浏览情形，请在“属性”栏中单击“页面属性”按钮，打开“页面属性”对话框，我们要在“链接”分类中作设置，如图所示。设置名称作用链接颜色鼠标点选链接文字前的文字颜色。变换图像链接鼠标移过文字上方时的文字颜色。已访问链接链接过后的文字颜色。活动的链接当鼠标点选超级链接文字时所显示的文字颜色。任务6掌握各种链接方式活动2快速创建超级链接与删除超级链接1.快速创建超级链接只要是在页面上创建过的链接，要再使用时就从“属性”面板中的“链接”清单直接选用即可，如图所示。2.删除超级链接如果要去除文字或图片上的超级链接时，只要将“属性”面板上的链接信息删除就可以了，如图所示。任务6掌握各种链接方式拓展知识超链接是网页中不可缺少的一部分，通过超链接可以使网站中众多的网页构成一个有机整体。通过管理网页中的超链接，也可以对网页进行相应的管理。1.自动更新链接每当在本地站点内移动或重命名文档时，Dreamweaver可更新起自及指向该文档的链接，当将整个站点储存在本地硬盘上时，自动更新链接功能最适合用，Dreamweaver不更改远程文件夹中的文件。执行菜单栏中的“编辑/首选项”命令，打开“首选项”对话框，在对话框中的“分类”列表中选择“常规”选项，如图所示。在“文档选项”区域，从“移动文件时更新链接”下拉列表框中选择“总是”或“提示”。若选择“总是”，则每当移动或重命名选定的文档时，Dreamweaver将自动更新起自和指向该文档的所有链接；如果选择“提示”，则在移动文档时，Dreamweaver将显示“更新文件”对话框，在对话框中列出此更改影响到的所有文件。任务6掌握各种链接方式拓展知识超链接是网页中不可缺少的一部分，通过超链接可以使网站中众多的网页构成一个有机整体。通过管理网页中的超链接，也可以对网页进行相应的管理。2.在站点范围内更改链接除了每次移动或重命名文件时让

Dreamweaver自动更新链接外，还可以手动更改所有链接，使它们指向其他位置。打开一个当前站点中的文档，执行菜单栏中的“站点/站点选项/改变站点范围的链接”，弹出“更改整个站点链接”对话框，单击“确定”，即可更改整个站点范围内的链接”，如图所示。任务6掌握各种链接方式拓展知识超链接是网页中不可缺少的一部分，通过超链接可以使网站中众多的网页构成一个有机整体。通过管理网页中的超链接，也可以对网页进行相应的管理。3.检查站点中的链接错误要检查网站的链接，可以利用“链接检查器”面板，执行菜单栏中的“窗口/结果/链接检查器”，弹出“链接检查器”面板，单击“检查链接”按钮

，会弹出需要检查的链接内容，只要根据提示选择就可以了，如图所示。在“显示”后面的下拉列表中可以查看需要进行链接检查的文件，如图所示。综合实战—创建鼠标经过并设置链接实战训练要求打开图像创建切片新建文档进行保存创建表格插入背景图嵌入表格设置大小插入鼠标经过插入图片设置链接实战素材素材文件：素材/项目8/Beijing、导航，如图所示。任务单项目编号8项目名称综合实战—创建鼠标经过并设置链接

时间地点目的：实践网页制作中通过创建切片及布局表格并制作网页中鼠标经过效果和创建链接的一般流程课堂实践：设计主题，打开文档创建切片、新建、插入表格、嵌套表格、设置文本大小颜色，设置以背景形式插入图片、插入鼠标经过，设置链接。完成一个导航区域的制作。考核标准：打开文档创建切片。10分新建文档插入表格。10分嵌套表格10分以背景形式插入图片10分设置链接10分内容可粘贴：评价评分：指导教师签字：综合实战—创建鼠标经过并设置链接实战效果图效果文件：源文件/项目8/zhsz，如图所示。课后习题一．判断题1.()链接到其它网站的超级链接，是属于外部链接。2.()链接外部网站时，网址前面的“HTTP://”可有可无。3