Advanced Web Design: AD650

COURSE CALENDAR | WEEK 04 CLASS OUTLINE | HOMEWORK

  1. Modifying Dreamweaver Preferences
    1. Standards Compliance and Accessibility
    2. Using XTHML Strict DTD: put this default.html file in Configuration > DocumentTypes > NewDocuments OR use it every time you create a new html file.
    3. If you are using Dreamweaver 8 or above you can choose the DTD when you create a new HTML file.
  2. Setting up your Client Site Staging Area
    1. Review: File naming conventions.
    2. On your desktop, create a folder with the name of your client . Place your Style Guide index.html and Prototype CSS in this folder. If you don't have an index.html and CSS, use the ones linked here.
    3. Inside that folder create two folders: client_site and client_docs
    4. Place your client survey, creative brief and calendar in the client_docs folder.
    5. In Dreamweaver, define a new site with your client folder as your root directory. Set your FTP host directory path to public_html/yourlastname/
    6. Upload your folders and files to the FTP Server.
  3. WEB STYLE GUIDES
    1. What is a WEB STYLE GUIDE?
      1. "A web style guide is a key deliverable at the end of a website design/redesign process. It is a document (usually a subsite in itself) that describes what needs to be done to maintain and grow the website according to a common set of principles derived during the design or redesign process." -- Creating and Maintaining a Web Style Guide
    2. What is the purpose of a WEB STYLE GUIDE?
      1. "A web style guide helps in communicating the framework under which changes are to be made to the website." -- Creating and Maintaining a Web Style Guide
    3. What does a WEB STYLE GUIDE look like? Examples
    4. What is included in a WEB STYLE GUIDE? It varies, but general areas include:
      1. Information Architecture Guidelines
      2. Coding and Standards Guidelines
      3. Typography Styles and Branding Guidelines
      4. Authoring guidelines (or how to write web content)
      5. Templates/CSS downloads
      6. Resources
  4. Project Development Phases-- each phase of a project should contain the following or similar components. Phase 1, 2 and part of 3 will be due for the Midterm Project.
    1. Phase 1: Site Definition
      • Client Survey (DONE)
      • Creative Brief (DONE)
      • Calendar/Schedule (DONE)
      • Budget and Contract of Services
    2. Phase 2: Developing Site Structure
      • Sitemap Development: Site-View
      • Wireframe Development: Page-View
      • Interaction Development: Functional-View
    3. Phase 3: Interface Design & Production
      • The Design Process
      • Protosite Development
      • Art Optimization/Production
    4. Phase 4: Technical Engineering
      • HTML Production/Layout
      • Beta Launch/QA Testing
    5. Phase 5: Publishing/Marketing/Launch
      • Maintenance Schedule/Updating
      • Domain and hosting setup
      • Search Engine Submissions
      • HTML Style Guide
  5. Create a Budget and Contract of Services (even if you are giving a 100% discount)
    1. Freelancers.com Pricing Guidelines
    2. Web Design Pricing Guidelines Example
    3. Samples
      1. Simple budget and contract (pdf)
      2. Sample web design contract
      3. Basic Letter of Agreement (pdf)
    4. Web Design Contracts: Why Bother (article)
    5. Bulletproof Web Design Contracts (article)
    6. If you are in the design business (web or other) this is a good book to have: Graphic Artists Guild Handbook: Pricing & Ethical Guidelines
  6. 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
    6. Using your index.html as a base, experiment with one (or more) of the layout techniques above. Link the basic.css (prototype css) to your index.html and import a new stylesheet (layout.css) into your basic.css. You will have to modify the code, by adding the necessary divs, in order to make the layouts work.

Homework | Week 4

  1. Phase 1: Site Definition
    • Modify your Phase01 documents, based on today's discussion.
    • Ask clients to approve all Phase01 documents and Contract of Services.
  2. Phase 2: Developing Site Structure
    • Based on Client Survey and discussion with clients, divide the content they wish to include in their web site 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).
    • Create a Site Map using Illustrator, Photoshop or Visio. Please export/save as PDF.
    • Build the site structure in Dreamweaver using dummy (blank) pages and folders for each section. Upload your dummy files to your client_site folder. Upload your approved Phase01 documents and Site Map directly to your client_docs folder.
  3. Post to the AD650 Learning Forum.
  4. Read Chapter 4 from the book CSS Mastery