Hi. This web page was designed as a resource for all persons in Barry Sweeny's "Web Page Construction" workshop.

- Return to the Best Practice Resources Home Page -


This web page has advice that is illustrated using the Adobe HTML editor software called "PageMill". I did so because that's the software I know best and use most frequently. While these directions and suggestions are designed just for PageMill, there are very similar functions and tools, even with similar names, on other HTML editors as well. Therefore, for the most part the advice given here transfers to other situations, except for vocabulary which is unique to each software package.

INDEX:


Web Vocabulary

Web page = one file for posting on the web. Usually a web page is one of many pages on a web site.

Web site = A collection of web pages with links that interconnect the pages so they reference each other and a reader can move freely between all the pages in the site. Another metaphor is that a web site is a "book" full of web pages. The difference is that the links between the web pages allow you to "read the book" in many different sequences. In other words the web site is a book that is not linear.

Home page = the first web page that a visitor should see when they arrive at your web site. The home page is often like an introduction to a book that explains what the book is about, AND a "Table of Contents" or "INDEX" for the book, so a reader can see at a glance, what is covered in the book and can "jump" immediately to the page where they want to read. That is why most home page FILES are named "Index" and that is why when you arrive at a web site, the server knows it should automatically serve up whatever web page is called "Index". It is a convention that most web servers use, and therefore, so do most web page designers.

Link or Hyperlink = A string of characters or text which has embedded in it the information that makes it serve as a hypertext jumping off point to another location when it is clicked on by your mouse. Usually a link is to another web page OUTSIDE of your web site. (See "Anchor") That information that is embedded in the link is usually the address of the new location to go to and that address is usually hidden information. A link is usually blue and underlined so you know it is a link, Also, you can tell that text is a link because (1) When your cursor is placed on a link the cursor changes into a little hand with a pointing finger. (2) Also, when the cursor is on a link (but NOT clicking the link yet) the hidden embedded information shows in the text box at the bottom of the screen. Here is an example. Place your mouse cursor over this link but DO NOT CLICK ON THE LINK. Notice the pointing finger and the web address for that link showing below. FAKE LINK.

Anchor = an internal "link" to a location and text that is WITHIN the SAME web page, or at least to a text location that is in another web page WITHIN your web site.

Web Page Template = a web page that has all the basic elements which will appear on every web page on the same web site. A template already has created on it things which you need on every web page but that you don't want to recreate over and over again. These elements could include a common header graphic or logo, navigation links to other main sections of the web site, or a link at the bottom of the page that says "Return to the top of this page". These common elements are used to create to common theme and formatting for your web site. That way users will figure out how one (their first one) web page works and that understanding will work on every other page on your site. In other words, a template is your starting point for creating a user-friendly web site.

DPI = Dots Per Inch, a measure of the number of dots (pixels) on the screen that fit into one inch. DPI is a measure of the resolution or amount of detail in an image. The more DPI, the more detailed an image looks. Problem: The most DPI a computer screen can display is 72 DPI. That is why some diagonal lines and edges have jagged edges. To see an example of this, look at the line on the right side of the letter V.

FTP = File Transfer Protocol. A software convention that is used to send files across the web from computer to computer. Note, however, FTP does not DISPLAY the contents of the file. When you create or modify a web page on your own computer and want it posted on the web, you use FTP software to send the page to your web server. A very popular FTP program for the Mac is called "Fetch", and it is available for free on the web at <ftp://ftp.dartmouth.edu>.

Frames = A way of setting up a web page so it is divided into two or more sections, each of which function as a separate web page. A typical use of frames you may have seen on the web is to create a column on the left side of the screen which has links to all the main pages on a web site. When you click on a link in the side frame the web page shown in the main frame changes, but the links list in the side frame stays the same. This makes the navigation within the site more user-friendly. However, setting up frames is much more complex and some older web browsers can not display frames, so your web page will not look to those people like you designed it to look. That is why some sites ask you on their home page to select if you want a frame or no frame version of the web site and they have duplicate versions with those differences. I do not recommend doing frames, at least not early in your "webmaster career".

Image Maps = A section of a web page, often a graphic "image", which acts like a link but is not text. Think of an image map as a visual link. An example might be found in a list of resources for each subject area. Perhaps there is an icon of a globe in front of the title "Geography". The text "Geography" could be the link, or the globe could be the link. In that case the globe would be "mapped" as the link so when you click on the globe the embedded info or new address is selected. Image maps are not too tricky, but again, some older browsers do not display anything but text and so they will not see the image you intended. Basically, I'd say beginning web designers should avoid image maps for a while. There is a way to place in the HTML a phrase which provides an "alternate" text link that will be displayed if the image cannot be shown. This is called (of course) an "ALT TAG". Refer to the software documentation/manual for help doing this if you want to try this.

Site Map = An index or tree type display that shows the viewer the entire web site or at least the major sections of the web site, and how the pages logically relate to each other. A site map is provided to help people find the info they want as an alternative to the general topics listed on a home page. Often the web pages shown on the site map are made into links to that the reader can find what they want and go straight to it with just a click.

Java = A programming language for web pages that is basically a script which runs a small (or big) program within the program. Java is especially great for animations and interactive elements on web pages. To see a Java script, look for a web page with actions as you move the cursor over images or text, then look at the source code to see the script that causes the actions.

CGI = This stands for "Common Gateway Interface", a fancy, more challenging programming language which creates automatic interactive sharing of information between computers. For example, when you fill in a form on a web site and click on a "submit' button, the form contents you typed in are sent to the web server and a CGI program automatically runs to process that text in some way, and often, to send you back an acknowledgement that the text was received. Such functions are important additions to web pages, but add a level of sophistication that is beyond most HTML editors. Microsoft FrontPage has "web bots" which automatically add some CGI functions so the writer does not have to learn CGI programming. That one reason why FrontPage has become so popular.

URL = The Universal Resource Locator is the address of a web page. For example, my web site's URL (or address) is http://www.teachermentors.com. Such an address must contain several elements for it to work. The http tells the computer that the next text is a web address written to conform to the hyper text transfer protocol, a convention that allows all kinds of computers to talk the same language on the web.


HTML - The Code Language of the Web

What is HTML?

HTML stands for "Hyper Text Markup Language", which is the basic programming language for the web. All web pages, regardless of who makes them, anywhere in the world, on any kind of computer, must use the same HTML language so that every web page works on every computer everywhere.

For a web server to display a page on a web site, the server must find a file that is of the HTML file type. It "knows" those files because they all have an HTML extension on the file name. So, for example, if the file name for your home page is index, then the file name will need to be written as index.html if your computer is a Mac, or as index.htm if your computer is a DOS or Windows computer. Notice there is a "dot" (period) after the file name and before the extension that designates the file type.

Essentially HTML uses mostly regular English words combined with special commands called "TAGS". There are also a few abbreviated statements and a few special symbols used as well. You can easily see an example of the HTML code for this web page, but please, don't try to change anything about it. ALSO, READ THE REST OF THIS PARAGRAPH FIRST, SO YOU WILL KNOW HOW TO GET BACK TO THIS VIEW. When you see the code, just read a little of it and see what tags look like. Notice the color coding that helps distinguish text from commands. When you are done viewing the HTML source code version and want to return to the web page simulated appearance (what you see now), just pull down the same "Edit" menu and unselect the "HTML Source Code" selection. To see the HTML source code for this web page, pull down the "Edit menu at the top left of this screen and click onto "HTML Source". OK, do it, but come back soon.


How an HTML Editor Helps You

Most of the HTML needed to make a simple, text-oriented web page can be easily learned. However, learning HTML is no longer necessary for many simpler web pages and even some of the more sophisticated functions. An HTML Editor software program can do all the hard work for you automatically. "PageMill" is the HTML editor that is used as the example in this web site. Here, generally, is how it works.

1. You type in the HTML editor using regular English, exactly what you want to say as if you were typing in a word processor.

2. You can use a menu bar or set of buttons at the top of the screen to format the text with fonts size changes, and styles like bold, italics, etc. The styles for HTML are somewhat limited however.

3. The HTML editor software works behind the scenes adding the tags and hidden symbols and commands needed to make your text look like what you want on a web page. In other words, the HTML editor does the translation from English to HTML code for you. Very NICE!


Using a Word Processor to Create HTML

You can also create HTML code in many different software programs, such as ClarisWorks, Microsoft Word, WordPerfect, and others. Almost every recent version of good word processing software now includes the capability to save text created in that program as HTML code. This is a big help! Once the text is created and saved as HTML, all you need to do is open that file from within your HTML editor, like Pagemill, and do any reformatting or further editing you would like. When you save the new web page version of that text, it will then be saved as a PageMill file.

Another way to do this is to:


Learning from Other Web Pages

One of the best ways to learn how to adapt or write HTML code is to find web pages on the internet that have effects you like and then to select viewing the page source code so you can see what code they used to get the effect you liked. You can even highlight, copy and paste that HTML source code into your web pages, although be sure it is not copyright protected and that it does not have hidden commands that do things you don't want to do. For example, copying the code may give you a text line that you want to personalize or change how it says something. fine, just do that.

HELP?

Want some help in learning HTML, or in how to get a specific effect? Go to the "Resources" section of this web site for links to places on the web with these kinds of help, as well as tutorials, definitions, FAQs pages with Q & A, etc.


HTML Software

HTML Editors

COMMERCIALLY AVAILABLE

"PageMill" by Adobe - This is the software the author uses and is demonstrating.

Other popular HTML editors are:

AVAILABLE FOR FREE

THREE Viewing Modes:

Want to learn how to make certain web page effects happen in your web pages?

1. Identify the text elements just prior and after the effect.

2. Look for those text lines in the source code, and see the code that creates the effect.

3. You can even copy and paste this code into another web page to incorporate that code into your web pages. If you do this:


Word Processors

Word processors can help you do a lot of text very quickly, even text to be displayed on a web page. This is already explained elsewhere. Click here to see that information.


Web Site Management Software

This is, as you might imagine, a software program which helps you keep your web site functioning well as a whole once you have finished initially creating it. The issue is that web sites are dynamic, evolving things. For example, you might decide that you want to move a web page to somewhere different in your web site, to make it easier to find, or to place it with related information. If you just move that page as you would any other file on your computer, all the links on that page may not continue to work in the new location. However, using web management software to move or rename a web page automatically checks the links and modifies the embedded language to keep the links functioning correctly. COOL!.

Originally PageMill did not do site management by itself, You also needed to buy SiteMill for that. Great marketing, huh? Now this is not the case. For more info on this click here. More recently released HTML editors combine the two functions of site creation and site management. How logical.


Web Site Development Systems

As software publishers compete with each other, they continually add new features, make their programs more user-friendly, or package the software with other things you need to create a web site. For example, lots of third party software developers created CD-ROMs and disks with premade web page templates, complete with color coded and thematically matched set of buttons, graphics, headers, etc. All you have to do is pick a "look" that you like and, viola! your web site is nearly finished. To see an example of one of these go to xoom.com. (That's right X not Z.)

More recently, some HTML editors have begun to come with a more complete set of these related items. It's not so creative for you, but these items are created for a professional graphic "look" and it sure makes it simple if you can find a design theme you like.


Lessons About Some Basic Web Page Elements

Section Index:


File Names - When you save a file on your hard disk, you give it a name. That is the FILE NAME. File names for the web must follow certain conventions, so when assigning a name to a file for anything on your web site, give it a name which follows these conventions.

Use no spaces between words. To help make the words readable, justInsetACapitalLetterAtTheStartOfEachWordInTheFileName.

No punctuation except the following are allowed: . (a "dot" or period)_(underscore) or a - dash.

Keep the file name short, such as a max. of 8-10 letters or less, and descriptive. "MyLetter" is not good, but BWS.Jan22-00 is better, and "Proposal1.22.00 is best.

Using these guidelines, the following would be appropriate variations of a History Test for Jan 22, 2000


Page Titles - It is important to distinguish between names you give your files and the TITLE you give the web page in that file. The title is a descriptive phrase or longer version of the file name. Look at the top of this web page and notice its TITLE is given in the Bar that goes across the top of the web page. For this web page its title is "Web Page Construction Guide". Any form of punctuation and space between letters are fine on a web page title.

The title is what shows when a web page is listed in a search engine such as Yahoo. The title of the page is how people find or do not find the web page on the internet. For example, if you are looking for a web site on the city of Austin Texas which you are about to visit, which of these pages would you choose to visit?


Line Breaks - Look just above and just below this paragraph. You will see that i have divided this paragraph visually from the other test on this page with lines. These are called "Line Breaks". The one under this paragraph has "no shading", that is it is solid black. Since that one stands out so much, I place it at the end of each major section on my web pages. The line break at the top of this paragraph is "shaded" which really means it is made to look 3-D with a lighter and a darker top and bottom. I use these between minor sections on my web page because they do not stand out as much.


Color - Actually you have three choices for applying color to your web page, besides adding colored graphics.

One choice is a colored background for the whole web page. This is done (in PageMill) by going to the "Window" pull down menu and selecting "Show Inspector". Inspector is a little window with layered pages that allow you to modify the attributes of the web page on which you are working. When you first open the Inspector all of the color settings are set at "Default", but you can change any of these by clicking on the little arrow and selecting "custom", which opens a window with a color wheel which also has a sliding bar under it. Click and hold on the slide and move it to the right to lighten the colors. Then click anywhere in the color wheel to select the color you want. make it lighter by clicking nearer the cent, or darker by clicking nearer the outer edge. Move the slide back and forth as well to adjust the color brightness. When you are done, click on OK and the page background will be colored the one you choose. Don't like it? Just repeat the steps.

 A second choice for adding color is adding an area of color within the web page. Usually this is done to highlight an area of text or to create a section within the web page to set off some text when there is too much text and the page is uninteresting. This is what I did for this section. To do so all we are doing is creating a "table" (think "grid") with only ONE CELL and with NO BORDER. Certainly you can create tables with any number of cells and with borders but that is a different effect which attracts more attention to an area than I wish for this effect.

To create this table click on the "Table Icon" in the tool bar at the top of the screen. It is a little grid with 9 squares in it. When that opens the window enter the number of rows (horizontal) you want and the number of columns (vertical) that you want. Next, you set :

"Cell Spacing" (which is the thickness of the gap between cells)

"Cell Padding" (which is the space to be left between the text in a cell and the edge of that cell - try 1 or 2) and

"Borders" (which is the width of the line around each cell and the whole table). In this case where we want just an area of color, select 0 for the border.

Next set "Table Width" which is listed under "Constraints". This tells the software how much of the screen width to fill with the table. If you set this in "pixels" your table will stay a fixed size. This is not good since people have different sized monitors on their computers. The size of your table should be set in "percent" so it will automatically be adjusted to the individual viewer's screen and NOT be off the edge somewhere. If you want the table to fit across the whole screen, set it at 100%. Note. this setting is the starting point for the table. As you start to enter text into the table it will automatically resize itself to accommodate the text you enter. When you have decided these settings, click OK and see the table that you created. If you messed up, click on the table, hit "delete" and try again.

Now to add the color. Click once in the cell in the table and release the mouse. Click again and hold, dragging the cursor to just the edge of the cell until you see the inside of the cell get a yellow outline. Release the mouse. Open the Inspector if it was closed and select click on "default" for "Background color, dragging down to "Custom" and releasing the mouse. Now repeat the color adjusting and selecting process and then click OK. When the editor is put into "Preview Mode" the color area will show but the outline is gone.

The third choice for adding color is to use colored text. This must be handled carefully, as too much color makes a page very hard to read. Color should be used to Highlight something important to attract attention to it. If EVERYTHING is important, the eye is confused and reading is harder to do. So, just add color to small blocks of text or just to headings or subheading. Notice what I have done with the subhead just below this text.

To add color to text start by highlighting the section of text you want to change. Next look up near the left end of the tool bar at the top of the screen and find the little box with four colored squares in it. Clicking on this gives you the same choice (choose "Custom") and opens the same color wheel as you saw for background colors. Use it the same way for text color selection. A CAUTION - Links have default colors depending on whether they have not yet been selected (blue) or if they are "active" (currently selected is red), and one that was recently visited (called "visited") is purple.

NOTICE, in all these three cases these colors can also be permanently set as "preferences" under the "Edit" drop down menu.


Kinds of "Lists"

This is a bit tricky, because in PageMill, some of what is available under the menu item called "Lists" are not really lists at all, but rather are heading sizes. All of that aside, lists can be displayed in a number of ways on a web page. Setting up a list format is simple. The steps are displayed next in a "bullet list".

Type the items in a list format with just a return at the end of each item in the list.

Highlight all the items in the text in the list.

Click and hold on the long box in the tool bar which says "Paragraph" on it. These are the types of lists available in HTML.

Click on the type of list you want and then see what it looks like. Spacing between lines, indenting or not, adding numbers or bullets, etc. are all possible variations from one type of list to another. Some do not look very different from each others

The most important different kinds of lists are best illustrated with examples.

Paragraph

Places a blank line after each return

Bullet

Places a bullet at the start of each line preceded by a return and indents the set.

Menu

Looks like a bullet list to me.

Type the items in a list.

Highlight all the items in the text in the list.

Click and hold on the long box in the tool bar which says "Paragraph" on it.

Click on the type of list you want

  • Type the items in a list.
  • Highlight all the items in the text in the list.
  • Click and hold on the long box in the tool bar which says "Paragraph" on it.
  • Click on the type of list you want
  • Type the items in a list.
  • Highlight all the items in the text in the list.
  • Click and hold on the long box in the tool bar which says "Paragraph" on it.
  • Click on the type of list you want

Numbered

Saves a place for the number, but you must enter the actual number in that place.

Definition

Adds no symbol but adds no empty line between items, indents.

Term

Adds no symbol but adds no empty line between items, does not indent.

  1. Type the items in a list.
  2. Highlight all the items in the text in the list.
  3. Click and hold on the long box in the tool bar which says "Paragraph" on it.
  4. Click on the type of list you want
Type the items in a list.
Highlight all the items in the text in the list.
Click and hold on the long box in the tool bar which says "Paragraph" on it.
Click on the type of list you want
Type the items in a list.
Highlight all the items in the text in the list.
Click and hold on the long box in the tool bar which says "Paragraph" on it.
Click on the type of list you want


Placing Graphics

Once the graphic image is on your page you can move it around to another location on the page or even delete it if you want.


Relating Graphics and Text

Once an image is placed on your web page, you will want to decide how the text near that image is to be positioned. The choices are defined by the five boxes on the right hand end of the top tool bar.

1. The first one places the GRAPHIC IN THE LINE OF TEXT with the text even with the TOP of the graphic.

2. The second one places the graphic in a text line that it is centered on the MIDDLE of the graphic.

3. The third one places the graphic in a line of text even with the BOTTOM of the graphic.

4. The fourth one places the text on the RIGHT side of the graphic, and wraps the text starting even with the top of the graphic and uses all the space next to the graphic as long as there is text.

5. The fifth one places the text on the LEFT side of the graphic, and wraps the text starting even with the top of the graphic and uses all the space next to the graphic as long as there is text.


Creating Interactive Forms

A "Form" is just what is sounds like, a form that the user fills in to send information to you, the web page owner. This could be a form with an email address and name, such as when someone wants you to add them to a mailing list, such as for a school or class newsletter you email each month.

Forms are more complex functions but probably can be mastered from the info you will find in the documentation that comes with your HTML editor. For PageMill the various elements that can be entered into a form are provided already. Notice at the bottom tool bar's center are a series of icons starting just to the right of the line break icon. I will describe these in order:

1. The box with an X in it is a "check box". These are used when there is one to any number of choices and the user simply clicks in the empty boxes to mark the selections.

2. The next forms element to the right is a "Radio Button". These are used when there are a series of choices BUT you only want the user to choose ONE from the list of choices.

3. The next forms element is the "Text Area" icon which allows you to place a box of any size on the web page into which a user can type an extended message to you or to a guest book. Here is what one looks like. It can be sized as you wish and users can scroll around in it.

4. The next forms element is the "Text Field". This is just a one line version of the previous text area. Use it to limit the answer of a user, such as for a phone number, name, etc.

5. The next forms element is a "Password" field, into which a user would type their secret password needed to access a section of your web site to which there is limited access. The password box is like a text box except that as each key is typed a dot appears, rather than the key that was typed.

6. The next forms element is a "drop down list". This allows you to design a list of items from which the user will choose one of the specified items. It appears as a single text box, but when the user clicks on it, down drops the whole range of choices you have provided. This is done to ensure the accuracy of data input and eliminate spelling errors, etc. You can specify if there is only one or if there are multiple selections allowed.

7. The next forms element is the "Submit Button". The user clicks on this button when the rest of the form is completed and they are ready to email you the message contained in the form. This is where the interactivity of a form gets complex and you need some assistance that this web site is not designed to provide. Basically for the form to get to you it is sent to the web site host server where a special CGI program processes it and follows the directions that have been built into the CGI "Script", such as to send it to you and where you are. I have not learned CGI but I do have some rather complex forms that work on my "Best Practices web site. These work because I found a free service that does almost all the tough stuff for you. In exchange, the put a small add for themselves on the screen that your users see when they click on the "Submit" button. To read about this service and see the directions, go to <http://www.response-o-matic.com>

8. The last forms element is a "clear the form" button that allows a user to change their mind and wipe out any typing and not send the form to you or to start over again.


Working With Graphics

Types of Graphic Images (file types):

There are many graphic image file types, some developed for use by specific software, such as Adobe PhotoShop, some developed by the graphics industry, and some developed by a company, but placed into the public domain.

Many of these were developed for printed output and so they create very high resolution images, such as 300 DPI, and higher. To store as detailed an image as that requires a larger file size. The problem with placing these detailed, high resolution images on the web are:

1. The computer monitor screens can only display a maximum resolution of 72 DPI, so the detail is not displayed and most of the image stored in the large file size is wasted. That uses up memory but provides no benefit,

2. The larger the file size is for a graphic, the longer it takes for an image to be brought to the viewer's computer and the longer it takes for the computer to load the web page for viewing. That's a big problem, especially if there are several images on a page to be loaded. Who wants to (or who will) wait 45 to 60 seconds while a web page slowly appears on your screen?

That is why many images that are intended for a web site, but that were created in software other than web editors, and images that have been scanned, are usually CONVERTED to a graphic file type that has reduced DPI/resolution and a smaller file size.

The two most commonly used file types for web images are:

Using PageMill to Convert Graphics to GIFS

You can create a graphic in many different software programs, such as ClarisWorks or MicrosoftWorks, or any other program that has a "drawing" program module, or a "paint" program module. The trick then, is to transfer that graphic image from the program that created it to the web page which is created by a different software program. The problem with moving images between different programs is that some programs will only "read" files of the type that this same program creates and no other file types. There are three ways I know to solve this problem.

1. There are other software programs that are designed specifically to do graphic file type conversions. I have seen some of these on the web for free.

2. Many of the better graphics programs allow you to specify which type of file you want to create when you save the file.

3. Since I don't have either of these first solutions, here is what I have worked out as the easiest way to "import images into a PageMill web page.

As soon as I have finished creating the file, I copy it to the clipboard

I open the web page editor software

I open the web page where I want that image to be used

I place the cursor where I want the image to appear and choose "Paste".

These steps place the graphic into the web page, but with no known file type attached to the image, Then I...
Save the web page.

This forces PageMill to save the graphic as a GIF image file type. The only problem is where the software will save the images on your hard drive.

If you have not told the software WHERE you want it saved to (the folder/directory with all your web pages) it will create a default folder on your hard drive main directory called "PageMill_Resources" and save the graphic file (as a GIF type) in that folder. This will work just fine as long as you keep all your web pages in the site on your hard drive.

However, when your web site is ready to place on the web server, you will transfer all the web pages to that server and the graphics MUST go with the web pages. If NOT, your web pages will load but there will be no graphics. Therefore you want all your graphics to be originally saved right in the same folder/directory as the rest of your web pages.

To make this happen in PageMill, do the following:

1. Click on the edit "pull down menu" and choose "Preferences".

2. Click on the icon for "Resources" that you will find in the left hand frame.

3. Change the default location in which you want all "resources" (think graphics) to be saved. If there are just a few images, save them on the same list as your web page files. If there will be a number of graphics (such as 10+), it is better to create a "graphics" folder or directory in your web site folder/directory and to place all images in that location.


How To Develop a Web Site Plan

BUILDING A BETTER SITE

Web sites need a lot of thought, before, during and even after you build them. You need to plan, design, build and grow a site. In other words, basically you will:

1. Start with a plan. That means clarifying your purposes and then structuring your ideas and the site functions to accomplish those purposes.
2. Develop the site following that plan
3. Use what you learn from the experience and from looking at other sites to give you ideas for refining the site over time.


DEVELOP A PURPOSE:

I think the biggest mistake people make is to jump into building a site without figuring out why they want or need one. Decide on your purposes. What do you want your site to do?

* Deliver content to others (such as posting homework and assignments for kids and parents to be able to check.
* Provided resources (such as links listings by category)
* Showcase your curriculum, student projects, special events, or ideas as a teacher
* Provide motivation for student workers by providing an authentic audience for student work
* Structure student Internet investigations and research


DEVELOP THE IDEAS

Next, write down everything you want to include on your site. Think about what you will need to include to accomplish your purposes. Think about different potential audiences and how they might use your web site.

This is a brainstorming list, so don't worry about quality of ideas, priorities, or keeping ideas in a certain order yet.


OUTLINE THE IDEAS OR DEVELOP A "TREE STRUCTURE"

Next, create an outline or organizational chart of sections and start moving your ideas around and clustering them until you create an organization that makes sense for your material. I prefer the tree structure since it most closely resembles a portrayal of the directory (folders) structure for the file on your hard drive. Either way, organize your ideas and define the relationships of all the parts to each other. Do not worry about the details of the links in each web page, just the main section headings is enough for now.

I have provided an example of a tree structure below, but I want to suggest one DIFFERENCE THAT I DID NOT SHOW IN THE EXAMPLE. In the example I used this web site and the page TITLES so that you would be able to easily understand the example. IN REALITY,

Now you are ready to begin creating your first web page. To do so, start by making a web page template.


Creating a Web Page Template

A web page template is created when you are going to develop a web site with a number of web pages in it. You want users to be able to quickly figure out what your logic was as the web site was created, so that they can easily move around in the site. One way to achieve that goal is to use the same "look" and site navigation tools on every web page. You probably should also use the same background color, a similar logo or header, and similar formatting with titles, putting them in the same place on each web page and in similar colors, etc.

To accomplish this continuity, create a web page template with all these standard items in place already. Save the template with a name that includes "template" such as PgTemplate.html

When you begin to develop the web pages for the site, just open the template, and RENAME the FILE name right away with the new name for the page you will create. This will save you hours of repetitive work. Also, remember to change the TITLE for the page too, not just the file name.

Even after you finish creating the web site you have designed, save the page template for the future. There will be other pages you'll add later on.


Cautions & Tricks in the Web Page Development Process

HINTS FOR THE DESIGN OF THE WEB SITE:

* Once you know what you want to accomplish and what should be included to do so, figuring out how to organize the parts of the web site is easier. You can design a site yourself, as described above, or you can use some of the excellent templates that come with popular site creation programs.

* Web site design can't just look good, it has to be practical, efficient, and effective too. A beautiful site that isn't effective is like a bucket with a hole in the bottom of it. What's the point? In other words, don't become too excited about graphics and glitz and forget to build solid content that targets your site's purposes.

* Find a good HTML editor tool and spend time learning it, rather than learning HTML. These days, learning HTML is not needed. There are excellent programs that allow you to create web sites without ever having to know HTML. These are preferable because they give you the time to concentrate on content and design, rather than on technicalities.

* Think of a web site like a garden. You don't just plant it and leave. You tend to it. It grows. You add, you prune, you rearrange. It gets better over time.

NEED FOR NAVIGATION HELPS

One of the most common mistakes web site developers make is that their web site is hard to move around in. That means it's going to be hard for users to find what they're looking for. Here are a few of the related problems and some suggested solutions.

Problem  Solution 
The user can't find how to get to some section of the web site that they want to. Place a bar of the links to each of the major sections of your web site on every page.
The user assumes you have information on a topic (you said you do) but they can't figure out which section it is in on your site.

Create an index for your site listing the title of every page alphabetically listed. (Get HTML Grinder off the web. It does this automatically for you.

OR

You can add full-text search to your site for free at: http://www.thunderstone.com - so there's no excuse not to have it on your site.


OTHER COMMON WEB SITE DESIGN MISTAKES

* Do not put the text over busy backgrounds. If you must use a background texture, keep it low key so it does not compete with the text that is your message. I really prefer web pages with a solid color background and recommend that approach to you.

* Do not make your text in odd colors that may cause weird interactions with the background colors. There are optical interactions which occur between certain shades of bright colors, especially those which are close complimentary colors. These you definitely should avoid. They include:

If you must use these colors, make the background a lighter version and the text a darker version to avoid the optical flashes that our eyes will perceive. If it's hard to read, people won't read it.

* One other caution. Do not use a dark background and light colored text. I know that white or yellow text on a dark blue background would look very snappy. But how will your white text look when a reader goes to print it out (without the background color)? Right, white text on white paper? Opps. You will almost surely eliminate the possibility that the reader could print out and save your text to use it.


CREATING THE WEB SITE

As you create each page, follow the site plan you developed earlier. Probably it is best to start with the Home Page, since most of the other pages will need to be linked to it.

I recommend, opening and renaming the template page. Then modify the page to include titles to each section of the site. Look at your outline or site Tree Map for these names and connections. The easiest way to do this is to create the home page in regular text and then, as you create each of the other pages, make the links between the two pages. This means making a link on the home page to the section page, and a "Return to the Home Page" link on the section page if there was not already one on the template.


TESTING THE WEB SITE TO SEE IF IT WORKS

This is an absolutely critical step. You will probably find a number of things that did not work out the way you expected them to. use the following steps to test the site's functionality:


Web Site Maintenance

Even really great ideas can be improved. As you continue to think about your web site, you will get additional ideas about things to add, better ways of doing something, and you will decide that some things are eventually outdated and should be removed. You may get an idea for a better way to organize the site too. here is some advice.

* Assume that any list of links you create to off-site locations will begin to have dead links after a little while. These may be for web pages you found at one time, but which were moved, the names were hanged, or the page was eliminated. Eventually you should test your links and eliminate those which do not work. To find moved pages, you can often shorten the URL (page address) to eliminate the page but keep the same directory name. In other words a dead link for <www.teachermentors.com/MRole.html> may not be working, but you can still get to the site and maybe find the revised page by eliminating the "MRole.html" part and just going to the <www.teachermentors.com> part which is the home page for that site. Be creative. That will often help you find out what has happened to the page with the dead link.

* Don't ever toss a web page in the trash. If there is an outdated page or one that you revise, keep the original in your web site folder/directory on your hard drive, but just don't post it on your web site server. You never know what ways that can eventually help you.

* When you buy HTML editor software be sure that it includes site management capabilities. Some of the capabilities you should seek include:

For this web site and workshop I have been using PageMill by Adobe. When I bought my version of that, PageMill had no site management ability and you had to buy a companion software, SiteMill to do the site management. Now the current version of PageMill does include the SiteMill functions integrated into one package. If you use some other HTML editor, be sure the site management is a part of the package. If not, do not buy it.


Resources for Web Page Development & Site Management

A Web Page Full of Links with resources and assistance for web page design, use of the Internet, accessing graphics libraries, etc.

This web page is a collection of education-related icons, buttons, markers, bars, and more.


Return to the TOP