Quantcast
PCWorld.com is upgrading some back-end systems. Some site features, such as user registration, may be temporarily unavailable.
Subscribe to magazine

Easy Steps to a Great Site

Tips, tricks, and tools that will help you spruce up a dowdy home page--or build a brand-new one.

Dennis O'Reilly

  • 0 Yes
  • 0 No

A Mini Site Makeover

The Web's pizzazz comes from its active elements, many of which are powered by the JavaScript language. JavaScript can make page elements jump, move, and otherwise respond to a site visitor's input. And most of them do so without having to rely on constant communication with a Web server, because they're designed to download to the visitor's browser along with the Web page.

We added two JavaScripts to our basic site's home page--an image slide show with links to pages elsewhere on the site, and a rollover menu with descriptive text that appears as a visitor mouses over menu options. We also created a simple product catalog for the site, using Microsoft's BCentral service. In all cases, introducing the new elements entailed pasting some code into the site and making a few minor tweaks to get everything working properly.

"Road Map to a Site Upgrade" shows which sections of the JavaScript we altered to suit our needs. Once you become familiar with adapting simple scripts to your site, the possibilities are almost endless, though the specific process will vary every time.

Let the Slide Show Begin

Adapting code from free repositories or other sites is a time-honored Web tradition. Just be sure to give credit where it's due. We got our slide-show script from 24fun.com, but you can view it by going to furrycompanions.com and clicking View, Source in Internet Explorer or View, Page Source in Netscape. The script begins immediately after the <body> tag and extends to the second </DIV> tag.

Some of the JavaScripts you'll find house their code in an external file, which you'll need to download before adapting the script to your site. Our slide show requires the file JavaScript Slide Show. Place it in the same folder as the Web page that will use the script.

Once you've opened furrycompanions.com in your browser and you've brought up the source code, select all the text from the end of the <body> tag down to and including the second </DIV> tag. Press Ctrl-C to copy it, and then--in your text editor (not your browser)--open the Web page that will use your customized slide show. Position the cursor at the far left of the line immediately following the page's <body> tag, and press Ctrl-V to paste the script into your page.

Collect the images you want to include in the slide show. You can use as many images as you like, but they must all be the same size for the dissolve effect to work. To alter the size of your images, open them in an image editing application such as Adobe's Photoshop Elements (see "Your Web Toolbox") and use the program's resize function.

Once you've prepared the images you want to use, it's time to start tweaking the script to make it work in your site. Start by backing up the pages you're working on. Then go back to the JavaScript you just pasted, and start changing variables.

Most free scripts include instructions on which variables to change, and they're easy to find once you know what to look for. The quoted text that follows each 'imgsname[x]=' in our slide show script is a variable that points the browser to an image that will display. Replace these variables with the names of your image files (be sure to retain the quotation marks before and after each file name).

You'll need to make a few of these changes to get a script working, but once you get the hang of it, you'll have a powerful technique for customizing your Web site. "Road Map to a Site Upgrade" walks you through the various changes we made in adapting the slide show and rollover scripts to our furrycompanions.com site.

A Simple Rollover Menu

Some JavaScripts are set up so that you can paste all the code directly into your Web page. The menu on our site was adapted from a script written by Clarence Eldefors. We simplified the original by removing the background and rollover colors. You can download the original script, or you can adapt our version by viewing the source code of furrycompanions.com in your browser.

The menu script is located in two places on this page. The first begins immediately after the </title> tag, starting with the line <style type="text/css"> and running to the first </script> tag. Copy all this text and paste it into the Web page at the far left of the line below the page's </title> tag. This chunk of the menu's script doesn't need to be altered at all.

Now return to our sample source code, and find the second section of this script. It's in a table nested in our page's main table. Select all the text starting with the tag that reads '<table border="0" cellpadding="3">' and ending with the first of the page's three </table> tags. Copy this block of text, and then go back to the page you're adding the menu to. Place the code where you want the table menu to appear within your page's <body> and </body> tags.

Customizing the items for your menu is a simple matter of tweaking some text and variables. See "Road Map to a Site Upgrade" for the details.

Low-Cost, Low-Fuss E-Commerce

It's never been easier for a small business to place its product catalog on the Web. You can pay a developer to custom-design an online catalog and an order-processing system if you like, but many businesses find it faster, cheaper, and easier to use the e-commerce services offered by such companies as Yahoo Store, Bizfinity, and Microsoft BCentral.

We used BCentral's Commerce Manager--which costs $25 a month and offers you a 30-day free trial--to create an extremely simple ten-product catalog for our pet-adoption site's Pet Resources section. Signing up for the service took only a few minutes, and we had our brief catalog of pet-related books posted on Microsoft's MSN Marketplace just a few hours after our initial registration.

The first time you log in to Commerce Manager, you enter into your catalog the products you wish to sell, either singly or many at a time, using the service's spreadsheet template. You must provide a name, a summary, an identifying number (SKU), and a price for every product. Dividing your store into departments is optional--the service defaults to 'top level' until you designate subcategories in your catalog. You can set shipping charges by package size and weight, upload a picture of the item to include with its listing, and provide a longer description.

Other optional abilities allow you to add keywords, set auction attributes (reserve price, opening bid, and minimum quantity), designate as many as 30 product variables (size, color, and so on), and add the shopping-cart HTML code to your site. Figure 2a illustrates how a single entry appears on the MSN Marketplace, and Figure 2b shows the complete list of our catalog entries.

  • Recommend this story?
  • 0 Yes
    0 No
  • Great year-end deals
    for small business!

  • Get 24/7 live remote AT&T Tech Support 360* service along with select Lenovo* PCs (with Intel® Core™ 2 Duo processors) and save up to 200!

    Learn more

  • HP EliteBook* 6930p Notebook with Intel® vPro™ technology and a free HP Basic Docking Station - $641 instant savings!

    Learn more

  • *Other names and brands may be claimed as the property of others. ©2009 Intel Corporation. Intel, the Intel logo, vPro and Core trademarks of Intel Corporation in the United States and other countries. All rights reserved.

Dell End of Year Deals

Focus on Personal Productivitysponsored by Microsoft

  • Personal Finance 2.0 These free and fee-based Web services not only aggregate data from your online bank accounts, they give you tools for managing your money.
  • High-Tech Travel Tips Plenty of stories provide advice for elite mobile professionals. But what about you, the unproductive traveler?

People who read this also read:

  • 15 Minutes to a Secure Business Get the Secure in 15 toolkit starting with the "15 Minutes Month-at-a-Glance" calendar. McAfee will send you additional tools and tricks to stay protected around the clock.
  • A Buyer's Guide to Data Protection Implementing data protection products and processes can be daunting. Make the right decisions by exploring what is available and what makes sense for your organization. Use this simple guide to evaluate different vendor offerings.

Sponsored Links