An Introduction to Building a Web Site Introduction In this document we will focus on strategies for building and maintaining your Web site. You will also learn how to upload files to your Web server in order to publish them. Along the way, you will learn tips and tricks that will help you get the most out of your Web Hosting Service. If you're only interested in specific instructions for publishing to your Web server, see "Publishing your Site" below . However, we advise that you read the design principles carefully before actually implementing your Web site. Using Your Web Site Designing Your Site Once you've played around with your Web site a little, take a moment to come up with an overall design strategy for your site. Thorough planning can save you a lot of headaches down the road. For example, it is a common mistake to upload all Web-related files, graphics, and HTML files to the main /www directory. Limiting Site Layout ("All the Eggs in One Basket") While this method may work well with a small site, soon the files begin to accumulate, making the site hard to navigate and more difficult for you to maintain. A solution to this problem is to create sub-directories for each conceptual division of your site. Create an /images directory to hold all your images. If you plan to have multiple pages that contain company information, you might group these files into a directory called /company. Likewise, product information may be stored in a directory called /products. Good Site Design Using Sub-directories Though it is not difficult to change the locations of files or create new directories at a later time, having to go back into each individual HTML document and redirect the links to match the new document locations can become very tedious. Also, changing your files around later may affect visitors who have saved your pages as a bookmark or favorite. In short, failing to design your site's basic topography at the start may result in more work later. Using Schematics A technique that will aid you immensely in the design phase is to map out your site using schematics. A schematic is a visual representation of your site's organization. For example, draw a box for each page of your site on a piece of paper; then draw a line from box to box representing hyperlinks. Figure 3 shows a site that is still in planning with all its links, while Figure 4 shows the same site after it has been organized into directories. The Planning Stage with Pages and Links The Same Site Organized into Categories This method of planning may get complicated, so you may want to group documents that you know will be displayed together into a single box on your schematic. Schematics can be especially useful if you have several people working on your site. The schematic offers the ability to assign parts of the site to different people or departments and still be certain that everyone understands how their sections fit together. No matter which planning technique you use, make sure you do plan. Careful consideration of the project before you begin will make your job as a Webmaster much easier in the long run. Questions to Ask To aid your conceptual design, here are some questions to ask yourself: What is the overall purpose for this site? How can I organize the site to make it easy for visitors to use? How many HTML pages will I need to create? What elements (images, text, links, and sounds) will I use? What, if any, advanced functionality will my Web pages have? If you do not know what is possible for you to do with your Web pages, you can find some great ideas online! Browse the Web, taking careful note of your favorite Web sites. What factors make these sites successful? Are they easy to navigate? Are they pleasing to your eye? Pay close attention to layout and organization as well as what features these sites offer to visitors. The Nuts and Bolts of a Web Site Remember, you can't build a house without knowing how to use a hammer. When designing your site, you should have a firm grasp on the building blocks that your pages can use. A basic understanding of these elements is essential to creating a great page. The fundamental elements of a Web site include the following: Text It is nearly impossible to find a Web page on the Internet that does not use text in one way or another. Depending on the browser you are using to view the pages, text can be plain, bold, italicized , or in different sizes, colors, or typefaces . Text can also be centered, left or right justified on the page. Text can be manipulated on the page in other ways: indented, hyphenated, converted into different languages such as Chinese or Russian, etc. If you have written materials such as press releases, documentation, manuals, you can usually convert them from word processor files to Web pages with a minimal amount of tweaking. Forms Forms are an advanced Web feature that allow a user to interact with your pages. Through the use of radio buttons, checkboxes, text entry fields, and other input elements you can ask visitors to enter specific information right on the page and then use a CGI script to process that information. Images Images are what make the World Wide Web interesting! Like text, images can be large, small, centered, or justified on the right or left of the page. Unlike text, images can be slow to load, so it is important to consider the file size of the images in your pages. A special image can also be selected as the background graphic for a Web page. There are two basic types of graphic formats that are used everywhere on the Web. Both formats essentially do the same thing: they store a picture. There are many other formats, but these two are seen most often on the Web. JPEG ("jay-peg") - A format with varying degrees of compression. GIF ("jif" or "gif") - A less compressed picture format. GIF images allow you to make areas of your images transparent or create animation by showing a series of images in the same space. Commercial programs, including Adobe® Photoshop®, and some public domain applications, can be used to convert images from one format to another. Sound New formats and standards are emerging that allow your Web pages to play sound or music. You can now have your Web page play a jingle for your company as the user reads about your product. The following is by no means a complete list of sound formats available on the Web, but it does give you some idea of what's out there. MIDI ("mid-ee") - Anyone familiar with keyboards or sequencing will recognize this classic standard for storing musical notes in a computer file. New Web browsers are now recognizing this file type, so that files stored in this format can be played on-the-fly as a user looks at a page. WAV ("wave") - An old IBM sound format for digitally sampled sounds. WAV files are not compressed, so sounds in this format will tend to sound better than the others but make really large files. RealAudio - This format allows sound to be played as it is coming into the Web browser, without requiring the whole sound to be completely downloaded first. Many radio stations on the network now broadcast live with RealAudio. RealAudio must be served from a proprietary server, such as your EarthLink Web Hosting Site. MPEG3 ("em-peg-three" or "em-pee-three)- MPEG 3, usually abbreviated to MP3, is a high-quality compressed sound format that allows CD quality audio to be condensed into a tight format. Animation The World Wide Web once only allowed static pictures, but today moving images are everywhere. Aside from the flashy attention-grabbing possibilities which animation offers, moving images can also be used to demonstrate a product in action or to dynamically illustrate a process. The eye-catching advantages of animation should be balanced against the increase in size of the files to be transmitted over a modem and how those factors will affect the visitor's experience. Multiple frames of animation take longer to load than a single-frame image, and many waiting users may simply hit the Stop button before even the first frame is seen. Another consideration when deciding to use animation is how compatible the format you use will be with your visitors' browsers. For example, one popular method called Shockwave requires that the viewer has already downloaded and installed a plug-in for his or her browser. Any browser not equipped with the Shockwave plug-in will not see the animation. But Shockwave gives you capabilities beyond the scope of any current Web browser, so it may be worth having your visitors install it before they continue on your site. Plus, most browsers these days come with Shockwave already installed, and there are many sites out there that use Shockwave. Here are some common files used for animation: QuickTime - Apple Computer's standard for animation. Most modern browsers already support this standard. QuickTime handles various kinds of compression and image sizes. Shockwave/Flash - Developed by Macromedia, Inc., Shockwave can best be described as Director-on-the-Web (Director is a classic 2-D animation program from Macromedia). One nice feature of "shocked" pages are that elements in the animations can interact with the user. Shockwave can also include music and digital sound samples. MPEG ("em-peg") - The "motion-jpeg" - An older standard of compressed animation used predominantly on PCs. Good for video. GIF 89 ("Jif-eighty-nine") - An older format popular on the Web, GIF is supported by nearly all modern browsers. The GIF animation format is often used on advertisements. These are popularly known as "Animated GIFs." Advanced Interactivity The World Wide Web is advancing in leaps and bounds. What began as static text and pictures now has grown in flexibility...and complexity. The cutting edge of Web page development allows you to create pages that practically think for themselves. CGIs - or Common Gateway Interfaces, are small programs that run on your Web server. For example, if you put a form on your Web site, a CGI program processes the information that someone types into the form. EarthLink supplies CGI scripts for your most common needs such as counters, email forms, and discussion boards. You may also use most CGI programs you find on the Web, or even write your own in Perl or C. For more information on using CGI scripts, see the EarthLink Help Desk's Web Programming page at http://help.mindspring.com/webhelp/web_programming/perl_cgi/ PHP - A programming language, PHP is a little bit like CGI in that the code is executed by the server when a visitor hits your page. However, PHP code is embedded within an HTML file (this is called "Dynamic HTML") and has several distinct advantages over regular CGI programming. To learn more about PHP, visit the official PHP home page at http://www.php3.com or EarthLink's PHP page at http://help.mindspring.com/webhelp/web_programming/php/ Java - The programming language, Java, allows an entire mini-program called an applet to be automatically downloaded and executed in a browser as part of a Web page. Java applets can do almost anything that any computer program can do including play games, inventory information, calculate information, etc., all with graphics, sounds, interactivity, and other devices the computer has at its disposal. Thinking about Content Content is the text and images that people read and view when they visit your pages. Here are some content-related items you may wish to include in your Web site. Contact Information Contact information is often the first thing that people look for on your Web site. You should try to make it easy for your visitors to find. For most businesses, the most important piece of contact information is a phone number. If you are part of a small company, your main switchboard number may suffice. If you are a medium-to-large company, you may need several: one for sales, one for recruitment, one for marketing, and so on. Remember that the Internet is international in scope. You may get calls from overseas, so be sure to list regular phone numbers (with full area codes) as well as 800 numbers. Finally, make sure you include a fax number if you have one. Another important piece of contact information you should provide is an email address, one that will be checked frequently. Using the Post Office Manager, you can create email addresses for sales@yourecompany.com , recruiting@yourecompany.com , info@yourecompany.com and so on. Please read Your Email Post Office to learn how to create these addresses. You may also wish to include your street address or post office box so people can get an idea of where your offices are located. Mission Statement Who are you? What do you do? Most companies include a mission statement or statement of purpose as a part of their business plan. It may be a good idea to provide it online so that people can instantly tell what your business does. Product Information This information and its format will vary depending on what your company does. A computer manufacturer may provide detailed information about its different models. A law firm can provide information about the kinds of cases that the firm handles. Whatever products or services your company offers, you should strive to provide as much information as possible, while highlighting the most important points. Online Support The Internet provides a means for you to offer 24-hour support for your products and services that is in many ways superior to what you can offer on the telephone-all for a fraction of the cost of providing phone support. If you have a technical support library, you should consider making it available online. Depending on the size of your company and its market, this knowledge base may be formalized in a database or may be an informal group of text files. You may also wish to put together a FAQ (Frequently Asked Questions) list to assist your customers with common problems or questions they may have about your business. Once this information is in place on your Web site, make it searchable. The htDig search tool, available on the Hosting Control Panel allows you to index your Web site so your visitors can do keyword searches. For general help on using the Control Panel, see The Hosting Control Panel in this guide. To learn about the htDig tool, visit EarthLink's Help Desk at http://webhelp.mindspring.com Under Construction Under Construction... Just Say No! Under normal circumstances, you do not need to tell people your site is under construction. They expect it to be. It is taken for granted that all good Web sites are constantly being revised and updated. When you first receive your Web Hosting Site, you will see an "Under Construction" page if you visit your Web site. This page is a placeholder only, so that you can verify that your Web site has been activated. In lieu of the Under Construction sign, consider putting up a very simple single page that provides your basic company information. Later, when you are finally ready to publish, replace your single page with a fully-developed site. Don't forget that users revisiting pages like to see new content. Establish Your Corporate Image Once you've created a site that people want to use, it is important to ensure that the site reflects the image you want to present. Obviously, your image varies depending on your type of organization. The freewheeling, hip image appropriate for ComedyCentral ( http://www.comcentral.com ), would probably not fit IBM ( http://www.ibm.com ). Depending on your situation, there may be parts of your organization that have put a great deal of work into establishing a corporate image already. This is where your art, advertising and public relations departments can contribute to the look and feel of your site. If you are working with a PR department, you will need to educate whomever will be doing your graphics and layout on the differences between the Web and more traditional printed media. Spend some time working with them to show them what people have done with other sites, and show them some examples of what you consider good and bad site design before they begin to design the look of your site Attracting Visitors There are a number of ways to make your site attractive to visitors. These depend in large part on your industry. Product information, company information, and technical/customer support are crucial for most sites, and having these essentials will give visitors a reason to come to your page. Links to Other Sites It seems that just about everyone has a page of links to other sites. That's what makes the Web work. Usually these pages are relevant to the main site and the topics discussed on the site. You may even consider swapping links with another site to generate more visits. Conclusion Never forget that content, not flashy graphics, is the reason most people visit your site. Now that you've considered what you are going to put on your page, it is important to understand how to do it. The rest of this chapter teaches you how to set up your Web site. Publishing Your Site Once you have created an HTML page you'll need to upload it and its associated image files to your Web server. We call this process "publishing" your Web page. Once you have sent the file from your computer to your Web server, it can be viewed by anyone on the Internet. You can use an FTP client or your Web editor to publish your Web files. Your Web Server's Directory Structure When you connect to your Web server with an FTP client you'll see the following directories: Directory Description /cgi-bin This is where you put Perl & compiled C scripts /bin This is where system binaries are stored. You generally don't need to concern yourself with this directory. /conf This area is used by FrontPage and only appears if the site has been modified by FrontPage. /counter /counter This directory holds a file named access_count , which keeps track of hits for your counters. /etc This links to configuration files and other files on the server. Again, you generally don't need to concern yourself with this directory. /log /log holds the raw logs for your Web site. /mivadata This is used for housing any scripts written in the miva scripting language. /pub If you anonymously FTP to domain.com, you end up in here. This is your publicly accessible directory for FTP. See Your FTP Site for more about using this directory. /realaudio Any RealAudio or RealVideo files go here. It is a link to the RealMedia server. /usage This directory contains bandwidth logs. /usr This holds the private FTP Dropboxes. A Dropbox for a user named "turtle" would be /usr/private/turtle. You generally don't need to concern yourself with this. For more on using FTP Dropboxes, see Your FTP Site . /www This is where you put your Web page files, images, etc. This chapter concerns itself only with the /www subdirectory, which is where you should put your HTML files. Publishing with WS_FTP (Windows 3.1, 95, and 98) WS_FTP is a popular FTP client for Windows that is included with the EarthLink Internet Connection Kit. If you do not have the latest version of WS_FTP, it can be found at http://www.shareware.com or on your EarthLink CD-ROM. Note: The following instructions are for WS_FTP Limited Edition only. Users of WS_FTP Pro (or any other FTP client) should refer to their FTP software's documentation to learn how to upload Web Pages. If you are behind a firewall, you may need to check with your network administrator for instructions on how to connect. To upload your Web pages and images using the WS_FTP program for Windows 3.1, 95 and 98, follow these steps: Launch the WS_FTP software program. To set up a session profile, click the New button. Change the General information for your connection. You may use any name for Profile Name. Type ftp.business.earthlink.net in the Host Name/Address box. The Host Type should be set to Automatic Detect. Under UserID, enter UserID%yourecompany.com . Under Password, enter your password. If you are unsure what your UserID or Password are, refer to the Welcome Letter you received with your Web Hosting Starter Kit. In most cases, you can leave the other entries alone. Be sure to click Apply when you are finished. Changing the Session Properties Click the OK button to establish an FTP session with your site. A connection to a Remote System In the right-hand window, double-click the /www directory. In the left-hand window, select the name of the file you wish to upload, and click the right-arrow button in the middle column of the FTP window. WS_FTP will begin to upload your file. If you do not see your new file in the right-hand windowafter uploading, click the Refresh button. You can specify the directories that WS_FTP starts in using the Startup tab . When sending files, it's important to make sure you've selected the correct transfer mode for your file. The mode can be selected from the three radio buttons on the main panel. If You Are Sending Choose GIFs and JPEGs Binary HTML ASCII Perl and C code (text files) ASCII QuickTime Movies Binary Using Site Commands with WS_FTP To use a site command like CHMOD, right-click on a file. When a list of commands appears, choose CHMOD, and enter a new value for the permission settings of your file. Publishing with Fetch (Macintosh) Fetch is a popular FTP client for the Macintosh. Publishing with Fetch To publish your Web files using Fetch for the Mac OS Launch the Fetch application. It should prompt you for a connection. If not, go to the File menu and select New Connection. The Startup Tab Fill in the fields appropriately. If you are unsure what your User ID or Password are, refer to the Welcome Letter you received with your Web Hosting Starter Kit. Once connected you should see the following screen: To upload a file, click the Put File button. Fetch will ask for the file that you wish to upload. Choose the file on your local computer, and click OK. Next, Fetch will ask what type of transfer format you wish to use. Choose from the following list: If You Are Sending Choose GIFs and JPEGs RAW HTML Text Perl and C code (text files) Text QuickTime Movies RAW Mac files for your visitors to download BinHex Transferring Multiple Files with Fetch To transfer multiple files to the server, select Put Folders/Files from the Remote menu. This opens a dialog box that allows you to choose the files you wish to upload. To transfer multiple files from the server, use the Shift or Apple (Command) keys to select more than one file. Then, click the Get button. Changing Directories with Fetch To change directories, double-click on the desired directory. To back out of directories, use the small drop-down box above the file listing. Using Site Commands with Fetch To use a site command like CHMOD, go to the Remote menu and select Send FTP Command. Type chmod xxx filename where xxx is the permission setting you wish to use, such as 755.

Members and visitors to the EarthLink website agree to abide by our Member Policies. EarthLink Privacy Policy © 2002 EarthLink, Inc.