Expression® Web Design

Easily Create a Copy of a Web Page in Expression Web

Saturday, January 17, 2009

There are many times when you want to have a backup copy of the web page you are working on.  For example, if you are having problems with the content being shown improperly, you might want to change some of the code.  But you want to have a copy of that web page in case you delete too much code or you delete the wrong code.

In Expression Web (and FrontPage), this is easily done by just highlighting the file, press CNTL-C (copy) and then CNTL-V (paste).  This will create another file with _copy(1) in the file name.  For example, if you copied default.html, the new copied file name would be default_copy(1).html.  If you copy the file more than once, the number will increase: default_copy(2).html.

To see an example, you can watch a video tutorial of creating a backup copy of one web page.

Folder List Task Pane

Saturday, January 10, 2009

The Folder List task pane is probably one task pane that you will have open all the time.  It allows you easy access to the files and folders of your Expression Web website.  The example to the right is a from Expression Web - Small Business 6.

File Icons

You will see different icons in the Folder List Task Pane, both for files and folders.  The file icons can vary on your system depending on default program you have set up to open that specific file.  You can see some examples of icons below

- This icon might represent an ASP file (Active Server Page) (usually .asp file extension)

- This icon might represent an ASP.NET file (usually .aspx file extension)

- This icon might represent your Dynamic Web Template (DWT) (usually .dwt file extension)

- This icon might represent a GIF file (image) (usually .gif file extension)

- This icon might represent your "home" page. This can easily be changed with Expression Web by right-clicking on the file and choose the "Set as Home Page" option.  Keep in mind that even though Expression Web (or FrontPage) thinks the file is your home page, server settings might need to be changed to reflect this page as your home page.  See Naming Your Web Pages for some information.

- This icon might represent an HTML or SHTML page (.htm, .html, .shtm, .shtml file extensions)

- This icon might represent a JavaScript file (usually .js file extension)

- This icon might represent a JPG file (image) (usually .jpg or .jpeg file extension)

- This icon might represent a PHP file (usually .php, .phtm, .phtml file extension)

- This icon might represent a file with the .sitemap extension

- This icon might represent a text file (usually a .txt file extension) - an example would be the robots.txt file

- This icon might represent an XML file (.xml file extension) - an example would be an XML Sitemap for search engines.

If any of the icons have a pencil on them (), this usually means that that specific file is opened in the Expression Web program.

Folder Icons

If the folder has a plus (+) sign beside it () - this means the folder contains other folders or files.  You can (left) click on the plus sign to expand the folder to see the other folders or files.  You can also (left) double click on the folder icon to open the folder.

If the folder has a minus / dash (-) sign beside it ( ) - this means the folder is open and any folders or files in this opened folder should be seen in the Folder List Task Pane.

The Right Click Menu

If you right click on a file name, you have many options that are available to you.  You can open the file with Expression With.  The "Open With" will offer you a couple of different programs to open the file based on the file extension and what you have set up on your operating system.  For example, a text file, you might be able to open the file with Expression Web (as text, html, or css), Notepad, or maybe even Excel. 

You can preview the page in a browser, but you might need to Site - Site Settings.  In the Preview tab, you can choose "Preview using website URL" which should open the web page in a browser locally. Or you can choose "Preview using custom URL for this website" and enter your domain name (http://www.loudexpressions.com).  This will have the file open basically on the server without you switching to another program, entering the address in the address bar, etc.  It will save you some time if you rely on seeing your pages on the server.

You can also choose to "Publish Selected Files" which will publish (or FTP) that file to the server.  This might save you some time if your website is fairly large and needs time to check all the files against the local files.  If you choose "Don't Publish", you might notice a red X in the icon () - this means that if you publish or synchronize your website, this particular file will not be published.

Changing File Names

You can easily change a file name by right-clicking on the file and choose Rename.  When you do this, you will see the entire file name highlighted (unlike when you try to Rename a file through Windows Explorer, only the file name is highlighted and not the file extension - saving you potential problems if you accidentally change the file extension).

But don't worry - Expression Web has something built in to help you out.  It will usually ask you "If you change a filename extension, the file may become unsuable.  Are you sure you want to change it?"  If you choose no, the file name will not change.  If you choose yes, the file name will change to the name you entered.

If, for some reason, you do not have Expression Web managing your website with the metadata, you might get another error message: "Renaming a file or folder will break any hyperlinks to it in the current  Web site.  To avoid this problem, on the Site menu, click Site Settings, and then select the check box to manage the site using metadata files.  Do you want to continue?"  If you choose no, you will be able to change the site settings.  If you choose yes, the file will be renamed and any relative paths to the file will not be updated.

Dynamic Web Template

Friday, January 09, 2009

Expression Web offers the webmaster something that is called a Dynamic Web Template (DWT).  One of the things to remember about a DWT, is that it requires the user to turn on the metadata.  We spoke a bit about this previously in FrontPage Server Extensions (FPSE) and FrontPage WebBot Components.  Before even starting a DWT file, go to Site - Site Settings to make sure that "Manage the Web site using hidden metadata files" is checked.  If not, then any changes you make to your DWT file might not be applied to all pages, only pages that are opened.  You will also be unable to edit the DWT, change the editable regions, or add editable regions until this option is activated.

If this option is not checked, _vti_cnf and _vti_pvt folders / files will not be created.  These folders can be just as important as they were in FrontPage if you rely on Expression Web to help you create / maintain a DWT, some hyperlink management features, and some website reports. 

Usually when you create a new website in Expression Web, this option will be checked automatically.

Unable to Make Changes to DWT

If you find that you cannot make changes to the DWT or changes or not being applied to all pages in your website, the metadata files might be turned off.  Usually when you open the DWT file, you will get the error message "Microsoft Expression Web Information to the Folder: Changes made to this Dynamic Web Template will not be applied to any attached pages, except if they are open for editing.  To avoid this problem, on the Site menu, click Site Settings, and then select the check box to manage the site using metadata files."  Choose OK to add the metadata to your Expression Web website.  Also, do not check "Don't show this message again" in case you accidentally choose no.  Go to Site - Site Settings to make sure that "Manage the Web site using hidden metadata files" is checked. 

Also, go to Site - Recalculate Hyperlinks just to verify Expression Web has added the correct metadata to your Expression Web website.

Add Expression Web Information to the Folder

If you go to Site - Site Settings and see that  Manage the Web site using hidden metadata files is not checked, check the box and hit OK.  When you do this, you get another dialog box: Add Expression Web Information to the Folder: Expression Web needs to add information to your folder in order to help manage your Hyperlinks and other Web Site Content.  Do you want to add Expression Web information to 'your website location'?"  Choose yes to add this information.  (Once again, don't check "Don't as me this again" just in case you slip and choose no.  Now go to Site - Site Settings to make sure that "Manage the Web site using hidden metadata files" is checked.

You will also noticed that Recalculate Hyperlinks is now located in the Site menu when you have the "Manage the Web site using hidden metadata files"

Reset Workspace Layout

Thursday, January 08, 2009

On the menu of Expression Web, there is one menu item called Task Panes (ALT-K).  This workspace has a few default task panes opened when you start Expression Web:

1. Folder List
2. Tag Properties
3. CSS Properties
4. Toolbox
5. Apply Styles
6. Manage Styles

These task panes will help you create, manage, delete, add styles (internal, external, inline) along with adding some Form Controls (both HTML and ASP.NET), Media, Navigation, Validation, and many more items. 

Resetting the workspace layout will not delete any pages / files / code from your Expression Web website.  It will only change the way Expression Web looks.  It might remove some task panes or add a few Task Panes.  Any Task Panes that is not needed can easily be closed by either clicking on the X in the upper right corner of that Task Panes, or by going to Task Panes (ALT-K) and then checking (or unchecking) the proper Task Panes.  You will notice that your workspace that you use to create your web pages might increase if you delete some Task Panes or decrease if you add more Task Panes.

You can also see a screen shot of Expression Web with the basic Task Panes when you reset the workspace layout.

Task Panes

Wednesday, January 07, 2009

Expression Web has a few menus at the top.  You probably see them and might not ever use any of them.  They are called File, Edit, View, Insert, Format, Tools, Tables, Site, Data View, Task Panes, Window, and Help.  These menus will help you do quite a bit with your website, like saving pages, find / replace (text / code), insert hyperlink, check for spelling errors, and of course help you with using Expression Web.

You can close some of these task panes by clicking on the X that is in the upper right hand corner of that particular task pane.  There are a few task panes that you can be shown while working in your Expression Web website.  These task panes can help you easily manage different elements, form controls, CSS properties, etc.

When you click on Task Panes, some might have a checkmark beside them.  These are task panes that are shown in Expression Web.  For example, you can see that I have the Folder List, CSS Properties, Manage Styles, Toolbox, and Find 1 task panes opened.  You can close the ones you do not need to have more room possibly for editing your website.

• Folder List:  This helps to show the pages and folders in your website.
• Tag Properties:  This task pane allows you to see all of the attributes set for that particular element and gives you the ability to modify or add new attributes.
• CSS Properties:  You can easily see all the styles for the element that is highlighted at the time and all the values of those styles.
• Layout Tables:  Allows you the tools needed to create and modify tables.
• Apply Styles:  This task panes lists the styles that are defined in that page - internal or external.  It enables you to apply, remove, rename, delete, and modify styles.  You can also attach (or detach) external style sheets.  You can also select all instances of a style.
• Manage Styles:  You can modify, rename, apply, and delete styles.  You can also attach or detach style sheets with this task pane.
• Behaviors:  You can add behaviors to elements and manage behaviors that have been added to those elements.
• Layers:  This task pane will help you see all the divides that are set absolute or relative in that web page.  You can also add or delete divides and modify these divides.
• Toolbox:  This pane will allow you to drag HTML elements, form controls, and .NET controls to your web page.
• Data Source Library:  If you are using any data connections (like XML or databases), you can add, edit, or delete these connections.
• Data Source Details:  This task pane helps to display the hierarchy and contents of your XML file.
• Conditional Formatting:  This task pane helps you to customize the formatting of the XML data in a Data View.  You can also choose whether or not the data is displayed and how it is displayed.
• Find 1:  This task pane helps you to search multiple pages in the website.
• Find 2:  This task pane allows you to search the multiple pages in the website without losing the information from the first search (Find  1 Task Pane).
• Accessibility:  This task pane helps to create accessibility reports for pages in your website.
• Compatibility:  This task pane helps to check HTML / CSS pages for possible code errors and incompatible code based on the DOCTYPE.
• Hyperlinks:  This task pane will help list the status of the hyperlinks and paths to let you know if they are broken, ok, or unknown.
• CSS Reports:  This task pane will help you display a report of possible style errors or the type of styles that are being used.
• Reset Workspace Layout:  When you first start Expression Web, the Folder List, Tag Properties, Apply Styles, and Toolbox task panes are shown on either side of the editing window.  They are usually "docked" but can be moved or closed.  If you accidentally move a task pane to an area that you cannot see or resize, you can use this menu item to reset the workspace.

Reset Workspace Layout

This menu item can become your best friend if you accidentally move a task pane behind another task pane, making it inaccessible.  Choosing this option will reset the workspace of Expression Web back to the Folder List, Tag Properties, Apply & Manage Styles, and Toolbox task panes.

Downloading a Website Using Expression Web and FTP

Saturday, December 13, 2008

If you have just purchased a new computer with Expression Web, you probably want to work on your website.  There are a few ways to get your website to your new computer.  If your website is small enough and does not have any FrontPage webbots that require FrontPage Server Extensions (FPSE) to function, you can use the FTP program built into Expression Web.

First, go to File - New - Web Site and choose Empty Web Site in the New dialog box.  You will also have the opportunity to specify the location on your computer.

Once this is done, go to Site - Remote Web Site.  Now you should see Remote Web Site Properties on the right hand.  Click on this and the Remote Web Site Properties dialog box will open.  Choose FTP and enter the FTP location and possibly the folder (check with your hosting company for this information). 

Once this is entered, choose OK.  Another dialog box will come up asking you to enter a user name and password.  If you have Expression Web 2, there is a checkbox asking if you would like Expression Web to remember your password.  You can click this option and it will actually remember your password.  (Expression Web 1 unfortunately would not remember your password.)

Once this is done, you should see the files and folders of your website in the right panel.  The middle panel should be empty.  You can choose to synchronize the files or choose both arrows to synchronize the files.  You can also highlight all the files / folders and hit the arrow that points to the left.  Depending on your connection and how large your site is, it could take a couple of minutes to hours.

There is also the video tutorial of downloading your website from the server to your new computer using Expression Web & FTP or you can also check out the other post titled New Computer and Expression Web.

Using FTP in Expression Web

Tuesday, November 18, 2008

Once you are done with your new web site in Expression Web, chances are you will want to get those pages on your server.  One of the ways to accomplish this is to use FTP (file transfer protocol).  Expression Web will provide you a way to do this.

Before you start though, you will need to know the URL for the FTP server, the FTP username, and the FTP password.  You can get this information from your hosting company or the web hosting control panel.  Once you have this information, you are ready to begin.

Go to File - Publish in Expression Web.  In the Remote Web Site Properties tab, choose FTP for the Remote Server type.  For the Remote Web site location, you should be able to find this in your web hosting control panel.  The hosting company might call it the FTP URL or FTP access.

The FTP directory field might need a folder name in it.  For example, some hosting companies might set you up automatically with FTP access.  Usually this access includes some folders that are not accessible via the web browser.  If this is the case, you might need to enter a folder name, such as wwwroot.  Or you might be able to set up another FTP account, having it default to the correct path.

After you publish and your web site does not show up on the Internet, it could be a number of things.  If you are sure the domain has propagated to your hosting company, the FTP information that was entered might be incorrect.  For example, if you entered a folder in the FTP directory and one was not needed, your web site might be in that folder.

Let's say you entered wwwroot in the FTP directory but that was not needed.  Your web site would be seen at http://www.example.com/wwwroot.  To fix this, you would need to remove the wwwroot from the FTP directory in the Remote Web Site Properties and re-publish.  You will probably see a wwwroot folder on the server.  You might want to verify you are at the proper location before deleting this folder.

Could not locate a Web server

Could not find a Web server at 'ftp.example.com' on port 21. Please check to make sure that the Web server name is valid and your proxy settings are set correctly. If you are sure that everything is correct, the Web server may be temporarily out of service.

This error might come up if the FTP location is entered incorrectly.  It also might come up if the domain name has not propagated yet to the new server.  (If this is the case, the web hosting company should provide you with an FTP address to use that will point to their server.)

If you think everything is entered correctly, you might try to go to a command prompt on your computer.  To locate this, go to Programs - Accessories - Command Prompt.  This will open a window with a cursor in it.  In this window, type in telnet ftp.example.com 21 and hit the Enter button.  The screen should go blank and then tell you what FTP server the hosting company is using, for example something like 220 Serv-U FTP Server ready.

If it says something like Connecting To ftp.example.com… Could not open connection to the host on port 21: Connect failed, you might want to verify the FTP location / URL again with the hosting company.

You can also watch a video on connecting to your FTP server with Expression Web.

Create a New Web Site in Expression Web

Monday, November 17, 2008

To create a new web site in Expression Web, go to File - New - Web Site.  This will open the New dialog box with the Web Site tab activated.



You can then choose Empty Web site to have Expression Web create a web site with no pages added.  In the specify the location of the new Web site, make sure you enter the name of the web site.  In the example above, the folder mysite will contain the web site that just created. 

If you go to the location via explorer on your computer, you will see the folder mysite has a globe in the middle.  This helps you to know Expression Web (and Frontpage) considers this to be a web site.  Expression Web will create the links (paths) that you use for hyperlinks and images in your web site.  For example, if you notice the path in the anchor tag (<a>) has information pointing back to your computer, Expression Web might not recognize the folder as a web site.

You can also watch how to create a new web site in Expression Web.

File Includes

Tuesday, March 18, 2008

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.

Copying a Page Easily

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

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

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

Images for your Web Site

Tuesday, March 11, 2008

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

Types of Images

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

Free Images

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

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

Royalty Free Images

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

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

Rights Managed Images

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

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

Web Sites that Have Free Images

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

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

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

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

Web Sites that Have Royalty Free Images

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Expression Web 2 Beta

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

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

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

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

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

Managing Your Style Sheet

Thursday, March 06, 2008

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

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

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

Add a Property to an HTML Element

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

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

Moving Styles

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

Add a New Style to an HTML Element

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

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

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

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

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

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

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

Choosing a DOCTYPE

Tuesday, March 04, 2008

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

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

you might have seen

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

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

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

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

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

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

Choosing a DOCTYPE

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

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

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

at the top of your source code.

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

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

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

How to Create a Style Sheet

Tuesday, February 26, 2008

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

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

Adding Styles to your Style Sheet

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

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

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

Setting a Property

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

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

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

Preview

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

Description

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

A Bit More Information on CSS

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

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

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

Add Rotating Ads to Your Website

Tuesday, January 22, 2008

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

Create the XML File

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

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

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>http://www.milehighmerchantaccount.com/images/
first-data-logo.gif</ImageUrl>
<NavigateUrl>http://www.milehighmerchantaccount.com/</NavigateUrl>
<AlternateText>Accept Credit Cards</AlternateText>
</Ad>
 
<Ad>
<ImageUrl>http://www.loudvoicesystem.com/images/voice.gif</ImageUrl>
<NavigateUrl>http://www.loudvoicesystem.com/</NavigateUrl>
<AlternateText>Toll-Free Virtual Offices</AlternateText>
</Ad>
 
<Ad>
<ImageUrl>http://www.loudfax.com/images/logo.gif</ImageUrl>
<NavigateUrl>http://www.loudfax.com/</NavigateUrl>
<AlternateText>Toll Free Fax Numbers</AlternateText>
</Ad>
</Advertisements>

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

Insert the .NET AdRotator

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

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

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

Create a Hyperlink

Wednesday, January 09, 2008

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

In the source code, you will see something like

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

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

Open a New Window

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

target="_blank"

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

Linking to a PDF or Other File

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

In the source code, you will see something like

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

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

Customizing the Toolbar

Tuesday, January 08, 2008

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

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

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

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

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

Adding an Image

Saturday, January 05, 2008

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

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

alt attribute

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

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

Picture Properties

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

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

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

Video Tutorial on Adding Images

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

Browser Problems with the alt attribute

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

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

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

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

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

Step By Step with Expression Web

Thursday, January 03, 2008

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

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

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

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

Create a Backup Copy of Your Website

Saturday, December 01, 2007

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

Using Files from Your Backup Copy

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

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

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

Images Do Not Appear on My Website

Wednesday, November 28, 2007

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

Image File Name

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

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

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

But if you see something like

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

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

Case Sensitive

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

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

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

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

You might also try to clear your temporary Internet files.

Getting More Help

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

How to Make a Link Open into a New Page

Saturday, October 20, 2007

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

target="_blank"

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

There is no Attribute "TARGET"

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

I use

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

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

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

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

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

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

Moving a Site to a New Computer

Thursday, October 18, 2007

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

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

Microsoft Expression Web

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

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

Microsoft Frontpage

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

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

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

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

Creating a Form

Sunday, September 09, 2007

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

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

Form Processing with Jmail

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

Creating the Form

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

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

Adding a Field

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


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


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

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

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

Formatting Cells in Expression Web

Friday, August 31, 2007

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

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

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

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

Apply a Style Sheet

Monday, August 27, 2007

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

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

Adding a Style

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

Inserting an Image to Your Webpage

Friday, August 24, 2007

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

Using Frontpage

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

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

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

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

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

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

Publishing From Remote Server to Local Computer

Expression Web can copy files from the web server, just like Frontpage did.  Expression Web can copy these files using FTP or Frontpage Server Extensions, just like Frontpage did.  This is extremely helpful if your computer crashes and you need to retrieve the data from the server.

Assuming you have created the website already on your computer, you can easily set up the connection information in the Remote Web Site Properties.  This is where you can use FPSE or FTP, depending on your hosting company.  If you have used Frontpage guestbook, hit counter or any other FPSE components like:

• Confirmation Field
• Discussion Form Handler
• FrontPage created server-side Image Maps
• Registration Form Handler
• Save Results Form Handler
• Scheduled Image
• Scheduled Include Page Component
• Search Form
• WebBot Registration component
• WebBot Discussion component
• WebBot Save Results component
• WebBot Search component
• WebBot Scheduled Include component
• FrontPage created server-side Image Maps
• WebBot Confirmation Field component
• WebBot Scheduled Image
• Nested subwebs
• Lightweight Source Control (document check-in/check-out without Microsoft Visual SourceSafe for Windows)
• Categories component
• StyleSheet links to multiple files or Active Server Pages (ASP) files

For more information review:

• FP98: List of FrontPage Components That Require Server Extensions
• List of components in FrontPage 2000 that require FrontPage 2000 Server Extensions
• Lists of components in FrontPage 2002 that require FrontPage 2002 Server Extensions

You can choose what files to publish or synchronize the files (this will help if you have multiple users updating files) to publish from the remote server to the local computer.  Synchronizing is supposed to review the data files that Frontpage and Expression Web creates to know what files should be updated.  It is a good idea to always have a backup copy as well, just in case.

Expression Web and FrontPage Community

Tuesday, August 21, 2007

Expression Web & FrontPage Community are finally opened.  The same guys and gals that ran the Expression Web and Frontpage Forum on Time for Web are now at Expression Web & FrontPage Community thanks to Community Server.

Stop by, register, and say hello in the Who Are You? zone.

Create a New Web Site in Microsoft Expression Web

Tuesday, April 10, 2007

To create a new website in Expression Web, just go to File --> New --> Website.  In the dialogue box that opens, choose the Web Site tab.  Now you have choices between General and Template.  Let's discuss the choices in the General tab.

General Options when Creating a New Web Site in Expression Web

Expression Web will give you a few different options choices

• One Page Web Site
• Empty Web Site
• Import Web Site Wizard

One Page Web Site

The One Page Web Site option will basically create the web site and the files that Expression Web helps to maintain the web site.  It will also create a default.htm file with a DOCTYPE - so more needing to go in to change the default template that Expression Web uses.

Empty Web Site

The Empty Web Site option will create a web site that can be maintained in Expression Web. 

Import Web Site Wizard

The Import Web Site Wizard will allow you to import a web site from another (remote) location.  This can be useful if you have a web site on the server and you would like to have a copy / back-up on your local computer

Microsoft Expression Web Free Trial

Thursday, March 08, 2007

Microsoft is offering a free 60 day free trial offer from their website. If you are curious to see how Microsoft Expression Web works, this is a good opportunity for you to download Expression Web.

I highly recommend Expression Web if you are interested in compliant XHTML and HTML code.

Image in the Address Bar

Wednesday, February 07, 2007

Since Microsoft Internet Explorer introduced their latest version, more and more questions are coming up regarding that little image in the address bar.  This image is called a favicon and has always been there, just some browsers did a much better job at displaying it than Internet Explorer 6.0.

Usually to make the image show up, put this information into the <head> of the document:

<link rel="shortcut icon" href="/images/favicon.ico"
type="image/vnd.microsoft.icon" />

or

<link rel="shortcut icon" href="/images/favicon.ico"
type="image/x-icon" />

Now, you can also just upload your favicon.ico file to the root and not add anything to your file.  The icon should show up in the address bar.  

If you are using HTML as your DOCTYPE, then use

<link rel="shortcut icon" href="/images/favicon.ico"
type="image/vnd.microsoft.icon">

since HTML elements do not need to be closed like XHTML.

Creating the FavIcon

There are several ways to create a FavIcon. One program is called Microangelo Toolset.  There is also Irfanview which is a free tool.  

MIME Type for the FavIcon

You can also contact your hosting company to verify they support favicons and to see what mime type they have the favicons set up to be. Usually it is image/vnd.microsoft.icon, but for compatibility, you can use image/x-icon.  Most major browsers though will support image/vnd.microsoft.icon since it is a IANA-registered MIME type.

More Information on the FavIcon

Check out some of these theads on FavIcon: Favicon - Should I use it? and FavIcon.

Microsoft Expression Web

Saturday, January 06, 2007

This is one of Microsoft's newest web-related product.  I don't want to confuse it with Frontpage (a tool that helped businesses easily create a website).  Microsoft Expression Web helps users create compliant XHTML code.  Unfortunately, it has gotten rid of most of the bots and does not rely on Frontpage Server Extensions (FPSEs).  You can still publish with Expression Web with http to help maintain the FPSE on the server.

Hosting and Expression Web

Since you no longer have the need to use FPSE, you can use File Transfer Protocol (FTP) to upload your website.  FTP is how "the others" uploaded their website, either with an FTP program like FileZilla or even with a browser.  Expression Web will create some .NET code (like Frontpage helped you create some ASP code).  If you are going to be using .NET, I would suggest you consider a Windows server though.  Some versions of UNIX / Linux servers might be able to handle some ASP / .NET code, but it is usually better to run those on it's native platform.  A site that is built though in Expression Web with just htm / html file extensions, could be hosted on almost any server at any hosting company.

Chances are, you will need to get code for a contact form if you were relying on FPSE to process the form for you.  Your hosting company might even have some code as well.

Relying on Frontpage

The first thing to do is to think what you have been relying on with Frontpage, i.e. forms, the navigation bot, a search bot, etc.  And then if you would like to keep some of those, you can find code to help you.  And we will go through all of that later.