Home Database Mysql Tutorial 实战Dreamweaver MX技巧之超链接

实战Dreamweaver MX技巧之超链接

Jun 07, 2016 pm 03:29 PM
dreamweaver Actual combat Skill Link

在经过前面几个部分的操作之后,我们的网页已经图文并茂,具有相当的效果了,但是这对于网页来说还不够,为了网站中的众多网页能够成为一个有机的整体,必须将各个网页通过超链接方式联系起来,这样才能够让浏览者在不同的页面之间跳转。 一、链接图片和文字


    在经过前面几个部分的操作之后,我们的网页已经图文并茂,具有相当的效果了,但是这对于网页来说还不够,为了网站中的众多网页能够成为一个有机的整体,必须将各个网页通过超链接方式联系起来,这样才能够让浏览者在不同的页面之间跳转。

    一、链接图片和文字

    为一些文字或者图片建立链接非常方便,只要用鼠标选中需要变成链接的图片或者文字,然后在属性面板的“Link”输入框中输入需要跳转的目标页面地址,或者按下输入框旁边的文件夹图标来选择需要跳转的文件。除此之外,Dreamweaver MX 2004还提供了一种通过网站窗口来快速链接文件的方法。

    第一步:首先运行“Site→Manage Sites”命令,并且从弹出菜单中选择一个已经创建好的站点,此时可以在右部看见弹出的站点管理窗口。

    第二步:在编辑区选中文字或者图片,直接拖拽属性面板中“Link”输入框旁边的圆形标靶图标,这时将出现一个箭头,当箭头指向网站管理器中的某一个文件时,文件周围会出现一个方框(如图1)。

实战Dreamweaver MX技巧之超链接

第三步:松开鼠标之后,选中的文字下部就会出现下划线,同时单词的颜色变成蓝色,而且“Link”输入框中也会自动显示目标文件的地址。

提示:在建立链接的时候需要注意URL的两种方式。1.绝对地址:例如www.abc.com/test.htm;2.相对地址:比如download/1.htm,说明页面1.htm在服务器教程 href="http://www.blue1000.com/bkhtml/c68" target=_blank>服务器的根目录中。

二、在一张图片上设定多个链接

有些网页在一张大图片上做了多个链接,这样访问者可以通过点击图片的不同位置进入不同的页面,这是应用了图像热区域的概念,我们可以参照下述步骤实现。

第一步:在Dreamweaver MX 2004中可以先选中图像,此时可以在图像属性面板上看见一个“Map”区域,在其下方有三个淡蓝色的工具图标,即矩形、圆形和多边形。

第二步:根据需要用鼠标选中其中的一个,再把鼠标移到图像上拖拽出一块淡蓝色的区域。

第三步:在属性面板中的“Link”输入框中填写需要链接的网页地址,这样一个图像热区域就做好了。

同样,再对这幅图像设定多个图像热区域,也就可以实现点击图片的不同区域进入不同的页面了。

三、定制页面内跳转的链接

第一步:在Dreamweaver MX 2004中先确定链接指向的位置,也就是屏幕跳转后停留的位置,接着选中目标文本并运行“Insert→Named Anchor”命令。

实战Dreamweaver MX技巧之超链接

第三步:在属性板的“Link”输入框中输入“#test3”,其中test3就是刚才设置的名字,这样即可实现页面内跳转功能了。

提示:如果想指向另外一页中的某个位置也可以,把这个锚式标记放过去就行了。

四、快速检查网页链接

上网冲浪的时候,最讨厌的就是看见“Web Server error 4004:File Not Found”之类的出错信息。由于一个网站中的的链接数量很多,稍有不甚就会导致很多链接出错,不过在Dreamweaver MX 2004中可以很方便地对链接进行检查。

第一步:在Dreamweaver MX 2004中运行“Site→Check Links SideWide”命令,此时将会激活链接检查面板。

第二步:从面板左上部的“Show”下拉菜单中可以选择Broken Links(断掉的链接)、Extrenal Links(外部的链接)、OrphanedFiles(孤立文件)三种,比如我们选取Orphaned Files之后,Dreamweaver MX 2004将对当前链接情况进行检查,并且将孤立的文件列表显示出来。

第三步:对于有问题的文件,直接双击鼠标左键即可打开进行修改。

提示:外部链接是链接到外部网站的链接地址,Dreamweaver无法对其正确性进行检查。

在为网页建立链接的时候需要提醒大家一定要格外小心,因为网站通常都有数百个页面,稍不留神就会导致空链接或者是链接错误的情况,这对你的网站形象可是有很不好的影响哟!

实战Dreamweaver MX技巧之超链接

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to adjust text position in dreamweaver How to adjust text position in dreamweaver Apr 09, 2024 am 02:24 AM

Adjusting the text position in Dreamweaver can be completed by the following steps: Select the text and use the text position adjuster to make horizontal adjustments: left alignment, right alignment, center alignment; 2. Make vertical adjustments: top alignment, bottom alignment, vertical center; 3. Press Shift key and use the arrow keys to fine-tune the position; 4. Use shortcut keys to quickly align: left alignment (Ctrl/Cmd + L), right alignment (Ctrl/Cmd + R), center alignment (Ctrl/Cmd + C).

How to add video to dreamweaver webpage production How to add video to dreamweaver webpage production Apr 09, 2024 am 01:42 AM

Embed video using Dreamweaver: Insert a video element. Select and upload a video file. Set video type, URL, size, autoplay and controls. Insert video. Optional: Customize the video appearance.

How to adjust line spacing in dreamweaver How to adjust line spacing in dreamweaver Apr 09, 2024 am 03:00 AM

Adjusting line spacing in Dreamweaver is a four-step process: select the text, open the Paragraph panel, adjust the Line Spacing options, and finally click OK to apply the changes.

How to add pictures to dreamweaver How to add pictures to dreamweaver Apr 09, 2024 am 03:30 AM

To insert a picture in Dreamweaver, click the Insert menu and choose Image, then navigate to the picture file and select it. Other methods include dragging and dropping files or inserting HTML code directly. Adjusting properties includes changing size, alignment, adding borders, and entering alt text.

How to export dreamweaver webpage after creating it How to export dreamweaver webpage after creating it Apr 09, 2024 am 01:27 AM

Exporting a web page in Dreamweaver involves the following steps: Export an HTML file: Select Export from the File menu, select HTML, select a file name and location, and click Save. Export CSS and JavaScript files: Choose Export from the File menu, select CSS or JavaScript, select a file name and location, and click Save. Export an image: Right-click the image, select "Export", select the image format and file name, and click "Save".

How to set dreamweaver font How to set dreamweaver font Apr 09, 2024 am 02:54 AM

You can set fonts in Dreamweaver by selecting a font, size, and color using the Properties panel. Use CSS to set fonts for your entire website or specific elements. Set the font directly in the HTML code using the "font" tag.

How to set the web design software Dreamweaver to Chinese How to set the web design software Dreamweaver to Chinese Apr 09, 2024 am 12:39 AM

To set Dreamweaver to Chinese, follow these steps: Open Dreamweaver; change User Interface Language to Simplified Chinese or Traditional Chinese in the preferences; restart Dreamweaver; check the Help menu About Dreamweaver" item to verify the language settings.

How to set text size in dreamweaver How to set text size in dreamweaver Apr 09, 2024 am 02:18 AM

To set text size in Dreamweaver, just: Select the text Go to the Text menu Select Font Size Select the desired size Press Enter to save

See all articles