Go to the following Web sites and view the types of gifts this business will be selling. Your clients have instructed you that the gifts that will appear on their Web page will be the craziest items sold on the Web, however, they will only sell products that are in good taste. You will need to come up with six categories for the gifts, different from the competitors categories. Although you will be using the graphics from these sites for this activity, your site will have a totally different look and the description of the gifts will reflect your own creativity. First, come up with at least six different category labels. The wittier the better! Now you will center these categories down the center of your page using the H3 header. Place your cursor behind the end paragraph tag </P>, press the enter key, and insert the HTML code that will align your text in the center of the page with the H3 header.

Wonderfully Wacky Gifts

Someplace Else 2000

Save your document then open it in your browser to see the changes.

Lists

You will now create an unordered list to emphasis the strengths of this company. Your unordered list will look like the following:

• Free shipping and handling
• 10% discount for orders over \\$50.00
• Accepts all major credit cards
• Personal checking account withdrawal

Place your cursor after the </P> tag, which ends your paragraph, then press the enter key to start a new line. There are three types of list. An ordered list is used when you want to place the numbers 1, 2, 3, etc. in front of your list. An unordered list, which is what you will use for the list above, places bullets in front of each item. The third type of list is the definition list which is a list of terms, each followed by a definition line, usually indented slightly to the right. The following codes are how the HTML should be placed in your document.

For an ordered list:

<OL>

<LI>

<LI>

<LI>

</OL>

For an unordered list:

<UL>

<LI>

<LI>

<LI>

</UL>

For a definition list:

<DL>

<DT>

<DT>

<DT>

</DL>

Open your document in Notepad, if its not already open, and add the HTML code for an unordered list to your document. Add the four items listed above. Make sure you enter the capital I, not the number 1 when inserting your HTML code. Save your file then reload it in your browser.

Character Tags

The tags used up to now have affected either the entire document or line. HTML also allows you to modify the characteristics of individual characters which is called a character tag. The character tags we will examine closely are classified as physical character tags which change the format of the text. The following are common examples of physical character tags.

To emphasis your unordered list more, you will add the bold HTML code to your document. To add character tags to the plain stupid file:

Place your cursor behind the <LI> tag and insert the <B> tag. To stop the bold command from displaying throughout your entire page, place your cursor in front of the </UL> tag and insert the end of bold text tag </B>. Save your document then view it again in your browser.

For more listings of character tags, look in Appendix C in the back of your textbook.

Inserting a Horizontal Line

To lend more shape to the appearance of your page, you will now add a horizontal line after the heading "The Wildest and Wackiest Gifts on the Web." Place your cursor after the end heading tag and press enter. In the new line, type <HR>. Save your changes and view it in your browser.

To give your horizontal line a little more depth, replace the <HR> tag with the following:

<HR ALIGN=CENTER SIZE=12 WIDTH=100%>

Save your changes then view it in your browser.

Creating and Inserting an Image

You will now create an image to display on your page. Because your clients don't want to deal with any copyright issues, they have requested that you design an image that will represent their company. The Web only supports two graphic types for inline images: GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). Of these, the GIF file format is the more common on the Web. We will first create an image in Flash that does not save files in the GIF format. You will be instructed later in this activity on how to change this image to a GIF format that compresses the size of the image file.

First, open Flash from your program files. You will first create the image below to get acquainted with the variety of drawing tools available in this program. You will then create your own image for this Web page.

• Once Flash is open, click File then New. A blank canvas will appear.
• Select the oval or type the letter O, then place your cursor on the canvas to begin your image. While holding down the left mouse button, drag your cursor to open your circle. You will notice that the color of your circle is not yellow, so you will need to change it. To do this, you must select the circle first.
• Either click on the arrow button on your drawing toolbar or press the letter A. Click on the circle to select it.
• Select the paint can, then on the black square under the hand button. This will open the color palette. Choose the yellow color you want which will then close the color palette. Notice that your cursor has turned to a paint can.
• Click on the circle, then choose the arrow tool again and click off the circle to deselect it.
• To create the eyes, choose the oval tool again and make one small circle on the canvass, not on the yellow circle, and color it black. To ensure that both eyes appear the same, we will just copy the finished product.
• Once you have the eye the way you want it, you need to select it in order to copy and paste the second eye on your canvas.
• Choose your arrow tool and double click on your small black circle. Notice that it appears gray that lets you know that it is selected. Click on edit then copy then edit, paste. Your copy now appears somewhere on your canvas and it now appears selected. Left click on the second circle and while holding down your left mouse, drag it where you want it to appear on your yellow circle.
• Double click on the copied black circle to select it, then drag it on the yellow circle where you want it to appear.
• To create the hat, click the line tool or click the L key. Position your cursor on top of the yellow circle where you want your line to start and while holding down your left mouse button drag it to where the top point of the hat will appear. Release your mouse button to let Flash know that is where you want the line to stop. Press down your left mouse button again and drag it back down to your circle to form the triangle shape of the hat. Release your mouse button.
• Next you will pick a gradient color to fill the triangle. Follow the same directions above for coloring your circle, but choose the gradient color to add fill color to the hat.
• To create the tongue, choose the oval tool again but drag it to form an oblong circle. Make sure you draw it on your canvas and not on your image. Choose a light pink color for the fill. Your tongue still might need some molding to get the right shape. In order to alter the shape, click again on your arrow button, then place it over the shape. Notice the half moon shape behind the cursor. With the half moon displayed, hold down your left mouse button and drag the line to get the shape the way you want it. If you make a mistake, choose edit then undo.
• The last to add to your image is the hair. You will use the paintbrush tool. After clicking on the paintbrush, you will need to select the fill color, paint size, and paint shape. Below the color palette, drop down the size and shape menu and play around with what each of these selections will do. Make sure you draw outside the image on the canvas. Try to get the shape of the hair the way you want. Remember you can use the copy, paste, or arrow selection to achieve your desired outcome.
• When you have the image the way you want it to look, you will cut and paste it in fireworks to change the file format of the object. First you must marquee the object by using the arrow key. With the arrow key selected, click on the outside upper left corner of your object, hold down the left mouse key, then drag a box around your image. Make sure all your image is inside of the square. Click edit then copy (you can cut the object if you are brave at heart), open Fireworks from the programs menu, then click file then new. The program should already calculate the image on the clipboard and will give you the default canvas size. Click the transparent background button then click OK. On the standard toolbar click edit then choose paste. The image should now appear on the canvas.
• To make sure that your image is the size appropriate for your page, click modify on the standard toolbar then select document then image size. Change the width size to no larger than 85 pixels, or even smaller depending on your image then click OK.
• To change the file format, click file then export. Click OK for the redraw option and choose GIF file format. You also change the color by clicking the color in the palette that you want to change and click on the color wheel and choose the color you wish to replace it with. Notice that when you run your cursor over the image, it places an X in the color box that represents the color in the image. Feel free to change colors in the image to get the best results.
• Choose index transparency so your image will be all that appears when you place it on your Web page.
• Click Next.
• Choose your student folder and name your file smileface, then click save. Your image is now ready to place on your Web page.

You will now create your own image for this Web page activity. Start a new file in flash and experiment with other drawing features in flash to create an image that will reflect the stupid company image. Follow the directions above to convert the image to a GIF format and save it to your student folder.

With this image in your student folder, you will now place it on your Web page. You will place the image after your paragraph. Place your cursor after the closing paragraph tag and press the enter key to start a new line. The general syntax for an inline image is:

<IMG SRC="filename">

The filename is what name you assigned your image when you saved it. You will center the image on the page. You will nest the image tag within a paragraph tag and then set the alignment property to center it in the opening paragraph tag. Return to your text editor with the plainstupid file open. Make sure your image file is also in your student folder or you will have to specify the path to where your file is located, which will be discussed later. Type the following on your new line:

<P ALIGN=CENTER><IMG SRC="filename.gif"></P>

Save your document and reload it in your browser. If your image appears to be too large for the page, resize your image in Fireworks following the instructions above and resave it. Continue until you get the image the size you want.

Tutorial 2 in Textbook

Open the file plainstupid.html in your text editor. After adding your image and horizontal rule, the categories you created have moved further down on the page, not allowing viewers to see everything without scrolling down the page. You will now create hypertext links between elements within your document. First you will need to assign short names to any category that contains more than one word, for example, Gifts for Him would be assigned the name Guys.

Creating Hypertext Links Between Elements Within Your Document

• Place your cursor before <IMG SRC="filename.gif"> and after <P ALIGN=CENTER>, type one of your one word category names, followed by a space then type &#183 which represents a single bullet. For example, Guys &#183. Continue with two more of your one word categories placing a space before and after &#183. Press enter so this new entry is on its own line.
• Create a new line directly after <IMG SRC="filename.gif">, then type &#183, space, then one of the remaining one word categories. Continue with the last two categories. These three categories should be located on the line under the image source code. Press enter placing the end of paragraph tag on a line by itself.

Save your file and view it in your browser. Three categories should appear on the left of the image, and three should appear on the right with bullets separating them.

Anchor Tags

Now that you've created the text for your categories, you need to locate each heading and mark the heading text in the document using the anchor tag <A>. This tag creates an anchor, text that is specially marked so you can link to it from other points in the document. You assign each anchor its own anchor name, for this exercise, you can use the one word description used in the above exercise or use an abbreviation. Make sure no spaces appear in the word.

Creating anchors:

• Locate the text or graphic you want to anchor (jump to)
• Before the text of graphic, place the tag

<A NAME="anchorname">

• After the text or graphic, place a closing </A>

For example, if you want the text "Gifts for Him" to be an anchor, you could assign it the anchor name "Guy.":

<A NAME="GUY">Gifts for Him</A>

FYI: An anchor doesn't have to be just text. You can also mark an inline image using the same syntax:

<A NAME="IMAGE">IMG SRC="filename.gif"</A>

Locate the H3 heading for your first category. (Example, Gifts for Him) Place the cursor after <H3 ALIGN=CENTER> and type the anchor tag <A NAME="anchorname"> then place your cursor before the </H3> tag and type </A>. Continue creating anchors for the rest of your categories.

After you anchor the text that will be the destination for your links, you need to create the links themselves. For this activity, you want to link the text you entered around your image to the six categories. To create a link to an anchor, you use the same tag you used to create the anchor. The difference is that instead of using the NAME property to define the anchor, you use the HREF property, short for Hypertext Reference, to indicate the location to jump to. For example, to create a link to a location in the current document with the anchor name "Guy," you enter this HTML command:

<A HREF="#GUY">Guy</A>

FYI: To turn an inline image into a hypertext link, place it within link tags, as in:

<A HREF="IMAGE"><IMG SRC="filename.gif">

Return to your text editor. Locate the paragraph tag that contains the six categories nestled within the image file. Within that paragraph you need to bracket each occurrence of a category title with a link tag. Place your cursor in front of your first one word category (example: Guys), and type <A HREF="#onewordcategory" and at the end of the category name add the closing anchor </A>. The link will not work if you leave the # out. Your code should look similar to the following:

<A HREF="#Guys">Guys</A>

Save your word document and reload it in your browser. Check to see if your link works.

Define A Color Theme

(Tutorial 3 in Textbook)

HTML identifies a color in one of two ways: either by the color's name or by a description of the color's appearance. For more information on the advantages and disadvantages of these methods, refer to tutorial 3 in your textbook.

The first method is by typing in the color name. There are 16 color names that are recognized by all versions of HTML. These color names are shown below:

The second method uses a mathematical approach to define color. One method is know as an RGB triplet where three numbers are used that are based on its red, green, and blue components. Aqua is defined as (0,255,255). The first number represents the intensity of red, the second number, the intensity of green, and the third number, the intensity of blue. Another method is the hexadecimal approach which represents numbers using 16 as a base rather than 10. Have I blown your mind yet? If you want a more complex explanation of this method, refer to page 3.7 in your textbook. You will not need to worry about these numbers because in Appendix A in the back of your textbook you will find both methods decoded for you along with a color swatch of that specific color.

You will experiment with these colors for your page by specifying a background color for your page, the color of your text, links, and vlinks (color of previously visited hypertext links). If your plainstupid word document is not open, open it in Notepad. Locate the beginning body tag (<BODY>) and edit it to read:

<BODY BGCOLOR=Color TEXT=color LINK=color VLINK=color>

Here, the BGCOLOR property sets the background color, the TEXT property controls the text color, the LINK property defines the color of hypertext links, and the VLINK property defines the color of links that have been previously visited by the user. The value of color will be either one of the accepted color names or the color's hexadecimal value. If you use the hexadecimal value, you must use the pound symbol (#) and enclose the string in double quotation marks. For example, the HTML tag to create a background color with the hexadecimal value FFOO88 is:

<BODY BGCOLOR="FFOO88">

Open you textbook to Appendix A and experiment with different colors to see their effect. Now that you understand about color themes, return the beginning body tag to its original state (<BODY>). You will have an exercise later where you will create your own background like the one seen on this page. You can then edit your text, link, and vlink colors to match your background.

In choosing your color theme, you should remember to use colors that will not detract from your page's text, making it hard to read.

Modifying Text with the <FONT> Tag

Specifying the text color in the <BODY> tag of your Web page changed the color of all the text on the page. Occasionally you will want to change the color of individual words within the page. Color that affects only a few sections of a page is called spot color. You can do this using the <FONT> tag. The <FONT> tag gives you even more control by allowing you to specify the color, size, and even the font to be used for the text on your page. The syntax for the <FONT> tag is:

<FONT SIZE=size COLOR=color FACE=font>The text that will be revised</FONT>

Return to the plainstupid text document in Notepad. Locate the following heading:

<H2 ALIGN=CENTER>The Wildest and Wackiest Gifts on the Web</H2>

Edit this heading using the font tags above, using a font size of 5, color=fuchsia, and font face of helvetica. You should now show the following:

<FONT SIZE=5 COLOR=FUCHSIA FACE=HELVETICA>The Wildest and Wackiest Gifts on the Web</FONT>

Save your text document and view it in your browser. Notice that is no longer centered. Do you remember the code used to align your text to the center? To center the text, you must embed the center=alignment in a paragraph tag. Make the following changes then save your work and view it in your browser.

<P ALIGN=CENTER>

<FONT SIZE=5 COLOR=FUCHSIA FACE=HELVETICA>The Wildest and Wackiest Gifts on the Web</FONT>

</P>

You will leave this code in your word document, however, change the font color to black. When you create your background later, you can then go back and change the color and face to whatever you want.

Web Page Structure

(Tutorial 2 in Textbook)

You will now create additional pages that will contain the picture, description, and price of each gift. Each category will have a separate page, which will contain all the gifts available for that category. This technique of laying out how your pages will be displayed is called storyboarding. The two most common page layouts are:

Linear structure, in which each page is linked to the next and previous pages in an ordered chain of pages. An example of this structure would be an online play where you would click the next button to go to the next page, or the back button to go the previous page.

Hierarchical structure is a system which starts with a general topic that includes links to more specific topics. Each specific topic includes links to yet more specialized topics. This is basically the style you will be using in this exercise.

Creating Links Between Documents

You will need to create a separate page for each category in Notepad and save it with a different name for each. Because your browser will be looking specifically for the name assigned, save it with a different name than your anchor or category names. For example, Gifts for Him where I assigned the anchor name Guys, I might name Men.html. You will need to center the category title on each page. (Example:<H1 ALIGN=CENTER>Gifts for Him</H1>) Create six different text documents, one for each category, and save it to your student folder. Make sure you save it as one complete word and don't forget to save it as all files and add the .html extension. View them in your browser window. You should see a blank page with the title of your category centered at the top of your page. Return to your plainstupid document.

Change the line reading "<H3 ALIGN=CENTER><A NAME="anchorname">Your first category name</A></H3> to:

<H3 ALIGN=CENTER><A NAME="anchorname"><A HREF="Nameofyourhtmlpage.html">Your first category title</A></H3>

Save your work then view it in your browser. Click on your first category to see if it takes you to the page that will show the gifts for that specific category. Continue until all six categories are linked to their different pages. Continue to save your work and check it out in your browser.

FYI:

Linking to Documents Found in Different Folders

To link to documents found in different folders, you must use the absolute path, which tells the computer exactly where the file is. In HTML you start every absolute pathname with a slash</>, then you type the folders' names on the computer, starting with the top most folder in the folder hierarchy and progressing through the different levels of subfolders. For more information, look on pages 2.21-2.23 in your textbook.

Linking to Documents on the Internet

To link to documents on the Internet you will need to know its URL, or Uniform Resource Locator. For example, to create a link to my Web page, you would use this HTML code:

<A HREF="http://jnicholson.www7.50megs.com">Lesson Plan Blues</A>

To Create a Link to an E-mail Address

To create a link to an e-mail address, for example: njanann@hotmail.com, you would enter the following into your Web document:

<A HREF="mailto:njanann@hotmail.com">njanann@hotmail.com</A>

Activity 3/Tutorial 4 in Textbook

Creating a Text Table

(Tutorial 4 in Textbook)

You will now construct a table to display the picture, description, and cost of your gifts. Open one of the six text documents created for each category. You will create a template that will then be copied to your other five text documents. With your text document open in Notepad, place your cursor after <H1 ALIGN=CENTER>Name of Your Category</H1> and press the enter key to place the general syntax for your graphical table on a blank line. You want a table that has three columns and six rows. Type the following code, using indentations for organization, that tells the computer you are building a table with the above specifications:

<TABLE>

<TR>

<TD>First Cell First Row</TD>

<TD>Second Cell First Row</TD>

<TD>Third Cell First Row</TD>

</TR>

<TR>

<TD>First Cell Second Row</TD>

<TD>Second Cell Second Row</TD>

<TD>Third Cell Second Row</TD>

</TR>

<TR>

<TD>First Cell Third Row</TD>

<TD>Second Cell Third Row</TD>

<TD>Third Cell Third Row</TD>

</TR>

<TR>

<TD>First Cell Fourth Row</TD>

<TD>Second Cell Fourth Row</TD>

<TD>Third Cell Fourth Row</TD>

</TR>

<TR>

<TD>First Cell Fifth Row</TD>

<TD>Second Cell Fifth Row</TD>

<TD>Third Cell Fifth Row</TD>

</TR>

<TR>

<TD>First Cell Sixth Row</TD>

<TD>Second Cell Sixth Row</TD>

<TD>Third Cell Sixth Row</TD>

</TR>

</TABLE>

Save your word document and open it in a browser. To get a better understanding of what the codes above mean, refer to the table below.

<TABLE>	Begins table
<TR>	Begins table row
<TD>	Begins table data
</TD>	Ends table data
</TR>	Ends table row
</TABLE>	Ends table

Notice the words that appear in your table. Before deleting the words, you will work on the appearance of your table because the table definitely lacks aesthetic value. Return to your text document that contains the table template and you will now change the appearance of the table itself. Locate the beginning of your table tag (<TABLE>) and change it to read:

Formatting A Table

<TABLE ALIGN=CENTER WIDTH=640 BORDER=10 CELLSPACING=5 CELLPADDING=2>

Save your text document and view it again in your browser, It's already looking better! By typing in the above code, you let the computer know that you wanted the table centered on the page with a width of 640 pixels and a border of 10 pixels. The cellspacing property controls the amount of space inserted between table cells, or in plain terms, the interior border thickness. Cellpadding refers to the space within the table cells. To see the difference in the two, change the number of pixels, save your document, then view it in your browser. When you are through experimenting, change the values back to the above specifications.

Cell Alignment

Notice that all the words are aligned to the left side of each cell. The first and fourth rows will contain pictures of the gifts and it would look better to have them centered in the cell instead of flushed to the left. In the first and fourth row, change all the cell tags to read: (Do not delete your text or you will not be able to see how your alignment will look!!!)

<TD ALIGN=CENTER>Text that Appears in Cell</TD>

Save your text document and again view it in your browser. The first and fourth row text should now be centered in the cell. Repeat this with rows three and six, they will contain the price of each gift. You will use the second and fifth rows to type in the description, and you will later decide if you want it to stay flushed to the left, or centered. For now, you will leave it aligned to the left. Save your changes and again view it in your browser. All rows should be aligned to the center except rows two and five.

Table Header

Now that you have the alignment the way you want it to appear in the table, you need to turn your attention to the H3 heading on the page. It would look a lot better embedded at the top of your table and the text changed to a heading size of 2. You want the heading to appear centered across all three columns. First, delete the H3 heading, remembering the name of the category title. Place your cursor after the beginning table tag (<TABLE ALIGN=CENTER WIDTH=640 BORDER=10 CELLSPACING=5>), press the enter key to start on a new line, then type the following table heading tag (TH):

<TH ALIGN=CENTER COLSPAN=3><H2>Category Title</H2></TH>

Save your text document and view it in your browser. Your category title extends across the three rows and is centered in the middle. You will return to the table to add some color, but before we do this you need to decide on a color theme for your page. I have chosen a light pink for this page. You, however, will create your own design and color theme. You will need to open Fireworks from your program files.

Creating a Background for Your Web Page

With Fireworks open, select file, then new. Specify the canvas size. I used 150 pixels by 150 pixels. Depending on what you want to do will help determine what size you will need. Make sure to use pastel or light colors so viewers visiting the page are able to see your text with little difficulty. Also, making your page too busy will become annoying to those visiting and we want to keep viewers there as long as possible. When you have completed your background, save it to your student folder. For this text background I selected the text tool, the button that shows a capital A. When you click the text button, a dialog box will open. If you decide to use text, you will need to decide on a font style and color. When you have finished typing in what you want, click OK. To rotate or resize your text, select the arrow tool, select the text by clicking once on it, then select modify on your standard toolbar then choose Free Transform. When you have your background tile the way you want it, place it in your plainstupid text document, then view it in your browser. What you think looks good on a small tile might not be at all what you thought it would be as a background. Continue to modify your background, viewing it in your browser till you get the result you want. To place your background on your page, locate the beginning body tag (<BODY>) and change it to read:

<BODY BACKGROUND="imagename.png">

Where imagename is the name you assigned to your background tile with the png extension. This extension lets you know that this image was created in fireworks. You could also export as a gif file as before, then you would then type the gif extension (.gif).

After you have successfully placed your background on your main page, reopen the table template page in Notepad and place your background on this page as you did above. You will now continue to modify your table by using different colors to enhance the look of your table.

Adding Border Color to Your Table

The first thing you will format is the border around the table. Using two different shades of the same color will give your table a 3-D border effect. You will need to find a dark and light shade of the same color that will go with your color theme. When you have the two hexadecimal values that you want to use, locate the beginning table tag (<TABLE ALIGN=CENTER WIDTH=640 BORDER=10 CELLSPACING=5 CELLPADDING=2>). First, place your cursor behind your beginning body tag and press enter to begin a new line. Your cursor should be under the beginning body tag and above the beginning table tag shown above. Type the following on the blank line:

<DIV ALIGN=CENTER>

With this text entered, you will now need to modify the table tag. Make the following changes to your table tag:

<TABLE WIDTH=640 BORDER=10 BORDERCOLOR=#hexadecimalvalue BORDERCOLORDARK=#hexadecimalvalue CELLSPACING=5 CELLPADDING=2>

Save your changes and view it in your browser. Change the hexadecimal values to you get the desired result you want to achieve.

Adding a Colored Background to Your Table

To create colored background for a table, row, or cell, enter the following tags:

<TABLE BGCOLOR=color>

<TR BACKGROUND=color>

<TD BACKGROUND=color>

<TH BACKGROUND=color>

Return to you table template in Notepad, locate the table heading tag. You will now change the color of the heading. Place your cursor after the beginning table tag (TABLE ALIGN=CENTER WIDTH=640 BORDER=10 CELLSPACING=5 CELLPADDING=2> and press the enter key create a blank line. Although you have specified the top of the table as a header, you must enter a TR tag to change the color. Your cursor should now be on an empty line between the beginning table tag and the table header tag. Make sure it is before the header tab. Type in the following:

<TR BGCOLOR=color>

Save your changes and view it in your browser. At this point, if you have a background you like, but the text will not show up clearly, you could use the bold tag or font color tag to change the appearance of your text. Remember, rows one and four will hold image files, so you will not need to worry about the appearance of this text. To change the font color, size or font, you must place the <FONT> tag behind your <TD> tag. Enter it in each cell you wish the changes to take place in.

Continue to change the colors in your table. Remember to make it pleasing to your viewers. If your table is too busy, it could be hard to read.

Now that you have your table the way you want it to look, you will need to delete the text that appears in each cell. For example, <TD>First First Cell, First Cell</TD> should be edited to look like <TD></TD> When you have removed all the text from your table, save it. Whew, what a lot of work but you have successfully make a template you can now copy into your other five category text documents. Open the remaining five pages and copy the table template into each of them, changing the table heading category to reflect the remaining five titles you have previously assigned to each.

Lets take a break from HTML!!! Return to the Web pages below to find the gifts you will display in your category pages. Save the images to your student folder. You will save six pictures per category, totaling thirty-six images in all. Remember that you want your table to look proportional with your pictures, so in the event your images are too small, or too large, you can change the size of them in Fireworks. Making all your images the same size would also add a more professional look to your page. Before you decide on the appropriate size, view one picture in your table and continue sizing it till it looks like you want it to. Remember, three images will be in one row, so you don't want to make the image wider than the table will hold. Another thing to keep in mind is that you also have two images per column.

Wonderfully Wacky Gifts

Someplace Else 2000

Entering Data into Your Table

Once you have saved all your image files, open your category Web pages in Notepad. Locate the first cell in row one, place your cursor between the <TD> and </TD> tags, and insert one of your image files that belong in that category using the image tag (<IMG SRC="filename.gif">). Next, locate the first cell in row two and type in a description of this image in your own words. Remember, you cut and paste in Computer Applications, Web Design is all about creativity. Make your description of the gift witty and humorous to your views. Finally, locate the first cell in row three and type in the price of the gift. Save your changes and view it in your browser. Repeat this with the remaining images and then with the next five Web categories pages.

Creating a Button in Fireworks

Open Fireworks under your program files. Start a new file with canvas dimensions of 150 pixels wide by 100 pixels high. Select transparent as your canvas color. You will select the rectangle or oval tool to draw the shape of your button. I choose a rectangle for an example:

Click and drag your oval or rectangle to open it on your canvas. If your object toolbar is not visible, click window on your standard toolbar then object. Click the stroke tab and drop down you menu and experiment with different stroke effects. Drop down your second menu choice box and notice other effects and colors you can choose from. Strokes outline your button.

You will now experiment with fill color using the fill toolbar which allows you to apply affect and texture to your button. Click the fill tab, then drop down the menu by clicking on the arrow button. These are additional features you can use with your fill. Experiment with several of these fills. Notice that if you choose solid, you have the same color choices you have on your color palette on your canvas by clicking on the color swatch arrow, however, you have a choice of applying a texture to your color. If you did not have a color previously chosen, you will have to click the paint bucket to apply your fill. When applying texture, continue pouring from your paint can to see the effect the texture makes on your canvas. If you are not seeing a texture appear, make sure you don't have 0% displayed. Drop down your arrow and choose a number, the larger the number, the more texture will be applied. Play around with the different options to get familiar with them.

Click on the effect tab. Drop down your menu box. Check out what each of these items will do. If you choose the multiple tab, you can apply more than one effect to your button. Once you have the button the way you want it, return to button on your canvas. Click the text button (the capital letter A) and type the word back. Make sure you choose font color and size that will be easily displayed. If you need to resize or move your text, you must choose the arrow key. Once your have the text displayed the way you want it to look, you will now assign a behavior to the button that when clicked on it will take you back to your home page.

To apply a behavior, you must first select the area on want to change when clicked on. Your selection will be the word back. With your arrow key, choose the text back. You will know that the text is selected if a blue box appears around the word. Choose Insert then select Hotspot, then chose Insert Behavior. Notice that the object toolbar changes and a behavior box opens. In the behaviors box, click the plus button to open a menu, and chose simple rollover. A dialog box will open asking if you want to include down or over state. Don't check either box. Click OK.

You will now need to define your link and alternate text in your object toolbar. If you don't see the objects toolbar on your canvas, select window on your standard toolbar, then choose object from the drop down list. Open the home page of Just Plain Stupid, copy the URL address by clicking in the location box, choose copy, the return to fireworks and click in the object toolbar, with the object tab selected, then click on the drop down box that displays a chain link and paste the location in this box. On the alternate text button type Just Plain Stupid.

Add one more behavior before saving and testing your button. Click the plus button again and chose Display Status Message. Type Just Plain Stupid. You will now group all objects associated with your button by holding down the control key and clicking on you button, hotspot, and your text. Click the modify button on your standard toolbar, then select group from your list of options. Remember how you cut your picture and repasted it to get rid of the extra space around your picture? You are going to do the same with your button. Select your button by clicking on it, then cut, open a new page, then paste your button. (If for some reason when you cut your picture and the text is not cut too, then you didn't group it with your button.)Save your button, then press F12 to view your button in a browser. Click on the button to see if it will take you to Just Plain Stupid home page.

Now you will place the button on all of your category pages. First you will save your button as a png file then as a htm file. To save your file in htm format, choose File, then export. Save as a gif, click next, then save as htm file. Because you have assigned behaviors to your button, you will have to copy a JavaScript into you document. One JavaScript will be typed in your section and the second JavaScript will be put in your between your tags just above the end of body tag. By saving your file in htm format, you can open the JavaScript in Wordpad or Notepad. The script will tell you where to copy and paste. To align your button to the center, in the image JavaScript, the one copied above the end of body tag, put it in a between paragraph tags with the command align=center. Save you document and view it in a browser. Check to see if your button works. You should have a button on all six category pages.

Giving Your Title Some Oomph!!!

Open Flash from your program files. Follow the steps below to create a title like the one at the beginning of this project.

• Click the text button to open the text box. Select font size, color, and face. Click on your canvas and type Just Plain Stupid. If you don't like the font style, size, or color, while holding down your left mouse button, drag over the text to select it. Experiment with the three options until you get the look you want.
• Click the arrow key and select the text. A border will appear around your title. To create an abstract look, you must first break your image apart. With your title selected, click on modify on your standard toolbar, then select break apart. The letters should now appear gray.
• Click on the canvas to deselect your title.
• Place your arrow on the J and move it around until you see a right angle symbol that will appear behind your cursor. While holding down your left mouse button, pull the edge of your J away from the text. Notice that it will begin to stretch. Continue until you get the look you want. Continue with the rest of the letters to create a unique look.
• Click the paint bucket, then the color swatch located under the button with the hand on it to open the paint palette. To create your own gradient color, click the multicolored box at the top of the color palette to open the color dialog box.
• Click on the gradient tab. You will see arrow swatches that have different colors. Drag these arrows to the left to clear your screen. One arrow will remain in the work area. To change its color, click on the arrow left in the work area, then on the color swab located above the box that displays the word change. Another color palette will open. Select the color you want the arrow to change to and your color is now represented in the arrow on the stage.
• Now select the arrow located to the left of the stage. Repeat the above step to change its color. Drag it on the stage and view the color change in the box located at the top of the color box. Repeat this as many times as you want till you get the desired result you want.
• Close your dialog box and examine the color swatch now on your toolbar. It should now represent the gradient color you created. Your cursor should still display the paint bucket. Click on the letters to change them to the color you just created. You must select all to select the whole title or just click on each letter to add the color individually.
• If you don't like the result, repeat the above steps until you get the product you want.
• When you have your title the way you want it, click edit, then choose select all. You will now group your letters to make it one image.
• Click modify on your standard toolbar, then select group. Your title is now one image. Copy this image, open Fireworks, select new file, choose a background color, then OK.
• Choose edit, then paste.
• Export your graphic (File-Export), choose gif format, next, and name it.
• Return to your text editor and replace the H1 command with the named image file. Center it on the page.

Save it and view it in your browser. If your page looks different, make sure that you used the paragraph tag to embed your centered title image.

Using the ALT Property with Image Tags

(Tutorial 3 in Textbook)

The ALT property allows you to specify text that will appear in place of your inline image. This property is important because it allows users that have nongraphical browsers to learn the content of your graphic. Alternate image text also appears as a place holder for the graphic while the page is loading. Locate the <IMG> tag for the title image. Edit the <IMG> tag as follows:

<IMG SRC="image.gif" ALT="Just Plain Stupid">

Resave your text document, then view it in your browser. You will not see any change because you are viewing this page on a graphical browser. To see if your changes have been added, place your cursor over the title image. You should see Just Plain Stupid text appear. When you take your cursor off the title image, the text will disappear.

Aligning Text Around An Image

Return to plainstupid in your text editor, Notepad. You will make the following changes:

• You will now place your image directly under the subtitle "The Wildest and Wackiest Gifts on the Web" and your shortened category names directly under the image. But for this exercise you want your image flushed to the left. We are going to align the paragraph describing the business to the right side of your image. To do this, place your cursor behind the above subtitle, press enter to return to a blank line. You will now cut your image from the paragraph it is embedded in, and place it in a separate paragraph tag just above it. It should resemble the following:

<P>

<IMG SRC="yourimage.gif">

</P>

The next line should be the paragraph with links to your anchors minus the image file you just cut from it. Save your changes and view it in your browser. Your image file should now be above your short category names, but flushed to the left side of your page. Next you will move the descriptive paragraph up next to your image. To do this, follow the steps below:

• Behind the image tag that you created, type the following before the closing bracket (>):

ALIGN=LEFT

• Delete the paragraph and header tags around your descriptive paragraph, then cut the paragraph text, and paste it behind the closing bracket of the image file you just edited above. Format the paragraph and the short category names with the H2 heading. Save your work and view it again in your browser. Notice that the text now aligns to the right of your image.

Another problem needs to be fixed. There's not enough space separating the image the the surrounding text, which makes the page appear crowded. You can increase the horizontal and vertical space around the image with the HSPACE and VSPACE properties as follows:

<IMG SRC="image.gif"VSPACE=value HSPACE=value>

The HSPACE property increases the space to the left and right of the image, and the VSPACE property increases the space above and below the image. The value assigned is measured in pixels. Return to your image you just flushed to the left and edit the <IMG> tag as follows:

<P>

<IMG SRC="image.gif" ALIGN=LEFT VSPACE=5 HSPACE=15>

Save your changes and view it in a browser. Change the value to get the best result for your image.

Programming with JavaScript

(Tutorial 7 in Textbook)

Your clients want on additional item to appear on their Web page. They are counting on selling most of their gifts during the Christmas season and want to remind their viewers of the number of shopping days left before Christmas. Just entering "There are __ days left before Christmas," would require hiring someone to update the page manually each day. It would be much better if this task could be performed automatically by a program running on the Web page itself. You will create such a program in JavaScript, a programming language designed for Web pages. For a more detailed background in JavaScript refer to tutorial seven in your textbook.

The Script Tag

The <SCRIPT> tag is a two-sided tag that identifies the beginning and end of a client-side program. Your program can be placed anywhere within the HTML file, either within the <HEAD> tags or the <BODY> tags. One problem that can be encountered with JavaScript is that older browsers might not support it. To avoid this problem, you can hide the script using comment tags (tags that will not be seen by viewers). When using comment tags within the JavaScript, you must use a set of double slashes(//) at the beginning of a line to tell the browser to ignore the line and not interpret it as a JavaScript command. The syntax for doing this is as follows:

<SCRIPT LANGUAGE="JavaScript">

<!---Hide this script from browsers that don't support JavaScript.

JavaScript commands

//Stop hiding from other browsers -->

</SCRIPT>

Having seen the basic structure of a JavaScript program, you're ready to insert the necessary lines of code into the Just Plain Stupid text editor. Open this page in Notepad, scroll down the file until you locate the heading that reads "The Wildest and Wackiest Gifts on the Web," and place your cursor after the end heading tag. Press the enter key to place your cursor on a new line. Type in the above script.

With the <SCRIPT> tags and comments in place, your next task is to write a JavaScript program that sends output to the Web page.

Sending Output to a Web Page

JavaScript provides two commands to display text on a Web page: the document.write("text"); and document.writeln("text"); commands, where text is a text string that you want sent to the Web page. Note that each JavaScript command line ends with a semicolon to distinguish it from the next command in the program.

Now you must specify the text the program will use to determine the current date and then display that information (using a test date) on the page. To do this, you have to create a JavaScript variable. A variable is a named element in a program, used to store and retrieve information. Variables are given values through assignment operators, the most common being the equals sign. To assign the variable "Year," you would enter the following JavaScript command:

Year=2001

With the Year variable assigned a value, you can use the document.write() method to display this value on the Web page, as follows:

document.write(Year);

This code would cause the text "2001" to be displayed on the Web page. Before you can use a variable in your program, you have to create it. You declare a variable in JavaScript either by assigning it a value in a JavaScript command or by using the var command to to create it without assigning it a value.

Now that you've learned a little about the document.write() method, you'll add it to the JavaScript program you just created. Below the line "!-- Hide from non-JavaScript browsers," insert the following two comments replacing the text JavaScript commands(indented to make your code easier to read):

document.write("Today is 10/03/01<BR>");

document.write("Only 181 days until Christmas");

In your program for Just Plain Stupid, you'll be working with dates as you try to calculate the number of days remaining until December 25th.