Web page Template Instructions

Saving the Templates (Netscape or Win Zip) | Using the template
Change Images | Hyperlinks | Your Account at CBV | Internet Tips

Return To Classroom Templates


Saving The Template (Using Netscape Composer -- Simple)
 
1
 Create a folder on your hard drive (Or in your own home directory of your school's server) called Web (or whatever name you want to give it)
2
 Open Netscape (Suggest using version 4.7* or 4.8 -- the editor is simpler to use -- NOTE: the new version 7 is not bad -- a bit more complicated to use though)

ALSO: You can have this on your computer just for the Web edit process -- you can still use your preferred browser!)
3
 Open the Classroom Web Page Template Site (http://www.cbv.ns.ca/bec/templates/templates.htm) and open the template you wish to save.
4
 

From the file menu select edit page. This will open the Web Page in Netscape Composer.
5
 From the file menu in "Composer" Select "Save As"
6
 This will open a new "Save As" dialogue box. Locate your "web" folder from the drop down menu.
7
 Leave file name as is and click "Save"
8
 This will save all files (Images and backgrounds included) to your web folder.
NOTE: If the template has multiple pages you must repeat the above procedure for each of the individual pages.

Index

Saving The Template Using Win Zip (Better for downloading multipage Templates)
 

1
 Create a folder on your hard drive (Or in your own home directory of your school's server) called Web (or whatever name you want to give it)
2
 Download the zip file from the template site and save it your directory
  • In the Template Page, click on the template of your choice (Download ZIP File)
  • A dialogue box will appear -- click on 

    •  
  • Locate your Web folder (check the "save in" tab)

  • Leave the file name as is and click on  
This will place the "Zip" file in your folder -- you must now extract the files.
3
 Using "Windows" explorer (right click on "My Computer" and select "explore") or "My Computer (Double click on "My Computer" and select the drive letter your "Web" folder is stored in) 
  • Locate your "web" Folder 
  • Double click on the "ZIP" file for your template.
  • This will open what ever zip software you have installed (Win zip etc.)
  • Select extract (Use button or from "actions" menu)
  • Select folder to extract to (Your Web Folder)
  • Select "Extract"
  • Shut down the Win zip program
  • All template files are now in your directory
Index

Using The Templates

If you can type use a word processor, YOU CAN create a web page using these templates.

The information in these template should be highlighted and deleted or replaced with your own text. Links that you do not want to be part of your web page should also be highlighted and deleted.

The files that you will be working with are actually templates for your page/site. You can delete, modify, and add as much as you want.  These templates are just a means of getting you started.
1
 Formatting The Text On Your Web page
  • The "rule of thumb" is that you must first select the text  before applying formatting changes.
2
 The Parts Of The Formatting Tool Bar

         1                2                3       4        5    6   7    8     9   10   11   12  13
  1. Paragraph style (Usually set at normal)
  2. Font style
  3. Font size
  4. Font color (color picker)
  5. Bold
  6. Italic
  7. Underline (do not over use -- often confused with links)
  8. Remove all styles (Be careful with this one)
  9. Bullet list
  10. Numbered list
  11. Decrease indent
  12. Increase indent
  13. Change horizontal alignment (Left, Center, Right)
NOTE: The bullet and numbered lists toggle on and off. Before you turn a list off, add an extra bullet of number. This will return the cursor to the default position.
Index
Changing/adding images in the templates
1
 Open the folder where you saved your template
2
 Double-click on the name of your template (e.g.. index.html)
3
 When Navigator opens on the screen, select Edit Page from the File menu. 
4
 Your Web page will open on the screen. 
5
 Position your cursor in an empty line on the Web page or double click an existing image. 
Note: The graphics you add to your Web page will always be inserted at the current location of your cursor.
6
  Click on the Image toolbar button. A dialog box will appear.
 Image Properties Dialogue Box:
7
 Click on the Choose File button. 
8
 A new Look in: dialog box will appear
9
 Navigate to the folder where you saved the images
10
 Double-click on one of the images (or click once and then click on Open)
11
 The Image Properties dialog box will reappear on the screen. 
12
 Click on OK
13
 The image will appear on your Web page
Changing the Dimensions of the Image
1
 Click on the image,  a black lines appear around  the image
2
 Move the cursor slowly across the image. You will see that as you move over the black line  the cursor changes from an arrow to a two sided arrow. 
3
 You can resize the image if you click and hold the mouse button when it is a two sided arrow. You will have to drag the mouse to resize the image. 
NOTE: It is a good idea to use the corners of the image to resize. This will allow you to resize both the horizontal and vertical dimensions of the image at the same time without losing the image's proportions.
Changing the Image Alignment
While most of the images in the templates are placed inside tables for ease of alignment you can select additional alignment.
1
 If you click on the Alignment toolbar button, you can move the image to the center or the right side of the screen. 
2
 Clicking on the Increase and Decrease Indent buttons moves the image in lesser degrees. 
NOTE: You can undo any of the changes you are making by selecting "Undo" from the Edit menu. Warning -- you usually only get to go back one change -- Make sure if you make a mistake you select "Undo" right away.
Wrapping Text Around the Image
1
 Place some text next to the image (the text appears next to the lower right hand corner of the image
2
 Double click on the image -- The image properties dialogue box will appear.
3
 Select the text alignment you want from the text alignment section of the image properties dialogue box
4
 After you make your selection click OK
5
 You must save your page and select preview from the tool bar to view your changes.

 Index
Adding/editing Hyperlinks
1
 Drag across the words/text that you want to use to create your link while you hold down the left mouse button (Note: you must first select the text before applying any changes to the Web page.) 
2 Click on the Link button in the toolbar "" or right click and select "insert new link." 
3 A dialog box will appear on the screen
4 The text that you have highlighted will appear in the linked text box near the top of the dialog box. 
5 Type http://www.the_URL_of_the_site_you_wish_to_link_to in the  white link to box. 
6 Click on the OK button to activate the hyperlink
7 After you save/publish your page, select reload to view your changes.
8 You can use the same process to edit a link
9 o make an e-mail link simply follow the same process and type the following in your "link to box"

mailto:yourname@whatever your email address is

click OK 
Index
Your Account at CBV
You must request a user name and password from your technology contact (help desk, etc.). They will set up a folder for you on the school server -- If your school has already been set up, your folder will become a sub folder of your schools. 

NOTE: You need this user name and password to FTP/publish your page(s).
 
Index
Internet Tips
1
  • Images inserted in pages remain as separate files .All image files should be in the web folder before you insert them into the web page.

    •  
  • Always save your web page and web image files in the SAME folder.

    •  
  • Copy the entire folder if you move the files for publication
2 Never use a space or capital letters in a folder name or a file name published on the Internet.

Examples: 

  • Name a folder webimages not Web Images with a space between the words (note: do not use caps)

    •  
  • Name a file favlinks.htm not Fav Links.htm  (note: do not use caps)

    •  
  • If you want separation of words in a folder or file use the underscore. E.G. fav_links.html
3 Pressing the Enter Key gives you a double-space and elements are disconnected.

Shift+Enter is a single-space and elements such as bullets remain connected.
4 Only one line of text can be typed beside a picture/image.

If you want multiple lines beside a picture/image use a table with two columns. You can make the lines invisible on the web. 

NOTE: See Netscape Tutorials for details.
     Index

Under Construction