Multipage Sites

Lab 4

Being upgraded to assign Will grade it Thursday

Thursday Exam

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

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)

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

Odds and Ends

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

Multipage Navigation

NO NEW CONTENT TODAY

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?

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

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

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

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

Page Layout Reminders

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

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

How to Tailor Layout Margins Positions Heights

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

Navigation Bars

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