Build your own digital domain, step by step
Most everyone, from huge online stores to mom-and-pop delis, has a Web site these days. Even average families are creating their own sites to share photos and information with friends and relatives. If you're concerned about the complexities of Web-site design, you shouldn't be: Building your own is becoming point-and-click simple.
A Web site is, in some respects, nothing more than files stored on disk space on a computer connected to the Internet. Web surfers access files, or Web pages, through their browsers, which interpret code that describes how the page is displayed. Popular graphical Web editors such as Microsoft FrontPage and Macromedia Dreamweaver let you build Web pages by dropping elements onto the page and using dialog boxes to change their properties and add links. And you don't need to know a lick of HTML to create a simple site.
This month we'll guide you through the steps necessary to get your own Web site up and running, from securing server space to building your Web pages to publishing your pages online. We constructed our sample site—a basic business-card site—using the US$149 Microsoft FrontPage 2000, but the steps would be similar using Macromedia's US$299 Dreamweaver 4.
If you already pay for dial-up or broadband Internet access, chances are your Internet service provider (ISP) makes available 5MB or more of space you could use to experiment with your own site. First, check with your ISP to find out how much space is available to you and whether the provider has a cap on the download bandwidth (the amount of visitor traffic you are allowed). Another good alternative for small, basic sites is a free hosting service such as Yahoo GeoCities or Freeservers.
If you need more space for your Web site, you'll have to pay for a Web-hosting provider. Web-hosting services have many levels, but when starting out, going with a shared host probably makes sense. Such space can cost as little as US$10 a month, and storage amounts typically range from 75MB to 150MB for starter sites. You also are allotted a set amount of download bandwidth, usually 1GB to 5GB a month.
Tip: If you are using FrontPage as your Web-authoring tool, make sure your host provides FrontPage server extensions, which will allow you to add elements such as search forms and hit counters.
Your domain name is simply an alias for an Internet Protocol address that directs users to your site, through the Domain Name System (DNS). If you want a site that a few friends and family can visit every now and then to view photos or read your latest pithy thoughts, the domain name you get with your Web space should suffice. For instance, at Freeservers, your domain becomes username.freeservers.com, so that Michael Primopages might go with michaelprimo.freeservers.com. If Michael insists on michaelprimo.com, however (primo.com is long gone), he'll need to register the domain.
A domain name is registered for a period of one to 10 years with a central registrar and costs about US$30 to US$35 per year. The easiest way to register is through your Web-hosting service when you buy your Web space. If you want to register your name before you find a Web host, you can do it yourself with a service like Network Solutions or Register.com, which can "park" your name. When your site is ready, your hosting provider can arrange the transfer.
Tip: Domain-registration services such as Network Solutions and Register.com let you search for available domains. The search tools of some sites, including Register.com, will identify the owner of the domain and when the registration is scheduled to expire.
Begin building your site by defining it on a local hard drive. Using FrontPage, select File > New > Web to create a new Web-site structure. You can set the folder location or accept the default location of \My Documents\My Webs\. When your site opens, click on Default.htm (or Index.htm, depending upon your installation) to open a blank page. Front Page creates a separate images folder for graphics.
Tip: When you create a new Web site, FrontPage lets you choose from several templates you can use to build your site.
When building your first Web site, keep it simple, and begin with at least a rough sketch of what you want, including text, images, and links.
As you gather photographs and graphics, make sure to keep file size in mind: The smaller the files, the more you can fit within your allotted Web space, and the faster your site will load when browsed. As a rule of thumb, resize images at 72 pixels per inch (screen resolution) to fit the space you want on the screen, and save images in JPEG (.jpg) format. Graphics work better as GIFs.
Set background color or image
To set a background image, right-click on the blank default page and open Page Properties. In Page Properties, set a background color using the provided color palette, or load a background image by browsing to a file on your hard drive. Your image can be nearly any size, but the smaller the better. If the image isn't large enough to fill your screen, FrontPage will automatically tile it to fill the background area. We created our gradated background using one 25-pixel-high strip, which employed a color gradation near the left.
While you have Page Properties open, also enter a title for the Web page. This title will show up on the bar at the top of the user's browser.
Draw a page-layout table
An HTML table is a structure that lets you create rows and columns to hold pictures and text, much like an Excel spreadsheet, although HTML tables tend to be irregular. An HTML table is a way of dividing the screen so that you can place different elements where you like. FrontPage's Draw Table tools make it easy to create custom tables using a pencil-and-eraser metaphor.
To lay out your Web page using FrontPage, select Draw Table from the Table menu, and pencil in the table by drawing cells and subdividing them with the pencil tool. You'll also need to change border width from 1 to 0 in the Table Properties menu.
To add a headline or greeting, draw a table cell on your page to hold text. Click inside the cell and type the text you want, such as "Welcome to my site." To make the text a suitable size and color, click and highlight the text to change the font properties. With the font properties at the top of the screen, set individual font size, color, and alignment.
HTML text uses heading sizes of one to six (largest to smallest) or sizes one to seven (smallest to largest). You can also set size by +/- font sizes, which key off the default size. It can be a little confusing, so preview your page to be sure it's what you want.
Also, make sure to check the readability of your text against your chosen background image or color in a browser. Poor readability can kill a Web page.
Tip:FrontPage lets you use any font installed on your machine, but to view your site correctly, visitors to your site must have the same font installed. If you want to use a fancy font, consider using a graphics program to create the text on a transparent background, and then save the graphic as a bitmapped file.
Insert images
Chances are you'll want images on even the most basic Web site. To insert an image using FrontPage, click inside the table cell where you want the picture and select File > Insert > Picture. The Insert Picture dialog box lets you browse for an image. To alter image size or alignment within FrontPage, right-click on the image, choose Picture Properties, and click on the Appearance tab.
Provide links
You can use links to connect to another location on the same page, another page of your site, other sites altogether, or even to bring up the user's e-mail client. It's easy to define either text or a graphic as a link.
To create a text link in FrontPage, highlight the text, then choose Insert > Hyperlink. The Create Hyperlink dialog lets you enter a URL or e-mail address.
We opted for images as a means to let our users link to our About, Contacts, and Gallery pages. To assign a link to a graphic or image, simply right-click on the image and invoke the Picture Properties dialog box. Then specify the link by entering the URL or browsing to it. To link to another page on your site, just enter the page name, for example "about.htm."
With image links, it's important to enter a short descriptive caption for the image, which will display when you pass the mouse over the image or when a visitor has turned images off in his or her browser. To enter this "alternative representation," simply type the caption into the Text field under Alternative Representations within the Picture Properties dialog.
When you've perfected your site, you simply need to publish it—that is, upload it to the Web-storage space you identified or purchased. You can upload manually using FTP clients such as WS_FTP from Ipswitch or CuteFTP from Global Scape, but the easiest way if you use Front Page or Dream weaver is to have the program handle the task for you.
To publish from FrontPage, select File > Publish, enter your Web address, and, when asked, the username and password for your Web space. You can choose to upload the whole site or just elements that have changed, which can save a lot of time when you later begin to update the content.
Once you've uploaded your site, you can test it by visiting from any PC with a browser and an Internet connection.