Tutorial 4: Using Shared Borders and Themes (cont'd), pp. 225-256

Session 4.2, pp. 225-241.

• Applying a Theme to a Web Site, p. 225
• Customizing an Existing Theme, p. 230
• Creating a New Theme, p. 238

Session 4.3, pp. 242-255

• Creating a Photo Gallery in a Page, p. 242

p. 244, Step 5-8: Copy and paste these captions if you like:

• Using Drawings, AutoShapes, and WordArt in a Page, p. 247

p. 251, Step 3. Go to http://jamiconsulting.com/home.htm to see a nice example of Word Art. Click the Edit With Microsoft FrontPage button in the browser to see how they did this. This Web site is one of the winners in the FrontLook Hall of Fame V.

To enhance selected WordArt, use the tools on the WordArt toolbar as follows:

• Use the WordArt Gallery tool to change to a different style altogether.
• Use the WordArt Shape tool to change the shape.
• Use the Free Rotate tool to rotate the WordArt freely.
• Experiment with the other tools freely.

p. 253. To change WordArt and shapes to a gif or jpg file: WordArt and shapes generated in FP are VML graphic objects and can only be viewed properly in Internet Explorer 5.5 and later running on Windows. WordArt or drawings must be converted to a gif or jpg image file.

• If you create your WordArt in Publisher XP or later and save that file as a Web page, the _files folder for the saved page will have a gif version of the WordArt. Import that gif image into your web and insert it as desired. Or right-click the WordArt in Publisher, click Save as picture and import the file into your Web.
• In FrontPage, create your WordArt in design view, Print Screen, paste into Paint (Start, Programs, Accessories, Paint) or other graphics editor, crop and save the WordArt as a jpg or gif file (depending on complexity of colors).
• Create your WordArt image in Word. Make sure text wrapping is set to In Line With Text. Copy the WordArt from Word into FrontPage. When the Paste Options button appears, click Paste as an Image Tag. When you save your Web page, you can save the WordArt as a separate gif or jpg file. There is loss of quality.

p. 253. To center WordArt over a gif file: Open Word and create WordArt. Resize WordArt so it will fit into the cell that will hold it. Use no fill for background color behind the text or try and match it to the color or texture the web page will have. (Adobe Photoshop of Image Ready are great programs to use if available.) Press Print Screen. Open Adobe Photoshop and paste. Save FORMAT as a GIF. (You can use Photoshop to enhance and edit as well once pasted.) In the cell or table OPEN AS background Picture and your WordArt should center itself. Pay attention to the order of other objects/pics or gifs that were added prior and adjust as needed. (Keifer Vasquez' tip.)

• Review Assignments, pp. 255-256.

garden Web site solution: At the end of each tutorial, I will publish to the garden Web so that you will always have the correct solution for the next tutorial.  You will find it at http://ca112.lacitycollege.edu/ca112axx/garden in which xx will be replaced by your assigned publishing number. You will then be ready to open garden as it should be after the Review Assignment on p. 256 and continue working on it in Tutorial 5. As always, the best way to learn to use FrontPage is to practice; therefore, publish the garden Web site you have been working on in class to http://ca112.lacitycollege.edu/ca112axx/gardenPractice, open gardenPractice, and continue working on it as desired.

Finish T4WS, Case Problem 2, pp. 258-260.

Homework 

• Read through Tutorial 5 and complete the Quick Checks.

T4WS, 30 points: Follow all steps below rather than those in the book.

Step 1: Open the Grill Web site. Make sure you have made all the changes I indicated when I graded your Web site before beginning this case problem. Format the entire Web site with the Watermark theme applied as the default theme. Select the options to use vivid colors, active graphics, and a background theme.

Step 2: Change to Navigation view and create the navigation structure shown below. The Appetizers page, app.htm, Sandwiches page, sand.htm, Entrees page, entrees.htm, and Desserts page, desserts.htm do not exist. Create them in navigation view as new blank pages and assign their respective file names and titles. If you forgot the steps, look them up on pp. 212-215.

Step 3: In Folders view, right-click any blank area in the Contents pane, click New, Blank Page. Change the filename of the new page to specials.htm and title to Specials.

Step 4: Open the Specials page in design view, then create the content shown below. The pictures are found in the Tutorial.04\Case2 folder. Apply the Heading 1 style to "Today's Special" and "And may we suggest...". Match the WordArt for "Extra Hot Chili" as closely as you can in size but have fun with colors, fill, shapes, etc.

You may copy/paste the paragraph, captions, and descriptions below—remember to paste text only so that you don't pick up formatting. Save the Specials page and the pictures in the Images folder.

Step 5: In Navigation view, create a custom link bar named Specials that links to the home page and Menu page using a horizontal alignment and the Web site's theme for the style. Insert a blank line at the top of the Specials page, change the blank line's style to Normal, and insert the Specials custom link bar.

Step 6: Open the home page and add a bottom shared border to all pages in the Web site. Delete the comment text placeholder in the bottom shared border and move the horizontal line and the two lines at the bottom of the home page into the bottom shared border. If necessary, delete any blank paragraphs inn the bottom shard border, then save the home page.

Step 7: Add this sentence to the end of the second paragraph of text on the home page: Be sure to check out our Specials page!. Change the word "Specials" into a hyperlink that opens specials.htm.

Step 8: Save all pages, preview the site in the browser, and test all links.

Here's a look at the finished pages:

index.htm	jobs.htm	specials.htm

Step 9: Save your Web and press F5 to refresh the Folder List view before beginning this step to insure that your folders and files are accurately displayed. Paste a screen shot of your folder list and navigation view as shown here into homework.htm. Your Web should be organized and files named exactly as shown here. Change your navigation view to Portrait so your custom link bar will be displayed.

Step 10: When you are finished with all steps for grill, open grill in Internet Explorer. Click inside the Address box and press Ctrl-C to copy the URL to grill. Open your e-mail client and paste the URL into the body of the message. You should see a hyperlink to your Web site appear. The e-mail subject line should be Your Name, last 4 digits of your student ID, T4WS.

• Your URL should be http://ca112.lacitycollege.edu/ca112axx/grill/ with "xx" changed to your directory number.

Step 11: Next, open homework.htm in Internet Explorer by clicking the Preview button. Click inside the Address box and press Ctrl-C to copy the URL to homework.htm. Paste the URL into the body of the message on a new line below the grill URL. You should see a hyperlink to homework.htm page appear.

• Your URL should be http://ca112.lacitycollege.edu/ca112axx/grill/homework.htm  with "xx" changed to your directory number.

When you received your grade for T3WS, you should have saved that e-mail message. Open it now and use it as a checklist to be sure that you have made all corrections on the list. I will DEDUCT POINTS AGAIN for any errors you leave uncorrected from the previous tutorial. I will DEDUCT MORE POINTS if you do not paste in my e-mail message showing your previous your grade! When I am forced to look up your grade for you, my valuable time is wasted because you haven't done your job—please cooperate on this. You'll be glad you did.

Extra Credit 

Extra credit assignments are due no later than Sunday evening of the current week.