Chapter 3: Creating Pages and Content

Excerpt from Microsoft Expression Web 3 In Depth

Excerpt from Microsoft Expression Web 3 In Depth: Microsoft Expression Web 3 gives you plenty of choices when creating new pages. Not only can you choose between standard HTML pages, ASP.NET pages and files, PHP files, and ASP files, but you can also create new pages that have an existing CSS layout.

Cover image 

Excerpt from Microsoft Expression Web 3 In Depth.

By Jim Cheshire

Published by Que

ISBN-10: 0-7897-3981-X

ISBN-13: 978-0-7897-3981-0

Newsletters: Sign-Up & Save! Receive Special Offers, Free Chapters, Articles Reference Guide Updates, and plug into the pulse of what's happening in your corner of the industry by subscribing to InformIT newsletters! FREE coupon after sign-up!

Try Safari Books Online NOW! Access the largest fully searchable e-reference library for programmers and IT professionals!

Creating Pages

Expression Web 3 gives you plenty of choices when creating new pages. Not only can you choose between standard HTML pages, ASP.NET pages and files, PHP files, and ASP files, but you can also create new pages that have an existing CSS layout.

To create a new page in Expression Web 3, select File, New, Page to display the New dialog shown in Figure 3.1.

The left side of the New dialog contains a list of page types. When a page type is selected, the list at the right is populated with numerous pages that can be created.

Many of the page types listed aren’t really pages in the traditional sense. For example, if you select ASP.NET as the page type, you’ll see options such as Web Configuration and Site Map, both of which are Extensible Markup Language (XML) files instead of actual pages.

Creating a page is literally as easy as selecting the type of page in the New dialog and clicking OK. After you create the new page, you need to add content to it before it will serve any useful purpose. Let’s review the types of page formats you can choose when using the New dialog to create new pages.

General Page

Table 3.1 shows the page formats available when you select General in the New dialog and where you can find more information on certain formats.

Figure 3.1

The New dialog makes it easy to create any type of page.

Table 3.1  General Page Formats

Type

Description

More Information

HTML

Creates a standard, blank HTML page.

ASPX

Creates an ASP.NET Web form. When you choose this option, you will also have the option of choosing a programming language for the page.

For more information on ASP.NET Web forms, see Chapter 25, “Using Standard ASP.NET Controls.”

ASP

Creates a legacy ASP page.

For more information on legacy ASP, read Sams Teach Yourself Active Server Pages 3.0 in 21 Days from Sams Publishing.

PHP

Creates a PHP file for use with PHP scripts.

For more information on using PHP, see Chapter 32, “Using PHP.”

CSS

Creates an empty CSS file.

For more information on CSS files, see Chapter 17, “Creating Style Sheets.”

Master Page

Creates a new ASP.NET Master Page that can be used as a template for other ASP.NET pages.

For more information on ASP.NET Master Pages, see Chapter 27, “Using ASP.NET Master Pages and User Controls.”

Dynamic Web Template

Creates a new Dynamic Web Template. Other pages can then be attached to the Dynamic Web Template to create a consistent look and feel for your site.

For more information on Dynamic Web Templates, see Chapter 19, “Using Dynamic Web Templates.”

JavaScript

Creates a new JavaScript file (with a .js file extension). JavaScript entered in that file can then be used on one or more pages by linking the file to the desired page.

For more information on JavaScript files, see Chapter 22, “Client-side Scripting.”

XML

Creates a new, empty XML file.

For more information on XML files, read Special Edition Using XML from Que Publishing.

Text File

Creates an empty text file.

Create from Dynamic Web Template

Creates a new page based on a Dynamic Web Template. After selecting this option, you will be prompted for the Dynamic Web Template on which the page should be based.

Create from Master Page

Creates a new ASP.NET Web form based on an ASP.NET Master Page. After selecting this option, you will be prompted for the Master Page on which the page should be based.


Note - The Create from Dynamic Web Template and Create from Master Page options only appear if a site is already open in Expression Web 3.


ASP.NET Pages

The page types shown in Table 3.2 are available when you choose ASP.NET in the New ­dialog.

Table 3.2  ASP.NET Page Formats

Type

Description

More Information

ASPX

Creates a new ASP.NET Web form. This is the same option available in the General section.

Master Page

Creates a new ASP.NET Master Page. This is the same option available in the General section.

Web User

Creates a new ASP.NET user control that can then be inserted into an ASP.NET Web form.

For more information on ASP.NET user Control, see Chapter 30, “Using ASP.NET Web Parts.”

Web

Creates a new web configuration file (called web.config) that can be used to configure the settings for an ASP.NET2.0 application.

For more information on using the Configuration web.config file, read Special Edition Using ASP.NET from Que Publishing.

Web Configuration 3.5

Creates a new web configuration file (called web.config) that can be used to configure the settings for an ASP.NET3.5 application.

ASP.NET 3.5 applications allow for the use of ASP.NET AJAX. For more information on using ASP.NET AJAX, see Chapter 31, “Using ASP.NET AJAX.”

Site Map ASP.NET

Creates a new ASP.NET site map that can be used in conjunction with ASP.NET navigation controls.

For more information on ASP.NET site maps, see Chapter 26, “Using ASP.NET Navigation Controls.”

Create from Master Page

Creates a new page based on an existing ASP.NET Master Page. This is the same option available in the General section.

CSS Layouts

When you choose the CSS Layouts option in the New dialog, you will have the option of selecting from a series of page layouts. When you choose a particular layout, Expression Web 3 creates a new CSS file as well as a new HTML page and then links the new CSS file to the HTML page. Code will also be added to both the HTML page and the CSS file that creates the layout you choose.

After selecting the desired layout, you can modify the CSS file to customize the appearance of the page.

→ For more information on modifying CSS files, see Chapter 18, “Managing CSS Styles.”

Style Sheets

The Style Sheets section offers a wide assortment of precreated CSS files that you can use in your site. Unfortunately, Expression Web 3 doesn’t provide a preview of the styles present in the CSS files, so you will need to apply one to your site to see what kind of formatting it will provide.

These CSS files are a great way to move to CSS, as long as you are willing to do some modification to them when they don’t give you what you want. For example, in my experience, the colors applied by these CSS files are a bit loud and unpleasant in appearance. However, they are easily modified.


Tip - The CSS Layouts option allows you to easily create page layouts that are CSS-based instead of using tables or other traditional layout techniques. CSS-based layouts are growing in popularity, largely because today’s browsers are capable of rendering them consistently. However, if you choose to use a CSS layout, you should check your site carefully in a variety of browsers.



Tip - You might be better off using the CSS files supplied with Expression Web 3 as a way to learn CSS techniques. After you’ve gained a better understanding of CSS, it’s often best to create your own CSS files so you have complete control over them.


Frames Pages

The Frames Pages section provides a series of frame layouts. When you choose one of the frame layouts, Expression Web 3 will create all the pages that make up the layout for you.

→ For more information on using frames, see Chapter 6, “Using Frames.”

Importing Files

Adding content often is more than just entering and configuring text. In many cases, you’ll also be adding graphic files, Flash animations, video files, and other files.

To import files into your site, select File, Import, File to display the Import dialog shown in Figure 3.2.

Click the Add File button to import one or more files. You can also click Add Folder to import a folder and all the files inside that folder. After you’ve added files or folders, they will appear in the list in the Import dialog. If you want to change the name of an imported file, select the file and click the Modify button.

To complete the import process, click OK. The files will not be imported into the site until you click OK.

Figure 3.2

You’ll likely want to import some graphics and other files into your site. The Import dialog makes it easy.

Formatting Text

Adding text to a page in Expression Web 3 is similar to creating a document in your favorite word processor. Many of the same tools are available.

I’m not going to go into the details of basic text formatting because I’m sure you already understand how to bold and italicize text. Instead, I’ll explain how to work with HTML-specific formatting.


Tip - Files and folders added to the Import dialog will remain there until you complete the import process, remove them, or close the site. That means you can add files or folders and then click Close and import them later.

If you close a site with files still on the import list, Expression Web 3 will ask whether you want to import them before closing the site.


How Expression Web 3 Formats Text

Before you start formatting text in your page, you should become familiar with how Expression Web 3 applies formatting. Because Expression Web 3 is designed to create ­standards-compliant sites, it often uses CSS to apply formatting. How it goes about doing so is based on the CSS Mode setting.

The current CSS Mode setting is displayed using an icon in the Status Bar when a page is open. To adjust the CSS Mode setting, click the CSS Mode icon on the Status Bar and select the desired mode, as shown in Figure 3.3.

By default, the CSS Mode setting is set to Auto. In this mode, Expression Web 3 will apply formatting using CSS rules that are configured on the CSS tab of the Page Editor Options dialog.

→ For more information on using the CSS tab in the Page Editor Options dialog, see Chapter 11, “Configuring Page Editor Options.”

When the CSS Mode setting is Manual, Expression Web 3 will automatically display the Style Application toolbar shown in Figure 3.4. The Style Application toolbar allows you to specify how to apply styles when edits are made.

Figure 3.3

The CSS Mode setting controls how styles are applied and can be adjusted via the Status Bar.

Figure 3.4

You can control how styles are applied by setting the CSS Mode to Manual and using the Style Application toolbar.

When the CSS Mode setting is set to Auto (the default), you are at the mercy of Expression Web 3 when it comes to where CSS styles get defined. In many cases, that’s a suitable situation. However, you might want more granular control over where styles are created. For example, you might have a CSS file attached to the current page, and you may want to ensure that all newly created CSS styles are created inside that CSS file.

By setting the CSS Mode setting to Manual, you can use the Style Application toolbar to specify where new styles are created using the Target Rule drop-down shown in Figure 3.4. Based on what is currently selected, the following options are available in the Target Rule drop-down.

  • An Existing CSS Element—If the selected page element already has a CSS class or ID applied to it, you can select the CSS ID or class from the Target Rule drop-down. If you then make modifications to the selected element, Expression Web 3 will modify the CSS class or ID applied to it.

  • Inline Style—If the selected element has an inline style applied to it, selecting Inline Style from the Target Rule drop-down will cause the inline style to be modified when formatting is changed.

  • New Inline Style—Formatting changes will be reflected in a new inline style.

  • New Auto ID—Causes Expression Web 3 to create a new, auto-generated CSS ID for any formatting changes that are applied. Expression Web 3 will create the new CSS ID in an embedded style sheet inside the current page.

  • New Auto Class—Causes Expression Web 3 to create a new, auto-generated CSS class for any formatting changes that are applied. As with the New Auto ID option, the CSS class is created in an embedded style sheet in the current page.

  • Apply New Style—Allows you to create a new style using the New Style dialog. The location for the new style can be specified in the New Style dialog.

→ For more information on creating and editing CSS styles, see Chapter 17, “Creating Style Sheets.”

Font Families

In a word processing application, the font you apply to text will always be the font the viewer of the document sees. Web pages don’t work that way. For you to see text formatted in a particular font on a page, that font must be installed on your machine. If it’s not, the browser will substitute a font you have.


Note - Some fonts are installed on almost all computers; Arial, Helvetica, and sans-serif are considered the safest of all fonts. Times New Roman (a serif font) is another common font. It is the font Expression Web 3 uses by default.


1 2 3 Page 1
Page 1 of 3