Expression Web Tips

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

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 <!DOCTYPE> 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 <div> tag?
- Create the Layout
  - Style the <body> 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 <meta name="keywords"> tag contents are too short
  - The <title> tag contents are not unique within the site
  - The <img> or <area> tag does not have an ‘alt’ attribute with text
  - The <noscript> tag is missing
  - This page contains no <h1> tag
- Summary
- Additional SEO Resources
Working with Images in Expression Web
- Importing Your Images
- Inserting Images into a Web Page
  - About the Picture Properties Dialog Box
- Using Auto thumbnail
  - Check doctype declaration
  - Set the Default Properties for thumbnails
Working with Hyperlinks
- Anchor Tags
- Bookmarks or Named Anchors (HTML anchors)
  - Add or Remove a Bookmark in Expression Web
  - To create a bookmark
  - To remove a bookmark
- HTML Links – the target Attribute
- Picture hyperlinks
- To Create or modify a hyperlink
- Useful Tips
- Additional Resources
- Changing the Appearance of Hyperlinks
  - Hyperlink states
  - CSS Pseudo-classes
  - To change the appearance of hyperlinks
  - Multiple Link Styles
- Best Practices in Styling Hyperlinks
- Additional Resources
Publishing Your Web Site
- To mark files that you do not want to publish
- Publish Current File
- Migrate Existing File Definitions to Expression Web
- Publishing Your Website
How to back up your local website on your hard drive
- Back up your website using Expression Web 4.0
Expression Web 4.0 Add-ins
- What is an Expression Web Add-in?
- How to install Add-ins?
- Expression Web Free Add-ins
- Expression Web Commercial Add-ins
Learning HTML – HyperText Markup Language New Section
- What is HTML?
- HTML Tags
  - <body> tag
  - <div> tag
  - paragraph <p> tag
  - heading <h1> to <h6> tags
  - <ul> tag
  - <ol> tag
  - <li> tag
  - <img> tag
  - <a> tag
- Summary
- Learning Resources
  - HTML Coding – Hypertext Markup Language
  - XHTML – EXtensible HyperText Markup Language
CSS Basics New Section
- What is CSS?
- Cascading Order
- Types of Styles
  - Element selectors
  - Class Selectors
  - ID selectors
  - Inline styles
How to Copy and Paste Text so the Code is Clean New
Create and Style a Data Table
- Create the Table
- Style an Already Created Data Table
- Points to Remember in Working with Tables
Table2Clipboard and Expression Web
- Downloading and Installing Table2Clipboard
- Setting Table2Clipboard Options
  - Filter Attributes
- Using Table2Clipboard

The revised version is also available from the Expression Gallery

Download your FREE copy of Expression Web Tutorials 2nd edition- from Install to Publish and More NOW!

Remember, the EBook is in pdf format so you will need the Acrobat Viewer to red and/or print it.

Mobile-Friendly Responsive Template

Ian Haynes has just added this Mobile-Friendly Responsive Template 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.

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.

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.

You can download the Mobile-Friendly Responsive Template from the Microsoft Gallery.

Resources:

creenshot Mobile-Friendly Template Destop View

Since I do not have an iphone or mobile phone, I used a test site to render the mobile-friendly template.

Screenshot of Iphone Simulation of Mobile-Friendly Templae.

15 Title Tag Optimization Guidelines For Usability and SEO

I recently came across an article on the Usability Geek’s blog 15 Title Tag Optimization Guidelines For Usability and SEO that I thought might be of help in working on Search Engine Optimization (SEO) for your site.

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.

Screenshot of <title> tag

Why is the title tag important?

The text content you place between the <title> </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

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.
Use keyphrases instead of keywords
Use modifiers like “cheap,” “reviews,” “free,” as many users will use them as part of their search term. Example: free CSS templates.
Use numbers. Example: 10 free CSS templates rather than free CSS templates
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”.
Include Acronyms. Example: DWT for Dynamic Web Template
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!
Best title naming convention for the homepage. Avoid The and Welcome
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

Do not make the content in the title tag longer than 69 characters.
Do not place too many keywords. “Keyword stuffing” as it is called can cause the search engines to penalize you.
Do not use stop words such as “by”, “it” and “as”.
Do not use a lot of commas.
Do not use special characters.
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

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

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.

Expression Web Tips

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

Table of Contents

Mobile-Friendly Responsive Template

Resources:

15 Title Tag Optimization Guidelines For Usability and SEO

Why is the title tag important?

The Do’s

The Don’ts

Expression Web and FrontPage Shared Borders

CSS3 vendor specific snippets for xWeb V4 SP2

Expression Web Tips

Categories

Expression Web Resources

Archives

Administration