Web Publishing (with Front Page) II

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.

• Converting Microsoft Word to HTML
• Images
• Backgrounds
• Tables

In Web Publishing I you learned how to type text directly into your web page (much like you do in any Word document); you also learned to cut & paste text as you create new documents for the web. 

But many of you have already created files (in Word format) that you want to make available via the web.

When using copy & paste (especially from any Microsoft application) you may be plagued with formatting/translation issues (your pasted text may look/behave strange/ly).  So, if you want to keep the formatting of an existing Word document, save the Word file as type "Rich Text Format (RTF)" and then copy and paste from the rich text document into your web page.

If you still have problems with copied & pasted text, you can always copy text from any source and use the Front Page menu: Edit > Paste Special... to paste your copied text as "Normal Paragraphs."  If you choose this option, as I do 95% of the time, you will have to go back through your pasted text to restore all formatting; I find that this is often worth having my text behave as I expect it to.

This is not to say that I never copy & paste directly from a Word document.  It's always the easiest route.  And if I'm not going to be really working with the text a lot (as in the case of many fliers); I take this easy route.

Exercise: Select some text from an existing web page (out on the web) and practice copy & pasting "Normal Paragraphs" into one of your web pages.  Note how the formatting is lost.

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). 
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 where 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 (from 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 "Okay"
   • Note the default "Look in:" location and remember where you left your file(s).
   • Also note that ADA compliance requires we add alternative text descriptors to "show" images to web users employing screen readers because they have trouble seeing the image itself.

To add alternative 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).

Exercise: Insert an image (from your web) into a web page.  Be sure to add ALT text.

(and the role of color)

• 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 "Background" tab at the top of the "Page Properties" popup window that appears to set a background image and customize your page colors.
  • Note: Background and text colors should have high contrast (see royal blue and black for a bad example, black and light yellow for a good example).
  • Note: You may use an existing page as a color template (this saves a lot of time if you set your index as the template... then if you change the color on that one page all your pages follow suit).
  • Note: Some options, like hyperlink rollover effects only work in certain web browsers.  Always test your pages in a variety of browsers (and versions) and operating systems to see how they look.
• 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 "background" tab at the top of the "Page Properties" popup window, as above.
     Note: If you change the color of your links, some people will be confused (they assume all links are blue and underlined).
• 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 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
another color resource I like a lot is:
http://www.mickwood.com/free/WebsafeColourGuide.swf

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 another page to be an image.

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

• 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. 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 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, rather than the whole table.
• Cell Properties
  • I'll go over the popup window, but experiment on your own.
    

Please fill out the evaluation for this course.

[ Web Publishing I Notes ] [ Web Publishing II Notes ] [ Web Publishing III Notes ]
[ Using the Campus Template and/or META tags ]

This page http://www.csusm.edu/garrett/electures/fp_classes_f02/fp2.html
maintained by Garrett Collins (garrett@csusm.edu)
for Academic Computing Services, Web Application Support team

Last updated Thursday, April 08, 2004 04:10:05 PM