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.

Page Editor Options - General Tab

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

Fig 1a (EW 1.0)

Fig 1b (EW 2.0)

Page Editor Options - General Tab (Click thumbnails for larger view)

Go to the Tools menu - Page Editor Options - General Tab

Basically you should tick everything except

Assign unique IDs to new tables
Selection margin
Automatically switch keyboard to language of surrounding text

With a decision only you can make about the Security Options radio button.

'Make ID unique on Paste' should be ticked but if your using forms you should un-tick it or your id tags would be named like so id=form0 id=form1 etc etc

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 CSS Tab - Part 2)

Ticking the 'Show Paste Options Buttons' selection is best because the paste options allow you a greater range of options when pasting in content and can save you time. see my Clean Code on Paste Tutorial for further information.

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

Spelling

Click the button for spelling Options under Spelling and un-tick the radio button for 'Ignore spellings in uppercase'

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)

What's New in Expression Web 2.0 with General Tab?

Applies to Expression Web 2.0 Only New

Security Options

There is only one selection under Security Options which is 'Allow unsigned Activex controls to be run and prompt for permission to run them'

Expression Web 2.0 will recognise the Activex controls that are needed to run Windows Media and Flash SWF files, however when you open a page that contains any other type ew will prompt you for permission to run the control. Though it won't prompt you for permission for unsigned Activex Controls because it won't even attempt to run them but by setting this control, it will attempt to run them and ask you for permission. However unless you trust the source of the Active control you should not run them.

After enabling this feature you can preview the associated media in the Design view of a page and set the properties.

If you decide not to enable this feature, the associated media will appear as a grey box in Design View.

My best recommendation with this selection is to base your choice on whether or not you will be using Windows Media or Flash SWF files within your site. If you are not then there is not need to tick the radio box.

FUTURE PLANS: NEW: Migrating from FrontPage to Expression Web Ebook AND Class now available

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