Links and Menus
Objectives
Practice
Files

Review
  1. Open your Striped Umbrella site and download/unzip/file the lesson files.
  2. Open the activities.html page.
  3. If the about us page does not have the header image, nav and horizontal rule, copy and paste it from the index.html file
  4. Import, clean and spell check the text from activities.docx
  5. Click the attach styles button and attach the suStyles.css file
  6. At the beginning of the text, insert the family_sunset image. Style the image using .left and .imgBorder from suStyles.css.
  7. Just before the "And don't forget" insert the dolphin image. Style the image using .right and .imgBorder from suStyles.css
  8. Save and preview in the browser.


Link Basics (Video)

As previously discussed, the ability to provide links between pages in a web site is part of what makes the web so fun and interactive. In this lesson, we will review how to link to pages within the same site AND how to link to existing pages on other web sites.
  1. Create two new pages in the Striped Umbrella site (fishing.html and dolphinCruises.html).
  2. In the first paragraph of text, highlight the words "deep-sea fishing trips". Drag the Link target onto the fishing.html file. This creates a local link.
  3. In the second paragraph of text, highlight the words "dolphin cruises". Click on the folder next to the Link input and select dolphinCruises.html. This creates a local link.
  4. To make external links (links on the web), we need to tell the computer to go to the web. This is done with http://. Highlight the words Blue Angels in the third paragraph and, in the Link input, type the following "http://www.blueangels.navy". The link will not work without the http://.
  5. Repeat the process and link the words "USS Alabama" in the fourth paragraph to "http://www.ussalabama.com".
  6. Save and preview in the browser. Be sure to test all of the links.
Internal Links(Video)

Sometimes there is so much information on a page that it is hard for readers to find what they are looking for. In these cases, developers often implement the use of internal links. Internal links take the user to a location on the current page. This type of linking is also useful in the new trend of single page web sites that is emerging. In order to create internal links, we must first identify locations in a page to serve as the target, or anchor.
  1. Open the spa.html page.
  2. Insert the spa logo image at the top of the page and apply the .left class to it so the text floats.
  3. Place your cursor next to the word "Massages" that is the list title on the page. Choose Insert -> Named Anchor. Name the anchor "massages". You will notice that an anchor image appears. This image only appears in DW and will not appear on your actual web page.
  4. Repeat this process for Facials and Body Treatments. You can name the anchors whatever you want.
  5. Click on the level 2 heading Massages at the top of the page. Drag the Link target to the massages anchor.
  6. Repeat this process for the Facials and Body Treatment links.
  7. Save and view in browser.

Creating a Spry Menu Bar (Video)

Dreamweaver combines the power of HTML, CSS and Javascript (a web based programming language) to bring us a well styled, interactive menu bar to use for navigation on our web pages. Creating and editing the menu bar is easy and it provides our sites with a much more polished, professional look and feel.
  1. Open the index.html page. Highlight and delete the current menu and horizontal rule.
  2. Click on Insert -> Spry -> Spry Menu Bar. In the popup, select horizontal to create a menu bar that goes across the top. Click OK.
  3. Click on the label of the spry menu bar (SMB) and you should see the properties in the Properties panel below. The properties for the SMB look like a table of text.
  4. Each column in the table represents a level of navigation. Currently, the first column reads as Item1-Item4. Let's replace that text with our own. Click on Item 1 and in the Text box to the right, replace Item 1 with Home. Repeat this process replacing Item 2 with About Us, Item 3 with Spa and Item 4 with Cafe.
  5. We need to add one final option in the first column for Activities. So, click the + button at the top of the column and replace the default text with Activities.
  6. Now we need to create the links for each of these items. Click on Home in the first column and then click in the Link box, just below the text box at right. Replace any text with index.html. Do the same for each of the other level 1 items and point to their corresponding page. Another option would be to use the folder to find the page name instead of typing it out.
  7. SMB allow the use of submenus as well. In otherwords, menu dropdowns. At this point, we do not need any of the associated sub menu items that are currently attached to Home or Spa. So, click on home, and then in the second column, click on Item 1.1 and click the - button at the top. Continue this process for all sub items in the Home and Spa categories.
  8. We do need two sub items on the Activites menu item. So, highlight Activities, and click on the + button in the second column. Make one item called Fishing that points to fishing.html and another item called Dolphin Cruises that points to dolphinCruises.html.
  9. Save and preview in browser. There will be a popup talking about 7-8 files that need to be saved to your site. Click on OK.

Styling a Spry Menu Bar (Video)

Because SMBs are created using html, css and javascript, the programmers set up all styling for the SMB in a CSS file. By knowing which items to edit, we can alter the appearance of the SMB to better match our site and needs.
  1. In the CSS Panel, locate the SpryMenubaHorizontal.css file.
  2. Start with the ul.MenuBarHorizontal rule. This rule is global settings for the SMB. Double click on this style and change the following:
    • Font Family: Trebuchet MS, Arial, Helvetica, sans-serif
    • Font-size: 14px
    Click OK.
  3. The ul.MenuBarHorizontal li rule controls the appearance of the menu item boxes. Here we will alter the width, height and text-alignment.
    • Box -> Width: 190px
    • Box -> Height: 25px
    • Block -> Text-align: center
    Click OK.
    4. The ul.MenuBarHorizontal a rule controls the appearance of the links themselves. Here will will change their foreground and background colors. Click OK.
  4. Two styles under the ul.MenuBarHorizontal a rule is a very long rule name that ends with MenuBarSubmenuVisible. This rule controls the colors and state of the buttons when a mouse is positioned over them. It is where we set the rollover effect.
    • Type -> Color: #630
    • Background -> Background-color: choose sand from banner
    Click OK.
  5. The ul.MenuBarHorizontal ul li rule controls the appearance (width and height) of the sub menu items.
    • Box -> Width: remove any text here
    Click OK.
  6. Finally, we need to make a small change to prevent a space between the main menu and subitems. This is done by accessing the ul.MenuBarHorizontal ul class.
    • Box -> Width:190px
    Click OK.
  7. Save and preview in browser.
  8. Once the menu bar is functioning properly, click on the identity tab, CTRL-C (copy) and paste it in place of the menu on each page
  9. If there is extra space between the menu bar and the banner image, edit the code to remove the p and /p tags surrounding the banner image.
  10. File -> Save All and preview in browser.