Expression® Web Design

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.

XML Sitemaps

Saturday, November 24, 2007

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

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

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

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

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

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

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

Custom Form Tutorial

Thursday, November 01, 2007

For the record, although you will see separate links for form properties, form field validation and custom confirmation page, they will all follow the process from this tutorial and use the same form fields.

Let's build a custom form without the Form Page Wizard

I started building my forms freestyle before I ever discovered the Form Page Wizard. I found building forms to be frustrating, aggravating and at some times even pointless. I knew absolutely nothing about forms and like a lot of people, put together a form field such as a text box and a submit button and thought that I had a form.

Wrong.

After a great deal of difficulty, I finally got a handle on things. To help you avoid some of the frustration I encountered, I put this site up.

So, let's get started.

Remember to save your page after every few form field additions.

Begin by opening a new page. Make sure your new page is in a website you have published. If you are unsure about starting a web, to start one go to File >> New >> Web

Place your cursor in page view where you wish the form to appear.

We are using FrontPage 2000 to build our form, but the concept is the same for FP 2K, 2002 and 2003. Our intent here is to assist you in building a form that will submit in email and optional file.

My preference is to work with my forms inside a borderless table set to 70-80%. You might then also nest a 2 column table inside this one. set also to 70-80%. The left cells for the form labels e.g. Name, Email etc. For this example, I will be skipping this process.

Go to "Insert", "Form" and then select "Form" again from the expanded menu as in the following example. While your cursor is still in the form, hit enter a couple of times to give yourself some working room.

This will give you what you see below.


Depending on which version you use, you will see either a dashed or dotted line surrounding the Submit and Reset buttons. This is the form surround. If you take a look at the HTML/Code view, you will notice the beginning and ending

tags. These are represented in page view by the dashed/dotted line. If you form fields and buttons are not inside the surround, then they will not be part of the form.

Now let's place the following list of labels inside the form.



Name:

Address:

City:

State:

Zip:

Phone:

Level of education:

Your Favorite Color: Red Yellow Blue Green Black Purple Pink

What pets have you had in your life: (select all that apply) Dog Cat Bird Fish Gerbil Hamster Mouse Reptile

Tell us about your most embarrassing moment:



Now we have this. You will see your labels are butted up to the left margin.

Now place your cursor after Name and go to "Insert", "Form" and select "Text box".

The text box should now appear after Name. You will do the same for Address, City, State, Zip and Phone. Resist the temptation to copy and paste the Text box you just inserted by Name, as this will result in multiple fields with the same name and mess up your results. Use the Insert function to place a text box next to each of these items.

When you have finished this, take a look at the form field properties of each by double clicking inside the text box itself and selecting "Form Field Properties" from the menu.

You will see by checking the field properties of each, that Name is T1, Address is T2, City is T3 etc. This was done automatically by FrontPage as you were adding the components. If you had copied and pasted the first field over again instead of using Insert, they would all be T1 and the results would be jumbled together. Since Name, Address, City etc. are obvious responses we will not do anything to the field properties. These can now be changed by highlighting T1, T2 and changing them to name, address etc.

Now place your cursor after level of education, go to Insert, Form and select "Drop-Down Menu".


The blank menu should now appear. Then we go once again to "Form Field Properties" by double clicking inside/on the drop-down menu field. You will see the following:


Hit the Add button, Type Education Level into the "Choice" text area, de-select "Specify value" and for the "Initial state:" check "Selected". Now when viewed, the menu will display "Education Level" instead of one of our choice options. If you wish, while you are there, you could change D1 to education_level. Killing two birds with one stone


Now, one at a time we will add the following items (in this order)

GED, High School, Some College, Associates Degree, Bachelors Degree, Masters Degree and PhD

Here is the example for GED. In these new additions, check "Specify Value: and check also "Not selected".


Ok, lets move on to Favorite Color. Place your cursor in front of Red, go to "Insert", Follow this process until you have all of the additions. If you wish, switch to preview to see your menu selections. Education Level should be the one appearing first, if you followed the instructions correctly. "Form" and select "Radio Button".

Only do this for Red.

Now, remember when I said not to copy and paste?

We are going to ignore this rule for favorite color.

I want you to copy the Radio Button in front of Red and insert it in front of the remaining colors. By doing this all fields will now be R1. We are doing this because we want a single choice form this group of choices. If we subsequently added another group with a single choice following this, we would want it to be R2 or same name for all choices.

Of course you could use names like favorite_color, favorite_food instead of R1 and R2. If the choice is obvious when I receive the results, I stick with the default. In this case I chose favorite_color. See Below.

Reminder, again: Be sure to separate words with underscore rather than spaces.

I will likely repeat this again. This rule applies to field names, Group names, page names, image names etc.

Now, right click each button and name the value the same as the color choice. In this case, our Group Name will be favorite_color. Then label them Red, Yellow, Green respectively as the Value. By naming the Group the same for each radio, we limit the user to a single choice.


Now Insert a Check box before each of the pet selections by going to "Insert", "Form" and choose "Check box" from the expanded menu. If you do not see Check box immediately, expand the menu. By using insert for each choice, we allow our user to choose more than 1 pet from the category. So although you could leave these C1, C2 etc, I chose to use the Name and Value the same.

One last field to add and this is a Scrolling Text Box or Text area if you will.

Now place your cursor after moment: , hit enter and go to "Insert", "Form" and select "Scrolling text box".

Let's change the size of the Scrolling text box as in the example below.


Just a note here: Generally speaking, no matter where you place your Text Areas in your form, they will all appear at the end of form results when you receive the email. Don't fret, it is just a FrontPage idiosyncrasy.

Now your form should look like this if you followed along closely.

Setting Up Reply To Line in a Frontpage Form

Friday, December 15, 2006

When you open your FrontPage form mail, you will notice a default "From" address. This is because the form submission is actually coming from your site, rather than the person who fills out the form. The way to get the users email in the Reply to line is to follow the method below.

1. Right click inside the Form proper (the dashed or dotted line around your form).
2. Select "Form Properties".
3. Select "Options".
4. Then "E-mail Results" tab.
5. Under "Email message header:" "Reply-to line:" check "Form field name" and type the field name for your user email exactly as it appears in Form field properties.
6. Save and republish.
7. Now when the email is opened, the form will still be sent by the site, but the Reply to will be the users email.