JavaScript Include Web Page Templates - Web Design Tutorial

Vikki Olds February 15, 2004   1 This tutorial is going to cover the very basics of using JavaScript includes in a web page template. We'll cover creating a basic HTML file and then go over the basics of creating tables to format our template content nicely. This will all be completed in plain text. In the next tutorial we'll go a bit further and add images and active content like button rollovers. We're not going to cheat and use an HTML editor. We're going to use plain old Notepad to create this template. If you don't want to do this by hand you can download this zip file with all the completed files in it to look at and use to get you started. Even if you don't do this by following the tutorial, you should read this tutorial so you know what is happening where and how to do things. The first thing we need to do is decide on a page layout. It's best to draw it on a piece of paper so we don't lose track of what we're trying to accomplish. Below is my design layout. We'll use this drawing to construct the table and cells that content will go in. There will be a top section for our logo and other things, a left navigation area, a main content area and a bottom section for our copyright information and other things. 2 HTML documents have a few things that must be in each document and they never change. An HTML document must have: An opening HTML tag An opening HEAD tag An opening TITLE tag The title can be empty or the title of your page A closing TITLE tag A closing HEAD tag An opening BODY tag A closing BODY tag A closing HTML tag That sounds like a lot but it really isn't. I'm sure one of your first questions is "What is an opening tag and a closing tag?". An opening tag begins a section of an HTML document. A closing HTML tag closes or ends a section of a document. You'll know an opening tag when you see one because it does not include a forward slash. You'll know an end tag because it does include a forward slash. These pairs (opening and matching closing tags) are called containers. They contain relevant data. For instance, the opening and closing HTML tags contain a full web document. Opening and closing TITLE tags contain the title of a document. Opening and closing BODY tags contain the contents of the document. There are many more tag pairs in the HTML language but the basic pairs necessary to create a web page are the ones discussed and shown in the screenshot below. So, the first thing we need to do is open Notepad and create a document similar to below. You should probably create a folder to store the documents we will be creating today. 3 Another important set of tags are the TABLE tags and their related tags. To create a basic table to format content in a document nicely you need: Opening and closing TABLE tags Opening and closing TABLE ROW (TR) tags Opening and closing TABLE DATA or cell (TD) tags Below is a screenshot with just the opening and closing TABLE tags. You'll notice that there are other things included in the opening TABLE tag: BORDER, WIDTH, CELLPADDING and CELLSPACING. These set the properties of the table. Our table will not have a border, will be 590 pixels in width, it's cells will not be padded and we won't have any spacing between cells. 4 I always like to lay out my document before adding content. Below is a screenshot of my template.htm after I've added the necessary table data to create a table like my layout drawing. In Notepad add to your document so that it looks similar to below. 5 Next, we should add comments before we add any more code so we can remember what we are doing and where. Below you will see comments such as: <!--Top.js goes here--> None of that will show up on a web page. It is only visible in code. The <!-- is the opening for the comment and the --> is the closing. Add the changes shown below to your file. 6 The next thing we need to do is add the information for the JavaScript files we want to include in every page that we use our template on. You will see some lines that look similar to: <script language="javascript" scr="Your_Domain/Top.js"></script> You will need to replace Your_Domain with your actual domain. My private domain is web-helper.net so I would replace Your_Domain with www.web-helper.net: <script language="javascript" scr="http://www.web-helper.net/Top.js"></script> If you don't do this then your pages won't know where to look for your JavaScript files. Go ahead and add the new information to your Notepad document. At this point you might want to save this document to the folder you created earlier. Name it Template.htm and close the file. Leave Notepad open. We're done with the actual template. Now we need to move on and create the three JavaScript files that we're using as includes. NOTE: When saving our files be sure to choose "All Files" from the file type dropdown in Notepads Save As dialog or you'll end up with misnamed files. 7 Go to File>New to start a new blank file. This will be our top include. JavaScript is a language and has some rules to follow when using it. I won't be going into all the rules. The one rule we will need to know about is the Document.Write rule. Whenever we want to add text or images to our JavaScript file we must start the line with "document.write". That must be following by (' and the very last thing on the line must be '); We can put just about anything we want between those. Example: document.write(' put what you want here '); In your new document add the following information from the screenshot and save the file as Top.js 8 Go to File>New and add the following information. Save this file as Left.js. 9 Go to File>New and add the following information. Save this file as Bottom.js 10 Navigate to your template file and double click it to open it in your browser. Mine opens in Internet Explorer and looks similar to the screenshot below. That doesn't look quite right and I know what we've forgotten. When you have two table cells side by side you must set the vertical alignment of the cells or you'll have misaligned content as you see below. 11 Open Template.htm in Notepad. Below you will see two lines that have valign="top" added to them. Add those to your file in the same place as the ones you see below and save the file again. 12 Navigate to your Template.htm again and double click it to open it in your browser. Mine now looks similar to below. Much better. That's it for the basics of using JavaScript includes. The beauty of them is that you can easily update navigation, copyright information, logos, etc by updating just a couple of files instead of your whole web site. For sites that have more than 10 or so pages this saves loads of time. The other advantage is that you have a common design across your web site pages so they are familiar to users. They always know where the navigation is which makes them more likely to stay and to revisit your site. Now that you have your template done you can create a whole web site and place the links in the Left.js file or whatever file you will be using for your navigational links.