Chapter 4-Working with Links



Chapter 4-Working with Links

Lesson 1-External and Internal Links

Create an External Link

1. Open the Striped Umbrella web site, open dw4_1.html from the chapter_4 folder where your data files are stored, then save it is activities in the striped_umbrella root folder, overwriting the existing activities page, but not updating links.

2. Attach the su_styles.css file, then apply the body text style to the paragraphs of text on the page.

3. Select the first broken image, click the Browse for File icon, then select the heron_waiting_small.jpg in the data files folder for chapter_4.

4. Repeat step 3 for the second image, two_dolphins_small.jpg.

5. Scroll down, select the text “Blue Angels”

6. Click in the Link text box in the Property inspector, type , press enter

7. Repeat steps 5 and 6 to create a link for the USS Alabama site in the next paragraph:

8. Save your work and preview the page in the browser.

Create an Internal Link

1. Select the text “fishing excursions” in the third paragraph.

2. Create a hyperlink from the text to the fishing.html page.

3. Select the text “dolphin cruises” in the second paragraph and create a hyperlink from the text to the cruises.html page.

4. Save your work and preview in the browser.

Lesson 2-Create Internal Links to Named Anchors

Insert a Named Anchor

1. Open the spa page, click the banner to select it, then press the left arrow key on the keyboard to place the insertion point to the left of the banner.

2. Click the Insert bar list arrow, then click Common.

3. Click the Named Anchor button on the Insert bar to open the named anchor dialog box, type top in the Anchor name text box, then click OK.

4. Click to the left of the Skin Care Treatments heading, then insert a named anchor called skin_care.

5. Insert named anchors to the left of the Body Treatments, Massages, and Packages headings using the following names: body_treatments, massages, and packages.

Create an internal link to a named anchor

1. Select the words “skin care treatments” in the first paragraph, then drag the Point to File Icon to the anchor named skin_care.

2. Create internal links for body treatments, massages and spa packages in the first paragraph by first selecting each of these words or phrases, then dragging the Point to File icon to the appropriate named anchor icon.

3. Save your work and preview in the browser.

Lesson 3-Insert Rollovers with Flash Text

Create Flash Text

1. Click after the last word on the spa page, then press enter twice to end the ordered list.

2. Click the Insert bar list arrow, click Common, click the Media list arrow, then click Flash Text to open the Insert Flash Text dialog box.

3. Type Top of Page in the Text box, set the font to Arial, set the size to 14, color to #000066, set the rollover color to #66CCFF, type spa.html#top in the Link text box, use the Target list arrow to set the Target to _top, type top.swf in the Save as text box, then click OK.

4. Type Link to top of page in the Flash Accessibility Attributes dialog box, then click OK.

5. Click Assets in the Files panel group, click the Flash button on the Assets panel, then click the play button to see the Flash text preview.

6. Drag top.swf from the Assets panel to the end of each of the spa services groups to insert four more links to the top of the page, adding the alternate text Link to top of page for each one.

7. Click the Files panel tab, then refresh the Files panel.

8. Save your work and preview in the browser.

Change the alignment of Flash text

1. Click the top of page button at the end of the Skin Care Treatments section, expand the Property Inspector, click the Align list arrow, then click Top.

2. Apply the top alignment setting to the Top of page button located at the end of the Body Treatments, Massages, and Spa Packages sections.

3. Collapse the Property Inspector, turn off Invisible Elements, then save your work and preview in the browser.

Lesson 4-Create, Modify, and Copy a Navigation Bar

Create a Navigation Bar using images

1. Select the Navigation Bar on the spa page, then delete it.

2. Click the insert bar list arrow, click Common, click the Images list arrow, then click Navigation bar.

3. Type home in the Element name text box, click the Insert list arrow in the dialog box, click Horizontally, then remove the check mark in the Use tables check box.

4. Click Browse next to the Up image text box, navigate to the drive and folder where your data files are stored, choose chapter_4, and then assets, double-click home_up.gif.

5. Click Browse next to the Over image text box to specify a path to the file home_down.gif located in the chapter_4 assets folder.

6. Click Browse next to the Down image text box to specify a path to the file home_down.gif file, overwriting the existing file.

7. Click Browse next to the Over while down image text box to specify a path to the file home_down.gif, overwriting the existing file.

(By specifying one graphic for the Up image state, and another graphic for the Over image, down image and over while down image states, you will create a rollover effect.)

8. Type Navigation button linking to home page in the Alternate text text box, click Browse next to the When clicked, go to URL text box, then double-click index.html in the striped_umbrella root folder.

9. Click OK, refresh the Files panel to view the new images you added to the assets folder. Deselect the button, place the insertion point in front of the button, press backspace, press Shift+Enter, then save your work.

Add elements to a navigation bar

1. Click Modify on the menu bar, then click Navigation bar.

2. Click the Add button, type about_us in the Element name text box.

3. Click Browse next to the Up image text box, navigate to the chapter_4 assets folder, click about_us_up.gif, then click OK.

4. Click Browse next to the Over image text box to specify a path to the file about_us_down.gif located in the chapter_4 assets folder.

5. Click Browse next to the Down image text box to specify a path to the file about_us_down.gif located in the chapter_4 assets folder, overwriting the existing file.

6. Click Browse next to the Over while down image text box to specify a path to the file about_us_down.gif located in the chapter_4 assets folder, overwriting the existing file.

7. Type Navigation button linking to the about us page in the Alternate text text box, click Browse next to the When clicked, Go to URL text box, then double-click about_us.html.

8. Complete the prior steps to add three more navigation bar elements called café, spa and activities using the appropriate .gif files.

9. Click OK to close the Modify Navigation Bar dialog box.

10. Save your work and preview in the browser.

Copy and paste a navigation bar

1. Place the insertion point to the left of the navigation bar, press and hold Shift, then click to the right of the navigation bar.

2. Click Edit on the menu bar, then click Copy.

3. Double-click activities.html in the Files panel to open the activities page.

4. Select the original navigation bar on the page, click Edit on the menu bar, click paste.

5. Click in front of the navigation bar, then press backspace, then press Shift+Enter.

Customize a Navigation bar

1. Click Modify on the menu bar, then click Navigation bar.

2. Click activities in the Nav bar elements text box, then click the Show “Down Image” initially check box.

3. Click OK to save the new settings and close the Modify Navigation Bar dialog box, then save and close the activities page.

4. Repeat steps 1-3 to modify the navigation bar on the spa page to show the Down image initially for the spa element, then save and close the spa page.

5. Open the home page, paste the navigation bar on top of the original navigation bar, then modify the navigation bar to show the Down image initially for the home element.

6. Save and close the home page.

7. Open the about_us page, paste the navigation bar on top of the original navigation bar, then modify the navigation bar to show the Down image initially for the about_us element.

8. Save your work, preview in the browser and verify that links work.

Lesson 5-Manage Web Site Links

1. Click Site on the menu bar, point to Advanced, then click Recreate Site Cache.

2. Click Site on the menu bar, then click Check Links Site wide.

3. Click the Show list arrow in the Link Checker panel, click External links.

4. Click the Show list arrow, then click Orphaned files to view the orphaned files in the link checker panel.

5. Click the Options button in the Results panel group title bar and choose close panel group.

6. Display the assets panel, then click the URLs button to display the list of links in the Web site.

7. Close all open pages.

Update a page

1. Open dw4_2.html and save it as fishing.html, overwriting the exiting fishing page, but not updating links.

2. Click the broken link graphic placeholder and locate the chapter_4 assets folder and select the file heron_small.jpg.

3. Deselect the image, save and close the page.

(Notice that the text is automatically updated with the body text style…this code was already in place for you)

4. Open dw4_3.html and save it as cruises.html, overwriting the existing cruises page and not updating links.

5. Click the broken link graphic placeholder and locate the chapter_4 assets folder and select the file boats.jpg.

6. Deselect the image, save and close the page.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download