Web Page Authoring
With Adobe PageMill 3.0

(for Macintosh)
Quick Reference Guide

IMPORTANT POINT: Although PageMill may look a little like a word processor, there are some very important differences between making a word processing document and making an HTML (web page) document. In a word processing document, when you place an image onto the page, it becomes part of the document file itself. This means that a word processing document with several pictures in it is saved as a single file. But this is not true for an HTML document. An HTML document is really just a set of instructions (HTML code) which tell your web browser how to display the text and where to find the appropriate images. The images are not actually part of the file. Therefore the images must be placed in a folder along with the HTML page document. This means that, if you move the images to another folder after the HTML page is made, or if you change the file name of any of the images, the HTML page will no longer be able to find them. So, when you produce a web site (a site has more than one connected and related web pages), you end up with a folder that has your home page (which typically has the file name of index.html), several related HTML pages that are linked to your home page, and all of the images that you have selected to display on these pages. It is best to begin a web page project by first creating this folder.

• Before starting any programs, select New Folder in the File menu. Place this folder on your desktop and name it "webpage." This will be the folder that contains your HTML pages and your images.
• Open the PageMill program (in the Adobe PageMill folder).
• When you opened the PageMill program, it should have opened a new, untitled, blank web page. Before working on this page, you need to name and save it to your new folder. Select Save Page As... from the File menu. In the window that opens, navigate to the webpage folder that you created, then change the first part of the file name to index (leave the .html tag on the end of the name... web page file names should be short, with no spaces or punctuation). Example: index.html When you have done this, click Save.
• Next to the Title label at the top of your web page, delete Untitled Document and type a title for this page. Example: Stan Smith's WebQuest Page This is the title that will show up at the top of a user's web browser, but it is not text that will show up within your page. Now you are ready to add content to your page!!

IMPORTANT POINT: In Adobe PageMill, there are two ways of viewing your web page document, Edit Mode and Preview Mode. In the upper right of the PageMill window is a square button. If this button has a picture of a paper and pen, the window is in Edit Mode, and you can change the page, adding and removing content. If the button has a picture of the Earth, the window is in Preview Mode. This mode is for viewing only, showing you what the page looks like in a web browser. In Preview mode the links actually work and you can test them, but you cannot edit the content of the page.

Adding and Editing Text:

• Click on the body of the page to place your cursor there and type a heading that you want to appear at the top of your home page. Example: "The Great Coral Reef Web Quest" Then hit Return on your keyboard.
• Highlight that text. Now you can center it, make it larger (for instance, select Largest Heading on the Paragraph pull-down menu). For headings, use one of the Headings choices and for most other text, choose Paragraph. You can also select a style, such as Bold, Italics, or Underlined.
• Add a sentence or two of explanation under your page heading. Example: "Where you can explore the Coral Reef without getting wet!" You can also highlight this text and resize it, center it, change its color, etc. The text color button is the small button with a 4-color square on it. To change the text color, just click-and-hold on this button and select one of the colors. Take the time to practice each of these.
• It is possible, in Adobe PageMill, to select a different font. To do this, pull down the font menu on the second row of buttons (it says "default font" on it) and then you can select one of the fonts you have installed on your computer. But, you should keep in mind that an HTML page is just a set of instructions, and these instructions tell the viewer's web browser where the components are and how to display them. If the viewer's computer does not have the font you selected, the text will not be displayed the way you want it to. So if you do choose another font, make sure it is one that is very common, such as Arial, Verdana, Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Times, or other font that you know is on almost all computers.
  

Adding and Editing Images:

• You can insert, move, and resize images, and even change some aspects of how they look on the screen.
• By far, the best way to add images to your web page is to prepare them first, save them as GIF or JPEG images, and then place them in your webpage folder. Then add them to your web page from your webpage folder. Images can be edited and converted to GIF or JPEG with an image editing program such as Adobe PhotoDeluxe. If you are obtaining pictures from the Internet, perhaps from a web site that already exists, they will already be in the GIF or JPEG format (GIF is best for text and drawings, JPEG is best for photographs).
• To get a picture from an existing web site, use your web browser to go to that web site, locate a picture that you like, then click on the picture and hold down the mouse button until a menu appears. In this menu, select Save This Image As... and save it to your folder. Then it can be placed from your folder into your web page. NOTE: Please keep in mind that some pictures on the Internet are copyrighted.
• You can also add your own photographs and artwork by scanning them (or using a digital camera). After they are scanned, you will edit them as desired with an image editing program and then save them to your folder as GIF or JPEG images. Then they can be placed from your folder into your web page.
• To insert pictures on your page, click to place the cursor where you want the picture. Then click the Insert Object button (it is in the top row and has a small square with a person's profile on it). Or, you can pull down the Insert menu to Object, then over to the submenu and select Image. In the resulting dialog box, locate the image file you want to insert and click Open. This places the image into your web page at the spot where the cursor was.
• To center any picture on your web page, click on the picture to select it and then click the Center icon.
• To resize any picture on your web page, click on the picture to select it and then carefully place the tip of the cursor on the small square that appears at the lower left corner of the selected image and click and drag to the desired size. NOTE: if the image was saved at 72 dpi, it will degrade its appearance if you make it larger.
• To place text on the left or right side of the picture, click on the appropriate button in the button set in the top row of buttons (these buttons will not show up unless you have clicked on the image top select it). Then type the text you want to place there.

Using Tables to Help with Page Layout:

• It is often desirable to have images, text boxes, etc. on the left side of your web page, and something else on the right side (having everything centered and arranged vertically is rather mundane). You can, for instance, insert a table that is 3 columns wide with one row, place an image in the left table cell, place and center some text in the middle table cell, and place another image in the cell on the right.
• To insert a table, place the cursor where you want the table, then click-and-hold on the Table button (it is in the top row of buttons and looks like a small grid with 3 columns and 3 rows) and drag to the lower right until you get to the number of rows and columns you desire for your table. This will insert a table at the location of your cursor.
• In the Inspector (you can display the Inspector by choosing Show Inspector from the Window menu) you can control many different aspects of the table, such as background color in each cell, vertical and horizontal alignment of content in each cell, width of cell borders, etc. (you need to take the time to experiment with all these controls).

Adding a Page Background Color or Background Image:

• If the Inspector is not already visible, select Show Inspector from the Window menu.
• There are 4 tabs at the top of the resulting Inspector window. Click on the Page tab, which is the second tab from the left.
• In the pulldown menu next to Background, either select one of the displayed colors or select Custom to choose a custom color (remember that text is easiest to read on pages with light backgrounds).
• If you prefer to use a background image, rather than a color, click on the small page button at the lower left of the Inspector window. In the dialog box that opens, locate the image you have prepared (it should already be placed in your page folder). WARNING: Background images often look nice, but if they have much contrast, they make it difficult to read the text on your web page. If you use a background image, you may want to first open it in an image editing program and make it very light (almost white or gray), then place it in your page folder and use it as a background image. Remember that the easiest text to read is on a white background.

Adding Another Page and Linking Pages:

• Pull down the File menu to New, then over to the submenu and select New Page.
• When the new page opens, select Save Page As... under the File menu. Make sure this new page is being saved in your webpage folder and give it a name (remember to keep the .html tag at the end of the name, but you cannot name it index.html because you already have a file with this name). Click Save.
• Type a title for this page next to Title:
• Place whatever content you wish on this page (as you did on the first page).
  To Link the pages together:
  - Go back to your first page and type some text that you wish to serve as a link to the second page. Now highlight this text.
  - Click on the Link button at the bottom right corner of the PageMill window. In the window that opens, select the page that you would like this text to link to and click the Link To button.
  - The text is now a link to the second page (notice that it is now underlined and a different color).
  - You can link the second page back to the first in the same way.
  - Images (including text images) can be used as links also, in the same way that you used the text.

Adding a Link to a Remote Site:

• You can also link text (or an image) to any other web page that exists on the Internet.
• Type some text that you wish to serve as a link to a remote web site.
• Highlight this text.
• Click your mouse in the area to the right of Link To: at the bottom of the PageMill window, to place your cursor there. In this area type the URL of the web site you want to link to. Example: http://www.hotmail.com (NOTE: since this is a link to a remote site, it is important that you include the "http://" portion of the URL).
• Press Return on your keyboard. The text is now linked to the remote site (notice that it is now underlined and a different color).
• Images (including text images) can also be used as links to remote sites.

Adding a Mailto Command:

• Type some text that you wish to serve as a command that, if a viewer clicks on it, will open their email program so they can compose a new message which is automatically addressed to you. Highlight this text.
• In the Link To: area at the bottom of the screen, type mailto: and then your email address. DO NOT put a space after mailto: Example: mailto:ssmith@warrensburg.k12.mo.us
• Press Return. The text is now an email command.
• Images (including text images) can also be used as email commands.

Creating an Image Map:
An image map is a large picture that has "hotspots" on it. In other words, there are areas of the image that are links that you can click on to go to a different page. Image maps typically have logical pictures (like arrows) and/or explanatory text so that you know which part of the image map to click on. Most image maps are created using an image editing program (such as Adobe PhotoDeluxe) or a drawing program, such as AppleWorks (ClarisWorks) Draw.

• Prepare your image you wish to use as an image map and place it into your webpage folder.
• Insert this image into your web page, as you would any other image. Click on the image to select it.
• Double-click on the image so that there is a thick gray box around it (if you click on it only once there will be a thin black box around it not what you want this time).
• In the middle of the top row of buttons you see four buttons for creating "hot spots" (the left button has an arrow, the others are shapes). Click the button with the square on it, then use your mouse to draw a "hotspot" on your image. When you release the mouse there should be a blue box around the "hotspot."
• Click on the Link button at the bottom of the window, then navigate to the page you want this hotspot to link to. The hotspot is now a link to that page. You can also make the hotspot a link to a remote web site by typing in a URL instead.
• Continue to make more links with other areas of this image until it is complete, then close this window.