Building a Website: CSS Layouts

1. Building a Website:CSS Layouts Fall 2012

2. Introducing CSS Layout • CSS layout offers easy format updates and smaller file sizes (which means faster downloads) • CSS position is similar to working with table cells – without tables • Create styles that act like rectangular containers to hold other page matgerial • Define the style’s width and height and give it a background color, or image • Can assign them an exact location on the screen

3. Basic Rules • Identify the building blocks or your page • Determine how your page will be organized • May want banner 150 pixels tall and spans the entire page, a 200 pixel wide sidebar on the left edge of the page, and a main content area that fills the rest of the page • Create styles for each layer • Same as other CSS styles • Specify where the layer appears (use CSS positioning properties) • Create Advanced style know as an ID selector • Wrap each building block with its style • Use <div> tag to do that • <div> acts as a container • Defines the logical division in a page

4. Create CSS Styles for Layers • Determine size and position of layout • Create CSS style • Click New Style button on CSS style panel • Choose a selector type – most cases use Advanced type known as ID • Most web pages has single banner, single sidebar, single footer. Each gets its own ID style • Can only apply and ID style once per web page (otherwise will overlay style) • Can use IDs with JavaScript • Type a name for the style in the Selector box • Precede name with # (#banner) • Everything else is just like other styles

5. CSS Positioning Properties • A layer can use any CSS-style property • Background color, colorful borders, Font Family, etc. • Positioning type • Absolute • Most common • Place layer anywhere on page • Use Placement properties to specify a specific position on the page

6. CSS Positioning Properties (cont.) • Positioning type (cont.) • Relative • Position layer relative to its position in the HTML • Static • Default setting • Keeps style in its place in the flow of HTML • Fixed • Fixes layer in place on the browser window • Scroll down, the layer doesn’t move, remains at same location on browser • Internet Explorer does not support this

7. Resources • CSS Layout Resources: http://css-discuss.incutio.com/?page=CssLayouts • CSS Layout Techniques: http://www.glish.com/css/ • Design Samples: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html • The Little Reservoir: http://www.bluerobot.com/web/layouts/

8. CSS Layout Tutorial • Download zip file and unzip • Should have a folder named DWLayout • Open Dreamweaver • Choose Site  New Site • In Site Name filed type Layout Tutorial • Click folder icon next to Local root folder • Browse to and select DWLayout folder • Click OK

9. Add Banner Layout • Choose File  Open • In DWLayout folder choose layout.html • Open CSS Styles panel • Click New Style button • Click Advanced button • In Selector box type #banner • From Define in menu select New Style Sheet File • Click OK • In Save Style Sheet File As box type layout.ccc in the File Name field • Click Save

10. Add Banner Layout (cont.) • CSS Rule Definition window is opened • Click Background category, then click the Browser button the right of the Background Image box • Navigate to folder Images Global and double click the b_banner.gif file • Choose repeat-x from the Repeat menu • Click Positioning in the Category list • From Type menu select absolute • Type 100 in the Width box and select % from menu • Type 0 in Top box and 0 in Left box • Click OK

11. Add Banner Layout (cont.) • Add <div> to web page • Select the National Exasperator logo graphnic and choose Insert  Layout Objects  Div Tag • From ID menu select banner • Make sure Wrap around selection options turned on • Click OK

12. Creating a Sidebar