搜索
LOGO第5章主要内容（1）普通图像的使用方法和特殊图像元素插入的方法（2）图像属性的设置：属性面板和CSS样式表（3）图像地图的创建（4）Flash元素、音频、视频等多媒体元素的插入方法及属性设置LOGO文字：表达了网站内容和作用，也具有传达情感的功能；图像：能够极大地吸引浏览者的注意力；多媒体元素：让网页变得“有声有色”，使静态网页具有动感，增强了网页魅力。网页元素超链接LOGOLOGO本章主要内容超链接概述链接路径创建超链接创建网站导航LOGO6.1超链接概述超链接是指从一个网页指向一个目标的连接关系，由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为链接的目标端点。源端点：创建超链接的对象目标端点：被链接的对象LOGO6.1超链接概述一个网页中用来创建超链接的对象（源端点），可以是文本、图像或其他网页元素。当浏览者将鼠标指针移至有超链接的网页元素上时，指针会变为手形，在状态栏中将显示连接目标的地址，单击链接后，链接目标将显示在浏览器上，并根据目标的类型来打开或运行。LOGO6.1超链接概述目标端点可以是任何网络资源，如一个网页、相同网页上的不同位置、一张图片、一个电子邮件地址、多媒体文件，甚至是一个应用程序等。根据目标端点的不同，链接可以分为几种类型：内部链接：链接站点内的文件外部链接：链接目标文件不在站点内，而在远程的Web服务器上锚点链接：使链接指向当前文档或不同文档中的指定位置E-mail链接：脚本链接：空链接：文件下载链接：LOGO6.2链接路径路径是指从源端点指向目标端点的一种途径。链接路径可以分为3种形式：绝对路径文档相对路径站点根目录相对路径LOGO6.2.1绝对路径每个网页都有一个唯一的地址，称作统一资源定位符URL。URL：应用协议类型://信息资源所在主机名（域名或IP地址）/路径名/…/文件名绝对路径提供所链接文档的完整URL，包括所使用的协议，如：c:/website/web/index.htm链接到绝对路径采用绝对地址的好处是，它同链接的源端点无关，只要网站的地址不变，无论文件在站点中如何移动，都可以正常实现跳转，如果希望链接其他站点上的内容，即在创建外部链接时必须需使用绝对路径绝对路径也会出现在尚未保存的网页上，如果在没有保存的网页上插入图像或添加链接，Dreamweaver会暂时使用绝对路径，网页保存后，Dreamweaver会自动将绝对路径转换为相对路径。如：file:///D|/chapter7/示例文件/images/doudou.gifLOGO6.2.2相对路径相对路径：是指以当前文件所在位置为起点到被链接文件经由的路径。当把当前文件与处于同一文件夹的另一文件链接，或者把同一网站下不同文件夹中的文件相互链接时，可使用相对路径，即位于同一站点内的文件进行超链接的设置，通常采用相对路径，具体的路径显示由源端点和目标端点在站点内的位置关系决定。LOGO6.2.2相对路径链接到同一目录下，只需输入链接文档的名称：如从“link”文件夹中的7-1.html链接到7-2.html：LOGO6.2.2相对路径链接到下一级目录，需先输入目录名，然后加”/”，再输入文件名：从“link”文件夹中的7-1.html链接到该文件夹下images文件夹中的某个文件：LOGO6.2.2相对路径链接到上一级目录中的文件，先输入“../”，再输入目录名、文件名：将“link”文件夹下images文件夹中的文件page1.html链接到“link”文件夹中的page2.html：采用相对路径的特点：只要站点的结构和文档的位置不变，那么链接就不会出错，否则链接就会失效。LOGO6.2.3根路径根路径：是指从站点根文件夹到被指文件经由的路径。在这种路径表达式中，所有的路径都是从站点根目录开始的，同源端点的位置无关。根路径由斜杠“/”开头，代表站点根文件夹。在网站内链接文件时一般使用根路径的方法。LOGO6.3创建超链接网页中的常见链接可以分为文本超链接、图像超链接、E-mail超链接、锚记超链接、下载文件链接、脚本链接、空链接等。LOGO6.3.1创建文本超链接即以文本作为媒介的链接，是网页中最常被使用的链接方式，具有文件小、制作简单和便于维护的特点。其创建方法：（1）打开需要编辑的网页文件，在设计视图中选择要创建链接的文本。（2）使用【属性】面板创建超链接：在【属性】面板中激活HTML按钮，如果知道目标端点网页文档的确切路径，可以直接在【链接】文本框中输入该文档的路径，如果要创建站点外部的链接，则必须输入绝对路径。如果创建站点内部链接，也可单击【链接】文本框右侧的【链接文件】按钮，打开【选择文件】对话框，从本地站点中选择要创建的目标文档，单击【确定】按钮，即可创建链接；或者，使用【链接】文本框右侧的【指向文件】图标按钮创建链接，此时，在【连接】文本框中将显示链接地址。LOGO6.3.1创建文本超链接【目标】下拉列表：用来设置链接的打开方式_blank：在一个新的未命名的浏览器窗口中打开链接的页面_new：与_blank类似，将链接的页面用一个新的浏览器窗口打开_parent：如果是嵌套的框架，链接会在父框或窗口中打开，如果不是嵌套的框架，则等同于_top，链接会在整个浏览器窗口中显示_self：默认值，在当前网页所在窗口或框架中打开链接的网页_top：会在完整的浏览器窗口中打开网页LOGO6.3.1创建文本超链接（3）使用【超级链接】对话框创建超链接：单击【插入】面板上的【常用】选项卡中的【超级链接】按钮，或者选择【插入】菜单|【超级链接】菜单项，打开【超级链接】对话框。用于输入或显示创建超链接的文字内容输入或选择指定的链接地址设置超链接打开的方式输入超链接的标题用于在浏览器中选择该链接的等效键盘键输入Tab顺序编号LOGO6.3.1创建文本超链接（4）保存文件，按F12键在浏览器中预览，默认的浏览器浏览方式下，超链接的文字统一为蓝色并且具有下划线，使用过的下划线则为紫色并且具有下划线。LOGO6.3.1创建文本超链接（5）CSS设置超链接的各种属性：选择【修改】|【页面属性】命令，或按Ctrl+J快捷键，在打开的【页面属性】对话框中选择【链接（CSS）】选项，设置链接属性。未被访问的超文本颜色已被访问的超文本颜色将鼠标指针移至超文本上的颜色在超链接上单击时的超文本颜色LOGOCSS提供了4个伪类（指对同一个HTML元素在不同的状态下的一种定义方式），用于控制链接进行样式控制，每个伪类用于控制链接在一种状态下的样式。a:link——用于设置a对象在正常状态下，即没有被访问时的样式。a:visited——用于设置被访问后的链接样式a:active——用于设置单击链接，而且释放之前的样式a:hover——用于设置鼠标悬停在链接之上时的样式6.3.1创建文本超链接LOGO6.3.2创建图像超链接即以图像作为媒介的链接，其创建方法：（1）打开需要编辑的网页文件，在设计视图中选择要创建链接的图像。（2）在【属性】面板上的【链接】文本框中输入链接的文件地址，也可使用【指向文件】或【浏览文件】按钮，选择链接的文件。（3）保存文件，预览页面。LOGO6.3.3创建锚记链接如果一个页面的内容较多，则页面会较长，用户需要拖动滚动条才能看到页面下面的内容。这时，为了方便用户浏览网页，在DreamweaverCS5中，可以创建一种指向文档中特定位置的链接，单击该链接，可以快速跳转到同一页面中或同一文件夹内其他文档中的指定位置，这种链接就称为锚记链接。创建这种链接时，需要先插入命名锚记，以便在文档中设置标记，然后再创建链接。LOGO6.3.3创建锚记链接（1）打开需要编辑的网页文件，将光标置于命名锚记插入处，在【插入】面板的【常用】分类中单击【命名锚记】按钮或者选择【插入】|【命名锚记】命令，弹出【命名锚记】对话框，输入锚记名称，单击【确定】按钮，则在光标处插入了锚记标记。LOGO6.3.3创建锚记链接（2）添加锚记链接，在网页文档中选中需要建立锚记链接的文本或其他网页元素，在【属性】面板的【链接】文本框中输入需要链接的锚记名称，该名称前必须加上符号“#”。（3）保存文件，按F12键进行预览，单击设置锚记的元素，页面将自动跳转到该锚记名称的位置。LOGO6.3.4创建电子邮件链接其操作步骤为：（1）在文档窗口中，将光标定位在要创建电子邮件链接的位置处。（2）在【插入】面板中单击【电子邮件链接】按钮，或者选择【插入】|【电子邮件链接】菜单命令，弹出【电子邮件链接】对话框。【文本】文本框中输入用于创建链接的文本，【电子邮件】文本框中输入链接的电子邮件地址，单击【确定】按钮，即可创建电子邮件链接。LOGO6.3.4创建电子邮件链接也可以在文档窗口中选择要创建电子邮件链接的文本或图像，然后在【属性】面板的【链接】文本框中输入“mailto：电子邮箱地址”。（3）保存文件，按F12键在浏览器中预览，当用户单击超连接时，将自动打开默认的电子邮件应用程序OutlookExpress创建新邮件，新邮件书写完毕后，单击【发送】按钮即可发送。LOGO6.3.4创建脚本链接当单击链接时引发的一个定义的动作脚本。其操作步骤为：（1）在文档窗口中，选择要创建脚本链接的文本或图像。（2）在【属性】面板的【链接】文本框中输入javascript:，并在其后输入Javascript代码或函数调用，例如：window.close();,即关闭窗口。（3）保存文件，按F12键在浏览器中预览，当用户单击超连接时会触发动作。LOGO6.3.6创建空链接没有目标端点的链接，利用空链接，可以激活文件中的链接对应的对象和文本，当文本或对象被激活后，可以为其添加行为，如当鼠标经过后变换图片等。其操作步骤为：（1）在文档窗口中，选择要创建空链接的文本或图像。（2）在【属性】面板的【链接】文本框中输入空链接#。LOGO6.3.7创建文件下载链接当被链接的文件是exe文件或zip文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法。其操作步骤为：（1）在文档窗口中，选择要创建下载链接的文本或图像，单击右键。（2）在快捷菜单中选择【创建链接】命令，打开【选择文件】对话框，进行目标文件选择即可，单击“确定”按钮，在【属性】面板的【链接】文本框中显示了所要链接下载的文件名称。（3）保存页面，按F12键预览，单击页面中的链接，弹出“文件下载”对话框，单击“保存”按钮，弹出“另存为”对话框，选择保存在本地计算机的目录，单击“保存”，所链接的下载文件即可保存在该位置。LOGO6.3.8在HTML源代码中创建链接使用a标记，结合href属性创建文本链接。使用a标记，结合href属性，以及imag标记和src属性创建图像链接。LOGO6.4创建导航链接网页导航相当于一个网站的目录，用来告诉访问者网站所包含的的内容，引导用户快速找到自己感兴趣的内容。网页导航是整个网站中所有主要网页的链接所在地，无论用户当前浏览到何处，只要单击相应的链接就可以进入所链接的页面，实现网上冲浪的感觉。同时，网页导航作为网页设计的主要组成部分，一定要放置在网页最明显的位置，这样，浏览者可以在第一时间看到它，同时做出判断，进入他们想要浏览的信息栏目。LOGO6.4创建导航链接导航的方向：指导航按钮的排列方式横排导航：占用页面空间少，适合信息量大的门户站点，导航较多时，可以选择多排导航。竖排导航：占用页面空间较多。倾斜导航：打破了网页由于表格排版造成的横向和竖向导航的格局，拥有很强的视觉冲击力，个性特征鲜明，不适用信息量丰富的网站。LOGO6.4.1传统Table布局