Copying the Home Page Framework to Subpages

Print This Procedure ( doc :: pdf )

By now you’ve probably realized that we need to make some pages for the navigation bar and text links to link to. Namely, the music site calls for the following pages:

·      index.html (which you’re already in the process of creating)

·      lessons.html

·      recitals.html

·      competitions.html

·      performances.html

·      background.html

·      contact.html

In this section, you’re going to create the six additional HTML pages that make up the music site. You could copy all the code from index.html, paste it into a blank text document, and then save the text document as an HTML file, but we’re much lazier than that! Here’s how we went about creating most of the code for the subpages:

1.      Open the C:\music folder.

2.      Right-click the index.html file and click Copy on the shortcut menu.

3.      Rick-click in the folder and click Paste.

4.      Repeat step 3 five times (so that you have six copies of the index.html file). Your music folder should display as shown in the following figure.

5.      Right-click the first copy of index.html, click Rename on the shortcut menu, type lessons.html, and press Enter. Ensure that you rename the copied files accurately and using all lowercase letters; if you change the names of the files at this point, the links you created in your HTML code won’t work.

6.      Using the procedure described in step 5, rename the subsequent files recitals.html, competitions.html, performances.html, background.html, and contact.html.

7.      Open your text editor, open the lessons.html file, and then perform the following six changes, which are shown in red in the following figure:

·      In the <title> tag, click directly after the n in the word Instruction and type : Lessons.

·      In the <table> tag, change the border attribute to "0".

·      In the second cell of the first table row, change t_home.gif to t_lessons.gif.

·      Also in the second cell of the first table row, replace the text alt="Chris Soll's Music Instruction" with the text alt="Lessons".

·      In the navigation bar HTML code, change the b_home2.gif Home button text to b_home.gif.

·      Also in the navigation bar HTML code, change the b_lessons.gif Lessons button text to b_lessons2.gif.

8.      Save lessons.html.

You’ve just completed the foundation document for the Lessons page. Not too bad! To check your page, double-click lessons.html to view the page in your browser. If everything looks good (as shown in the following figure), you’re ready to move on. Your next step is to repeat the short customization process in the remaining subpage documents.

9.      Open recitals.html in your text editor, and make the following changes:

·      In the <title> tag, click directly after the n in the word Instruction and type : Recitals.

·      In the <table> tag, change the border attribute to "0".

·      In the second cell of the first table row, change t_home.gif to t_recitals.gif.

·      Also in the second cell of the first table row, replace the text alt="Chris Soll's Music Instruction" with the text alt="Recitals".

·      In the navigation bar HTML code, change the b_home2.gif Home button text to b_home.gif.

·      Also in the navigation bar HTML code, change the b_recitals.gif Lessons button text to b_recitals2.gif.

10.  Save recitals.html.

11.  Open competitions.html in your text editor and make the following changes:

·      In the <title> tag, click directly after the n in the word Instruction and type : Competitions.

·      In the <table> tag, change the border attribute to "0".

·      In the second cell of the first table row, change t_home.gif to t_competitions.gif.

·      Also in the second cell of the first table row, replace the text alt="Chris Soll's Music Instruction" with the text alt="Competitions".

·      In the navigation bar HTML code, change the b_home2.gif Home button text to b_home.gif.

·      Also in the navigation bar HTML code, change the b_competitions.gif Lessons button text to b_competitions2.gif.

12.  Save competitions.html.

13.  Open performances.html in your text editor and make the following changes:

·      In the <title> tag, click directly after the n in the word Instruction and type : Performances.

·      In the <table> tag, change the border attribute to "0".

·      In the second cell of the first table row, change t_home.gif to t_performances.gif.

·      Also in the second cell of the first table row, replace the text alt="Chris Soll's Music Instruction" with the text alt="Performances".

·      In the navigation bar HTML code, change the b_home2.gif Home button text to b_home.gif.

·      Also in the navigation bar HTML code, change the b_performances.gif Lessons button text to b_performances2.gif.

14.  Save performances.html.

15.  Open background.html in your text editor and make the following changes:

·      In the <title> tag, click directly after the n in the word Instruction and type : Background.

·      In the <table> tag, change the border attribute to "0".

·      In the second cell of the first table row, change t_home.gif to t_background.gif.

·      Also in the second cell of the first table row, replace the text alt="Chris Soll's Music Instruction" with the text alt="Background".

·      In the navigation bar HTML code, change the b_home2.gif Home button text to b_home.gif.

·      Also in the navigation bar HTML code, change the b_background.gif Lessons button text to b_background2.gif.

16.  Save background.html.

17.  Open contact.html in your text editor and make the following changes:

·      In the <title> tag, click directly after the n in the word Instruction and type : Contact.

·      In the <table> tag, change the border attribute to "0".

·      In the second cell of the first table row, change t_home.gif to t_contact.gif.

·      Also in the second cell of the first table row, replace the text alt="Chris Soll's Music Instruction" with the text alt="Contact".

·      In the navigation bar HTML code, change the b_home2.gif Home button text to b_home.gif.

·      Also in the navigation bar HTML code, change the b_contact.gif Lessons button text to b_contact2.gif.

18.  Save contact.html.

19.  Open index.html in your browser. Click each navigation bar button to check your work. A foundation page should display after you click each button; each subpage should include the current page title bar text, a custom title banner graphic, and a current page (black) navigation bar button that corresponds to the displayed page. Also, the table border lines shouldn’t display on the subpages (because you changed the border attribute in the <table> tag to "0" on each subpage).

Congratulations! You’ve created the structure for the entire music site. Now we’ll insert some content on the home page.