Announcements

Lesson Plan 

Demonstration— Navigation Web 

• Navigation Web is a sample Web I created to illustrate the concepts of Web creation, navigation structure, shared borders, link bars, page banners, and themes. I will explain each page in this Web and open this Web in FrontPage as I explain the concepts. 
• I created Navigation Practice following the steps below. I will open Navigation Practice in FrontPage next and explain each page. Then I will create as a new 1-page Web named Navigation following the steps below. You can try to create your Navigation Web with me as I go, or wait until the demonstration is over, and create it on your own. Be fearless with the Navigation Web site—experiment, question, and try out any ideas you might have.

1. Create a new 1-page Web named Navigation. Open the Navigation home page and apply a theme of your choice. Insert a 1-row, 640-pixel, borderless, centered table with a background fill color that coordinates with the theme so you can distinguish the body of the page from the top and bottom shared borders. (Click here for steps if you can't see the bottom of the Insert Table dialog box.) Type a sentence centered in the table to identify the page—for example, This is the body of the home page. Add a few blank lines below it to open the table up slightly, and save the page.
2. Create five pages named Child 1-1.htm, Child 1-2.htm, Child 1-3.htm, Child 2-1.htm, Orphan 2-2.htm. (Orphan 2-2.htm will be a unique page in the Web site that will use a different theme, different shared borders, etc.) To create these pages quickly, I suggest that you first create and save the home page, then do a Save As and change the filename and content of the body to create the additional five new pages. Do not change page titles at this time.
3. Drag the five new pages into place in Navigation View to create a navigational structure. Change the navigation button names for all pages (including the home page) in Navigation View by gently clicking the page icons and editing the name. Check the page titles to be sure they match the button names. Title the home page Navigation.
4. Open the home page and add a top shared border to include navigation buttons and a bottom shared border to all pages (Format, Shared Borders, All pages; check Top, Include navigation buttons; check Bottom; OK).
5. Edit the link bar properties to set navigation to Child pages under home and Home page, then click the Style tab, and select a style and orientation for the buttons.
6. In the top shared border, insert a 1-cell, 640-pixel centered table. Drag and drop the banner and link bar into the table and center the banner and link bar. Insert a horizontal line under the link bar in the top shared border to help you see where the top shared border ends and the body of the page begins.
7. In the bottom shared border, delete the comment and insert a 2-row, 640-pixel, borderless, centered table. Insert a horizontal line in the first row to help you see where the body of the page ends and the bottom shared border begins.  Insert a date and time field in the next row to show the day of the week and the date. Preview the page and notice that you need to add some white space above the horizontal line. Do this by adding an additional blank row above the horizontal line with a hard space (Ctrl+Shift+Space) in the blank row.
8. Go to each page and see how the shared borders are working. When you get to Child 1-1, you will notice that you don't have navigation to Child 2-1 or Orphan 2-2. To fix this, insert a centered link bar at the top of the body of the page just below the top shared border (not inside the top shared border) with navigation set to Child level. Click the Style tab, and select a style and orientation for the buttons that is different from the link bar above it. Try something from the bottom of the Choose a style list so that a visitor can see that this is a less important page in the Web hierarchy. Simpler styles are the best here.
   
   
   
9. When you go to Child 2-1 and Orphan 2-2, you will notice that shared borders are used on this page so that you can navigate to child level 1 and the home page. However, you still need navigation across to the second child level. Therefore, add another Link bar just below the top shared border (not inside the top shared border) at the top of the page centered outside the table structure with navigation set to Same level, then click the Style tab, and select a style and orientation for the buttons that is different from the link bar above it.
10. Open Orphan 2-2 and format this page using a different theme being sure to change the theme for this page only. Remove the top shared border and keep the bottom one for this page only. Insert a picture page banner in the body just above this table. Add a link bar in the body just above the table. Set the link bar properties to Child pages under home, Home page. Add a second link bar in the body just below the first one. Set it to Same level.

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

p. 230. To learn about customized themes, type "customize theme" in your help box, and search Microsoft online, FrontPage, at http://office.microsoft.com/en-us/FX010858021033.aspx.
  

p. 230. To use a 3rd party theme: This third party software has some beautiful Web sites created with FrontPage and their own software. Take a look a the FrontLook Hall of Fame. AUSCOMP WORLDWIDE 1st Theme Factory for MS FrontPage has a gallery of professionally designed themes. Series 1 (10 Themes: Africa, Highway, Ice, Klingon, Maritime, Money, Music, Soccer, Starship, Wine), Sports (10 Themes: Baseball, Formula 1, Golf, NBA (National Basketball League), NFL (National Football League), NHL (National Hockey League), Riding (Horse), Scuba (Snorkeling), Soccer 2, Tennis), and Entertainment (5 Themes: Comic, Horror, Melody, Movies & Film, People). Also look at http://www.frontpageworld.com/frontpagetools/webtemplates.htm. created with FrontPage and their own software.

• 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. See the Spring Break page to see an example of WordArt combined with a table background filled with a picture and see Glaciers below. In the Fill Effects dialog box, click the Picture tab and browse to the desired picture.

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.

Homework 

T4WS, 30 points: Follow all steps below .

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.

T4PT, up to 10 points: 

When you are satisfied with the score, paste a print screen into homework.htm that shows your name and the score. Paste the print screen at the top of the page so your most recent test is always shown first. When you are finished, 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. Open your e-mail client and paste the URL into the body of the message. You should see a hyperlink to homework.htm appear. The e-mail subject line should be Your Name, last 4 digits of your student ID, T4PT.

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

• Read through Tutorial 5 and complete the Quick Checks.

Extra Credit 

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