Expression Web 3 Tutorial

Make a Layout From Scratch

Delicious Bookmark this on Delicious

layout

Once again, here is the layout we will make with this tutorial.

 

 

Click on each section of the layout to be taken to that part of the tutorial.

 

 

 

 

 

Sections of the Layout above:  An Overview

1.  body:  this is the entire background of the web page.  We do not need a div tag for this section as it is already present upon creating a blank HTML web page. 

The body is made up of the following tags:  <body></body>.  Everything placed between these two tags is visible in a browser.  In other words, our layout and all the content we place in the layout is located between <body> and </body>. 

2. container: the container is made from the first div that we place on the web page.  It will hold the remainder of div tags that will be used to make the layout.  (The container is considered the "Parent Element" of the other div tags.)

3.  header:  sometimes called the 'masthead'.  we will use one div tag to create the header.  A Logo is often placed in the top left area of the header, while a search box can be placed in the right section.  At a minimum, you should use an H1 heading tag in the header and type the name of your web site in that h1 tag.  Then use an h2 tag to insert your tag line.  A tag line serves to solidify the purpose of your web site.

 

Example:  

Expression Web 3 Tutorials    <--(the name of the site, use an h1 heading)

    A Place for Beginners         <--(the tag line or motto, use an h2 heading)

 

4.  top-nav:  this requires one div tag.  We will insert a horizontal navigation menu using a list.

5.  The Columns:  next we will insert 3 columns.  Each column is made from one div tag.  Now, there is a trick to positioning 2 or more columns side by side so that they look like columns.  Be sure not to miss this section of the tutorial.

6.  footer:  finally, we will finish up the layout by inserting one last div tag.  The footer usually contains copyright info, and possibly some more links.  However, don't load up your footer with hundreds of links!!  Not only does that look bad, but it's often used by some folks who think they are gaining an SEO edge in the search engines.  Actually, you will get penalized by Google and other top search engines if you stuff tons of hyperlinks in the footer.

 

That was just an overview.  Next, we will begin working on each section of the layout and do so in the order presented above. 

Make the Layout

1. Style the Body

a) We need to remove default margins that are applied by a web browser's internal style sheet. 

 

b) We also need to apply a background color and specify font properties that will be inherited by the other page elements (divs).

 

Steps to Style the Body

  • Click New Style (in the manage styles panel)    manage styles

 

Manage Styles Panel  -->

 

 

 

 

 

 

Clicking New Style will open the Style Builder.

 

bodyClick on the Thumbnail to see the Style Builder --

 

 

 

 

  • Now we need to complete the top portion of the Style builder.

 

style the body 

top portion of the style builder

 A Selector is the way we 'select' or define the HTML Element that we want to style. '

Read about Selectors.
 
'body' is a Tag Selector. 
It targets the <body> </body> tags which happens to be the background of a web page.

 

1.  Make the Selector 'body' by typing it in the correct place.

2.  Define in the 'Existing Style Sheet'  (this will be your external style sheet)

3.  Check the box to 'Apply new style.....'

4.  Choose your style sheet from the drop down menu next to URL:

 

 

5.  Next, click on the Box Category.  (There are 9 Categories listed on the left side of the Style Builder.)

 

6.  Type zeros for all Padding and all Margins.

This will remove the default margins that the web browsers apply to our web page.  (Each browser has a tendency to apply a different size of default margin.)

 

zero margins default margins removed

 

  • Next, click on the Background Category and choose a background-color of your choice.  Just click on the drop down menu and then choose 'more colors; to create a custom color that is along the lines of a light blue or light gray.

 

  • Finish by clicking OK, and then Click the Save Icon.

 

NOTE:  We will add the font properties after we finish the layout.  The reason is because of the numerous concepts (such as Inheritance, Accessibility etc) that need to be covered with regard to assiging font size and other font properties. 

 

The Container

2.  The Container

Steps to Follow

  • Click and Drag a <div> tag from the Toolbox and drop it onto the web page.  This div should end up at the very top of the web page, and it will look like a long rectangular box that extends clear across the body. toolboxcontainer
  •  There are two types of boxes generated from HTML Elements:
        1) Block Boxes 
        2) Inline Boxes
  • A <div> generates a Block box.  A Block box will take up one entire line, meaning it will extend clear across the parent element in which the div is nested.  We cannot place two block boxes side by side unless we employ some positioning technique.  This is because block boxes force the next element to begin on the next line.  (We will revisit this when we get to the columns. )

 

  • Click New Style and complete the top section of the Style builder as follows:

container css style

  • Now, let's center the #container div.  To do this, we must specify a width and auto margins for the left and right sides.
  • To Set the Width:  Click on the Position Category.  Type 900px for the width property.

    width
  • Margins:  Click on the Box Category.  Type zeros for the top and bottom margins, choose auto for the left and right margins.
  • Background-color:  Click on the Background Category.  Choose White for the background-color property.
  • Click OK to close out the style builder.
  • Before you attempt to preview the container, you must open it up a bit.  So place your cursor inside the container div and press enter 3 or 4 times.
  • Click the Save icon.  And Preview in a browser -- Preview in Firefox first. 
  • If we design our web pages for FireFox, we can then fix any problems in Internet Explorer by using Conditional Comments.   If you don't have Firefox installed on your computer, then you better go get it now.  Get the newest version which I believe is 3.5.  It would also be a good idea to install Safari and Google Chrome too.  You must check all the different browsers to make sure your pages look correct in all them.

 

Continued  next page