Web Page Layout Design
Using Composer

Getting Started

The purpose of this tutorial is to help you build a basic web site that you can use to share information on the Internet.

For the purpose of this tutorial we will be using SeaMonkey's Composer, an HTML editor that comes with the browser SeaMonkey. Not only is SeaMonkey's Composer free, it is easy to use. For our purposes, SeaMonkey's Composer will provide the tools we need to build a functional and accessible web site. We will focus on page layout and design, web page directory structure, and content.

It would be prudent for you to take some time and plan a storyboard for your web site. The storyboard will act as a guide as you design and add content to your site. To get started on the storyboard, determine your audience. For the most part, you will be designing a web site for students and parents.

After identifying your audience, then begin to decide what information you would like to share. Below is a list of suggestions for your classroom’s web site. In many ways, your web site will tell a story. The story is about your classroom, your curriculum, and your professional endeavors.

Professional web site can include:

• Statement of Teaching Philosophy
• Resume´
• Lesson Plans
• Grades
• Class Calendars
• Research Reports
• Course Assignments
• State and local performance standards
• Reflections on how you meet state and local performance standards
• Frequently asked questions from parents
• Goals for every course
• Examples of past student's work
• Recommended home learning activities that support classroom instruction
• Homework assignments
• Links to other sites on the Web that support learning
• Student research projects
  

A good rule of thumb for web pages is simplicity. For the most part, keep your pages small enough so that browsers do not have to scroll very much if at all. Reading from a computer screen is about 25% slower than paper and it is recommended that you endeavor to use 50% fewer words. Take some time to download review the PowerPoint Presentation by Patrick Crispen, “Guidelines for GOOD Web Design.” Check out Jakob Neilson's web site useit.com. This site provides information regarding user-friendly web design.

The goal of this course is to provide enough training, guidance and resources to help you build and maintain a functional and professional web site. I have gathered a variety of resources (web based as well as on-line documentation) to help you start a sustainable classroom web site.

A fundamental management issue is directory structure. This includes the naming and organizing of files and folders for your web site. When creating files and folders, use short names (abbreviated) and keep them in lower case. Web page documents will end in .html or .htm. Images will end with .jpg (JPEG) or .giff. Again, I cannot stress the importance of short but identifiable names. Do not use capital letters or unusual characters such as %, &, *, # etc. Your home page, the page web browsers see first when they visit your web site will be named, “index.html”. Browsers, such as Netscape, SeaMonkey, Opera, Camino, Internet Explorer and Safari, look for this file to display first.

Next is to create a main folder that will contain all resources, files and images, for your web site. Inside of the main folder create another folder and label it, “images.” This will be where you will place all the images you use for your web site. The key to all of this is that all resources for your web site need to be placed in the main folder. You can put this folder in your computer’s Documents folder or on your desktop. Normally, I call this main folder, kzwbst that is the abbreviation for, Keith Zamudio Web Site.

Figure 1 is a labeled image of a new document in Composer.

To open a new document in Composer is a two-step process. First launch SeaMonkey. Once SeaMonkey has launched, there are a few ways to open a new Composer page. The second step is to select Window from the menu bar and navigate to Composer. When you select Composer, a blank window (much like a new document window in a word processor, Figure 1) with a Tool Bar at the top will appear. Another easy method is to click on Composer’s icon in the lower left hand corner of SeaMonkey's browser’s window Figure 2.

To open an existing document in Composer is a three-step process. Launch SeaMonkey and Composer as described above – steps 1 and 2. When you have a blank window in Composer, you can open an existing document (Step 3) by clicking File from the menu bar and selecting Open File. You will then be presented with an Open HTML File dialog box. Navigate to and select the existing document you wish to open and click Open. Another option on the tool bar of any open HTML file is an Open icon on the tool bar that will open an existing HTML file.

Next we will build the underlying structure for your web site so that you can control how the information will be displayed. To accomplish this we will use tables. Tables are useful and many web sites use tables to organize text and pictures.

With a new Composer page open (Figure 1), click on the Tables icon in the tool bar. This will display the table’s properties dialog box (Figure 1a). The first table we will make will be 1 row by 1 column. Change the width of the table to 600 pixels. You will need to click on the disclosure triangles (Figure 1a) to select pixels. The table will have 0 for Border. Click OK.

Figure 4 shows a table with no border, is 1 row by 1 column and is left justified for the browser window. To center the table (Figure 5) in the browser window, click on the table in your workspace one time (you will see the black handles) and click on the Table icon in the Tool Bar to access selected table’s properties. You will then get the table’s properties dialog box (Figure 3). Adjust the table’s alignment by clicking on the disclosure triangles for Table Alignment. Enter values of 2 for Spacing and 5 for Padding (Figure 3). You will learn to manipulate the numbers for spacing and padding as you use more tables. Table Alignment can be left or centered depending on your preferences. Click OK.

Now is a good time to save. Initially, this is a two-step process. First you will provide a title that will appear in the title bar of the browser window. Title should be short, descriptive and use the standard conventions of writing for titles. Then you will be asked for a name for the file. This file will be stored in the main directory of the web site. Please review the naming conventions described earlier.

So that you can control how information and images will be displayed, you can nest tables within tables. We will do that now as we continue to establish the underlying structure for your web site. This is where your planning (story board) will be of benefit.

Figure 6 is an example of a web page with nested tables. Figure 6 has a total of five tables. One table (the first table we made that is 1 row by 1 column with the height set at the default value, and the width of the table set at 600 pixels) acts as a border to contain the information and the remaining 4 tables are used for title space, navigation bars, and copyright info.

To accomplish this layout, place the cursor in the table we just created. Hit return several times to expand the table vertically (Figure 5a). This will give us room in the workspace to add more tables.

To insert/nest the title table (Figure 5b), place the cursor at the top of your 1 x 1 table. Select Insert from the Table menu and choose Table from the submenu. The Table Properties dialog box will appear (Figure 5c). Make this table 1 row by 3 columns and 0 for border. The width can remain at 100% of cell.

Next we want to give the left and right cells a fixed value of 100 pixels. This will accommodate a small image or logo file. To edit a selected table’s properties, place cursor in the left cell and click on the Table icon in the tool bar. You will get the Table’s Properties dialog box with the Cell Tab active (Figure 5d). Place check marks in the Width, Vertical and Horizontal fields. Enter 100 in the width field. Click on the disclosure triangles to apply the attributes of pixels, Middle and Center for the checked fields. Click OK. Repeat the procedure for the right cell.

The middle cell’s values can remain at the default settings and can be used for the name of your school etc., contact information and/or a tag line that identifies the purpose of your web site.

Next, place your cursor at the bottom of the main table and select Insert from the Table menu and choose Table from the submenu. In the Table Properties dialog box, make this table 1 row by 1 column and 0 for border. This will be used for your copyright information.

For this web page there is a navigation bar near the top and the bottom. Place the cursor after the title table and select Insert from the Table menu and choose Table from the submenu. In the properties dialog box, make this table 1 row by 5 columns and 0 for border. Repeat this procedure and create a navigation bar just above your copyright table.

With this done, you have a basic structure for building your web site. You can add text where and as needed in the title table, navigation bar tables, and copyright table. Keep your information general at this point. Put in information that you want displayed on all of your pages. This will become your template file that you can duplicate to generate additional pages for specific content. Additional tutorials, resources and information is on the website.