Advanced Web Design: AD650

COURSE CALENDAR | WEEK 03 CLASS OUTLINE | Homework

  1. AD650 Learning Forum: New Technique presentation
  2. An overview of Visual Formatting Model (Download Chapter 2 PDF)
    1. Box Model: The box model defines how elements are displayed. Every CSS element forms a "box" composed of these components:
      • Content - The actual content of the element such as text or an image. When using the width property, you are defining the width of the content.
      • Padding - Define the space around the content using the padding-top, padding-right, padding-bottom, padding-left properties.
      • Border - Define a stroke around the content and padding using the border-top, border-right, border-bottom, border-left properties.
      • Margin - Define the space around the combined content, padding and border using the margin-top, margin-right, margin-bottom, margin-left properties.
    2. Box Model Hierarchy: Elements are stacked bottom up from margin, background color, background image, padding, border, content.
    3. IE/Win Box Model Quirks
      1. Diagram: Comparison between W3C and IE/Win box models.
    4. Margin Collapsing: When two or more vertical margins meet they will collapse to form a single margin with the height of the larger of the two margins. The vertical margins of nested elements will also collapse if they are not separated by padding or borders.
    5. Boxes: Block vs. Inline vs. Anonymous
      1. Block boxes: Block elements are elements such as <div>, <p>, or headers <h1>…<h6>. When their content is displayed the next element within the document structure will be positioned below it, not next to it. The vertical distance between boxes is calculated by the boxes vertical margins.
      2. Inline Boxes: Inline elements are elements such as <a>. <strong>, <em> or <span>. Their content is displayed horizontally, within lines. Horizontal spacing between inline elements can be adjusted using padding, borders and margins. Vertical spacing has no affect on inline elements.
      3. Inline Elements and Padding
      4. Anonymous Boxes: A block or inline box that has not been explicitly defined as an element. You cannot style anonymous block or line boxes since there is nothing to connect to. (see link example)
  3. CSS Positioning (Download lab files ZIP)
    1. Static or Normal Flow: Normal flow is the default scheme used for positioning. Block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one. Inline boxes flow horizontally from left to right.
    2. Relative: Relatively positioned elements are positioned within the normal flow and then moved using x and y coordinates. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was still in its ‘normal flow’ position - leaving a gap for it.
    3. Absolute: An absolute positioned box is moved out of the normal flow entirely using x and y coordinates. Absolutely positioned boxes can overlap other elements on the page. Control the stacking order with the Z-index. The higher the Z-index, the higher the box is in the stack. Elements that come before or after an absolutely positioned box ignore it completely.
      1. Fixed: Fixed positioned elements are moved out of the normal flow entirely - relative to the viewport. This means that they don't move if the page is scrolled. Win/IE5 and Win/IE6 do not support this positioning method at all.
    4. Floating : A floated box is taken out of the flow and shifted to the left or right until it touches the outer edge of its containing box or another floating box. Block-boxes in the normal flow behave as if the floated box wasn't there. Paragraphs of text (line boxes) next to a floated box can flow down the right side of a left-floated box and down the left side of a right-floated box.
      1. Clearing: Elements following a floated element will wrap around the floated element. To stop this from happening the "clear" property can be applied to "clear" a vertical space for all elements following the float.
  4. Layout (download lab files ZIP)
    1. Fixed-Width Horizontally Centered
      1. One-Column using auto margins
      2. One-Column using negative margins
      3. Two and Three-Column using floats
    2. Liquid: Dimensions are set using percentages, allowing layouts to scale to fit the browser window. On some monitors layouts can feel stretched and line heights can get too long or too short.
      1. Three-Column using floats
      2. Two-Column using absolute-P
    3. Elastic: Dimensions are determined by the width of elements using ems. This is relative to the font size, not the browser width.
      1. Three-Column using floats
      2. The px to em Calculator
    4. Elastic-liquid hybrid: Widths are set in ems and maximum widths are set as percentages.
      1. Three-Column using floats
    5. Other Sample CSS Layouts
  5. PHASE ONE: Site Definition
    1. Outline of the development process; what is going to happen at each step; everyone's jobs (both the clients' and yours); and a timeline.
      • Planning the Project (PDF)
      • Work Flow (PDF)
    2. A few useful Articles:
  6. Setting up your Client Site and Style Guide
    1. Defining a site
    2. Review: Proper file naming conventions, path structure and site structure
    3. Modifying Dreamweaver Preferences for Standards Compliance and Accessibility.
    4. Using XTHML Strict DTD: put this default.html file in Configuration > DocumentTypes > NewDocuments OR use it every time you create a new html file.
    5. Upload files to your folder on the FTP Server

Homework | Week 3

CLIENT WORK

  1. Phase 1: Site Definition:
    • Review this Work Flow PDF (Phase 1: Site Definition 4.0 to 4.4)
    • Complete a Creative Brief using this worksheet and sample
    • Complete a Comprehensive Schedule (A WEEKLY BREAKDOWN) with key dates for deliverables, various phases, and the target dates for beta, QA testing and launch.
    • Files may be created in any application. Please export/save as PDF.
  2. Phase 2: Developing Site Structure
    • Research existing sites, competitors and others. Notice the Informational Framework of competitor's sites.
    • Create a rough Site Map. Based on your Client Survey and discussions with your client, divide content into logical units, generally no more than 6 main sections. Establish a hierarchy of importance among units, then build a Hierarchy from most important (GENERAL) to most specific (DETAILED).

TECHNICAL PREPARATION