Guidelines for Making Web Pages
Contents:
General Information Text Organizing a web site
Using Student Names Links Putting Pages up on Server
Pictures Tables Modifying existing web sites

MSAD#50 ~ Tech Office ~ Skills

General Information

  • Pages should download quickly, so keep content small. 
  • Keep the most important information at top of page so you can see it without scrolling down.  
  • To break up large areas of text use various graphic elements  (photos, horizontal lines, subheads, etc.) 
  • Try to make all the pages of a site look like they belong together. (Have some consistent layout and organization on pages)
  • Put a title for every page you make. The title should tell the viewer what this page is about. It is the name used when bookmarking a page.
    • How to give a web page a title using Composer
      • When you save a web page the first time after giving the page a file name (e.g. boats.html) a dialog box appears with the word boats in it. Enter the real title here. 
      • If you have already saved a page go to Format - Page Colors and Properties - Click on the General Tab - Enter the title in the first line. 
Organizing a site
  • The main page is always index.html
  • Names of files are lowercase including the file extensions (e.g. jpg)
  • When site gets large, use folders to separate topics/events/projects etc. 
  • Every time you make a new page you don’t need a new folder. Multiple sub topics can be in the same folder. 
    • E.g. 1. A 4th  Grade has an index and many pages that are divided by topic. Multiple pages can go in each topic folder or there can be more sub folders..
    • E.g. 2. LL Library. Has 3 pages but since they are all closely related, contain very few support files and are not likely to have sub topics there is no need for other folders.
  • For ease of identification it is useful to have a common beginning to names of pictures and the page that they go with. 
Text
  • Text should be big enough to read but not too big
  • Text should be easy to read if it’s on a picture or colored background. 
  • Text should be about the width of a book page. Use a table to narrow the area.
  • Text can wrap around pictures. To do this use Image Properties.
  • Newsletters or other information that might be sent out through the local mail often needs to be modified when converted into web page to eliminate private information such as names, phone numbers etc.
  • Check spelling.
  • Centering/Indenting
    • Use the centering tool to center the text on the page or in a cell of a table whenever possible. Spaces will display inconsistently.
    • Use the indent tool, tabs, bullets or numbering instead of space bar
  • Vertical spacing
    • Use carriage returns to make page aesthetically balanced but try not to over use them between sections. Keep the pages compact so they are easier to navigate. 
    • Remove all carriage returns from the bottom of the page. (Note: all the extra spaces at bottom of page.)
    • Sometimes you will find you get a double space between lines when you use a carriage return. Try using a Shift+Return. 
Student Names
  • Make sure kids have permission to have names/pix on the web.
  • Never use kids last names
Links
  • Put navigational links on all pages.
  • Link all sites outside MSAD #50 with hard links. (e.g. http://www.bob.com)
  • All links within your site should be relative links, not hard links (e.g. “mytrip.html” not “file://c/windows/desktop/mysite/mytrip.html” or “http://www.sad50.k12.me.us/techoffice/mysite/mytrip.html”)
Tables
  • Tables are very useful tools when making web pages.  Use them to:
    • Make lists of info
    • Divide text into columns.
    • Highlight text.
    • Separate text from other text or pictures.
    • Reduce the size of the page to make text easier to read.
    • Place text or pictures in specific places on the page.
    • Put space between photos by increasing the cell spacing.
    • Change the background color/pix of a certain area of the page.
    • Hold other, smaller tables in place.
  • When creating a table and a cell isn’t going to be used, you can put a space or carriage return so that the empty cell looks just like the others.
  • Unused rows won’t be visible when borders and cell spacing is 0 and don’t take space, but best to delete those rows when not used.
  • Table Borders
    • You can border sections of text with a one-celled table with a border, or even include more tables without visible borders within a larger visibly bordered table.
    • Explore how cell borders, cell spacing, and cell padding differ so that you will be able to use them effectively.
    • You can color a border.
      1. Make a table with border line width, cell spacing, and cell padding set to 0 and give it a background color.
      2. Make a second table within the first, and give it a border or cell spacing width that you desire. Make its background color the same as the page, or another color or give it a picture.
  • Cell settings
    • You can set a single cell to span multiple columns or rows.  This, for example, lets you title a page with a single table cell while maintaining 3 columns below.
    • You can also set an individual cell to be a certain height or width.  This affects all the cells in that cell's row or column.
    • Each cell in a table can be aligned differently.
Pictures
  • Usually photos are .jpgs and drawings are .gifs but use whichever is smallest but still looks good.
  • Use Alt Text for all pictures. This is found at the bottom of Image Properties. 
  • Optimize photos in PhotoImpact by going to the Web menu and choosing either SmartSaver (PhotoImpact 4.2) or Image Optimizer (PhotoImpact 6) 
  • Make sure all pictures are the correct size. Resizing by the web page makes the pictures look much worse and they will load more slowly
  • Use a reasonable number of photos per page. If you have a lot of photos that you want to use consider making a main page on that topic and then another or other sub pages. 
    • Example: I want to make a web page on a visit to a farm. I have 25 pictures and want to use them all.
      1. I group my photos by topic with no more than 6 per page, for example.
      2. I make a new folder called farm. 
      3. Then I make a main page called index.html with several photos and text about where we went and what we did with links to each of those groups of photos. 
      4. Then I make several sub pages called cows.html (4 photos), sheep.html  (6 photos), cheese.html (6 photos), bustrip.html (2 photos), and eggs.html (3 photos). 
      5. On each of the sub pages I would explain the pictures or have a paragraph that clearly tells about the page that kids wrote.
      6. When I name the photos I name each with the name of the page they are on. E.g. cowfeed.jpg, cowmilkjohn.jpg, cowmilkmar.jpg, cowbarn.jpg, cowani.gif, or cow1.jpg, cow2.jpg, cow3.jpg, cow4.jpg. Keeps page and photos together inside the folder.
Modifying existing web sites
  • Make sure you download a copy of your web site from the server before working on it.  Someone may have corrected syntax or linking errors on your page since you provided for uploading.
  • Keep track of and provide clear information as to which files you have changed or added so that only these files will need to be reviewed. This will also help speed up:
Putting Pages up on Server
  • At present there are only 3 people that can put pages on the server.
  • To avoid delays in getting pages up make sure that:
    • All pictures are present and are the correct size
    • Give clear information as to which folders/pages and pictures are to be put up on the server
    • All navigation links are present.
    • Remove all files that aren’t used. Put them in a separate folder, if you want, on your own computer.
MSAD#50 ~ Tech Office ~ Skills