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
- Select the "index.html" tab in the Document Window
- Select the text "Content for id "content" goes here" in the content <div> and delete the text
- Type "Home" in place of the text
- Select the "Home" button in the navigation menu
- In the Properties Insepector panel, select the "#home" placeholder text in the Link box
- Delete the text
- Click the Point-to-File button and drag the arrow to point to the "index.html" file in the Files panel (see image below)
- You should see "index.html" in the Link box in the Properties Inspector panel
- Next, select the "Resume" button int the navigation menu
- In the Properties Insepector panel, select the "#resume" placeholder text in the Link box
- Delete the text
- Click the Point-to-File button and drag the arrow to point to the "resume.html" file in the Files panel
- You should see "resume.html" in the Link box in the Properties Inspector panel
- Select the "Education Research" button in the navigation menu
- In the Properties Insepector panel, select the "#EdResearch" placeholder text in the Link box
- Delete the text
- Click the Point-to-File button and drag the arrow to point to the "education_research.html" file in the Files panel
- You should see "education_research.html" in the Link box in the Properties Inspector panel
- Select the "Career Exploration" button in the navigation menu
- In the Properties Insepector panel, select the "#CareerExplore" placeholder text in the Link box
- Delete the text
- Click the Point-to-File button and drag the arrow to point to the "career_exploration.html" file in the Files panel
- You should see "career_exploration.html" in the Link box in the Properties Inspector panel
- Select the "Showcase" button in the navigation menu
- In the Properties Insepector panel, select the "#showcase" placeholder text in the Link box
- Delete the text
- Click the Point-to-File button and drag the arrow to point to the "showcase.html" file in the Files panel
- You should see "showcase.html" in the Link box in the Properties Inspector panel
- Select File > Save all
Link the Navigation Menu for the resume.html page
- Select the "resume.html" tab in the Document window
- Select the text "Content for id "content" goes here" in the content <div> and delete the text
- Type "Resume" in place of the text
- To link the navigation menu, repeat the steps outlined above in the previous section starting from step #4
- Select File > Save all
Link the Navigation Menu for the education_research.html page
- Select the "education_research.html" tab in the Document window
- Select the text "Content for id "content" goes here" in the content <div> and delete the text
- Type "Ed Research" in place of the text
- 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
- Select File > Save all
Link the Navigation Menu for the career_exploration.html page
- Select the "career_exploration.html" tab in the Document window
- Select the text "Content for id "content" goes here" in the content <div> and delete the text
- Type "Career Exploration" in place of the text
- 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
- Select File > Save all
Link the Navigation Menu for the showcase.html page
- Select the "showcase" tab in the Document window
- Select the text "Content for id "content" goes here" in the content <div> and delete the text
- Type "Showcase" in place of the text
- 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
- Select File > Save all