Home: Create Webpage | View actual HTML code | View actual CSS code | Setup Site

To FTP or Publish your website see: setup.htm

This two-column, Masthead and horizontal Nav demo has four Web pages:
1. index.htm
2. cssCode.htm
3. htmlCode.htm
4. setup.htm
This demo has only one Cascading Style Sheet (which is linked to all four pages):
1. siteLayout.css

All four .htm pages are copies of each other.

All three pages are linked to the same exact CSS file (siteLayout.css) which defines the header (#masthead), the navigation (#top_nav), the left column (#left_col), and additional features such as the page width, the background color and the basic layout for the entire site.

It's relatively easy:
1. Click & Pick your Layout
2. Customize & Save your files
3. Copy your template

3-Step Expression Web Demo to Create a new webpage with a linked Cascading Stylesheet:

You could choose File | New | Page | Style Sheets to create only a Style Sheet.
But the directions below create both a linked Style Sheet and a Web page in one step.

Step 1. CLICK and PICK to build a page/site like this from scratch:
File | New | Page | CSS Layouts then choose your layout, such as
[Header, Top Nav, 2 columns, footer] then click [OK].
Two files were created as a result: Untitled_1.htm and Untitled_1.css.

Step 2. CUSTOMIZE Untitled_1.css by adding background images, background colors, font colors... (See View Actual CSS code.)
Making changes to Untitled_1.css will change the appearance of Untitled_1.htm.
SAVE Untitled_1.htm as index.htm and Expression Web will prompt you to save the associated Untitled_1.css file. I suggest the file name: yourSiteNameLayout.css.
As the .css file is saved, Expression Web will automatically link the .css file to the index.htm file. In this case, <link href="siteLayout.css" rel="stylesheet" type="text/css" /> was automatically added to the <head> tag of this index.htm file.

Step 3. After you have an index page layout and a css stylesheet that you like, save them. Make copies by saving index.htm as contact.htm; save it again as portfolio.htm; then save a final copy to use later as template.htm. Or use the COPY command to make multiple copies of the initial design of index.htm. You will then have at least 3 copies of the same .htm file with 3 different names. Finally, put the appropriate title, meta tags, and content into the index, contact, and portfolio pages.

Note: You do NOT need to put your site header image in the index.htm file.
You can set this in your CSS file so that it works for the entire site: 
{background-image: url('images/MastHeadWinchester.jpg'); }

In the end, the root folder of your Web site should look like this:

images Folder (All images go here)