Microsoft Expression Web 4 was released on June 7, 2010. It added the option of HTML add-ins, and access to a web-based SuperPreview functionality, for testing pages on browsers that cannot be installed on the user's system (such as Mac OS X or Linux browsers).
Now that you have installed Expression Web 4.0, you can make some changes in the default setup of the program that will make Expression Web easier to work, These changes to the setup can also reduce your frustration level with the code that is created and enhance your working experience.
Develop a website using Microsoft Expression Web 4 using step by step guide. However, Microsoft didn't make it possible to add Microsoft Edge to the browser list in Expression Web. The searching I did said that the executable was at C: Windows SystemApps Microsoft.MicrosoftEdge8wekyb3d8bbwe MicrosoftEdge.exe but adding that to the browser list didn't work.
This page is a brief summary of the various settings. Select from the Page Editor Options tabs:
Each of these is explained in greater detail in Tina Clarke's FREE Setting Up Expression Web 4.0.
NOTE: If the default black color scheme is NOT to your liking and you want to change and use your Windows Color Scheme rather than the default, Tools > Application Options > General Tab > Use your current Windows color scheme. The result will depend on what color scheme you are using.
View Screenshot Default Color Scheme
View Screenshot Windows Color Scheme
HTML Declaration
The default doctype used by Expression Web 4 for new documents is:
If you are moving from FrontPage or another web editor you may not have any doctype declaration on your pages. Why is it important to include a doctype declaration as part of your page?
The doctype you use will influence the way browsers render your page. The lack of a doctype (or the presence of an invalid one) can change the layout of your page completely, as the browser will use quirks mode instead of standards mode to interpret your code. As the name suggests, you can expect the render to include a few quirks if you take this route. ~ Sitepoint ~
To add or change the DocType declaration in an existing page
With the page open in Code View, do one of the following:
- If your page already has a DocType declaration, select the entire DocType declaration.
- If there is NO DocType declaration, place your cursor at the very top of the page before all other code in your page.
Do one of the following:
- Press CTRL+ENTER.
- On the Edit menu, point to IntelliSense, and then click List Code Snippets.
- On the Code View toolbar, click List Code Snippets
In the list of code snippets, do one of the following:
- Type the keyword for the code snippet, and then press ENTER or TAB to insert it.
- Select the code snippet you want to insert, and then press ENTER or TAB to insert it.
- Double-click the code snippet you want to insert.
Using Html 5 doctype
You also have the choice of using the HTML 5 doctype with CS3 Draft.
Tools > Page Editor Options > General Tab
Fig 1: Page Editor Options >General Tab (click thumbnail to view larger image)
I tick everything except:
- Assign unique IDs to new tables
- Selection margin
- Automatically switch keyboard to language of surrounding text
- Automatically add 'lang' attributes to international text (New to EW4)
Spelling
Click the button for spelling Options under Spelling and un-tick the radio button for 'Ignore spellings in uppercase'
if you need to change the options for spelling to cover UK spellings, you will need to make the change in two places:
Tools > Page Editor Options > General tab – Spelling:- Set Spelling language from the drop-down AND
Tools > Spelling Options > Custom Dictionaries > Set this to English (UK) as well from the drop-down.
Cut and Paste Options
Make sure 'Show Paste Options buttons' is ticked which will display the Paste Options button when you paste text or elements into a page. When you click the button, a list appears with options for pasting the text or element.
Code View Options
I tick everything except:
- Word wrap
- Selection margin
Two of the most important ones are that should always be ticked are:
- Highlight Invalid HTML which will display invalid HTML in a specific color scheme (the default is red text on a yellow background). If you choose to change the colors, you can specify this color scheme in the Color Coding tab of the Page Editor Options dialog box.
- Highlight Incompatible HTML which will display a wavy underline beneath code that isn't compatible with HTML standards.
Tools > Page Editor Options > Code Formatting Tab
Fig 2: Page Editor Options > Code Formatting Tab (click thumbnail to view larger image)
Tick 'tag names are lowercase' and 'attribute names are lowercase' - the default doctype for Expression Web 4 is XHTML, which requires all code be written in lowercase. Even if you decide to change your doctype to HTML rather than XHTML, it is a good habit to get into and will make a future change easier.
'Attribute names are alphabetized' is ticked by default. If you leave the default setting, your meta tags will NOT remain in the order you set BUT will be reorganized in A-Z order. I recommend NOT having this selection ticked.
Tick 'indent properties on new line.'
Tick 'Use shorthand properties when generating styles.' Use shorthand CSS attributes instead of longhand. As an example, with this option selected, Expression Web would define the values of the width, color and style of a border by setting only the border attribute in the style.
Example Using Shorthand: #masthead {border: 1px solid #000000; }
With this option cleared, Expression Web would set an attribute and value for each border attribute.
Example using longhand:
#masthead {
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000; }
Both accomplish the same style BUT the shorthand code is much shorter.
If you set the Right Margin at a high number (2000), this will keep your code from wrapping.
Tools > Page Editor Options > CSS Tab
Fig 3: Page Editor Options > CSS Tab (click thumbnail to view larger image)
If you are new to CSS, tick the 'Auto Style Application.'
The Page properties on the tag should be set to rules and everything else to classes
- Page properties on the tag
- Font and text
- Background
- Borders
- Padding and margins
- Sizing, positioning, and floating
- Bullets and numbering
Only reuse classes with the prefix style' option
If you tend to use the formatting toolbar to add styling to your page, which is not a good habit to get into, you may also wish to check the 'Only reuse classes with the prefix style' option. Why? You page can quickly fill up with auto-generated styles - style1, style2, style3 and so on. Expression Web can help with this issue by automatically reusing styles with the same properties where possible.
Example: Create a short paragraph of text (one line) and apply underline to the text. The following will be added to your
tag and the associated style block would be added to the head section of your page:
Microsoft Expression Web Free
.auto-style1 { text-decoration: underline; }
If you then change the text color of this paragraph to #CC3300, then EW would just update style1 accordingly.
.auto-style1 { text-decoration: underline; color: #CC3300; }
If you then add a second paragraph of underlined text, style2 would be created in the head section and applied to the paragraph.
.auto-style2 { text-decoration: underline; }
If you then apply the same color #CC3300 to that paragraph, both paragraphs would be updated to use the same style — style1 — and style2 would be deleted.
If you see a lot of style1, style2, etc in the head section of your page, please read What are all the style# in my page?
Tools > Page Editor Options > Authoring Tab
Fig 4: Page Editor Options > Authoring Tab (click thumbnail to view larger image)
For New Documents:
- Tick your default file extension htm or html. It does not matter which one you choose, just be consistent.
- Adding a BOM on PHP pages causes problems because it will appear on the webpage disrupting the display. Introduced in EW 2.0 and available in EW 4.0 is the ability to turn off the addition of a byte order mark in UTF-8 pages by file extension. By default, only the .php extension has the BOM turned off. I turn it off on all pages. I do so by clearing the checkmark from each the file extensions listed.
EW 3.0 and 4.0 .htm bug
If you choose to use the .htm file extension, be aware that there is a bug in Expression Web 4.0. If you use any of the generic site templates that ship with Expression Web or any third party Site Templates to create your website, and have selected the .htm file extension, you will see before your eyes the index.html page change to default.html. If you blink, you may miss this. This is a little known bug.
If you have it set the default extension to .html then your homepage extension will remain index.html. You can, of course, rename your homepage file to whatever your host requires by right clicking on the selected link in Folder List View (Panels - Folder List or Alt + F21) and choosing 'Rename'.
NOTE: This bug still exists in the free version of Expression Web 4.
EW 4.0 .htm bug
WARNING - This bug affects Expression Web 4.0 ONLY but is a more serious bug than the one mentioned above.
If you download and install any third party .tem Site Template package such as those offered by Migrating from FrontPage to Expression Web and at the same time have you default page extension set to .htm, you will see the following behavior:
- RENAME the first file in the list of files, from whatever it is named to default.html
- A dialog box will appear (see Fig 5) asking 'A file with the name default.htm already exists. Do you want to replace this with your file?'
- If you say YES, then EW 4.0 will proceed to delete the next file in the Folder List. It will continue to do this each time you say yes, till all that is left is the changed default.html which is now your homepage.
- If you say NO, then it will ask for each file in the list, till it has worked through them all, however the file renamed to default.html remains and is now your homepage.
Fig 5: Replace file message
Until this bug is fixed, I would strongly suggest choosing .html as the default file extension. That choice will affect all new files. Old files will remain untouched and you can always rename the file to use the .htm extension if you so choose.
NOTE: This bug still exists in the free version of Expression Web 4.
Doctype and Secondary Schema
The default settings are:
- Document Type Declaration - XHTML 1.0 Transitional
- Secondary Schema - Internet Explorer 8.0
CSS Schema
The default setting is:
- CSS Schema: - CSS 2.1
Tools > Page Editor Options > Intellisense Tab
Fig 6: Page Editor Options > Intellisense Tab (click thumbnail to view larger image)
Tick all the boxes provided. Intellisense works in Code View and allows you to look up and insert code that's compatible at the place in your code where your cursor is currently located.
In Code View, place your cursor where you want the tag and type the opening <. When the Intellisense menu pops up, scroll to the entry you want. You can press Enter or double-click to insert it. Intellisense is also available when you are editing an existing tag or from the Quick Tag bar.
Intellisense can also be using while working with CSS.
Microsoft Expressions Web 4 Tutorial
IntelliSense provides:
- Auto-insertion of end tags, end braces, and value quotes.
- Context-sensitive shortcut menus that list and can insert code that is compatible at the current point in the code.
- Context-sensitive ScreenTips that list variables, functions, or parameters that are compatible at the current point in the code.
- Code hyperlinks, which enable you to click hyperlinks or references to classes, external CSS files, and script functions to open or go to the source of these items.
The DocType declaration in a page determines the options that appear in the IntelliSense shortcut menus in the Code view of a page.
As an example: If you are using the default doctype declaration XHTML 1.1, Expression Web will NOT offer the target attribute as it has been deprecated in XHTML.
The default doctype used by Expression Web 4 for new documents is:
If you are moving from FrontPage or another web editor you may not have any doctype declaration on your pages. Why is it important to include a doctype declaration as part of your page?
The doctype you use will influence the way browsers render your page. The lack of a doctype (or the presence of an invalid one) can change the layout of your page completely, as the browser will use quirks mode instead of standards mode to interpret your code. As the name suggests, you can expect the render to include a few quirks if you take this route. ~ Sitepoint ~
To add or change the DocType declaration in an existing page
With the page open in Code View, do one of the following:
- If your page already has a DocType declaration, select the entire DocType declaration.
- If there is NO DocType declaration, place your cursor at the very top of the page before all other code in your page.
Do one of the following:
- Press CTRL+ENTER.
- On the Edit menu, point to IntelliSense, and then click List Code Snippets.
- On the Code View toolbar, click List Code Snippets
In the list of code snippets, do one of the following:
- Type the keyword for the code snippet, and then press ENTER or TAB to insert it.
- Select the code snippet you want to insert, and then press ENTER or TAB to insert it.
- Double-click the code snippet you want to insert.
Using Html 5 doctype
You also have the choice of using the HTML 5 doctype with CS3 Draft.
Tools > Page Editor Options > General Tab
Fig 1: Page Editor Options >General Tab (click thumbnail to view larger image)
I tick everything except:
- Assign unique IDs to new tables
- Selection margin
- Automatically switch keyboard to language of surrounding text
- Automatically add 'lang' attributes to international text (New to EW4)
Spelling
Click the button for spelling Options under Spelling and un-tick the radio button for 'Ignore spellings in uppercase'
if you need to change the options for spelling to cover UK spellings, you will need to make the change in two places:
Tools > Page Editor Options > General tab – Spelling:- Set Spelling language from the drop-down AND
Tools > Spelling Options > Custom Dictionaries > Set this to English (UK) as well from the drop-down.
Cut and Paste Options
Make sure 'Show Paste Options buttons' is ticked which will display the Paste Options button when you paste text or elements into a page. When you click the button, a list appears with options for pasting the text or element.
Code View Options
I tick everything except:
- Word wrap
- Selection margin
Two of the most important ones are that should always be ticked are:
- Highlight Invalid HTML which will display invalid HTML in a specific color scheme (the default is red text on a yellow background). If you choose to change the colors, you can specify this color scheme in the Color Coding tab of the Page Editor Options dialog box.
- Highlight Incompatible HTML which will display a wavy underline beneath code that isn't compatible with HTML standards.
Tools > Page Editor Options > Code Formatting Tab
Fig 2: Page Editor Options > Code Formatting Tab (click thumbnail to view larger image)
Tick 'tag names are lowercase' and 'attribute names are lowercase' - the default doctype for Expression Web 4 is XHTML, which requires all code be written in lowercase. Even if you decide to change your doctype to HTML rather than XHTML, it is a good habit to get into and will make a future change easier.
'Attribute names are alphabetized' is ticked by default. If you leave the default setting, your meta tags will NOT remain in the order you set BUT will be reorganized in A-Z order. I recommend NOT having this selection ticked.
Tick 'indent properties on new line.'
Tick 'Use shorthand properties when generating styles.' Use shorthand CSS attributes instead of longhand. As an example, with this option selected, Expression Web would define the values of the width, color and style of a border by setting only the border attribute in the style.
Example Using Shorthand: #masthead {border: 1px solid #000000; }
With this option cleared, Expression Web would set an attribute and value for each border attribute.
Example using longhand:
#masthead {
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000; }
Both accomplish the same style BUT the shorthand code is much shorter.
If you set the Right Margin at a high number (2000), this will keep your code from wrapping.
Tools > Page Editor Options > CSS Tab
Fig 3: Page Editor Options > CSS Tab (click thumbnail to view larger image)
If you are new to CSS, tick the 'Auto Style Application.'
The Page properties on the tag should be set to rules and everything else to classes
- Page properties on the tag
- Font and text
- Background
- Borders
- Padding and margins
- Sizing, positioning, and floating
- Bullets and numbering
Only reuse classes with the prefix style' option
If you tend to use the formatting toolbar to add styling to your page, which is not a good habit to get into, you may also wish to check the 'Only reuse classes with the prefix style' option. Why? You page can quickly fill up with auto-generated styles - style1, style2, style3 and so on. Expression Web can help with this issue by automatically reusing styles with the same properties where possible.
Example: Create a short paragraph of text (one line) and apply underline to the text. The following will be added to your
tag and the associated style block would be added to the head section of your page:
Microsoft Expression Web Free
.auto-style1 { text-decoration: underline; }
If you then change the text color of this paragraph to #CC3300, then EW would just update style1 accordingly.
.auto-style1 { text-decoration: underline; color: #CC3300; }
If you then add a second paragraph of underlined text, style2 would be created in the head section and applied to the paragraph.
.auto-style2 { text-decoration: underline; }
If you then apply the same color #CC3300 to that paragraph, both paragraphs would be updated to use the same style — style1 — and style2 would be deleted.
If you see a lot of style1, style2, etc in the head section of your page, please read What are all the style# in my page?
Tools > Page Editor Options > Authoring Tab
Fig 4: Page Editor Options > Authoring Tab (click thumbnail to view larger image)
For New Documents:
- Tick your default file extension htm or html. It does not matter which one you choose, just be consistent.
- Adding a BOM on PHP pages causes problems because it will appear on the webpage disrupting the display. Introduced in EW 2.0 and available in EW 4.0 is the ability to turn off the addition of a byte order mark in UTF-8 pages by file extension. By default, only the .php extension has the BOM turned off. I turn it off on all pages. I do so by clearing the checkmark from each the file extensions listed.
EW 3.0 and 4.0 .htm bug
If you choose to use the .htm file extension, be aware that there is a bug in Expression Web 4.0. If you use any of the generic site templates that ship with Expression Web or any third party Site Templates to create your website, and have selected the .htm file extension, you will see before your eyes the index.html page change to default.html. If you blink, you may miss this. This is a little known bug.
If you have it set the default extension to .html then your homepage extension will remain index.html. You can, of course, rename your homepage file to whatever your host requires by right clicking on the selected link in Folder List View (Panels - Folder List or Alt + F21) and choosing 'Rename'.
NOTE: This bug still exists in the free version of Expression Web 4.
EW 4.0 .htm bug
WARNING - This bug affects Expression Web 4.0 ONLY but is a more serious bug than the one mentioned above.
If you download and install any third party .tem Site Template package such as those offered by Migrating from FrontPage to Expression Web and at the same time have you default page extension set to .htm, you will see the following behavior:
- RENAME the first file in the list of files, from whatever it is named to default.html
- A dialog box will appear (see Fig 5) asking 'A file with the name default.htm already exists. Do you want to replace this with your file?'
- If you say YES, then EW 4.0 will proceed to delete the next file in the Folder List. It will continue to do this each time you say yes, till all that is left is the changed default.html which is now your homepage.
- If you say NO, then it will ask for each file in the list, till it has worked through them all, however the file renamed to default.html remains and is now your homepage.
Fig 5: Replace file message
Until this bug is fixed, I would strongly suggest choosing .html as the default file extension. That choice will affect all new files. Old files will remain untouched and you can always rename the file to use the .htm extension if you so choose.
NOTE: This bug still exists in the free version of Expression Web 4.
Doctype and Secondary Schema
The default settings are:
- Document Type Declaration - XHTML 1.0 Transitional
- Secondary Schema - Internet Explorer 8.0
CSS Schema
The default setting is:
- CSS Schema: - CSS 2.1
Tools > Page Editor Options > Intellisense Tab
Fig 6: Page Editor Options > Intellisense Tab (click thumbnail to view larger image)
Tick all the boxes provided. Intellisense works in Code View and allows you to look up and insert code that's compatible at the place in your code where your cursor is currently located.
In Code View, place your cursor where you want the tag and type the opening <. When the Intellisense menu pops up, scroll to the entry you want. You can press Enter or double-click to insert it. Intellisense is also available when you are editing an existing tag or from the Quick Tag bar.
Intellisense can also be using while working with CSS.
Microsoft Expressions Web 4 Tutorial
IntelliSense provides:
- Auto-insertion of end tags, end braces, and value quotes.
- Context-sensitive shortcut menus that list and can insert code that is compatible at the current point in the code.
- Context-sensitive ScreenTips that list variables, functions, or parameters that are compatible at the current point in the code.
- Code hyperlinks, which enable you to click hyperlinks or references to classes, external CSS files, and script functions to open or go to the source of these items.
The DocType declaration in a page determines the options that appear in the IntelliSense shortcut menus in the Code view of a page.
As an example: If you are using the default doctype declaration XHTML 1.1, Expression Web will NOT offer the target attribute as it has been deprecated in XHTML.
In addition, the option you set for the CSS Schema in the Page Editor Options dialog box determines the level of CSS that appears in IntelliSense shortcut menus.
There are other tabs you can explore under the Page Editor Options settings, but the ones listed above are the main ones. For greater detail, download Setting Up Expression Web 4 by Tina Clarke.
Next Step: Create Website in Expression Web 4.0
Copyright © 2009 Pat Geary of Expression Web Tutorials and Templates, All Rights Reserved
Revised for Expression Web version 4.0 July 2010
Updated: December 2012
If you have not already done so, downloadExpression Web 4 Free Version. NOTE: As of June 2020, Microsoft has deleted it from their servers. DownloadExpression Web FREE version from Internet Archive WayBack Machine.
Click on the installation file Web_Trial_en.exe (ignore the fact that it says Trial) and follow the instructions. There is no need to activate EW once you have installed it. You may install the free version on as many machines as you want.
View Screenshot of About EW4 for free version.
Licensing
You can install the free version on as many computers as you like.
Note: Screenshots were done installing Expression Web Free Version on a Windows 10 machine. The free version can be installed using all versions of Windows including Windows 10.
Installation
Step 1: Once you have downloaded the program file, double click on the file to start the installation. You will receive the normal User Account Control warning box. Click Yes.
Step 2: Accept the license agreement.
Step 3: Choose whether you wish to join the Customer Experience Improvement Program.
Step 4: Select which of the programs you wish to install.
Microsoft Web Expressions 4 Download
If you expand the Options, you will see where the program is going to be installed.
Step 5: Once all of the program you have selected are installed, you will see the finish setup screen. You can either view the Release Notes of click Finish.
Microsoft Expression Web 5 Download
Next Step:Setting Up Expression Web 4
Copyright © 2010 Pat Geary ofExpression Web Tutorials and Templates, All Rights Reserved
Written June 2010
Revised August 2011
Revised December 2012
Revised December 2019
