Lisa Wollin : Tips and Tricks

Working with Access databases that live outside of a Web site

lisawoll — Wed, 20 Jul 2005 02:40:00 GMT

We had a customer recently, who needed to access an Access database from both a classic ASP page and from another Access database. To prevent the database from being locked by IIS, the customer wanted to know if they could move the database out of the Web site directory. By default, FrontPage expects the database to be in the Web site. However, when they did this, it seemed to break FrontPage’s ability to work with the database connection as Front Page.

Bernardo Iturriaga Dubost, one of the FrontPage testers, came to the rescue of this customer. Here's his response:

The main reason that FrontPage stores the .mdb files in the web is so that you don’t need to access to the Web server to access the data in a database. However, you can provide dual access to a database by using a system DSN, and then using the DSN in FrontPage to connect to the database. Here's how:

First, you need to create a system DSN on the Web server that hosts the Web site:

From the Start Menu, click All Programs.
Select Administrative Tools, and click Data Sources (ODBC).
Go to the System DSN tab.
Click Add.
Select the appropriate driver type (for example, MS access driver).
Click Finish.
Provide a name and a description for the DSN.
Click Select the navigate to the actual .mdb file located in another folder on the server.
Click Ok when you're finish selecting the database.
In most cases this is enough, but if the database requires a password, you'll need to provide one. To do this, click Advanced and provide the password.
Click Ok again to create the DSN.

After you're finished, you'll see your new named DSN listed on the System DSN tab of the ODBC Data Source Administrator.

Next, you need tell FrontPage to use the DSN to connect to the database.

Start FrontPage and open the Web site.
From the Tools menu, click Site Settings.
On the Database tab, click Add.
In the dialog select System Data source on web server.
Click Browse. FrontPage displays a list of system DSN on the Web server.
The connection that you created in the previous steps should be there, select it and click Ok.
Click Ok to the Site Settings dialog box, this will add the connection string to the global.asa file in the Web site.
You can now use this connection to the database for database features in FrontPage for both ASP and ASP.NET.

Please note that in order to do this, you need to have access to the actual server that hosts the Web site. One benefit of this configuration is that you can have different permissions for the Web site and for the folder that contains the .mdb file. Please also note that for the users to get data when they browse, MACHINENAME_IUSR needs to have the appropriate read/write access permissions to the .mdb file; otherwise there will be an error.

Password Protecting Web Pages

lisawoll — Sat, 25 Jun 2005 01:56:00 GMT

John Jansen, one of the FrontPage testers, sent me these three different ways to password protect pages in FrontPage.

Using a FrontPage site template and ASP
Using Code Snippets
Using ASP.NET

To password protect pages using a FrontPage site template and ASP

Here are specific steps to password protect pages using features built into FrontPage:

From the File menu, click New.
From the Web Site tab, select FrontPage Server Templates from the first list, and then select Database Interface Wizard from the second list.
Type the location where you want to put your password protected page. This must be an Windows Web server running IIS.
Click OK.
In the Wizard…
1. Click Next to create an ASP solution.
2. Click Next to use the default name for the connection.
3. Click Next to use the default columns in the table.
4. Click Next after the DB is created.
5. Click Next to use the default table.
6. Check the box to use a Database Editor.
7. Click Next.
8. Choose a password and enter it.
9. Click Next.
10. Click Finish.
After FrontPage finishes building the site, all of the necessary code for password protecting pages has been generated. In order to protect any new pages, simply put the following code:
```

<%
If Session(SiteId) <> true Then
Response.Redirect(“login.asp?requester=”)
End If
%>
```
above the <HTML> tag on any page and save as .asp.

To password protect pages using Code Snippets

Here are steps to create password protected pages using code snippets:

Create a new site in FrontPage.
Create a new page and switch to Code view.
Delete all the code in the new page.

Paste the following code as a code snippet.

<%
Username="user"
Password="pass"
' if any of the variables do not match, create error message
if Request.Form("login") <> Username or Request.Form("password") <> Password then
    MsgErr = "<h3>Authorization Failed.</h3>"
    Response.Write MsgErr
    ' if correct, set the session variable and proceed
Else
    Session("someStringValue") = true
    ' redirect
    If Len(Request("requester")) > 0 Then
        Response.Redirect (Request("requester"))
    Else
        Response.Redirect "protected.asp"
    End if
End if
%>
<html>
<head>
    <title>Results -- Login</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
</head>

<body bgcolor="#FFFFFF">
    <FORM ACTION="login.asp" METHOD="post">
    <h3>Login</h3>
        <TABLE BORDER=0> 
            <TR>
                <TD ALIGN="right">User name:</TD>
                <TD><INPUT TYPE="text" NAME="login" size="10" VALUE=''/></TD>
            </TR>
            <TR>
                <TD ALIGN="right">Password:</TD>
                <TD><INPUT TYPE="password" NAME="password" size="10" VALUE=''/></TD>
            </TR>
            <TR>
                <TD><input TYPE="hidden" NAME="requester" VALUE="<%=Server.HtmlEncode(Request("requester"))%>"></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD align="left"><INPUT TYPE="submit" VALUE="Login"/></TD>
                <TD></TD>
            </TR>
        </TABLE>
    </FORM>
</body>
</html>

Save page as login.asp.
Create a new page and switch to Code view (or do this with any page you want to protect with a password).

Above the opening <html> tag, paste in the following snippet.

<%
If Session("someStringValue") <> true Then
    Response.Redirect("Login.asp?requester=protected.asp")
End If
%>

Save this page as protected.asp (or replace the requester text above from protected.asp to the page name you are protecting).
Browse to protected.asp.

To password protect pages using ASP.NET

Here are steps to password protect pages using ASP.NET:

Create a new page in your Web site and switch to code view.
Select and delete all the code in the page.

Paste in the following code.

<html>
<body>
    <h1>Please Log In</h1>
    <hr>
    <form runat="server">
    <table cellpadding="8">
        <tr>
            <td>User Name:</td>
            <td><asp:TextBox ID="UserName" RunAt="server" /></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><asp:TextBox ID="Password" TextMode="password" RunAt="server" /></td>
        </tr>
        <tr>
            <td><asp:Button Text="Log In" OnClick="OnLogIn" RunAt="server" /></td>
            <td></td>
        </tr>
    </table>
    </form>
    <hr>
    <h3><asp:Label ID="Output" RunAt="server" /></h3>
    </body>
    </html>
    <script language="C#" runat="server">
        void OnLogIn (Object sender, EventArgs e)
        {
            if (FormsAuthentication.Authenticate (UserName.Text, Password.Text))
                FormsAuthentication.RedirectFromLoginPage (UserName.Text, false);
            else
                Output.Text = "Invalid login";
        }
    </script>

Save the page as loginpage.aspx.
Create a new page and switch to code view.
Select and delete the code in the page.

Paste the following code into the new page.

<configuration>
    <system.web>
        <authentication mode="Forms">
        <forms loginUrl="LoginPage.aspx">
        <credentials passwordFormat="Clear">
    <user name="Bruce" password="Batman"/>
    </credentials>
    </forms>
    </authentication>
    <authorization>
    <deny users="?" />
    </authorization>
    </system.web>
</configuration>

Save the page as web.config.

And that’s all there is to that. Any aspx pages in the same folder as the web.config file are protected.

Creating a CSS File for your Web site

lisawoll — Tue, 01 Feb 2005 18:00:00 GMT

Dave Berry wrote an excellent article about Cascading Style Sheets (CSS) on MSDN (Using Cascading Style Sheets on Your Web Site), so I won't bore you with the details of CSS. However, one reader commented that the article didn't cover how to create an external CSS file. This is very easy, so here's how.

Say you have the following embedded style sheet on a page and you want to share the styles with other pages in your site. (See "Three Types of Cascading Style Sheets: External, Embedded, and Inline" in Dave's article.)

<style>
BODY
{font-family: Comic Sans, Verdana, Tahoma, Arial;
font-size: 10pt;
margin: 0em;}

P
{padding-left: 5;
padding-right: 5;}

H1
{font-size: 11pt;
font-weight: bold;
color: white;
background: #FF3399;
padding-top: 10;
padding-bottom: 5;
padding-left: 10;
padding-right: 10;}
</style>

All you do is copy the contents of the STYLE element (the text between the tags but not the tags themselves) into a new file. (In FrontPage 2003, you can create a new blank page, display the page in Code view, and paste the CSS code. In earlier versions, you can either use HTML view or Notepad.) Then save the file with a .CSS extension. I usually call the main CSS file for a Web site web.css just for the sake of consistency, but you can name it anything you want.

The contents of your new file should look something like this:

BODY
 {font-family: Comic Sans, Verdana, Tahoma, Arial;
 font-size: 10pt;
 margin: 0em;}

P
 {padding-left: 5;
 padding-right: 5;}

H1
 {font-size: 11pt;
 font-weight: bold;
 color: white;
 background: #FF3399;
 padding-top: 10;
 padding-bottom: 5;
 padding-left: 10;
 padding-right: 10;}

Once you have the CSS file, you can remove the STYLE element and it's contents from the first page, and add a LINK element or an @Import statement. I rarely have more than one CSS file for a Web site, so I generally use the LINK element (like the one shown below).

<link rel="stylesheet" type="text/css" href="web.css">

But if you anticipate using more than one CSS file in a Web site, you can use the @import statement, as shown in the following code:

<style type="text/css">
 @import url(web.css);
 @import url(page.css);
 </style>

Dave gives a great explanation of the difference between these two and what happens if two styles conflict with each other.

It really is that simple. Deciding which styles to use is much more difficult. I (personally) like the CSS attribute reference list on MSDN, but keep in mind that some of the CSS attributes listed are IE only (like the scrollbar styles). Plus, there are literally dozens of online CSS resources. Here are just a few that I found through the new MSN search. Try your own search and find your own CSS resources.

Customizing IntelliSense

lisawoll — Sat, 15 Jan 2005 03:29:00 GMT

If you've worked with Code view in FrontPage 2003, you've undoubtedly come to appreciate IntelliSense. But what if you need an element or attribute that isn't included in any of the default HTML schemas? For example, W3C accessibility guidelines include a headers attribute for TD elements. If you frequently use the headers attribute, love hand coding, and are tired of typing "headers" everytime you need to insert this attribute, this tip is for you.

Background

FrontPage uses XSDs (XML Schema Definition documents) to provide IntelliSense in Code view. In fact, this is the same as what Visual Studio uses to provide IntelliSense for HTML and XML schemas, and FrontPage even uses many of the schema annotations that Visual Studio uses. Schema annotations are contained in the schema definition (i.e., <xsd:schema ... >) listed at the beginning of an XSD. (For more information, see Visual Studio .NET Schema Annotations.) However, you should note that FrontPage does not use all of these annotations, so be careful using annotations or annotation values other those included in existing FrontPage IntelliSense schemas.

In addition, FrontPage provides IntelliSense only for HTML (including XHTML), not XML. So if you are inclined to playing with this feature by adding custom elements or using a custom XML schema, you may quickly find that IntelliSense for a selected schema won't function as expected or desired. However, making simple changes to existing HTML schema files (which I show you how to do in the procedure below) allows you to create some custom HTML IntelliSense.

You should also keep in mind that although changes you make may validate in Visual Studio or another XSD editor, FrontPage may not be able to understand them, which more than likely will break IntelliSense for all documents that use that schema. Whenever possible, work with the XSD source code (such as in Notepad or XML view in Visual Studio) rather than with a visual XSD designer and make simple changes.

Note Breaking IntelliSense does not mean that IntelliSense will not work at all. Rather, IntelliSense won't work for documents that use a specific IntelliSense schema that FrontPage doesn't understand. IntelliSense will work for other IntelliSense schemas. Simply select a different schema from the Schema Version option on the Authoring tab of the Page Options dialog box.

More important things to remember when playing with IntelliSense schemas are

always copy the schema file so that you don't overwrite the original schema making it impossible to recover the original schema without reinstalling FrontPage
always change the vs:friendlyname annotation value at the beginning of the XSD so that you can differentiate between existing schemas and your custom schema (this value shows up under Schema Version on the Authoring tab of the Page Options dialog box)
don't make too many changes before testing the schema in FrontPage (and always create a backup of your changes XSD before making additional changes in case an additional change breaks Intellisense)
never replace an existing schema with a custom schema (just in case a future service pack or update replaces this file, destroying all of your changes)

Procedure

Okay, now that you know all the gochas, the following instructions explain how to add the headers attribute to a custom IntelliSense schema. You can use these basic instructions to create additional IntelliSense schemas for FrontPage.

Close FrontPage.
Open Windows Explorer and navigate to:
C:\Program Files\Common Files\Microsoft Shared\OFFICE11\SCHEMAS\HTML
This folder contains the schema and type libraryfiles that FrontPage uses for IntelliSense. All the XSD files are IntelliSense. For example, ie3_2nav3_0.xsd contains IntelliSense for IE 3.2 and Netscape Navigator 3.0.
Copy IE5_0.xsd and change the name of the copied file to IE5_0_Modified.xsd. Copying makes sure that you don't overwrite the original file. DO NOT SKIP THIS STEP.
Open the new file in Notepad.
Note You can also use Visual Studio or another XSD editor. However, you should note that if you use something other than Notepad, you will need to view the source of the XSD in order to follow the remaining instructions.)
In Notepad, turn off Word Wrap (Format menu). (This makes the schema easier to read and work with.)
In the opening XSD statement, locate vs:friendlyname="Internet Explorer 5.0" and add the word "Modified" to the friendly name so that it reads: vs:friendlyname="Internet Explorer 5.0 Modified"
Search for: name="td"
Scroll down to the list of attributes for the TD element.
Add a new attribute for "headers". For example, add the following text under one of the existing attributes. (I placed it beneath the id attribute, but you can put it beneath any attribute for the TD element as long as you don't add it between the opening and closing tags of the attribute element for another HTML element.)
<xsd:attribute name="headers" />
Save the file.
Start FrontPage.
From the Tools menu, select Page Options.
On the Authoring tab, under Schema Version (at the bottom of the dialog box), select Internet Explorer 5.0 Modified.

If you did everything right, when you add a TD element in Code view, you will find the headers attribute listed in the IntelleSense. The IntelliSense feature in FrontPage is very sensitive, so if you don't follow these instructions exactly, it may break Intellisense for your schema. Also, you can't make changes to the XSD while FrontPage is opened (or rather you can, but if you do, Intellisense will not function properly). You need to reboot FrontPage before IntelliSense schema changes take effect.

Modifying the FrontPage Date/Time Web Component

lisawoll — Sat, 18 Dec 2004 01:16:00 GMT

If you've ever inserted a date or time using Date and Time on the Insert menu in FrontPage, you may have wondered how you can change the date and/or time format. Well, you're not alone. We recently had the following comment from a customer asking for just this kind of information.

I want to know the parameters that can be changed, and how to change them, such as language to use - my web server is in Germany but I want to display months in English, not German, and UK time, not German. and eg what do the following mean: s-format="%d %B %Y" and what are the options for these and other parameters.

Before I tell you how you can change the date and time formats, I should first explain that the date and time component is a server-side date and time component, which means that it displays the time on the server not the time on the client, so there's no way to specify a time zone (or in the case of the above comment, UK time instead of German time). However, formatting is another thing altogether. By changing the value of the s-format parameter, you can change how the date and time displays.

Let's backup a bit. When you insert a date or time using the Date/Time Web component in FrontPage, FrontPage inserts webbot code. This code looks somewhat like the following:

<!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%m/%d/%Y %I:%M %p" -->

The bot parameter specifies "Timestamp." This is what tells the FrontPage Server Extensions which Web component the webbot is using. You can't change this parameter without completely wiping out your date or time. (I know this seems like it should go without saying, but ... well, I've learned that almost nothing can go completely without saying.) However, the other two parameters, S-Type and S-Format, can be edited.

The S-Type parameter can have values of "EDITED" and "REGENERATED." Other values don't necessarily break the webbot, but they also don't mean anything. These are the only values that FrontPage generates from the Date and Time dialog box, but to be completely honest, I didn't really notice a difference between the dates and/or times that these two values generate.

S-Format can have any combination of several values, and the ones that you use will affect how the date and/or time displays. The following table provides a list of possible values and a description of each value. (By the way, casing is critically important here. For example, an uppercase M returns the minutes while a lowercase m returns the month.)

The examples in the following section use the following date/time as a guide:
Friday, December 17, 2004 06:29:42 PM

Parameter Value	Description	Example
%A	Day of the week in long format. (Date)	Friday
%a	Day of the week in short format. (Date)	Fri
%B	Month spelled out in long format. (Date)	December
%b	Month spelled out in short format. (Date)	Dec
%m	Month in number format. (Date)	12
%d	Day of the month. (Date)	17
%Y	Year in long format. (Date)	2004
%y	Year in short format. (Date)	04
%I	Hour in 12-hour format. (Time)	06
%H	Hour in 24-hour format. (Time)	18
%M	Minutes. (Time)	29
%S	Seconds. (Time)	42
%p	Shows PM or AM. (Time)	PM

You can create date and time formats using any combination of the above parameter values. In addition, as long as a percent sign (%) preceeds each parameter value that indiates a date or time element, you can use extra characters, symbols, and spaces between these parameter values. For example, you could create the date/time as shown in the example preceeding the table by using an S-Format value of "%A, %B %d, %Y %H:%M:%S %p".

Note You can use the percent sign (%) as a symbol by placing two percent signs together (%%). The FrontPage Server Extensions see this as an escape character sequence and display a single percent sign.

Before concluding, I should note that the date and time displayed when you use the Date/Time Web component is the date and/or time a page was saved NOT the current date or time on the server or a visitor's computer. For the current date or time, you would need to use server-side scripting, such as ASP, to get the server's date or time or client-side scripting, such as JavaScript, to get the date or time on the visitor's computer. (For JavaScript that displays the date and/or time, see Dates, dates, and more dates...).

Choosing Colors for your Web Site

lisawoll — Wed, 15 Dec 2004 00:11:00 GMT

Whether you're creating your first Web site or you're a seasoned Web designer/developer, choosing colors is always problematic. You want to make sure that the color gives the right impression. As Katherine Nolan points out in her article Color it effective: How color influences the user on Office Online, no color is either positive or negative. All colors have both positive and negative connotations. In her article, Nolan has a table that lists popular colors and their common positive and negative connotations in Western culture.

However, beyond the psychological meanings of colors within different cultures, choosing colors that complement and coordinate well with other images on your site and perhaps even your company logo can be difficult. Add to that the fact that while there may be millions of colors on the color spectrum, only a limited number of these display well in Web browsers. Colors that do are called Web-safe colors.

To help you choose colors, you can find a multitude of color pickers online, many of which help you choose colors that are Web safe. Some color pickers are better than others, so today's post features several of the best color pickers I've found online.

The first color picker is one that came to me through SitePoint. I receive several e-zines, one of which is from SitePoint. In a recent SitePoint Design e-zine, they featured a color picker that blew away all the color pickers that I had seen previously. It's called Color Schemes Generator 2 and was designed by Petr Stanicek. What I like about this color picker is that it defines, based on selections that you make, coordinating and contrasting colors, and then allows you to reduce the colors to Web safe colors. All you do is choose your main color from the color wheel on the left, and then select the variation that you want to use. The up arrow in the right upper corner next to the list of HEX color codes allows you to move the base color around so that you can see what it looks like as a background color and as a foreground color. You can even see what the colors look like to people who have vision problems.

The PageTutor Color Picker II, the second color picker featured here, has long been one of my favorites. You can easily choose the background, text, and link text colors, and the page displayed on the right side of the page changes so that you can see what the page will look like if you use the chosen colors. The page even provides the HTML code and the HEX color values that you need to add to your pages.

Another very good color picker is VisiBone's 216-color Webmasters Color Palette. I like that I can add colors by clicking on the color in the color "wheel" and remove colors by clicking on the X in the bar to the right of the color wheel. All colors are listed with their RGB and CMYK color values as well as their HEX color value.

Here are a few more color pickers that are available on the Internet.
Dougie's Color Picker
DigitDesigns WebSite Color Picker
Colors4webmasters.com Color Picker
Dynamic Web Coding Color Picker
Web Colors 4096 Color Picker
John December's Hex Hub

These are only a few of what you can find on the Internet, but using them sure makes choosing colors more fun.

Creating Image Mouseovers

lisawoll — Sat, 11 Dec 2004 00:35:00 GMT

After I learned JavaScript, the first thing I did was create an image mouseover. The one I created was relatively simple, just a few lines of code. I've since seen many more complex examples that do basically the same thing as my simple little script. I'm not sure whether complex is better...although the complex examples do have two debatable benefits for the developers: one, making them hard to read (and thus hard to steal and modify); and two, making me feel incredibly stupid. Hmm. I definitely prefer simplicity.

The script that I made way back then was a simple one-function script that I called in both the onmouseover and onmouseout events. The function took one parameter, which was a reference to the IMG element. All I did was swap the image displayed for a new image by changing the src property. Simple. Except that it didn't work in Netscape Navigator. I never understood why, I just rewrote it.

I promised to provide an image mouseover script a few posts ago, so in today's post I'm providing a very simple mouseover script that you can use in your Web pages. This script is only slightly more complex than the one I first wrote, but it does the trick in a single function and only a few lines of code. This script works in Internet Explorer, Netscape Navigator, Mozilla, and Opera, and there doesn't appear to be any difference in the way the script functions in each browser.

The script makes a few assumptions that you will need to understand. It assumes that the filename for the normal, onmouseout image ends with "Off.gif," and the active, onmouseover image ends with "On.gif." It also assumes that the images are stored in a folder named "graphics" that lives in the folder in which the page is stored. Your file structure and image-naming convention may be a bit different, so let me show you the script and explain it.

function mouseoverImage(image)
 {
 var s = image.id;
 var ssrc = image.src;
 
 if (ssrc.match(/[Oo]ff/))
 {
 image.src = "graphics/" + s + "on.gif"
 }
 else
 {
 image.src = "graphics/" + s + "off.gif"
 }
 }

The script uses a regular expression to determine whether the string "off" exists in the filename (or the value of the src attribute of the IMG element passed by using the image argument). (If you are unfamiliar with regular expressions, see the article Regular expressions on Office Online). If the string exists, the script changes the image's src attribute to the "On" image, and if it doesn't exist, the script changes the src attribute to the "Off" image.

Here's the HTML that accompanies this script.

<img src="graphics/ImageOff.gif" id="image" 
 onmouseover="javascript:mouseoverImage(this)" 
 onmouseout="javascript:mouseoverImage(this)">

This code assumes that you have two images: one named "imageOff.gif" and one named "imageOn.gif." You should be able to easily modify the filenaming for your own images; however, your images should have a base string that is the same.

For example, you might want to use mouseover images with a menu. If the text for a menu item was "products," your images might be named "productsOff.gif" and "productsOn.gif"; or the normal image might be "products.gif" and the mouseover image "productsOn.gif" or "productsOver.gif."

There are a number of possible combinations, but my point is that they both have a base string of "products." So you would set the image's id attribute to the base, the src attribute to the normal, onmouseout image, and then set the script calls in the onmouseover and onmouseout events. If your images are named differently, you need to make a few modifications to the script as well.

The regular expression "[Oo]ff" locates the occurrence of "Off" or "off" in the filename. If neither your normal nor your active image contains either string, the script won't function unless you change the regular expression. About the only thing that would complete this script is a script that preloads the images. You can find numerous such scripts online, and FrontPage comes with a preload script. I'll cover preloading images in a future post for those who may not understand why this is important.

Creating a scrolling marquee

lisawoll — Thu, 02 Dec 2004 23:30:00 GMT

In FrontPage, you can create a scrolling marquee by clicking Insert and Web Component. (You can find it listed under Dynamic Effects.) However, sometimes it's greyed out. This is because FrontPage inserts a MARQUEE element, which is only viewable from Internet Explorer. (Opera also displays the MARQUEE element properly.) To be able to add a marquee to your page, you need to specify that you are creating a page to be viewed only with Internet Explorer. You can do this from the Authoring tab of the Page Options dialog box (Tools menu). Under Browsers, select Microsoft Internet Explorer Only.

Now that you know how to add a scrolling marquee, you may want to customize it. By default, FrontPage doesn't set any attributes when it inserts a marquee, so what you get is plain text that scrolls from right to left across the page. FrontPage provides a dialog box that allows you to change the direction (left or right), speed, behavior, size, and background color and specify whether the marquee repeats and how many times. This may provide all the functionality you want for your marquee, but what if you want to bold some text or add an image? Or what if you want the marquee to scroll from top to bottom or vice versa? One customer who contacted me wanted to make each letter a different color. Another customer wanted to add a hyperlink.

Customizing a Marquee

To add customizations that FrontPage doesn't allow in the dialog box, you need to modify the HTML code in Code view. You can add almost any element you want to a marquee, and it will work perfectly fine. However, keep in mind that when you do this, the display in FrontPage will be ... uh ... funky. The MARQUEE element is one of the few HTML elements that FrontPage does not display exactly WYSIWYG. Instead, you see all the code that you add within the opening and closing <marquee> tags. FrontPage sees these as text, but the browser does not.

For example, perhaps you want to add a hyperlink to some text. You can switch to Code view and insert the hyperlink by adding an A element to the code (note that using the Hyperlink dialog box will add a hyperlink around the entire marquee and not just around selected text). To illustrate, I created a simple marquee and inserted a hyperlink around a portion of the text. In Design view, my marquee appears as shown in the following screen shot.

But in the browser, it scrolls as expected with hyperlinked text.

So now that you understand that what you see in FrontPage won't be exactly correct, you can add any number of other HTML elements to a MARQUEE element. You can add P elements to create paragraphs; IMG elements to insert pictures; UL, OL, and LI elements to create numbered and bulleted lists; SPAN elements to change the color and font of one or more characters; B elements, I elements, U elements, DIV elements, etc. (You can even add MARQUEE elements, which gives you overlapping scrolling marquees. This may sound kinda cool but it would be very strange if not done exactly right — for example, a top to bottom scrolling marquee that contains a right to left scrolling marquee might be a bit interesting....)

Vertical Scrolling Marquee

In the Marquee Properties dialog box, FrontPage provides the ability to change the direction of the scroll from left to right or right to left (the default is right to left). However, the MARQUEE element allows for scrolling from top to bottom and bottom to top as well. After you insert the marquee into your page, switch to Code view and change the direction attribute of the MARQUEE element to "up" to scroll from bottom to top or "down" to scroll from top to bottom.

Scripting the MARQUEE element

There are a variety of things that you can do to change the appearance of scrolling marquees, but one I saw recently was someone who wanted the marquee to slow down upon mouseover. As long as browser compatibility isn't an issue, since this only works in IE, you can script the MARQUEE element to slow down on mouseover, and then to speed up on mouseout.

The following two functions, slow and fast, change the scroll speed (by changing the scrollAmount property) of a specified MARQUEE element.

<script language="javascript">
 function slow(ele)
 {
 ele.scrollAmount = 1;
 }
 
 function fast(ele)
 {
 ele.scrollAmount = 15;
 }
 </script>

All you need to do to see this in action is to add the following HTML code to a page and display th page in IE.

<marquee direction="up" width="238" height="100%"
 scrollamount="15" onmouseout="javascript:fast(this);"
 onmouseover="javascript:slow(this);">This is a test.</marquee>

Creating an RSS Feed

lisawoll — Fri, 19 Nov 2004 20:48:00 GMT

I've had several people ask me lately and have seen questions on Office Online about how to create an RSS feed. For those of you who don't know what an RSS feed is, it's something that people can use to keep up to date with the content on a site. Generally, sites that frequently publish content, like news sites or magazines, offer RSS feeds to which visitors can subscribe. Then when they publish content, they update the RSS feed and people who have subscribed to the feed will get a list of newly published content. (This is probably a somewhat simplistic explanation, but that's it, in a nutshell.)

If you have a site that contains content, such as articles or stories, and you frequently update the site, then you may want an RSS feed to help your customers keep up with your updates.

What is RSS?

RSS stands for Really Simple Syndication (although I've seen some sites refer to it as Rich Site Summary, also). RSS is basically an XML document that conforms to a specified XML schema. Short of regurgitating all the information that is available to explain RSS, I'll let you review the following resources. The all contain great information about what RSS is.

What is RSS?
Introduction to RSS (from webreference.com)
RSS Tutorial for Content Publishers and Webmasters

These are just a few. There are a hundred and one more resources for RSS; do an Internet search for "RSS", and you will likely come up with your own list of resources.

There are several different versions of RSS schemas, many created by various organizations. (The first link in the above list (What is RSS?) provides a table that briefly describes each version.) I'm sure there are experts in RSS who have an opinion about which one is the best to use. I'm not an expert, so I'm not making any recommendation. The schemas can vary some minimally, others hugely.

RSS 2.0

To help you understand how the schemas work and how to create your own RSS feed, the following XML code shows the basic XML for RSS 2.0, which is the version MSDN uses.

<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
 
   <channel>
     <title></title>
     <link></link>
     <description></description>
 
     <item>
       <title></title>
       <link></link>
       <description></description>
     </item>
 
   </channel>

 </rss>

Before I get too far, I should explain that this is not a schema reference. Technology at Harvard Law has a great RSS 2.0 Specification schema reference that you should use if you need specific information about the elements. Plus I stripped down the XML above (for example, I removed the comments sections) so that you could see the XML without all the added text.

Briefly, each RSS feed that adheres to the 2.0 version contains one channel element. Some of the child elements for the channel element are optional, but the title, link, and description are required. The channel element may contain one or more item elements. Many of the child elements for the item element are optional, but the title, link, and description are required. The above example provides the required elements for both the channel and item elements.

If you think of an RSS feed like a newspaper, the channel element contains the name of the newspaper, a link to the newspaper's Web site, and a description of the newspaper; then each item element is a different story in the newspaper, each containing the title of the story, a link to where the story can be found online, and a description of the story, which in some cases may be the full story.

Publishing your RSS file

Now that you've been introduced to one RSS schema, and you've likely read a bit more about the different versions, you should be ready to create your own RSS file for your Web site. You can create and edit your RSS file in FrontPage, Visual Studio, Notepad, or another XML or text editor. Once you've created it, you need to save it as an XML file (with a .xml extension) and upload it to your Web site.

Then you need to create a link so that people who want to can subscribe to it. Generally, you will want to use the little orange XML graphic and link the image to the XML file. I've noticed that most sites that have RSS feeds use the little orange XML graphic or a slight variation, but not all. I'm not sure if there are any rules about using the orange graphic, but it's very easy to identify so that those who are looking for an RSS feed on your site can easily find it. To get a copy of the image, just right-click on the image and save it locally, and then upload it to your Web site.

After you've created your first RSS file and provided the link to it on your Web site, all you need to do is update the file when you publish new content -- daily, weekly, monthly, or whatever works for you. I suggest that you don't save the same RSS file multiple times with different filenames. If you do, those who have subscribed to your RSS feed won't be able to keep their news aggregators updated without pulling the URL to the new file. Just update the file and reuse the same filename.

The RSS files that I reviewed had the most recent content at the top of the file. This allows subscribers to easily find the new content and move on. Again, I'm not sure if there are any rules to this, but if you want to know how subscribers will view your feeds, I would suggest either buying an RSS news aggregator or downloading a free trial version. I use Newsgator in Outlook, but there are many different news aggregators, so do some research to see which one works. In addition, different news aggregators may display the RSS feeds differently, so you may want to install more than one to see what the differences are.

Well, that's it. About the only thing I've done here is provide just basic information. There are many many many more resources online that will provide more detailed information about RSS and how to create your own feed. If you're new to XML, I highly suggest becoming more familiar before starting to create your own RSS feed. Once you have a basic understanding of XML and RSS, you should be able to create the RSS feeds you need for your own Web site.

Display a different image inside a data view web part based on data in the XML

lisawoll — Thu, 11 Nov 2004 18:55:00 GMT

If you use lists in Web sites based on Windows SharePoint Services, this tip is for you. John Jansen, a tester on the FrontPage test team created a tip for how to display a different image depending on the value of a list item. See how on the FrontPoint blog.

Hiding the Image Toolbar in IE

lisawoll — Tue, 09 Nov 2004 23:09:00 GMT

If you've spent any time browsing the Internet with Internet Explorer, you've seen the little toolbar that IE displays over larger images. Today's tip, contributed by Larry Anderson, explains how to hide this little bugger.

In Internet Explorer 6.0, when a picture larger than 130x130 is displayed, IE displays the image toolbar (save, print, etc.). Sometimes the image toolbar can make a page look a little 'funky' and disabling it along with using a script to block right clicks can cut down on 'picture stealing' from your site.

You can make your page not display the image toolbar on an image-by-image basis by adding GALLERYIMG="no" to the <IMG> tag, as shown in the following code example:

<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">

Or you can disable the display of the image toolbar for an entire Web page by setting the HTTP-EQUIV and CONTENT attributes of the META element. Set HTTP-EQUIV="imagetoolbar" and CONTENT="no". Just put the following code in the HEAD section of your page, and IE doesn't display the image toolbar for any image in the page.

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

This is a great tip. I truly detest this toolbar because it just plain messes up the look of a page, so IMHO, hiding it is a great idea. Just one thing I want to add is that hiding the image toolbar and disabling right click on a Web page doesn't provide true security for images and other copyrighted artwork. At best, it slows people down. (For more information, see my post Securing online content and images.)

Creating Mouseover Effects

lisawoll — Wed, 27 Oct 2004 21:51:00 GMT

I know, it's been awhile since I've posted a tip. A couple weeks ago I was in SQL Server training, and last week was taken up with catching up on everything I postponed during training. Now I'm back and my tip for today is creating mouseover effects.

We get frequent questions about how to create mouseover effects, but there are a variety of different mouseover effects, and the scripts that accomplish them are very varied. The tip I'm sharing today is a script that I created for selling a house. The page shows a house plan; the house plan image contains image maps that when a user runs their mouse over, displays an image of the room next to the house plan. Take a look at the finished page so that you can understand the type of mouseover I'm talking about here.

Creating this type of mouseover is relatively easy. You have two main images on the page: one is the image that the user mouses over, the other is the image that changes upon mouseover. In this particular example, the house plans image is the first image. I mapped the image (or created hot spots) to section it into rooms; each one of the rooms has an AREA element with an href attribute value that contains the path and filename of the image to show on click, plus an onmouseover event to show the image in a second image on the page. (You can easily create an image map in FrontPage -- see Add a hot spot to a graphic -- so don't worry about trying to create an image map by hand; however, you will need to add the onmouseover event to each AREA element by hand.)

Okay, maybe that sounds confusing, so let me make it a bit easier. If you've taken a look at the page, you see an image of the house plans on the left side of the page and on the right you see a picture of the front of the house. The house plans image is the first image (as I mentioned above). The picture of the front of the house, the second image, is actually a container image. When the page first displays, it shows the front of the house, but as the user drags the mouse pointer over the house plans, the picture of the front of the house changes to show a picture of the room over which the mouse pointer sit. (Depending on the speed of your connection, you may need to wait a few seconds for the image to download.)

The script that makes this happen is all of two lines. To make it easy for you, I've included the function below.

function ShowPic(sImage)
 {
 sImage = "images/" + sImage + ".jpg";
 document.ShowRoom.src = sImage;
 }

The script by it self does nothing spectacular. The ShowPic function takes a string (sImage), which is the name of the image file to display on mouseover. The script then uses the string (sImage) to concatenate a new string that contains the path to the image file ("images/") with the passed in value (sImage parameter) and the image extension (which in this case is ".jpg"). Then the code uses the src property to change the src attribute of the second image (which I gave a name attribute of "ShowRoom") to the value of the sImage string.

BTW, the script won't work without an image named "ShowRoom". You can either create an image named "ShowRoom" or change the ShowRoom in the line document.ShowRoom.src to the name of the IMG element that acts as your container image.

For my page, I used an image map, but you don't have to use a map. For example, you could have a vertical menu bar that on mouseover changes a central image on the page to a different image. In this case, the ShowRoom image container becomes your central image, and each of the elements in the menu bar (which could be IMG or A elements depending on how your menu bar is setup) contains the onmouseover event with the script call.

In the page you viewed above, I put in styles, so to make it easier to see what's going on in the code, here's some HTML to accomplish a mouseover effect without styles and without an image map. In this example, I use A elements instead of AREA elements; otherwise, the effect is the same.

<html>
 <head>
 <title>House For Sale</title>
 <script language="javascript">
 function ShowPic(sImage)
 {
 sImage = "http://www.wollinweb.com/blogimages/images/" + sImage + ".jpg";
 document.ShowRoom.src = sImage;
 }
 </script>
 </head>
 <body>
 <table width="800">
 <tr>
 <td valign="top" width="160">
 <p>
 <a onmouseover="ShowPic('outsidefront')" href="http://www.wollinweb.com/blogimages/images/outsidefront.jpg">Outside front</a><br>
 <a onmouseover="ShowPic('bedroom3')" href="http://www.wollinweb.com/blogimages/images/bedroom3.jpg" alt="Office/third bedroom">Office/third bedroom</a><br>
 <a onmouseover="ShowPic('bathroom2')" href="http://www.wollinweb.com/blogimages/images/bathroom2.jpg" alt="Second bathroom">Second bathroom</a><br>
 <a onmouseover="ShowPic('bedroom2')" href="http://www.wollinweb.com/blogimages/images/bedroom2.jpg" alt="Second bedroom">Second bedroom</a><br>
 <a onmouseover="ShowPic('livingroom1')" href="http://www.wollinweb.com/blogimages/images/livingroom1.jpg" alt="Living room">Living room</a><br>
 <a onmouseover="ShowPic('diningroom')" href="http://www.wollinweb.com/blogimages/images/diningroom.jpg" alt="Dining room">Dining room</a><br>
 <a onmouseover="ShowPic('masterbed1')" href="http://www.wollinweb.com/blogimages/images/masterbed1.jpg" alt="Master bedroom">Master bedroom</a><br>
 <a onmouseover="ShowPic('masterbath1')" href="http://www.wollinweb.com/blogimages/images/masterbath1.jpg" alt="Master bathroom">Master bathroom</a><br>
 <a onmouseover="ShowPic('laundryroom')" href="http://www.wollinweb.com/blogimages/images/laundryroom.jpg" alt="Laundry room">Laundry room</a><br>
 <a onmouseover="ShowPic('kitchen')" href="http://www.wollinweb.com/blogimages/images/kitchen.jpg" alt="Kitchen">Kitchen</a><br>
 <a onmouseover="ShowPic('sittingroom')" href="http://www.wollinweb.com/blogimages/images/sittingroom.jpg" alt="Sitting room">Sitting room</a><br>
 <a onmouseover="ShowPic('patio1')" href="http://www.wollinweb.com/blogimages/images/patio1.jpg" alt="Rear outside patio">Rear outside patio</a><br>
 </p>
 </td>
 <td><img name="ShowRoom" src="http://www.wollinweb.com/blogimages/images/outsidefront.jpg"></td>
 </tr>
 </table>
 </body>
 </html>

The HTML above uses absolute paths to the image, so you can just copy it to a new page in FrontPage (replacing all the HTML in the page), and view it in the browser.

I hope you enjoy this tip. It's simple, but mouseovers can be very powerful. Next tip, I'll show you how to get image mouseovers in navigation bars where you are changing the image on mouseover and then back to the original image on mouseout. (Oh, BTW, this script works without problem in IE, Moz, NN, and Opera.)

Creating a Drop-down Menu

lisawoll — Wed, 06 Oct 2004 02:44:00 GMT

We had an article on MSDN for creating a drop-down menu, but after repeated attempts, I, like many of our customers, couldn't make the code work, so we're in the process of removing it. We will (mostly likely) eventually replace it. In the meantime, though, I promised that I would provide an alternative. I have working code for a drop-down menu that works in IE, Mozilla, and Netscape Navigator (sort of -- I've noticed some funky onmouseout behavior in Mozilla and Netscape Navigator that I haven't been able to resolve).

The example is comprised of HTML, JavaScript, and CSS and is contained in the following two files:

Here's a simple explanation of the menu table and the accompanying script.

Menu Table

The menu table is simple, but to make it to be usable on any ... uh, almost ... page, I surrounded the entire table with a DIV element. The following code shows a shortened version of the menu table with the DIV element. The DIV element has an id attribute value so that the JavaScript code can access the child elements. This was necessary in order to allow anyone who might use this code to have <div> tags elsewhere on the page without interfering with the expand/collapse functions of the JavaScript.

<div id="menu">
    <table width="100%">
       <tr>
          <td>
             ... (missing code)
          </td>
       </tr>
    </table>
 </div>

The table has a width of 100%, but if you wanted to specify an exact pixel measurement, you could easily do that without messing up the menus. The table is comprised of one row (TR element) with multiple columns (TD elements). In the live version, there are five columns with drop-down menus. Each drop-down menu lives within its own cell in the table. The code within this TD element is somewhat complex to provide for the proper expand/collapse funtionality of the drop-down menu. The following shows the code for the first TD element. Each of the TD elements are almost exactly the same with a few exceptions, which I'll explain in a moment.

<td class="button" width="20%" valign="top" id="item1"
    onmouseover="expand(this.id, 'menu1');"
    onmouseout="collapse(this.id, 'menu1');">
       <p><b>Menu 1</b></p>
       ... (missing code)
 </td>

The class attribute names the style in the CSS that defines the table cells appearance when a user first displays the page. The width attribute is set to 20% so that each of the five drop-down menus will be of equal space. Again this is an easy thing to change if you want to modify the code to suit your own needs. The id attribute is necessary as the scripts use these to access the TD element.

The missing code is the nested DIV element that contains the items in the drop-down menu. The DIV element for the first menu item is shown below.

<div id="menu1" class="exp" onmouseout="collapse('item1', this.id);">
    <p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
    <p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
    <p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
    <p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>
 </div>

The nested DIV element also provides a value for the id attribute. Again, the class attribute specifies the style to use when displaying the menu. Within the DIV element are paragraphs (P elements), with a class attribute value of "button", a style defined in the attached CSS file, and links (A elements), with a class attribute value of "menuitem", another style defined in the attached CSS. The menuitem style defines link, visited, hover, and active link styles.

Then, of course, there are the onmouseover and onmouseout events. The top-level menu item, contained in the TD element, specifies both the onmouseover and onmouseout events. However, the drop-down menu, contained in the nested DIV element, specifies only the onmouseout event. The JavaScript functions that these events call require both the id attribute for the TD element and the nested DIV element.

If you modify this script, adding or removing drop-down menus, you will want to change the second argument for these events. The following code shows the parts that you will need to change as you add and remove menus. The red code shows the id attribute for the top-level menu item (TD element) and all the places where you would need to change this in the event function calls, and the blue code shows the id attribute for the drop-down menu (DIV element) and all the places where you would need to change this in the event functions calls. Basically, all the code in red must match and all the code in blue must match.

<td class="button" width="20%" valign="top" id="item1"
    onmouseover="expand(this.id, 'menu1');"
    onmouseout="collapse(this.id, 'menu1');"><p><b>Menu 1</b></p>
    <div id="menu1" class="exp" onmouseout="collapse('item1', this.id);">
       <p class="button"><a href="page.htm" class="menuitem">Item 1</a></p>
       <p class="button"><a href="page.htm" class="menuitem">Item 2</a></p>
       <p class="button"><a href="page.htm" class="menuitem">Item 3</a></p>
       <p class="button"><a href="page.htm" class="menuitem">Item 4</a></p>
    </div> 
</td>

Notes

Because the event function calls use this.id, there's no need to specify the id attribute values for these.
The code is purple above is code that you can safely change without affecting how the menus function.

If you look at the full code in the page (see Drop-down menu example above), the only difference between each of the TD/DIV element pairs is the id attribute value. You'll notice that each menu is numbered consecutively (i.e., item1/menu1, item2/menu2, item3/menu3, etc.). I did this for ease of use. You can, of course, provide any id attribute values you want, as long as they're not the same as another element on the page and as long as you change the appropriate arguments in the event function calls so that they match as shown above.

JavaScript Functions

Now for the functions. There are three functions: one for collapsing all drop-down menus, one for expanding a single menu, and one for collapsing a single menu.

The first one, called collapseAll, collapses all menus. The collapseAll function takes no arguments and is called once when the page loads in the onload event for the BODY. This code is relatively simple and is shown in the following example:

function collapseAll()
 {
    var menuDiv = document.getElementById("menu");
    var divs = menuDiv.getElementsByTagName("div");
    var div;
    for (i = 0; i < divs.length; i++)
    {
       div = divs[i];
       div.style.visibility = "hidden";
       div.style.display = "none";
    }
 }

The second function, called expand, is where most of the action happens ... uh, at least half of it. The expand function has two parameters: Then, the function is basically a bunch of scripted CSS that is used to show the DIV element and change the appearance of the top-level menu. The expand function is shown below:

function expand(s, m)
 {
    var browser = window.navigator.appName;
    var dif = 0;
    if (browser != "Microsoft Internet Explorer") { dif = 12; }
    var d = document.getElementById(m);
    var td = document.getElementById(s);
    var left = td.offsetLeft;
    var top = td.offsetTop + 58;
    var width = td.offsetWidth - dif;
    td.style.color = "#FFFFFF";
    td.style.backgroundColor = "#686496";
    d.style.top = top;
    d.style.left = left;
    d.style.width = width;
    d.style.position = "absolute";
    d.style.visibility = "visible";
    d.style.display = "block";
 }

There are a few things you should know about this code.

First, there is a difference between how IE displays the menu and how Mozilla and Netscape Navigator display the menu. (Note that I haven't tested this code in Opera.) In Moz and NN, the width doesn't show up properly, so I had to specify a value that would account for the difference between the offsetWidth and the actual width of the table in these browsers. The number isn't arbitrary; I determined it by trial and error, and this was the only number than worked. I have no idea why this is different only that it is and this number fixes it. If you make huge changes to the menu, this number may need to be changed also.
Second, the number added to the offsetTop value accounts for the height of the first line in the top-level menu as well as the top heading paragraph. Again, this number is not arbitrary and accounts for the space between the top of the browser and the top of the drop-down menu. I arrived at this number by a trial and error process. If your top-level menu text runs onto multiple lines and/or you have a large graphic heading or other things above the menu bar, this number will likely change.
Third, if you want to change the appearance of the menu, you can change any of the values in purple in the code above to appropriate and desired values without affecting how the script functions.

And finally, the third function, called collapse, collapses a single drop-down menu. This is where the other half of the action happens. The collapse function has two parameters: the first is the id attribute value for the TD element (the top-level menu item), the second is is the id attribute value for the nested DIV element (the drop-down menu). The collapse function is shown in the following code:

function collapse(s, m)
 {
    var d = document.getElementById(m);
    var td = document.getElementById(s);
    td.style.color = "black";
    td.style.backgroundColor = "#EEEEEE";
    d.style.position = "static";
    d.style.visibility = "hidden";
    d.style.display = "none";
 }

There's absolutely nothing major about this code. It changes the appearance of the TD element back to the original formatting, and hides the DIV element. Ideally, this formatting would match what is in the attached CSS, which in this case, it does. You can change any of the values in purple in the code above to appropriate and desired values without affecting how the script functions.

Conclusion

And that's all there is to it. Have fun using this, and if you need help, please let me know. If you are looking for a drop-down menu, feel free to use it, or if you do an Internet search, you will find many more examples and just as many ways to create drop-down menus, and many of them much cooler than my litte example here.

Have fun, and enjoy playing with the code, and if you can tell me what's up with the Mozilla/Netscape issue, please do. I've tried all types of arrangements for the code to see if order made a difference, if putting the event function call in a different place made a difference, and I've been relatively unsuccessful getting it to be completely functional in these browsers. Sometimes the onmouseout event just doesn't fire.

Anyway, as usual, my only real caveat is that the code won't work at all if the user has scripting turned off in their browser, but IMHO, that's not a reason to not use it or any other script.

Testing pages in different browsers

lisawoll — Mon, 04 Oct 2004 22:44:00 GMT

If you've worked around Web sites for any length of time, you've no doubt been told repeatedly to test your pages in several browsers. If you're new to this stuff, it may sound ridiculous. After all, HTML is just HTML, right? Well, yes ... and no.

HTML is just HTML, but different browsers render HTML differently. In addition, some browser developers add custom elements that function correctly in their own browsers but not in competing browsers. (For example, the MARQUEE element works only in Internet Explorer.) Thus the advice to test your pages in different browsers is very important and very sound, especially if your audience may use other browsers.

In FrontPage 2003, you can easily test your pages in a browser by using the Preview in Browser button . Plus if you click the down arrow, you will get a list of browsers and different resolutions. For example, if you wanted to see what your page would look like on a machine with 800x600 monitor resolution, you could choose the Microsoft Internet Explorer 6.0 (800 x 600) item.

In addition, you can add browsers to the list by clicking Edit Browser List. When you add a browser to the list, you can also add items for the different resolutions for which you want to test your pages. And (my personal favorite) Preview in Multiple Browsers works very well for displaying your page in all the browsers in the browser list.

One HUGE caveat thought: If you're showing your page in both Netscape Navigator and Mozilla, you may get a message asking you to choose a profile. IMHO this user experience just sucks. Navigator and Mozilla both use the same profile by default and should use different profiles not the same because you can't use the same profile in two browser windows at the same time. Therefore, you have to create a new profile. (I've never been successful at saving the profile so that the browser would always use it, so I always get the dang message and have to create a new one every single time.) However, to fix this, there's a check box called Don't ask at start up. Check it! You will likely still have to create a profile, at least once, but from that moment on, you shouldn't be asked again ... at least in theory. I've never been successful at this one either.

Adding Videos to a Web Page

lisawoll — Thu, 30 Sep 2004 20:44:00 GMT

Today, someone asked me about how to add a video clip to a Web and show the controls. This is relatively easy, so I thought I would share with all of you how to do this. You can do this by using the Windows Media Player. To do this, switch to Code (or HTML) view and paste the following HTML code:

<object id="WMPlayer1" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" height="250" width="250">
 <param name="uiMode" value="full" />
 <param name="autoStart" value="true" />
 <param name="URL" value="SampleVideo.WMV" /> 
 Your browser does not support ActiveX controls or the Windows Media Player.
 </object>

To make this work for your video file, change the value of the value attribute (see red text above) to the path and filename of your video file. If you want to change the size of the view, change the value of the height and width attributes (see blue text above) to the height and width that you want.

Once you add the HTML, you can change the filename and size using the properties dialog box also. Just switch back to Design view and double click on the control.

This code displays video files in Internet Explorer and Netscape Navigator. I was unable to get this to display properly with Mozilla. (I'm not sure if that means that Mozilla doesn't support Windows Media Player or ActiveX controls, or if there is a property that I need to set. Anyway, I wasn't able to find an ActiveX property in the Preferences dialog, so I'm assuming that Mozilla doesn't support any ActiveX controls. If anyone has any information about this, please let me know.) I didn't test it in Opera (which I don't have installed on my computer, but I am rectifying since so many have offered comments about Opera), so I can't tell you whether it works in Opera or not. In addition, the visitor must have Active X controls enabled in their browser.

Note This code works well as long as the visitor has Windows Media Player installed on their local computer. If they don't, then they may be asked to install it. ActiveX controls are installed locally on the visitors machine, so they can have security risks associated with them. Most browsers allow users to turn off installing, displaying, and running them, and Internet Explorer allows users to run them if they are signed, to prompt before installing them, and to disable unsigned ActiveX controls.