File transfer software like Fetch for the MAC or WS_FTP for the PC
Adobe PageMill Web Editor
This page describes the process of writing Web pages. It explains the steps you will need to do, what tools you will need to do them, and where to find the needed information in the LInC Web pages. This information will save you time and help avoid future problems (like broken links and images) in your Web pages.
You are welcome and encouraged to use this "getting started guide" to start writing your Web pages when you are ready. It is not necessary to wait for a class discussion on the topic.
We suggest that you read this page straight through without following any links the first time through. This will give you an overview of the steps needed and the resources that are available to you. Then you can come back to this page and read the links when you are at each stage that you need them.
This section provides an introduction. Read it before starting on your Web pages.
Writing Web pages is probably easier than you expect. There are now many excellent Web page editing programs which make writing Web pages very similar to editing in any general word processing program like ClarisWorks or Microsoft Word.
However, there are some pitfalls which can be very time consuming, but are avoidable if you set things up correctly. This document will walk you through this process of getting your template files, configuring your PageMill, writing pages and links, publishing your pages on the Web, and viewing your new pages on the Web.
This section has a description of general technical resources that are available. Read it before starting on your Web pages.
There are two types of online resources to help you with technical skills.
You will need to get a Shockwave Plugin for your Web browser once on each computer you use in order to get started. This is easy to do using the instructions at the top of the Web page,
And of course, your facilitator and colleagues are an excellent resource for technical help if you have questions or problems after using the online resources.
This section covers guidelines for naming your folders and files to avoid problems. Read it before creating any files or folders for your project.
The first thing to do is to read these
This is very important because your project's file and folder names turn out to be part of the URL (Web address) for your new Web pages. Not using these guidelines is a frequent cause of broken links and images in your Web pages. It is easiest to use good names to start with, rather than changing names later. We cannot emphasize this enough!
This section covers how to get the folder with template files for your project. Read it before creating any Web pages for your project. Follow the instructions to download the folder that has templates for your project.
The next thing you will want to do is get the folder of templates to use for your project. The templates will make it easier to create your project pages because some information is already filled in for you. It also makes it easier for readers who can expect to find certain items in set places on your pages. Ask your facilitator where to get the templates for your project and what account and password to use. This information (except for the password) should be listed on your course's "home page."
The templates folder for your course will probably be on the Web server machine for your course. To get this templates folder, you will need to use a file transfer program to get the files onto your computer. To do this, you will need "WS_FTP" if you have a PC or "Fetch" if you have a MAC. If you do not have Fetch for the MAC already, you will also need the program StuffIt Expander in order to get Fetch. StuffIt Expander cannot be downloaded without StuffIt Expander (Catch 22!), so you will need to get it from a colleague if you do not have it before continuing with these instructions.
If you do not have Fetch or WS_FTP, please read the Web page on
This page has links and instructions for downloading these programs.
Now that you have the file transfer program, you are ready to download (FTP) the templates. Because there are many template files, it is easier to download the whole folder than to download each template file individually. The instructions and animations we have for downloading a folder use downloading the templates folder from the Fermilab Web server as an example. Please get the templates using these
This page will direct you to look at downloading instructions for either Fetch (Mac) or WS_FTP (PC). Please also view the Web page with
It has animations for Connecting to a Server and Getting a File or Folder from Another Computer (Downloading). This animation shows downloading the templates folder from the Fermilab Web server as an example.
This section covers how to use the template files for your project. Read it after you have downloaded the templates and before you start writing Web pages.
The templates folder you just downloaded will become your project folder. You will open and edit the template files (scenario.html, present.html, student.html . . .) in PageMill to create your project files.
Once you have downloaded the templates folder, place or drag it on your hard drive or "C:" drive. We recommend working with this folder on your hard drive (instead of the desktop or a floppy). We have seen problems before with people working with the folder on their desktop, especially when people are switching between working on a MAC and a PC, because file names get messed up which causes link and image problems.
You will be using and editing the files in this template folder for your project. You might want to make a copy (duplicate) of the templates folder now so you don't have to FTP the templates folder again if you should want to start another page with a blank template.
You may want to have something on all your Web pages that is specific to your project, school, district, or lab. If so, this would be a good time to add this content to your template files. Then you and your team can copy and use these template files for your project Web pages. This can save time because it means you need to add the content only once to the templates instead of to each page you or your team creates if you do it after more Web pages have been created. Possible items you might want to fill in are your names, e-mail addresses, school name, etc.
Next, rename the templates folder on your hard drive to a name that is related to your project. Remember that the name should consists of letters, digits, and underscores. No spaces or other non-alphanumeric characters should be in the name. Examples of good project names are: rivers, recycling, bridges, route66, vitalsigns, . . . Check that no one else is using the same folder name before you transfer your folder back to the Web server. Some people also choose to use their first initial followed by last name (like lmengel). Remember that whatever name you choose will become part of the URL (web address) for your project. This means it will be better to have relatively short names that are easy to remember for someone who doesn't know you. For example, "rivers" will be easier to type and remember than "jdevareaux".
Please do not rename the template files that are there for the presentation, scenario, student, rubric, pre-LInC project description, and staff development Web pages. Using the names that are there help your facilitators and others find your work. It also makes it much easier to make a page at the end that links to all the projects for the course. You will probably create a few files in addition to the files in the template folder. To create these, copy (duplicate) the student page template and then rename the new copy. Name the new files based on the content they will have (but no spaces or non-alphanumeric characters). Please also keep the graphics folder that is now in your project folder. This will be used for the images for your Web pages.
Since file names show up in Web addresses (URLs) that are used in links, it saves time to think about what Web page and graphics file names you want to use when you first create new files. If you make some links between your files and add graphics, and then decide to change the names for your files or graphics, your links and graphics will be broken. So it is better to decide these names up front. This is a case where an ounce of prevention can be worth a pound of cure.
This section covers designing your Web pages so they are attractive and easy to read. Read it as you are starting to create your own Web pages.
While you are writing your own Web pages, think about what makes a Web page attractive and easy to read. Keep this in mind as you are creating your pages. If this has not been discussed yet in your course, let your facilitator know that you are ready to discuss it. Consult the following Web pages for more information:
This section provides information about conserving memory on your computer in order to avoid problems with having PageMill or your browser crash due to insufficient memory. Read it before you start writing your own Web pages.
In general, Web browsers (like Netscape and Internet Explorer) and Web editors (like PageMill) and word processing programs (like ClarisWorks and Microsoft Word) and spreadsheets use a lot of memory (RAM) when they are running. If you have 16M of RAM, you may be able to run only one of these at a time. If you have 32M of RAM, you may be able to run two or three of these large applications at once. It is useful to be able to run your Web browser and Web editor at the same time. But this is not required to complete the course.
We recommend that you quit any large applications that do not need to be running at the same time when you are using your Web browser and Web editor. This will prevent application crashes from not having enough memory.
This section covers required configuration steps you must do with PageMill in order to avoid problems. Read it and follow the configuration instructions before you start writing your own Web pages.
The next step is to configure your PageMill for your project. This must be done once on each computer that you use PageMill on. Skipping these steps will result in having broken links and images in your pages.
The most important thing to configure correctly is your "resource" folder. This step tells PageMill where it can find resources for your pages. Resources include images, sounds, and animations. This needs to be set to the graphics folder within your project folder. For example, if my project folder is called "rivers" and it is on my hard drive, then my PageMill "resources" folder should be set to Macintosh HD:rivers:graphics.
It is also important to tell PageMill whether you wish to use Macintosh or DOS (PC) line endings, and whether you wish your files to end in ".html" or ".htm". You should use the appropriate line endings for the type of computer (MAC or PC) that you most often use.
We recommend you use a ".html" ending for both Windows or MAC users. If you think your files will be put on a Windows 3.1 machine, you should choose the ".htm" file ending.
There are detailed configuration instructions for this on the Web page,
There are also animations which demonstrate how to do your PageMill configuration (for either PC or MAC) on the Web page,
This section covers how to use use the template files you downloaded to start writing your project pages in PageMill. Read it after you have downloaded the templates and configured your PageMill, and before you start writing your own Web pages.
Now you are ready to start creating your pages in PageMill using the template files in your project folder. To do this:
If you do not have enough memory on your computer to run both PageMill and your word processing application, then you will need to Quit your PageMill, run your word processing application, and then use Save As to save your work in "plain text" or "ascii". Once you have done this, you should be able to open this plain text in SimpleText (on the MAC) or NotePad (on the PC). Both of these applications don't use very much memory, so you should be able to run them and PageMill at the same time, which will allow you to copy and paste your previous work.
This section covers how to use formatting commands (like headings, paragraphs, and lists) in PageMill. Read it when you are ready to add formatting to your Web pages.
Formatting your Web pages is just like using a word processing program. One difference is that you must be in edit mode, rather than preview mode to be able to make any changes in your page.
Instructions for making your page editable and adding formatting are available on the Web page,
There is also an animation which demonstrates how to create a bulleted list on the Web page,
The hardest part of formatting a Web page is that some actions are section formatting commands which mean they affect the whole paragraph your cursor is placed in (from the blank line before the text to the blank line after the text). For section commands like headings, the text you have selected/highlighted is irrelevant. The command affects the whole paragraph that your cursor is in. This can be confusing if you have highlighted some text and are expecting only the highlighted text to be changed instead of the whole paragraph of text.
For example, you may highlight a few words and select "largest heading". If those few words are part of three lines of text, you will find that all three lines of text will be changed to "largest heading," not just the few words you highlighted. To fix this, use a blank line before and after your heading phrase. Then only those words will be changed when you use a heading command.
There are also character formatting commands. These commands affect only the text you have highlighted. Examples of character formatting commands are: italic, bold, and teletype.
The page on writing and editing your Web pages also describes how to use the spell checker and the load-time checker to see how long your Web pages will take to load for your readers.
As you are writing your Web pages, note that PageMill has an Undo menu item in the Edit menu which will undo the last action taken. This can be very helpful if you have accidentally deleted or changed something.
This section covers how to add links to your Web pages using PageMill. It also provides information about how to modify, remove, and check links. Read it when you are ready to add links to Internet resources to your Web pages or to link your project Web pages to each other.
Now you are ready to add links to your Web pages. There are several very helpful animations about creating links on the Web page,
There are also written instructions with screen pictures on the Web page,
This page covers linking your project pages together as well as making links to outside resources. Also, there is a link to a link checker on that page so you can automate checking if all your links are working.
One frequent problem encountered when making links is having a link continue over the text you are adding after an existing link. To fix this, select/highlight the text that you do not want to be included in the link, and then follow the instructions for removing a link.
To get more information about linking concepts, and to make sure your Web pages can be moved to a different Web server without breaking your links, see the Web page,
This section covers how to add graphics to your Web pages using PageMill. Read it when you are ready to create graphics, find graphics, save graphics from the Internet, or add graphics to your Web pages.
Now you may want to add some variety to your Web pages with graphics. Remember to keep page-load time in mind when you are adding graphics so your readers don't have to wait too long to view your pages. Also make sure your graphics, colors, and backgrounds don't create such a "busy" look that they make it difficult to read your page. We suggest you concentrate on content of your Web pages first before spending a lot of time adding fancy graphics.
Before you add graphics, make sure you have created a folder named graphics in your project folder, and have configured your PageMill Resources folder to be your graphics folder. You will need to do this on each machine you use PageMill on. Skipping this step is the most frequent cause of broken image problems.
Also, remember that the names for your graphics should follow the same guidelines as the names for files (no spaces or funny characters, and the name should end in .gif or .jpg).
Instructions for using, converting, making, finding, and saving graphics are on the Web page,
There are also animations that show a demo of most of the tasks you need to do with graphics on the Web page,
Once you get the hang of adding graphics, you may want to reduce your graphics download time by making your graphics "fade in." This is called making an interlaced image. You may also want the background color of a graphic to be transparent. For example, if you have a picture of a hand pointing, you may want to have it look like the hand is directly on your page, without a rectangle with background color in back of the hand. In this case, you would want to make the image transparent.
The graphics page above also shows how to make images interlaced and transparent, how to change your Web page background color, and how to use an image as your Web page's background, as well as listing some places to find free graphics on the Web. If you find more good places, please post them to your class electronic discussion board (COW at Fermilab), so your colleagues can use them as well.
This section covers how to publish your Web pages using FTP. Read it when you are ready to transfer a Web page or folder of Web pages you have written onto the Web server.
Now you are ready to become a published Web author! You will use FTP to transfer (upload) your files to the Web server. This will involve using Fetch for Mac users or WS_FTP for PC users. To do this, see the instructions and animations for uploading folders and files on the Web pages,
If you are transferring all the files in a folder, it will be much quicker to transfer the whole folder at once. It would take much longer to do each file individually. So you would want the instructions for uploading a whole folder/directory for this. MAC users, please select Text format for html files and Raw Data format for all other files when you upload a folder.
Make sure you check that you are not overwriting someone else's files when you upload a folder. If there is an existing folder on the Web server that contains files that are not in your folder, you will be removing those files if you upload your whole folder.
If you are using Fetch on a MAC, and you find that all the file names are getting an extra suffix added like ".txt" or ".bin" when you upload files, then you need to change your Fetch configuration. You have this problem if you see you have files named things like "scenario.html.txt, present.html.txt, mypicture.gif.bin, yourpicture.jpg.bin". Instructions for fixing this are on the Web page,
This section covers how to view the Web pages you have just published (transferred) to the Web server. Read it after you have transferred some files or folders to the Web server and are ready to check over and fine-tune your work.
Now that you have published your Web pages, you can view your work with your Web browser. See if you can guess what the URL for your new Web pages are based on the computer and folders you used to transfer your files. The main thing you need to know is that the first folder you go through for FTP may not need to be in the URL. For example, at Fermilab the edwebserver folder is not in your URL. This is because this is the default folder the Web server starts looking in, so it should not be included in your URL.
Remember to use your Web browser to check your new Web pages for broken links, broken images, spelling, and load time. (The load time is the amount of time it will take readers to load your Web page into their browser for viewing, given the speed of the Internet connection they have.) You can use the following Web pages to help.
If you've made it this far, you have the potential to be a proficient Web publisher. Continue with your project and refer back to this document as needed.