LIS 523 - Lab

This lab will give you some hands-on experience with using 2.2 to create Web pages. Instructions will emphasize using the pull-down menu items, which are easiest for a beginner to find; but note that the several toolbars and keyboard shortcuts often provide alternatives.

Simple Web Page Creation

  1. Run Writer by selecting it from the " 2.2" menu in the main Windows program menu.
  2. Create a new HTML document by selecting "File" - "New" - "HTML Document" from the Writer menu.
  3. Select "Properties" from the "File" menu. In the "Properties" dialog, at the "Description" tab, change the title to "Test of" and add one or more keywords and comments (do not bother with the "subject" field, which is translated to the "classification" in 2.2); note the "Internet" tab, which allows you to set refreshes and redirects, but make no changes; click on the "OK" button.
  4. Save the file with a suitable name (for example, testoof.htm).
  5. View the HTML code by clicking "HTML Source" in the "View" menu. Note the HTML code that has been inserted already, especially the title and the various meta tags. You will also note that, each time you switch between views, Writer loses its place and resets the insertion point to somewhere else, which you have to correct. Return to normal view by clicking "HTML - Source" again.
  6. Set the format of the page by clicking on "Page" in the "Format" menu. In the "Page Style" dialog, at the "Background" tab, click on a color to set the background color; note that the other tabs are not useful for HTML files; click on the "OK" button.
  7. To enter a heading, open up the drop-down "Apply Style" list (this usually appears to the left and just above the main editing area and initially displays "Text body"), click on "Heading 1", type the heading, and press the Enter key.
  8. To enter some text, just type it in. Pressing the Enter key will start a new paragraph.
  9. To insert a simple line break, first switch to HTML source view and move to the appropriate place in the code (say, just before the </P> at the end of a paragraph). Then type in the code <br>. Switch back to normal view to see the result.
  10. After typing a paragraph, to change the paragraph style, position the insertion point in the paragraph and click on "Paragraph" in the "Format" menu. In the "Paragraph" dialog, at the "Indents & Spacing" tab, set the line spacing and indentation to something other than the defaults; at the "Alignment" tab, set the alignment to "Center"; note that some other settings, such as for background and borders, also work; click on the "OK" button.
  11. To create a list, click on "Bullets and Numbering" in the "Format" menu. In the "Bullets and Numbering" dialog, at the "Numbering type" tab, click on the style of numbering that you prefer; note that choosing a style of bullets has no actual effect on the HTML code (so the bullets all look the same in a browser); click on the "OK" button and type some lines of text to see the result.
  12. To specify graphic bullets, position the insertion point in the list, call up the "Bullets and Numbering" dialog again, go to the "Graphics" tab, click on a graphic style, and then click on the "OK" button. If you wish, experiment also with what you can do at the "Options" tab.
  13. To mark the end of a list, call up the the "Bullets and Numbering" dialog and click on the "Remove" button.
  14. To change the format of text passages, select the text (or, for formatting a single word, just click on the word) and click on "Character" in the "Format" menu. In the "Character" dialog, at the "Background" tab, click on a background color for the text; note that the "Rotation" options at the "Position" tab have no effect on the HTML code, though other options do; at the "Font Effects" tab, try changing the font color.
  15. To create a hyperlink, select the passage from which you want to link and click on "Character" in the "Format" menu. In the "Character" dialog, at the "Hyperlink" tab, type in the URL. (Ignore the "Events" button, which is only for macros that run in OpenOffice, not for scripted event handlers in HTML.) Click on the "OK" button.
  16. Save your file and close its document window.

Exporting from a Spreadsheet

  1. Create a new spreadsheet by selecting "Spreadsheet" from the "New" submenu of the "File" menu in Writer.
  2. In row 1, enter the following in columns A-E: Author, Year, Title, Publisher, Price (press the Tab key to move between cells).
  3. In the rows beneath, enter bibliographic details for at least 5 sample books.
  4. To make the prices display as currency, select all the prices (excluding the heading Price in row 1) click on "Cells" in the "Format" menu; in the "Format Cells" dialog, at the "Numbers" tab, click on "Currency"; click on "OK".
  5. To put borders around the cells, select all the cells that you have filled and call up the "Format Cells" dialog again; at the "Borders" tab, click on the button for "Set Outer Border and All Inner Lines" under "Line arrangement" at the left, click on the 1.00-point line, and select a color from the "Color" drop-down list; click on "OK".
  6. To change the appearance of the header row 1, select row 1 by clicking on the gray "1" to its left, and call up the "Format Cells" dialog; at the "Font" tab, select another font from the list at left, click on "Bold" under "Typeface"; at the "Background" tab, select a suitable background color; then click on "OK".
  7. Select the cell under the last price, click on the "Sum" ("Σ") button (to the left of the input line), and press the Enter key.
  8. To export the list to HTML, select "Save As" from the "File" menu; in the "Save As" dialog, select "HTML Document" from the drop-down list, type in a filename with the extension .htm or .html, and click on "OK". If you see a dialog warning about loss of formatting, just click on "Yes".
  9. Run a browser, and note what features have been preserved (Opera seems to lose the outer border of the table).
You should now have two HTML files, both created by Make sure that the first includes (1) keywords and description (which you entered as "comments") in meta tags, (2) a background color, (3) a level-1 heading, (4) a line break, (5) a center-aligned paragraph, (6) an unordered list with list items simulated by paragraphs containing inline images for the bullets, (7) a text with a different font color and background color, and (8) a hyperlink with a working URL. Make sure that the second file contains (1) a table of at least 5 bibliographic entries with an appropriate header row, (2) currency displayed as currency, (3) a border around all cells in the table, (4) the header row in bold with a distinctive background color, (5) the sum of the prices at the bottom right. Then submit your final HTML files by e-mail.

Last updated April 24, 2007.
This page maintained by Prof. Tim Craven
E-mail (text/plain only):
Faculty of Information and Media Studies
University of Western Ontario,
London, Ontario
Canada, N6A 5B7