Create a Blank Webpage

Now that you have actually created your website, you will need to create your Home Page. If you created a one page website, your Home Page was created at that time. If you created a blank website, you will need to create a Home Page for the site.

Expression Web 4.0 can create various types of pages, BUT in this tutorial we will create an HTML page and its corresponding style sheet. Types of pages that can be created include:

• HTML
• ASPX
• ASP
• PHP
• CSS
• Master Page
• Dynamic Web Template
• Javascript
• XML
• Text File

Create a Blank Web Page

Step 1: There are a number of ways for you to create your new page:

• Ctrl + N
• File > New > HTML.
• Click File > New > Page > General > HTML.  View Screenshot
• Click the New Document dropdown from the Toolbar > select HTML View Screenshot

If you click the Code Tab and view the page source, you should see something like what is below.

Step 2: Depending on what you chose as your default extension, when you set up EW 4.0, your newly created page has the file name Untitled_1.html or Untitled_1.htm  You will need to save the page.

Saving the Page

Step 3: There are a number of ways to save your pages:

• Ctrl + S
• Right Click the page tab. > Select Save.
• Click File > Save.
• Click the Save icon on the Toolbar.

In the dialog box that opens,  'file name' will be highlighted. > Type 'index,' > press the Enter key OR click 'Save.'  It is not necessary to add the file extension .htm or .html. Expression Web will do it for you. View Screenshot Your page has been saved, and you are ready to add the external style sheet.

NOTE: What you name your Home Page will depend on what your hosting provider requires. Most will accept index.html or index.htm. Some may require that you use another name so be sure and check with your provider.

Create an External Style Sheet (CSS)

Step 4: There are a number of ways to create your new style sheet:

• File > New > CSS
• Click File > New > Page > General > CSS.
• Click the New Document dropdown from the Toolbar. > Select CSS.

Step 5: Save the page as you did, following the choices in Step 3. Type a name for the style sheet. Expression Web will add the file extension for you.

Attach the External Style Sheet to the Page

Step 6: As with many things you do in Expression Web, there is more than one way to accomplish a task. To attach the external style sheet to the page:

• With the webpage open in Design view, drag the .css file from either the Folder List panel or the Site View onto the page.
• In the Manage Styles Panel  or the Apply Styles Panel, click on 'Attach Style Sheet.'
  
  • Browse to your style sheet in the popup box.
  • Attach To: Check 'Current Page.'
  • Attach As:  Check 'Link.'
  • Click OK. 

View Screenshot

If you click the Code Tab and view the page source, you should see a line of code has been added to your page with the name of your style sheet.

<link href="sample.css" rel="stylesheet" type="text/css" >

Summary

You have now created your Home Page and the external style sheet and attached the style sheet to your page. The next step is to create the layout for our page.

You could use one of the premade templates that come with Expression Web or you could choose to download and use one of these CSS-based layout templates available from Genealogy Web Creations or import one of the Personal Web Packages from Expression Web Tutorials and Templates. OR you can create a basic layout from scratch as the next tutorial will guide you through.

Expression Web supports Dynamic Web Templates as a way to maintain a consistent look to your site. The page we are creating will be the basis for a DWT for your site. Tina Clarke offers free the Expression Web DWT Ebook. This is an excellent resource, so be sure and take advantage of this free download.

NEXT: Create a Webpage Layout in Expression Web

Copyright © 2009 Pat Geary of Expression Web Tutorials and Templates, All Rights Reserved
Revised July 2010