WRT235: Writing in Electronic Environments

1. WRT235: Writing in Electronic Environments General Layout Tips

2. Agenda • Discuss Layouts • HTML5 Semantic Elements • HTML5 for Layouts • CSS Layouts

3. Review • CSS Box Model • margin, border, padding, width, height properties • Controls position and size of objects • Can be controlled by CSS

4. Steps to Creating a Layout • Wireframe • Build structure with <div> objects • Populate structures with content • Use CSS to position <div> objects

5. Steps 1: Wireframe

6. Steps 2: Build Structure with <div> • Remember: all <div> objects have ids • Meaning that your CSS will have these ids • Browsers read from top to bottom so arrange your <div> objects accordingly • Indent to show hierarchical relationships • Use comments when closing <div> to keep track <div id=“header”> stuff </div><!-- close #header -->

7. Steps 3: Create Content • General: • Assign a width value to container object, center it • Assign a width value to navigation, float left • Position content to sit next to navigation • Make sure margins work – everything is a box

8. Steps 4: Arrange with CSS • <div id=“header”> • A header and subheader (e.g., <h1> and <h3>) • <div id=“navigation”> • A list with 4 items • <div id=“content”> • Subheader and 3 paragraphs (you can use lorenipsum text_ • <div id=“footer”> • A paragraph with footer information

9. 960 Grid System • http://960.gs/ • http://960.gs/demo.html • Sketch sheets on Sakai

10. Why Grids? • Allows for symmetrical organization of content • Adapts to most screens • Makes the math easy