Expression® Web Design

Replace Options

Tuesday, March 18, 2008

Microsoft Expression Web offers users a variety of ways to Find and Replace text and source code in your web page.  You might have even seen this dialog box in the past when you were trying to locate some text.  To get to to this dialog box, you can hit CNTL-H or go to Edit - Replace.

This dialog box will offer you a multitude of options.  You can find and replace HTML source code or the text the user sees in the browser.

Find What

In this text area, you can enter HTML source code, or the text you see as in the Design mode.  The arrow pointing to the right will give you some options like any single character or the beginning of the line.   The arrow pointing down will give you some of the previous code / text that you replaced earlier.

Replace With

In this text area, you can enter the HTML source code or text that you want to be seen.  You will always want to be careful with this and consider making a back-up copy of your web site.

Search Options

The search options can vary depending on what you have selected previously. 

• You can choose All Pages which will make changes in your entire web site.
• You can choose Open Page(s) which will make changes in all your pages you have opened - these pages are found near the top of your page you are working on.
  
• If you have selected pages from your Folder List, this option will be available to you.
• Current Page is the page that you working on when you opened the Find and Replace dialog box.

Advanced

Here you can choose even more specifics (i.e. match case). This might be important if you have mixed case on your web site.

Ignore whitespace differences would come in handy when you are replacing chunks of code.  For example, if you hit the tab key when entering some text while in code view, you will have some extra spaces.  Ignore whitespace differences will help with this.

Find in source code will help you once again when you are replacing HTML source code, not just the text the users see in the browser.

Of course, before doing anything like this, create a backup copy of your web site.  If you are doing just one page, you can easily create a copy of that as well.

File Includes

When working with FrontPage, you had the option of using FrontPage Page Includes.  This made it very easy to have the same content on all your web pages.  You would go to Insert - Web Component.  In the Component Type on the left, you would choose Advance Controls.  Now in the right side of the dialog box, you see HTML.  Choose this and Finish.  Now browse your FrontPage web site for the HTML you would like to include.  This was one of the very few FrontPage components that was handled by FrontPage and locally and did not rely on FrontPage Server Extensions (FPSE).

FrontPage also had an option called shared borders.  This component relied heavily on FrontPage Server Extensions and would be corrupted very easily; through ten shared borders.  Some people relied on these since they were fairly simple to use.

FrontPage also offered a Dynamic Web Template (DWT) that was managed locally by FrontPage.  You created a "template" via FrontPage, made some regions editable and uneditable.  The editable regions were then able to be changed on any new pages you attached to the template.

The real benefit was that you were able to see what the web page would look like before publishing it on the web server.

Another method was frames but these just even had more problems, especially with search engines.  And a lot of web developers new to the HTML world had problems usually with it.  One of the other problems was with the search engine results.  If the search engine directed the user to the specific link in your web site, then users would not see any other frame (possibly your navigation).  See a video tutorial on what might happen if you use frames.

File Includes

However, each of these methods had it's pitfalls, but there is another solution and some of the Expression Web users are relying on these methods now.  Files are actually included by the server through a process.  You have a variety of options to use.

Server Side Includes

The first one we will look at is Server Side Includes (SSI).  SSI can be used usually on all platforms (*NIX and Windows) with an .shtml or .shtm file extension.  You use this directive:

<!--#include file="includes/nav.html" -->

This will locate the nav.html in your includes folder and insert it into your web page before being rendered in the browser.  There is also a way to have an *NIX server parse .html files as an .shtml file, which would help in not renaming the files.  You can see an example of a web site using Server Side Includes.

ASP Server Includes

Active Server Pages (ASP) is usually ran on a server with some version of Windows installed.  You can insert the page by adding

<!--#include file="includes/nav.html" -->

to your code.  This is using a relative path to your nav.html file.  You can also use a virtual path

<!--#include virtual="/includes/nav.html" -->

This comes in handy on your 404 Error Page depending on how many folders you have, where the user might have come to get your 404 Error Page, and how the server actually handles the page.  You can also download an example of a web site using ASP Includes.

PHP Server Includes

PHP Server Side Includes will come in very handy if you are using PHP to build your web site. 

<?php include("includes/nav.html"); ?>

Is the directive you can use to include you nav.html file in your PHP file.  You can download an example site using PHP includes.

ASP.NET File Include

A lot of ASP users are attempting to migrate over to .NET, some with great success and some with very little success.  And then you have the few (like me) that would like to still see ASP supported forever.  But if you find yourself where you are using .NET and need to include a file:

<%
Response.WriteFile ("includes/nav.html") 
%>

JavaScript Includes

This is one that I do not recommend.  You need to convert your HTML into JavaScript for it to be included into your HTML page.  Plus, if the user does not have JavaScript enabled on the browser, the included content might not show.  Search engines might also have a problem reading the information in the JavaScript.  The one good thing about this is you do not need to worry about re-naming you .html files to .shtml or .asp. 

For example, if you HTML code was something:

| <a href="/default.asp">Home</a> | <a href="/about.asp">About</a> | 
<a href="/contact.asp">Contact</a> |

Then the JavaScript file would look something like

<!-- 
document.writeln("| <a href=\"/default.asp\">Home</a> | 
<a href=\"/about.asp\">About</a> 
| <a href=\"/contact.asp\">Contact</a> |"); 
//-->

To include this file into your HTML web page, you would add:

<script src="includes/nav.js"></script>

This even sounds more complicated than the others as well.

Some of the Differences between FrontPage Includes and Server Side Includes

As discussed previously in FrontPage Includes, users were able to actually see the included content.  However, if it is a server side include, users were unable to see this content and sometimes it was more difficult to work with.

In FrontPage Includes, FrontPage required the page that was going to be included to have a "complete" HTML page, for example, the page needed to have the <html>, <head>, and <body> elements to be displayed properly. 

In a Server Side Include (SSI, ASP, PHP, .NET), you only want to include the code that you want to be seen.  For example, you would only have:

| <a href="/default.asp">Home</a> | <a href="/about.asp">About</a> | 
<a href="/contact.asp">Contact</a> |

in the HTML page.  If you include the <html>, <head>, and <body> elements, chances are it will still display properly, but some browsers might not show everything properly.

Expression Web will still show the FrontPage Page Includes since the Includes are handled via the program.  Now if you wanted to change to some type of server side includes, you can do a Find - Replace in the Source code.  If you do this, create a backup copy of your web site before changing this.  This will help you in case something goes wrong. 

Copying a Page Easily

There are some times when you might not need to create an entire backup of your Expression Web Site.  You have the need to only create a copy of one page.

There are several ways to do this, but the easiest way is to highlight the page with the mouse, Press CNTL-C (to copy), and then Press CNTL-V (paste).  This will create a copy of the web page with _copy(1) in the file name.

If you need more, check out Create a Backup Copy of Your Website if you need more or all pages and then a 30-second video tutorial on copying a web page easily.

Images for your Web Site

Tuesday, March 11, 2008

While developing your web site, you might come across the need for some images.  There are several ways for you to get these images - from taking the photos yourself, designing an image, having the client giving you the images, or retrieving the images from a web site.

Types of Images

When you are searching on your favorite search engine for images, there will be many sites that come up and you will see a few terms: free, royalty free, rights managed.  Media is offered to users usually at some type of price.  Some image / video / audio files are managed in a way to make sure the user who created that file will be paid accordingly.

Free Images

With this type of offering, you can download the image from the company / web site at no charge.  You should not ever have to pay a fee for this file, no matter how many times you use the image.

Each web site will have a legal or terms of conditions web page.  Always read this page thoroughly before using any of the images.

Royalty Free Images

With this type of agreement, you can use the image (or possibly a video file) for commercial use at one specific charge, no matter your audience.  This fee is usually paid once to the company you purchased the image / video / audio file.

As stated above, review the terms of the web site that you purchased the file from.  This will usually tell you how you can use the image (maybe a certain number of web sites, etc).  If you have any questions, always contact the company.  It would be better for you if you e-mailed said company.  This way, you have written proof from the company in case anything happens.  You always want to make sure you are protected.

Rights Managed Images

Another term you might see is rights managed.  This basically means that you need to tell the company how the image is going to be used.  And then the price is based on that use.

For example, if you were going to use the image in a small community newsletter that goes to 400 people, the price might be $1,000.00.  However, if you have a newsletter that is sent out to four million people, the price for the image would be increased substantially.

Web Sites that Have Free Images

stock.xchng: This is a web site that is usually mentioned when someone asks for photographs or images for a website.  Their meta description says:

stock photography community - browse our huge gallery for high quality stock photos or share yours with others

Before downloading and using their images, you will want to review their Legal Information to make sure you are in compliance.  It seems they make it pretty easy for users to download and use their images.

Free Picture Click: This web site offers very few images unfortunately consisting mainly of a few animals (giraffes, elephants, penguins, sea lions, horses, zebras) and then a few pictures of some flowers and sunsets.  I won't bother you with their meta description either.  But you never know - you might find one or two images that will help you with a web site or two.

Web Sites that Have Royalty Free Images

Stock Photography: I have never used this site before.  In their meta description:

Search our royalty free stock images and photos or browse a giant selection of stock photography. Purchase royalty free stock photos at iStockphoto.com

Reviewing their overview, you can purchase credits to use the image on your web site.  You should also review their content license agreement before signing up.

STOCKXPERT:  This is another image web site that I have not used.  Looking at their introduction page, they seem very reasonable in their costs.  Their meta description says:

Looking for high quality stock photos? Want to sell your work? Go no further: Stockxpert is the place to buy and sell stock images & Footage!

This might even be a good place for amateur and profession photographers to sell their images easily.  And as usual, before signing up, review their Legal Information.

Dreamstime:  This is one that I have used before.   They have some unique images I think.  And they made it very easy to view the images and search for the ones that I needed.  Their description is:

Stock photography community providing high quality stock photos and stock images. Free photos added weekly.

They even offer some free images.  This is one of the web sites I would recommend if you needed images.  And check out their Terms and Conditions.

Corbis:  This web site will allow you to search between royalty free and rights managed images.  This web site seems to have perhaps a higher price than most, but the images they provide are fantastic.  Their meta description says:

Millions of images online, featuring the finest in historical, fine art, business, technology, celebrity, travel, sports and nature photography for advertising, publishing and multimedia design.

Some have been known to say that Corbis is one of the better web sites that provide images of a higher caliber.

Inmagine:  This web site boast the "world's largest premium royalty-free collection" with over 2.6 million images.  Even their meta description says:

The best royalty free stock photography images under one roof. More than 2,600,000 stock photos ,images, photographs and pictures for immediate purchased. Download the whole CD anytime. See the difference.

If you wish to view their images, you should create an account.  This will allow you to view the images without a watermark.

Getty Images:  This website is probably very well known.  It has been around for years and actually just sold for over $2 billion.  Getty Images have also been known to pursue users who put their images on a web site without proper licensing.   Their meta description

For Digital stock photos and on-line stock photos - Getty Images is the leading provider of creative and editorial imagery and film to communications professionals around the world. Our visual content appears each day in newspapers, magazines, advertising, films, television, books and websites

They do not seem to allow you to view their images unless you create an account.  Once your account is created, you might even receive a phone call from them within a week.

FreeFoto.com:  The first thing I did notice about this site is that it shows exactly how many images, sections, and categories are in their system. Their meta description

FreeFoto.com is the largest collections of free photographs for non-commercial use on the Internet.

While everything says free, I did see a price listed on their web site so that is why I listed the web site here.  I do not recommend this web site though, because my browser told me it had blocked 14 pop-up windows.

Thought Equity: In this web site, you can buy video clips and then get some images for free.  Their meta description

Royalty Free stock footage and Rights Managed stock footage from Sony Pictures, HBO, NBC News, NCAA, National Geographic and more--for a new generation of digital storyteller.

seems to suggest that their images comes from some very well known companies.

EZ Royalty Free:  At first glance, you might think this is a blog and not a web site that offers you images.  They do not have a meta description unfortunately to list.  Some of their links do not work and I did not see a legal statement on their page.  I saw an information link but I did not bother to click on that link.  This is another web site that I would not recommend to users.

Feel free to post any other web sites that offer images (free, royalty free, rights managed) to help to add this list, since it probably is ever growing.  Even if the web site is Free Picture Click with just a few images let others know about them.  You never know what might help a webmaster in developing a web site.

Also keep in mind that if you are on a *NIX server, file names are case sensitive - meaning image.JPG is not the same as image.jpg. On a Windows server, it does not matter.

Expression Web 2 Beta

Just in case you have not heard, Microsoft is releasing the fully functional Beta version of Expression Web 2.0.  Some of the new features that you might see in the version are:

• PHP
• Byte order mark options
• Silverlight 1.0
• Flash and Windows Media
• Photoshop Import
• ASP.NET AJAX
• Custom ASP.NET controls
• ASP.NET data controls
• FTP publishing
• CSS
• HTML file extension
• Alphabetized HTML attribute

Some of these features your might think are already available in Expression Web 1.0, like FTP.  But now, you are able to save your FTP username and password.  With the HTML file extension, you can now set Expression Web 2.0 to actually save your files as .html or .htm - your choice!

Before you download this, make sure you have the Microsoft .NET Framework 3.5 installed. If not, download it now.

The Microsoft Expression Web 2.0 Beta will be available for download for a couple of months and the program will run on your computer until 1 Jul 2008.

Managing Your Style Sheet

Thursday, March 06, 2008

Once you created your style sheet, whether or not you relied on Expression Web, you will need to manage the style sheet.  Managing your style sheet with Expression Web can be pretty easy once you get the hang of it.

By now, you probably already have your Manage Styles Task Pane.  If not, go to Task Pane - Manage Styles.  Now you should see this Task Pane probably in the lower right hand corner of Expression Web.

Once this is done, you will see the elements in your style sheet.  The style sheet can be is now ready to be updated from the Manage Styles Task Pane.

Add a Property to an HTML Element

Reviewing your Manage Styles Task Pane, locate the HTML element that you would like to possibly change.  Right Click on that element and choose Modify Style.  The Modify Style dialog box will appear and here you can change the font style or color, change the background, or add a border if application.

Expression Web will help create the proper syntax for you in the style sheet without you knowing anythig about styles. 

Moving Styles

You can also (left) click on the HTML element in the Manage Styles Task Pane and move the style from the top to the bottom or to the middle.

Add a New Style to an HTML Element

You can add a new style to the HTML element if needed. Right click on one of the HTML elements, and choose New Style.

In the New Style dialog box, the first option you should see is Selector.  Here you should be able to see all the HTML elements that are found in an HTML page. You can choose an HTML element, let's say h1 (to define all your <h1> elements.

Now in the option below you should see define in. Here your options are Existing Style Sheet, Current Page, or New Style Sheet.  You should always keep your styles in one page (unless of course there is a reason to have them in other pages).   In this example (since we came in from an HTML page), we will choose Existing Style Sheet.  If we had a CSS page open, we would choose Current Page.

To the right, you should see URL.  In the text box, you should see the name of your style sheet.

Now look at the Category.  You will see a few things like Font, Block, Background, Border, Position, Layout, List, Table.  In here, you can set the Font Family of your <h1> element if you do not want it to be the same as your other text.  You can also set the font size, and color.

Make sure to keep an eye on the bottom of the New Style dialog box.  You will see a Preview and and Description.  The Preview will show you how the text, background, border (if applicable), etc will look.  The Description will show you what is going to be added to your style sheet.  By taking a look at the Description, this might help you learn CSS some.

And as usual, take a look at the video tutorial in managing your style sheet with Expression Web.

Choosing a DOCTYPE

Tuesday, March 04, 2008

While using Microsoft FrontPage, you might have never even thought about using a DOCTYPE or even heard of this "declaration".  Now though, you might have seen this a time or two if you have looked at the source code once you created a new web page with Expression Web.  Instead of seeing something like

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

</body>

</html>

you might have seen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body>

</body>

</html>

While it may appear that Expression Web is adding some unwanted code, an all too familiar problem with FrontPage, the declaration of a DOCTYPE is an essential component of compliant web pages.  Actually though, if you are one of those type of people that validates your code, then you probably will appreciate this "extra" piece code.

You have a few DOCTYPEs to choose from as you can see from the Recommended List of DTDs. 

So which one to choose?  And why should I choose one over the other?  And is the latest DOCTYPE the best one to use?  Does Expression Web add the correct DOCTYPE?  Should I even both with a DOCTYPE if I am not going to validate the code?

Those are very good questions.  Some of these questions have been "pondered" on numerous message boards in the past by a lot of individuals giving very good reasons it seems to use one over the other.  For a great article, check out Fix your Site with the Right DOCTYPE.  This will answer some of the questions above.  If you have more questions on which DOCTYPE to use or why, please feel free to ask the professionals at International Web Developers Network.

For the most part, HTML 4.01 DTD will satisfy a lot of the FrontPage / Expression Web users.  And Expression Web will put in the proper DTD code for you when you have decided on which one to use.

Choosing a DOCTYPE

To have Expression Web place the proper code in your web page, Tools - Page Editor Options. In the Authoring tab, you will see a section labels Doctype and Secondary Schema. Under Document Type Declaration, choose HTML 4.01 Transitional and hit OK.  (Video tutorial on Choosing the DOCTYPE in Expression Web)

Now in all new web pages created with Expression Web, you will see

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

at the top of your source code.

As the terminology implies, "loose" (or transitional) will be a bit easier to validate than "strict".  The validator will give you a little bit of latitude.  Whatever you choose, Expression Web will try to produce source code that complies with the standards.  You will, of course, find problems from time to time but you will see more problems if you do not choose a DOCTYPE, especially in some versions of Microsoft Internet Explorer. 

As the article from A List Apart (Fix Your Site With the Right DOCTYPE!) mentions, some Internet browsers will display your web page in quirks mode if a DOCTYPE is not used.

Amazon also has a few HTML Books that you might find very informative as well.  Some people like to be able to read books and most HTML Books will give you the basics you need to know to help you huild and maintain your Expression Web site.

How to Create a Style Sheet

Tuesday, February 26, 2008

You might have seen a reference to something called CSS in the past.  CSS stands for Cascading Style Sheet.  Basically, a style sheet is a simple way to help maintain your website.  The style sheet can help describe the way you would like your content displayed on the screen.  It can even help describe the way that your content should be printed.  A style sheet can help you present your content with consistency on all your pages without the need of a lot of the HTML attributes.  The style sheet helps you separate structure from design.  The styles are all set in one .css file that can be changed at any time and those changes will appear on all pages the style sheet is attached to.

Creating a style sheet with Expression Web can be very easy.  Just go to File - New.  There should be another box that opens and you will choose CSS.  This will open a blank page, with basics (<html>, <head>, <body>, etc) and DOCTYPE in the source code.

Adding Styles to your Style Sheet

Now you need to see if you have your Manage Styles Task Pane available.  This is usually located in the lower right hand of Expression Web.  If not, simply go to Task Panes - Manage Styles.  Now you should see the task pane in the lower right hand corner of the program.

The New Style should be activated since you have a new (style sheet) opened.  Click on New Style to open the New Style dialog box.

In the upper left hand corner of the New Style dialog box, you will see Selector and you have an option to enter a property or in the drop down, you are able to choose some default properties, for example body.  If you choose body, you can now select the default styles for your font, background information, etc.

Setting a Property

Let's say that you wish your background color to be black.  So in the Selector field, scroll down until you locate body.

Now in the Category area, highlight background.  This will help you create properties for your background.

Chances are, you might want to apply a color to your background, even if it is white.  Right now, let's assume you are wanting the background to be black.  Once the background property has been chosen, you should be able to choose the blackground-color.

Preview

Now you can choose the font color, let's say white.  While all of this is happening, Expression Web will be showing you a preview of your chosen properties.  This will help you visually to make sure you have chose the correct values.

Description

Under the Preview area, you will see another place that basically will show you the CSS code that is being created by Expression Web.  Make sure to watch this area when you are applying values to properties.  This will hopefully help you understand CSS a bit more.

A Bit More Information on CSS

One of the greatest things about CSS is the ability to easily change your design all in one simple page.

For example, we decided that the background color for the website was going to be white.  Perhaps later (after ten pages are completed), you decide that you want a light tan background.  You can change this very easily in the style sheet and it is shown immediately on all the web pages attached to the the style sheet.  We will go over making changes to your style sheet later.

And of course, you can watch a video tutorial of creating a style sheet.

Add Rotating Ads to Your Website

Tuesday, January 22, 2008

By now, you have probably heard of .NET in some way, shape, or form.  And maybe now you are saving your pages with an aspx extension.  This will allow you to use the AdRotator web server control that Expression Web has in its toolbox.   As usual, you can view a video tutorial on adding the ad rotator.

Create the XML File

This XML file will have a few fields in it: ImageUrl, NavigateUrl, and AlternateText.  It is easily created in Expression Web. Go to File - New - Page.  In this dialog box, choose XML.  A new page will open and you will see something like <?xml version="1.0" encoding="utf-8" ?> in the source code. 

Now, you will create the <Advertisement> element.  In this you will add the properties above.  Each advertiser will have their own <ad> element.  In each <ad> element, you will have the ImageUrl, NavigateUrl, and AlternateText.  It will look something like:

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>http://www.milehighmerchantaccount.com/images/
first-data-logo.gif</ImageUrl>
<NavigateUrl>http://www.milehighmerchantaccount.com/</NavigateUrl>
<AlternateText>Accept Credit Cards</AlternateText>
</Ad>

<Ad>
<ImageUrl>http://www.loudvoicesystem.com/images/voice.gif</ImageUrl>
<NavigateUrl>http://www.loudvoicesystem.com/</NavigateUrl>
<AlternateText>Toll-Free Virtual Offices</AlternateText>
</Ad>

<Ad>
<ImageUrl>http://www.loudfax.com/images/logo.gif</ImageUrl>
<NavigateUrl>http://www.loudfax.com/</NavigateUrl>
<AlternateText>Toll Free Fax Numbers</AlternateText>
</Ad>
</Advertisements>

You can see an the XML example (text example) that is running the Ad Rotator example.

Insert the .NET AdRotator

For this, make sure that your Toolbox Task Pane is showing.  You can go to Task Panes - Toolbox to make sure this is checked.  You should see this somewhere probably on the right.  Now scroll down until you see ASP.NET Controls.  (You can also go to Insert - ASP.NET Controls - More ASP.NET Controls.)  You should see AdRotator.  Drag this over to the location you would like the ads to show up.

Now go to your saved .NET page and look under the Tag Properties Task Pane, scroll down until you see behavior under the tag properties. In the AdvertisementFile, enter the XML file name that you wish to use to manage the ads.

Hopefully the video tutorial will help you out on this one.

Create a Hyperlink

Wednesday, January 09, 2008

To create a hyperlink in Expression Web, highlight the text you wish users to see as a hyperlink.  Now you can either hit CNTL-K, hit ALT -> I - > I, or go to Insert -> Hyperlink.  Now the Hyperlink Properties dialog box will be seen.  You can locate the file in your Expression Website that you wish to link to and this file can have pretty much any extension (asp, htm, html, shtm, shtml, php, phtm, phtml, jpg, gif, aspx, gif, zip, pdf, etc.) or you can enter the URL enter the address text box.

In the source code, you will see something like

<a href="aboutus.html">About Us</a>

There are a few attributes that you could add to your anchor element (hyperlink) besides the href.

Open a New Window

The easiest way to have the hyperlink open in a new window is to hit the Target button while you are in the Hyperlink Properties.  While you are in this window, you can choose New Window.  This will add another attribute to the anchor (hyperlink).  You should see something like

target="_blank"

in your source code.  This code will validate if you are using the transitional DOCTYPEs.  However, if you are using strict DTDs, you might consider looking at How to Make a Link Open into a New Page for ways to have your hyperlink open in a new window and still have valid code.

Linking to a PDF or Other File

At times, you might want to link to a file that is a PDF or other file type.  If this file in your Expression Website, you can locate the file with your Hyperlink Properties and choose it just like you would an HTML file. 

In the source code, you will see something like

<a href="pdf/test.pdf">Our PDF</a>

And this will link to PDF file.  The user will need Adobe Reader to view the PDF, which can be downloaded at no charge.

Customizing the Toolbar

Tuesday, January 08, 2008

Expression Web offers a way for users to customize their toolbar.  A toolbar is basically the icons that help you activate a certain feature in the program, for example saving the page you are working on.  You can easily add some toolbars to your Expression Web program by right clicking in the area near the toolbar.  This should bring up another window with these eleven toolbars:

• Standard
• Formatting
• Code View
• Common
• Dynamic Web Template
• Master Page
• Pictures
• Positioning
• Style
• Style Applications
• Table

These toolbars come with some pre-set icons that will be added to your Expression Web page.  For example, the default Style toolbar for Expression Web will allow you to create new styles, apply a class or ID (of a style sheet), or attach a style sheet to the page you are working on. 

These icons come in handy if you use some of the same functions over and over again.  You can easily customize your Expression Web with the functions that frequently use to help save you some time. 

If you are having a problem customizing the toolbar on Expression Web, please see the video tutorial.

Adding an Image

Saturday, January 05, 2008

Images are adding to web site for various reasons - to add some entertainment to your web site; to help show other users how to do something; to show users how you looked on that special night, etc.  Some says pictures are worth a thousand words.  Adding an image to your web site might not add a thousand words in regards to search engines, but they will help users understand more and should improve your web site.

There are numerous ways to add an image to your website.  One way is to drag the image from the folder list on the left to the location in your web page.  This is usually the easiest way. 

alt attribute

In Expression Web, when you add an image, you get a dialog box that says "Accessibility Properties".  Expression Web wants to help you enter the required "alt" attribute to the image element.  This alt attribute should help describe the picture some.  It helps user who might not be able to see the image.  These users might have screen readers installed and the screen reader will read the alt text that you enter.  Some users might abuse this alt text for search engine purposes.  Remember, this is not the primary focus of the alt attribute.   You should be adding images that help to add to your web site and use the alt attribute accordingly.

If you have questions on how to use the alt attribute, please check out the International Web Developers Network forum.

Picture Properties

If the image is under the text, there are several ways to fix this problem.  You can right click on the image and choose Picture Properties.  Now click on the Appearance tab.  Under the wrapping style, you can choose "none", "left", or "right". 

If you choose left, the image will be placed to the left of the text and other elements.  Expression Web adds a style to the image, specifically the float property.  (FrontPage used a deprecated HTML attribute align which could cause other browser-related problems.)  Using the styles though, will help ensure that most browsers will display the image properly.

If you have any question on using styles to help you layout your web site, please check out the International Web Developers Network forum.  They will help you understand the need to use styles instead of deprecated HTML attributes.

Video Tutorial on Adding Images

As usual, you can see a video tutorial on adding images to your web site.  This will also show you how some browsers will display your alt text instead of your image.  Hopefully this will help you to understand the importance of using the alt attribute properly.

Browser Problems with the alt attribute

When you place your cursor on an image using Microsoft Internet Explorer, you will see the text that you entered.  Unfortunately, the alt text was not meant to be used in this manner.  Most browsers will only show the alt text when required (screen readers or images disabled). 

You can try that on this post actually.  If you put the cursor on the images above and you are using Microsoft Internet Explorer, you might see something like Inserting an Image using the Menu, Picture Properties Dialog Box, or Accessibility Properties Dialog Box.

If you just want to have a small box come up on other browsers, you can use the title attribute.  Most browsers will show this on image and anchor elements.

<img alt="Picture Properties Dialog Box"
src="images/expression-web/picture-properties.gif"
style="float: right; padding-left: 5px"
title="Picture Properties Dialog Box" />

You will also notice that I did not use the height or width attributes.  These are not required attributes and are not needed unless you would like to have the image displayed in another size (other than the original image size).

Step By Step with Expression Web

Thursday, January 03, 2008

By now, you have probably reviewed some of the Microsoft Expression Web books at Amazon.com.  For some users, they might not have ever read a book on FrontPage or Expression Web.  They get in there and start using the program - learning by trial and error.  This works for a lot of people. 

For others, they like to read a book, maybe even see a few pictures.  This helps the user understand some of the basics of the program and why the program might do certain things.

If you are considering taking the leap and purchasing Microsoft Expression Web, you might consider the Microsoft Expression Web Step by Step by Chris Leeds.  This books will help you with some of the basics (like creating a New Web Site) to understanding some of the CSS basics.  If you have never developed a web site, the Step by Step book is a great start.  The language is very easy to understand and it even comes with templates and code to help you walk through the process. 

So when buying your Expression Web program or updating your Microsoft FrontPage, considering adding the Microsoft Expression Web Step by Step to your shopping cart.

Create a Backup Copy of Your Website

Saturday, December 01, 2007

Sometimes, you might need to make a lot of changes to your FrontPage or Expression Web.  You can easily do this by locating the website on your computer, highlighting it and pressing CNTL-C (copy).  Then you can locate the folder you wish the copy be made to, and press CNTL-V (paste).

Using Files from Your Backup Copy

If you made a mistake and need a file from your last backup, locate that specific file and press CNTL-C (copy) if you want to grab the entire file.  Now just go into your website and you can right click on the folder you wish to import (copy) the file into, and choose Paste from the drop-down menu.

If you just need some of the source code, locate the file, right click on it, and choose Open in Expression Web.  You can go through the source code, copying what you might need to restore your website.

You can also check out the video tutorial on how to create a backup copy for your Expression Website.

Images Do Not Appear on My Website

Wednesday, November 28, 2007

This question is seen numerous times on FrontPage / Expression Web message boards.  When the image is not seen on the web page, it usually means the path / file name is incorrect.  When trying to locate the problem, you can right click on the image in Microsoft Internet Explorer and choose properties.  Now you can take this information and it will help you locate the problem.

Image File Name

If the address (URL) has anything like C:\Users\username\Documents\My Web Sites\loudexpressions.com or C:\Documents and Settings\Administrator\My Documents\My Web Sites\loudexpressions.com, this usually means the image path is being pulled from your local computer using an absolute path.  FrontPage and Expression Web Design will usually use a relative path in the source code.  You might also check out Types of Hyperlinks as well.

For example, if you look at the source code from FrontPage or Expression Web, you might see something like

<img src="images/filename.gif" alt="Alt Text" /> 

But if you see something like

<img src="C:\Documents and Settings\Administrator\My Documents\My Web
Sites\loudexpressions.com\images\filename.gif" alt="Alt Text" /> 

chances are good your image will not appear correctly on other user's computers.  Chances also might be that your publishing button is grayed out.  You can use the Find and Replace option to help you fix this problem if it is on a few pages.  Always create a backup before doing this - just in case you make a mistake.

Case Sensitive

If you are on a UNIX / Linux platform, file names are case sensitive.  This means that image.JPG in the source code is not the same as image.jpg.   Take care when naming your images and do not use upper-case or spaces in your file names.  The best way to fix this problem is to delete the image off the server and then re-upload the image with the lower-case file name.

If you are on a Windows platform, it is not case sensitive so if your source code has

<img src="images/filename.gif" alt="Alt Text" /> 

and your file name is filename.GIF, this is usually not the case.

You might also try to clear your temporary Internet files.

Getting More Help

You can always with this on get more help Expression Web & FrontPage or the International Web Developers Network.  Remember when asking for help, it is always helpful to others to know the source code or a direct URL to the problem page.  You can also see Adding an Image in this blog.

Moving a Site to a New Computer

Thursday, October 18, 2007

With so many users getting a new computer, I have seen a few threads about how to get my website from my old computer to the new one.  If the website is not that large, you can always publish the website from the server to your new computer.

If it has a number of pages or you are on dial-up, you can also compress the website (ZIP) so copy to a new system.  You can also just copy the files from an USB drive or another type of storage media.  Once on the new system, create a new web and copy the files into that web.

Microsoft Expression Web

When attempting to move files over from an old system to your brand new computer, the scenario can be just about the same as Microsoft Frontpage.  Go to File - New - Web Site and choose Empty Web Site.  Now make sure you look at the name (and path) of where your new web site will be located.  If you are on a Vista machine, the path might look something like C:\Users\username\Documents\My Web Sites\example.com.

Now locate the pages you wish to be in your Expression Web site and hit CNTL-A (select all) and then CNTL-C (copy).  And go back into your Expression Web site and paste these files into your Expression Web site:  Moving your web site from one computer to another one video tutorial for Expression Web.

Microsoft Frontpage

With Microsoft Frontpage, you would go to File - New and then select New Website (on the right).  This will (probably) create an index.html file - you can delete this file.  Now, go to where your (web) files are, hit CNTL-A (select all) and CNTL-C (copy). 

Now you can paste your website into the new Frontpage website you just created.  It might tell you Directories Containing Web site configuration information will not be imported or No Files found to Import.  Just hit OK to these and let Frontpage finish importing the web: Moving your web site from one computer to another one video tutorial for Frontpage.

Once completed, you might consider going to Tools - Recalculate Hyperlinks also.  And don't forget to set up your website.  Chances are, you still might be using Frontpage Server Extensions to publish the web site, which is OK.  You will see this is pretty much the same as Microsoft Expression Web.

When I bought a new computer with Vista Ultimate, I just copied all the web sites over from the old computer to the new system with no problems.  I still have my web sites on both computers as a back-up.  There are many ways to get the web site over from one computer to another.  Most are very simple and you can determine which way is the best for you.

How to Make a Link Open into a New Page

Wednesday, October 10, 2007

Highlight the words you wish to be the hyperlink and press CNTL-K.  In the dialog box that opens, enter the URL into the address bar.  Now on the right where it says target window, click that and choose New Window. This will add:

target="_blank"

to the a element. See the Video Tutorial of How to Make a Link Open into a New Page.

There is no Attribute "TARGET"

If you take a look at the HTML A Element, you will see that target is not recognized in Strict XHTML as your DOCTYPE.  For more information, please check out I was Strict but now I need to be Transitional and Target Not Allowed in XHTML - Using JavaScript.

I use

		
function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
  if(!anchors[i].href.match('www.loudexpressions.com/'))
    {anchors[i].target = "_blank";}
        }
}
window.onload = externalLinks;

and I save it with a .js extension (external-window.js).  I insert it into my pages using a virtual path:

<script type="text/javascript" src="/includes/external-window.js">
</script>

This will help to make sure that any links not pointing to www.loudexpressions.com will open in a new window.  And the path is pushed back to the root.  Of course, you can also use a relative path as well:

<script type="text/javascript" src="../includes/external-window.js">
</script>

Just make sure that the path is correct and the links will open in a new window.  If you have any questions, please ask in the International Web Developers Network forum.

Creating a Hotspot in Expression Web

Saturday, October 06, 2007

To create a hotspot with Expression Web, the easiest way is to use the Picture toolbar.  This will help you create the source code you need if you have one image but need to direct users to different pages when they hover over a particular place on the image.

Once you have the image in your web page, right click near the tool bars to bring up the dropdown and choose the Pictures toolbar.  Now if you highlight your image you will see that you are able to choose the Rectangular Hotspot.  Go to your image, draw a rectangle over the image you wish to direct users to.  When you lift up on the left mouse cursor, a hyperlink dialog box will appear.  Locate the page that you wish to associate with that hotspot.  And then repeat as necessary.

You can also see it in action to make sure you know where everything is.  You can see How to create an Image Map in Frontpage to see it is very similar as in Expression Web.

Also, you can find out how the coordinates are chosen in an imagemap.

How to Link to a PDF File in Expression Web

Friday, October 05, 2007

Linking to a PDF in Expression Web is just like linking to an HTML file.  I would insert the PDF file into your Frontpage website first. 

Now highlight the word(s) you wish the user to click on to download the PDF file.  Now in Expression Web, you can go to Insert - Hyperlink and the Hyperlink Dialogue box will appear.  (You can also press CNTL-K to insert a Hyperlink.)  Now since you have the PDF already in your Expression Web website, locate the PDF and click on the PDF to get that file in the Address bar and hit OK.

When all is said an done, your code should look like:

<a href="pdf/Document1.pdf">Click here</a>

You can also catch a video cast of how to link to a PDF file in Frontpage.  There is also the instructions on how to link to a PDF file in Frontpage.

Processing the Form with the JMail EMail Component

Sunday, September 09, 2007

Earlier I showed you how to create a form with XHTML and lay it out with CSS. And later I will show you how to use Expression Web and ASP.NET to create and process the form. 

The JMail ASP EMail Component

This is something that I have been using for a very long time actually.  I stopped using Frontpage Server Extensions (FPSE) to process my forms because FPSE allow users (spam bots) to see your email address.  And this can cause them to spider your site, get your email address, and sell it to thousands of companies unfortunately.

With the JMail ASP EMail component, your email address is hidden from the spammers.  It is on the action page and processed on the server.  When that page is rendered in the browser, your email address is never seen.   You can download the text example (Microsoft Internet Users: Right Click and download TXT file*) and see a webcast of how easy it is to add this to your website.

Adding a Field

Adding a field was pretty easy on the creating a form page, and it is pretty easy on the JMail processing page (copy and paste will become your best friend).  Basically you will be adding the following lines to your confirm.asp page:
Dim Telephonename, Telephone
Telephonename = "Telephone: "
Telephone = Request.Form("Telephone")
strbody=strbody & Telephonename & Telephone & vbcrlf

I would make sure to add the above code near the other similar code.  You can see where I have added it in the webcast.

If you have problems with the code, you can ask in the Expression-FrontPage forum or the International Web Developer's Network.

*There is an option in Microsoft Internet Explorer 7.0: Go to Tools - Internet Options - Security - Custom Level called open files based on content, not file extension. If this is disabled then it correctly opens the text file for viewing.   You can change the setting or leave as is.  (I would just right click on the TXT file and say Save As.)

Creating a Form

Creating a form is pretty easy with XHTML code if you understand a bit of the code.  FrontPage helped you create forms very easily and processed the form on the server with FrontPage Server Extensions.

With Expression Web, there are many way to create and process a form actually.  Later, we will show you how to create a form with Expression Web and process it with .NET (a server side language).  Today, let's talk more about creating a simple form and processing it with an ASP component known as JMail. 

Form Processing with JMail

JMail is an ASP component that must be installed on the (Windows) server.  There are a few different ASP email components like CDONTS / CDOSYS, ASPMail, ASPEmail.  Check with your hosting company to see what they offer and support.  I am pretty certain that TechEvolution will support JMail, along with a few other ASP components.

Creating the Form

Creating the form is pretty easy.  In this example, I laid out the form using Cascading Style Sheets (CSS) instead of tables and cells.  If you have any problems with this, please ask in the Expression-Frontpage Forum or the International Web Developers Network.  You can download the code in this text file. (Microsoft Internet Users: Right Click and download TXT file*)  (Don't forget to change the SMTP Server and update the recipient email address.)

This can easily be changed or you can add more inputs as needed.  I'll show you in the next blog on how the JMail ASP component processes the form and I will show you how you can add an input field if needed.

Adding a Field

Let's say that you want to add a telephone number to the form.  And you want to add it to the under the email address.  So you have something like:
<label for="email">E-Mail</label><input id="EMail" name="EMail" /><br />


Now all you need to do is add:
<label for="telephone">Telephone</label><input id="Telephone" name="Telephone" /><br />


Make sure that if you do add this code, you also add the proper code to your JMail processing form, which we will also show you how to do this as well.

Don't be afraid to dive into your code some and make a few changes.  If you are on a *NIX server (Linux / Unix), chances are you will need to use PHP.  For some help with processing a PHP email form, check out the International Web Developer's Network.

*There is an option in Microsoft Internet Explorer 7.0: Go to Tools - Internet Options - Security - Custom Level called open files based on content, not file extension. If this is disabled then it correctly opens the text file for viewing.   You can change the setting or leave as is.  (I would just right click on the TXT file and say Save As.)

Formatting Cells in Expression Web

Friday, August 31, 2007

In Frontpage, it was pretty easy to format your tables and cells.  In Expression Web, it is a bit more difficult which seems to suggest that Microsoft is pushing us to write more of our own code.

In Expression Web, you can add an icon to your toolbar or go to Table - Table Properties - Cell to help format the cells.  There are less options in Expression Web unfortunately to help design your cells, but then again, tables and cells were not made to help layout a website, were they?

Once Expression Web creates some of the code for you, it will be fairly simple to go into the CSS code (inline or internal depending on how your have it set up), to change a few things around.

You can also see a screenshot on how it might look.

Apply a Style Sheet

Monday, August 27, 2007

To apply a style sheet to your Expression Web page, make sure that the Manage Style Task Pane is showing.  This will usually be on the right hand side unless you have moved it.  If you do not see it, go to Task Panes - Manage Styles.

Once this is shown , choose Attached Style Sheet. In the dialog box, choose Browse and locate your style sheet.  Double click on this and now it will add the correct code into the <head> of your document.

Adding a Style

Under Tag Properties, you can choose what styles are available to you in the style sheet that you have just attached.

Inserting an Image to Your Webpage

Friday, August 24, 2007

You can easily add an image to your webpage that you created in Expression Web by dragging the image from the folder list on the left hand side to the place in your website.  Your text might become mis-aligned but you can right click on the image, choose Picture Properties.  In the dialog box, choose the Appearance tab.  Now you can chose to align your image to the left or right of the other information on your website.

Using Frontpage

Frontpage will allow this option as well, however it will use the deprecated align attribute:

<img alt="First Data" src="images/first-data-merchant-services.gif" width="144" height="64" align="left" />

In Expression Web it will use styles to align the image:

<img alt="First Data" src="images/first-data-merchant-services.gif" style="width: 144px; height: 64px; float: left" />

Using styles will be better of course, especially if you are striving for a compliant website.

For more information check out the video Inserting an Image into a Webpage

Publishing From Remote Serv