Instant Web Sites

Put yourself on the Web in a flash with free and low-cost tools, services, and sites.

Scott Spanbauer, a PC World contributing editor, writes the Internet Tips column.

The Web is a two-way street, but most of us travel in just one direction: We view other people's sites. Though your Internet service provider probably includes Web hosting as part of your package, you may not have gotten around to creating and posting a Web page yourself. That's too bad, because the Web is a great place through which to reach customers and to share files, photos, and information with family, friends, and coworkers.

When it comes to building a superb Web site, there's no substitute for a solid background in hypertext markup language, or HTML. But with the right shortcuts, you can have your starter Web site up and running in minutes. We've designed a series of HTML templates for you to download, personalize using free tools, and then post online in less time than it takes to brew a pot of French roast.

Keep It Simple

Borrowing liberally from existing Web site designs that we liked, we created three templates for specific types of sites. The first is a single-page billboard for your service, business, or activity. The second is a slightly more sophisticated page that accommodates photos, linked files, navigation controls, and links to other Web pages. The last template lets you set up a site that supports an interactive Web log (also known as a blog), with links to shared files and photos.

The tools you need to manipulate these templates are free or inexpensive (see "Web Authoring Toolbox"), and you don't need to know a lick of HTML to customize the templates to your liking. You will, however, need to know the location of your Internet account's Web host, and the user name and password (usually the same as your account log-in), to upload your finished pages (see "How to Post Your Pages").

We provide three variations of each template. On the last page you can see thumbnails of each design and to download the templates themselves. Our template sites are intended to be interesting to look at, without sacrificing legibility and ease of use. Simply replace each template's placeholder text, links, and images with your own to create a site that communicates your message effectively.

These designs won't accommodate tons of text and dozens of images, nor will they fit every need. Consider them a jumping-off point in your Web-design journey. To start taking your design efforts to the next level, read Web usability expert Jakob Nielsen's article "How Users Read on the Web."

A Basic Billboard Site

Open our Billboard template in Composer's Normal view, and change the active link.

Companies spend thousands of dollars whipping up slick Web sites that take weeks to explore from end to end. But if all you want to do is hang out your shingle or make yourself known to people with similar interests, a single, straightforward Web page will suffice. Begin by downloading one of the three variations of our Billboard template from the list on the last page. To do so, right-click the template's link and choose Save Target As (in Internet Explorer) or Save Link Target As (in Mozilla or Netscape). Be sure to place the unzipped HTML file in an easy-to-remember folder on your system.

The Composer Web editor included with the latest versions of the Mozilla and Netscape browsers (1.4 and 7.1, respectively) is a more-than-adequate program for editing our templates. Though the instructions below specify Composer, you can accomplish the same tasks by using nearly any Web editor. If you don't already have one of these two browsers, download Netscape or get a free copy of Mozilla, or visit our Downloads library (and scroll down the page) for other editors.

To open Composer, launch Mozilla or Netscape and choose Window, Composer. Alternatively, with Netscape, you can start Composer by choosing Start, Programs (All Programs in Windows XP), Netscape, Composer. Click File, Open File, navigate to and select the HTML file you just saved, and choose the Normal tab near the bottom of the screen. To replace the template's placeholder text, put the cursor in the text and press Backspace or Delete to remove text before or after the cursor, respectively. Or select all of the text in a heading or paragraph, press Delete, and either type new text to replace it or paste text copied from another program over the selection. To avoid deleting hidden HTML formatting tags, don't select anything before or after the visible text. If you accidentally delete more than you intended, press Ctrl-Z to undo the damage.

You may have information to share that works best as a list. To create a list, simply type the relevant items in one of the paragraph areas, select the items to be formatted as a list, choose Format, List, and then select either Bulleted or Numbered. For font effects such as italics, bold, highlighting, or underlining, select the text and click the appropriate toolbar button.

To customize the template's solitary link, replace the link text with your own, right-click the link, and choose Link Properties. Enter a file name, a Web address, or an e-mail address (precede an e-mail address with mailto:), and then click OK. Depending on what you enter in the Link Location field, Composer may uncheck or disable the 'URL is relative to page location' option. For best results, leave that setting checked. Be sure to change the page's title (the text that displays in the browser's title bar): Choose Format, Page Title and Properties, enter your preferred descriptive title in the Title field, and click OK. To publish your completed Web page, click the Publish icon.

An Easy Image Gallery

To add an image to your gallery, specify the file's location in its Properties dialog box.

A picture can be worth much more than a thousand words on the Web, where attention spans are notoriously short. Adding photos or images to your site is a good way to attract visitors and entice them to explore its contents.

To use the Gallery template, go to our list and right-click one of the three variations under "Gallery" (as described on the previous page) to download it. Open the template in Composer, and as with the Billboard example, replace our placeholder text and links with your own. Because the Gallery template contains navigational links that allow visitors to move quickly around the page, you can place more lines of text on this page than will fit easily on the Billboard template. The Gallery page also contains locations for inserting your own images, including a table set up as a gallery of a dozen pictures.

Before publishing images on the Web, you may need to reduce their resolution, as the images that scanners and digital cameras produce are often too large for practical use on a Web site. Although your page can rescale the image, this forces your visitors to wait while the large images download. For faster page loading, use a graphics program to scale your pictures down to a reasonable size (in a process called downsampling). While more advanced (and more costly) graphics programs such as Adobe's $99 Photoshop Elements and Jasc's $109 Paint Shop Pro are great for optimizing Web graphics, you don't need them to handle basic image editing tasks: The Paint program that comes with every copy of Windows works just fine for this job.

The original digital photo of a rose we used as a placeholder image in the templates was a whopping 1600 by 1200 pixels. That's too big to fit into most browser screens without the user's having to scroll horizontally and/or vertically. And at 363KB, the image's original size was an impediment to speedy page display. To make the image Web-ready, we opened it in Paint (right-click the image in Windows Explorer or any folder window and choose Open). If Paint isn't your default image editor, just right-click the image, select Open With, Choose Program, click Paint, and then click OK.

Once the image was open in Paint, we selected Image, Stretch/Skew, entered 25 in both the Horizontal field and the Vertical field under the Stretch heading, and clicked OK. The resulting image is only 400 by 300 pixels and has a more reasonable size of 19KB. We saved the image file under a new name, and then we performed the same shrink procedure, this time entering 50 in the Stretch fields, producing a 7KB, 200-by-150-pixel image for use as a thumbnail.

You may choose to create images that are slightly larger or smaller than our example, but the ideal range for image size is between 10KB and 20KB. Save images in a compressed format that all browsers can read, such as JPEG. To convert a bitmap (.bmp) file to JPEG, open the file in Paint, choose Save As, select JPEG in the 'Save as type' drop-down menu, and click Save.

To replace our template's dummy graphics with your own, right-click each image in Composer, choose Image and Link Properties, and click the Location tab. Type your file's name in the Image Location field; click Choose File to browse to and select your file; then click OK.

Images can act as links that open another file or site, or that move site visitors to another location on the current page. Our Gallery template's first two images are examples of the latter type--when a visitor clicks either image, the page scrolls to an anchor point just above the image gallery (another link at the bottom of the page labeled "Home" scrolls the visitor back to the top). You can leave these navigational links intact if you like, and simply replace our image with your own.

Each image in the gallery table--all of which contain the same 200-by-150-pixel thumbnail--links to a larger version of the same image. You can create this kind of effect with your own images by saving them in two different sizes and linking the smaller one in the gallery to the larger one on another page. But remember that by default Composer will upload only the images shown in the table. See "How to Post Your Pages" for tips on uploading the linked files.

An Interactive Blog

Link your blog to your own site--it takes one simple change to Blogger's HTML code.

We salute Web engineers who spend years learning how to program features into their sites that mere HTML code can't handle. Group calendars, Web logs, and other interactive elements can turn your site from a static document into a live community hub. And now you can accomplish this without actually joining nerddom: Instead, simply link your existing page to the interactive Web elements created by various free services.

Let's say that you want to magnetize an online community of rose enthusiasts. Starting with an existing page like one based on our Gallery template above, you could add a Web logging feature simply by creating links to and from the free Blogger site. First, go to the site and click Start Now! to create your blog (everyone who contributes to the blog will need a Blogger account and membership in your blog). When Blogger asks you to choose a blog template, pick a two-column design (such as Sand Dollar) that includes a Links area (not all Blogger templates allow you to include links in a nonscrolling area).

Did we say you wouldn't have to bother with any HTML to use our templates? Well, we had our fingers crossed. Inserting a link to your Web page in a Blogger page requires a little hand editing of the HTML source code, but it's a piece of cake, really. First, log in to your Blogger account and select the blog you want to customize. Click Template, Main Template, choose either Edit, Find (on This Page) in IE or Edit, Find In This Page in Mozilla/Netscape, and then search for EDITME! to locate the template's dummy link: <a href="http://EDITME!"Edit-Me/a>.

Replace EDITME! with your Web site's URL, and Edit-Me with the text you want the link to display. Edit or delete the other links (including the stock Google link), and click Save Changes. The next time you or another member of your blog publishes a new post, the links you created will appear on the page.

Your blog will be nearly ad-free if you publish it on your own FTP site instead of on Blogger's ad-subsidized Blogspot.com. But wouldn't it be nice if the blog's design matched that of your own Web page? This is a little icing on the blog cake. If you're using our Billboard or Gallery template, simply download our matching Blogger template from our list, open it in Composer, select the <HTML Source> tab, choose Edit, Select All, and press Ctrl-C to copy the contents. Switch to Blogger's Main Template window as described above, choose Edit, Select All, and press Ctrl-V to paste our template into place. Click Save Changes to complete the matching blog makeover.

Linking a Yahoo Groups or individual Yahoo calendar to your site is relatively mundane, since Yahoo's free service doesn't allow you to modify its code in the ways Blogger's does. Nevertheless, each Yahoo calendar or group has a unique Web address that you can insert in your page, and you can add your Web page to a Yahoo group's Links page.

Web Authoring Toolbox

Powerful software for Web site authoring and graphics production such as Microsoft FrontPage, Macromedia Dreamweaver, and Adobe Photoshop cost mucho dinero (from $180 to $500). Luckily, you don't need to spend a dime on Web development tools. All of the programs below are free, and some of them may already be on your PC.

Mozilla/Netscape Composer: Integrated with the Mozilla and Netscape browsers (the latter is a commercial version of the former with nearly identical features), Composer lets you create pages that include links, images, tables, and basic HTML effects without having to write any HTML code (though its <HTML> Source pane lets you do so if you wish). Given that the products are nearly identical, you may prefer the noncommercial Mozilla, which eschews unwanted add-ons.

Microsoft Paint: You wouldn't want to use this simple program for high-end (or even medium-end) image editing, but old Paint works fine for shrinking your Web image files. And it's already installed on your computer. Paint lacks a cropping tool, but you can get around this omission: Select the area you want to crop to, press Ctrl-C to copy it to the clipboard, and close the file (without saving it, to preserve the original image). Open a new file, press Ctrl-V to paste, and save the new file under a different name.

Blogger: Both a Web-hosted Web log generator and a blog-hosting site, Blogger is a highly customizable and easily accessible tool for publishing private, public, single-user, or multiuser online conversations.

How to Post Your Pages

Composer's Publish Page dialog box lets you send files from your local folders to the correct folder on your ISP's hosting server.

Most of us are pretty comfortable with the process of downloading files. But with Web publishing, the files are going in the other direction: They're being uploaded to a Web-hosting service's computer. Many Internet service providers support an established way of moving these files between your computer and their servers, called the file transport protocol, known more familiarly as FTP. Because FTP is a standard method of moving files around the Internet, many programs, including the Internet Explorer and Mozilla browsers, support it.

To use FTP, you need to know the addresses of the folders your account is allowed to write to on the remote server, and the correct user name and password. Your ISP probably sent this information to you when you signed up--but if it didn't, or if you can't find the information, call the company's tech support line and ask for it.

To publish a page in Composer, first save the file and then click the Publish button to open the Publish Page dialog box. Click the Settings tab; fill in the blank lines for publishing address, HTTP address, and log-in information; and click Publish. If the information you supplied is correct, Composer will then upload the Web page as well as any embedded files to the Web server.

Publishing Related Files

Though Composer does a good job of uploading images embedded in your Web pages, it doesn't by default upload the external files and Web pages that your pages link to. To get these files posted, you can use a third-party FTP program such as Ipswitch's WS_FTP LE (free for personal use, $40 for the commercial Pro 8 version; at the site you can register for the download). Or just use Internet Explorer. Type your FTP address and log-in information in IE's address bar using this format:

ftp://username:password@myisp.com/mywebfolder

Replace username with your log-in name, password with your password, and myisp.com/mywebfolder with the location of your upload directory on the server. This is almost the same publishing address you entered into Composer, with 'username:password@' inserted just after 'ftp://'. Press Enter to make the connection. If the information is correct, you should be able to drag and drop files from your local machine into your folder on the server.

Links to PC World's Instant Web Site Templates

Below are links to three versions of each of the three Web site templates described in Scott Spanbauer's "Instant Web Sites" story.

To use one of the templates, right-click the text link (not the thumbnail image), choose Save Target As (in Internet Explorer) or Save Link Target As (in Netscape or Mozilla), and place the unzipped file in a convenient location on your local machine or network. To change the template's placeholder text, open it in Netscape Composer, as described in the story.

If the downloaded file doesn't unzip automatically, download a free unzip utility. After you install the unzip utility, repeat the steps above to download the template. The unzipped file should then appear in a temporary folder on your system. Move the template file to the folder that will be its permanent home, and then close the unzip window.

Billboard

The first link is to the regular version of our simple billboard site; the next two links are for the billboard site dressed in blue and in red, respectively.

Standard billboard template (right-click to download)

Billboard template in blue (right-click to download)

Billboard template in red (right-click to download)

Gallery

Following is a link for the basic image gallery, as well as links for versions in the other two colors. Note: You must also download the rosesmall.jpg image and place it in the same folder as the template to see it in the image-placeholder spots.

Standard image-gallery template (right-click to download)

Image-gallery template in blue (right-click to download)

Image-gallery template in red (right-click to download)

Rose placeholder image (right-click to download; put in same folder as template)

Blog

Linked here are the templates for the standard blog and for the color editions. Also available are two example files: The first shows what your template might look like after you remove the template's placeholder text and input your own, and the second file is a home page to which your blog might link.

Standard blog template (right-click to download)

Blog template in blue (right-click to download)

Blog template in red (right-click to download)

Example blog with placeholder text replaced (right-click to download)

Example home page that the blog would link to (right-click to download)