:: CLASS NOTES 1 CLASS :: 11 04.27 2018 3 Hours AGENDA HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> <nav> <nav> <ul> <li><a href="#home">HOME</a></li> <li><a href="#works">WORKS</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </nav> images from watchdogs 2. NOTE: The logo position may be different from your own. If you wish to have a centered logo, please see alternative layout II [page 5] :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ]
Transcript
:: CLASS NOTES
1
CLASS :: 11
04.27
2018 3 Hours
AGENDA HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav>
images from watchdogs 2. NOTE: The logo position may be different from your own. If you wish to have a centered logo, please see alternative layout II [page 5]
:: CSS CODING FOR HOMEPAGE [ <nav> & child elements ]
:: CLASS NOTES
2
PART IV – CREATING THE HOMEPAGE [ nav ]
HTML [ index.html ]
Type the code [ highlighted in blue below ] after your html logo code
CSS [ style.css ]
Style the <nav> element
1. Open your style.css document and look for your #logo style rules:
:: CLASS NOTES
3
2. Place the following code AFTER the closing curly bracket } used to style your #logo selector
Style the <nav> <ul> element [ The ul is the parent element for the list items ]
Style the <nav> <ul> <li> elements [ The li is the parent element for the anchor elements ]
Style the <nav> <ul> <li> <a> elements [ The hyperlinked text ]
Style the <nav> <ul> <li> <a> elements [ The hyperlinked text in mouseover state ]
:: CLASS NOTES
4
ALTERNATIVE LAYOUT I FOR NAVIGATION [ LOGO-LEFT / NAV-RIGHT ]
CSS [ style.css ]
Locate styles for your nav and change width:100%; to width:75%;
NOTE: This will make your nav element 75% of the browser screen. Since you positioned your element in the top right… it will display on the right of your screen
[ OPTIONAL ] OTHER STYLES CHANGED IN THIS IMAGE [ FONT SIZE & TEXT SHADOW ]: 1. Font-size of list items:
2. Text-shadow added to hyperlink color (provides contrast from background, without using a background color):
:: CLASS NOTES
5
DROPDOWN MENU FOR NAVIGATION
HTML [ index.html ]
ADD an unordered list and list items to your existing works navigation list item [SEE LINES 27-31 BELOW]
NOTE: The code is inserted AFTER the closing </a>, but BEFORE closing </li>
CSS [ style.css ]
ADD STYLES FOR DROP DOWN MENU SELECTORS
:: CLASS NOTES
6
ALTERNATIVE LAYOUT II FOR NAVIGATION [ BOTTOM OF HEADER ]
CSS [ style.css ]
Locate styles for your nav and change top:0; to bottom:0;
ADD a z-index to ensure the nav displays over the background when drop menu is activated
ADD styles to drop-down menu to ensure it displays above the nav
:: CLASS NOTES
7
[ OPTIONAL ] OTHER STYLES SHOWN IN THIS IMAGE [LOGO PLACEMENT & SIZE]: 3. Logo Position:
4. Reduces the img (located inside of logo element) width by % value shown:
:: CLASS NOTES
8
HTML [ index.html ]
Now that you have set up your navigation, you will set up anchor points to jump: From your navigation menu (i.e.): <li><a href=”#home”>HOME</a></li> To the element with the id name of home in your document (i.e.): <header id=”home”> NOTE: This is the same page anchor method that you learned during the anchor element exercise (code_same-page-anchor.html). In that exercise you created a named anchor id named “top” and a back to top hypertext reference below each long paragraph. In order for this method to work, you must have an element with an id name + an anchor element with an href attribute pointing to the #id name
Add the id name of “home” to your opening header tag:
Add the id name of “works” to your opening section tag (the 1st section used for works):
Add the id name of “about” to your opening section tag (the 2nd section used for bio):
Add the id name of “contact” to your opening footer tag:
:: CLASS NOTES
9
;Locate your footer menu and add the hypertext references [ AS HIGHLIGHTED BELOW ]:
Preview in Browser 1. Click/Test Your Header Navigation Menu:
2. Click/Test Your Footer Navigation Menu:
3. The hyperlinks should jump to your respective named anchors:
<a href=”#home”>HOME</a>
<header id=”home”>
<a href=”#works”>WORKS</a>
<section id=”works”>
<a href=”#about”>ABOUT</a>
<section id=”about”>
<a href=”#contact”>CONTACT</a>
<footer id=”contact”>
:: CLASS NOTES
10
Homework HW-11
DUE :: 05.04
REVIEW ::
1. Class Notes
DO ::
• Ensure your images are sized correctly • Ensure your code is error free • Ensure your navigation displays correctly • Ensure all of your buttons are hyperlinked to the correct location
