1 / 18

Layout and Navigation

Layout and Navigation. 6 February 2014. Only one new piece. Navigating to Different Pages. Other pages: href =“page.html ” Same as link and img Anchor point on other page : href =“ page.html#anchor ”. Navigation Bar. Recommendation Keep nav bar code the same on all pages

jontae
Download Presentation

Layout and Navigation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Layout and Navigation 6 February 2014

  2. Only one new piece

  3. Navigating to Different Pages • Other pages: href=“page.html” • Same as link and img • Anchor point on other page: href=“page.html#anchor”

  4. Navigation Bar • Recommendation • 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 • Exception: • If you want to format this page differently

  5. Layout

  6. Basic simple design • Focus on layout • Simple is best • Basic parts • Header (vs. h1 etc format) • Nav(igation) • Section or div for • Main body • Side bar • Footer

  7. How to Tailor Layout • Margins • Positions • Heights

  8. 978 WebsiteUseful Layout Model • What is it? • Demo site • Why useful? • Layout • Easy format • Continuity • Remember… • Continuity • Colors, layout, theme, etc. • Some good examples • Example 1, Example 2

  9. Spacing (e.g., sidebar) • REAL WIDTH = margin+border+padding+width+padding+border+margin • Using a left margin on main content retains the spacing independent of float • Float starts the content adjacent not below

  10. Navigation

  11. Structuring Site Navigation • Three possible models • NEXT and PREV (when fixed order) • Navigation bar to the parts (always EXACT) • Horizontal • Vertical • Single page with links • When use? • Mix and match? Multiple ways? • TOO MUCH NAVIGATION IS AS BAD AS NONE!

  12. Vertical Menu Bar • Better for long lists • Takes width • Will learn how next week

  13. Next - Previous • Consistent placement • Top, bottom, both • Often at the left and right edges • Next class • Structurally keep them together • Text • Images

  14. Horizontal Navigation Bar • Best practice • separate div • inline list

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

  16. Recap: Formatting a navigation bar

  17. Horizontal navigation formatting: list (1 of 2) • Remove bullets from list li { list-style-type: none; } • Make the list horizontal li { display: inline; } • Position <nav> where you want it (left, right, center, top, bottom)

  18. Horizontal navigation formatting: list (2 of 2) • Format the box li { border: 1px solid black; padding: 10px; margin: 0px 1px 0px 1 px; } • Padding will space within box, margin between boxes • Size of box • Vertical: line-height • Horizontal: based on text or width

More Related