Question from Bob:Pages 199-203 (tutorial) show HOW to add a Navigation Bar to a file called tips.html. It is a horizontal menu bar -- looks like it may be called Menubar1 in the tutorial.
My question, HOW do I apply that same horizontal menu bar to my other files ?
For instance, I now want to add the very same horizontal bar menu to a file named about.html
The devil is in the details.
How To Reuse Code...
- Investigate
How is the existing menubar (or other structure) built? Look at the HTML code. Is it a list? Is it images? - Imitate
Mimic the original structure exactly. Is the menubar code inside an ID'd div? - What about the CSS?
Examine the CSS file to see what HTML elements might be styled by it. Anything within the ID'd div could be styled with rules that invoke the div's name. - Test your test file
Using an internal style sheet copied from the original menubar's style sheet, create an HTML test file to test how it works. When you have it working to your satisfaction, move the styles to your external style sheet and your menubar div to your document. - When you've got it the way you want it...
Make sure your css is in an external style sheet, linked to the page or pages in your site. Then select the whole div containing the menubar and either Ctrl | C or Edit | Copy. Go to the other page and paste it in: Ctrl | V or Edit | Paste. It should immediately look right. - Once you've got it working on one page, consider making a template and you won't even need to cut and paste it. We'll cover templates in class next Wednesday...
When you understand the associated css file, you will become comfortable altering the rules to suit your own project.
No comments:
Post a Comment
Join the conversation!
Note: Only a member of this blog may post a comment.