Webpage Development with Dreamweaver MX, HTML, and Image Composer

Introduction

You will be learning three new things in this unit: HTML, Dreamweaver, and Image Composer. HTML is a small set of instructions that tell browsers how to display a webpage. HTML, once learned, can be written easily using Notepad or any other simple text editor. HTML files must have a .htm or .html extension which tells the browser the file is an HTML document.

Dreamweaver MX is a state of the art, visual webpage design and development tool. It is the leading tool being used by web professionals today. With Dreamweaver you can create webpages using a WYSIWYG interface, similar to that used in Microsoft Word. Some of the key strengths of using Dreamweaver are that 1) it allows you to create webpages with little or no knowledge of HTML, and 2) it does not add any proprietary codes to the webpage. That means webpages created using Dreamweaver are compatible with all types of web servers. All webpages created in Dreamweaver have a standard .htm or .html extension.

Image Composer is a Microsoft program that can be used to work with images and pictures. With it you can make changes to a picture such as resizing, cropping, or changing how the picture looks. Image Composer files have a .mic extension.

In this tutorial, you will learn to: create a simple webpage using only HTML. use Dreamweaver MX to:

use tables to arrange elements on a webpage. upload a webpage to a web server. create forms on a webpage that email user data. create image maps. create roll-overs.

edit images for a webpage using Microsoft Image Composer.

You will be making a website for a new Online Music Store – first with raw HTML, later using Dreamweaver.

1

Activity 1: Basics of HTML and Web Pages

Creating webpages is not intellectually challenging – that’s why fourth graders are making webpages today. However, like anything else new, you have to spend some time learning how to do it, and practice definitely makes perfect (fourth graders have a lot of time on their hands).

So first there are several key concepts that underlie the entire process. Understand these, and the rest will be far more painless. Let’s get started.

Introduction to Unix

1. First there is the concept of the directory structure of a computer. a. The term ‘directory structure’ refers to the set of folders and files on a computer and

how they are arranged. Lets consider the computer you are using right now. Recall that your hard drive is represented by C – sometimes written as C:\. That is the ‘top’ or ‘root’ of your file system – meaning that all folders and files are stored on the C drive.

b. Say I create a folder on my C drive and name it mis253 (notice I have no spaces or capitals in this folder name – I will explain why later). So right now my C drive contains one folder – mis253. The folder is empty right now- pretty boring. What can I put in this folder? Three things – another folder, a file (eg. a picture, a Word document, or a music file), or an application (eg. Word). Say I put a file named termpaper.doc in my mis253 folder on my C drive.

c. If I want to tell someone where to find my termpaper.doc file, I have to tell them something like: Turn on my computer – then go to the C drive – then go into a folder named mis253 (all lower case, no spaces or periods). In that folder you will find my file, which is named termpaper.doc. The way you would say the same thing to a computer is a bit more precise – you would type in this ‘path’: C:\mis253\termpaper.doc – it says the same thing as the long explanation. As you can see, a ‘path’ is the way to find a file – that is, how you have to move through folders to get to the file.

d. Simple – but one more thing. Say you put a folder in your mis253 folder and call it term_papers (again, all lower case, no spaces – but here I am using an underscore to sort of stand for a blank space so it is easier to read). Then you move your termpaper.doc file to the new folder. Now the path to your file is: C:\mis253\term_papers\termpaper.doc – understand?

e. One last thing – if someone already knows where your mis253 folder is, you can take a shortcut – you could tell them something like: from there (the mis253 folder) go to the term_papers folder and inside that folder you will find termpaper.doc. For the computer, you would give this path: ./term_papers\termpaper.doc – notice the ‘./’ at the beginning of this path. The ‘.\’ means ‘from where you are right now’ – in this case, from inside the mis253 folder. This path is a relative one – that means that the path directions to the file starts from inside of the mis253 folder in this case.

f. That is the heart of the matter. Now we have to take this concept and apply it to a web server. Most web servers do not use Windows as their operating system – they use a system called Unix. That is the case with the web server you will be using. The rules are only slightly different for a Unix server. Here are the differences:i. File names are case sensitive and cannot contain any periods or spaces. Let me

repeat, file names are case sensitive and cannot contain any periods or spaces. So the file name Term Paper.doc is illegal (spaces) – and the file named dog.doc is considered completely different than a file named Dog.doc. Recommendation –

2

always use all lower-case to name files and folders! That way you don’t have to try and remember if you capitalized file names or not.

ii. The slashes in the path go the other way – Our examples above for your Windows computer used \s. Unix servers use /’s – this is easy to remember as it is the way slashes go in website addresses (because the web is based on Unix systems).

iii. Folders are called directories in the Unix world – actually, the Unix world came way before the Windows world – so directories came before the term folder. But they both mean the same thing.

2. The next important concept – your account on the Unix server is actually just a directory, about three or four levels from the root. When you log into your account, you are in your ‘home directory’ – that is, your account folder.

3. In order to display webpages from your account, all of your webpages must be in a public_html directory, which must be in your home directory. Browsers that are directed to your account enter your account through this folder – if it is not there, the browser will not be allowed access to your account.

a. Note that you can put files and directories inside your public_html directory.

HTML Basics

Now let’s change gears for a minute and create a simple webpage using HTML. A webpage is simply a file that contains HTML commands along with some text or content. HTML commands are simply a set of words that have meaning to browsers. They are written into a text file (with the extension of .htm or .html). When a browser is given a file with this extension, it knows it is an HTML file, and so instead of displaying the contents of the file, the HTML commands, it instead follows the instructions of the HTML commands about how to display the file contents. So that browsers can tell the difference between the HTML keywords and the regular words in the file, we bracket the HTML words with <> and call them tags. An example is <B>, which turns on Bolding. To turn Bolding off, use </B> - the slash says to stop doing the command following the slash.

In order to create webpages, you have to learn the HTML commands. There are not very many – far less than words in the English language! Let’s make a simple page using some of the basic commands. You should know that the web is rampant with free (and excellent) tutorials for how to write HTML – make use of this resource! One example of such a site is Ted’s Comprehensive HTML Tutorial at http://www.tedmontgomery.com/tutorial/ .

1. Here are the HTML commands, called tags, that you will use to create your first webpage.

HTML Tag Name Meaning Turn Off Tag<HTML> HTML Tells browser that HTML text follows. </HTML>

<HEAD> Head or Heading

Provides browser with additional information that is not displayed on the webpage itself.

</HEAD>

<TITLE> Title Text following is displayed on the title bar of the browser window when the page is being viewed.

</TITLE>

<BODY> Body Tells browser where the content for the webpage begins and ends.

</BODY>

BGCOLOR=”#12345” Background color

Tells browser the background color for the entire webpage. The color is coded using five digits (go online to get color codes). Goes inside of the BODY tag.

none needed.

<B> Bold Bolds text that follows it. </B>

3

<H1> thru <H6> Heading Makes large and bolded headings of text following it (in increasing size)

</H1> thru </H6>

<BR> Break Content following will start on the next line.

none needed

<P> Paragraph Adds a blank line before starting content </P><CENTER> Center Tells the browser to center the content

following it. </CENTER>

Table 1: Basic HTML Commands

2. You will be using Notepad (or Wordpad) to create your webpage. So open either (under Start > Accessories). Both are simple word processors.

3. Before you write any HTML, save the file. Name the file homepage.html (or .htm). If you are using Wordpad, be sure to change the file type (drop-down box in Save window) from RTF to Text. If you are using Notepad, change the file type (drop-down box in Save window) from Text to All Files.

a. Create a new folder on your local computer named webpages, then create a folder inside of it named online_store. Save your webpage into that folder.

4. Now your’re ready to create a homepage for the Online CD Store. Write the following HTML to set up the framework of the webpage:

<HTML><HEAD><TITLE>CD World</TITLE></HEAD><BODY BGCOLOR=”#77880”>

</BODY></HTML>

5. Save this file (again) into your webpages > online_store folder (pick File > Save).6. Add these HTML tags to flesh out the webpage. Be sure to put them between the <BODY>

and </BODY> tags. Also, your logo may be named logo.jpg or logo.gif.

<H4>Welcome to CD World!</H4> <P>Welcome to our online CD store. We are sure that we can meet all of the music needs – we can get any song that you might want. Browse to find what you want, and if you don’t see it, let us know and we will get it for you!<P>We have three locations in Omaha:<BR>Please visit us today!

7. Save your webpage (again).8. You can look at your webpage locally before you upload it. To do this, open Internet

Explorer, and pick File > Open. Find your homepage.html file and open it. See if it looks like you want it to. If you want to make some changes:

a. go back to your firstpage.html file in Notepad and type in your changes. b. save the file (File > Save).c. refresh your browser (to show the page with your new changes).

Keep doing these steps to make all of the changes you want to your webpage!

Now to upload!

4

WS-FTP

Now let’s talk about how to put folders and files into your web server account. We will be using a free program named WS-FTP. The FTP stands for File Transfer Protocol and the WS stands for Windows (this is the windows version of FTP). Basically it is a program or application that allows you to either upload files from your computer to (in our case) your web server or to download files from your web server account to your computer. It goes both ways. You can also use it to create, delete, and rename directories in your web server account.

1. Start up WS-FTP. A two pane window comes up with the Session Properties window displayed over it (see Figure 1). If the Session Properties window is not showing, double-click on the Connect button on the bottom left of the two-pane window.

Figure 1: WS-FTP with Session Properties Window Displayed

2. The first time you are on your computer, you have to first fill out the Session Properties window fields so that WS-FTP will know how to log into your web server account. After the first time, every time you use this computer, you can simply pick from the drop-down menu the Profile Name you have created. But for this first time, fill out the fields as follows:

a. Click on the New button on the top right of the Session Properties window. b. Profile Name : otis (or whatever your web servers’ name is)c. Host Name/Address: otis.creighton.edu (in this case, the name of your web server is

otis; use the name your instructor provides)d. Host Type: Automatic Detecte. User ID: xxx12345 (this is your netID or account name on the web server)f. Leave the rest of the fields blank and click on the Apply button. Now this information

will be saved under the name otis. 3. Now click on the Connect button and WS-FTP will log into your account on your web

server. When it connects, the Session Properties window will disappear. 5

4. Currently you are seeing the two-pane WS-FTP window. The left-hand side displays files and folders on your local computer (the computer on which you are working). The right-hand side will show the directories and files in your account on the web server to which you have just logged in.

5. Now for the upload. a. First locate your homepage.html file on your local computer file system on the left

window pane. Highlight it. b. On the right hand side, double-click the public_html directory to go into it. Then

create a new directory (click on the MkDir, short for Make Directory) button on the right – name it first (again, note all lower case, no spaces or periods). Double-click on the new directory to go into it.

c. With the file that you want to upload highlighted on the left and your desired location on the right, click on the arrow in the middle that points from left to right (so the file will be moved from the right – local side – to the left – server side) – essentially uploading the file.

d. For future reference, if you want to download a file from the server to your local machine, you just use the other arrow (moving from right to left).

e. Your file will now show on the left hand side as well as the right – just a copy is uploaded – the original remains behind on the local server.

The Big Moment

1. It’s time to view your webpage on the Internet! Here is the URL:a. http:// - says you want the browser to display an HTML webpageb. servername.location.domain - this tells the browser on which server at what location

the webpage is stored. For example, if the server name is otis, this part would be: otis.creighton.edu

c. ~xxx12345 - your web server account name preceeded by a tilde (above the Tab key)

d. At this point, you have: http://otis.creighton.edu/~xxx12345 – the browser is now in your public_html directory, in your account, on a server named otis, at the creighton.edu location.

e. Now you have to tell the browser the path within the public_html directory to follow to find the file. Here, the path is to go into the first directory (which is in the public_html directory).

** So the complete URL will be:http://otis.creighton.edu/~xxx12345/first/homepage.html

That’s it!

Exercises:1. Finish the webpage from this activity and hand in the URL for it. 2. Make a webpage about a topic of your choice that uses all of the tags from Table 1. Put the

page in a directory named ass1 (in the public_html directory). Name the file index.html (or .htm). Hand in the URL.

6

Activity 2: Building a Webpage using More HTML

You will be making another webpage for the new Online CD Store using HTML.

In this activity, you will use the tags from Activity 1 as well as some new tags shown in Table 1 below.

HTML Tag Name Meaning Turn Off Tag<IMG SRC=”filename”> Image This tells the browser to display the

image ‘filename’ at that location on the page.

<A HREF=”url”>xxx Link This tells the browser to display (in this case) xxx as a link on the webpage and when a user clicks on it, to bring up the webpage at the specified url.

</A>

<OL> or <UL> Ordered List or Unordered List

Tells the browser to create a list of the items following, using numbers (OL) or bullets (UL).

</OL> or </UL>

<LI> List Item Precedes each item in an Ordered or Unordered list.

none needed

<HR> Hard Rule Adds a line across the page none needed<I> Italicize Italicizes text between start and stop

tags</I>

Table 1: More HTML Tags

1. Open Notepad (or Wordpad) and save the blank file in your webpages\online_store folder. Name the file firstpage.html (or .htm).

2. This time you will also need an ‘images’ folder in which to save pictures and graphics for the webpage. Go into your online_store folder and create a folder there named ‘images’.

3. Now you will get a logo for the homepage. Go to www.google.com and click on the Images tab. Search using the terms ‘online music’. Find a logo picture you like and right click on it. Pick the ‘save as picture’ option. Save the picture into your new images folder – name it logo (it will have a .jpg or .gif extension). ** note that pictures in the Google > Images search may be copyrighted and need permission of the owner before they can be used outside of class.

4. Now you’re ready to create a new homepage for the Online CD Store. 5. Write the following HTML to set up the framework of the webpage:

<HTML><HEAD><TITLE>CD World</TITLE></HEAD><BODY BGCOLOR=”#77880”>

</BODY></HTML>

7. Save this file again.8. Add these HTML tags to flesh out the webpage. Be sure to put them between the <BODY>

and </BODY> tags. Also note that your logo may be named logo.jpg or logo.gif.

<H4>Welcome to CD World!</H4> <IMG SRC=”./images/logo.gif”> <P>

7

Welcome to our online CD store. We are sure that we can meet all of the music needs – we can get any song that you might want. Browse to find what you want, and if you don’t see it, let us know and we will get it for you!<P>We have three locations in Omaha:<BR><OL> <LI>12232 F St., <I>441-8957</I> <LI>3405 Center Road,<I> 312-1287</I> <LI>112 Farnam St., <I>331-1254</I></OL>Please visit us today! Our University sponsor is <A HREF=”http://www.creighton.edu”>Creighton University</A>.

9. Save your webpage (again).10. Open Internet Explorer, and pick File > Open. Find your firstpage.html page and open it. See

if it looks like you want it to. If you want to make some changes:a. go back to your firstpage.html file in Notepad and type in your changes. b. save the file (File > Save).c. refresh your browser (to show the page with your new changes).

Keep doing these steps to make all of the changes you want to your webpage! 11. Or just upload it – make a new directory in your public_html directory named ass2 – and put your new webpage firstpage.html in that directory. Then look at the webpage in a browser using the URL http://otis.creighton.edu/~xxx12345/ass2/firstpage.html - enjoy!

Exercise:

1. Finish the webpage from this activity and hand it in. 2. Make a webpage named index.html – put it in your ass2 directory. On this page, you can put

anything you want - pick a theme so it fits together (ie. about you, about your family, about an interest of yours, etc). Your page must contain the following tags:

a. HTML b. HEAD or HEADING c. TITLE d. H1, H2, ..., H6 (use two of these) e. BODY f. BGCOLOR g. P h. BR i. HR j. Bk. I l. IMGm. OLn. ULo. A HREF …..

8

Activity 3: HTML Tables and Forms

In this section you will learn how to use an HTML tag called TABLE to control how your webpage is laid out. You will also learn how to create an input form using the HTML tag FORM so that visitors to your page can fill out information. This information will then be sent to you by having your webpage use a small web program called Formmail. Let’s get started with the TABLE first.

Table in HTML

1. Get all of your webpage development applications ready (see Activity 1, step X). Also get a logo you can use for this activity and a small picture of a person and save them into your images folder. Name them logo.gif (or .jpg) and person.jpg.

2. Using either Wordpad or Notepad, write the skeleton HTML tags to set up a basic webpage:<HTML><HEAD><TITLE>HTML tables and forms</TITLE></HEAD>

<BODY>

</BODY></HTML>

3. Save the file and upload it. View it in the browser. If it ‘works’, you will simple see a blank webpage. If that is the case, continue on. If not, correct the problem.

4. Now we will create the table. A table is simply a grid made of rows and columns – so before writing any HTML, draw a rough sketch of how you want the webpage to look – just use a pencil and paper. For this exercise, the following is the layout we are going to create – at the same time, write in what will go in the different areas (see Figure 1). The box with the squiggly lines represents an area for text.

Figure 1: Rough Sketch of Webpage Layout

5. Now draw in lines so you can see how your design can fit into the grid of a table. Then count the number of rows and columns you will need (see Figure 2). You can see you will need 8 columns and six rows to fit your sketch. Notice that some items, like the text area, span over rows and columns (represented by dotted lines) – that’s ok, as you will see later.

9

Figure 2: Rough Sketch with Rows and Columns

6. So now you can add the HTML to create a table with four columns and four rows. First write the HTML for a table with four rows (note the indenting – HTML doesn’t require this – browsers ignore it – but it makes it much easier for you to read, so be sure to include it). A blank line was left between each row just to make it easier for you to see in this step.

<BODY><TABLE> <TR> </TR>

<TR> </TR>

<TR> </TR>

<TR> </TR>

<TR> </TR>

</TABLE></BODY>

7. Next you will add one column for each row, to rough out the table. The HTML tag for column is TD – short for Table Data. It corresponds to a cell in a spreadsheet. So the HTML below shows one column, or cell, in each row – basically a four row, one column table. Note that each TD or table data cell holds something – a code &nbsp – this is the HTML code for a blank space. Without this, the table data cell would be empty and so it wouldn’t show on the browser (like a deflated balloon) – browsers don’t display ‘empty’ cells – but these cells are not empty now since they hold a blank space character.

<BODY><TABLE> <TR>

<TD>&nbsp</TD> </TR> <TR>

<TD>&nbsp</TD> </TR> <TR>

<TD>&nbsp</TD> </TR> <TR>

<TD>&nbsp</TD> </TR>

10

<TR><TD>&nbsp</TD>

</TR> <TR>

<TD>&nbsp</TD> </TR></TABLE></BODY>

8. Now you can fill in the table, one row at a time. Each time you complete a row, save the webpage, upload it and view it to make sure it works like you want. Fix any errors before proceeding. Start with the first row – add the HTML to make four cells (so four columns) in that row. In each cell, put the information you want in the given cell. Refer back to your sketch to see what goes in the cells. In the first row, the only item is the logo image. The other cells are all blank. However, the logo is left-justified in it’s cell – so add HTML to left-justify the contents of the first cell. An FYI - any HTML tags can go in a table cell, even another table!

<TR><TD ALIGN=”left”><IMG SRC=”./images/logo.gif”></TD><TD>&nbsp</TD><TD>&nbsp</TD><TD>&nbsp</TD>

</TR>

9. Now for row 2 – we will ignore the three links for now since they span multiple rows. So that leaves a picture in the third column. Here is the HTML for that:

<TR><TD>&nbsp</TD><TD>&nbsp</TD><TD>< IMG SRC=”./images/person.jpg” </TD><TD>&nbsp</TD>

</TR>

10. Now for row 3 – ignoring the link block, this row is has text in the first column. So you can add this text.

<TR><TD>Welcome to the website of Pat, a student at Creighton University. Creighton

University is a private Jesuit university located in Omaha, Nebraska. Creighton has a College of Business Administration, Arts and Science, and Medical, Dental, Allied Health, and Law schools. </TD>

<TD>&nbsp</TD><TD>&nbsp</TD><TD>&nbsp</TD>

</TR>

11. Now for row 4. It is blank – just a spacer essentially to keep the text content from going to the bottom of the page. So here you just have to add three more cells.

11

<TR><TD>&nbsp</TD><TD>&nbsp</TD><TD>&nbsp</TD><TD>&nbsp</TD>

</TR>

12. OK, now for let’s go back and work with the block of text. Notice from your sketch that is spans rows 2 and 3. In HTML, you can merge table cells by row or by column. COLSPAN and ROWSPAN are the tags for spanning multiple columns or rows (ie. Merging). Here you need ROWSPAN. Since you are spanning rows 2 and 3 in the last cell of each row, you also need to remove the last cell in row 3 since it is being spanned by the last cell in row 2.

Here is the HTML for the entire page, including the HTML to allow the links cell to span rows 2 and 3. Three links have also been added.

<TR><TD ALIGN=”left”><IMG SRC=”./images/logo.gif”></TD><TD>&nbsp</TD><TD>&nbsp</TD><TD>&nbsp</TD>

</TR><TR>

<TD>&nbsp</TD><TD>&nbsp</TD><TD>< IMG SRC=”./images/person.jpg” </TD><TD ROWSPAN=”2>

<A HREF=”http://www.creighton.edu”>Creighton University</A><A HREF=”http://cobweb.creighton.edu”>College of Business

Administration</A><A HREF=”http://puffin.creighton.edu/ccas/arts-sci.htm”>Arts and

Science</A> </TD>

</TR><TR>

<TD>Welcome to the website of Pat, a student at Creighton University. Creighton University is a private Jesuit university located in Omaha, Nebraska. Creighton has a College of Business Administration, Arts and Science, and Medical, Dental, Allied Health, and Law schools. </TD>

<TD>&nbsp</TD><TD>&nbsp</TD>

</TR><TR>

<TD>&nbsp</TD><TD>&nbsp</TD><TD>&nbsp</TD><TD>&nbsp</TD>

</TR>

That’s it! Your table is done!12

Form in HTML

Now you will create a simple form. You have likely filled out webpage forms when you order items off the web. You fill in your information, then click on the Submit button. That’s what you will be creating here. In this case, you will be using a free application named Form Mail that will take the information your webpage visitor has filled in and email it to you when they click the Submit button! Let’s go –

1. Get all of your webpage development applications ready (see Activity 1, step X). 2. Draw a sketch of the form you want to create. Forms have a lot of different elements – this

exercise won’t use them all. You can find more information on all of the possible form elements on the web.

3. This form will require the following form elements:a. Text boxes (to hold the first and last names)b. Radio buttons (for the vanilla and chocolate choices)c. Drop-down box (for the month)d. Buttons (submit and clear)

4. First you have to create the form – you can add the text at the top of the page at this time also. In this example, the HEAD and HTML tags are not shown.

<BODY>Fill in the information: <P>

<FORM>

</FORM></BODY>

5. Next you will add each set of elements, one at a time so you can upload and test before adding the next. First is the first name. You have to type in the label (the text – First Name), and then the form element, in this case the text box. The first part of the tag describes that it is a tag that gets input from the visitor (INPUT). Then the type of the tag is identified (TYPE=”text”). Finally you name this form element – name it using the same conventions

13

you have been using – all lower case, no spaces. Also, name it something that represents what it is – here, first_name. This ‘name’ will be used to identify the data that is emailed to you. For example, if the visitor fills in Bob here, you will get in your email: first_name = Bob.

<FORM> First Name: <INPUT TYPE=”text” NAME=”first_name”></FORM>

6. Repeat for the Last Name field. You will have to put a BR tag at the end of the first name line to make these go on separate lines. This is true of all form elements.

<FORM> First Name: <INPUT TYPE=”text” NAME=”first_name”><BR> Last Name: <INPUT TYPE=”text” NAME=”last_name”></FORM>

7. Now you can add the radio buttons and the text about flavor. The only trick to these is that you have to give them both the same name since the visitor can pick only one of them. If you give each a different name, the user can pick both since the browser will consider them separate groups. Since the names are the same (ie. flavor), the Value will tell you which one the visitor chose. So if the visitor chose Chocolate, your email will show: flavor = Chocolate. Notice that with radio button elements, the label comes after the INPUT tag, not before it like it did with the text boxes. That is because you want the label to be displayed after the radio button.

<FORM> First Name: <INPUT TYPE=”text” NAME=”first_name”><BR> Last Name: <INPUT TYPE=”text” NAME=”last_name”><P>

Favorite flavor of ice cream:<P>

<INPUT TYPE=”radio” NAME=”flavor” Value =”Vanilla”> Vanilla<BR> <INPUT TYPE=”radio” NAME=”flavor” Value =”Chocolate”> Chocolate<P>

</FORM>

8. Next is the drop-down box. The HTML tag for a drop-down box is SELECT (as in your visitor will be selecting one of the items listed). This form element is a bit different. You still name it, but for this element, each item in the drop-down menu is indicated with the <OPTION> and </OPTION> tags. Only the first three months are shown below.

<FORM> First Name: <INPUT TYPE=”text” NAME=”first_name”><BR> Last Name: <INPUT TYPE=”text” NAME=”last_name”><P>

Favorite flavor of ice cream:<P>

<INPUT TYPE=”radio” NAME=”flavor” Value =”Vanilla”> Vanilla<BR> <INPUT TYPE=”radio” NAME=”flavor” Value =”Chocolate”> Chocolate<P>

Favorite month to each ice cream: <P> <SELECT NAME="select">

14

<OPTION>January</ OPTION ><BR> < OPTION >February</ OPTION ><BR> < OPTION >March</ OPTION ><BR> </SELECT><P>

</FORM>

9. Finally, the buttons. You will need a submit and a reset button (to clear out anything that was written in the fields). The LABLE tag indicates what label is placed on the button – on the Reset button, you want Clear to be displayed. Note that exactly what you type in for the VALUE will be displayed on the button.

<FORM> First Name: <INPUT TYPE=”text” NAME=”first_name”><BR> Last Name: <INPUT TYPE=”text” NAME=”last_name”><P>

Favorite flavor of ice cream:<P>

<INPUT TYPE=”radio” NAME=”flavor” Value =”Vanilla”> Vanilla<BR> <INPUT TYPE=”radio” NAME=”flavor” Value =”Chocolate”> Chocolate<P>

Favorite month to each ice cream: <P> <SELECT NAME="select"> <OPTION>January</ OPTION ><BR> < OPTION >February</ OPTION ><BR> < OPTION >March</ OPTION ><BR> </SELECT><P>

<INPUT TYPE=”submit” NAME=”submit” VALUE = “Submit”> <INPUT TYPE=”reset” NAME=”reset” VALUE = “Clear”>

</FORM>

10. One last item – you will see that your form elements and labels don’t line up very nicely – the form looks like an amateur created it. Don’t worry – it is your first time. But now that you know how to create a form, know that you always put a form in a table – so you can line things up. Labels can go in one column, form elements like text boxes in the next column. Then your form will look professional.

Exercises:

1. Finish the table and form webpages from this activity and hand them in. 2. Create a new webpage that has a form asking for information about your website visitor. Put

the form in a table so that all of the labels and form elements line up professionally (see www.amazon.com for an example). These fields must be included:

a. First Name – text elementb. Last Name – text elementc. Email – text elementd. Favorite hobby – radio buttons (reading, sports, watching movies, eating)e. Favorite COBA class – drop-down menu (MIS, ACCT, FIN, MKT, ECON, Stats,

Ethics, Other)15

f. Why is this your favorite class – textareag. Submit and reset buttons

16

Activity 4: Introduction to Dreamweaver

Now for Dreamweaver! The first thing you do whenever using Dreamweaver is to set up the folders in which you will be saving your webpages on your local machine, and to set up the internal Dreamweaver FTP. That’s right – Dreamweaver has FTP incorporated into it! So you can upload your webpages without leaving Dreamweaver!

1. Start Dreamweaver by picking Start > All Programs > Macromedia> Dreamweaver MX > Dreamweaver. 2. From Dreamweavers menu bar, pick Site > Manage Sites.3. In the popup window, click on Online Music site, and then click on the Edit button (see Figure 1).

Figure 1: Manage Sites Window

4. The Site Definition window comes up (see Figure 2). You will use this window to tell Dreamweaver where to find your web server and how to log into your account so that you can upload files into your account.

Figure 2: Edit Sites Window17

5. Click on the Remote Info option on the left hand side of the window (see Figure 3). On the right hand side, there is a dropdown that says Access: None. Pick the dropdown and choose FTP. Your instructor will tell you about FTP and its uses. Fill out this screen with the information your instructor provides (see Figure 3). You will need to fill out (write them here): a. FTP host: the URL of the web server.b. Host directory: the folder that holds all of your web work.c. Login: your account name on the web server.d. Password:. your account password. Unless the computer you are using is your own, it

is a good idea to leave the password field blank. Then Dreamweaver will prompt you for your password each time you upload. This is a good idea so that other people on this computer cannot upload to your account.

Figure 3: FTP Window for Site Manager

6. Finally, click on OK at the bottom of the window. This will take you back to the small Manage Sites window (it lists all of your sites; see Figure 1). To finish, click on Done at the bottom of that window.

7. At this point, you have told Dreamweaver how to connect to your web server and how to log into your account on the server. Your website is still displayed on the right hand side of the screen in the Files panel. It has two tabs: Files and Assets. Click on the Files tab (see Figure 4). Note the two dropdowns on the top of this panel – the left one lists all of the sites you have defined. The right has several options – the one showing now is Local. Local displays the website folders and files on the computer on which you are currently working. Remote, another option in the drop-down, shows you the folders and files on in your account on your web server for a given local website. So your next job is to get your web server account ready to store your webpages and images.

18

Figure 4: Files/Assets Window

8. You will create folders in your web server account that have the same names and structures as the ones you made on your local computer for your online CD store website. a. First, double-click on the icon with the two small blue plugs on the Files panel (see

Figure 4). This tells Dreamweaver to connect to the server and log into your web server account. When this icon has a green dot, you are connected and logged in to your account.

b. Next pick the Remote View option from the drop-down on the Files/panel (see Figure 4). It probably currently says ‘Local view’. This will change the view from showing the files and folders on your local computer to showing the files and folders in your account on the web server (see Figure 5).

Figure 5: Site Manger, Remote View Menu

c. Now we need to create a folder in your server account to hold your website. Right click on the top folder and pick New Folder. Name the new folder ‘websites’ (notice no spaces or capitals). Double click on the new folder to open it.

9. Now you can upload your local webpage files (firstpage.html, index.html, and the images folder with the three images in it) into this new folder in your web server account. a. Pick the Local View again, then highlight your online_store folder by single-clicking

on it. Click on the Blue arrow pointing up (for upload). The online_store folder and all of the folders and files inside of it will be uploaded into your new ‘websites’ folder in your web server account. If you are asked about Dependant Files, say Yes (dependant files are files that are used in a webpage, such as images. They don’t have to be uploaded each time unless they have been changed).

19

10. Now your webpages are ready to be viewed over the Internet! They are on the web server! Open a browser window and type in the URL for your webpages (your instructor will give you the URL). Enjoy!a. Notice that you don’t have to type the filename to see the file named index.html– this

is because browsers automatically look for files with this name and display them – no filename needed!

Exercises:

1. Make a new webpage about your favorite thing – a sport, an animal, a hobby. The page must include the following tags:

a. HTML b. HEAD or HEADING c. TITLE d. H1, H2, ..., H6 (use two of these) e. BODY f. P g. BR h. HR i. FONT SIZE j. FONT COLOR k. BODY l. BGCOLOR (goes in BODY statement) - check it out in your html book m. B (for bold) n. I (for italics) o. IMG (don’t forget to upload pictures also)

20

Activity 5: Using Tables for Layout

Now let’s move our focus to using Dreamweaver MX to create a webpage. Dreamweaver lets us visually create webpages – unlike HTML, where we can’t see how the HTML webpage we are making actually look unless we open them in a browser. Your instructor will take you on a tour of the Dreamweaver menu items (in particular, Insert and Modify) and windows (in particular, Properties and how they work), and the Code vs. Design Views before you proceed. Your instructor will also describe HTML Tables – how they work and how they are used.

1. Start Dreamweaver by picking Start > All Programs > Macromedia> Dreamweaver MX > Dreamweaver.

2. When Dreamweaver starts, it presents a green titled window (see Figure 1).

Figure 1: Initial Dreamweaver Window

In this window, pick HTML from the Create New (middle) column. This will give you a new, blank webpage (see Figure 2). That’s where we will start. (The menu items File > New would also open a new, blank webpage.)

21

Figure 2: Dreamweaver Blank HTML Page

3. Dreamweaver is designed to help you create an entire website. So the first step is designate a folder in which you will place all of the webpages and images for a new website. Setting up this new site must be done in Dreamweaver before you can begin – so we will do this next.

From Dreamweavers menu bar, pick Site > Manage Sites (see Figure 3)

Figure 3: Manage Sites Window

2. In the popup window, click on New. A new window comes up titled Definition for Unnamed Site 1 (see Figure 4).

22

Figure 4: Site Definition Window in Dreamweaver

3. Fill out the fields in this window as follows. a. Site Name: name your site Online Music. b. Local root folder: this is the folder in which you will store the new website and all

associated files and folders. We will use Local Disk (C:) > webpages > online_store (use the Browse to find this folder you have already created).

c. Default images folder: this is the folder in which you plan to keep all of the images used in the website. Browse to C:\webpages\online_store\images.

d. Make sure Cache is checked (this helps to speed things up). e. Click on OK, then Done on the next window.

4. Now you need some pictures. Go online and get two more pictures, one of someone listening to music and one of a music performer. Name them listening and performer and save them both into your online_store/images folder. Remember, they must have either a .jpg (picture) or .gif (graphic) extension to be visible on a webpage.

5. Next open your first webpage, firstpage.html. To do this, on the right side of the Dreamweaver window (where your site is now displayed), double-click on firstpage.html (see Figure 5).

Figure 5: Firstpage.html23

Note that you now have two pages open in Dreamweaver: a blank, untitled webpage with no name yet, and your firstpage.html page (see the tabs just above the webpages on the left?)

6. Dreamweaver can show your webpage in Designer View or Code View (options just below the tabs on top left). Look at it first in Code view – look familiar? Now display it in Design View and leave it in that view. You will work with this view most of the time.

7. Now that you see how you can open a ‘plain HTML’ file in Dreamweaver, we will create a new homepage similar to the one you made using HTML. Click on the blank webpage tab (it will say ‘untitled-1) and make sure Dreamweaver is in design view. Then save the ‘blank’ webpage – into the websites > online_store folder – name it index.html.

8. Insert a table with 9 rows and 2 columns. Put the content from your first webpage (just copy and paste the text) in your new table and add what is needed so it looks like the one below (see Table 1). Notice that some table cells are merged (highlight the cells to merge, then pick Modify > Table > Merge). Note the text and image alignments with a given cell.

Table 1: Outline for Webpage Using TablesWelcome to theOnline CD Store!

INSERT logo IMAGE HERE

Welcome to our online CD store. We are sure that we can meet all of the music needs – we can get any song that you might want. Browse to find what you want, and if you don’t see it, let us know and we will get it for you!INSERT performer IMAGE HERE

INSERT listening IMAGE HEREWe have three locations in Omaha:12232 F St., 441-8957 3405 Center Road, 312-1287 112 Farnam St., 331-1254

Please visit us today!

8. Save your new webpage in your online_store folder again. 9. View your new webpage in a browser (F12 is the quick key for this in Dreamweaver). 10. This is the goal of tables – using them to dictate to the browser where you want text and

graphics to appear on the webpage! 11. Go ahead and play with the page – add stuff, move things around, whatever to make it look

good.

Exercises:

1. Finish the webpage in this activity and hand it in.2. Create a new webpage about yourself as a sales manager for the company. Put a link to this

page on the homepage for the company that you just created. Use a table. Include all of the classes you are taking, your hobbies, and anything else you want to include. You must have at least four rows and three columns. Use at least one picture/image in one of the table cells and a link to your favorite website in another cell.

24

Activity 6: Creating an Online Order Form

An important part of any website store is interacting with customers. Since this is your first website, we are going to keep it simple and just have five songs for sale. All songs are 50 cents. Your store takes Mastercard, Visa, and Discover. Of course, you will need a credit card number and expiration date for the card. Some additional personal information will also be required for a sale. Your website will then mail each new order to your web server account. Since you are just starting, you will process the transaction by hand when you get it via email – a bit primitive, but a start! For the purposes of this activity, we will ignore the serious security implications of really sending credit card information over a non-secure Internet connection!

The HTML tag used to collect information from your customer and then take an action (here, email the information to you) is FORM. Forms can contain several different elements – text boxes, check boxes, buttons, and others. Your instructor will go over the different form elements with you. For this activity, you will be collecting and emailing the following information from customers:

1. CD choices (5 CDs are listed – customers can choose any of them, but just one of each CD). The CD titles are:

a. Ocean Avenueb. Miss Youc. First Dated. Accidentally in Lovee. The Anthem

2. Customer first and last name3. Customer email address4. Credit card type (Mastercard, Visa, Discover)5. Credit card number6. Credit card expiration (month and year)

For this activity, you will be making a new webpage for your website that has the order form on it. Let’s get started.

1. Start Dreamweaver.2. In the Files panel (on the right side of the window), right click on your Site. A menu will

come up (see Figure 1) – pick New File to create a new file (webpage) for your form. Name the new file ‘order_form.html’ (note the underscore).

Figure 1: New File creation from File Panel menu

25

3. Double-click on the new file order_form.html in your Files panel. It will come up on the left hand side of the window.

4. You will start by inserting a blank form. From the menu, pick Insert > Form > Form. Your webpage will now contain a blank form outlined in red (see Figure 2).

Figure 2: Blank Form on Webpage

5. Now place your cursor inside the blank form (between the red lines) and insert a table there for layout of the pages content. The table should have 21 rows and four columns.

6. Make the first four rows of the table look like Figure 3 below. You will have to merge some of the columns (highlight columns, then pick Modify > Table > Merge cells).

Figure 3: First Four Rows of Layout Table

26

7. Now you will add the form elements. Start with the songs that your customer wants to purchase. Add the associated text, so that your table looks like Figure 4 below.

Figure 4: Songs for Sale Part of Form

8. Now, right before each song title, put a checkbox form element by picking from the menu Insert > Form > Check Box (see Figure 5).

Figure 5: Form Checkboxes

9. Finally, one by one click on each checkbox and name it with the same name as the song it precedes – the name field is in the Properties panel. Do this by selecting the checkbox, then in the Properties Panel, under Checkbox name, enter ‘Ocean Avenue’ The name of any checkboxes that your customer checks will then be included in their email order automatically.

27

10. Next you will add two form textfield elements, one for your customers name and one for their email address. Name the first textfield ‘name’ and the second ‘email’ in the Properties Panel. When you are done, your page should look like Figure 6 below.

Figure 6: Form with Textfields

11. Next is the credit card information. You will be adding radio buttons for the card types and list/menu form elements so your page will look like Figure 7 below. Follow these steps:

Figure 7: Radio buttons and List/Menu Form Elements

a. For credit card type, use radio buttons. There are three choices: Mastercard, Visa, or Discover. Name each of the radio buttons the same name: creditcard since they all represent the same entity.

b. Expiration needs two drop-downs; one for the month and one for the year. Pick from the menu Insert > Form > List/Menu. (Hint: to get the year drop-down and label in place, split the cell following the month into two.) Name the month list element ‘expiration month’ and the year list element ‘expiration year’.

28

c. Next you have to fill in the lists. Select the month list element and then click on the List Values button on the right side of the Properties Panel. This brings up a List Values window (see Figure 8). For each month (01, 02, 03, …, 12), click the +, then type in the element. When you have added all twelve, click on OK. Do the same for the year element – 2004 through 2010.

Figure 8: List Values Window

12. Finally, you are ready to add the Submit and Reset buttons on the form! Place your cursor in Row 20, Column 2 of the table. Then pick from the menu Insert > Form > Button. Highlight the button and make sure the Action in the Properties Panel is Submit. Under Label in the Properties Panel, type Send Order – that will appear on the button.

13. Repeat this for a reset button in the next cell to the right, except check Action Reset. Your form will now look like Figure 9 below.

Figure 9: Form with All Form Elements and Text in Place 29

14. The last thing that has to happen is to add information to the form so that when the customer clicks on the Submit Order button, their order is emailed to you. There is a small, free program called Form Mail that has been installed on your webserver that can do this. The filename of the program is formmail.pl. When the customer clicks on your Submit Order button, you want the form to send all of the customer’s information to the Form Mail program, which will then email the information to you. To do this, highlight the entire form by clicking on the red line surrounding your form (see Figure 10). While it is highlighted, write the address your instructor gave you for the formmail.pl program in the Action field in the Properties panel for the form (see Figure 10). So the Action field in the Properties will say: /cgi-bin/formmail.pl (it must look EXACTLY like this).

Figure 10: Form Action Field in Properties Panel

15. Finally, there is one piece of information that Form Mail needs in order to email the order to you – that is your email address! You will add one more form element to your form to hold this information – a hidden field (see Figure 11). Place your cursor in the table cell under “Order Form’. From the menu, pick Insert > Form > Hidden Field. While the Hidden Field icon is still highlighted, go to the Properties panel and type in the following information:

a. name the hidden field ‘recipient’ (no capitals)b. for Value, type in your email (eg. Mary@school.edu). Warning – many schools do

not support hotmail or yahoo emails for this function, so use your school email.

30

Figure 11: Hidden Field in Form

16. Finally, you must create a link on your homepage (index.html) to your new order_form.html page. Open your index.html page. Add the text ‘or order online’ in the table cell just under the last address. Highlight the text, then in the Link field of the Properties Panel type in ‘./order_form.html’. The ./ tells the browser that the order_form.html page is in the same folder as the current page.

17. That’s it – your order form page is done! Try it out – if it emails successfully, a generic Thank You webpage will be displayed. You can change this page is you like – details can be found at http://www.scriptarchive.com/readme/formmail.html#form_config.

Exercises

1. Finish the Order Form for this activity and hand it in. While you are testing it, have it email to you so you can see if it works. 2. Create a new webpage that asks customers to register for a newsletter. It will require their first and last name, street address, city, state, zipcode, email address, and type of music they like (use checkbox for the choices Country, Jazz, R&B, Blues, Rock, Classical), and a Comments field for any additional comments they have. Use formmail to email their information to your email address.

31

Activity 7: Creating a Text Rollover Menu

One of the best reasons to use a tool like Dreamweaver is that it lets you make compelling webpages very easily. This is particularly true when you want to add interactivity to a website. In this activity you will learn how to create text roll-overs for your website. Have you noticed that you do not have any menu’s for moving through the website? Right now your website uses links to navigate. You are about to remedy that situation with a simple roll-over menu.

Your instructor will explain the basics of how text roll-overs work. In the ‘old days’, to make a text roll-over (that is, when you mouse rolls over the Home word on a menu, you see Home that is clickable) you had to make two images – one of the work Home and a second that was identical except the word was underlined. Then you had to place the first graphic on the page – and tell Dreamweaver when the customer’s mouse went over the graphic, to replace it with the underlined one. When the mouse moved off the word, you had to tell Dreamweaver to swap the original plain graphic back in. A bit of a pain, and time-consuming.

Now there is a new way – it involves a concept we haven’t discussed – style sheets or CSS (cascading style sheets). While creating a website with CSS’s is the next step in web design that you would take after this course, here we will just borrow what we need so you can create text rollovers without graphics!

Let’s get started. 1. Open Dreamweaver.2. Create a new blank webpage. Name it text_rollover.html. You will use this page to practice

your text rollovers. 3. To do text rollovers, you have to insert some CSS commands into your webpage, in the HTML

code. If you recall from the first activity, you can view a webpage in Dreamweaver using either the Design view (which is what you have been using primarily) and the Code view. To switch to Code View, click on the Split icon at the top of the text-rollover.html window (see Figure 1).

Figure 1: Split icon for Code and Design View Split

32

4. The window will split into two parts – the design view of the webpage below and the HTML code view on top (see Figure 2). Notice that the design view is blank since we haven’t added anything yet. The code view shows only the basic starting HTML tags.

Figure 2: Split View of text_rollover.html

5. Here are the CSS commands you will be inserting into the code view in the HEAD section of the webpage.

<STYLE TYPE="text/css">a.text_roll:link { color: blue; text-decoration: none }a.text_roll:active { color: red; text-decoration: none }a.text_roll:visited { color: blue; text-decoration: none }a.text_roll:hover { color: green; text-decoration: underline }</STYLE>

In this CSS code, ‘text_roll’ is the name of the effect – you can put whatever you want here. Here is what each of the other commands means: a:link affects all unvisited links a:active affects links when being clicked a:visited affects visited links a:hover affects links that the mouse is currently over color: sets the color text-decoration: sets underline Can be set to underline or none. You will be setting it to

underline.

33

6. Copy the CSS commands (including the two STYLE tags) from step 5 above and paste them between the <HEAD> tags of your webpage (see Figure 3).

Figure 3: CSS Commands Between the HEAD tags

7. Now you can return to full design view by clicking on the Design icon at the top of the text_rollover.html window (see Figure 3 above).

8. On the design view, create a link – type in the text ‘Text Rollover’, highlight it, and in the Properties panel fill in the Link field with one of your other pages. Then, while your text is still highlighted, in the Properties panel, pick the Style dropdown box – here you will see your new CSS style (the set of commands you pasted in) – pick the name of your style – text_roll (see Figure 4). This will apply the commands to this link – essentially making the text a text rollover. Try it out!

Figure 4: Property Panel Style Choice

34

Exercises:

1. Finish the test webpage for this activity and hand it in. 2. Create a two item menu for the homepage of your website with text rollovers – place it on the

left hand side of the page. The two menu items are: a. Order Form – when clicked, goes to your Order Form page

Sales Manager – when clicked, goes to your Sales Manager page

35

Activity 8: Creating Pictures with Image Composer

The web is all about images. As a student, you can ‘borrow’ images from the web by right-clicking on an image, then picking Save Picture As and saving the image to your computer. However, in the ‘real world’, most pictures on the web are copyrighted – so you cannot use them on a commercial (or even a personal) website without written permission. However, there are lots of either free or inexpensive pictures posted on the web by professional photographers – you can find them easily with google.

But often you want an image that is new – something that has to be custom designed – for your website. You can use Microsoft Image Composer for this task. Once you know how to use this software, it is straightforward to use other graphics software as they are similar.

In this exercise, we will not recreate the wheel. Microsoft Image Composer has a terrific tutorial that takes you through making a fairly sophisticated logo for a flower store. Let’s use that.

2. Open Image Composer by clicking on Start > Programs > Microsoft Office > Image Composer (on some systems, you can skip the Microsoft Office choice).

3. Click on Help > Tutorial. Follow all of the steps to the end of the tutorial Except:a. When asked to enter the name of the company (for the Logo), enter Online

CD Store.3. Resize the new logo and replace the CD logo on your website (on every page) with the

new logo.

Exercises:

1. Put your completed logo image on a new webpage, upload and hand in.

36

Activity 9: Creating a Webpage with an Image Map (optional)

In this activity we will add nine new webpages to your website. One will have an image map on it, and the other eight will be pages to which the image map hotspots are linked. These are the eight places in the US that you have on-site sales stores. Your instructor will explain image maps and hotspots – they are very fun and add a lot of interactivity to your website! And, good for you, Dreamweaver makes them easy to do!

1. Start Dreamweaver. 2. In the Files panel (on the right side of the window), right click on your Site. Pick New File

from the menu that appears to create a new file (webpage) for your form. Name the new file ‘sales.html’.

3. Add text and the picture of the United States (you can get one from your instructor) as shown in Figure 1 below.

Figure 1: Initial Text and Image for Sales Webpage

4. Now for the image map. Click on the image and in the Properties Panel, and make sure that the Property Panel is expanded – it should look like Figure 2 below. If it is not expanded, click on the small down arrow-head in the bottom right corner of the Properties Panel.

Figure 2: Expanded Properties Panel for an Image

5. In the name field of the Properties panel, enter the name ‘usa’ (text field next to ‘Map’ on the left side of the Properties panel).

37

6. Now you will outline each of the hotspots that the user can click to get the webpage for that region. You will define eight hotspots – one for each of the colored regions. First click on the small blue polygon icon in the Properties Panel. It is one of three, the one on the right, just below the Map name (see Figure 3). Then go back to the image on the webpage and outline the green region by clicking on the edge of the green region. Each time you click, a point is set so the outline you are drawing is stretched to include the new point. Continue until the entire green area is covered. Double-click on the last point to finish the outline.

Figure 3: Hotspot Outline for Image Map

7. With your first hotspot still showing, on the Properties Panel type in the URL of the page that will be displayed when your customer clicks on the hotspot. Here the webpage is in your website, so type in the URL of a new page you will make – type in ‘./northwest.html’. The ‘./’ tells the browser that the new webpage is in the same folder as the current webpage (sales.html).

8. Repeat this same process of defining hotspots and their webpages as follows:a. Blue states - ./westcoast.htmlb. Yellow states - ./southwest.htmlc. Aqua states - ./south.htmld. Red states - ./midwest.htmle. Purple states - ./upper.htmlf. Green states – ./central.htmlg. Orange states - ./eastcoast.html

9. Now you can make the eight region webpages. They should look like Figure 4 below. Since your customer needs to have a way to return from each of these webpages to the homepage, you will link the logo to the homepage. To do this, click on the logo, then in the Properties Panel, in the Link field type in ‘./index.html’ (the file name of the homepage). Now make the other seven pages:

a. northwest.htmlb. southwest.htmlc. south.htmld. midwest.htmle. upper.htmlf. central.htmlg. eastcoast.html

38

An easy way to do this is to make the westcoast.html page, then right click on it and pick Edit > Duplicate. Then change the name of the copy to what you want and adjust the content of the new page accordingly.

Figure 4: Westcoast Web Page

10. One last thing – on your website homepage (index.html), add a link to the new sales.html page (see Figure 5). Place the link in the table cell to the right of the performer.jpg image. The link text should be ‘Check out our sales’. Highlight the text, then in the Properties Panel (while the txt is highlighted), type ‘./sales.html’ in the link field.

Figure 5: New Homepage (index.html)

11. That’s it – try it out! Enjoy!

Exercises:

1. Turn in the finished sales and regions pages from this activity.

39