Session Schedule

View a List of ideas already submitted!

• Starting FP: 1st time, every time
  • Find FP on your computer and start it.
• FP views
  • Explore the various views, ending up with folder view as your “standard” working view: "When a Web is open, this view lets you organize its files and folders."
• What is a Web?
  • Log on to your personal CSTL Web.
  • Explore the basics of Web folder structure.
  • Look for an index.htm page.

• Creating a new file from scratch
  • Select File > New > Page or Web... > Blank Page or click on .
  • Type 2-3 lines of text: your name, course title, weather forecast, etc.
• Saving
  • Select File > Save.
  • Give your file a name, then click "Save".
• File names and titles: they are not the same
  • Right-click on your file in the Folder List and select "Rename".
  • Rename your file "Jan13firstfile".
  • Right-click on your file in the Folder List and select "Properties".
  • Give your file a title that includes your name.
• Copying
  • Click on your file in the Folder List.
  • Select Edit > Copy or click on   then,
  • Select Edit > Paste or click on . You can rename the file if you wish.
• Deleting
  • Right-click on your copied file in the Folder List and select "Delete".

- Break -

Your goal here is to create a personal splash page, from which students, colleagues, and the public can reach you. Your splash page will probably be similar to, but should not be limited by, the page at http://cstl-cst.semo.edu/rodgers/

• Add and format text

  • Open a new page (your "splash" page) and type your name, contact information, and any other information that others who interact with you professionally ought to know.

  • Use the Formatting toolbar or Format menu to adjust your font style, size, color, to suit your wishes. Note that the controls are similar (though not identical) to those found in Windows-based word processors, such as Microsoft Word.

  • Save your splash page with the name "Jan13splash.htm".
     

• Introduction to tables: controlling placement
  
  HTML offers far less control than word processors do over the placement of information on a page or screen. This is NOT a shortcoming of HTML. Rather, it is a fundamental feature of HTML that allows content to be rendered appropriately by a much larger number of computer systems. When you choose HTML over, say, Microsoft Word, you are really selecting maximum access for the information that you wish to disseminate. However, we often desire some control over placement of text and images, even in HTML documents. Fortunately, TABLES provide a measure of control.
   
  • Begin by opening a new page in FP.
  • Now open a browser and point it to http://cstl-cst.semo.edu/rodgers/.
  • In the browser, select Edit > Select All or type CTRL-A.
  • Select Edit > Copy or click on   then,
  • Return to FP and Select Edit > Paste or click on .
  • Take a careful look at the page. Do you see dotted lines that outline a table?
  • Count the number of tables present in the copied page. How many did you find?
     
  • Return to your splash page and click below all of your text to position the cursor at the bottom of the page.
  • Select Table > Insert > Table.
  • Set the number of rows, number of columns, and other properties and click OK.
  • Use Cut and Paste to move your text into the appropriate table cells. If necessary, return to Table in the menu bar and add or delete rows and/or columns, adjust the cell padding and cell spacing, position the content within a cell, merge cells, or split cells.

  Tables offer considerable control over the placement of content in a Web page. However, you must expect your pages to appear differently when viewed using different browsers, or on computers with differing screen size and resolution. Remember: HTML exists to get your content into these different cyber-environments! Your best bet is to experiment, and, when in doubt, opt for a simple display instead of a complex one.    
   

• Images
  
  Modern Web browsers and Internet service do a fairly good job of presenting images to enhance text content. Images can be digitized photographs, drawings, video, or diagrams. We'll explore addition of a picture. We'll put the image on the splash page, but you may want to replace the image with your own at a later date.
   
  • Download the Lysergis Cup. Place the file in "My Documents".
  • Click inside the table cell which will hold your picture.
  • From the Insert menu, select “Picture”, then “From File …” .
  • Click on "lysergis.jpg", then click "Insert".
  • Now save your file. Note that the "Save Embedded Files" box opens. Click on "Change Folder" and select the "images" folder to put the image into the folder that serves as your Web's image repository.
  • Optional: Right-click on the picture as it appears on your page in FP. Select "Picture Properties..." to resize the picture, add a border, right or left justify, etc.
     
• Hyperlinks
  
  THE single most important feature of the World Wide Web! Indeed, the name "Web" refers to the ability to link content that physically resides in different locations. When we add a hyperlink to a Web page, we are essentially adding the content's Internet address. Try the following on your splash page:
   
  • Type "Southeast Homepage" somewhere on your splash page.
  • Select all of the text, "Southeast Homepage", then select Insert > Hyperlink... or click on . Then,
  • Type "http://www.semo.edu" in the "Address:" box. Then,
  • Save your splash page in the usual way. Finally, open a browser, and enter the address of your splash page. Hint: you can quickly fetch the address by right-clicking on the file in Folder List, then selecting "Copy". Note that the operation also lets you "Preview in Browser"; you might give that a try as an alternative.
  • In your browser, you will see your splash page. Click on the "Southeast Homepage" to see what happens. Did events unfold as you expected?

  There are actually two kinds of hyperlinks: absolute and relative. An absolute link consists of an entire address, from the "http" all the way to the ending two- or three-letter extension. The link, http://www.manateecam.com/manateecam.html is an example of an absolute link. Absolute links are used when linking to content that you don't maintain, i.e., content on someone else's Web.
  
  A relative link consists ONLY of the file name, and perhaps one or more folder names. For example, practice_page.htm is a genuine hyperlink, despite being nothing more than a single filename. Why are there two kinds of hyperlinks? To save you time and effort! Relative linking allows you to move entire folders (or even an entire Web) from one location to another, while preserving the relationship between the linked files. If, say, I moved the Web containing this page to another server, the link to practice_page.htm would be preserved. This capability is an important expression of reusability in the World Wide Web. Now set up a relative link:
   

  • Create a file called "practicefile.htm" and save it in the usual way. The file's contents can be anything, just make sure there is enough to identify the file when you browse it later in the exercise.
  • In your splash page, type "practice file" at the bottom of the page. Then, select the text.
  • Select Insert > Hyperlink... or click on . Then,
  • Scroll through the list of files and folders in the "Insert Hyperlink" box, and click on "practicefile.htm" when you locate it. Do you see how the Address is only the filename, "practicefile.htm"?
  • Save your splash page, then view the page in a browser. Be sure to click on the link "practice file" to see if the relative link works.

  Relative linking will save you many hours of work if you teach an online course: Once the course is set up as a collection of files and folders, you can move the entire course to a new semester's Web without destroying the relationships between all the files.
   

• Background color

  You can personalize your page or signal changes in content with a background color. You'll need to be careful, though: poorly chosen background colors (low contrast, annoying combinations, etc.) can get in the way of effective communication. Here's how to select a background color:
   

  • Right-click on the page as it appears in FP. Select "Page Properties...".
  • Click the "Background" tab.
  • At "Colors   Background:" you can select a suitable color from the drop-down menu. Note that you can also "pick up" background information from another page. This can be useful if you have used a custom color on another page that you want to employ on the current page.

- Stretch Break -

• Demonstrate conversion of a Word document and an Excel worksheet to Web format
  • Create a new Web page and give it a name.
  • Click on the link Word document and open the file.
  • Using Select All (CTRL-A), copy all of the chemistry exercises in the file.
  • Return to FP and Paste the exercises into your new file.
  • Save the file and view it in a browser. Did the formatting survive?

  Copying and pasting content from Word to FP has improved tremendously over the last few years. However, the HTML produced upon conversion from Word is extremely verbose - perhaps undesirably so. To get simple, clean HTML, you may have to delete the Word formatting as you paste into FP. Paste Special lets you do this:
   

  • Return to the Word file and copy all of the chemistry exercises in the file.
  • Back in FP Select Edit > Paste Special > Normal paragraphs to paste ONLY the text from the Word file.
  • Save the file and view it in a browser. How does the text look now?

  Excel worksheets can also be pasted into HTML files. The data appear in Table format upon transfer:
   

  • Click on the link Excel worksheet and open the file.
  • Click and drag to select cells A1 through C9, then copy the cells.
  • Return to FP and Paste the exercises into your new file.
  • Save the file and view it in a browser. Did the formatting survive?

  If time and interest allow, practice your own conversions using the file(s) that you brought to the session.

• Updating pages
• Links absolute vs relative links
• CSTL Web archiving policies: What to expect