Expression Web DWT Ebook

Free Expression Web Dynamic Web Template Ebook V2.0 By Tina Clarke Microsoft MVP - Expression Web

How to make DWTs and prepare your site. NEW VERSION NOW AVAILABLE New

Do you want to spend less time adding new menus and content that appears on every page?
Would you like to be able to change your template in a few minutes?
Do you find the maintenance of your site tedious?

If so get my free Expression Web Dynamic Web Template Ebook and learn how to change your site into any easy chore today.

Here is a sample from the ebook.

Organising your web in preparation

The best method to prepare a site that did not previously use Dynamic web template is, I think, the following.

First you HAVE backed up your website haven't you?

Setting up Expression Web

For the methods I describe in this ebook it's essential you follow my Setting up Expression Web Ebook and set up EW to best help you design sites.

If you want to retain your

File name
Meta tags
Specific navigation

There really is only one way to do that and that's working on each page one at a time. There is something you can do at the same time though that will SAVE you time later on.

Saving time later on

When you open up a page you can check your

Title
Description
Keywords
Content

Your Title should be a phrase about the page that people will search for and the exact page title should be repeated in your main heading H1 tag, if you have not done this before now is a good time to do it.

TIP: You can control the size of the Heading tags via CSS. Do NOT use heading 1 tags to control the size of your headers. If you need the same size of font use your CSS file.

Your Description again should contain an EXACT repeat of your title whilst also including short descriptive sentences.

Your keywords should contain your main keywords and phrases.

Your content should contain your H1 tag which is your main heading and should not be used more than once usually. It should also contain subheadings which will be your H2 tags with short descriptive paragraphs or blocks of text which are not centered.

Centering text makes it harder to read because the starting position of each line changes, forcing the reader to work harder to find where each line begins to continue reading and can cause potential difficulties for persons with low-vision using screen enlargers. English and most European languages are read from left to right. Centered text is very hard to read and follow, because it's not how people normally read text. Only Headings or subheadings should be centred if necessary, to give emphasis to the heading.

At this point also you can check your spelling and run a report for broken hyperlinks, if you click the column of the file names you can sort the pages so that any broken hyperlinks for a page will show up altogether and you can check those hyperlinks for the page your working on, by selecting them and then right clicking with the mouse and choosing Verify.

You don't need to bother with Formatting as this should be taken care of with a CSS sheet (Two part article)

One Page at a time

Open up your site and start with the first file in your Folder List, open the page, now depending on what your old template consists of you will find your own way to do this, this is the basic method I use.

Includes

My template has includes which I use for navigation (Design Time Includes) and a main content that I want to save, the template consists of a main table. I want to gather what I want to save and place it above the old table. To position the cursor above the table put the cursor in the first cell of the table before any content and press Control + Enter.

I select my main content by positioning my cursor at the beginning of the content and holding down the left mouse button, I drag the mouse to the last character of my main content and then right click and press Cut. (Or use the keyboard shortcut CTRL + X or SHIFT + DELETE) I then position the cursor above the main content and right click then press Paste (or use the keyboard shortcut CTRL+ V or SHIFT + INSERT).

Next I want to gather my menu include as my menus are unique to only a few pages within each section and category and change as you move through the site, I can either select the content of the include that appears on the page or copy and paste the path to the include, this will remain the same as the new page files will have the same file name.

NOTE: You don't want to lose your existing standing (or page rank) within search engines by making a lot of new file names for your old pages, if you do want to change file names at this point, make sure you use a 301 redirect for the old file to the new file.

Double click on the Design Time Include and the 'Include Page Properties' Dialog box will appear select the include path that shows and right click and press Copy, (or use the keyboard shortcut CTRL + C or CTRL + INSERT ) paste this just below your main content that you previously pasted just above the old table.

Select everything below the main content and the include path you have just copied and pasted and then press delete.

Next select everything on the page Edit - Select All (Or use the keyboard shortcut Control + A) and go to Format | Remove Formatting (Or use the keyboard shortcut Control + Shift + Z) this will clear out most old formatting and you won't get anything transferring over to the new template and interfering with any new styles or CSS sheets you may have made, this is a factor in my own case. However not all formatting is always removed by the 'Remove Formatting' feature.

Removing Formatting

It pays to know a little html at this point, however don't despair if you don't. This is where EW is the most helpful to you. Remember where I told you at the beginning of this page to set up Expression Web before you started? If you did EW will now give you lots of indications that your coding is incorrect.

Clear Styles

Next go to the Apply Styles Task Pane and you will see at the top Clear Styles, select the whole page by using the keyboard Control + A or Edit | Select All, then press 'Clear Styles'. This will remove all inline styles from your page.

Code Errors Detected

Click Split View so you can see the wiggly lines under suspect coding. To find the first one 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. Or if it contains code that is incompatible with the doctype you have used, the status bar will display the 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.

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 which gives you a solution about that instance of code. More Details about the General Tab in Page Editor Options

If you require help at this point your welcome to join our Expression Web Group

Shared Borders

If you have shared borders, now is a good time to scrap them and use Design time Include pages for menu's this can be done when you're designing your new DWT. This gives you much more control over your navigation and allows you in-depth menus you could not use with a shared border and navigation web bot.

To remove them globally simply turn them off firstly in FrontPage then move back to Expression Web, after saving any other content than the navigation bots. Or you can just save your content and wipe the rest of the page of content, then go to split view and remove the shared border meta tag.

For SEO, accessibility and usability purposes you should always maintain a text menu if you use a graphic or JavaScript based menu. If you are using a JavaScript menu when you apply such to a site in a shared border or Design Time Include you need to include some of the code within the actual page, this makes for some time consuming effort when you want to delete or add content to the menu, as you have to go to every page to make the changes.

Though you can use an external JavaScript sheet, there is a FrontPage Add on that works this all out for you called All Web Menus. At this time it is not available for Expression Web however it's not really necessary as it can be used as a third party, the best method is to just attach it using the all web menu interface to your dwt.

However now with a DWT you can just insert the menu coding into the template and it will be applied to each page you can make any changes on the dwt and then apply once more throughout the site, very neat.

Do the above preparation for each page on your old look site that you want to change to the dwt new look.

NOTE: You only have to do this once, that's why I suggest revamping your content as your doing each page it will save you time later on.

Now you have prepared your site for implementation of the dwt.