FAQ's Page - 3/3/04

The FAQ's page will involve many anchor links that the user can click to various areas of the page, as we did in Demo 3. We will create a nested table in the "body" area of the page, where the answers to the Frequently Asked Questions will reside.

Once you have your rollovers working, Alt text assigned, and links working in your "base" page's navigation table, paste that into your FAQs page's "skeleton" table.

To follow along with my example:

1. First mark your FAQ's navigation button as "marked". Select the button, and double-click on it, and select the "over" image. Remove the link, and click "Okay" to remove the JavaScript events.
   
   
2. Now inside of your "body" section of the page, create a table 550 pixels wide, with 27 rows and 3 columns, 0 cellpadding, 0 cellspacing,
   
   
3. Select the first two columns and set the Vert alignment to Top (<td valign="top">)
   
   
4. To have this look like the example, you want to have the beginning of your questions line up with the 'f' from FAQ's. Set the width of the first column to 10. Insert a spacer.gif in that column, that is 10 pixels wide by 10 pixels high.
   
   
5. Now go to your "worddocs" folder and copy and paste the list of questions from the top of the page into the second column of the first row.
   
   
6. You will now create an ordered list. First remove all of the numbers from the list of questions.
   
   
7. Now place your cursor at the beginning of the text.
   
   
8. In the Properties Pallette, select the Ordered List button. It is directly below the I for Italic Text.
   
   
9. You will see that then entire chunk of text follows the numeral 1. To change this and have each question
   get its own number, put your cursor at the beginning of question #2, backspace, then press return.
   
10. Do this for each question until all 13 questions have numbers.
    
    
11. We need to provide space between the list of questions and the first answer. In the first column of the second row, insert a spacer.gif that is 20 pixels high and 10 pixels wide. If you like you can copy and paste the previous spacer.gif and adjust the height to be 20 pixels high.
    
    
12. Copy and paste this 20 x 10 pixel spacer.gif into the first column of every other row that follows.
    
    
13. Now copy the number and text from the first question/answer combo and paste it into the second column of the third row. (i.e. 1. Is this real jewelry or "costume" jewelry? Pearls for Girls jewelry is handmade with care from high quality freshwater cultured pearls, semi-precious stones, sterling silver, glass beads and other materials). Make the number and question text bold and the rest of it plain.
    
    
14. In the third column, third row, go to Image>Insert and choose top.gif
    
    
15. Select top.gif. Assign it a link in the Properties pallette of #top.
    
    
16. Now copy and paste that top.gif into the third column of every other row.
    
    
17. Now to make this "back to top" functionality work, place your cursor at the beginning of your main, outer table (so it's flashing just to the left of it). Go to your Insert toolbar and choose the Anchor icon, and name the anchor link "top".
    
    
18. Now copy and paste question/answer combos 2-13 into their appropriate table cells, alternating after #1 so they are to the left of each arrow.
    
    
19. Place your cursor to the left of 1. from #1's question/answer combo. Again, go to your Insert toolbar and choose the Anchor icon, but this time name the anchor link "one".
    
    
20. To make this work, select the text from question #1 and type "#one" in the Link area of the Properites pallette.
    
    
21. Repeat steps 19-20 for #2-13 question/answer combos (except use appropriate names like "#two", "#three" etc.).