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
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:
#masthead {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)
contact.htm
index.htm
portfolio.htm
yourSiteNameLayout.css