www. Expression - Web - 3 .com

• Home
• Getting Started
  • Checklist
  • 1. Set up Web Site
  • 2. Set the Doctype
  • 3. Make Web Page
  • 4. Make External Style Sheet
  • 5. Style Application Mode
  • 6. Designing the Web Page
  • 7. Dynamic Web Template
• CSS Basics
  • What is CSS?
  • Position Properties
  • Style Declaration
  • 3 Types of CSS Styles
  • CSS Selectors
  • Creating CSS Styles
  • Style Builder
  • Center web page
  • CSS How To's
• HTML Basics
  • What is HTML
  • HTML 5 ?
  • The Doctype
  • Box Generation
  • Page Properties
  • HTML Tags
    • div
    • p
    • h1 thru h6
    • ul
    • ol
    • li
    • br
    • hr
    • others
• Making Layouts
  • PreMade Layouts
  • Layout from Scratch
  • Layout Downloads
• Video Tutorials
  • Getting Started
  • Drop-Down Menu
  • Form Tutorial
  • Expression Design 3
  • Other Videos
• Products
  • Training DVDs
  • Online Class
  • 1 to 1 Coaching

 

 

 

Expression Web 3 Layout Tutorials

Premade CSS Layouts

Bookmark this on Delicious

Expression Web 3 contains several Premade Layouts.  You can watch the video below to learn how to set up one of those layouts.  Then all you have to do is modify the existing Styles and add your own text styles.

 

Sounds easy, doesn't it.  It is easy, well....for someone who has a bit of experience working with CSS.  This is why I recommend that you read over the Layout tutorial below in which we build a Layout from scratch. 

 

This will prepare you for modifying the premade layouts.

 

Premade CSS Layout

 

 

 

More About Premade Layouts

Using pre-built css layouts is the fastest way to create a page layout.  When using one of these layouts, the external style sheet is automatically created for you. 

 

Now, don't let the initial appearance of these layouts confuse you.  After you choose a layout, it will open in the main editing window.  All you will see is a bunch of divs that have not been given any sizing dimensions. 

 

Soooo.....Right-click on a Style located in the Manage Styles Task Pane, and choose Modify Style.  If there is a style for the masthead, choose that one first.  Set a height for the masthead by clicking on the Position Category in the Style Builder.  Type 90px for the  height.  Then click OK.  Now take a look at your layout. 

 

Continue to modify each style by adding either a height or a width.  The columns should not be given a height and they already have a width.  So just add a height to the masthead, top nav, and the footer.

 

You can then proceed to add background colors and images. 

 

I modified a few premade css layouts for you to download.  

Make a Layout from Scratch

Before you make your layout, you must first complete the Getting Started Checklist.   If you have done so, great....keep going. 

 

Ingredients of a Layout

A Layout is made up of several div tags, each of which will be styled with CSS. 

 

The order in which we insert those div tags is very important.  If you get ahead of yourself, you will have difficulty inserting div tags above existing div tags. 

 

There are ways to insert div tags after the fact, however, when making your first layout, we should learn the correct order.  Later on we can discuss ways to insert a div tag into an existing layout.

 

Tutorial:  Make a 3 Column Layout

This is the Layout will we make in this tutorial.

  

  

 

 

 

 

 

 

 

 

 

 

 

This Tutorial is Continued Here....