1. Multipage Sites

2. Lab 4

3. Being upgraded to assign
Will grade it Thursday

4. Thursday Exam

5. Logisitics Word doc on Sakai Answers to be added inside box
10 Questions.
Only need to answer 7
Will take 7 best
Answers to be added inside box
Post to Sakai when completed
SAVE TO YOUR DESKTOP OFTEN

6. Content Just what you have already been doing
Writing and correcting HTML and CSS
Objective: to see if you can do the tasks in a limited time on your own
Open computer and notes
You can use any tools at your disposal (except chat)

7. Suggested Approach When class begins have ready How to proceed
jsFiddle
Komodo
Link to validators
How to proceed
Build your answer in one of the tools
Validate it
Copy and paste into test

8. Odds and Ends

9. Formatting approach Add one element at a time
If it doesn’t do what you want,
Delete it
DON’T just keep piling on more items

10. Multipage Navigation

11. NO NEW CONTENT TODAY

12. Structuring Site Navigation
Three possible models
NEXT and PREV (when fixed order)
Navigation bar to the parts
Single page with links (hub & spokes)
When use?
Mix and match? Multiple ways?

13. Guidelines Link to the exact spot
Heading, not paragraph
Top of the page
Make it easy to get to the navigation (top)
TOO MUCH NAVIGATION IS AS BAD AS NONE!
NEVER DEPEND ON BROWSER BACK BUTTON

14. Next - Previous Consistent placement Top, bottom, both
Often at the left and right edges
Next week
Structurally keep them together NAV
Text
Images
Also next week

15. Navigation Bar IDENTICAL CONTENT ON ALL PAGES Horizontal or Vertical
May want to distinguish current page visually
Do not recommend using #, use page name
Horizontal or Vertical
Horizontal
separate section: nav
inline list
Bottom (repeat)
Vertical two styles
Table of contents
Side bar (next week)
Better for long lists
Takes width

16. Page / Site Links Should you distinguish? Two different bars
Horizontal (site) and vertical (page)
Color, size, font differentiation

17. Page Layout Reminders

18. Basic simple design Focus on layout Simple is best Basic parts Header
Nav(igation) – may be in header
Section or div for main body
Footer
Layout
What do you want your website to look like?
What are you putting on the site, and will you have enough space to do so?
Simple
Don’t overdue or overthink.
Don’t add too many extraneous features.
AKA. Don’t get carried away
Header
Contain title
Navigation bars
Search elements
Important tidbits; not full on data or information – think of it like a thesis statement
Next/back elements
Body
The meat of the webpage
All the information and content
Make it look nice and understandable
Some next/back elements if necessary
Footer
Copyright information
Location and address
Contact information

19. Navigation Bar Recommendation This page:
Keep nav bar code the same on all pages
Simple copy and paste
This page:
Can use href=“#” or disable link
But then have to remember to change it
Less problematic if you format “this page” differently

20. How to Tailor Layout
Margins
Positions
Heights

21. Useful Layout Model: Grid
How wide should your elements be?
Consistency
Enough white space
People have spent time working on it
978 model
Example
What is it?
A tool which is useful for planning the layout of your website

22. Navigation Bars

23. Navigation bars Make the list horizontal, remove bullets
Position <ul> where you want it (left, right, center, top, bottom)
Format the individual link boxes
Size of box
Vertical: line-height
Horizontal: based on text or define width
Make the link fill the item space