Web Publishing with Front Page 2003

You may print this page if you feel the need.  But we will be updating it as needed; so the online copy will always be most up-to-date.

• Logging onto your web
• Saving & Naming Pages
• Creating links
• Creating new users in your web site
• Images
• Backgrounds & Color
• Tables

I have a much longer version (in three parts) of these notes at: http://www.csusm.edu/garrett/electures/fp_classes_f05/

(For the rest of this lecture, it is assumed you are using Front Page 2003 to develop pages on http://fptraining.csusm.edu/)

Front Page is a WYSIWYG application from Microsoft; it will look very familiar (and act similarly) to other Microsoft products.  If you get stuck while trying to do something in Front Page, think of how you would do this task in MS Word.

Open Front Page from your "Start" menu (bottom left corner of your desktop: Start > Applications > Microsoft Office Front Page 2003).
You'll see the default screen if it's the first time you log on. Succeeding times you will simply be prompted for your login/password; Front Page assumes you want to open the last web you had open.  If you do not want to open the last web you worked on, simply "Cancel" the login screen and go on to the next step.
Select "Open Site..." from the File pull down menu and, in the pop-up, fill in the "Site name" with the full URL of your web site (or, if it's not your first time opening this web, you may select the web you'd like to work on from the pop-up window and click "Open") Note: If you are working on a course web your URL will look something like: http://courses.csusm.edu/fren201ec/ If you are working on an official, campus web your URL will look something like: http://www.csusm.edu/iits/
Enter your "User name:" and "Password:" for this web and be sure the "Remember my password" check box is not checked, then click "Okay". If you are authoring on the fptraining.csusm.edu server, your username and password is the same as your campus network username and password.
Now you will see your web files and folders.

• Is everyone logged on?  For this class we have created web space for you like:
  http://fptraining.csusm.edu/webpub/[yourlogin]/
• Looks like a Microsoft product, doesn't it (for good or ill)?

Hint: When designing web pages, keep Front Page open as well as a web browser (so you can see the pages you're saving on the server, to be sure that everything looks/works as you want it).

1. First, open a new page:
   1. Use the new page icon on the toolbar, type [Ctrl + n], or the pull-down menu: File > New... > and select "Blank Page" from the right-hand-toolbar that appears.
2. Use the save icon on the toolbar or the pull-down menu: File > Save
3. Name your files something descriptive but short (names affect URL lengths and users' typing time); never use spaces or non-alphanumeric characters in file names.
   • syll.html, syllabus.html, syllabusfall00.html, syllabus_fall00.html, syllabus_fall_00.html, etc.
   • htm vs. html suffix
   • The "index.html" file is your first or "top" page in the hierarchic structure of your web site.
   • File name vs. Page Title vs. Title within the page
   • Special characters: alpha-numeric characters are always fine; other than that, only dash and underscore are recommended.
4. Use the "Change title..." button to give your pages informative titles that are used by search engines and browser history lists.
5. Be sure you know where you saved your page (and, using your web browser, double check that everything looks/work right).  Be aware of the default "Save in:" location and remember where you left your file(s).

Note: There is a "Save All" option (in he File menu) that will save all your open, modified files at one time.

Exercise: Save an index and two additional pages on the web server.

Troubleshooting: What if you save a change to your page and it doesn't appear when you look using your web browser?

1. Select the object (image or text) that you want to become the hyperlink and then use the toolbar shortcut to open the "Insert Hyperlink" popup window to select the file you want to link to (remember you can link to an external web page, an image, a sound, a movie, or even a document from Word, Power Point, Excel, etc.).
   
   • "Look in:" Current Folder vs. Browsed Pages vs. Recent Files
     • Be sure you note the default "Look in:" location and remember where you left your file(s).
   • Or you could type in a full URL in the "Address:" box or use the "Browsed Pages" button to see a list of recently browsed pages (to link to pages).
2. Click "OK"

Note: Your file/folder structure can be different from the logical structure you give to your pages. [draw example on board]

Exercise: Create a link to the campus home page.  On your index page, create links to each of the other pages you created.  Create a links from your other pages, back to your index page.

There are two kinds of links that don't link to a whole new page: Bookmarks and Email links.  

A bookmark link (also called target links) is a link to a specific place in a page (often the same page that the link is on), like the links at the top of this page that jump users down to a specific topic lower on this page.  Creating bookmark links:

1. Create the bookmark.
   1. Select the text (or insert your cursor) where you want the link to jump to.
   2. Insert > Bookmark... (ctrl+g)
   3. Make sure the "Bookmark name" is as you want it and click "OK"
      Note: If you selected text to be the bookmark, it has broken underlining now.
2. Create the link to the bookmark.
   1. Select the text that will be the link (to the bookmark you just made).
   2. Insert > Hyperlink... (ctrl+k)
   3. Single click to select the page where the bookmark is (or type the full URL in the Address: field), and click the "Bookmark..." button (on the right side of the Insert Hyperlink pop-up window).
      Note: If the bookmark is on the same page as your link, you can just click the "Bookmark..." button.
   4. Select the bookmark from the list on the "Select Place in Document" pop-up window.
   5. Click OK; click OK again.

Note: The decision to make one long page with a table of contents and bookmarks or many smaller pages that are linked from a table of contents page depends on your intentions for the site and the needs of your users.

"Email Address" links, not to a page or file, but open an email window (using the end-user's default mail application) to the email address you specify.  Creating email links:

1. Select the text that will be the link.
2. Insert > Hyperlink... (ctrl+k)
3. Under the "Link to:" section in the Insert Hyperlink pop-up window, select E-mail Address.
4. Type the address you want to be emailed if this link is used in the "E-mail address:" field.
   Note: You can also type a default subject for the email in the "Subject:" field.

Exercise: Open a new page and make a table of contents and bookmarks and add an email link (and set a default subject) at the bottom for contact information. 

Note: There are reasons to type the full email address on the page, like printability.

To give another person access to your web:

1. Use the menu: Tools > Server > Administration Home...
2. Login using your campus login and password (unless you are authoring on another server besides www)
   Note: This only works using Internet Explorer.
   Note: This opens Internet Explorer and provides a series of pages to administer to your web.
3. Click the "Manage users" link.
4. Click the "Add a user" link.
5. For the "User name" field, if you use a person's campus login, they will be able to use their campus network password to access your web site (this is preferred); in this case, it does not matter what you type in the Password and Confirm Password fields (but you must type something consistent in these fields).  For non-campus users, you may assign any User name and Password you like.
6. Select a User Role
7. Click Add User
   Note: You will be returned to the Manage Users screen; to return to the Admin Site, click the "Administration" link (top left).

Note: Never change your subweb permissions to "Use same permissions as parent web"  This may deny you access to your web.

Exercise: Give "gcollins" "Author" access to your web.

Where do images come from?  You can either create images using an image editing application or you might get completed files from a graphic designer (or the web).

To capture images from existing web pages:

1. Open a web browser and find the image you want
2. Right click the image and select "Save Picture As..." (if you're using Internet Explorer) or "Save Image As..." (if you're using Netscape/Firefox, etc.). 
3. Save the image to your local disk (I like to save to the desktop) using the popup window that opens.

Exercise: Save an image from the web to your desktop.

To import saved images from a local disk to your Front Page web:

1. Open your Front Page web (or make it the active window on your screen).
2. Hold down the "Windows" key (between the Ctrl and Alt keys) and type an "e" to launch Windows Explorer.  Use this popup window to find the image you have on your local disk (on your desktop).
3. Click-hold and drag the image icon to your front page web/folder (that is still visible behind the windows explorer window); unclick when your cursor shows a "+" in the web location you want this image to be imported to.

Optionally you can use the menu: File > Import... and "Add File..." and/or "Add Folder..." till you have selected all the images/folders you want to import into your web, then click the OK button.

Exercise: Drag and Drop or Import the image (you just saved to your desktop) into your web.

Note: This process of importing images (either using the File menu or by Dragging and Dropping) can be used to import any file (.pdf, .rtf, .xls, .doc, .mov, anything you want to link to (even if it is not able to be displayed by a web browser)).

Inserting images into your web pages:

1. Place your cursor in your HTML page where you want the image and use the tool bar shortcut then  use the "Picture" popup window to select the image you want
   
2. Click "Insert"
   • Note the default "Look in:" location and remember where you left your file(s).
   • Also note that ADA compliance requires we add ALT (alternative) text descriptors to "show" images to web users employing screen readers because they have trouble seeing the image itself.

Thumbnailing Images (linking smaller, faster loading images, to larger versions of themselves):

1. Once you have inserted an image into your HTML page, right click it.
2. Choose "Auto Thumbnail;" Your image will automatically be sized and linked to the larger version of itself.
   Note: When saving your page, you will be prompted to Save Embedded Files; this is the thumbnail Front Page just made for you.  Note the name of the thumbnail (will be something like: OriginalFileName_small), the folder it will be saved in and the action Front Page will take.
3. Click OK when you are ready.

To add alternative (ALT) textual information:

1. Right click the image you just inserted into your web page and select "Picture Properties..." from the pop-up menu.
2. Click the "General" tab at the top of the pop-up window.
3. In the box labeled "Text:" type a short, description of the image (this is what users employing screen readers will hear instead of seeing the image).  Be sure the check-box next to the word "Text" is checked.

Note: How download time is affected by the addition of images.  Front Page tells you, in the bottom right corner of the window, how long the page you are editing will take to download.  You can click the time to change the network size.

Exercise: Insert an image (that you just imported into your web) into one of your web pages.  Be sure to add ALT text.

• Page Text & Background:
  1. To modify the default  and/or colors of your web page: go to the menu: File > "Properties..."
     or right click anywhere in your page and select "Page Properties..."
  2. Click the "Formatting" tab, at the top of the "Page Properties" popup window that appears, to set a background image and/or customize your page colors.
• Hyperlink colors:
  1. Link color, like text color, should strongly contrast with the background, and be easily differentiated from the normal text color, for browsing ease.
  2. Link color may be changed from the same "Formatting" tab at the top of the "Page Properties" popup window, as above.
• Specific text may be assigned a color too. 
  • Just like in Microsoft Word, you may select the text you'd like to color and use the font-color shortcut on your toolbar to select the color
    • Click on the "More Colors..." option:
      • We will discuss both Select and Custom buttons in-class
      • We will talk about Hexadecimal and RGB values in-class
  • Or you may use the "Format", "Font" pull-down menu... notice the other cool styles available with this option.

Chuck Allen created a resource that allows you to see a range of colors (a mixture of the Macintosh and Windows color pallets) and their hexadecimal and RGB values:
http://www.csusm.edu/garrett/resources/goodclut.gif
Here's a great color chart, that shows which colors complement other colors: http://www.visibone.com/color/poster4x.html

Exercise: Change the background and text color of one of your pages and then select some text and change its color.  Change the background of a different page to be an image.

Exercise: Follow along and experiment as I highlight the steps below.

• Create your table
  1. Insert the cursor where you want the table.
  2. Use the "Insert table" icon from the toolbar to select the number of columns and rows you want for your table.
• Merging and Splitting Cells: sometimes you want a cell to span a portion of your table.
  1. Click-hold and drag to select the cell(s) you would like to manipulate (only one cell if you are splitting, multiple cells if you are merging).
  2. Right click on the selected area and, using the "Table" pull-down menu, select either "Merge Cells" or "Split Cells..." as you desire.
• Selecting, adding, and removing columns and/or rows
  • Rows and/or columns are inserted where your cursor is currently blinking in the table.
  • You may right click where you'd like to insert rows/columns (that have the same characteristics as the "parent" row/column) and use the pop-up menu...
  • Or, to add a new row, when you are in the last cell of the last row of your table, simply strike the "Tab" key and Front Page will insert a row (below) just like the row your cursor is in.
  • To remove only the contents of selected rows/columns: use the Delete key.
  • To remove the selected rows/columns as well as their contents: use the Backspace key.
• Inserting tables within tables
  • Tables may be inserted in the cell where your cursor is currently blinking (just like inserting any other table).
  • This allows you even more possibilities for formatting your content; experiment with this.
• Table Properties
  • I'll go over the popup window, but experiment on your own.
    
  • Note: Many of the same attributes may be assigned to specific cells, in addition to the whole table.
• Cell Properties
  • I'll go over the popup window, but experiment on your own.
     

Design Note: Consider the difference between a table used for layout purposes and one used to triangulate data (like a phone book, or multiplication table); look at the benefits of defining "Header cells" for screen readers.

Please fill out the evaluation for this course.

[ Designing for the Web ] [ Front Page 2003 ] [ Dreamweaver 8 ]
[ More Advanced Front Page 2003 ] [ Introduction to Photoshop CS3 ]

This page http://www.csusm.edu/garrett/electures/WebPublishingWithFrontPageSp07/index.html
maintained by Garrett Collins (garrett@csusm.edu)
for IITS, User Support Services

Last updated Thursday, April 17, 2008 07:26:44 AM