Creating Intuitive Web Sites

When maintaining your Web site, you will want to find a file quickly to complete your task more efficiently. So rather than spending 5 minutes or so looking for a single file that you incorrectly named, invest time in creating an easy to understand filename system that would be also be understood by other people. You may want help in the future maintaining files and if nobody else knows your cryptic filename system, they’d be at a disadvantage. Generally, a Web site’s home page is named “index.html” (which is now standard). As a side note, when naming this page in FrontPage, type the full name “index.html” into the “Save As” block instead of typing “index” or the program will save it as “index.htm.” Most servers need the full “html” extension to automatically display this page when a Web site address is entered in the URL block of a Web browser. Other files will be saved with the “.htm” extension, which is fine in most cases. All you have to do for the other files when using the “Save As” option is simply type the filename and click “Ok” to save your file.

Your filenames can’t contain any special characters. If they do, most FTP programs won’t upload the file(s) or if they do, a browser wouldn’t be able to read the file. Filenames can contain “_” (an underscore) and “-” (a dash) but that’s about it for non-text characters. These two characters are useful for substituting spaces between words. You should avoid naming any file containing anything besides plain text and numbers. What if someone calls you and asks for a page address and you have to recite all the character terms that your friend (or customer) doesn’t know. Or if you advertise your site over the radio, saying “running dash USA dot com” may cause a potential visitor from going to “runningdashusa.com” instead of “running-usa.com,” especially if they are a novice Internet user.

All of your filenames should be in lowercase format since Web browser input is case sensitive, meaning if someone wanted to go to your downloads page and typed “downloads” when you had “Downloads,” the browser might deliver an error message. No filename can be longer than 256 characters and you should not exceed 8-10 characters per filename, when possible for etiquette reasons.

If you work for a company or other organization, definitely check to see if they have their own standardized filename system before beginning.

You may now create a new HTML document in FrontPage Express. Save this page as “index.html” with the same procedure as discussed earlier in this chapter. At this time, we will now make you familiar with some layout design and implementation techniques.

Storing your project files in the most organized fashion is key to building and maintaining a successful Web site. Start by going to your primary hard drive, usually called your “C” drive. When there, click “File”, “New”, “Folder”. A new folder will appear with the text “New Folder” highligted. Type in an appropriate folder name and hit your “Enter” key to continue. Some suggestions include simply “Web Site” or “www”. If you store multiple Web sites on your hard drive, it will be more logical to name the folder in accordance to your site’s name so you can differentiate between other sites stored on your drive. You may be wondering what the significance of the folder “www” means. A similar folder will be titled “www” on your server’s account. This is where you will upload (or transfer to another computer) your Web site files.

You may find it helpful to create a folder titled “images” to store your graphics. It’s less tedious to find the file you’re looking for when it’s organized this way rather than looking through a directory containing both graphics and Web pages. When linking to graphics in the “images” folder, just create the extension “../images/yourfilename” where “yourfilename” is the name of your specific file.

Shortcuts help you complete a task more efficiently and save you time. You may already be familiar with these shortcuts from utilizing other programs.

Common Shortcuts for IBM / IBM Compatible Systems:

• Ctrl + A Select all command
• Ctrl + B Creates bold text
• Ctrl + C Copies an element
• Ctrl + I Creates italicized text
• Ctrl + N Opens a new document
• Ctrl + O Opens an existing document
• Ctrl + P Prints your current document
• Ctrl + Q Exits the currently active document
• Ctrl + S Saves your current document
• Ctrl + U Creates underlined text
• Ctrl + V Pastes an element
• Ctrl + X Deletes an element (same as the “Delete” key)
• Ctrl + Z Undo a command

Microsoft is the developer behind an excellent software program called FrontPage. It’s relatively easy to use and it offers some nice advanced features. Its a WYSIWYG (What You See Is What You Get) editor, which means you see exactly what your Web page will look like in a Web browser. Writing HTML code is not necessary to produce Web pages with FrontPage but it is an option and expands FrontPage’s normal capabilities. Although their retail version offers more “bells and whistles,” the limited version of the software program, titled FrontPage Express (or FPE) offers many of the same features but removes the advanced functionality. And this doesn’t necessarily put you at a disadvantage. Not all of the advanced features work properly with all browsers. You can, however be certain that they’d work with the Internet Explorer browser because Microsoft developed it. But another popular browser, Netscape Communicator does support many DHTML effects from FrontPage, partly because the programming code is almost entirely different from each other between these browsers and many functions behave in different ways.

But to cut right to the chase and get you familiar with the interface, you might be somewhat relived to know that its very much like a word processor’s interface. If you’ve ever used Microsoft Word, you’ll feel very comfortable with FrontPage and construct your pages with ease once familiar with a few more program functions.

If you already have FrontPage or FrontPage Express (the “Express” version is bundled with Internet Explorer version 4 and above), you can start it by going to “My Computer”, your primary hard drive (usually drive “C”) and then “Program Files”. Look through the “Program Files” folder and you should see another folder titled either “Microsoft FrontPage” or “FrontPage Express,” depending on your version. Click on the program icon inside the “Bin” folder. We’ll go over FrontPage Express, simply because its available for free if you need it and its very similar to the retail version. To obtain this component, you will need to download Microsoft Internet Explorer. You can download the latest version free of charge at http://www.microsoft.com/ie. Just follow Microsoft’s prompts for download and installation instructions.

When you have FrontPage running, look at the interface and move your mouse over the buttons. A tag should appear with information in regards to the button’s function. For example moving the cursor over the color palette with the letter “A,” and you’ll get a tag reading “Text Color”. Type some text in the main window and try giving this process a try. After typing, select your text and click that button and you’ll get a dialog box with color options. Simply click on a color and click “Ok” for your text to change color. Later on, you’ll learn how to define your own colors using this palette.

We will assume you have the inverted “P” (paragraph symbol) button selected throughout the upcoming lessons. This allows you to view important format elements. By default, this button should be already selected, but it’s important to double-check to see if this FPE feature is currently active.

We encourage you to experiment with other features to get you more familiar with them in upcoming lessons. Many people learn by doing, and experimenting with different functions will certainly help. Your work will become much more streamlined as your experience builds.

This is the point where you first start designing your Web site. And this process is made much simpler through your first lesson in this chapter.

Take your list and look at the categorization you did with it. You’ve got most of this step done; now you just need to map it all out. So, starting with what is called a home page (usually named “index.html”), create a site map. This process is very similar to creating a family tree. As you progress down the web map, the blocks (or pages) branch off from each other, in order of importance or for organization purposes. Your primary categories stem off from your home page and subcategories from these categories progress from your category pages. To give you a better idea of what we’re saying, we’ve provided a rather basic map as an example.

The purpose of creating a Web map is to create a simplified view of your entire Web site to eliminate much of the potential stress when you’re creating and piecing together your Web pages. You’ll find it considerably easier to simply look at a drawn out plan when you’re designing your site.

Now look at your decisions you made so far in this chapter. Choosing a theme should be an easy task, provided you successfully completed the first two lessons. Webster’s Ninth New Collegiate Dictionary defines “theme” (in part) as a) a subject or topic of discourse or of artistic representation and b) a specific and distinctive quality, characteristic, or concern. A well-designed site always contains a common theme that weighs off its target audience. So design your graphics and layouts accordingly.

Let’s go back to our example with ocean life. You’ll want to design graphics that relate to what your site is all about. So, drawing graphics such buttons that look like shells or outlines of fish, for example, would be a creative way to fit your graphic designs to your theme. And what about your background? How about creating a rippled water graphic or one depicting an ocean view from a beach? The possibilities are endless, but make sure you choose a theme that makes sense.

Generally speaking, the point of a Web site is to publicize information or to market a product or service in the most effective way possible. This technique is an important marketing approach. With your brainstorming list in mind, think about the most probably group of people that would visit your site. If you were trying to market a clothing fad, a new music CD, or movie, you’d want to aim it towards teenagers or people in their early to mid 20’s. Research tells us this range of people generally spend more money in this area. If you want to market a car, you probably want to aim it towards adults… since not too many young people can afford a new car. And would you want to market a red-hot Pontiac Firebird Convertible to someone in a retirement home? Probably not—it’s not every day you might see an elderly person cruising down your local highway. So take the obvious factors into mind and publish a site that most likely appeals to your target audience. For instance if your site is on environmental protection, you’ll definitely want to avoid high-tech effects and graphics. On the other hand, the MTV generation would definitely appreciate high-tech features. You’ll also want to take into account the experience of a group of people. Adding features that rely on special plug-ins that need to be downloaded and installed is not recommended. Additionally, using heavy graphics, large sound files, and complex, un-orderly layouts may discourage visitors from returning to your site.

This step is perhaps the most difficult task in the whole Web site creation process. Ask yourself, “What do I want on my Web site?” Take a few minutes and jot down some ideas. You should devise a fairly decently sized list to save you time during the site creation process. After all, you probably want your site up-and-running as soon as possible. It’s important to create this list before proceeding to the next step. Be sure to get a lot of ideas. The more information you have on your site, the more informative it is and your visitors will be more likely to return to it. Just make sure it all fits into your site’s topic since you probably don’t want a site containing different topics. Subtopics are okay and they should stem from a single main topic whenever possible. People generally don’t like to scroll continually on a single page so cutting down on main categories is crucial.

Once you have a good list going, try categorizing them. You will find this step helpful when you have to construct a site map. When you’ve finished categorizing your ideas, look for a common relationship between them. For example, are your ideas centered on ocean life? Your common relationship would center on your title. In this case, the title, “A Synopsis of Ocean Life” may be appropriate. Or, if you were simply devising a personal site, for example, “John Doe’s Site” would suffice.

Remember to aim your site towards your target audience (the primary group of people that would get the most from your site).