1 / 12

Building a Website: CSS Layouts

Building a Website: CSS Layouts. Fall 2012. 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

chen
Download Presentation

Building a Website: CSS Layouts

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. 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

More Related