AGENDA. HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ] CLASS :: 13.

Size: px

Start display at page:

Download "AGENDA. HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ] CLASS :: 13."

Tamsin Mason
5 years ago
Views:

1 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES CLASS :: Hours AGENDA HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <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> <nav> </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 ] 1

2 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES 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: 2

3 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES 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 ] 3

Since you positioned your element in the top right it will display on the right of your screen [ OPTIONAL ] OTHER STYLES CHANGED IN THIS

4 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES 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): 4

css ] Locate styles for your nav and change top:0; to bottom:0; [ OPTIONAL ] OTHER

5 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES ALTERNATIVE LAYOUT II FOR NAVIGATION [ BOTTOM OF HEADER ] CSS [ style.css ] Locate styles for your nav and change top:0; to bottom:0; [ 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: 5

:: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES 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.

6 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES 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 2 nd section used for bio): Add the id name of contact to your opening footer tag: 6

The hyperlinks should jump to your respective named anchors: <a href= #home >HOME</a> <header id= home > <a href= #works

7 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES ;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 > 7

8 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES REVIEW :: HW-13 Homework DUE :: 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 Save Images, Videos, Multimedia you wish to include on your Works Page Your works page may include 1. a larger image version of your thumbnail with a detailed description 2. a series of images, or videos, or multi-media content (gifs, animations, audio, etc.) See Example SEE HOMEWORK PAGE FOR COMPLETE DETAILS BRING :: HW-13 1 index.html 2 style.css 3 USB [Content for Works Page] 8

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES CLASS :: 14 04.28 2017 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html