4Templates.com - Your website template resource

• Introduction
• Downloading your template
• Unzipping your template
• Editing your template
• Publishing your website

Welcome to the Quickstart Guide! This short, step-by-step guide will help you get started with your new website template as quickly as possible. It will take you from downloading and unzipping your template to actually publishing your website online.

When you're ready to begin, the first thing you'll need to do is download your template >>.

Downloading your template

Back to Top

1. Following the completion of your order you should receive an email receipt with a list of all the templates you just purchased. Locate this email and open it.

2. You will see a Download Item link next to each item. Clicking on any of these will take you to your order's download page on our secure website. You may need your email address and account password to access this page so make sure you have this information ready. If this is your first order with us your randomly-generated account password will be at the top of your email receipt.

   

3. Once at the order download page click on the Download button next to the template you'd like to download.

   
   • Microsoft Windows:

     The template ZIP file will automatically download to your Downloads folder. However, if a "Save As ..." dialog box appears, use it to select a location on your computer to save the template (somewhere easy to remember such as your My Documents folder or Desktop) and click on Save to begin the download.

     
   • Mac OS X:

     The template ZIP file will automatically download to your Downloads folder.

     

With the template successfully downloaded you can now move on to unzipping it >>.

You'll notice the template you downloaded consists of just a single file -- a ZIP file. These special "container" files are able to contain other files and folders while simultaneously compressing them to reduce their size, making them ideal for transferring multiple files over the Internet. However, on their own they don't actually do anything so in order to access the template you need to extract the files and folders stored inside the template ZIP file (also known as "unzipping").

• Microsoft Windows:

  1. If the template ZIP file isn't on your desktop, use Explorer to navigate to the folder where you saved it.

  2. Right click on the template ZIP file and click on Extract.

     

  3. Select where you want to extract the template and click on Extract (XP users: click on Next then Finish).

     

  4. A new folder will appear at the location you selected. Double click on this folder and you will see the template's top-level folder (in this case, AX0499BL). Double clicking on this folder will take you to the template's files and folders.

     
• Mac OS X:

  1. Use the Finder to navigate to your Downloads folder.

  2. If you see a folder with the same name as the template you downloaded (in this case, AX0499BL), go to the next step. If you see a ZIP file resembling your order number (eg. XXXXXXXXXXXXXXX_1.zip), double click on it to unzip it.

     

  3. You should see a folder with the same name as the template you downloaded (in this case, AX0499BL). Double clicking on this folder will take you to the template's files and folders.

     

The template is now unzipped and ready to use. You can now move on to editing your template >>.

With the template unzipped and ready to use you can begin constructing your website. If you are experienced with website templates or website design in general you can begin working on the template right away. If not, this section of the guide will show you a few ways you can turn the template into the pages that will eventually make up your website.

A web development application provides a WYSIWYG (What You See Is What You Get), drag-and-drop interface with which you can visually manipulate the template and build your pages. Some take things a step further and include more advanced features such as built-in web publishing capabilities and spellchecking to make the development process even simpler. If you are new to website design this is likely the quickest and easiest way to use the template.

If you don't already have a web development application here are a few we recommend:

• Adobe Dreamweaver (Windows/Mac)
• CoffeeCup HTML Editor (Windows)
• Nvu (Windows/Mac)
• KompoZer (Windows/Mac)

You will also need an image editor if you wish to edit the template's images. Here are a few we recommend:

• Adobe Photoshop (Windows/Mac)
• Gimp (Windows/Mac)
• Paint.net (Windows)

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the languages of the World Wide Web. Almost every page is written in HTML and to some extent styled with CSS. Learning both of these can be challenging at first but we strongly recommend doing so if you have the time and patience. With a good understanding of both HTML and CSS you will not only have better control over the template but also any other page you work on in the future.

If you decide to learn HTML and CSS here are some excellent resources to get you started:

• W3 Schools
• PageTutor
• HTML Goodies

Directly working with HTML and CSS code also means you only need a text editor to get the job done. Both Windows and Mac OS X include built-in text editors (Notepad and TextEdit, respectively) so no additional software is required (unless you want to edit the template's images; see above for a list of recommended image editors). Should you want something a little more powerful than the editor provided with your operating system you can also check out one of the following advanced editors:

• Notepad2 (Windows)
• Notepad++ (Windows)
• BBEdit (Mac)

You may be wondering why we, as a provider of website templates, are even suggesting this as an option. After all, you purchased a template to avoid hiring a web designer in the first place, right? Surprisingly, this suggestion isn't as unusual as it may sound, for two reasons:

• You may need to make complex changes to the template that are beyond your current abilities.

  While a template will certainly speed up the process of building a website you may run into situations where complex changes are needed but you are unable to make them on your own. A professional web designer can assist you with this, and usually at a reasonable price because ...

• Having a designer use a template as a starting point greatly reduces the amount of work he or she has to do.

  A professional web designer's job usually begins with two challenging tasks: coming up with a completely new concept for a design, and writing the foundational HTML and CSS code to go along with it. However, providing the designer with a complete, fully-coded template to use as a starting point eliminates both of these steps, which reduces the work they have to do and in turn reduces the cost of their services to you.

If you decide to use a web designer be sure to check out Google's web designer listings. Note that we also offer custom design and template customization services, so feel free to contact us via a support ticket if you would like our assistance.

Once you have built your pages the final step is to publish your website >>.

At this point you should have all of the pages for your website completed and ready to go. The final step is actually taking these pages and turning them into a functioning, Internet-accessible website.

Note: If you are using a web development application (such as Adobe Dreamweaver) see if it offers its own built-in publishing tool. If it does, consult its documentation and give it a try before finishing this guide.

Before we continue, let's go over what makes up a typical website and how these elements fit together:

• Your pages

  These are your HTML files, along with their supporting CSS files, GIF/JPEG images, and (if you purchased a Flash template) SWF files.

• Space on a web server

  A web server is just a computer connected to the Internet that specializes in serving the web pages it contains to people requesting them with their web browsers. These computers are generally more powerful than the average home computer and have much faster connections to the Internet, making them capable of serving many page requests simultaneously. Web hosting companies specialize in leasing space on these servers (or even entire servers) to website owners such as yourself, although there are other ways to obtain web space (such as through your ISP or a free hosting service -- more on that later).

• A web address

  This is what someone will type into a browser's address bar to get to your website. It can be in the form of a domain name (such as http://www.yourdomainname.com/) or a specific address provided to you by a web hosting company or ISP (such as http://www.domainname.com/~youraccountname/). In either case, they can be thought of as unique names that simply point to your pages on a particular web server.

The combination of these elements is what makes an actual website. If you've followed this guide up to this point you should have the first (your pages) ready to go, so that leaves acquiring the final two elements and, finally, getting your website online.

There are three ways to go about this:

• Use a web host

  A web hosting company (or web host), as mentioned above, will lease space on one of their web servers for a recurring fee (usually monthly). Here are two companies we recommend:

  • iPowerWeb
  • Jumpline.com
• Use web space provided by your ISP

  Your ISP (Internet Service Provider) may, as a part of your subscription, provide you with free web space on its web servers. This can be a good alternative to using a separate web host if you don't want to be saddled with another monthly fee. For more information check with your ISP and see if this is something they offer.

• Use a free web hosting service

  If you don't want to pay for hosting and your ISP doesn't offer you free web space, you can use a free web hosting service. As free services they lack some of the features offered with the previous two options, but if your needs are relatively simple they may be sufficient. Here are several free hosting services you can check out:

  • 0Catch.com
  • Tripod
  • FortuneCity

There are also three ways to go about this:

• Get a free domain name through your web host (if applicable)

  Some web hosts offer free domain names to new hosting customers, meaning you can get a domain name of your choice at no additional cost and have people visit your site using a professional-looking address (such as http://www.yourdomainname.com/). Check with your web host and see if this is something they offer with their hosting plans.

• Purchase a domain name through a domain registrar

  If your web host doesn't provide you with a free domain name you can easily purchase one from a domain registrar (which are companies that sell domain names to customers for a yearly fee). Here are two registrars we recommend:

  • GoDaddy
  • eNom

  Once you've purchased your domain name you should be given instructions on how to point it to your web host. Since the procedures to do this will vary depending on your choice of web host and domain registrar, consult both for specific details on how to do it.

• Use the address provided by your ISP or free web hosting service

  If you are using the space provided by your ISP or a free web hosting service you will probably be assigned an address based on your account name (such as http://www.domainname.com/~youraccountname/ or http://youraccountname.domainname.com/). For more information please consult your ISP or hosting service.

Once your web space is ready and you have a web address pointing to it, the final step is to upload your pages. Typically this is accomplished using FTP (File Transfer Protocol), which is simply a way of transferring files between computers (in this case, transferring the pages on your computer to your space on your web server). If your web host offers FTP access you can use one of the following FTP clients to upload your pages:

• Filezilla (Windows/Mac)
• Fetch (Mac)

(Note: If your web host requires you to use a different method to upload your pages please consult their documentation.)

We'll now demonstrate uploading several pages to a web host using Filezilla.

1. Launch Filezilla and click on File->Site Manager.

   

2. Click on New Site and use the FTP details provided by your web host, ISP, or free hosting service to create a new FTP site entry. Once you are finished, click on Connect to connect to your web host (your FTP site entry will be saved automatically).

   

3. Filezilla should now connect to your web server. Once connected, you will see two separate panes with files listings. The pane on the left (first image below) shows files on your local computer, while the pane on the right (second image below) shows the files currently on your web space. Using the left pane, navigate to the folder on your computer containing your pages. Using the right pane, navigate to the folder where you are required to store your web pages (if applicable; in our case, the pages need to go in the public_html folder).

   

4. Select all of your pages (including the entire images folder and any CSS files) in the left pane and drag them to the right pane. Filezilla should now begin uploading the files to your web space.

   

5. Once the upload is complete, click on the disconnect icon to disconnect from your web server. If you are finished using Filezilla you can also close the application.

   

Go to your website's address in a web browser. If everything went right, you should now see your finished website.

Congratulations. Your website is now online!

And that's the end of this guide. Be sure to check out our other guides as well as our frequently asked questions page. You can also contact us with questions or comments by opening a support ticket from your account or by using the contact form on our website.