ASP Include Web Page Templates - Web Design Tutorial

Vikki Olds February 15, 2004   1 In this tutorial we'll learn how to create a web page template using ASP includes. The first thing you need to do is sit down and make a drawing of how you want your web page set up. This will be the way each page on your web site is layed out. Below is my drawing. I've decided on a top section for a logo, a left section for navigation, a bottom section for copyright information and the main content section. If you don't want to follow along with the tutorial you can download the files already created in this zip file. You should read the tutorial even if you don't follow along so you know what should be happening and where. 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. I always like to lay out my document before adding content. Below is a screenshot of my template.asp 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. 4 Next, we will add the include directives such as: <!--#include file="Top.asp"--> NOTE: There are two ways to include a file in a web page. You can use "include file" or "include virtual". The best way is "include virtual": <!--#inlcude virtual="Top.asp"--> If you use include virtual, the top.asp, left.asp and bottom.asp must be placed in the root of your web site. The advantage of this is that you won't have path problems on pages that are in different folders. If you use "include file" you will have to use a full path everywhere in your web pages. Include files do not have to be .asp documents. They can be plain text files or even HTML files. I use .asp files because I never know when I might want to include dynamic content in them. Add the changes shown below to your file. Save the file as template.asp and leave NotePad open. 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. 5 Go to File>New. Add the information shown below and save this file as Top.asp 6 Go to File>New and add the information show below. Save this file as Left.asp 7 Go to File>New and add the following information. Save this file as Bottom.asp 8 If you have a local web server, place all these files on that server. If you do not have a local web server, upload the files to your remote host and then navigate to the template.asp with your browser. You should have something that looks similar to below. 9 The advantage to creating templates in this fashion is that your web site is consistent throughout and it's easily updateable. If you have a large site this is an invaluable time saver when links, logos or copyright information needs to be changed.   Copyright 2004, Vikki Olds, All Rights Reserved