Expression® Web Design

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.

File Includes

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

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

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

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

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

File Includes

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

Server Side Includes

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

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

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

ASP Server Includes

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

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

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

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

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

PHP Server Includes

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

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

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

ASP.NET File Include

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

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

JavaScript Includes

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

For example, if you HTML code was something:

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

Then the JavaScript file would look something like

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

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

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

This even sounds more complicated than the others as well.

Some of the Differences between FrontPage Includes and Server Side Includes

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

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

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

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

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

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

Replace Options

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

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

Find What

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

Replace With

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

Search Options

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

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

Advanced

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

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

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

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

Adding / Changing Code More Often

If you find yourself adding / changing the source code more often than not, you might consider looking into server side includes.  This will allow you to change one page and have it be updated on all the pages that have that include directive.  FrontPage WebBot Components have a FrontPage Include that you might consider as well and they do not rely on FrontPage Server Extensions.  If you are working with Expression Web, you might consider using a Dynamic Web Template.

Problems with FrontPage Forms

Users will encounter problems with a FrontPage form they want to be processed by FrontPage Server Extensions (FPSE) if they FTP it to the server.  FrontPage forms need to be published to http://www.example.com (of course changing this to your domain name). 

Some users will tell you to publish to http://example.com (notice there is no www).  This might work on a number of servers and hosting companies but it seems GoDaddy does require the www in the publishing.

FrontPage forms require special handling.  If you FTP your FrontPage form, there will be numerous problems.  Check out FrontPage Form Errors for some more specific information.  And don't forget the FrontPage Section!

Copying a Page Easily

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

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

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

Images for your Web Site

Tuesday, March 11, 2008

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

Types of Images

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

Free Images

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

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

Royalty Free Images

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

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

Rights Managed Images

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

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

Web Sites that Have Free Images

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

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

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

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

Web Sites that Have Royalty Free Images

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Expression Web 2 Beta

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

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

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

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

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

Managing Your Style Sheet

Thursday, March 06, 2008

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

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

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

Add a Property to an HTML Element

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

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

Moving Styles

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

Add a New Style to an HTML Element

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

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

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

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

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

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

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

Choosing a DOCTYPE

Tuesday, March 04, 2008

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

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

you might have seen

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

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

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

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

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

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

Choosing a DOCTYPE

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

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

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

at the top of your source code.

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

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

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