Overview

In this assignment you will create your own web page using Dreamweaver software, and publish it on the Otterbein web site. The major goal of the assignment is for you to learn how to compose web pages and learn HTML.

Basic Requirements and Scoring

The 25 maximum points are based on the published page, and are broken down as follows:

1. Contains a picture of yourself that displays correctly (2 points)
2. Contains at least four correctly functioning links (4 points)
3. At least one of the links must be to the Otterbein home page http://www.otterbein.edu (1 point)
4. At least one of the links will be an clickable image that displays and functions correctly (2 points)
5. Contains a background color or graphic (2 points)
6. Contains other graphics, including at least one animated gif, that display correctly (3 points)
7. Contains a table having at least 3 rows and 3 columns filled with text or images or links (5 points)
8. The text is legible against the background and has no spelling errors - - Dreamweaver's Text menu has a spell checker (2 points)
9. The HTML code itself is "clean" and appears to have been composed by hand using the Code window; details below (3 points)
10. The web page will be stored in a file called index.html (1 point)

Aside from the above requirements, you have freedom and control over the design and contents of your page. Be creative! But also be aware it is a public page so anyone with access to the Internet can view it. It will remain published for as long as you are at Otterbein, and you can update it at any time.

Phase 1 : Gathering material to include on your web page

1. First, create a new folder for this project.

   Your web page will contain multiple files and they must all be in the same folder! Get into your home folder and create a new folder for this project.

2. Second, find graphic images you would like to use in your web page.

   These include: background graphics, divider lines, bullets, animated graphic files, etc.

   These graphics files typically use the GIF file format and have a filename extension of ".gif". Find them using a Web search engine, such as Google. Some keywords you can search for are "background gifs," "animated gifs," etc.

   When you find an image that you like, you can copy it by clicking on it with the right mouse button and selecting "Save Picture As..." from the menu that pops up. If you right-click on the page background , it will say "Save Background As..." instead. The exact wording depends on what browser you are using.

   In response to this command you will be presented with a "Save As..." dialog box. Save it in the folder you created above. Make sure to give the file an appropriate name and that you remember it for future reference.

   IMPORTANT! Files that have spaces in the file name, like "my picture.jpg" can cause problems! Before saving it, remove any spaces from the name!

   Please consider that many graphics on the Web are copyrighted by their creators and should not be copied and published on your web page. Such use may constitute an ethical violation of your Otterbein computer use agreement.

3. Third, research some sites to which you want to provide links.

   These can be sites that represent interests, hobbies, academic resources, entertainment, etc. To accomplish this you should do some surfing, collecting a list of URLs you want to have links for. A good way of collecting this list is to create a bookmark in Internet Explorer when you find a page you like. With Internet Explorer 7 (computer lab), do this using the Add To Favorites icon . With Internet Explorer version 6, do this using the Add to Favorites... option in the Favorites menu. With FireFox, use Bookmark this page from the Bookmarks menu.

4. Fourth, select a photo of yourself for your web page.

   Use an existing photo or scan one using the scanner in the lab. You can crop it or modify it using Paint Shop Pro if you like. As a last resort, your Otterbein photo is available on your OtterNet page as described in Project 3.

Phase 2: Composing your page

Now that you've collected items to include on your web page, it is time to write it! The software you will use to write your web page is Macromedia's Dreamweaver.

A. Starting Dreamweaver

1. From the Start menu, select All Programs and look for Macromedia. Moving your mouse there will activate a short menu, from which you will select Macromedia Dreamweaver MX.
2. IMPORTANT the startup may take a long time! Like 6-8 minutes! Be very patient! The computer will appear to be locked up but it is not. This only happens the first time you run it on a specific computer. If you change to a different computer, you may have to suffer through this long startup again.
3. Click through any dialogs that appear during Dreamweaver startup.
4. Once Dreamweaver is started up, go to the View menu and select Code and Design. This will split the main work area into two parts: the upper half will show your HTML code and the lower half shows the page as it will be displayed by the browser. You can adjust the heights of these windows.

B. Starting to write your page

1. The code window may show the HTML outline of a web page (see the figure below), or it may be blank. If it is blank, go to the File menu, select New..., then click the Create button.

   

2. The First Thing To Do when your code work area looks like the figure above: Save your web page under the name index.html. You must save it under this name! It must also be saved in the same folder with all the pictures and animations you want to use!
3. The Second Thing To Do: replace the text "Untitled Document" with the title of your web page. Something like "Welcome to John Public's web page!"
4. The Third Thing To Do: in the gap between <body> and </body>, compose the contents of your page. Every time you Save the page (use Ctrl-S as a shortcut, hold down the Ctrl key and press the S key), the design area will be updated. Type in some words and try it!
5. The Fourth Thing To Do: start adding items to your web page! Every time you save the file, the Design (preview) window will be updated.
6. This is where you use your HTML skills. There is a quick guide to common tags below. In addition, Joe Barta has produced an excellent tutorial on HTML at his PageTutor.com web site, accessible through the button here.
   
7. I've also written a Quick Reference Guide to Popular HTML Tags, which includes an example HTML program with the corresponding browser display.

C. Requirements and other Information

1. Required Elements of your web page: Your web page can contain whatever content you want; use your imagination and have fun with it! However, it must minimally include the following:
   1. A picture of yourself, using the <img src="filename"> tag
   2. At least four links (the <a> tag), including a link to http://www.otterbein.edu. IMPORTANT: the link must start with "http://", example <a href="http://www.mtv.com">MTV</a>. Otherwise the link will not work!
   3. At least one clickable image. This is a link that displays an image instead of text. In the place where the displayed text normally goes, put an <img> tag instead.
   4. A background color or graphic. The color, or file containing the graphic is specified as part of the pre-existing <body> tag. Do NOT add a second <body> tag! See the Quick Reference Guide for more details and an example.
   5. Other graphics, including at least one animated gif, using the <img src="filename"> tag. Do not insert an image that is stored in a different folder! Make sure that index.html and all your images are in the same folder!
   6. A table containing something. It can hold your links, some graphics, or anything else you like such as your favorite songs or your course schedule. It must have at least three rows and three columns.
2. The browser will not automatically arrange items on your web page the way you want it to! HTML was designed this way on purpose; the browser has final control over the display. For instance, every image will be placed below the text or image that precedes it! The best way to control the way things line up is to create an "invisible" table (see table tag in the Quick Reference Guide and set border=0) and place your items into its cells.
3. Writing the HTML yourself. The primary goal of this assignment is for you to learn and use the HTML language. Dreamweaver, through its Design window, provides the capability of composing an entire web site without knowing any HTML. I expect you to use a combination of the Code and Design windows: typing, viewing and modifying HTML directly in the Code window; inserting HTML elements using the Insert menu; and making adjustments directly to the previewed page through the Design window. Web pages composed entirely through the Design window typically generate poorly structured HTML code.

   If your final index.html file contains clear evidence that you relied exclusively on the Design window to create your page, the maximum score you can get is 22 points. Evidence includes but is not limited to:

   • Use of empty paragraphs <p></p> for vertical spacing (use <br> instead);
   • Tag pairs that do not enclose anything, such as <p></p> (remove them);
   • Use of the <div> tag. It is not necessary and you are not to use it (example: you can center something enclosing it in the <center></center> tag pair but if you select it in the Design window and click the text centering button, it generates a <div align="center">).
   If your index.html file contains any of the above, modify it through the Code window to remove them by using the suggested alternatives. If the HTML code is "clean" I will not be able to tell whether or not you used the Design window and you will get the full 3 points HTML credit.
4. One other thing to be aware of: When you type in an opening tag, like <p>, in the Code window, Dreamweaver will automatically generate its closing tag. This is fine if you are typing the text as you go, but if you are adding tags to existing text this can be a pain. Cut the closing tag and paste it where desired.

Phase 3 : Publishing

When you are finished, and ready to publish your web page, follow these steps. There are other ways to do this, but here is a fairly easy one. This will copy the files from your regular network folder (on Z:) to your Otterbein web server folder. This procedure assumes you are at a computer in the Towers lab.

1. On the desktop, double-click on "Home" icon. It looks like this:
2. You are now in your regular home folder. Locate the files you need for your web page (they should all be in the same subfolder). Make sure that index.html and all the picture files are in the same folder.
3. Select all the files you need (index.html and all the pictures). If they are in their own folder, you can do this using Select All from the Edit menu. As an alternative, hold down the Ctrl key then click on each file's icon. Each one will turn dark.
4. Select "Copy" from the Edit menu. This will copy all the selected files into the system Clipboard.
5. Back on the desktop, launch the Internet Explorer web browser.
6. Into the web address box at the top, type ftp://students.otterbein.edu and click Go (or press the Enter key).
7. You will be asked to enter your Otterbein login and password. Go ahead and enter those.
8. The displayed web page should say something like:

   FTP root at students.otterbein.edu To view this FTP site in Windows Explorer, click Page and then click Open FTP Site in Windows Explorer.

9. Follow the directions given; Page refers to .
10. At this point, your home web folder is open. There should be no files there.
11. Select Paste from the Edit menu. The files you copied into the clipboard in step 4 above should be pasted into your home web folder.

To double-check that it worked, go to your web browser and open web page http://students.otterbein.edu/first.last, where first.last is your Otterbein login name.

Make sure that all images are displayed and all links work. If not, make corrections in Dreamweaver and repeat the above procedure. If the browser says your page is not found, then you didn't name it index.html. Correct this now.

Phase 4 : Let me know you're finished

When you have finished publishing and testing your web page, send me an email message (psanderson@otterbein.edu) and in the body of the message include a link to the URL (web address) of your home page. No attachments please! I'll browse to your homepage and grade it from there.

You are responsible for making sure everything on your web page works before writing to me. Credit will not be given for images that do not display, links that do not work, etc.