Expression Web Tips

Expression Web 4 Tutorials 2nd Edition – from Install to Publish and More

Patricia Geary — Thu, 10 May 2012 14:05:31 +0000

REVISED May 2012 to include minor revisions and new sections on HTML and CSS.

My free EBook Expression Web 4 Tutorials 2nd Edition from Install to Publish and More has just been revised and updated with new content. It is available for download as a zipped pdf file. The EBook is a great resource for beginners and newbies to Expression Web 4.0

Expression Web Tutorials 2nd edition.

By clicking on the EBook cover, you can download the EBook NOW.

About the Author – Pat Geary
Expression Web 4.0
- What’s New
- Which Version Should I Get?
- Additional Resources
- Expression Web 4 Books and Videos
- Service Packs for Expression Web
  - Expression Web 4 Service Pack 1 (SP1)
  - Expression Web 4 Service Pack 2 (SP2)
User Interface – Changes to the User Interface
- Site management
- Task Panes now Panels
- Include Page Option
- Snapshot Panel
  - To activate Snapshot
  - SlapShot
- SuperPreview
  - SuperPreview Resources
Installing Expression Studio 4
- Licensing
- Download Links
- Installation
- Activating Expression Studio
- Installation and Activation Help
Setting Up Expression Web 4.0
- HTML Declaration
  - To add or change the DocType declaration in an existing page
- HTML 5 doctype and Intellisense
- Tools > Page Editor Options > General Tab
  - Spelling
  - Cut and Paste Options
  - Code View Options
- Tools > Page Editor Options > Code Formatting Tab
- Tools > Page Editor Options > CSS Tab
  - Only reuse classes with the prefix style’ option
- Tools > Page Editor Options > Authoring Tab
  - For New Documents:
  - EW 3.0 and 4.0 .htm bug
  - EW 4.0 .htm bug
  - Doctype and Secondary Schema
  - CSS Schema
- Tools > Page Editor Options > Intellisense Tab
Create New Website in Expression Web 4.0
- Create a One Page Website
Create a Blank Web Page
- Create a Blank Web Page
- Saving the Page
- Create an External Style Sheet (CSS)
- Attach the External Style Sheet to the Page
- Summary
Create a Webpage Layout in Expression Web
- What is a
  tag?
- Create the Layout
  - Style the tag
  - Add the Container
  - Add the masthead and style rules
  - Add the Top Navigation and style rules
  - Add and style the Columns
  - Add and style the Footer
- Adding Meta Tags
- Summary
Adding Horizontal Top Navigation to Webpage Layout
- Add and style the top menu
  - Create the menu list
  - To create or modify a hyperlink
  - Adding styles to the menu
- Converting Your Menus to Include Pages
  - Creating the include page
- Navigation Resources
- CSS Menu Resources
Adding Vertical Navigation to Webpage Layout
- Add and style the left side menu
  - Create the menu list
  - To create or modify a hyperlink
  - Adding styles to the menu
- Converting Your Menus to Include Pages
- Navigation Resources
- CSS Menu Resources
Validating Your Pages
- Compatibility Checker on Status Bar
- Status Bar
  - Compatibility Checker for Incompatible HTML
  - Invalid HTML Code
- Additional Resources on Validation
Creating Your Dynamic Web Template
- What is a Dynamic Web Template?
- Why it’s a good idea to use a DWT?
- Creating a Dynamic Web Template – DWT
What Is Search Engine Optimization – SEO?
- How Does Search Engine Optimization (SEO) Work?
- Basic Search Engine Optimization Techniques
  - Page Titles
  - Meta Tag for description
  - Meta Tag for keywords
  - File Names
  - Heading Tags
  - Alt Attribute
  - Title Attribute
- Content
- Summary
Using the Expression Web SEO Checker and Report
- What does the SEO Checker do?
- What the SEO Checker Does Not Do
- To generate an SEO report
  - To apply a filter to an SEO report
  - To remove a filter from an SEO report
  - Understanding the SEO Report
  - SEO panel buttons
- Problems Details and Fixes SEO Reports
  - The anchor text contains values that provide no search benefit
  - The description for the page is missing
  - Hyperlinks that point to a directory should end in a slash (/)
  - The tag contents are too short
  - The tag contents are not unique within the site </li> <li>The or <area> tag does not have an ‘alt’ attribute with text </li> <li>The <noscript> tag is missing </li> <li>This page contains no <h1> tag </li> </ul> </li> <li>Summary </li> <li>Additional SEO Resources </li> </ul> </li> <li>Working with Images in Expression Web <ul> <li>Importing Your Images </li> <li>Inserting Images into a Web Page <ul> <li>About the Picture Properties Dialog Box </li> </ul> </li> <li>Using Auto thumbnail <ul> <li>Check doctype declaration </li> <li>Set the Default Properties for thumbnails</li> </ul> </li> </ul> </li> <li>Working with Hyperlinks <ul> <li>Anchor Tags</li> <li>Bookmarks or Named Anchors (HTML anchors) <ul> <li>Add or Remove a Bookmark in Expression Web </li> <li>To create a bookmark </li> <li>To remove a bookmark </li> </ul> </li> <li>HTML Links – the target Attribute</li> <li>Picture hyperlinks</li> <li>To Create or modify a hyperlink</li> <li>Useful Tips</li> <li>Additional Resources</li> <li>Changing the Appearance of Hyperlinks <ul> <li>Hyperlink states</li> <li>CSS Pseudo-classes</li> <li>To change the appearance of hyperlinks</li> <li>Multiple Link Styles</li> </ul> </li> <li>Best Practices in Styling Hyperlinks</li> <li>Additional Resources</li> </ul> </li> <li>Publishing Your Web Site <ul> <li>To mark files that you do not want to publish</li> <li>Publish Current File</li> <li>Migrate Existing File Definitions to Expression Web</li> <li>Publishing Your Website </li> </ul> </li> <li>How to back up your local website on your hard drive <ul> <li>Back up your website using Expression Web 4.0</li> </ul> </li> <li>Expression Web 4.0 Add-ins <ul> <li>What is an Expression Web Add-in?</li> <li>How to install Add-ins?</li> <li>Expression Web Free Add-ins</li> <li>Expression Web Commercial Add-ins</li> </ul> </li> <li>Learning HTML – HyperText Markup Language <span style="color: #ff0000;"><strong>New Section</strong></span> <ul> <li>What is HTML? </li> <li>HTML Tags <ul> <li><body> tag </li> <li><div> tag </li> <li>paragraph <p> tag </li> <li>heading <h1> to <h6> tags </li> <li><ul> tag </li> <li><ol> tag </li> <li><li> tag </li> <li> tag </li> <li><a> tag</li> </ul> </li> <li>Summary </li> <li>Learning Resources <ul> <li>HTML Coding – Hypertext Markup Language </li> <li>XHTML – EXtensible HyperText Markup Language</li> </ul> </li> </ul> </li> <li>CSS Basics <span style="color: #ff0000;"><strong>New Section</strong></span> <ul> <li>What is CSS? </li> <li>Cascading Order </li> <li>Types of Styles <ul> <li>Element selectors </li> <li>Class Selectors </li> <li>ID selectors </li> <li>Inline styles</li> </ul> </li> </ul> </li> <li>How to Copy and Paste Text so the Code is Clean <span style="color: #ff0000;"><strong>New </strong></span></li> <li>Create and Style a Data Table <ul> <li>Create the Table</li> <li>Style an Already Created Data Table</li> <li>Points to Remember in Working with Tables</li> </ul> </li> <li>Table2Clipboard and Expression Web <ul> <li>Downloading and Installing Table2Clipboard</li> <li>Setting Table2Clipboard Options <ul> <li>Filter Attributes</li> </ul> </li> <li>Using Table2Clipboard</li> </ul> </li> </ul> <p>The revised version is also available from the <a title="Expression Gallery." href="http://gallery.expression.microsoft.com/ew4TutorialsEbook">Expression Gallery</a></p> <p>Download your FREE copy of <a title="Expression Web Tutorials 2nd edition- from Install to Publish and More." href="http://www.expression-web-tutorials.com/expression-web-4-ver2-2.zip">Expression Web Tutorials 2nd edition- from Install to Publish and More</a> NOW!</p> <p>Remember, the EBook is in pdf format so you will need the Acrobat Viewer to red and/or print it.</p> </article> <article> <h1>Mobile-Friendly Responsive Template</h1> <p>Patricia Geary — Fri, 27 Apr 2012 20:12:34 +0000</p> <p>Ian Haynes has just added this <a title="Mobile-Friendly Responsive Template." href="http://gallery.expression.microsoft.com/MobileTemplate">Mobile-Friendly Responsive Template</a> to the Expression Web Gallery. It is available for FREE download. The template is a ‘mobile friendly’ layout using HTML5 plus CSS3 and ‘responsive design’. It also has a ‘sticky footer’ that stays at the bottom of the browser window on pages with limited content.</p> <p>The layout is simple but Ian gives you suggestions for personalizing it to meet YOUR needs. Even though the template uses HTML5 and CSS3 it is backwards compatible and has been thorougly tested on the majority of desktop and mobile browsers, from IE6 upwards.</p> <p>You need to see the Readme section included BEFORE attempting to use the template. The template is for Intermediate to Advanced users of Expression Web.</p> <p>You can download the <a title="Mobile-Friendly Responsive Template." href="http://gallery.expression.microsoft.com/MobileTemplate">Mobile-Friendly Responsive Template</a> from the Microsoft Gallery.</p> <h2>Resources:</h2> <ul> <li><a title="Mobile website development." href="http://ew-resource.co.uk/mobile/">Mobile website development</a></li> <li><a title="Detecting Smartphones Using JavaScript." href="http://www.hand-interactive.com/resources/detect-mobile-javascript.htm">Detecting Smartphones Using JavaScript</a></li> <li><a title="Responsive Web Design." href="http://en.wikipedia.org/wiki/Responsive_Web_Design">Responsive Web Design</a></li> <li><a title="Responsive Design Test Bookmarklet." href="http://www.benjaminkeen.com/misc/bricss/">Responsive Design Test Bookmarklet</a></li> <li><a title="TestiPhone.com - iPhone Simulator." href="http://www.testiphone.com/">TestiPhone.com – iPhone Simulator</a> </li> </ul> <div id="attachment_1142" class="wp-caption alignnone" style="width: 310px"><a href="http://www.expression-web-tips.com/images/mobile-friendly-deskview.jpg"></a><p class="wp-caption-text">creenshot Mobile-Friendly Template Destop View</p></div> <p>Since I do not have an iphone or mobile phone, I used a test site to render the mobile-friendly template.</p> <div id="attachment_1148" class="wp-caption alignnone" style="width: 163px"><a href="http://www.expression-web-tips.com/images/mobile-friendly-mobileview.jpg"></a><p class="wp-caption-text">Screenshot of Iphone Simulation of Mobile-Friendly Templae.</p></div> </article> <article> <h1>15 Title Tag Optimization Guidelines For Usability and SEO</h1> <p>Patricia Geary — Thu, 19 Apr 2012 19:56:20 +0000</p> <p>I recently came across an article on the Usability Geek’s blog <a title="15 Title Tag Optimization Guidelines For Usability and SEO." href="%3Cp%3Ehttp:/usabilitygeek.com/15-title-tag-optimization-guidelines-for-usability-and-seo/%3C/p%3E">15 Title Tag Optimization Guidelines For Usability and SEO</a> that I thought might be of help in working on Search Engine Optimization (SEO) for your site.</p> <p>The <title> tag defines the title of the document and the <title> element is required in all HTML/XHTML documents. It should describe the content of your page in a concise manner. </p> <div id="attachment_1124" class="wp-caption alignnone" style="width: 310px"><a href="http://www.expression-web-tips.com/images/title-tag.jpg"></a><p class="wp-caption-text">Screenshot of <title> tag</p></div> <h2>Why is the title tag important?</h2> <p>The text content you place between the <title> tags is important for the following reasons”
    - Web browsers display the information within the tags as the label on the browser tab (newer browsers) or as title of the web page in the browser’s window title (older browsers.)
      Title displayed at top of browser window
      
      Title Tag displayed in tabs of browser
    - Search engines: As the clickable headline for listings on Search Engine Result Pages (SERPs)
      
      Title tag displayed as clickable link in search engine results.
    - Search engines use the title tag content to determine the topic of the web page. Search Engine spiders analyze the content of the page title and then translate the page topic.
    - Social bookmarking sites and Web browsers: To assign a default value to bookmarked web sites.
    - Your viewers use the content of the title tag to identify the web sites that are likely to contain the information they are searching for within the list of web sites on a SERP.
    - Viewers use the title to locate the tab in their web browser which contains the site they want to view.
    - Viewers use the title to find the web site they have bookmarked in their browser.
    - Viewers use the title info to determine whether a web site that others have bookmarked in a social bookmarking web site is worth checking out.
    The Do’s
    1. Place your keywords at the beginning as the search engines give more importance to the first words in the title tag than those used later.
    2. Use keyphrases instead of keywords
    3. Use modifiers like “cheap,” “reviews,” “free,” as many users will use them as part of their search term. Example: free CSS templates.
    4. Use numbers. Example: 10 free CSS templates rather than free CSS templates
    5. Separate your keywords with hyphens (-) or pipes (|) if you are a web designer, then the keyphrase “web-design” will associate you with search queries for “web design” and “webdesign”.
    6. Include Acronyms. Example: DWT for Dynamic Web Template
    7. Each and every page on your site should have a unique page title. The content of your title tags should reflect the content of the PAGE not the SITE!
    8. Best title naming convention for the homepage. Avoid The and Welcome
    9. Best title naming convention for other pages: Start the title with words or phrases that describe what the page is about then followed by the company name at the end of the title. NOTE: To my way of thinking, this would depend on the site – business or personal.
    The Don’ts
    1. Do not make the content in the title tag longer than 69 characters.
    2. Do not place too many keywords. “Keyword stuffing” as it is called can cause the search engines to penalize you.
    3. Do not use stop words such as “by”, “it” and “as”.
    4. Do not use a lot of commas.
    5. Do not use special characters.
    6. Do not overuse synonyms.
    Remember, a optimized title tag is just ONE part of the entire search engine optimization process. Visit Usability Geek to read 15 Title Tag Optimization Guidelines For Usability and SEO in its entirety.

Expression Web and FrontPage Shared Borders

Patricia Geary — Tue, 10 Apr 2012 00:32:34 +0000

Shared Borders was a feature of Microsoft FrontPage that allowed you to include duplicated content on all the pages of your site. You could edit the top, bottom, left, and/or right border in one location and have the change replicated throughout your site. The shared border feature was used for such things as navigation, copyright notices, your company logo, contact information to name a few. The shared borders surrounded the main content of the page and could be turned off if so desired.

Shared borders were deprecated in FrontPage 2003 and replaced by a dynamic web template (DWT) and include pages. The shared borders feature does NOT exist in Expression Web, but you can still edit existing pages with FrontPage shared borders applied. At least you could with Expression Web versions 1, 2, and 3. Expression Web 4.0 does NOT support shared borders and will destroy any of your websites that are using shared borders if you open that site in Expression Web. 4.0.

Fellow MVP, Ron Symonds, has written a detailed discussion on How Expression Web 4 treats Shared Borders. Before you open your shared border website in Expression Web, you need to read his discussion.

Better yet, remove the shared borders as one of the steps in migrating your FrontPage site to a more standards compliant website. You can either use FrontPage to remove the shared borders OR use a find and replace utility.

Resources:

Migrating from FrontPage to Expression Web by Pat Geary
Remove Shared Borders with FrontPage by Ron Symonds
Remove Shared Borders with a Find – Replace Utility by Ron Symonds

CSS3 vendor specific snippets for xWeb V4 SP2

Patricia Geary — Mon, 05 Mar 2012 19:41:58 +0000

Ian Haynes has just added some new and updated snippets to the Expression Web Gallery. The standard snippets in SP2 have styles that include some of the vendor-specific properties. You may find it more useful to have the style properties available as snippets so that you can add them to your own class style rules.

This collection of snippets gives the vendor-specific properties for several of the most useful CSS3 styles including box-radius and box-shadow

Note: CSS3 styles are NOT supported by all browsers so you should test them with your pages to make sure they degrade gracefully.

Download CSS3 vendor specific snippets for xWeb V4 SP2 from the Expression Gallery. Installation instructions are also available.

CSS3 Snippets

If you would like to download a template that uses some of these CSS3 style rules and experiment with it see Tor House Site Template.

Tor House Site Template

Patricia Geary — Thu, 16 Feb 2012 00:08:13 +0000

Tor House Site Template

ular corners. This template uses a fixed width layout.

The Tor House site template is based on one of the layouts created with a Dreamweaver Add-in – CSS Page Builder Magic. Unfortunately this is not an add-in that is available for Expression Web. There are NO images used to create the equal height column look or the rounded corners. The rounded corners and drop shadows will display as intended in newer modern browsers and will default gracefully when viewed in older browsers. The templates is offered as both a Dynamic Web Template package and as a zipped file that makes use of server side includes. Both packages contain on the pages you need for a small website with all the supporting files and folders.

See more details and download Tor House Personal Web Package which may be used with all versions of Expression Web.

The template is also available as a zipped file which makes use of server side includes.

Two New Expression Web Site Templates

Patricia Geary — Sun, 27 Nov 2011 20:45:59 +0000

We’re pleased to bring you two new templates for your web design needs. Both of the templates are offered FREE as Web Packages. Each contains the DWT (Dynamic Web Template) and external style sheet as well as images, and a series of pages for a small web site. You are free to rename the pages and/or create additional pages you might need. Both are two equal height columns at a fixed width of 1024x 768 resolution. The templates use a CSS based layout with no tables.

Daffodil Garden Site Template

Dandelion Meadow Site Template

Both the style sheet and the DWT are heavily commented. If you have questions, please feel free to use the Contact Form on the Expression Web Tutorials and Templates site. You can download either or both of the web packages from Expression Web Tutorials and Templates.

ENJOY!

New Fix for Licensing and Activation Issues with Expression Web 4

Patricia Geary — Fri, 04 Nov 2011 00:18:30 +0000

Microsoft has just released a fix for licensing and activation issues that crop up with Expression Web 4. Some of the symptoms of licensing and/or activation issues may include:

Expression Web 4 reverts to trial mode.
You receive a message that states that the product key is invalid.
The product key is not accepted during the Expression Web 4 installation process.
You receive a message that states that Expression Web 4 was already activated with the product key.

If you are experiencing any problems such as this, the fix Microsoft has released should resolve the issue. For additional details and to download the fix go to:

http://support.microsoft.com/default.aspx?scid=kb;en-US;2635101

To download the fix, click the “View and request hotfix downloads” hyperlink at the beginning of the article. You will first have to accept the Terms & Conditions BEFORE being directed to the download page.

Download link.

This fix is only for Expression Web 4. If you are encounter a licensing or activation issue with another Expression Studio product, you will need to open a support case with Microsoft to get that issue resolved. To open a support ticket with Microsoft see Forum FAQ and Guidelines – Start Here and scroll down to the 3rd bold-faced item which states, in part:

If you are having a problem with Expression Web activation or if the product will not accept your product key, you may have a corrupt license store. That problem often cannot be resolved without the assistance of Microsoft Consumer Technical Support. For these issues, you can open a case with us using the steps outlined above. There will be no charge for these cases. Using any other method to contact Microsoft will not get you to the right group. Please contact us using the method outlined above.

If you download the patch and you receive an error that Web_en.msi could not be located, please download the “FullFile” version of the fix and install it on top of your existing installation. This will upgrade your existing installation of Expression Web 4 to SP2a which includes the fix. See the download link listed above.

Content First Expression Web Site Templates

Patricia Geary — Thu, 20 Oct 2011 11:51:12 +0000

Pat Geary and Tina Clarke first brought you a series of twelve Expression Web Site Templates that you could add to your Expression Web program and have them available for your design projects. Next, they brought you a series of five Equal Height Site Templates that you could use in the same way. Now the two Expression Web MVP’s add a series of seven Content First Equal Height Site Templates FREE to the Expression Web Community.

Expression Web COntent First Site Templates

Put Your Most Important Content First

When you are building your website, it is important to optimize each page for the search engines. PART of that process is putting the important content first on the page. Each of the templates in this series does just that. The html code presents your main content first, then the side navigation, the footer, with the masthead and top navigation last in the code. By using floats and positioning, you masthead and top navigation display at the top of your page. Take some time to explore the site templates as well as some of the example sites created with them.

Site Template Layouts

The site templates are available as four different layouts:

one column with top navigation, header, and footer
two column with right sidebar, top navigation, header, and footer
two column with left sidebar, top navigation, header, and footer
three column with left and right sidebar, top navigation, header, and footer

With the exception of the three column layout, each of the others is available as a fluid width and a fixed width to 1024px. The three columns layout is available only as a fixed wdth to 1024 px wide. Each of the templates makes use of a background image to achieve the equal column look of the layout.

Each of the site template packages include the main pages for a small site including:

Home Page
About Page
Contact Us Page
Resource Page
Search Page (includes Google search box)
Site Map Page
Privacy Policy Page
Dynamic Web Template
External style sheet and all supporting images needed

You can rename the pages and create new pages using the DWT.

Problems Encountered

Because of some bugs in Expression Web 4, there are some display issues working in Design View with some of the templates. Each of the problems is explained and workarounds are offered. For this reason, the Content First Site Templates are for intermediate to advanced users of Expression Web.

Download the Templates

These Site Template are FREE and a gift to the Expression Web community. They will work with all versions of Expression Web. You may download them as either a web package that can be imported into Expression Web OR zipped files. Visit Content First Expression Web Site Templates to download any or all of the templates offered. You will find also find Instructions for Working with the Content FIrst Site Templates.

If you encounter problems working with the site templates, please let us know.Once you have download one of the Content First layouts and tweaked it with your own colors and graphics, send us the link to your site so we can include it as an example of what can be done with the layouts. ENJOY!

Expression Web Tutorials & Templates – A New Look

Patricia Geary — Fri, 30 Sep 2011 17:48:29 +0000

Tina Clarke and I have been working on a new set of templates to be available soon FREE to the Expression Web Community. As part of the testing process, I decided to use one of the new layouts to redo my main site, Expression Web Tutorials & Templates. I retained the spider web and the black and white color scheme, but made some changes. Can you tell what they are by looking at the source code?

Expression Web Tutorials & Templates new look.

Stop by soon for a visit! You can download a FREE ebook, Expression Web 4 Tutorials – From Install to Publish and More and choose one of the many Dynamic Web Templates to use on one of your sites. There are many tutorials on using Expression Web and lots of links and resources for Newbies to the program.

Watch for news on our latest project from Migrating from FrontPage to Expression Web!

Expression Web Tips

Expression Web 4 Tutorials 2nd Edition – from Install to Publish and More

Table of Contents

The Do’s

The Don’ts

Expression Web and FrontPage Shared Borders

CSS3 vendor specific snippets for xWeb V4 SP2

Tor House Site Template

Two New Expression Web Site Templates

New Fix for Licensing and Activation Issues with Expression Web 4

Content First Expression Web Site Templates

Put Your Most Important Content First

Site Template Layouts

Problems Encountered

Download the Templates

Expression Web Tutorials & Templates – A New Look