Web Design. Links and Navigation

Transcription

1 Web Design Links and Navigation

2 Web Design Link Terms HTTP, FTP, Hyperlink, Links, Anchor HTTP (HyperText Transfer Protocol) - The most common link type and allows the user to connect to any page on the Internet. FTP (File Transfer Protocol) - Used primarily for uploading or downloading large amounts of data. This is performed typically using an FTP server, and requires the user to have the correct username and password. Links allows the user to click and open the default mail client with pre-populated address, subject, and message. (Does not work for users who do not use there default mail client) Anchor - Defined by the <a> tag is the format for inserting a Hyperlink (link)

3 Paths Absolute path is link to EXTERNAL web site with complete URL address. For example: Relative path is link to INTERNAL page or file inside of your root folder and has the direct local path.

4 Two Common Methods Browse-For-File Method a small folder icon next to the link field in the Dreamweaver Properties panel that can be used to browse for a chosen file to link to Point-to-File Method to use point-to-file, simply drag the target symbol from the link field in the properties inspector to the desired file in the files panel, or an anchor link on the current page you are working from. Link-List Method This method only works with links already made using the Browse-For- File Method. Simply click on the scroll arrows next to the link field in the Properties panel and it will display any previous links already created to choose from.

5 Linking to Other Sites External links - Need the full URL Typically open in an additional browser window using target= _blank Can link to: PDFs (Portable Document Format); Word Documents (assume the user has software); and Media files such as videos or flash animations.

6 Types of Links Text Link Link Image Link Map Link Anchor Link

7 Text Links Just text you type out in Dreamweaver and then select the text and create a link. Can be either an Absolute or Relative path.

8 Links Just like a text link only with the link going to a person s . Is created with the mailto: link in the Properties Panel in Dreamweaver. Opens the users default client Is an Absolute Path.

9 Image Links Is created by selecting any image and then creating a link for that image. Link is added in the Properties Panel in Dreamweaver. Can be either an Absolute or Relative Path. Image should be obvious to user that it s a link. Should use Alt-text Attribute to display text to link to if graphic is slow loading

10 Map Links With any image, you can create a Map Link by drawing a hotspot on the image. Hotspot tools are found in Properties Panel in Dreamweaver. Can be Rectangular, Ovals, or Polygons shape.

11 Anchor Links Is created by inserting a Named Anchor anywhere in a Dreamweaver page. You can then link to that Anchor from anywhere in the file or outside the file. Excellent for large amounts of text. Can be either an Absolute or Relative Path.

12 Removing Links By removing the contents of the link field in the Properties panel By using the Modify > Remove Link menu option Or, by deleting the image or text all together

13 Updating Links The General section of the Preferences dialog box can be used to specify how to update links in for web pages. The General section provides options to have Dreamweaver always update links, never update links, or provide a prompt when links change Links can also be changed by using the the Change Links Site-wide feature to search for and change links and in an open file, a portion of a local site, or an entire local site.

14 Testing & Fixing Links Use the LINK CHECKER Link Checker is found under the Site menu bar. The only links that Dreamweaver verifies when using this feature are links to documents within the site; Dreamweaver compiles a list of external links that appear in the selected document or documents, but does not verify them. Broken links and image references can be fixed directly in the Link Checker panel that appears, or files can be opened from the list and fixed directly in the Properties panel.

15