Week 3, September 18 & 20

   Announcements

  • I need a functioning e-mail address from these students: (just send me an e-mail and I'll automatically have your correct address.)

  • I need a Questionnaire from these students:
    __

  • The following students need to add:

  • The following students need a seat assignment:

  • We will complete the VTEA survey together today at https://www.laccd.edu/workforce_dev/vtea/survey.asp

  1. A seating chart was prepared last week. You must sit at the same location as last week. See me if you wish a new seat assignment.
  2. Once you submit an assignment, that is indeed your final grade for that job. It is your responsibility to save your assignments and your e-mail messages on your own computer as a backup. I usually delete them from mine as soon as I grade them.
  3. Always submit your e-mail with the subject line as follows: Your Name, the last 4 numbers of your student ID, and Project ID. For example, Subject: Your Name, 5555, T1PT.

Lesson Plan 

 
Demonstration—Sample Practice Test .

You will take a practice test for Tutorial 1 on the Internet as part of your homework assignment this week. I have created a 2-question Sample Practice Test so that you can see how the process works. Click here to launch the Sample Practice Test or find the shortcut in Favorites in Internet Explorer. Type your name in the Name box, answer each question, then click Check Your Work or Reset to clear all answers. 

When your test is scored and you are satisfied with the score, resize the browser window to display only your name and the score. Press Alt+Print Screen to copy the active window only. (Note: If you are not satisfied with your score, click the Retake Test button and try it again.) Create a new page (Ctrl+N) in grill named homework.htm and paste the screen shot. Save the page and name the pasted image T1PT.gif (or T2PT.gif if it is the second practice test, etc.) and save it in your Images folder. Send me the URL to this page in an e-mail when you submit your homework. For example, my URL with test results would be http://ca112.lacitycollege.edu/ca112a00/grill/homework.htm

Demonstration—backing up

To publish grill from http://ca112.lacitycollege.edu/ca112axx/grill (server) to your hard drive, disk, or USB drive as a backup, do this:

  1. Create a new folder named grill on your hard drive, disk, etc.
  2. With the grill Web site open on the server, click File, Publish Site; in the Remote Web site location box, type the drive letter followed by a backslash (not a forward slash) and grill; click OK.

    Note: In this example, my USB drive is my G drive.

  1. FrontPage will prompt you that a Web site does not exist at that location. Answer Yes to allow FrontPage to create a Web site at that location.

  2. If you get a Publishing FrontPage Components window, click Ignore and Continue. Click Publish Web site and you're done.

Tutorial 2, Working with Graphics and Hyperlinks, pp. 69-124

Session 2.1, pp. 70-93

  • Changing the Background Color of a Web Page, p. 70

  • Inserting a Background Picture, p. 72

p. 75. To fade a background picture: click Insert Picture From File button; browse to desired picture and select it; from the Pictures toolbar, click the Color button, Washout; resave the picture then select it and delete it from the Web page. Then follow the normal steps to insert the background picture using this file (Format, Background, Picture, etc.).

p. 75. To add a fixed custom background picture: click Insert Picture From File button; browse to desired picture and select it; from the Pictures toolbar, click the Color button, Washout; right-click the picture and choose Picture Properties; under Size, check Specify size and check Keep aspect ratio; change the Width to 1600 pixels and click OK—this will make the picture wide enough for most monitors and resolutions—experiment with other widths (try 1200) if 1600 distorts picture too much; click the Resample button on the Pictures toolbar; save the picture then select the picture and delete it from the Web page. Then follow the normal steps to insert the background picture (Format, Background, Picture, etc.) using this file and check Make it a watermark to keep the picture fixed. Click here for an example of a Final Web site in which the home page background uses a fixed background.

p. 75. To stop a background picture from tiling: The options that are immediately available in the Page Properties dialog box will tile a background image. That means that there will be many versions of the image repeated throughout the page. If you don't want this effect, you'll need to add a style to the <body> tag: click Format, Style, double-click body. Then click Format button, Border, Shading tab. At this point, you can add the path to the picture, and select the no-repeat option. That will keep the image from repeating, or tiling, across the page.

p. 75. To  Paste Drawing Objects, WordArt, or graphics as separate image files, remember that if you copy and paste an image such as clip art, WordArt, or a drawing object from Word to FrontPage, you must take special steps in Word first to insure that the pasted image comes in as a separate file for embedding. First create the image in Word with the Layout position In line with text. To do this in Word, select the image, right-click it, and click Format Picture, Layout tab, Wrapping style, In line with text, OK. Next, copy the in line image, and then paste it into FrontPage as an Image Tag using the Paste Options smart tag list button. In this way, the will be saved as a separate gif file.

Each Paste Option is explained below.

Keep Source Formatting. Use this option to preserve the positioning attributes of the drawing object in the source document. For example, If you copy a drawing object AutoShape from Word to FrontPage, selecting Keep Source Formatting ensures that the position In line with text is preserved. The Layout position in Word must be In line with text or else the anchor symbol will be pasted and not the AutoShape object.
Paste as an Image Tag. Use this option to convert a pasted Microsoft Office drawing object into a GIF file when the page is saved. For example, if you copy a drawing object AutoShape from a Word to FrontPage, you are prompted to save the newly created GIF file when you save the Web page. I recommend you paste objects as image tags for more control since they are saved as a separate image file.
Microsoft Office Drawing Object. Use this option to paste a Microsoft Office drawing object without having the picture saved as a separate image file.

  • Using a Marquee, p. 77

p. 80. To add internal padding to a marquee: Double-click the marquee; click Style; in the Modify Style dialog box, Format, Border, Borders tab, Padding—Top, 3 (or desired number), Padding—Bottom, 3 (or desired number), OK, OK, OK.

p. 80. To create an unusual marquee: Visit Marquee Tag at http://html.mcwebber.net/marquee.html. Johnny Joya contributed this tip and used it on his Final Web site, The Roof/Urban Life. To see the code, click the desired marquee, switch to Code view. Copy this code into your page following the steps in the next tip and then edit the marquee to point to your desired image.

There are 571W x 454H pixels in image below.

 
 
Storm
Below, when you can change the height to 210 and width to match the actual image size, the image scrolls once. Higher than 210 displays the image scrolling down twice.
571W X 210H below.

p. 80. To insert HTLM code: Place the insertion point where you want to insert HTML code. Press CTRL+Q and click Insert HTML. In the Quick Tag Editor, type or copy the HTML that you want. Caution: If you copy HTML code from typed lines on a Web page, always paste in HTML code to Notepad (Start, Programs Accessories, Notepad) first then copy and paste from Notepad in the Quick Tag Editor or Code view to be sure it is inserted without a problem. Sometimes, things like quotation marks can be converted to code instead of being inserted as quotations marks. To edit the tag, you can also click inside a line or element, and click the list arrow next to the button on tag in the Quick Tag Selector row, and click Edit Tag or Insert HTML.

Microsoft Office OnlineClick here to view Microsoft training, "Under the hood: Effortless ways to work with code" (40-50 minutes—to speed it up, skip the Practice and Test yourself links):

  • "Use Split view and Code view"

  • "Make code easier to work with"

  • "Work with Code in Design View."

Inserting a Picture into a Web Page, p. 81

Office demoClick here to view a Microsoft Office Online Demo: "How to find the perfect clip right away."

Office demoClick here to view a Microsoft Office Online Demo: "Choose it, then use it: Copy and paste clip art into your document."

Demonstration: Picture Properties

I will double-click the picture on the left, copy it into the first paragraph, experiment with wrapping styles and layout and delete it from the first paragraph.

p. 90. To change wrapping style, alignment, horizontal spacing, border thickness, and vertical spacing of a picture: double-click the picture to open the Picture Properties window.  On the Appearance tab, under Wrapping style, click the wrapping style that you want. Experiment with Alignment, Border thickness, Horizontal and Vertical spacing.

  • Working with Pictures in Different Formats, p. 87

  • Changing a Color in a Picture to Transparent, p. 89

  • Inserting a Horizontal Line, p. 90

p. 92. To add extra vertical space above a horizontal line: Insert the horizontal line inside a 1-column, 2-row table in Row 2. Insert a hard space (Ctrl+Shift+Space) inside the blank row above the line.

Session 2.2, pp. 93-107

  • Importing a Web Page into a Web Site, p. 93

p. 95, Step 1. To navigate between open Web pages, press Ctrl-Tab.

 

  • Linking to Other Web Pages, p. 95

  • Creating a Hyperlink Using Drag and Drop, p. 97

  • Creating a Hyperlink to an E-mail Address, p. 99

Office demoClick here to view a Microsoft Office Training Session: "Find and replace text across multiple Web pages."

p. 101. To use Find and Replace to change text and HTML for mailto hyperlinks or URLs: if your e-mail address changes and you have mailto hyperlinks, you must change both the text on the page and the HTML code behind it. Try these steps and you'll see what I mean:

  • Type your e-mail address and press the space bar to create a mailto hyperlik:
    anyemailadress@anydomain.com 
  • Click Split at the bottom of the document window to split your screen to display HTML on top and design view on bottom.
  • Click inside the e-mail address you typed and notice that when you edit the address, the blue HTML codes preceding it do not change. Therefore, when you click the mailto to send e-mail, it will use the old address. The same is true of URLs. Copy and paste the URL for our class and edit it: http://caot.lacitycollege.edu/112/

Use these steps to use Find and Replace to edit both the text and the code behind it:

  • Click Edit, Replace; In Find what, type the original e-mail; in Replace with, type in the changed e-mail.
  • Under Search options, click All pages; under Advanced, click Find in source code; Find in Site.

p. 101. To block unsolicited e-mail, go to http://automaticlabs.com/products/enkoderform/ to see how to encode your e-mail to hide it from e-mail harvesting robots.

 

p. 101. To wrap HTML code in Code View, on the Tools menu, click Page Options. On the General tab, under Code View Options, make sure that Word wrap is selected. It's helpful to turn on word wrap for Code view. This will automatically break long lines of code so that you don't have to scroll to see everything on the line.

On p. 101, you might want to know about the Variables feature that uses a concept similar to Find and Replace. Variables are useful for content that might change, such as an e-mail address or a date. On our Web site, I often use dates such as the date of the final exam. When I need to add the final exam date to the content of a page, rather than typing it, I define a variable for it and then insert the date as a variable as follows: 

Define a variable. Click Tools, Site Settings, Parameters tab, Add. In the Name box, type a name for the variable—in this example, I would type Final Date. In the Value box, type a value for the variable. In this example, I would type Thursday, June 2, 12:30 p.m.

Insert a variable. In Page view, position the insertion point where you want to display a variable. Click Insert, Web Component; under Component type, click Included Content; under Choose a type of content, click Substitution, Finish. In the Substitution Properties window, click desired choice and click OK. In this example, you would click Final Date. On my Web page, the value of the variable would appear.

Update a variable. When the year changes, I would redefine the variable following the steps above under Define a variable and change the final date. When you click Apply or F5 to refresh, the final date will change throughout my Web site in every place in which I inserted the variable named "Final Date."

p. 100, Step 2. To set up a default e-mail client: In Windows Explorer, click Tools, Internet Options, Programs; make the desired selection in the E-mail box. If you use Outlook or Outlook Express at home as your default e-mail client and click a mailto hyperlink, that e-mail client will open. Hotmail is the default e-mail client in the COAT labs, so Hotmail will launch in our browser if you click a mailto.

  • Using Pictures as Hyperlinks, p. 101

  • Examining HTML for a Picture Hyperlink and an Image Map, p. 105

p. 121, Step 7. Java Virtual Machine download. Due to litigation with Sun Microsystems, Microsoft has removed the Microsoft Virtual Machine (its version of the Java Virtual Machine) from its Web site and all service packs. To get the Java Virtual Machine (JVM), go to the Sun Web site. Some customers have reported that their Java Virtual machine has stopped working after installing the latest Windows XP Service Pack-1a. If your Java applets stop working, go to the Sun Java download site to download the Sun Java Virtual Machine.

p. 121, Step 7. To see a list of FrontPage applets that you can use for special effects, go to http://www.frontlook.com/default.asp and click Downloads for some free sampler downloads. The Read Me file will have directions for use. I have installed a page effect (falling leaves and bird sounds) and a cursor effect (seed chasing the cursor) to the FrontPage Tips page. Michele Padilla  in her Final Web site, Chavez Ravine, used some Java script that is very interesting. The confirmation page generated after filling in the form on the Feedback page contains Java Script Date image that changes daily. I've never directed students before to look at the Final page but this is worth the visit! Mouse over the "Hi" hyperlink at the bottom of the page. Click here for interesting sites if you like Java.

FrontPage Resources:

Homework 

 
EP2-1, 10 points:  Project 2-1: The Happy School Web Site. The Happy School Web is for an elementary school.
 
  1. Create the Happy School Web site on your URL at our server and name the Web site Happy and change the title of the home page to Happy School.

Note: If you make a mistake and need to rename the Web, on the Tools menu, click Web Settings, General tab. In the Web name box, type Happy. The page you are creating is the home page for the Web site (index.htm); therefore, double-click index.htm as soon as you create the Web site to open it so that you can begin with Step 2. If by mistake you type this project in a page other than index.htm, copy and paste everything from the incorrect page into index.htm and delete the other page from the Web by right-clicking it in the Folder List pane and clicking Delete.

  1. Open the home page. In Page view, type and spell check the following two paragraphs:

The Happy School is an elementary school located in Happy, USA, founded in 1984 to promote promising education to children in grades kindergarten through fifth grade.

The Happy School has sixteen faculty members, nine academic programs and a soccer team that excels statewide.

  1. Type the heading Welcome to the Happy School Web Site centered above the two paragraphs you just typed. Change the style to Heading 3.
  2. Add a blue horizontal line to the Web page between the Welcome heading and the first paragraph. Set the width to 100%.
  3. Click here to display the school bus image file bus.gif. (Click Cancel if you see a prompt to enter a password.) When the image is displayed, right-click it, click Save Picture As; in the Save Picture dialog box, click the Desktop icon to save it to the Windows Desktop, and click Save; import bus.gif from the Desktop into your Happy Web site, then insert bus.gif centered at the top of the page.
  4. Just below the two text paragraphs, insert another blue horizontal line. Set the width to 100%.
  5. Type the following text centered and single spaced (Shift-Enter after typing each line) below the horizontal line you just created:

School Location: 4444 Smiling Lane, Happy USA
Phone: 123-456-7890
Visit Us Any Time!

  • Your home page should be arranged exactly like the screen shot below. Remove any extra blank lines as needed. Click the thumbnail below to see the enlarged home page and click the Back button to return to this page.

  • When you are finished with all steps, open Happy in Internet Explorer. Click inside the Address box and press Ctrl-C to copy the URL. Open your email client and paste the URL into the body of the message. The subject line should be Your Name, last 4 digits of your student ID, EP2-1.

E-mail assignments with this e-mail icon to me no later than Sunday at noon unless otherwise announced. No assignments are accepted late. In all e-mail messages, the subject line should be Your Name, last 4 numbers of your student ID, project ID.
T1PT, up to 10 points:  The URL for Tutorial 1 Practice Test is http://caot.lacitycollege.edu/112/TestsPractice/tutorial_1_practice.htm. When you click this URL, the Tutorial 1 Practice test will open in your browser. Type your name in the Name box, answer each question, then click Check Your Work. You may retake the test as many times as you want until you earn the desired score.

When you are satisfied with the score, click here and follow the steps to paste a print screen into homework.htm that shows your name and the score. When you are finished, open homework.htm (mine would be http://ca112.lacitycollege.edu/ca112a00/grill/homework.htm) in Internet Explorer by clicking the Preview button. Click inside the Address box and press Ctrl-C to copy the URL. Open your e-mail client and paste the URL into the body of the message. You should see a hyperlink to your Web page appear. The e-mail subject line should be Your Name, last 4 digits of your student ID, T1PT.

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

 

  90-100%  = 10 pts.
    80-89%  = 5 pts.
Below 80%  = 0 pts.
T2PT, up to 10 points:  The URL for Tutorial 2 Practice Test is http://caot.lacitycollege.edu/112/TestsPractice/tutorial_2_practice.htm. When you click this URL, the Tutorial 2 Practice test will open in your browser. Type your name in the Name box, answer each question, then click Check Your Work. You may retake the test as many times as you want until you earn the desired score.

When you are satisfied with the score, click here and follow the steps to paste a print screen into homework.htm that shows your name and the score. Paste the print screen above T1PT 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.

Open your e-mail client and paste the URL into the body of the message. You should see a hyperlink to your Web page appear. The e-mail subject line should be Your Name, last 4 digits of your student ID, T2PT.

  90-100%  = 10 pts.
    80-89%  = 5 pts.
Below 80%  = 0 pts.

Extra Credit 

Extra credit assignments are due no later than Sunday evening. None this week.

Last revised Sunday, October 12, 2008 08:08 PM.
 

Hit Counter

  • This Web site and its entire contents are © 2007 [Amy Sirott] and may not be reproduced in any form without prior written permission. All rights reserved. Best viewed in Microsoft Internet Explorer, 1024 x 768 resolution. Revised October 12, 2008.