Portfolio: Navigation

Linking the Navigation Menu in All Pages

Our next step is to link our navigation menu for all our pages. Really important to understand: you must link the navigation menu for ALL five pages. Simply linking the navigation menu for one page only links the pages from that page, not the rest.

Link the Navigation Menu for the index.html page

  1. Select the "index.html" tab in the Document Window
  2. Select the text "Content for id "content" goes here" in the content <div> and delete the text
  3. Type "Home" in place of the text
  4. Select the "Home" button in the navigation menu
  5. In the Properties Insepector panel, select the "#home" placeholder text in the Link box
  6. Delete the text
  7. Click the Point-to-File button and drag the arrow to point to the "index.html" file in the Files panel (see image below)
  8. You should see "index.html" in the Link box in the Properties Inspector panel
  9. Next, select the "Resume" button int the navigation menu
  10. In the Properties Insepector panel, select the "#resume" placeholder text in the Link box
  11. Delete the text
  12. Click the Point-to-File button and drag the arrow to point to the "resume.html" file in the Files panel
  13. You should see "resume.html" in the Link box in the Properties Inspector panel
  14. Select the "Education Research" button in the navigation menu
  15. In the Properties Insepector panel, select the "#EdResearch" placeholder text in the Link box
  16. Delete the text
  17. Click the Point-to-File button and drag the arrow to point to the "education_research.html" file in the Files panel
  18. You should see "education_research.html" in the Link box in the Properties Inspector panel
  19. Select the "Career Exploration" button in the navigation menu
  20. In the Properties Insepector panel, select the "#CareerExplore" placeholder text in the Link box
  21. Delete the text
  22. Click the Point-to-File button and drag the arrow to point to the "career_exploration.html" file in the Files panel
  23. You should see "career_exploration.html" in the Link box in the Properties Inspector panel
  24. Select the "Showcase" button in the navigation menu
  25. In the Properties Insepector panel, select the "#showcase" placeholder text in the Link box
  26. Delete the text
  27. Click the Point-to-File button and drag the arrow to point to the "showcase.html" file in the Files panel
  28. You should see "showcase.html" in the Link box in the Properties Inspector panel
  29. Select File > Save all

Link the Navigation Menu for the resume.html page

  1. Select the "resume.html" tab in the Document window
  2. Select the text "Content for id "content" goes here" in the content <div> and delete the text
  3. Type "Resume" in place of the text
  4. To link the navigation menu, repeat the steps outlined above in the previous section starting from step #4
  5. Select File > Save all

Link the Navigation Menu for the education_research.html page

  1. Select the "education_research.html" tab in the Document window
  2. Select the text "Content for id "content" goes here" in the content <div> and delete the text
  3. Type "Ed Research" in place of the text
  4. To link the navigation menu, repeat the steps outlined above in the "Link the Navigation Menu for Index.html Page" section starting from step #4
  5. Select File > Save all

Link the Navigation Menu for the career_exploration.html page

  1. Select the "career_exploration.html" tab in the Document window
  2. Select the text "Content for id "content" goes here" in the content <div> and delete the text
  3. Type "Career Exploration" in place of the text
  4. To link the navigation menu, repeat the steps outlined above in the "Link the Navigation Menu for Index.html Page" section starting from step #4
  5. Select File > Save all

Link the Navigation Menu for the showcase.html page

  1. Select the "showcase" tab in the Document window
  2. Select the text "Content for id "content" goes here" in the content <div> and delete the text
  3. Type "Showcase" in place of the text
  4. To link the navigation menu, repeat the steps outlined above in the "Link the Navigation Menu for Index.html Page" section starting from step #4
  5. Select File > Save all