1 / 24

Mastering CSS Layout: Best Practices and Techniques for Web Development

Learn the art of CSS positioning, selectors, and layout to create visually appealing and functional websites. Explore the principles of CSS formatting, structural markup, and page development. Discover the benefits of CSS layout for consistency and team collaboration. Practice and improve your skills to excel in web development.

ganit
Télécharger la présentation

Mastering CSS Layout: Best Practices and Techniques for Web Development

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. CSS (layout) v Tables The Zen of CSS positioning

  2. So far... • Internet apps • HTML TAGS & Tool (eg DW) support • Navigation • Site setup and hosting • CSS formatting (classes)

  3. Today Best way to learn is practice! – it’s a skill/craft! eg Driving • More CSS • Page development • HTML Structural markup • CSS layout and selectors • DIVS (id=“name”) • Spans <span class=“name”> inline content • Absolute positioning (theory) v float (most common – see my examples)

  4. Revision – classes, formatting .BodyText{ font-family: Arial, Helvetica, sans-serif; font-size: 14px} .MainHeading { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #0099FF;} .FinePrint { font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-style: italic} relative! next slide

  5. Start tag Attribute The Content End tag on every page CSS – HTML Page <link href="styles.css" rel="stylesheet" type="text/css"> … <p class="BodyText">lots of text</p> See templates - later or can redefine existing TAG eg H1, p

  6. HTML Page Content wrapped with a DIV Other Content wrapped with a DIV

  7. Selectors • Specificity • easier • Body, img, H1, h2, p etc • Divs (once per page per id), classes (multiple) • Harder • li a (a tags within a list) • Hardest • p.intro a (links within paras of intro class!)

  8. Use logical/structural markup • Body, h1, h2 etc • Forget (font, b, I, table, br) • Think about order for screenreaders • Repetition of navigation (best below?) • Logical names v eg “leftnav”

  9. Pitfalls • Divitis • Use cascade/inheritance – ie don’t repeat unecessary things • eg body {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 76%;} h1 {font-size: 1.5em;}h2 {font-size: 1.3em;}

  10. Flow • Normally • Left to right • Inline • Top to bottom • Float • Left, right With setting margins – used for columns Example 1

  11. Examples stylesheet How to learn… from… • See course home page • See stylesheet • See inline (cascading eg BODY) styles too

  12. Page Layout with CSS • Remember HTML problem • (content mixed with presentation) • The mighty Div • Layers (absolutely positioned divs) • Watch this space eg DABS, OU

  13. and background colour Box Model • Size • Margin • Border • padding content

  14. Page/Site Layouts – Two Choices my coursework? • Fixed width • Designers • Consistency (760 pixels width?) • Usually centred • Liquid • Widescreen weird

  15. Images • Img tag within html • OR • As background using CSS • Caption and image wrapped in div and styled

  16. Alternative CSS sheets for a page • Browser specific • Print only • Alternative Devices • Accessibility • Basic styling

  17. Advice / Tips • Use in-page stylesheet, one page for testing • Keep things simple ! (KISS) • Think about different browsers • ffox, Ie6/7, safari, opera • Resolutions! 800x600 etc 1024x768 • Dreamweaver not helpful IMO

  18. Zen • Try your hand at Zen Garden • Edit/create css and make images

  19. Common bugs • Flash of unstyled content • http://bluerobot.com/web/css/fouc.asp/ • http://www.positioniseverything.net/easyclearing.html (use IE) • http://www.positioniseverything.net/explorer/peekaboo.html • http://www.positioniseverything.net/explorer.html • Many other quirks and workarounds/hacks

  20. Benefits of CSS layout • Consistency • House standard • Team working • Content v presentation See later for XHTML & XML

  21. References • Look at sites’ style sheets • Test CSS layout (Search Table tags) • Head First book • http://www.w3schools.com/css/default.asp • Many CSS books and sites

  22. Key Points • CSS • Why CSS? alternatives • Layouts • Principles • DIVs, logical naming • Testing, browsers, (- CSS)

  23. Easy? • I don’t think so • Edge in Jobs etc • Logical? – no lost of gotchas/caveats • (Responsibility of) the designer in the team • Trial and error • Forums • Copying/modifying (crediting?)

  24. So…table layout – DONT!

More Related