Expression® Web Design

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.

Using CSS to Customize Your Submit Button

Thursday, January 17, 2008

You can use CSS to customize your submit button, even on your FrontPage forms.  For example,

input.noborder
{
border: none;
background-color: #fff;
color: #000;
font-family:"Comic Sans MS"
}

And then you can apply this class to your button

<input type="submit" value="Submit" class="noborder" />

Will have your submit button look something like:   You can change the font family as needed along with CSS properties. 

If you change the the border properties to something like

border: solid #fff 2px;

This will add a border to the button and look something like . 

Embed Flash with FrontPage

If you do not wish to use HTML code when embedding Flash, FrontPage will help you some. 

Go to Insert - Web Components.  In the dialog box that comes up, scroll down on the left to Advanced Components.  Now in the right window, you should see Movie in Flash Format.  Choose this and then hit Finish.  Now locate the SWF file in your FrontPage website to embed the Flash.

If you have questions, you can also watch the video tutorial on Embedding Flash with Frontpage.

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

Embedding a Media File

Tuesday, January 15, 2008

Embedding a media file causes more problems than it is worth.  But people still would like their movie on the website.  There are a number of ways to do this - some code might not work in all browsers though.  I recommend converting the media to Flash and then embedding Flash into your HTML document.  This is the program that I used in this example.  You can also see a few basic examples of the skins on this page.

For all purposes of this post, I am using Windows Vista Ultimate (all patches installed) and tested the code in Microsoft Internet Explorer 7.0.6000.16575; Opera Version 6.25, Build 8827; and Firefox 2.0.0.11.

Embedding Flash into HTML

There are even a few ways to do this even.  Adobe's method of embedding a Flash movie into your web site is something like

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0" width="550" height="400">
<param name="movie" value="media/lorikeets.swf" />
<param name="quality" value="high" />
<embed src="media/lorikeets.swf" quality="high" 
width="550" height="400" name="myMovieName" 
type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed></object>

You will probably see this OK in Firefox.  In Microsoft Internet Explorer (MSIE), you might see "Click to Activate".  Now in my opinion, this had to do with large corporations not playing nicely in the sandbox.  However, in April, Microsoft should be releasing a fix IE Automatic Component Activation (Changes to IE ActiveX Update). 

So what's a web developer like yourself supposed to do in the meantime?  You could check out the SWFObject: Javascript Flash Player detection and embed script.  Here is an example using the SWFObject to embed Flash.

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

Embedding a WMV File

Embedding another type of media file, like MPG, AVI, or WMV will be difficult since some browsers do not recognize the <object> element.  However, this code

<object id="MediaPlayer" width="550" 
height="450" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
standby="Loading Microsoft Windows Media Player components…" 
type="application/x-oleobject" 
codebase="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="media/lorikeets.mpg">
<param name="autoStart" value="true">               
<param name="showControls" value="true">
<param name="ShowStatusBar" value="true">
<param name="Autorewind" value="true">
<param name="ShowDisplay" value="false">   
<embed src="media/lorikeets.mpg" width="550" 
height="450" type="application/x-mplayer2" 
name="MediaPlayer" autostart="1" 
showcontrols="0" showstatusbar="1" 
autorewind="1" showdisplay="0">
</embed></object>

will seem to work with MPG, WMV, and AVI files.  You will see there are two references to the media (MPG, AVI, WMV) file.  Let's try to keep this simple.

<object id="MediaPlayer" width="550" 
height="450" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
standby="Loading Microsoft Windows Media Player components…" 
type="application/x-oleobject" 
codebase="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="media/lorikeets.mpg">
<param name="autoStart" value="true">               
<param name="showControls" value="true">
<param name="ShowStatusBar" value="true">
<param name="Autorewind" value="true">
<param name="ShowDisplay" value="false">   
</object>

helps to embed the media file into Internet Explorer, while

<embed src="media/lorikeets.mpg" width="550" 
height="450" type="application/x-mplayer2" 
name="MediaPlayer" autostart="1" 
showcontrols="0" showstatusbar="1" 
autorewind="1" showdisplay="0">
</embed>

will help to embed the video into other browsers.  This is why it is important to make sure the path is updated in both places.  To locate the path, look for the src attribute.

File Sizes

File size is something else to consider when embedding videos.  For example, you probably have seen me attempting to feed the lorikeets at the Denver Zoo by now.  In Flash (SWF), the file size is about 3.54 MB and the original height is about 400 pixels and width is 725 pixels.  The MPG is about 14.3 MB in size.  The AVI is the largest and is 690 MB.  The WMV file 889KB.  The WMV is the smallest but you will also see that the height and width was reduced as well (for people who are on dial-up).

Embedding Media File Examples

• Embedding a MPG File
• Embedding a WMV File
• Embedding a AVI File

Embedding YouTube

Since YouTube is pretty popular, some people will upload their videos there.  And YouTube will actually give you code to use to embed the video on your own web page. 

And of course you can see the file on YouTube's website.

The code will look something like

<object width="425" height="355">
<param name="movie" value="http://www.
Youtube.com/v/FKNIgPpw-i4&rel=1"></param>
<param name="wmode" 
value="transparent"></param>
<embed src="http://www.youtube.com/v/FKNIgPpw-i4&rel=1" 
type="application/x-shockwave-flash" wmode=
"transparent" width="425" height="355">
</embed>
</object>

So now you might be wondering which way you would like to use?  Flash is probably be best way - most browsers have Flash installed.  If you would like, I can help you convert your media file to Flash.

XML Sitemaps for live.com

Friday, January 11, 2008

Hopefully by now you have added an XML Sitemap to your website.  And you added the sitemap location to your robots.txt file

Sitemap: http://www.loudexpression.com/sitemap.xml

This is how most of the search engines will locate your XML Sitemap. 

However, as I previously gave you some suggestions on adding your XML Sitemap to Google and Yahoo, you can now add your XML Sitemap to Live.   You can sign up at Live Search Webmaster Center.  They will ask you to enter a META tag or upload an XML file to verify you are the site owner.  Once this is done, you will be able to see some information on your website like

• Summary:  This will give you your website address, when the site was last crawled, a domain rank, and Top 5 pages.
• Profile: This will give you the website address, the sitemap address, how they verified the site is yours (XML file or a META tag), and contact information to notify you of about any changes or problems when live.com crawls your website. 
• Keywords: Here you can enter some keywords to see how the page performs in search results.
• Top Links From:  You probably have some outbound links, this will show you ten that are performing the best in Live search.
• Top Links To:  This will show you the top ten incoming links that are performing the best in Live search.
• Sitemap:  This page gives you some general information on a n XML Sitemap.  It also tells you that you will get the best indexing results by using the robots.txt autodiscovery.

Robots.txt File

A robots.txt file is very simple to create.  You can view the LoudExpression's robots.txt file.  You can easily create this file with Expression Web by hitting CNTL-N.  Now, in the source code, delete everything and enter

Sitemap: http://www.loudexpression.com/sitemap.xml

And make sure that you change the absolute path to the path of your XML Sitemap.  The robots.txt will go in your root folder (the same folder where you have your "home" page). 

Sitemap vs XML Sitemap

A lot of times when you hear sitemap, people thought about something like this sitemap.  Now though, a lot of us think of an XML Sitemap.  Whichever one it is, both will help users and search engines.  Consider having both on your website.

Later we can discuss on how to set up a Google, Yahoo, and Live account to submit your sitemaps manually.  If you want help in creating an XML sitemap, contact me and send me your URL.  I'll try to send you one as soon as possible.

Types of Hyperlinks

Thursday, January 10, 2008

Whenever you create a hyperlink or add an image to your website, there is a bit of code in there that you might refer to as a path.  This path basically points to you’re the hyperlink or image.  And there are basically three types of paths that you will usually use when creating a website:

• Relative
• Virtual
• Absolute

All of them have pros and cons of using them in your website.  And you might decide to use all three in your webpage depending on what you need to do.

Relative Path

FrontPage and Expression Web will actually help to manage most of your relative paths in your website.  For example, if you decide to move a page from your root folder to a folder called about, any paths to images and hyperlinks contained in this page will be corrected.

So if you had something like

<img alt="Arrow" src="images/arrow.gif">

And you moved this page to a folder called about, the source code would be changed to

<img alt="Arrow" src="../images/arrow.gif">

This is one advantage of relative paths in your source code when using FrontPage and Expression Web.  And if you rename the image from arrow.gif to arrow1.gif, FrontPage and Expression Web should rename the paths in your website to arrow1.gif. 

From time to time, you will find some problems with this, i.e. maybe Expression Web might not update the path.  In Expression Web, it might be a good idea to go to Site - Recalculate Hyperlinks sometimes.  This will help correct any corrupted data.

Virtual Paths

This is the type that I tend to use a lot.  It looks something like

<img alt="Arrow" src="/images/arrow.gif">

You will notice the slash in the beginning of source.  This basically pushes the path back to the root of the website and then over to the images folder.  This is very useful if you are using any type of server side includes and have multiple folders.  No matter how many folders you are in, the path will go back to the root and over to the images folder.

Currently though, Expression Web does not fully support the virtual paths.  This means that if you use a virtual path to display an image, you might see something like this.  This is because there is not a website designated on your computer.  However, when you publish the page, you will see the image - no matter what folder you have the page in as long as you have the arrow.gif in the images folder.

Absolute Paths

You probably use absolute paths more than you realize, especially if you are directing people over to another website.  An example of an absolute path would be something like

<a href="http://www.loudexpressions.com/">Expression Web Blog</a>

A lot of people might use an absolute path for images.  Some companies will allow you to do this.  This way, if they change the image, the company can change the image on their server and users do not need to re-download a new image.  However, some websites do not allow this - this is called hotlinking.  Hotlinking costs users thousands of dollars a year in bandwidth.  Before linking directly to an image, contact the site owner to see if this is permitted.


The biggest problem with using absolute paths on your website is changes.  If you change your domain name, you will then need to change the path in the source code.  Expression Web has a function though in their replace feature (CNTL-H) - you can set it to search source code and change the domain name.  Before making any massive changes like this to your website, you should Create a Backup Copy of Your Website.  This way, if you accidentally make a mistake in the Replace with, you can refer back to your old copy. 

Your choices for the Find where are

• All Pages - this will make changes in your entire website
• Open Page(s) - this will make the changes in whatever pages you have opened at the time
• Selected Page(s) - this will make the changes in the pages you have selected.  You can select the pages by highlighting a specific folder, using the CNTL key and choosing the pages, or using the SHIFT key to select all the pages between a range.
• Current Page - this will make the changes to the current page you are working on.

Under the Advanced part, you can choose Find in Source Code which will apply the change(s) in your source code.

By now, you can probably see that the title "Types of Hyperlinks" is not the proper title for this post, but I felt that it might help others when searching.  It is actually called an URI (Uniform Resource Identifier).  If you have more question on an URI, please ask International Web Developers Network.

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.

Comments Are Fixed

In my attempt to help cut down on spammers posting on this blog, I inadvertently prevented all comments from being shown to me unfortunately.  While I think I have a decent reader base, I had wondered why no one left any comments.  Heck, I see questions posted all the time in the forums about some of the problems. 

Hopefully though this will answer any questions on why your comments did not show up and hopefully I will see a few comments from time to time.

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.