Microsoft FrontPage to Expression Web

Page Banner

3. 
   In the Folder List, right-click Default.htm and then click Open. (If the Folder List isn’t visible, on the View menu, click Folder List, or press ALT+F1.) In Code view, place your insertion point where you want your page banner to appear and then press CTRL+V.
   
4. 
   Save the file by clicking File and then clicking Save. In the Save As dialog box, in the File name box, type a new name for the file (such as PageBanner.htm), and then click OK.
   

To create the image:

1. 
   Right-click the following image and then press CTRL+C.
   

2. 
   Open your favorite image editing application, create a new file, and paste the image into the new file by pressing CTRL+V.
   
3. 
   Save the image as pageBanner.jpg (JPG format).
   
4. 
   Import the image into your new Web site by clicking the File menu, pointing to Import, and then clicking File. In the Import dialog box, click Add File. In the Add File to Import List dialog box, click the image that you just created, and then click Open. Click OK.
   
5. 
   It is good practice to keep your images in a separate images folder. To create the folder, right-click in the Folder List, point to New, and then click Folder. Right-click the folder that you just created, and click Rename. Type images, and then press ENTER. Now click pageBanner.jpg, and drag it into the folder that you just created.
   

To create the CSS:

1. 
   In the Web site that you just created, click File, point to New, and then click CSS.
   
2. 
   Copy the following code by selecting it and then click CTRL+C.
   

#pageBanner {

color: #336699;

text-transform: lowercase;

background: url('images/pageBanner.jpg') no-repeat;

padding: 20px 0px 20px 90px;

font: bold 36px Georgia, Times, serif;

}

3. 
   Place the insertion point at the top of the new CSS page and paste the code into the page by pressing CTRL+V.
   
4. 
   Save the page by clicking File and then clicking Save. In the Save As dialog box, in the File name box, type a new name for your CSS file (style.css, for example). Click OK.
   
5. 
   To apply the style sheet to the Web page, with Default.htm open in Design view, click the style sheet in the Folder List and then drag the style sheet onto the Default.htm. The resulting page should look something like the following:
   

Now that you have created your page banner, you can insert it as an Include Page on the pages where you want it to appear and maintain it in the page that you just created, Pagebanner.htm. For more information on how to create Include Pages, see the section entitled Included Content.

Link Bars

The Link Bar Web component provided three types of link bars: a bar with custom links, a bar with next and back links, and a bar based on navigation structure. Each of these used FrontPage Server Extensions to maintain the navigation structure and/or sequence of pages.

You can still edit the properties of an existing FrontPage Link Bar—including style, page levels to display, and orientation—in Expression Web, but without Navigation view, you cannot create additional links or reorder existing links, nor can you automatically create navigation for a specific sequence of pages without creating those links within each page.

You can, however, easily create a custom link bar, save the link bar in a separate page, and then save it as an Include Page. That way you can maintain your navigation in a single page rather than having to maintain the links in every page in which the navigation is included.

The following will help you create your own navigation that you can use in place of a custom link bar.

Replacing a FrontPage Link Bar with your own links

1. 
   Create a new page in the practice Web site that you created for the page banner by clicking File, and then clicking New. In the New dialog box, on the Page tab, click General and then click HTML. Click OK.
   
2. 
   To create the list, do one of the following:
   

• 
  For a horizontal list of links, copy the following code by selecting it and pressing CTRL+C. Note that each text item is separated with the pipeline character (|).
  

Home | About Me | Photo Gallery | Contact Me

• 
  For a vertical list of links, copy the following code by selecting it and pressing CTRL+C. Although you can use paragraph breaks or line breaks between each link to create a vertical list, a bulleted list format is a more semantic and standards-friendly way to create Web site navigation.
  

• Home



• About Me



• Photo Gallery



• Favorite Links



• Contact Me

3. 
   Select each text item (Home, for example) and press CTRL+K to open the Insert Hyperlink dialog box. In the Insert Hyperlink dialog box, in the Link to column, click Existing File or Web Page. In the Look in column, click Current Folder. In the main window, click Default.htm. Repeat for each page.
   

Note: All of the hyperlinks in the above example will link to Default.htm. If you want to create a new page for each link, in the Link to column, click Create New document. In the Name of new document box, type a name for your new document (for example, About.htm for the About me link). Under When to edit, check the Edit the new document later checkbox. Click OK. Repeat for each link.

Table of Contents

If you want a site map or table of contents on your site, you can create your own bulleted list or table of links, although you will need to update the page manually if you add pages to or remove pages from your Web site. You can also use a third party tool such as XML-Sitemaps, which generates XML or HTML-based site maps based on your file structure, and then you can include the generated page or XML data on your site.

Top 10 List

List View

Document Library View

MSN Mapping

MSN Components

MSNBC Components

Additional components

Advanced Controls

Themes and Shared Borders

Instead of using themes, format your Web site with CSS. While there is a bit of a learning curve associated with CSS, you also gain much more flexibility and control over the design of your Web site than you have with FrontPage themes. Once you separate the content of the site (HTML) from the presentation (styles and formatting) by using CSS, you can then more easily change the look and feel of your entire site by modifying the attached style sheet.

Instead of using Shared Borders, use Dynamic Web Templates or ASP.NET master pages to create templates. These templates can contain the content common to all of the pages of your site such as copyright information, logos, headings, and menus, for consistency across all pages. Once you have created a template, editing the common content is as easy as editing a shared border: modify the template, and then update all of the attached pages to reflect the change. By combining Dynamic Web Templates or ASP.NET master pages with CSS-based design, you gain the flexibility and ease-of-use of themes and shared borders, but with more control, more options, and standards-compliant code to boot.

Themes

The good news is that if you have been using FrontPage themes, you have actually been using style sheets without realizing it. Themes are applied by attaching a style sheet to the page. You can view and even edit the style sheet from within both FrontPage and Expression Web. These style sheets are very complicated, however, and even a seasoned CSS developer would have a hard time wading through it all. Consider upgrading your Web site from themes to CSS by applying a new style sheet to your site and learning how to edit and manage styles in Expression Web. For an introduction to CSS, see Appendix A: Using Expression Web to Create Styles.

If you want to move away from FrontPage themes, first remove the current theme. Open your site in FrontPage. Press and hold the CTRL key and then, in the Folder List, click all of the pages to which a theme has been applied. Click Format, and then click Themes. In the Themes task page, click the arrow to the right of No theme, and then click Apply to selected pages to remove the theme(s) assigned to those pages.

You can now try the CSS style sheet templates included with Expression Web. With your Web site open, on the File menu, point to New, and then click Page. On the Page tab, click Style Sheets, and then click any of the style sheets other than the style sheet entitled Blank. After you save the new style sheet with a new name, you can then apply it by dragging the style sheet onto the HTML page while it is open in Design view.

You can also create your own style sheet that functions in a manner similar to a theme. In the following example, you will create a simple style sheet to help get you started. The CSS code below defines the page background color, default font, and default text colors, and then provides specific formatting for headings and links. For more information on how to create alternatives to the Page Banner and Link Bar Web components, see the section entitled Link Bars and the section entitled Page Banner Included Content.

In the following example, you are going to create a new style sheet and new default Web page, and then apply the style sheet to the Web page.

To create the style sheet:

1. 
   In the practice Web site you created for the page banner, in the Folder List, double-click on the style sheet that you created to either open it or bring it to the front. If the Folder List isn’t visible, on the View menu, click Folder List, or press ALT+F1.
   
2. 
   Copy the following code by selecting it and then pressing CTRL+C.
   

/* this sets the background color of the page */

background-color: #ffffff; color: #414345;

/* this sets the default text color of the page */

/* this sets the default font and text size */

font: 80% Verdana, sans-serif;

}

h1, h2, h3, h4, h5, h6 {

font-family: Georgia, 'Times New Roman', Times, serif;

/* this sets the font for all headings */

}

/* the styles below set font sizes and styles for specific headings */

h2 { font-style: italic; font-size: 2em; }

h3 { font-size: 1.7em; }

h4 { font-style: italic; font-size: 1.7em; }

h5 { font-size: 1.3em; }

h6 { font-style: italic; font-size: 1.3em; }

/* the styles below set link styles and colors */

a:link { color: #0a5baf; }

a:visited { color: #5883b0; text-decoration: line-through; }

a:active, a:hover { color: #c65d10; }

3. 
   Place the insertion point below your existing page banner style, and then paste the code you just copied into the style sheet by pressing CTRL+V.
   
4. 
   On the File menu, click Save.
   

To create the sample HTML:

1. 
   In the Folder List, double-click Default.htm either to open it or to bring it to the front.
   
2. 
   Copy the following text by selecting it and then pressing CTRL+C.
   

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Normal text

Link color |

Hovered link color |

Active link color |

Visited link color

3. 
   In Code view, place the insertion point after the H1 element from the page banner example, and then paste the text by pressing CTRL+V.
   
4. 
   To apply the style sheet to the Web page, with Default.htm open in Design view, in the Folder List, click the style sheet you created and drag the style sheet onto the Web page. The resulting page should look something like the following illustration.
   

Along with the page banner in the previous example, you have just created your first theme!

Shared Borders

Dynamic Web Templates

The DWT can be created and edited like a normal Web page in Expression Web, so you can create a master layout—the header, footer, content columns, navigation, copyright statement, and any other content that that you want to include in each of your Web pages. You can also create multiple DWTs for a single site. For example, you might want a two-column template, a three-column template, and perhaps a special template for a product detail page.

Instead of adding content as you would on a normal Web page, you define editable regions within each DWT. For instance, you might add an editable region to the content column for your main content, a column to the left, and another column to the right column for additional content such as submenu navigation or ads. You then create content in the page that is attached to the DWT. The editable region in the attached page is the only region that can be modified. This keeps the template design from being accidentally modified from page to page, and it also allows DWTs to be interchangeable. You can attach a different DWT to a page for a different design—for example, you can take an HTML page with a two-column DWT attached, and attach a three-column DWT instead. The page layout will automatically update without changing the existing content in the editable region, and all without any painful copying, pasting, and recoding.

Another benefit of using DWTs is that global changes are much easier to make. If you need to make a change, you can make the change in one place, the DWT file. After saving your changes, Expression Web prompts you to apply the change to all the related HTML pages that use that DWT.

You can create a DWT by creating a new empty page (on the File menu, click New; in the New dialog box, click General, and then click Dynamic Web Template), but you may find it easier to start with an existing HTML page that already has your basic layout in place. You can then save your page as a DWT by clicking File, then clicking Save As. In the Save As dialog box, in the File name box, type a name for your DWT. In the Save As Type dialog box, click Dynamic Web Template.

If you have been following the examples throughout this paper, you can easily create a basic DWT in the practice Web site you created earlier.

To create the DWT:

1. 
   On the File menu, click New. In the New dialog box, on the Page tab, click General, and then click Dynamic Web Template.
   
2. 
   Copy the following code by selecting it and then pressing CTRL+C.