Expression® Web Design

Deprecated HTML Tags

Friday, April 03, 2009

Hypertext Markup Language, better known as HTML, has come a long way since the 1980's.  Back then, HTML was basically the only way to help control background / colors / font information / layout, etc.  Cascading Style Sheets (CSS) came into play as webmasters needed a better way to style / layout their websites.  Web sites grew from a few pages to hundreds, if not thousands, of web pages.  Changing the font color of a header element became a tedious task.  However, with CSS, webmasters could change the information on one page, and that change would immediately show up on all pages that were attached to that style sheet.

Over the years, CSS has replaced a lot of HTML elements.  Some of the deprecated HTML elements are:

• <applet>
• <basefont>
• <center>
• <dir>
• <font>
• <s>
• <strike>
• <u>

Probably one of the biggest change that affected webmasters was the <font> element being deprecated.  (Keep in mind that even though the <font> element is deprecated, browsers still support its use though.)

FrontPage was notorious for abusing the <font> element.  Any change that you made to the text through FrontPage would result the <font> being placed in the HTML source code.  Every new paragraph would have these <font> elements in there, creating a nightmare for webmasters when the font family or size needed to be replaced.  An example would be something like:

<p><font color="#800000" size="4" face="Arial">Lorem ipsum</font></p>

As you can see, FrontPage (even its latest 2003 version), never had the size correct.  Of course, webmasters could do a find and replace in the HTML source code, but every so often, FrontPage might switch the attributes around and some code might be skipped.

By using a style sheet though, you can style all the text that is contained in the <p> element very simply by adding:

p
{
font: 1em arial #000
}

Simple Contact Methods

Tuesday, February 24, 2009

There are other ways of course for users to send you an e-mail from your website if you were relying on FrontPage Server Extensions and now your hosting company is no longer supporting them.  However these will are not as reliable, but just as using FrontPage Server Extensions to process the form, these will also make your e-mail address susceptible to bots that crawl the Internet for e-mail addresses (to sell to spammers).  Using something like Jmail or ASPEMail to help you process the form will protect your e-mail address and should not pose a problem to users.

Mailto Form Action

This is probably one of the worst ones to use.  This will usually generate error messages like this one.  The message is benign, but your users might not completely read the message or understand it.  If they hit cancel, you will not be contact.

This form is being submitted using e-mail.
Submitting this form will reveal your e-mail address to the recipient, and will send the form data without encrypting it for privacy.

You may continue or cancel this submission.

And depending on the way the user has his computer set-up, he might get another warning message similar to this one:  "A website wants to open web content using this program on your computer". 

This message is not threatening, but to have two warning messages come up on the same web site when the user hits submit on the form might generate some concern.  If the user chooses Don't Allow, the message will not be sent.

Also, if the user does allow the e-mail client to send the information, the user might have to re-enter the information.  The input fields might not transfer over to the e-mail and the user now needs to re-type the information.

If you need to use this method, it is something like

<form method="post" action="mailto:name@example.com">
<input type="text" name="Message">
<input type="submit" value="Submit Your Comments">
</form>

You can also get the source code:
Text (157 bytes) | Zipped (268 bytes)

E-Mail Hyperlink

Expression Web will allow you to easily create a hyperlink for e-mail purposes.  Once you are in the Edit Hyperlink dialog box, on the lower left, you will see E-Mail Address.  You can click on this and the dialog box will change.  You can enter your e-mail address (and a subject if desired).

The code would be something like:

<a href="mailto:name@example.com?subject=From Your Website">
E-Mail Me</a>

Or if you did not choose a subject:

<a href="mailto:name@example.com">E-Mail Me</a>

The Issues with These "Simple Methods"

While these are simple to place on your website, there are problems.  I have already pointed out some issues with the mailto: form action.  Another problem with these methods though require the user to have a default e-mail client set up.  Usually this is done on a personal computer, but if the user is at the library or Internet café, this probably will not be set up.

Keep in mind that sometimes easier is not so easy for others.

Processing the Form with ASPEmail

Saturday, February 21, 2009

Once you have created your form, you probably want the information e-mailed to you.  With FrontPage, this was very easy to do, FrontPage Server Extensions did most of the work for you.  Now though, you might find yourself needing another way to have the form results e-mailed to you.  Depending on your web hosting provider, there is probably a number of ways.  One way we mentioned earlier was to process the form using the J-Mail ASP Component.

There are a few other methods as well, one being the ASPEmail component from Persits.  This is another very common ASP component that most web hosting providers will offer. 

Once you have determined that ASPEMail is installed, you can download an example from this blog to try out.  Remember to change the SMTP server (which you can get from your hosting company) and to change the recipient e-mail's address (on / about line eleven in the example) to your e-mail address.

ASPEMail Source Code

Text (1,065 bytes) | Zipped File  (contains two text files - 1,533 bytes) | Zipped File (contains two ASP pages - 1,533 bytes)

Creating a Navigation

Tuesday, January 20, 2009

FrontPage offered a fairly easy way to create a navigation (or menu) to implement on your website.  And to be honest, I played with them once, but decided they were not for me.  I think it was also hover buttons that used Java that I used for awhile, until there were just too many browser compatibility issues.

I started then using just regular hyperlinks, and using the Page Properties to change the colors of the hyperlinks from the default blue color to another color.  I also used this feature to change the active and hover colors.  Unfortunately, these colors were applied to all the hyperlinks on that web page.  Of course, this code needed to be added to every page that I created.  FrontPage added something like:

<body link="#000080" vlink="#000080" alink="#FF0000">

I have not ever got into the background (color / image) or the font information.  Let's just stick to the navigation today.

Using Lists to Create Your Navigation

That's right, you can use lists to create your navigation.  By applying styles to the list, you can make the list appear horizontally / vertically and without the little dot in front of it.  For example, on one of my sites, I use this list:

<ul id="navlist">
<li><a href="/default.asp">Home</a></li>
<li><a href="/help.asp">Help</a></li>
<li><a href="/forums.asp">Message Boards</a></li>
<li><a href="/contact.asp">Contact Me</a></li>
</ul>

I left some of the links out, but you get the idea.  There is no dot preceding the hyperlinks.  I also use server side includes so if I need to change / add / delete something, all I need to do is change one page.  I also use an external style sheet to help manage / maintain the colors, layout, etc.  Once again, all I need to do is change one page (the styles.css) to apply the changes to the entire website that the style sheet is attached to.

For some information on styles, you can check out How to Create a Style Sheet, Apply a Style Sheet, and Managing Your Style Sheet.

CSS Examples for Your Navigation

Once you are ready for this, there are a number of examples out there for you to choose from.  The first that usually comes to mind is the Suckerfish Dropdown from Alistapart.  They provide the code and easy instructions. 

Another menu is called Accessible Drop Down Menu from James Edwards.  They offer a free 15-day free trial to test the menu.  Right now, the cost of the product is $29.95.

Another page to view examples of using lists as a navigation tool is Listamatic.  As far as I could tell, all the options from this website are free.  There are horizontal and vertical menus on this page, make sure to review them all.  CSSPlay has a page for using lists as menus.  On this web page, you will see many options, for example: Basic Text, Tabbed, Button, Curved Border, Sliding, and Multilevel (FlyOut, Dropline, Fly line, Dropdown).

Adding a Scrollbar to a Web Page

Friday, January 16, 2009

In the past, when you saw a scrollbar on a web page, this usually meant the site was using frames.  Fortunately now, almost no one uses frames to build a website.  Relying on styles, you can create a specific area in your web page to contain as much information as needed.  You can see an example of this to the right of this post.  By setting a specific height and width in the divide and adding the overflow property, you can add more to your web page using less space.  I also used the float property in the divide to help place the example to the right of this post, added a small black border to the divide, and changed the font color so you can see the difference between the post and the example.  It can be useful if you have a lot of text that needs to be seen but only a certain amount of space available to you on your web page.

The Overflow Property

The overflow property has four values: hidden, visible, scroll, auto.

Auto Value

Usually, the auto value is the one that most webmasters will pick to use.  This value will add the scrollbar automatically if needed when the web page is rendered in the browser.  This applies to both the horizontal and vertical scrollbar.  If, by chance, the text / contents fit into the contained area, then the user would not see a scrollbar at all.

Overflow Property Source Code (Auto)

Source code is available in a text or zipped format for auto value:

Text (2,052 bytes) | Zipped (1,870 bytes)

Hidden Value

If you use this hidden value, any content that will not fit into the specified dimensions will not be shown (hidden).

Overflow Property Source Code (Hidden)

Source code is available in a text or zipped format for auto value:

Text (4,401 bytes) | Zipped (1,670 bytes)

Scroll Value

If you use the scroll value, this will add scroll bars (vertical and horizontal) to the container, no matter how much content it has.

Overflow Property Source Code (Scroll)

Source code is available in a text or zipped format for auto value:

Text (2,426 bytes) | Zipped (1,810 bytes)

Visible Value

If you choose the visible value, the content will be show even if the container does have enough room.

Overflow Property Source Code (Visible)

Source code is available in a text or zipped format for auto value:

Text (2,061 bytes) | Zipped (1,676 bytes)

And you can also download all the exampled in this zipped file.

Alt and Title Attributes

Saturday, January 10, 2009

For some of the webmasters who just relied on FrontPage to develop a website, these attributes were probably never used or heard of.  (And by the way, they are not alt tags or title tags. They are attributes.)  However, some users would see a little pop-up from time to time when they were using Microsoft Internet Explorer to browse the Internet.  Other browsers though did not show this information.  If you notice the example here, Microsoft Internet Explorer 7 is showing the alt attribute for the image "Expression Web Folder List Task Pane".  On most other browsers, you will not see this pop-up. 

The <img> Element

When you inserted an image into your web page with FrontPage, there were not too many steps.  FrontPage looked at the image and added the width, height, and border attributes.  It would sometimes add align and hspace attributes if you dove more into the image properties.  The code would look something like:

<img border="0" src="images/masthead.gif" width="80" height="80">

Unfortunately, it missed an attribute - the alt attribute, which is required if you were using HTML 4.01 and XHTML 1.0.  It is required to help show some information if the image cannot be rendered.  It is required to help users that do not want to download images to see what that image might be (possibly someone who has a slow connection to the Internet or maybe a handheld device).  It also helps some users who rely on "screen readers" to access the Internet.  Some search engines will read and use the text when spidering your website.

Now most of those attributes that FrontPage adds are deprecated and the standard is to use styles (CSS) to help define the border, width, and height.  The height and width of the image is not required, but it is a good idea to have that information in there to help the browser know how much space is going to be needed as the web page downloads. 

Now when you add an image to your web page using Microsoft Expression Web, you get a dialog box titled Accessibility Properties.  In the Alternate text field, you would enter the information that best describes that image.  Once you enter the correct information, hit OK and now your code should have the alt attribute in the <img> element.  If you do not get this option, go to Tools - Page Editor Options.  In the General tab, make sure that "Prompt for accessibility properties when inserting images" is checked.  If you do not enter anything into the Alternate text field, Expression Web will still add the alt attribute, but it will be empty (which is OK):

alt=""

The Long description field is for the longdesc attribute.  It is rarely used.  You will notice it has a browse button beside it.  The value is a URL to a page that describes the image.  It is used when you have a need for a much more detailed description than the alt attribute can handle.  However, keep in mind that the alt attribute should still be in the <img> element.

So is there a way to get other browsers to show a little pop-up message on an image?  Yes - by using the title attribute.  Unfortunately Expression Web does not support this feature yet, so you will need to add the attribute manually

<img alt="Our Logo" src="images/masthead.gif" title="Our Logo">

Most browsers will show the title attribute when the user places the cursor over the image.

The Border Attribute

Since the border attribute is deprecated, you will need to use styles, especially if your images have a hyperlink attached to them - you might notice a blue border around the image.  This is easy to get rid of, and hopefully you have a stylesheet.  If so, just add:

img {
border:0
}

to your style sheet.  Now all the images will show no border (unless you specify it somewhere else, maybe an inline style).

The <a> Element

Most will call this a (hyper)link.  The code is fairly simple

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

Both FrontPage and Expression Web made it very easy for the webmaster to add a link to some text.  You can highlight the text and press CNTL-K or go to Insert - Hyperlink.  While you are in this "Insert Hyperlink" dialog box, you should see "Text to display".  In this field should be the text you highlighted to become a hyperlink.  To the right, you see a button named "ScreenTip…" If you click on this button, another dialog box opens named Set Hyperlink ScreenTip.  If you enter some information into this field, Expression Web will add a title attribute to the hyperlink.  That text will be see when the user places his cursor over the hyperlink.

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

When a user puts the cursor over the linked text (Expression Web Blog), a pop-up (or screentip) will be seen as well named Expression Web Blog

Robots Text

Friday, January 09, 2009

You might have heard this mentioned before if you have done any reading on search engine optimization or getting your website listed in a search engine.  Usually on message boards and forums, you might see it as robots.txt.

This is a simple text file (not HTML, PHP, ASP, etc) that (good) search engines rely on to help spider your website.  You can tell some search engines (robots / crawlers) not to spider your website.  You can tell the search engines what folders not to search.  You might have come across this when you were trying to add your website manually to a search engine.  And the robots.txt is placed in your root folder - i.e. you should be able to see this blog's robots.txt file.  Most websites will have a robots.txt file, even the White House.

While you do want a robots.txt file, keep in mind that it can be used against you.  For example, spammers might search them for e-mail addresses.  And the robots that do not follow the robots.txt might be able to locate folders that you wish to remain hidden.  Or hackers might use the robots.txt file to help locate these "hidden" folders.

The Basic Robots.txt File

You can use a wildcard (*) to basically notate any and all robots:

User-agent: *
Disallow:

This will tell all robots that it is ok to crawl (spider) your website and all folders can be crawled.  It will help to ensure the robots will spider your website (some might not spider the website).  You should not see any 404 error requests in your log files from robots requesting your robots.txt file.  If you see any of these error messages, make sure that the file is names robots.txt - if you are in a *NIX server and you named your file Robots.txt, the robots might not be able to retrieve the file since *NIX servers are case sensitive.  Windows servers are not case sensitive.

XML Sitemaps and the Robots.txt File

Most of the larger search engines support XML Sitemaps.  Even live.com got on board with this protocol.  And it is very easy to add this information to your robots.txt file:

Sitemap: http://www.loudexpressions.com/sitemap.xml
 
User-agent: *
Disallow:

Now the search engines will know how to locate the XML sitemap.  Keep in mind that the XML sitemap is different from a sitemap for users.

Robots.txt and Search Engines

Some search engines might be requesting too much information too fast for your web server.  Remember earlier we spoke a little bit about "hits".  You can tell some search engines to slow down a bit, like Yahoo!®  - so your robots.txt file would look something like

Sitemap: http://www.loudexpression.com/sitemap.xml
 
User-agent: *
Disallow:
 
User-agent: Slurp
Crawl-delay: 2

This would tell the Slurp robot to wait two seconds before another request.

Server Side Includes

Wednesday, January 07, 2009

FrontPage offered a few different ways to include another page - from the FrontPage Include Component to the Shared Borders (which relied on FrontPage Server Extensions).  Of course, there was another way: using frames.  Frames are similar to the FrontPage Includes in that they both require the basic HTML elements

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

And yes, I know I wrote about file includes last year, but for search engine (and other) purposes, I thought I would write about it again, using a different title at least.  Currently, you still need to publish your pages to the server to see the web page with the includes.  With FrontPage Includes, FrontPage (and Expression Web) would show the included content without publishing. 

However, with the FrontPage Include Component, all the pages that had the Include Component

<!--webbot bot="Include" U-Include="nav.html" TAG="BODY" -->

needed to be published.  With server side includes, only the included page needs to be published.  You should consider using server side includes on any content that you might change on a regular basis.  This usually includes your navigation and maybe your header and footer.  Relying on server side includes will help you with consistency throughout your website.  Don't use the includes for things like your title, meta description / title, since these should be unique on each page.

Server Side Includes (SSI)

This is probably the most basic of the server side includes, and commonly called SSI.  Instead of using the .htm or .html file extension, you use .shtm or .shtml file extension.  This tells the server to look at the code before rendering it on the browser.  The include file can be .html or .htm.  Sometimes, you can also use .txt or .inc as the included file - if one does not work, contact your webhosting provider to see what "included" extensions are supported.

The code to add to the web page to call the included page is:

<!--#INCLUDE FILE="nav.html" -->

And in the nav.html, the only code would be something like:

<a href="default.shtml">Home</a>
<br><br>
<a href="about.shtml">About</a>
<br><br>
<a href="contact.shtml">Contact</a>

The nav.html page will be formatted from the main page.  I have made an example of using server side includes with tables and divides (Expression Web and FrontPage calls these elements layers).

SSI Source Code

Source code is available in a zipped format for the above examples:
Tables (2,712 bytes) | Divs (3,134 bytes)

ASP Includes

ASP includes work very similar as the SSI example above. Usually, you will save the file with .asp extension.  For the includes, they could be .asp, .html, .htm, .txt, or .inc.  A lot of times when you are working with ASP includes, you might be working with a database.  There is code that is used to connect to the database, and this usually contains your database name, database username, database password, and database connection string.  For this page, you should save it with a .asp file extension to help protect this information.

<!--#INCLUDE FILE="nav.html" -->

You will see the code is the same as the SSI code.  And the code in the nav.html page is also the same:

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

With the exception of the file extension, since you are working with ASP files.  I switched to ASP pages probably around 2000 when FrontPage 2000 helped to create some ASP pages to connect to a MS Access database.  I had to switch to Windows hosting for complete ASP support, but never looked back.

As with the SSI example, I made an example of using ASP Includes with a table layout and one using divides.

ASP Include Source Code

Source code is available in a zipped format for the above examples:
Tables (2,740 bytes) | Divs (2,990 bytes)

ASP.NET Includes

To include a file using asp.net requires some different coding:

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

The nav.html file though is the same

<a href="default.aspx">Home</a>
<br><br>
<a href="about.aspx">About</a>
<br><br>
<a href="contact.aspx">Contact</a>

Examples using ASP.NET includes can be found using a table layout and one using divides.

ASP.NET Include Source Code

Source code is available in a zipped format for the above examples: 
Tables (2,759 bytes) | Divs (3,009 bytes)

Some Potential Problems Using Includes

If you website contains multiple folders, you might see some problems when clicking a link or if you have an image in the include file.  This can easily be rectified by using relative or absolute paths.  I usually use relative paths to help ensure all anchors (hyperlinks) and image sources are correct.  An example from the nav.html page above would be:

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

You can see that I have placed a slash in front of the default.asp page.  This will push the path back to the root web and start to work from there.

Another example when inserting images into an include file.  Usually, most webmasters will put their images in an images folder.  And if you have

<img src="images/logo.gif" alt="Our Logo" />

and the viewer might be in a folder.  This would then cause the path to look for the images folder in that certain folder.  However, if you use

<img src="/images/logo.gif" alt="Our Logo" />

This would push the path back to the root web and over to the images folder.  You could use an absolute path, but if your domain name changes at some point, you would need to change the path in all these locations.  If you use a relative path, chances are very good you will not have the need to change anything.

Website to Fill Screen

Tuesday, January 06, 2009

New users are constantly running into the hurdle of wanting their website to fill the screen, yet also maintain some type of layout.  That is usually near to impossible since resolutions can vary, starting from 640X480 and go upwards of 1920X1200 to much higher.

For this example, I will the source code for tables and show you some different images of the same website in different resolutions so that you can get a good idea.  I will also rely on the HTML 4.01 Transitional DOCTYPE.  I will rely on a header, a left navigation with content on the right, and a footer.  I will also use server side includes for the navigation and content areas to help maintain consistency so you will be able to see the difference in your resolution as well as with some screen shots.  I understand that CSS should be used, but I also understand that a lot of new webmasters use and rely on tables instead of divides for laying out their website.

Liquid vs Fixed Layouts

Usually this is the first debate, is it better to have a fixed or liquid layout?  Having a fixed layout will usually mean that you are going to rely on your content to be in a certain amount of pixels.  Some will have their main divide set to 770 pixels to make sure that users that have 800X600 resolution will not see a horizontal.  However, this might mean that a lot of real estate might be lost if most of your users have a higher resolution browser. 

Setting the table at 100% however might cause some problems with your layout.  Images might not line up as you would like, or your text might be moved up to cause other problems.

I created a web page with the same text and image using 100% width and then with fixed widths (770 pixels, 985 pixels, 1220 pixels, and 1550 pixels) for various resolutions.  This should help you see the difference(s) on your monitor.  I was also able to take a screen shot of the four different resolutions.

800X600 Screen Resolution

For users that still have an 800X600 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

• 100% (Fluid) Layout
• 770 Pixels (Fixed) Layout for 800X600 Screen Resolution (Maximized)
• 985 Pixels (Fixed) Layout for 1024X768 Screen Resolution (Maximized)
• 1220 Pixels (Fixed) Layout for 1280X1024 Screen Resolution (Maximized)
• 1550 Pixels (Fixed) Layout for 1600X1200 Screen Resolution (Maximized)

1024X768 Screen Resolution

For users that still have an 1240X768 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

• 100% (Fluid) Layout
• 770 Pixels (Fixed) Layout for 800x600 Screen Resolution (Maximized)
• 985 Pixels (Fixed) Layout for 1024X768 Screen Resolution (Maximized)
• 1220 Pixels (Fixed) Layout for 1280X1024 Screen Resolution (Maximized)
• 1550 Pixels (Fixed) Layout for 1600X1200 Screen Resolution (Maximized)

1280X1024 Screen Resolution

For users that still have an 1280X1024 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

• 100% (Fluid) Layout
• 770 Pixels (Fixed) Layout for 800x600 Screen Resolution (Maximized)
• 985 Pixels (Fixed) Layout for 1024X768 Screen Resolution (Maximized)
• 1220 Pixels (Fixed) Layout for 1280X1024 Screen Resolution (Maximized)
• 1550 Pixels (Fixed) Layout for 1600X1200 Screen Resolution (Maximized)

1600X1200 Screen Resolution

For users that still have an 1600X1200 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

• 100% (Fluid) Layout
• 770 Pixels (Fixed) Layout for 800x600 Screen Resolution (Maximized)
• 985 Pixels (Fixed) Layout for 1024X768 Screen Resolution (Maximized)
• 1220 Pixels (Fixed) Layout for 1280X1024 Screen Resolution (Maximized)
• 1550 Pixels (Fixed) Layout for 1600X1200 Screen Resolution (Maximized)

Other Issues with Fixed Layouts

You might have noticed that I put maximized at the end of each hyperlink above.  This is because now it is assuming that if the user has a 1600X1200 screen resolution - the user has the browser maximized.  The user might have it set at 1280X1024.  For example, my screen resolution is 1920X1200, but my browsers are set at 1280X1024 to display websites. 

Another problem could be toolbars that are opened.  If the history or favorites is opened, you might lose around 300 pixels.

There are JavaScripts to help detect screen resolutions, but they will not help you in my case.  The JavaScript will detect a 1920X1200 screen resolution, yet I am viewing the website at 1280X1024.  And the JavaScript will not be able to help you with the toolbars that are opened.

So what is a webmaster to do?  Building a website for 800X600 screen resolutions, you probably are losing a lot of real estate on most monitors.  There are pros and cons to using a fixed or fluid layout.  I have started using a fixed layout, but build more for a 1280X1024 layout.  Yes, I know that is someone has a smaller resolution, they are going to be seeing horizontal scrollbars, but honestly, chances are they are pretty used to that since most websites cater to the higher resolutions now. 

And then of course there is the other issue of having the website flush to the left or centered in the browser.

Changing the Colors of Hyperlinks

Friday, January 02, 2009

Usually (by default), hyperlinks are blue and underlined, the visited links are purple, and when you mouseover (hover) over them with your mouse, they turn red.  More and more people are wanting their hyperlinks now to stand out more or even blend in with their text.  With a style sheet, this can easily be accomplished.  If you decide to use styles to change your hyperlinks, you need to make sure you have a DOCTYPE.  This helps to prevent some browsers going into quirks mode.  Also, relying on styles for your hyperlinks, you can set up different styles for hyperlinks that you use for your navigation, footer, and just the "regular" hyperlinks.

The W3 considers this as a pseudo-class.  Basically this is used to help style the anchor (hyperlink) and other elements on characteristics other than the name, attribute, or content.  For these examples, I will use a a basic table layout to help users see how styles can be applied to hyperlinks.  The same idea can be applied to divides (hopefully you are using them now to help layout your website).

As you read, you will notice that the pseudo-class (link, visited, hover, active) are in this specific order.  They have to always be in this order (I remember this as love-hate) for them to work properly.

Hyperlink Styles

In this example, we will give examples of the basic hyperlink style that can be placed in your style sheet.  Usually, you want your hyperlinks to stand out from your regular text so your readers will click on them to possibly read more of your website.  So in this example, the hyperlink is Dark Red (#8b0000) and when you mouse over the link, the link turns Navy (#000080) and the underline disappears.

If you click on the hyperlinks in the example, you will see that the color is the same, even though it is considered visited.  This is also easily controlled in CSS.  If you also notice, the hyperlink will turn bold when you click (activate) it.

a:link {
color: #8b0000;
}
a:visited {
color: #8b0000;
}
a:hover {
color: #000080;
text-decoration:none;
}
a:active {
color: #000080;
font-weight:bold;
}

Source code example: Text file (174 bytes) / Zipped file (all files (txt, css, html) 3,911 bytes)

Apply Different Styles to Specific Hyperlinks

So far we have applied a style to the "regular" hyperlinks in the web pages.  Sometimes though, you might want the hyperlinks that are in the navigation, footer, or other areas of you web page to stand out even more.  This can easily be accomplished with styles. 

There are a couple of ways that you can achieve this feature.  Since the area that has the navigation has an ID of nav, we can use something like:

#nav a:link {
text-decoration:none;
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}
#nav a:visited {
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
text-decoration:none;
}
#nav a:hover {
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}
#nav a:active {
text-decoration:none;
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}

In the <body> of the HTML code, the styles are applied to the <td> element with the nav ID:

<td id="nav">

Keep in mind that if you use ID, it can only be used once on the web page.  If you need to reference a style multiple times, use class.

For the footer, I created

a.footer:link {
color:#000;
font-size:.8em;
font-weight:normal;
}
a.footer:visited {
color:#000;
font-size:.8em;
text-decoration:underline;
font-weight:normal;
}
a.footer:hover {
color:#000;
font-size:.8em;
font-weight:normal;
}
a.footer:active {
color:#000;
font-size:.8em;
font-weight:normal;
}

Then in the <body> where these links are, I added the class footer to the <a> element

<a href="/default.asp" class="footer">Home</a>

Since there were three <a> elements on this web page, I needed to use class instead of an ID.

Source code: Text file (749 bytes) / Zipped file (all files (txt, css, html) 4,727 bytes)

Don't forget, with Microsoft Expression Web, if you have the Manage Styles Task Pane opened, you can preview your style very easily.  This will help to ensure that you have the correct syntax as soon as any changes or additions to the style is done.  If you do not see this Task Pane, go to Task Panes and Manage Styles.  The Task Pane should appear and if needed, you can move the pane to another area of Expression Web.

Check to See If ASP Is Supported

Sunday, December 21, 2008

When deciding to switch to a server side language, like CFM, PHP, ASP, .NET, it is always a good thing to check to see what your server supports.  Usually, if you are on a Windows server, ASP and ASP.NET will be supported.  On a *NIX server, PHP is usually supported.  There are always exceptions to this of course, and ways to check what is supported on your server / webhosting account.

The code to use can be something as simple as

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
</head>
 
<body>
<%
response.write("If you see this, ASP is probably supported")
%>
</body>
 
</html>

and it is saved with an .asp file extension.  When upload, you should see a page that is similar to this page with the text, if you see this, ASP is probably supported.  (See text and ZIP files for source code.)  If you see just a bunch of the ASP code, your webhosting company might not support ASP or you might need to ask them to activate the server side language on your website.

Using the _vti_inf.html to Determine the Operating System

There is actually another way as well to determine the platform you chose to host your website on using the _vti_inf.html file.  You can consider using this method as well if you are comfortable reviewing the source code from your Internet browser. Remember, if you are on a Windows servers, chances are pretty good that you can run ASP scripts on your website.  You might need to turn on this function in your webhosting control panel.  If you do not see this or you are unable to run ASP, check with your webhosting provider for more information. 

In that support e-mail (ticket), you might see if the Jmail email component from Dundas software is also installed.  If it is, check out Processing the Form with the Jmail Email Component.

Starting with CSS

Wednesday, December 17, 2008

Hopefully by now, you have started using some cascading style sheets (CSS) in your website development.  Some of it might have some naturally if you are using Expression Web.  In the Tools - Page Editor options, take a glance at the CSS tab.  Here is where you can choose if you would like to use inline styles or an internal style sheet if you have not created an external style sheet.

If you are working with an external style sheet (or internal), there are usually a couple of things that you use.  The first is called a selector.  This can be body, p, div, table, or a td element.  The second part is called the property.  This might be something like color, font, text-align, background, etc. depending on the selector.  And the last part is the value.  This might be something like #000, black, center, no-repeat, etc., once again depending on the property.  An example could be:

body
{
background-color: #fff;
color: #000;
}

This basically helps to have your background color white and the font color black.  The body is the selector, the background-color and color are the properties, and #fff and #000 are the values.  FrontPage would probably create something like:

<body bgcolor="#FFFFFF">

And it would be assumed the font color is white.

You can also use an inline style:

<body style="background-color:#fff; color:#000">

Of course, using an internal or inline style sheet somewhat defeats the purpose of relying on CSS.  For example, if you decided that you wanted the background color black and the font color white, you could easily change it in the external style sheet and all the pages that are attached to that style sheet would be updated.

CSS Shorthand

Another great part with CSS is the shorthand.  For example, you might have something like:

body
{
background-color: #fff;
background-image: url('/images/background.gif');
background-position:left;
background-repeat:no-repeat;
}

You can basically combine most of the selectors into one line:

body
{ 
background: #fff url('/images/background.gif') left no-repeat; 
}

CSS Grouping

Another benefit with CSS is that you can group the selectors together:

body, p, table, td, h1, h2, h3, h4, h5, h6, div
{
color: #000;
}

This style applies the color black to the text in these elements.  And then you can apply more to the elements if needed, for example:

body, p, table, td, h1, h2, h3, h4, h5, h6, div
{
color: #000
}
td
{
font-weight:bold
}

Any text inside the td element will be bold as well.  There are other ways as well to help apply different styles but we can get into that later.

Building a Site with Frames

Friday, December 12, 2008

I know, people everywhere tell you it is bad to use frames when developing a website.  But you like frames because when you need to add a page to your navigation, you only need to change one page.  (You can do that with server side includes.)

I would just like to show you though one (of many) reasons why it is not a good idea to use frames.  Let's say you are only using a left frame for navigation and then a right frame for the content.  (By the way, if you are using Expression Web, you will need to add your Frameset DOCTYPE:

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

since Microsoft forgot to add this DOCTYPE when you create a new page.)  So you have three pages now:

• The Navigation Page
• The Home Page
• The Frames

With server side includes, you would only have two pages (nav and home).  This is probably all good and you realize that your website is now in your favorite search engine.  You realize though that it takes the user to the contact page, where all they can do is submit their information and then get a page that suggests they review your website.  What happened to the navigation?  This is one of the bigger problems when using frames - you run the risk of losing visitors because they have nowhere to go. 

Now if you look at your favorite search engine again to see that only your contact page is coming up - you actually see your navigation on the left hand side.  And the user can continue browsing your website.

There are some ways around this, like forcing frames (which uses JavaScript), but that is not reliable. 

There are other reasons why not to use frames, but I am hoping that this example will help you to understand one of the bigger reasons not to use frames.  Watch the video tutorial for a search engine result example on why not to use frame to help you see exactly what would happen when a specific URL / path comes up in a search engine, rather than your domain name.  Hopefully this will help you to understand one of the reasons why not to use frames.

Redirecting a URL

Wednesday, December 10, 2008

At times, there is a need to redirect users to a new URL.  There are many ways to do this, the better way is doing it via the server or server side language to produce a 301 (permanent redirect) response (more about these later).

After the examples, I have included a link to a text file or zipped text file - depending on the browser, you might need to use the zipped (compressed) link and unzip the file after download.  Also keep in mind that a few of the examples have been split into two lines to ensure the code is seen.  When in doubt, refer to the examples.

ASP, .NET, PHP Permanent Redirect

If your web page is saved with a .asp, .net, or .php extension, you can rely on some server side code to redirect the user to the new web page.

ASP 301 Redirect

For an ASP page, use this code:

 

<%@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently" 
Response.AddHeader "Location", 
"http://www.loudexpressions.com/sitemap.asp"
%>

Replace the location (http://www.loudexpressions.com/sitemap.asp) with the name of the new web page. 
Text file / Zipped file

.NET 301 Redirect

If your web page is being processed in ASP.NET, you can use this code:

 

<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location",
"http://www.loudexpressions.com/sitemap.asp");
}
</script>

Replace the location (http://www.loudexpressions.com/sitemap.asp) with the name of the new web page.
Text file / Zipped file

PHP 301 Redirect

If the web page has a .php extension (or another extension that is being processed as php, like .phtml or .phtm - you will need to contact your hosting provider if you have questions), you can use:

 

<?
Header( "HTTP/1.1 301 Moved Permanently" ); 
Header( "Location: http://www.loudexpressions.
Com/sitemap.asp" ); 
?>

Replace the location (http://www.loudexpressions.com/sitemap.asp) with the name of the new web page.
Text file / Zipped File

Other Server Side Permanent Redirect

There are some other server side languages like ColdFusion (.cfm), JavaServer Pages (.jsp), using .htaccess, or IIS.  You can also download the examples above in a zipped file (and this also includes CFM / JSP and the example below).

Another Redirect Option

However, if you have just relied on simple HTML for your website, or have no access to any of the server side options, you might consider using a JavaScript and a meta tag to redirect the users to the new page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
<!-- Hide script from non-JS supported Browsers 
function redirect(){ 
window.location.replace ("http://www.loudexpressions.com/
sitemap.asp"); 
} 
setTimeout("redirect()",5000); 
// end hiding 
</script>
<meta http-equiv="Refresh" content="5; url=
http://www.loudexpressions.com/sitemap.asp">
<meta content="text/html; charset=utf-8" http-equiv=
"Content-Type">
<title>No Title</title>
</head>
<body>
You are being redirected to the new web page: 
<a href="http://www.loudexpressions.com/sitemap.asp">
http://www.loudexpressions.com/sitemap.asp</a>
</body>
</html>

Replace the location (http://www.loudexpressions.com/sitemap.asp) with the name of the new web page in both places.
Text file / Zipped File

The JavaScript / Meta Refresh tag should be used only as your last option to ensure your search engine rankings are not affected.

Certified FrontPage Expression Web Sage

Wednesday, December 03, 2008

Taking a little time, I decided to take a look at my accomplishments over at Experts Exchange.  I remember finding this site after askme.com was done away with.  I think that it was really my first forum / message board that I started in and that was back on 30 Oct 2002.

It is one of the few forums / message boards that give you something for your contributions.  Some think the point system has gone to outrageous limits, but I think that it also helps people to answer questions.  You might only get Certified FrontPage-Expressions Sage certificate, but it is something.  Recognition for your achievements is almost always appreciated in some way, shape, or form.   This certificate was for the FrontPage and Expression Web Zone.

Adobe Photoshop Express

Thursday, March 27, 2008

Adobe announced they are offering a version of Photoshop at no charge on their web site.  I have not had the opportunity yet to take a test drive, but this might be useful to some users.  (By the way, on Opera 9.25 the test drive link had a few issues.

So if you were looking to use Adobe Photoshop and just could not afford it, here is a way for you to use some of the features of Adobe Photoshop at no charge.

They also seem to give you 2G of hard drive space as well at no charge

There's nothing sadder than a photo without a home. You hate to see that. Give your photos a free ride with Photoshop Express. Just sign up, then start uploading, polishing and showing off up to 2 GB of photo on our dime.

Now of course, one thing comes to mind with the brand Adobe Photoshop Express - FrontPage Express.  Maybe a coincidence, maybe names are now on the verge of running out, or maybe Adobe thinks Microsoft has a good naming convention?

404 Error Page -Not- Found

Tuesday, March 18, 2008

When creating a web site in today's time, it is imperative that you consider creating a 404 Error, Page Not Found.

Basically, a server has a list code, 18 in the 400 arena, that mean different things.  The 404 Page Not Found is one of the basic ones that is found a lot of times, no matter how large or small your web site is.  You might have accidentally linked to an image, and that image is no longer in your web site.  Now, the user won't see this page, but the server will tell the browser 404 on that file and the browser will stop trying to download the file.

Over the years, some 404 pages have be very comical and there is probably still a race going on somewhere to see who can great the funniest 404 Error page.

Proper 404 Pages

When a user goes to your web site, he / she excepts to see a certain page. After all, he clicked on a link from a search engine and your URL told him this was what he wanted.  However, when he clicked on it, that information is no longer on that page.  Maybe you re-did all your pages as a server-type so you could use Server Side Includes (SSI).  Maybe you re-did your web site so that it was easier for you to organize.

Helpful Web Sites

And of course there are web sites dedicated to 404 Error pages.  There is the 404 Research Lab and the 404 Lounge.

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 . 

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.

Comments Are Fixed

Tuesday, January 08, 2008

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.

Some Input Fields Are Yellow

Sunday, December 30, 2007

Sometimes when you view your form in a browser, you might notice that your input fields are yellow.  This usually has nothing to do with Expression Web or FrontPage.  It is actually Google that is causing this problem.  I have it disabled on Internet Explorer. 

To check the settings, go to the Google Toolbar Settings button - and Options.  In the dialog box that comes up, uncheck the Autofill in the Features tab.  This should fix this issue on your computer.  You can also read more about the Google Toolbar on Google's website.

My Changes Are Not Showing Up

Friday, December 07, 2007

Sometimes when you make changes on your web page, you do not see those changes because of your temporary Internet cache settings.  Basically, when you go to a website, images and files are cached locally to help speed up the loading of that page.  Even sometimes a refresh might not show your changes.

Clear Your Temporary Internet Cache

You can clear your temporary Internet cache by going to Tools - Internet Options on Microsoft Internet Explorer.  In the General tab, you should see Browsing history.  Choose the Delete Files button.  This will bring up another dialog box.  Under the Temporary Internet Files, choose the Delete Files button to clear your temporary Internet cache.  Make sure you are on on your website when you do this.  Now choose Close and hit OK.

Another way to do this is while you are on your web page is choose CNTL-F5 to do a "hard refresh" of the page.

Another Contest from LoudExpressions

Wednesday, December 05, 2007

Christmas is around the corner.  You might need Expression Web for your New Year's Resolution?  If so, we have it for you.  Create a blog about Expression Web and link back to LoudExpressions.  Once you write your blog, send the (perma)link over to me.

Deadline for Contest

The deadline for the contest is 28 Dec 2007, midnight Mountain Time.  The winner will be announced that following Monday.  So maybe you have a New Year resolution to move to a program that will help you create better and compliant HTML and XHTML coding? 

Miscellaneous Information for the Contest

You can be entered only once. You can check out our Private Policy and the Terms of Service.  The contest will be ran much similar to the last contest.

XML Sitemaps

Saturday, November 24, 2007

More and more search engines are relying on XML sitemaps to help spider your website.  There are many ways for you to create an XML sitemap.  One of the programs I use is the Google Sitemap Generator.  One of the better things about this program is that there is no limit to the number of pages. 

Google offers an easy way to submit your XML sitemap via their Webmaster Tools.  In Yahoo!®, you can use their Site Explorer.  And on ask.com, you can submit your XML sitemap by entering http://submissions.ask.com/ping?sitemap=http://www.loudexpressions.com/sitemap.xml into your address bar (of course replacing the path to your XML sitemap.

And one way that most search engines are relying on to locate your XML sitemap even if you do not submit it, is via the robots.txt file.  Enter:

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

into your robots.txt file (once again replacing the path to your XML sitemap).  This autodiscovery of your XML sitemap will make it easier. 

I still rely heavily on Google Webmaster Tools and Yahoo!® Site Explorer to help ensure the websites are updated.

And don't forget that live.com will also support your XML sitemap.

BlogRush

Wednesday, October 31, 2007

It seems to be something similar to MyBlogLog. If you think this is something you might be interested in, please contact me so I can refer you.  They give some type of credit if for the referrals so it would be appreciated.  And I promise even though I might be busy since the Internet was down, I will get to those messages as soon as possible.

You might want to check my Twitter account as well just to make sure I am at home.  It seems like Twitter can be fun at times, especially if you have a life.  I don't really, but then again, it seems like I am always so busy.

Also, you can learn more about BlogRush on their FAQ page.

How Coordinates are Chosen in an Image Map

Saturday, October 06, 2007

When you look at the source code of your HTML image map, you will see something like

<map name="FPMap0" id="FPMap0">
<area href="home.htm" shape="rect" coords="7, 8, 51, 39" />
<area href="faqs.html" shape="rect" coords="58, 9, 90, 40" />
<area href="contact.htm" shape="rect" coords="101, 7, 136, 44" />
</map>
<img alt="Image bar" src="images/image-bar.jpg" style="width:
150px; height: 48px" usemap="#FPMap0" />

The coordinates are chosen on the image. For example, in the above example, the rectangle starts at seven pixels over and eight pixels down.  Then it ends are fifty-one pixels over and thirty-nine pixels down.  You can see how this is counted using an imaging program, such as Photoshop, Fireworks, GIMP, etc.  When you use Frontpage or Expression Web to create the image map, you might not create the rectangle on the starting on the same pixel or ending on the same one.  However, understanding some HTML, you can edit the settings and the area elements will be the same.

<map name="FPMap0" id="FPMap0">
<area href="home.htm" shape="rect" coords="7, 9, 51, 40" />
<area href="faqs.html" shape="rect" coords="58, 9, 90, 40" />
<area href="contact.htm" shape="rect" coords="101, 9, 136, 40" />
</map>
<img alt="Image bar" src="images/image-bar.jpg" style="width:
150px; height: 48px" usemap="#FPMap0" />

Changing just a few numbers in the source code will have the area elements on the same row to have your image map a bit more perfect.  Now they all start nine pixels down and end at forty pixels over. 

If you have questions on how an image map is done in Expression Web or Frontpage, please ask at Expression Web and Frontpage Forum.  For HTML / XHTML questions, please ask at the International Webdeveloper's Network.

New Feed Added to Microsoft Expression Web Blog

Thursday, September 27, 2007

I could not decide what category to place this post in, so I finally chose the Miscellaneous category since I was thankful to Michael Duz of Search Engine Optimization for Site Owners and Small Businesses for pointing this out.

A post on Michael's blog, QR Codes, helps to explain this technology.  Now I can hope that since my T-Mobile Wing has a camera that at some point we might even see this hit the United States.

Naming Your Web Pages

Saturday, September 15, 2007

Usually when you start out, you need to have a "home" page.  This page is usually something like

• index.htm
• index.html
• index.shtm
• index.shtml
• index.phtm
• index.phtml
• index.asp
• index.aspx
• index.cfm
• index.php
• default.htm
• default.html
• default.shtm
• default.shtml
• default.phtm
• default.phtml
• default.asp
• default.aspx
• default.cfm
• default.php

Most servers will be set up to show one of these pages when you enter your domain name.  If not, contact your hosting provider for more information or check their support / knowledge base.

More Web Page Naming Conventions

When working in Frontpage, it is very easy to use a space in the name of the web page.  Don't do it though.  Don't use a space in the file name.  This will be translated to something else in the URL and might cause more problems.  Consider using a underscore (_) or dash (-).

Also, I would keep the file names lowercase.  On *NIX servers, they are case sensitive - meaning that image.JPG is not the same as image.jpg.  This sometimes will cause some problems if you link to aboutus.html but you named your web page AboutUs.html.  On Windows servers, it is not case sensitive, which is one less thing to worry about.

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.  

Source code: Text file (1,186 bytes) / Zipped file (623 bytes)

Once you download the examples, 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.)

If your web hosting provider supports ASPEMail, check out Processing the Form with ASPEMail.

Free Expression Web Tool

Thursday, August 23, 2007

LoudExpressions is running a contest!  We are asking our readers to announce our blog in your blog.  We would like for you to write a blog linking to our website: http://www.loudexpressions.com.  Once you link to us, send us an email giving us the (perma)link.  This will be counted as one point.

I Don't Have a Blog

If you don't have a blog, that's OK also.  We will also you a few ways to get more "points".

MyBlogLog

Thanks to MyBlogLog for offering a pro account to LoudExpressions, you join our MyBlogLog community and receive two "points".

Technorati

You can get one "point" by tagging us on Technorati.

Deadline

The deadline to enter the contest is 30 Sep 2007, 12 Noon Mountain Standard Time.  We hope that you will keep us tagged and you will stay in our community in MyBlogLog after this date.

Determining a Winner

We will export all the emails that we receive, review Technorati and check MyBlogLog for all the people who have joined.  We will then place these email addresses / users into a spreadsheet and allow Microsoft Excel to choose a random user.  Your email address will not be shared with anyone outside our blog. 

A winner will be announced on / about October 3, 2007.  This gives us time to verify all the links and emails.  The winner will be announced on the forum with a link to his / her blog or MyBlogLog Community if appropriate.  The winner will be contacted by LoudExpressions via email with a serial number to Expression® Web.

Miscellaneous

You can have up to four "points" - one for the blog, two for MyBlogLog and one for Technorati. 

LoudExpressions is Looking for Bloggers

If you like to write about Microsoft®, Expression® Web, Expression® Studio, Expression® Blend, Expression® Design, or Expression® Media, please contact us.  We will be happy to set up an account for you to add your posts to.  We prefer blogs relating to Microsoft® and the Expression® products.

If you would like, we will try to even do a video of your example to help others learn the Expression® Suite.

What's In It For You?

You will get promoted on our website and you will be able to help people with adjusting from Frontpage to Expression®.