How to Build a Website Offline Using Software

by Katelyn Kelley

The majority of work that goes into building a website happens offline, on your local computer, so completing your entire website without ever connecting to the Internet is possible. An entire website can be designed, executed and even tested on your local computer with simple web editing software and a web browser.

Design the Page Layout

Launch your web design software. The easiest software to use is one with a WYSIWYG (what-you-see-is-what-you-get) interface that allows you to type your web page like you were typing a letter.

If you are using a web site template, open the template in your software to make sure it is compatible, then examine the areas that can be customized and compare them to the content you planned for your site, especially the graphics, which must have the same dimensions as the template placeholders.

If you are not using a template, consider how you would like your web site information arranged. A top banner spanning the page, followed by 1/3 of the page for one column and 2/3 for the other is a layout you see in many good web site designs.

Decide where to place the navigation bar (set of buttons or links) that connects your home page to your other web pages. The most common locations are along the top of the page (usually below a graphic banner), or in the left column. You gain more space for page content if you use a top navigation design.

Add the Text Content

Insert the text content for your web page. Remember to keep the most important pieces of information in the top half of the screen (above the scroll line) to get your visitors' attention first.

Customize your text with bolding, colors and other embellishments that will draw your audience to the important information, but keep in mind that less is more. A "busy," frantic looking web page can be a turn off to visitors.

Keep the look of the text uniform, by using the same font throughout, unless there is a specific reason to change the font.

Use a basic system font that is available on all computers if you want your visitors to see the web page as you see it. Consider using cascading style sheets to set the text appearance, if you want more control over how your web page displays on other computers.

Add Graphics

Place your cursor where you want the graphic to appear, then use your web software's insert graphic command to choose the graphic or enter the HTML code to point to the file you want to add.

Graphics should be edited and resized to the dimensions you need BEFORE you add them to your web page. This is especially important when using a web site template that has pre-determined areas for graphics. If your graphic is too big or too small, you will throw the template off and your page will not look like it should.

Graphics files must be in JPEG, GIF or PNG format to work on your web page. PNG graphics may not be visible in older browsers.

Add Hyperlinks

Select the text or graphic (button) on your web page you want to become a "hot link" or "hyperlink" to another web page.

For an external link (a web address outside your website), type the complete URL starting with http:// into the link area of your web design toolbox or into the A HREF tag if you're editing the HTML code.

For an internal link (a link to a page in your site), enter the file name to the next page if it's in the same folder as the page you are editing, or the folder name/filename if it is in a subfolder of your site. A WYSIWYG web editing tool can make creating links easy. If you are editing in HTML, you will need to locate the path to the file yourself and it might be easier if all the files are located in the same folder.

View and Test Your Site

Preview your site and check your internal link offline by using your web browser to read the .htm or .html files. You do not need to be connected to the Internet to do this.

Open your browser and from the FILE menu choose "Open" or a similar command, and locate the home page to your site on your local hard drive.

Check how your web page looks, test the links to other pages that reside on your computer.

If you discover any problems, return to your web editing software, make the changes and save, then return to your Browser and "refresh" the page to see the changes on the screen.

Continue this process until you have the website working the way you want it to.

When you are ready for the world to see your website, you will need to get a domain, a web hosting account and upload your files to a web server.

Tip

  • check Invest in a good web design book and an HTML reference book to help you make the best web site possible. Invest in a good graphics program for editing and customizing graphics for your website. Graphics are a big part of what makes an appealing website. When you are ready to put your website online, consider a web hosting company that offers domain name registration/web hosting bundles and 24 hour support, and shop around for a good price.

Warning

  • close Always back up your work onto a separate media and store it in more than one location.

Items you will need

About the Author

Katelyn Kelley worked in information technology as a computing and communications consultant and web manager for 15 years before becoming a freelance writer in 2003. She specializes in instructional and technical writing in the areas of computers, gaming and crafts. Kelley holds a Bachelor of Arts in mathematics and computer science from Boston College.