Setting up Expression Web

Tina Clarke

You just obtained Expression Web and want to make a start with your first web. Setting up Expression Web is the first order of business, this ensures EW will warn you of problems and help you maintain your site.

The Setting up Expression Web Tutorial consists of five parts. All these menu options are under the Tools Menu.

NOTE: This article and it's parts is available firstly each week in the Any Expression Ezine, it will then be published on the site the following issue. Make sure your one of the first to obtain our Tutorials and sign up for your copy. (There are no archives of the ezine) You can sign up on the top left any page on the site.

Page Editor Options - General Tab

Part 1 - Setting up Expression - Page Editor Options - General Tab

Fig 1 - Page Editor Options - General Tab (Click thumbnail for larger view)

Basically you should tick everything except 'Assign unique IDs to new tables' and 'Selection margin'.

It is important that 'Use <strong> and <em> when using Bold and Italic toolbar buttons' is ticked should you forget and use the formatting toolbar. (More about this in Part 2)

The 'Automatically switch keyboard to match language of surrounding text' selection is also important to avoid the span lang problem.

The most essential and important part of the General Tab selections are the Highlight Invalid HTML and Highlight Incompatible HTML.

Status Bar

Two of the most important options are under the General Tab, they save you so much time I cannot recommend using, them highly enough.

Highlight Invalid HTML
Highlight Incompatible HTML

When editing your current page, if the page contains a code error the Status Bar at the bottom of the program window displays the Code Error Detected icon. (See Fig 2)

Code Error detected.

Fig 2 - Code Error Detected icon

When editing your current page, if it contains code that is incompatible with the doctype you have used, the status bar will display the HTML Incompatibility Detected Icon. (See Fig 3)

HTML Incompatibility Detected Icon.

Fig 3 - HTML Incompatibility Detected icon

To bring up the first error or incompatibility in the Code View of your current page, you can either double click the icon in the status bar or right click the icon and choose Go to Error. To get past that error if you want to leave it and come back to it just press F9.

NOTE: I find it is best to work in Split View when dealing with Errors and Incompatibilities.

Invalid HTML and CSS code

When using the Detection Icons they will highlight incompatible HTML and mark invalid HTML and CSS code with a red, wavy underline in the Code View of your current page or CSS file. When you mouse over the highlighted or underlined code it will display a Screen Tip (see Fig 5) which gives you a solution about that instance of code.

Code Error Solution Example

In our example below the Code Error Detected Icon shows that the tag has not been been typed correctly, it should be so <br />. These errors are so easy to fix with the help of the Detection Icons, it's a must to make sure they are turned on.

Fig 4 - Code Error Solution

HTML Incompatibility Solution Example

In our example below the HTML Incompatibility Detected Icon shows that the meta tag has been typed in upper case and gives a warning about this. Upper case is not allowed in a XHTML doctype. These explanations are easy to understand and to fix. They teach you to avoid repeating these kind of mistakes

Fig 5 - HTML Compatibility Solution (Click to enlarge)

Part 2 - Page Editor Options - CSS Tab >>
Part 3 - Page Editor Options - Code Formatting Tab >>
Part 4 - Page Editor Options - IntelliSense Tab >>

Any Expression Ezine Tutorial Coming next: FrontPage to Expression Web - Replacing FrontPage Bots

Cheshire Web Designs - Cheshire website Designs by Any Expression Web Designs
Owner Any Expression Web Designs and Clarke Abstract Art

Are you looking for a Web Designer?
Web Designs created by Any Expression Web Designs