Layouts Continued and Designing with Color - Week 4
Lecture/Demo:
- Presentation Information Architecture (IA) Designing with Color
- Color Choices
- The emotional impact of color on your design
- A review the Color Wheel and color schemes
- Using the Digital Color Wheel for web design
- Color schemes and how to decide on what colors to use
- Practice using Kuler by following the Adobe Kuler tutorial and then create a color Palette for your web site using Abobe Kuler
- CSS Demo - Create a Basic Two Column Layout from scratch. Create an XHTML Mock-up and CSS Style Sheet with a color Palette using a Base Image
- The Box Model, Margins, Borders and Padding, Floats, positioning and Text Formatting. We will create a two column fixed layout from scratch.
- Overview of Dreamweaver layouts available - Fixed and Liquid
- Defining the CSS Rules for layout areas
- Apply the CSS Rules to inserted <div> tags
- Add Text and image placeholders to the page
- Create a horizontal nav bar using unordered lists
- Use rulers and guides to fine-tune a layout for your blueprint
- Create a Dreamweaver template for multiple page use.
- Getty Images - How to login and search for images for your web site.
- Free Backgrounds - Choose a background for your web site
Lab:
- Review critique of blue prints. If time allows, begin working on XHTML Mock and CSS Style sheets for the home page for your midterm project.
- Create a color palette for your web site using Adobe Kuler. Reference Chapter 5 in the Head First Web Design book for guidelines.
Homework:
- Read chapter 5 on Layout and Design in the Head First Web Design book - Designing with Color.
- Using your blueprint and color Palette, construct the XHTML and CSS Mock-up for the homepage.
Resources:
