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 (but you want to cut down on the strangeness), save Word files 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 (this works 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 extra re-formatting 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.
Note: There is also the cool "Paste Options" icon that appears after every block of pasted content.  Simply left click on this icon to see your options for the content you just pasted in.

Exercise: Select some text from an existing web page (from 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).

Design Note: Generally, you see two types of images on the web: GIFs and JPEGs (or JPGs).  Generally, the .gif format is used for line-art, black and white scans, etc. and the .jpeg/.jpg format is used for photos (or art that has fine gradations of color).  Using the correct image type affects file-size and download time.

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.

Design Note: It is a good idea to thumbnail larger images for several reasons: To save in download time, to save space on your pages, and to give the browser the freedom to choose to view larger images if they want.  Of course all this goes out the window when you're designing artistic sites.

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).  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.

(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 "Formatting" tab, at the top of the "Page Properties" popup window that appears, to set a background image and/or customize your page colors.
  • Note: Background images tile to cover the whole viewable window; so be sure they "knit" well.
  • 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: 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.
  • Design Note: Color should be used in place of images wherever possible.  Background color is rendered by the browser and takes almost no extra time to display, while images, depending on their size, take longer to download.  This affects the time the browser takes to display your pages.  See http://www.csusm.edu/iits/ as an example.
• 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.
     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 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
another color resource I like a lot is:
http://www.mickwood.com/recommend/images/WebsafeColourGuide.swf
(click on the different configurations/colors, at the right to view close-ups with Hexadecimal values)

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, rather than 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.

[ 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_f05/fp2.html
maintained by Garrett Collins (garrett@csusm.edu)
for Academic Technology Services, Web Application Support team

Last updated Friday, November 17, 2006 12:51:37 PM