Freelance Writing Jobs | Today's Articles | Sign In

Teacher's Net

Lesson 8: The Virtual Classroom, Part Two

Content, Template Modification, and Script Installation

Template Modification

The website templates I've created for this course can be accessed below. Please remember to never share these templates with anyone, they've been created specifically for your use. Each one has been geared toward use with Microsoft Word, making it easier for you to use while maintaining a high set of design standards.The entire collection has been gathered into one zip file, so that you can preview and choose which one you prefer. Grab it here. You're also free to find a template you like on your own - try Design-Sanctuary.com or WebDesignHelper for some great free layouts.

Now... once you've downloaded most templates (not the ones included in my zip, which are just .doc files) and un-zipped it, you will find a folder that contains two other folders: html and blanks. The html folder contains the html pages and ... yet another folder, img. What do each of these contain, and why are they even there?

html folder: This is the main directory of your website. When you begin uploading your website, you will upload every single thing that's inside that folder, in the same way it sits within that folder. Moving or removing pieces can make your html sloppy and incomplete.

blanks folder: This folder contains all of the images used in the layout of the website, but without any sort of text whatsoever. So, if you feel that any of the images should have text that don't in the default layout, or should have different text than what's in the default layout, you'll open these images and add text to them.

img folder: This folder, inside the html folder, contains all of the images used in the default layout. If you decide to utilize the blanks folder images, you'll need to save the blanks with the exact same name as the image you're replacing, and place it inside the img folder.

Beyond what's implicit through the definition of these folders, you'll not want to try modifying the template much until you've learned more about html. Modifying pieces that you're not familiar with can cause the layout to become malformed.

Content

This is- honestly- the easiest part of building your classroom website. If you've gathered materials for use on your website, you can start adding them in now.

Open up the html page that your content belongs on- for instance, let's say that you have a team of three people who will be working on different aspects of the website. You need the visitor to be able to contact any of them that they need to, based on their questions/comments. So, you would open the contact.html page in Microsoft Word (right-click and choose Open With... Microsoft Word) and ... start typing!

Every bit of text that you want to add can be done in this fashion, just moving from one html page to the next until you have all of the text placed. To insert pictures and other images within your text, choose "Insert, Picture... from File" within Microsoft Word. Make sure that all images you insert are placed inside your img folder, within the html folder!

Links that are already made within the text or layout can be changed by right-clicking the link inside Microsoft Word and choosing "Edit Link". If you want to make a link that doesn't exist already, highlight the word and choose "Link". Either of these will open a dialogue that allows you to type in a URL. Very easy.

Script Installation

Once you have modified the template and inserted your content... you're ready for any scripts that you'll install. So, first, a verbatim review of this topic from our last lesson:

HTML is a language all of its own. While many of the words you see look like common English, there are a ton of phrases and characters that are unique to this language. Most of them are things we don't need to worry about- but when we open up our documents in Notepad, we'd like to have an idea of what we're looking at, right?

When you started looking at the java scripts, you probably saw directions that said "Place the following in the HEAD of your page" and "Place the following in the BODY of your page". Does this mean anything?! Of course.

Every web page begins with text that looks something like this:

course template

Everything between and is considered as being the "head" of your page. Below the "head", you see a version of the following text:

Some sort of text will be in here.

Since the only time we're going to be looking at the html, in this course, is for the installation of scripts, it's important to make this distinction between the HEAD and BODY...

When a script instructs you to place a series of code in the HEAD, it doesn't matter where you place it in the head, as long as you don't interrupt any other coding. Just hit "Enter" before the last tag, and you'll be fine to paste your code in.

When a script instructs you to place a series of code in the BODY, though, it does matter where you place it in the body. Wherever you paste the code in the body is exactly where the script will show up. So make note of this, and when you know that you'll be placing a game, for instance, on your web page, mark its place by something like ***GAME SCRIPT HERE*** so that you know exactly where to put the body script.

In all honesty, this should be all that you need to know about script installation at this point. If you encounter any specific difficulties, though, don't hesitate to contact me or post your questions in the discussion area- we're all here for eachother.