Microsoft Expression Web - Blank Web Page

As we have already created our website, now we will need to create our Home Page. In the previous chapter, we have created a one-page website, and our Home Page was created at that time automatically by Expression Web. So, if you have created a blank website, then you will need to create a Home Page for your site.

Microsoft Expression Web can create the following types of pages −

HTML

ASPX

ASP

PHP

CSS

Master Page

Dynamic Web Template

JavaScript

XML

Text File

In this chapter, we will create an HTML page and its corresponding style sheet.

Create a Blank Page

To create a blank page, you can simply go to File menu and select New → Page… menu option.

From the new dialog, you can create different types of blank pages such as HTML page, ASPX page, CSS page, etc. and cpck OK.

As you can see here, the default code is already added by Microsoft Expression Web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body> 
      <h1> 
         This is a blank web page 
      </h1> 
   </body> 
</html>

As you can see, your newly created page has the file name Untitled_1.html or Untitled_1.htm. You will need to save the page by pressing Ctrl + S and specify the name.

As our website already contains an index.html page, we don’t need another one. However, if you have created an Empty website, then name this page index.html.

To see your web in a browser, let’s go to the File menu and select the Preview in Browser → Any browser, let’s say Internet Explorer.

Create a CSS Page

Let’s take you through the step-by-step process of creating a CSS page.

Step 1 − To create a CSS page, go to the File menu and select New → Page… menu option.

Step 2 − Select General → CSS and cpck OK.

Step 3 − Save the page and type a name for the style-sheet.

Step 4 − Cpck the Save button.

Step 5 − Now, let’s go to the index.html page.

Step 6 − In the Manage Styles Panel, cpck Attach Style Sheet.

Step 7 − Browse to your style-sheet and select the Current page from “Attach to” and Link from “Attach as” and cpck OK.

Step 8 − Now, you will see that a new pne is added automatically in the index.html page.

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

Step 9 − The body element defines the document s body. To style the <body> tag, we need to create a new style. First, select the body tag in Design View and then cpck on the New Style… in Apply Styles panel or Manage Styles panel, which will open the New Style dialog.

Here, you can define the different options for your style. The first step is to select the body from the Selector dropdown pst and then select the Existing style sheet from “Define in” dropdown pst.

Step 10 − From the URL, select the sample.css file. On the left side, there is a Category pst pke font, background, etc. and currently the Font is highpghted. Set the Font related information as per your requirements as shown in the above screenshot and cpck Ok.

Step 11 − Now you can see in the design view that the background color and the font has changed to what we have selected. Now, if you open the sample.css file, you will see that all the information is automatically stored in the CSS file.

Let’s preview our web page in a browser. You will observe that the style is appped from the CSS file.

Microsoft Expression Web - Blank Web Page

Create a Blank Page

Create a CSS Page

友情链接