Page Editor Options - CSS Tab

Part 2 - Setting up Expression - Page Editor Options - CSS Tab

Auto Mode is the mode to use if your New to CSS, this mode allows you to learn as Expression Web does all the work, however there are caveats.

Fig 1 Page Editor Options - CSS Tab

This screen shot (click to enlarge) shows the settings I recommend if you are new to CSS.

Style Application Mode - Set to Auto Mode

Style Application Mode can be set to the following selections:

Class based
Inline
Element based

The style application mode for either Auto or Manual can be set in two ways. Either through the Page Editor Options dialog box or through the Status bar.

NOTE: I highly recommend setting the Style Application Mode to Auto if your new to CSS.

Page Editor Options dialog box

Tools Menu - Page Editor Options dialog box - CSS Tab - Select Auto Style Application.

Status Bar

The Status Bar is located along the bottom of the program window, in Design or Code View. Amongst the selection available is Style Application, to access the change of mode either right click to bring up the Options or double click to access the Style Application Toolbar

Fig 2- Style Application Options

VIEW SCREENSHOT - Style Application Toolbar

How to Set Preferences for Generated CSS

Basically the Page properties on the <body> tag should be set to Rules and the rest to Classes.

Page properties on the <body> tag
Font and text
Background
Borders
Padding and margins
Sizing, positioning, and floating
Bullets and numbering

The Formatting Toolbar is now the bane of a CSS Newbie. If you have not used CSS before you will be used to using the Formatting Toolbar with abandon and filling your html code with lots of font tags and more. This is where you retrain yourself to a new way of doing things. Letting Expression Web take the strain out and put the styles in, so you don't have to think about it. However by observing how Expression codes the styles you can learn to make your own styles but transfer them to the sheet. When your more confidant then it will be time to move to Manual Mode.

What is my solution for newbie's who keep finding their code littered with style1 style2 etc? It's quite simple really TURN OFF the Formatting bar and or the Common Toolbar, it's easy to do and easy to TURN BACK ON.

You can either bring up the Customize Dialog box by going to Format - Customize. Or right click on a grey area of the toolbars and choose Customize from the pop up menu. When open select the Toolbars Tab and un-tick the Formatting and/or Common Toolbars

Cutomize Dialog box - Toolbars Tab. Fig 3 Customize Dialog Box - Toolbars Tab

The reason I suggest turning it off is so you won't be tempted to use it. Your first order of business after setting up Expression web is to either use one of the generic predefined templates or CSS layouts that come with EW to start learning to use CSS or to make your own sheet, which I highly recommend you start with.

If you take a look at one of the style sheets that comes with the templates (they EACH have a selection of three slightly different formatting styles) see how everything is catered for as regards layout.

However you might want to add a style for Bold instead of using the font bar, when using bold within a sentence you need a span tag to encompass just the selection you want to make bold. For example in the HTML Code you would have.

<span class="bold">Text selected for bold</span>

The Style in the Cascading Style Sheet would be:

.bold {
font-weight: bold;
}

You can make this yourself by USING the formatting bar. Just select your text and press bold. This will automatically make a embedded sheet (This goes between the head tags) and will insert a class on your selected text. This is Expression teaching you how and what about styles. However we want our pages to be clean and tidy and have all styles in our external CSS sheet, so observe the code generated and change the name from Style# to something useful for example in this case bold as that is what is about. Then take the embedded code out of the page and put the style in your external CSS sheet.

Expression Web has taught you HOW to make the style and what it should look like, however as I first stated it is all TOO EASY to make a mistake and use the formatting bar and forget to NOT remove the embedded styles and change the style# to some useful name, plus you can end up with a lot of duplicate styles all numbered differently.

Turning OFF the formatting bar lets you control where and when you use it consciously. Believe me you will find yourself wondering where all the style tags came from if you don't.

Use width and height attributes for images instead of CSS

This selection sets the dimensions of pictures that you add to a page by adding width and height attributes to the <img> tag. If deselected, Expression Web Designer uses CSS to set the dimensions of pictures; the type of style that is applied to the picture depends on the setting of the Sizing, positioning, and floating option. I recommend that you tick this option.

<< Part 1 - Page Editor Options - General 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