240 likes | 341 Vues
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.
E N D
CSS (layout) v Tables The Zen of CSS positioning
So far... • Internet apps • HTML TAGS & Tool (eg DW) support • Navigation • Site setup and hosting • CSS formatting (classes)
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)
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
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
HTML Page Content wrapped with a DIV Other Content wrapped with a DIV
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!)
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”
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;}
Flow • Normally • Left to right • Inline • Top to bottom • Float • Left, right With setting margins – used for columns Example 1
Examples stylesheet How to learn… from… • See course home page • See stylesheet • See inline (cascading eg BODY) styles too
Page Layout with CSS • Remember HTML problem • (content mixed with presentation) • The mighty Div • Layers (absolutely positioned divs) • Watch this space eg DABS, OU
and background colour Box Model • Size • Margin • Border • padding content
Page/Site Layouts – Two Choices my coursework? • Fixed width • Designers • Consistency (760 pixels width?) • Usually centred • Liquid • Widescreen weird
Images • Img tag within html • OR • As background using CSS • Caption and image wrapped in div and styled
Alternative CSS sheets for a page • Browser specific • Print only • Alternative Devices • Accessibility • Basic styling
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
Zen • Try your hand at Zen Garden • Edit/create css and make images
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
Benefits of CSS layout • Consistency • House standard • Team working • Content v presentation See later for XHTML & XML
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
Key Points • CSS • Why CSS? alternatives • Layouts • Principles • DIVs, logical naming • Testing, browsers, (- CSS)
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?)