Web Page Guide: The Whole Thing
Introduction
Welcome to the Wonderful World of Web Page Creation!
Before we get started, a few notes about this document.
First, like all good web pages, this one is broken up into small,
digestible lumps of text. However, over the years, I've found
that many people prefer to print the guide out and have the paper copy beside them as they work rather than switching back and forth between two
windows. If you would prefer a printed copy, one large page with all the
information is available here.
Second, although this guide is aimed at teachers
who want to make web pages for their classes, it can easily be adapted
to teach students to make web pages for a class project. Feel free
to put your newly acquired web page construction skills to work by changing
the references and throwing this puppy up in your own space. (Although
keeping my name somewhere would be nice).
Finally, this guide is designed for self-instruction: that is, it's designed for a person to go through without the presence of an instructor. The greatest danger in this is that the person going through the guide will attempt to carry out a task before it has been fully explained. To prevent this, I have built in a cue: follow the bouncing ball (or in this case, the dancing dot). Whenever you see Mr. Happy:
...that is your cue to switch to Front Page and attempt
the task. Please do not try a new task before seeing the cue: that
way lies madness and aching heads.
Onward!
Me, Make a Web Page?
Yes, you!
Why? Glad you asked!
Like all institutes of higher learning, Parkland is increasingly employing on-line education. Chances are that sooner or later, you'll be teaching fully or partially on-line. And while many great programs and systems exist for you to organize and publish your course material, it never hurts to be able to do so on your own if the system is limiting, as a back-up in case that system goes down, or if you (like me) are a control freak who wants to do everything yourself.
Or let's say you're teaching in a computer classroom. A web page gives you a place to put all your information, from course policies to assignments. It's easily accessible both on and off campus, and it's in a format that most of your students are already familiar with. It also helps cut down on paper consumption: daily activities can be posted to the class web site. Those students who prefer paper can print the assignment out.
Finally, even if you are teaching in a traditional classroom, a web page can be a useful place to refer students to for information, missed handouts, and links to nifty places.
Plus? It's just cool.
Do I Have to Learn HTML?
HTML, for those not familiar with the term, stands
for "hypertext markup language." It is not actually a programming
language, but a set of formatting tags. These range in complexity
from the <b> that bolds your text to the complex coding that
creates scrollbar
boxes.
So do you have to learn it?
No and yes.
No, you do not have to learn html in
any depth. You can probably get away without learning it at all.
Programs like Front Page, Netscape Composer, and Dreamweaver are designed
to construct the code for you.
At the same time, all of these programs
have quirks that sometimes require tweaking the code to fix. It's
generally helpful to have at least a passing familiarity with the more
common codes so that you can work your way around these problems.
However, before you go out and buy
books on HTML (she said, pausing to look at the many books on her own shelf
whose spines remain uncracked), let me give you one piece of advice: the
single best way to learn HTML is to view the code of existing pages, either
on the web, or in Front Page as you construct your page. To view
the code of a page you find on the web, just go to "View;Source."
You might want to get in the habit
of peaking at the code of your pages as you writing them. If you
run into trouble, your best bet is to seek out someone who knows HTML and
ask for help. (Please note that if you come see me, my response will
most likely be, "Wow. I have no idea. Let's mess around with
it and see what we can find out.")
About Front Page.
Sooner or later, you're going to mention using Front Page to make web pages
to someone who will react along the lines of, "You're using that?!"
I will be honest with you (and you should be honest
with your students) and say that Front Page is not highly regarded among
experienced web page designers. And by "not highly regarded," I mean
"most of them will tell you to avoid it at all costs." Why?
After much discussion, I've isolated four reasons:
1. Yes, Microsoft is Evil, on so many levels. However, since you are
most
likely reading this using a Microsoft created browser on a Microsoft created
operating system while using a Microsoft created word processing program
to write assignments, I'm going to go out on a limb and say that we've
ceded the moral high ground there.
2. Yes, Front Page does create really ugly code. What you have to ask yourself is, "How much to I care?" Or, more precisely, "who will be reading my code besides that programmer in my class whom I am never going to impress anyway?" Bottom line, when you get to the point that you care about the code, you'll already be at the point of being able to fix it, or have moved on to a more sophisticated program.
3. Yes, certain things
that are created in Front Page will not show up correctly in Netscape.
Most of these things are fancier functions like rollovers and java script, which
we won't be getting into here. However, it is worth
acknowledging that most web pages are going to look different in NS than they
will in Internet Explorer. The only real trouble I have had with pages
made in Front Page is with older versions of Netscape (4.7 and back) -- things
show up all smooshed together, and darned if I can figure out why. In
Parkland classrooms this really is not an issue: not all of them even have
Netscape, and those that do tend to have the current version. However,
with an on-line class, you may want to advise your students to use Internet
Explorer if at all possible.
4. Yes, Front Page does encourage really bad web page design. Peek at the source of a page with lots of flashing effects, frames that put the main text in the smallest window, and unnecessary java effects, and chances are it was made with Front Page.
About the only thing you can do there is trust your own judgment and aesthetics. Don't do something like frames just because you can do it: make sure there's a solid reason why. Right now, the trend in web page design is towards the minimal: fewer graphics, solid colors. Of course, it's also towards primary colors and white backgrounds, but I refuse to go there.
Should you teach your students to use Front Page to make web pages, you might want to spend some time on the basics of making clear, readable web pages. You might also want to tell them that if they continue exploring web page design, they'll want to look into programs like Dreamweaver, which really is a vastly superior (but far more complicated) program.
One last note: Front Page is mostly a WYSIWYG (What You See Is What You Get) program - that means that how things look in Front Page is mostly how they will look in the browser. There are some exceptions, however. Therefore, you will periodically want to check to how your page looks in a browser window. Front Page has a "preview" function that ought to do this for you, but really? It doesn't. For that reason, I usually keep and Explorer window open with my page-in-progress loaded.
Getting Started
The first thing you will need to do is open Front Page. Chances
are, you will find it in the Start Menu under Program Files, or on the
desktop. Look for a blue box with an arrow pointing up and left.
(And you thought we'd forgotten Mr. Happy).
Take a moment to familiarize yourself with the screen. If you use MS Word, chances are it looks very familiar to you. Look at the pull down menus. Try to find familiar functions, like "Save," and "Copy." Move the mouse arrow over the icons across the top to identify their function. About 90% of any questions and problems with any new computer program can be answered by a careful reading of the screen, so learning at least roughly where to look for certain functions can cut down on a lot of frustration.
Special Note: That bar along the side (called the "Views Bar") has some neat and nifty functions, none of which we're going to be using. Since it changes the size of the page as your compose it, we're going to make it go away. Go to "View" and click on "Views Bar" to de-select it.
A blank HTML document (well, Front Page names them .htm) pops up when you open the program. It will automatically be named "new_page_1.htm." So, like good little web page designers, we're going to give it a better name.
Why? Well, in part for the same reasons you would rename a Word document: so you know what it is. However, there's another reason: whatever you name your Front Page document will be the very last part of the web page address. If you name your page "page1," its web address will be http://virtual.parkland.edu/yourlogin/page1.htm ("yourlogin" being your directory name, which we'll discuss later). There is one exception, which we'll also discuss later.
A note on naming your web pages: remember that it is going to be part of the address. It should therefore be both descriptive and short - descriptive so both you and your readers can remember it easily, and short to make the task of typing it into the address box as painless as possible. Avoid complex spellings. Remember that computers as a rule do exactly what you tell them to: one misplaced letter in the address, and you get "page not found."
Special note: you will want to create a new folder for your web pages, or for specific web pages, particularly if you plan on having any images on them.
Class Web Page Notes:
The first thing you'll want to do with any new web page is set up the general color scheme. This includes the background color, the text color, and link colors (the colors of the text your readers will click on to go to another page). The default color scheme is a gray or white background with bright blue text for links and purple text for visited links. Bleah.
So, how do you change that color scheme? Glad you asked.
To change the color scheme, you will want to go the "Format" menu. On that menu, select "Background." This will call up a box called "Page Properties" that has a lot of little tabs. Make sure you're on "Background." Ignore the stuff on the top - we'll get to that in a sec. The lower half is where you will choose your colors.
(Why do they have you choose your link colors in a box marked "Background?" Beats the heck out of me).
(Go look for sec, then come back).
Let's start with Background Color. Whatever color is currently in the little box next to background color is currently the page's background color. If it says "automatic," it will use whatever colors are set on Internet Explorer, which unless you're a hopeless geek like me who changes her browser's colors, takes you right back to default.
To select the color, click on the down arrow next to the Background Color. This will bring up a set of standard colors, and some (probably blank) boxes for "Custom Colors" and "Document's Colors."
To use colors other than the Standard Colors, click on "More Colors." This will take you to grid of colors. If none of them pleases you, click on "Custom Colors." This is where the fun starts. Custom Colors can be created by choosing an existing color and messing with it - my favorite trick is to pick a gray and add red, blue, or green. You can add this color to your Custom Colors (which will make it available every time you use Front Page) by clicking on "Add to Custom Colors."
Note the first: Using Custom Colors does carry a risk that your colors will look different on different monitors. You lovely teal may be blue or green depending on who's looking at it, and in the case of a really bad monitor, your page may just end up a vague gray. If you want to avoid this, you can stick to standard colors.
Note the second: Front Page will also keep track of all the colors you use in an individual document ("Document's Colors"). This is a really handy feature.
Note the third: Remember that the point of a web page is for the text to be read (or the pictures to be looked at). If you make your page painful on the eyes, this is less likely to happen. When choosing your colors, it is important to ask yourself: how long can a human being look at neon green before squinting from the glare?
Moving along.
Click on "Okay" until you get back to the "Page Properties/Background." STOP THERE.
Now that we have a background color, we need to choose the document's text colors. There are four colors that need to be set: regular text (under background colors) and three link colors (off to the side). "Hyperlink" is the default color for text that contains a link. "Visited Hyperlink" is the color the text will turn if the browser has recently clicked on that link. "Active Hyperlink" is the color the text will turn in the brief second between when a reader clicks on the link and the linked page appears. You choose these the same way you did your background colors.
A few design notes here:
1. Make sure your regular text can be read against your background without prompting migraines. For some reason known only to Bill Gates, every time I teach web page construction in my classes, I have students who use hot pink text against electric blue background. If you have a light background, stick with black. If you have a dark background, use white.
2. It's a good idea to make your link text at least a bit different than your standard text. Links will generally show up underlined anyway (unless you're in this classroom), but visual cues are always a good thing.
3. How different you make your "Visited Hyperlink" color from your "Hyperlink" color depends on how important it is that readers know which links they've already visited.
4. "Active Hyperlink" is mostly useless, but it never hurts to pick a readable color.
Click on "Okay" and voila! Your color scheme is set!
Addendum: Background Images
What's that, you say? You want to use a picture or image for your background? Well, if we must.
It is possible to have a picture or image be your background rather than a solid color. I will be honest and say that for pages with a great deal of text, this is not a good idea unless the image is a border with a solid color for the text (which raises a whole host of other issues). No matter how subtle the pattern is, normal sized text is just not very readable against any kind of texture.
However, for pages with only a small amount of text, particularly text that will be large in size, it's fine. Just keep that readability thing in mine.
In order to learn how to use an image as a background, we first have to learn how to find and save an image.
So, let's say you're at, oh, my page, and you decide that the green tile is just perfect for your page. The first thing you have to do is make sure there aren't any notations on the page about copyright, conditions of use, etc. Images get passed around a lot, and you can't reasonably be expected to track it down if there's nothing on the page, but at least look at the page.
The second step is to save the image. Before we get to that, a special note: it is absolutely vital that you save the image in the same folder/directory as your web page. This is one of Front Page's little quirks: if things are not in same directory on your computer, they won't work on the web, even when they're in the same directory there.
To save the image, move the mouse arrow over any part of the page that doesn't have another image, and click the right button. A menu will pop up. Choose "Save Background As." Again, be sure you are saving it in the same folder as your web page.
Now, back in your document, go back to "Format; Background." This time we'll be looking at the top half. Under "Formatting," three options are available: "Background picture," "Watermark," and "Enable hyperlink rollover effects." Ignore the second two: the one we want is "Background Picture." You can click in the box to select it, but that will actually happen automatically once we select the image.
To do this, click on "Browse." You will then need to find your image. If you did what you were supposed to do and saved it in the same folder as your web page, this should be easy. Once the image name appears in the box, click on "Okay."
See? That wasn't so hard.
Class Web Page Notes:
After all that hard work, you deserve a little break. So we'll do the easy part next: text.
Well, okay, easy with one minor exception.
For the most part, text functions exactly the same way it does in Microsoft Word. The menus, toolbars, keyboard commands, spellchecker (not, thank heavens, the grammar checker) all function basically the same way. Indents, bullet points, all of it: the same.
So, what's the one minor exception?
Type a word, any word. Now hit "Enter." See what I mean?
For some reason known only to Bill Gates, Front Page defaults to a double space on the hard return. Actually, in terms of web page design, it's not entirely a bad idea: it is standard design to have a double space between paragraphs. But there are other places when you'll want a hard return for which you don't want a double space, and there we run into trouble. So we'll need to fix it. I warn you: it takes several steps, and it looks complicated, but really, once you do it once or twice, you won't even think about it.
Ready? Deep Breath! Here we go (there's just no good place to put Mr. Happy here. Switch back and forth as you need):
And you're ready to go! You will need to do this each time you start a page from scratch. This is one of several reasons that I prefer to modify an existing page rather than starting from scratch.
Otherwise, you type and format your text much the same way you would in word. You can change colors by clicking on the A with the color bar under it.
A couple of design notes:
First, on fonts. Front page defaults to what's called "variable width font." That means that your page will appear in whatever the reader has selected as her/his browser's default variable width font. Usually, it is Times New Roman, but sometimes you have strange people like, oh, me, who prefer Arial or Verdana or even something stranger (for two years I had my browser set to Comic Sans MS). If you want your page to appear in a particular font, you do so the same way you would on Word ("Format;Font" or the font box on the formatting toolbar). Having said that, unless there's a design reason for choosing a particular font, I've always considered it polite to leave the font in default and let the reader's choice rule.
Also, be aware that if you choose an exotic font, it may not show up on all computers. If the computer on which the page is being accessed doesn't have that font, it will instead display the browser's default font.
Finally, be aware that the various monitor resolutions and text sizes that browsers are set to can wreak havoc on indentations. What looks like this:
Boeck, Tammy L. and Rainey, Megan C. Connections: Writing,
Reading, and Critical Thinking.
on one browser can look like this:
Boeck, Tammy L. and Rainey, Megan C. Connections:
Writing, Reading, and Critical Thinking.
on another. It's best to avoid fancy indentation at all if you can.
Class Web Page Notes:
I've found that a very simple but effective tool is color coding your course schedule. Having different colors for daily activities, homework, and major assignments provides an easy visual reference. Plus, it looks neat.
We all know that one of the draws of the web is the pretty pictures. However, before we get into how to put pictures on your website, I want to inject a note of caution: if your students are primarily going to be accessing this page from their homes or anywhere off campus, you will want to give serious thought to how long those pretty pictures can take to load. Yes, most connections and computers are significantly faster today than they were even two or three years ago, but on older computers with older modems, images can take forever and a day to load.
Having said that, let us begin.
As with backgrounds, the first thing you will need to do is find and save your image. So let's say you're surfing along, oh, here, and decide that this Binkley icon is just what you want. As before, you will want to make sure there are no copyright issues involved (technically, there probably are some involved in using a comic strip picture, but unless you're actively selling the image, it usually won't come to anything).
As with the background, you save the image by moving the mouse arrow over it and clicking the right mouse button. This time, you will select "Save image As." Once again, it is crucial that you save the image in the same folder as your web page.
Now, let's put the image on your page.
First, make sure your cursor is wherever you want the image to be.
There are two ways you can insert an image. The longer route is to go to "Insert," select "Picture," and then select "From File." From there, you find your image file the same way you found the background image file and click on "Okay." (Ignore that extra box floating in the background).
The shorter route is to click on the little yellow box with the mountain picture on the toolbar, find your file, and click on "Okay."
And viola! Your image should be there.
If you wish to change the size of your image, you do it the same way you would in Word: click on the image to select it, then move the mouse arrow to one of the little black boxes on the perimeter to get sizing arrows. Hold down the left mouse button and drag to change the size.
As a note on that: if you've ever tried to change images sizes in Word, you know: you can make an image smaller without any real difficulty. Making it larger presents problems, mostly having to do with resolution. If, for example, I try to make Mr. Happy larger, I end up with something like this:
Yech. Bottom line: to increase image sizes, you really need graphics software.
Now, when you select the image to change its size, you'll notice a toolbar popping up on the bottom of your window. Front page has all sorts of nifty options for images, including rotating, adding text, beveling, and other options. We're not going to cover them here. Why? For two reasons. First, there are just too many, and we risk information overload. Second, this is where bad design choices and bad code creep in. Some of these effects will show up screwy on Netscape. If you want to learn them (and some are useful depending on your page), I strongly recommend just setting aside an hour and sitting down to play with them.
Class Web Page Note:
I don't have a lot of images on my pages, but this is largely because of the nature of the classes. Obviously, images would be very useful for art, science, even math classes. math instructors in particular might consider posting equations as images rather than text, because it avoids the possibly of alignment being messed up.
Images can certainly be used to spice up a lesson (see Mr. Happy). At the same time, it's worth remembering that those pretty images, especially pretty moving images, can distract from the very lesson they attract someone to.
The Links
Now we get to the other nifty part of web page: hypertext. Hypertext in general is any text meant to be read in a non-linear fashion, but mostly it's used to describe electronic text broken up into chunks and interconnected by various links.
Links can be divided into three major types: internal, external, and mailto. Internal links are links to specific points within the same page. External links are links to other web pages, either on the same site or elsewhere. Mailto links open up an email message to the indicated address.
Internal Links
In order to link to a specific point in the page, you have to set up something to link to. So before we get to internal links, we have to cover something called "bookmarks."
Bookmarks, also called target and anchors, create...well, a target in a web page. This target can be linked to either from another spot in the page, or from another web page. Bookmarks work best of there's more than one screen worth of stuff, so we'll need to fill up your page a bit. You can do this by typing a series of letters down the side (hit letter, enter, letter, enter, etc), or by copying and pasting some random text into it.
Once you've done that, go to the very bottom of your page. Make sure your cursor is wherever you want the bookmark to be.
Go to "Insert" and select "Bookmark." You will be asked to name your bookmark. A note on this: no one but you needs to be able to recognize or figure out this name, but you should choose a name whose meaning will be clear to you, especially if you're going to have multiple bookmarks in a page. The first time I did this, I just numbered them, and then had to constantly re-check to make sure I was linking to the correct bookmark. Not fun.
Now that you have a bookmark, go back to the top of your page. You'll want to type in a word and select it, or select one that you already have.
As with pictures, there are two ways you can insert a link. One is to go to "Insert" and select "Hyperlink." The short way is to click on the little globe with the link on it on the toolbar. Either one will call up the link dialogue box.
Now, there's a lot going on here, but for now we are only going to look at the very bottom where it says "Bookmark." Click on the down arrow. If you inserted your bookmark correctly, it should be there. Select it, and click on "Okay."
And you should have linkage.
What's that? It's not working? Well, no. One of the quirks of almost all web authoring tools is that links don't work in them. So you'll need to test your link in one of two places. You can do so in the "Preview" window, but your page may look a little funny. My preferred method is to open an Explorer or Netscape window and open the file from there.
External Links
External links are links to other web pages, either on the same site or elsewhere. We're going to do the "elsewhere" first, because it's harder and less complicated. No, really.
In its simplest steps, linking to an external web page is done by:
See, nice and simple.
Except when it's not.
The first thing to remember is that computers, as a rule, do exactly what you tell them to do. That means that if you type one wrong letter, one wrong slash, one comma instead of a period in the address, your link will not work. My favorite trick for avoiding this is to open a browser window on the page I want to link to, then copy-and-paste the address into the URL box. Front Page does have a feature that does this for you, but it crashes the program rather often.
There's also the question of how to link among various pages on your own site, say from you syllabus page to your assignments. Here's where the easier and more complicated part comes in.
If your pages are going to be in the same directory on your site, whether it's your "main" directory or a subfolder you create (I like to create different directories for each class), you only need to enter the file name in the URL box. You need to be sure to:
Now, this is a wonderful shortcut, but you must be sure that the pages are saved in the same folder both on your computer and on the web space. Otherwise, Front Page will helpfully adjust for the different directories, thus rendering the whole thing higgledy-piggledy.
Special note: Have you noticed how some of the links on this site have caused a whole new browser window to pop up instead of just taking the current browser window to the page? Cool, huh? It used to require actual html skills to do that. Front Page, however, kindly does it for you.
To use this function, when entering your link, look for "Target Frame" on the link dialogue box. Click on the little pencil. Select "New Window." Click on "Okay." Making sure your link address is properly entered in the URL box, click on "Okay" again.
Design Note: Use this function only when there's a reason for the reader to stay on the linking page while also viewing the new one. I've been to pages where every link is done this way and frankly, it's annoying. It creates the impression that you think your page is just so special that no one could possibly want to leave it. And we all know that only my pages are that special.
Mailto Links
A mailto link opens up an email message already addressed to the linked address. At least that's what it's supposed to do. In reality, it only does this if the browser has a designated email program that is properly configured to an account. It won't work if the person wants to mail from Yahoo! mail or some other web-based email program. Sometimes it will make the browser open up three dozen blank windows. Use with this in mind.
To create a mailto, type then select the words and click on the link button. In the URL box, delete the "http://" and type mailto:youraddress@yourdomain.net. Note the lack of spaces anywhere. Click on "Okay."
Design note: It's generally a good idea to have the text of the link be your address, although you can insert spaces if you're worried about it being picked up by spammers (alas, this does happen). Remember that not everyone who uses your page will be able to use the mailto link (this is especially true if you use your page in a Parkland classroom).
Also, if you type an email address in Front Page, the program very helpfully inserts a mailto link for you. If you don't want one, just click on the "undo" arrow until it goes away.
Class Web page Notes
By this point, you have learned almost everything that you need to know to create a basic web page. There's still publishing, but we'll get there in a sec. The one slightly-more-than-basic thing we're going to go over is tables. Why? Because they are, as the title indicates, your friend and mine. Seriously: tables are wonderful, marvelous, versatile things, that can organize information and even aid in your design.
Notice there's no link there. Why? Because this very page has two separate tables on it: a large, four cell table that creates the color blocks and a smaller table along the left side that creates the navigation bars. If you hit the little Front Page icon on the browser toolbar, you'll see what I mean.
Tables in Front Page work in similar ways to tables in Word, with a few added complexities. let's dive in.
You can insert a table in two ways:
Go to the "Tables" menu across the top. Select "Insert," then "Table." You may want to glance at the other things you can insert as well, as this will be one way to add columns or rows later.
A box will come up that lets you select table features. Let's take a sec to explore these.
Any of these can be changed at any time, so again, don't feel pressured.
And we have tableage!
(Note: if you choose not to have borders, a faint dotted line will appear in Front Page. This will not appear on the published web page).
The second way to insert a table is much the same way you do in MS Word. Click on the table icon across the toolbar. Choose the number of rows and columns by selecting the same number of horizontal and vertical boxes. You can always add rows later if four is not enough.
If you do this, your table will show up with the default settings, so we'll need to change these. To do this, with your cursor in the box, go to "Table." Select "Properties," then "Table."
In addition to the familiar properties like alignment and cell padding, there are a few more:
A few other notes:
You can change column width simply by moving the mouse arrow until a double-arrow appears, then dragging the border to the appropriate width. Row height pretty much requires hitting "return."
To change the background color of individual cells, select the cell or cells. Click on "Table," select "Properties," then "Cell." Change the color in "Background."
To get what appear to be solid blocks of color against the page background, change the table background to the same color as the page background. Then change the individual cell backgrounds to the desired color. The greater your cell spacing, the more space between the blocks.
To add rows, simply go to the last cell in the table and hit "Tab." To add columns, click on "Table," select "Insert," then select "Rows and Columns." You can add columns to the left or the right.
Class Web Page Notes
So you've done all this work, and now you're ready to publish it. How do you do that?
Well, first you need the space. For that, you contact the Department of Distance and Virtual Learning, or put in a request through your department. Chances are you will be given space on the virtual server (virtual.parkland.edu) with what's called "FTP" access.
A moment to define terms: "FTP" stands for "file transfer protocol," and is basically a means of moving files (such as web pages) from one place (such as your computer) to another (such as the server). Moving files from a personal computer to a server is called "uploading." Moving files from a server to a personal computer is called "downloading."
Once you have gotten your space, you will need to upload your web pages. Please note that anything you load into that space is theoretically accessible on the web. It is true that if a person does not know the URL, it is unlikely that they will find it, but it's also true that search engines are increasingly sophisticated, and computer geeks even more so.
(Special side note: as far as I have been able to discern, pages on Parkland's virtual server do not show up on most search engines. This is both a benefit and a hindrance. It is a benefit in that random strangers will not stumble across your class pages. It is a hindrance in that students who forget the address cannot search for the page).
So, how do you upload your pages? Well, that's a little tricky. Honestly, the single easiest way is to use an FTP program. I myself like WS FTP, and the scaled-down version is available to educators for free. It's a fairly easy program to learn and use, but we don't really have time here to spend learning it.
So we're going explore a slightly less efficient but more transparent way to upload files using Windows Explorer.
(Special note the second: clearly you will not be able to do this portion until you have secured your space).
First you have to open Windows Explorer. This can usually be found on the Start menu under "Program Files," sometimes under "accessories." If all else fails, move the mouse arrow over the start button, then click the right mouse button and select "explore."
Once the program is open, look for the "Address" box. In that, you will type:
ftp://yourlogin@virtual.parkland.edu
(Obviously, you will substitute the login you are given for yourlogin. If you're not clear, this is the last part of the web address).
You will be prompted for your password. Enter it.
(Special note the third: every once in a while, for reasons known only to Bill Gates, I get a server error the first time I try this. The second time always seems to work).
This should open your file space.
To upload files, what you will first want to do is open another Windows Explorer window, and find the folder which contains your web page files. From there, all you need to do is select the files you wish to upload, and click on "Edit; Copy." Return to the window that has your file space, and click on "Edit;Paste." Please remember that you have to select all files, including images.
(Special note the fourth: if you are doing this from home on a dial-up connection, this process can be veeerrrryyyy sloooooowwww).
The URL for any given web page in your space will be
http://virtual.parkland.edu/yourlogin/filename.htm (or .html).
There is one exception to this, which we'll get to in a second.
Directories and Index Files
One of the ways that people keep their web space organized is through the creation of directories. If, for example, I am teaching both an ENG101 and an ENG102 class, I might create folders in my file space called "eng101" and "eng102." An individual page in the "eng101" folder would then have the address http://virtual.parkland.edu/rbusker/eng101/filename.htm.
This lets me keep things sorted, and also allows me to keep individual file names shorter - that is, rather having to name a file "eng099010schedule.htm," I can simply name it "schedule.htm."
As I've mentioned before, there is one exception to the http://virtual.parkland.edu/yourlogin/filename.htm address. That exception is the "index" file.
Every directory, including your main one, should have something called an "index" page - that is, a page named "index.htm" (or .html). This web page serves as the main page of the directory.
When someone types in "http://virtual.parkland.edu/yourlogin" with no file name, what they are actually accessing is a page that is named "index.htm" (or .html). You will want to have one of these for every directory. As a design note, it is helpful to have this page be an introduction which links to any important page in the directory. That way, if at any point a reader gets "lost" in the site, they can erase the filename and return to the beginning.
Class Web Page Notes