1.866.363.5633

www  . Expression - Web - Tutorial . com


Expression Web 4 Tutorials:    Designing Web Pages One Step at a Time


Step 6:  Designing a Web Page

Make the Layout

The first thing we need to do is create a Layout on our HTML Web Page.  Making this layout will require you to learn a few different concepts.  You have to understand HTML and CSS to an extent.

However, the easiest way to get started learning all this stuff is to simply follow the tutorial on "Making a Layout from Scratch".  There you will focus on one HTML Tag in particular and one type of CSS Style. 

The single most important HTML tag needed to create a layout is the div tag.    We no longer use tables for making layouts. 

When we write <div></div> in the code, it generates a box on the web page.  We then create a CSS Style to format and add dimensions to that box so that it will become one section of our layout.  It could be the header, the container, or even the footer.  Or, it could be our columns, too.   One layout will contain 6, 7, or more div tags. 

Each Div will become one section of our Layout

No Need to Write Your Own Code

Expression Web does not require you to write the code, instead, you will click and drag a div tag onto a web page.  Doing so is equivalent to writing <div></div>.   And the outcome is the same as if we wrote our own code:  it generates a box.

The purpose of these boxes is to hold our content.  So it only makes sense to plan ahead of time as to where you want to place your content.

In any case, read below to learn how to make a layout. 

  • 1) you can use a premade layout, or
  • 2) you can make a Layout from sratch. 

Both Tutorials follow below....

 

Pre-Made CSS Layouts

Expression Web Comes with a few premade CSS Layouts you may want to try. 

  • 1.  Click File > Hover over New  >  Click Page > Choose the Page Tab > CSS Layouts > Choose a Layout
  • 2.  Click Ok

Pre-Made CSS Layouts

create css layout videoWatch the Video:  Creating a Pre-Made CSS Layout

 

 

Make a Layout From Scratch

As mentioned previously, we no longer use Tables for our Layouts.  Instead, we use several div tags to create the layout.  Each div will eventually hold all of our content.

Ingredients of a Layout

  • 1.  HTML <div> tags
  • 2.  CSS Styles - In particular, we will create one CSS Style Rule using an ID Selector for each div of the layout.

 

The Toolbox

Locate the Toolbox in the upper right Panel of the Expression Web Interface.  In the Toolbox you will find HTML Tags.  The first tag listed is the <div> tag. 

To place a div tag on your web page, simply click and drag the <div> from the Toolbox and drop it onto your web page.  You can also double-click on the <div> tag in the Toolbox to place a div on your page.  Be sure to first place your cursor on the web page at the point where you want to insert the <div>.

Step 7:  Make a Dyanmic Web Template   next