Writing and Editing Your Web Pages

Prerequisite:

Adobe PageMill software, either the Mac or PC versions
 
Know basic computer concepts

Purpose:

To obtain what is necessary to start writing Web pages

To use an editor to write HTML documents containing text content and proper HTML formatting tags (headers, lists, paragraph, horizontal rule, character formatting, addresses . . . )

 

Lesson:

AUTHOR! AUTHOR!

The recommended software for creating Web pages for your project is Adobe PageMill. Also, if you have purchased PageMill, go through the manual that came with your software. (It is also worth your time to look at the Adobe Web Site. There you find updates, special offers, and opportunities to preview new software.)

 

While the recommended editing software is PageMill, a raw HTML tutorial is available for writing in HTML to supplement using an editor or writing without using an editor. If you are using PageMill, this other tutorial is optional. It will not be used by everyone. It is not meant to be a complete list. Other HTML sites are available on the Web for those who prefer this format.

 

Adobe PageMill Tutorial

 Getting Started
 Configuring PageMill
Tutorial Animations for Adobe PageMill
 Making Your Page Editable
Formatting 
 Spell Checker

 



Tutorial Animations

As you begin creating the pages for your project, great resources are the Tutorial Animations for Adobe PageMill. These tutorial animations are demonstrations of how to accomplish certain functions, as if the instructor was in the room demonstrating the task. They require Shockwave to run. Directions on how to download Shockwave and a list of the movies available are found on the page.


Getting Started

These are some "organizational" things that will make it easier for you to put your Web pages on a Web server when you are ready. Your facilitator either will tell you to FTP a templates folder or to create a new folder for your project.

If your facilitator supplies the templates folder, it will contain different Web page formats to use when writing the components for your project. You will need to download the folder from a server by following the steps on the introduction to FTP page. You will then need to change the name of the folder to either your first initial followed by your last name or to the name of your project.

If your facilitator does not supply the templates folder,

1. Create a folder named by either using your first initial followed by your last name or the name of your project. Use all small letters and follow the naming guidelines when you name your folders and files. Example: My name is Laura Mengel, so I would name my folder lmengel.

2. Create a folder inside the folder you just created and name it graphics. Create the graphics folder before you start working on creating pages, making links, etc.

3. Open a file you have been working on in whatever application you used to write it.

4. Use the FILE menu's Save As item to save your file in Plain Text format. Save your file inside the folder you created that you named with your first initial and last name.

5. PageMill and Netscape use considerable memory, so you should quit any other unnecessary application you may have running now.

Guidelines for Naming an HTML File: Please follow these guidelines for name files and folders. This will help you avoid the problem of having to fix broken links in your pages later.

Back to the top

Configuring PageMill

Tutorial animation available

1. Open PageMill.

2. From the Edit menu, select the Preferences item (at the bottom of the menu) to pop up a Preferences dialog box.

3. Select the Page section of the Preferences dialog box by clicking on the Page icon on the left side of the dialog box. In the File Format area, if you have a Mac at home/school, select a Line Breaks style of Macintosh and a File Suffix of ".html".



 


If you have a PC at home/school, select a Line Breaks style of DOS and a File Suffix of ".htm".



 


4. Select the Resources section of the Preferences dialog box by clicking on the Resources icon on the left side of the dialog box. In the Resource Folder area, click once on the picture of the Default folder and use the file browser to select the graphics folder you made earlier.





5. Save your preference choices by clicking on the OK button.

 

Making Your Page Editable

PageMill has two "modes" of operation. One mode is Preview Mode where you can preview the page you've written. The other mode is Edit Mode where you can modify or add to your page. You can switch between modes by clicking on the

Globe (preview mode icon) or

 

Pen and Paper (edit mode icon)

in the top right corner of your window. Remember that you can not make any changes to your page unless you are in Edit Mode.

back to the top




Formatting

The first step in formatting your document is to type a title into the Title box at the top of your PageMill window. The Title is important because this is the text your readers will see in their Bookmarks list if they bookmark your page.

Section Formatting

To add formatting in PageMill, place your cursor in the section of text you want to effect, and choose one of the formatting commands from the Format Option Menu at the top of your PageMill window. (You can use the Format Menu from the menu bar to do the same things.)

 

In PageMill, formatting works on a section-by-section basis. A section is all the text between two blank lines. That is, if you stick your cursor somewhere in a section and choose a formatting command like Larger Heading, then the whole section (all the text between first blank line before your cursor to the first blank line after your cursor) is formatted as a Larger Heading.

The exception to this is lists because each list item starts on a new line. To create a list, write out the text of each of your list items on a separate line of your page. Then highlight all the items of your list and choose the list type you want (Numbered, Bullet, . . .) from the Format Option Menu.

 

To find out what "format" is being used on some text you have already formatted, click inside that text and the Format Option Menu will change to show you the current format being used for that text. For example, if I click inside one of my large headings, the Format Option Menu will look like: You can find out the same thing by seeing which item is "checked" in the Format Menu from the menu bar. You can justify or indent whole sections of text by placing your cursor in that section of text and then clicking on one of the justify or indent icons in Toolbar at the top of your PageMill file: left justify, center, right justify, indent left, and indent right.

Notice that when you pass your mouse pointer over any of the toolbar buttons, a short description of what the button does appears on the right-hand side of your window between the two rows of buttons.

 

Character Formatting

You can adjust the font style of your text by highlighting the characters you want to be effected and then selecting a font style from the Style menu.

 

You can also use the B, I, and TT buttons shown on the Toolbar to change to Bold, Italic, or Teletype text. You can use the color square to change text color, and the up and down arrows to the right of the Format Option Menu to increase or decrease the font size.

Back to the top.




Spell Checker

While writing and editing pages with PageMill, make use of the Check Spelling feature found under Search at the top of the screen in PageMill. This feature operates like checking your spelling with a word processor.

 




Task:

Using FTP, download the templates folder. Start writing your project Web pages using the templates folder Web pages or by creating new pages. Remember to save them in a folder following the above suggestions. Make sure you have saved any images, icons, bars, and buttons in your graphics folder. You may need to complete the graphics activities as you are writing your Web pages. Upload your pages to your course server. Let your facilitator know when your pages are available for viewing and comments.

Be sure to add the due date for this assignment to the assignment sheet.