adobe dreamweaver cs5 on demand part 27 ppsx

ptg Adding an http link to a Web page is a relatively simple and painless operation. You will need to decide what to use for the link (text, graphic, animation), what you are linking to (Web page, site, etc), and the cor- rect path to the destination (URL or Uniform Resource Locator). Once you've answered those questions, it's a simple matter of opening Dreamweaver and getting to work. In this example, you're creating a simple text link that will connect the active Web page to the index page on another site. Adding a Link Add a Text Link Open the Web page that you want to add the link. Enter or select the text that you want converted into a link, or click to place the insertion point where you want the link established. Click the Insert menu, and then click Hyperlink. Use the following options to convert the text into a link: ◆ Text. If you previously selected the text, it appears in this window. If you clicked in the document to add an insertion point, you need to add the text for the link. ◆ Link. Add the path and link document in the Link Input window, or click the Browse button to locate and add the link. ◆ Target. Click the Target list arrow, and then select from the following options: ◆ _blank. Opens the linked page in a new window. NOTE Be careful of this option because some spam blockers prevent the opening of additional windows. 4 3 2 1 168 Chapter 7 2 1 3 5 4 From the Library of Wow! eBook ptg Chapter 7 Linking Web Pages 169 ◆ _parent. Loads the linked document in the immediate frameset of the active document. ◆ _self. Loads the linked document in the same browser window (default). ◆ _top. Loads the linked document in the topmost window of a frameset. ◆ Title. Insert the title for the link. ◆ Access Key. Enter a keyboard stroke (one letter), to select the link in the browser (optional shortcut). ◆ Tab Index. Enter a numerical value to indicate the tab order of this link, as it relates to all other links on the page (optional). Click OK to add the link to the page. In Code view the link would look like this: <a href="http://sitename.com" tabindex="3" title="Title Text" accesskey="f" target"_self">This is the link text<a/> 5 Use to select the link file Linked text in Code view Link address appears here See Also See “Modifying a Link” on page 178 for information on changing link settings in the Properties panel. Linked text From the Library of Wow! eBook ptg 170 Chapter 7 Where would we be without email… or at least that's a question that was posed to me by one of my students while I was teaching a class on communications. I will have to admit, e-mail is a big part of our commu- nications structure. You see it everywhere you go: a patron in a restau- rant emailing their spouse on the quality of the roast beef, kids emailing their friends, who happen to be sitting right next to them in class. Email is all around us, and Dreamweaver makes the creation of an email link a veritable piece of baklava, cake. Remember, clicking an email link requires that the person doing the clicking has a valid email applica- tion, and a connection to the Internet. Adding an Email Link Add an Email Link Open the Web page that you want to add an email link. Enter or select the text that you want converted into an email link, or click to place the insertion point where you want the link established. In this example, the appropriate text is selected. Click the Insert menu, and then click Email Link. Create the link using the following options: ◆ Text. If you previously selected the text, it will appear in this window. If you clicked in the document to add an insertion point, you will be required to add the text for the link. ◆ E-Mail. Enter a valid email address. Click OK to add the email link to the page. 5 4 3 2 1 2 1 3 4 5 From the Library of Wow! eBook ptg Chapter 7 Linking Web Pages 171 Modify an Email Link Select the email link in Design view. Click the Window menu, and then click Properties to display the Properties panel. Modify the link using the following options: ◆ Link. Modify the name or path of the link by changing the link information, located within the Link box. NOTE If you remove the information in the Link box, you remove the link from the selected text. ◆ Target. Since an email link opens another application; leave this field blank. 3 2 1 1 2 3 From the Library of Wow! eBook ptg 172 Chapter 7 So far, the Web links created simply jump you from one page to another. When the selected document loads, it places you at the very top of the page. In most circumstances that's exactly what you want to happen; however, there are times when you want the page to load, and then start the visitor in the middle, or somewhere other than the very top. That's where named anchors come into play. Named anchors are internal navigation tools that let you select at what part of the page you want the visitor to start. This is extremely helpful in long scrolling docu- ments where you can have the page stop at a particular chapter or paragraph. Named anchors are an HTML anchor tag pair (<a></a>) that includes a name attribute. The named anchor serves as a target for links. To create a named anchor, you first place a named anchor on your Web page, and then create a link that directs the browser to the specific tag. Named anchors are represented by a small book icon that appears in the position of the anchor. You can have as many named anchors as you need in your document and, of course, the correspon- ding links that direct the browser to the correct anchor. Linking within a Web Page Add a Named Anchor Open the Web page that you want to add named anchors. Click to place the insertion point where you want the named anchor established. This is where the named anchor is coded in HTML. Select the Insert menu, and then click Named Anchor. Enter the name for this specific anchor (i.e. chapter1, TOC, etc). IMPORTANT Named anchors are case sensitive, and must be used only once within the document. Click OK to add the named anchor to the document. Repeat this process to add as many named anchors as needed. NOTE To chang e the nam e of a n established anchor, simply click on the book icon and change the name using the Properties panel. 6 5 4 3 2 1 3 2 Anchor name 1 Anchor icon 4 5 From the Library of Wow! eBook ptg Chapter 7 Linking Web Pages 173 Add Links to Named Anchors Select the text (or graphic) that you want to use as the link to a previously created named anchor. Click the Window menu, and then click Properties to display the Properties panel. Click in the Link box. Add the pound sign (#), followed by the name of the anchor (no spacing between the pound sign and the name of the anchor). To test the li nks, click the File menu, point to Preview In Browser, and then select the browser you want to use. TIMESAVER If you're using a lot of anchors, it's not a bad idea to make a list of the anchors, and the order in which they appear within the document. That way you don't have to hunt for the name or, worse yet, guess. 5 4 3 2 1 2 1 Did You Know? You can use the Point To File button to create a link to a named anchor. You can use the Point To File button that appears to the right of the Link box to select an anchor (if it appears in Design view). Simply click the Point To File button, and then drag it over the book icon for the name anchor and release. 4 3 From the Library of Wow! eBook . that's a question that was posed to me by one of my students while I was teaching a class on communications. I will have to admit, e-mail is a big part of our commu- nications structure. You. creation of an email link a veritable piece of baklava, cake. Remember, clicking an email link requires that the person doing the clicking has a valid email applica- tion, and a connection to. Locator). Once you've answered those questions, it's a simple matter of opening Dreamweaver and getting to work. In this example, you're creating a simple text link that will connect