Build Web Pages Offline

Many web designers find that it's easier to build web pages offline so that they can work on projects while they are either mobile or otherwise unable to connect to the Internet.

Starting a Web Design Business

When you build a web page offline, it's not a whole lot different than when you build it while connected to your web server. The major difference is that you are able to view your web page from within your local web browser while you're offline. This is possible if you carefully plan how your website is built and how you structure the links within your pages.

Many new web designers often prefer either connecting directly to the web host and editing the web pages, or quickly editing a page locally and then uploading the file to the web host. Neither of these approaches are the smartest way to build a web page. One example of a problem it can create is a scenario where you upload a page to test it, overwrite your live page, and the new page doesn't work. By taking this approach you could potentially destroy your working web page. The advantages to building a website offline include:

• Conducting your testing offline protects your online website
• Creating a website that works offline forces you to carefully organize your links and pages so that they are independent of directory structure through relative addressing (see below).
• Building a full offline test website also serves as a back up copy should your live website ever get deleted or otherwise damaged.

What makes building web pages offline work is a technique called relative addressing. This is where you refer to all of your internal page links relative to your current directory, rather than using an absolute path. For example, if you've created a web page called "myfamilytree.html," and you've saved it to a directory called "c:\MyWebsite\geneology\," there are two ways to link to that file from within another page.

Absolute Addressing: The method many amateur web designers sometimes use is to use the full path in the URL. This type of addressing looks like this:

This approach works great as long as you are viewing the web page on your local computer. The moment you upload your web page to the web host, none of the links will work anymore, because the part labeled as "c:\MyWebsite\" no longer exists when the pages exist on the web server.

Relative Addressing: The correct method to address other pages and media on your website is to use an addressing scheme that accesses other files based on where you're calling the file from. This type of addressing looks like this:

This approach works by using commands like "../" to start the path on a lower directory level, or "./" to start from your current location. However, usually all of the html files are stored together in a single folder, and you'll typically only need to link to other pages on your website by using just the filename, like this:

Relative addressing is more commonly used to access files like images, which are often stored in a subfolder called "graphics."

If you build your local website within a single directory, then you'll be able to easily build the site within that directory. As long as all pages, images and media are linked using relative addressing, your web pages will behave exactly the same locally as they will when stored on the server. The only behavior difference between viewing your website on your local PC and viewing it live on the web server is that locally the external web links will not work, but all of your internal links to your own pages will all work properly.

The key to making sure that your website doesn't get changed or corrupted during the transfer to your web host is by making sure you maintain the same directory structure on the web host as what you had set up on your PC. For example, consider the scenario where you created a local website on your PC inside a directory called "c:\mywebsite\" and you also had the following subdirectories inside it.

• c:\mywebsite\mypics\ to store all images
• c:\mywebsite\mymovies\ to store all videos
• c:\mywebsite\journal\ to store blog updates
• c:\mywebsite\journal\images\ to store journal images

You will want to copy the same directory structure to the web host. This means that all files within c:\mywebsite\ should be copied directly the "/wwwroot/" or whatever the root Internet directory is names on your server. All subdirectories within that root web directory should match how you had it set up on your PC. So the structure on your web host will look like this.

• /wwwroot/mypics/
• /wwwroot/mymovies/
• /wwwroot/journal/
• /wwwroot/journal/images/

By keeping all directories identical, and using relative addressing, you can easily upload your entire website from the local testing PC to your web host, and it will work without the need to modify or fix any of the pages.

A few final considerations to keep in mind is that any scripting on your site, or anything that requires access to the database on your web server, will not work properly when the site is run locally. One way to get around this is to install web hosting software on your own PC, and mirror the same setup as the paid hosting account. Doing this will allow you to test all aspects of your website. However, for most website developers, just viewing the site locally with a web browser will suffice.

• How Do I Enable Javascript on my Computer
• Really Cool HTML Codes
• Worst Traffic Rankings
• Design A Web Page Quiz
• Cursive Handwriting Font

• Free Helvetica Font
• Free Fonts Helvetica Truetype
• Free Forum Hosting Without Ads
• Download a Free Copy of Dreamweaver
• Animated Falling Snow GIFS

• Category:Web Design Tips and Tutorials
• Web Host Administration Software
• Main Page
• Adding Videos to Web Pages
• How to Build a Web Page