Selecting and Loading a Template

Before you start building your web pages you need to do several things. These include collecting the content that you are going to use on your site, working out how you are going to divide that content up into web pages, and deciding how those web pages will look. You can write your content in any text editor at all but it is probably best if you avoid using Word or Wordpad as when you copy content from those editors to past into a web editor a whole lot of Microsoft Office formatting commands get copied along with it to pollute your web page with unnecessary garbage. If your content already is in one of those editors then I suggest that you copy and paste it into Notepad first so as to get rid of the Office formatting and then copy/paste the pain text from there into NVU.

Designing the structure of your web site is something best done on paper. It is much easier to try out different arrangements for the breakup of the pages and also the general layout of your web pages by sketching out the ideas on paper first. You can draw up several quick sketches in a few minutes so that you can compare them and discard those that you don't like. To actually create pages using those different layouts would take much longer and you would still end up discarding most of the ideas before finally settling on the way that you want your site to be set out.

Once you finally do settle on a structure and appearance for your site the next step will be to actually find or create a template that contains all the instructions on how your web pages will look and into which you can then plug your content to create your web pages. We will look at how to create a template later as setting up the template is actually one of the more difficult parts of creating web pages. For the moment let's assume that you have found a suitable template to use to create your pages.

NVU has its own in-built template system. I recommend that you do not use that system as doing so will lock you into having to use NVU to edit your web pages and will make it more difficult for you to switch to using a different web browser in the future should you decide to do so. In addition the templates that you can find that are already written that you may want to use as a starting point for creating your web pages will be regular HTML and stylesheet files and will not be in NVU's special template format.

There are lots of sites offering web page templates either free or for you to buy. The quality of these templates varies quite a lot both in terms of the appearance if the final pages and also in terms of the quality of the HTML code that has been used to produce the template. While looking at a ide range of these templates may assist you in getting ideas for how you want your web pages to look, I recommend that you avoid actually using templates that include huge images and which use tables to lay out the page. Much more flexible page layouts that will be much faster loading can be produced when stylesheet commands are used to set out the page structure.

If you followed my recommendations for settings in the prior tutorial then you have NVU configured so that it will not automatically restructure existing code. This means that if you use a well written template that the code in the template will not be made worse by NVU undoing those constructs that it does not understand. On the other hand if you use a badly coded template then NVU will not make any attempt to fix any of the bad coding.

One option to consider if you do find that you have chosen a badly coded template as your starting point because it is the only one you can find that has the layout you want is to obtain a copy of a program called HTML Tidy and to use that to clean up some of the worst of the coding errors. HTML Tidy is also useful if you paste your content directly from Word or Wordpad as it has an option that enables it to remove much of the garbage that you end up with in your web page if you copy directly from one of those editors.

Having chosen your template I suggest that the next step in creating your web site is to create a folder onn your computer that you will use to build your site. All of the files that are to be loaded to your web site will go in this folder or into folders within this folder so that when you upload the content from the folder to your site that you will not break links to files outside of the folder.

The first thing you need to copy to that folder is all of the files that make up your selected template. I suggest that you rename the HTML file for the template to template.html so that you know which HTML file is the template. This is the one file that you are adding to the folder that will not get uploaded to your site. All of the other files that are a part of the template will form part of all the pages that you will build based on the template and so will be used by all of the pages on your site.

One thing to remember is to always copy any images and other files that you are going to be linking into your web page into this folder before you try to link them into the page so that an appropriate link can be built that will still work after the files are uploaded to your site. The one group of files that you don't need to copy to this folder are the text content of your site as that content will be pasted into copies of the template in order to create the HTML for your web pages.

Having selected your template and set up the folder where you will build the local copy of your site, it is finally time to open the template.html file in NVU.

To open the file simply press the Open button in the tool bar at the top left of the screen and select the HTML file to be opened.

Opening a template HTML in NVU

Your template page will most likely have filler text and images in the spots where the page content is to go. To tailor your template to meet your needs the first thing you need to do is to change that filler content for the elements that are to be the same on all your pages to be the content that you actually want to have there. We will start looking at how to do that in the next tutorial.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow