Unit 5. Establishing Web Links (I)
Tutor 5,1
| Now we are going to see what web links are, what are they used for and how to create them, as they are an essential element for any web site. |
| A hyperlink or link, is just a connection that redirects you to another Page or file when you click on it. You can assign a link to a text, to an image, or to part of an image. |
| There are different types of access paths when you are defining a link.  Absolute reference : Drives you to an external location from the site where the file is. The location must be in the internet, for example: "http://www.teacherclick.com". Relative reference to the site: Drives you to a file located inside the site of the actual file location. Relative reference to the file: It drives you to a file located inside the same site of the actual document, but starting in the directory in which the actual file is. Anchors: It drives you to an anchor inside a file, which can be the current one or any other. To do this, the link might be "name_of_file.extension#name_of_anchor".The anchor is defined inside a file through Insert menu, and then selecting the Named Anchor option. |
 |
| The easiest way to create a link is through the properties inspector. To do this you have to select the text or the object which is going to be used as a link, and then you must establish the Link in the inspector. For example, here there is a link to www.teacherclick.com, which will be an absolute reference, so, it must contain HTTP://  Another way to create a link is through the Insert menu, and then selecting the Hyperlink option. It's possible to create empty links, they can be useful when you use behaviors, etc. You just need to write in Link only the # symbol.. Other way to create a hyperlink is through the menu Insert, Hyperlink option.  Creating links in this way is very easy, you only have to fill the fields we will now explain and the link will be placed where the cursor is. Text: stands fot the text that the link will show. Link: is the page you are making the hyperlink to. Target: the page where you want the link to be opened. Title: its use is almost the same than the Alt attribute of the images. It is the contextual help of the link. Access key: you can set here a key to increase the accessibility of your site. This link will be accessible presing the Alt key and then the key you type in this field. Tab index : as long as you can jump from a link to another using the Tab key, you can set here the order of priority this link will have. |
The link target determines in which window the linked Page it's going to be opened, it can change depending on the frames of the actual file.
It can be specified in properties inspector through Target, or through the Insert menu, and then clicking on the Hyperlink option.
_blank: It opens the linked file in a new browser's window.
_parent: It opens the linked file in the frame window that contains the link or the set of parent frames.
_self: It's the default option. It opens the linked file in the same frame or window as the link.
_top: It opens the linked document in the whole browser's window.
Don't worry if you don't completely understand the functions of each of those destiny options, we'll check them again in the Frames theme.
Tutor 5,2
Link format |
| In general, text with a link associated appears underlined. At the same time, it can be displayed in three different colors, and these can be specified through the Page properties.These three different colors are assigned to the link (the first time you see it), to the active link and to the visited one. Here is an example: When the link is defined over an image, you can see a dotted outline when you click on it. When the link is defined over an image zone (map), you can see the outline of this zone in the Dreamweaver design view. The following images are examples: |
 | |
| As you can see, the second image link has an square around it. This is because the Border field on the properties inspector of the image, has a value of 1. For the first image it's 0. The Border field allows you to add a border to an image, independently of whether this is going to contain a link or not. If you choose 0, you won't see any border, because this indicates that the line's width of the outline is 0. You can make a thicker outline by increasing the value of the Border field.  If the link is associated to a text or an image, the pointer changes its shape when it's placed over the link. It again takes the shape of a pointing hand. |
| You can specify links for e-mail addresses too. This is useful when you want web users to contact you. The sintax of the link in this case is mailto:e-mailaddress. It can be defined through the Link option of the properties inspector, having previously selected the desired linked text or image. |
| It's also possible through the Insert menu, and then selecting the Email link option. In this case it is not possible to assign the link to an image, it only allows us to introduce the text which will contain the e-mail link. |  |
0 komentar:
Posting Komentar