FrontPage Tasks

Home > FrontPage Tasks
	Web Development with Microsoft FrontPage

Things we can do in FrontPage:	Add and format text
	Add Images
	Add Hyperlinks
	Use tables to control placement
	Customize Background color
	Convert a Word document and an Excel worksheet to Web format
	Create a new file from scratch
	Save a file
	Give a file a title
	Copy a file
	Delete a file

Add and format text [TOP]
- Open the page, "classcontent.htm" in the protected folder of your course Web. Type the course title and any other information that could be useful to convey text-based course content to your students. Try copying and pasting text from another source (e.g., a Word file that you have open on your computer's Desktop).
- 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 page with the name "classcontent.htm".
Images [TOP]

Modern Web browsers and Internet services 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 to the "classcontent" page.

Part I: Importing a picture to your FP Web.
- Click to highlight the folder in your FP Web's Folder List that will receive the image file.
- Make sure you have a picture (.gif, .jpg, .bmp) file available on your computer. Emergency Instructions
- Click "Import ..." in FP's File menu.
- Click on "Add File" and browse until you find the picture, then select it. The file name will appear in the Import list. Click "OK".
- Click the location in "classcontent.htm" which will hold your picture.
- From the Insert menu, select “Picture”, then “From File …” .
- Click on the picture's name, then click "Insert".
- Now save your file.
- 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 [TOP]

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 page:
- Type "Southeast Homepage" somewhere on your 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 page in the usual way. Finally, open a browser, and browse to the "Class Content" 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 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 "content2.htm" and save it in the usual way in your Web's protected folder. 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. However, adding some of your course content is a nice idea!
- In your "classcontent.htm" page, type "More content" 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 "content2.htm" when you locate it. Do you see how the Address is only the filename, "content2.htm"?
- Save your "classcontent.htm" page, then view the page in a browser. Be sure to click on the link "More content" to see if the relative link works.
Relative linking will save you many hours of work if you intend to reuse your online Website: 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.

Bread Crumb Trails: If your site is mostly sequential, use hyperlink lists to help your students navigate your Web pages. Simply line up the links that would take the student back to the course's homepage, step by step.

1. Consider the course organizations shown below.

(A) (B)

Select the best statement about the use of bread crumb trails in the two courses.

A. Bread crumb trails should never be used in course Websites because they waste space on the page that could be used to show course content.
B. Bread crumb trails are best suited to course organization (A).
C. Bread crumb trials should be left to Hansel & Gretel.
D. Bread crumb trails are best suited to course organization (B).

2. Locate the bread crumb trail in the "Web Development with Microsoft FrontPage" page.

3. Question 1 contained a link to an absolute link to an external Website.

A. True
B. False
Use tables to control placement [TOP]

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-csm.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 "classcontent.htm" 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.

What can we do next?

Customize Background color [TOP]

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.
Demonstrate conversion of a Word document and an Excel worksheet to Web format [TOP]
- 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 file(s) that you brought to the session.

Manage Web files

Creating a new file from scratch [TOP]
- 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 [TOP]
- Select File > Save.
- Give your file a name, then click "Save".
File names and titles: they are not the same [TOP]
- Right-click on "content2.htm" file in the Folder List and select "Rename".
- Rename your file "content002.htm".
- Right-click on your file in the Folder List and select "Properties".
- Give your file a meaningful title.
Copying [TOP]
- 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 [TOP]
- Right-click on your copied file in the Folder List and select "Delete".


(A)	(B)