webpage by yantingting

VIEWS: 14 PAGES: 39

									                               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        Provides browser with additional            </HEAD>
                         Heading        information that is not displayed on the
                                        webpage itself.
 <TITLE>                 Title          Text following is displayed on the title    </TITLE>
                                        bar of the browser window when the
                                        page is being viewed.
 <BODY>                  Body           Tells browser where the content for the     </BODY>
                                        webpage begins and ends.
 BGCOLOR=”#12345”        Background     Tells browser the background color for      none needed.
                         color          the entire webpage. The color is coded
                                        using five digits (go online to get color
                                        codes). Goes inside of the BODY tag.
 <B>                     Bold           Bolds text that follows it.                 </B>
 <H1> thru <H6>          Heading        Makes large and bolded headings of text     </H1> thru
                                                                                                     3
                                      following it (in increasing size)           </H6>
 <BR>                   Break         Content following will start on the next    none needed
                                      line.
 <P>                    Paragraph     Adds a blank line before starting content   </P>
 <CENTER>               Center        Tells the browser to center the content     </CENTER>
                                      following it.

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 Detect
           e. 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 webpage
           b. 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   </A>
                                         case) xxx as a link on the webpage and
                                         when a user clicks on it, to bring up the
                                         webpage at the specified url.
 <OL> or <UL>             Ordered List   Tells the browser to create a list of the    </OL> or
                          or Unordered   items following, using numbers (OL) or       </UL>
                          List           bullets (UL).
 <LI>                     List Item      Precedes each item in an Ordered or          none needed
                                         Unordered list.
 <HR>                     Hard Rule      Adds a line across the page                  none needed
 <I>                      Italicize      Italicizes text between start and stop       </I>
                                         tags

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. B
          k. I
          l. IMG
          m. OL
          n. UL
          o. 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 element
       b. Last Name – text element
       c. Email – text element
       d. 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 – textarea
g. 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 Window
                                                                                                17
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.)




       Figure 2: Dreamweaver Blank HTML Page
                                                                                               21
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).




           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.
                                                                                               22
       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.html

   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 Tables
 Welcome to the                                     INSERT logo IMAGE HERE
 Online CD Store!
 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!

                                                                                                23
     INSERT performer IMAGE HERE
                                                       INSERT listening IMAGE HERE
     We 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 Avenue
             b. Miss You
             c. First Date
             d. Accidentally in Love
             e. The Anthem
      2. Customer first and last name
      3. Customer email address
      4. Credit card type (Mastercard, Visa, Discover)
      5. Credit card number
      6. 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.html
        b. Yellow states - ./southwest.html
        c. Aqua states - ./south.html
        d. Red states - ./midwest.html
        e. Purple states - ./upper.html
        f. Green states – ./central.html
        g. 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.html
      b. southwest.html
      c. south.html
      d. midwest.html
      e. upper.html
      f. central.html
      g. 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

								
To top