Assignments Fall 2012
Read through the following posts. See if anybody shares the same opinion as you do.
See if there are any questions you can answer. If there are, write an explanation in the final column.
Dreamweaver Collaboration Document
Please complete the following questions to the best of your ability.
We are going to begin building a more elaborate website with Dreamweaver.
Your site will need to include the following:
Begin by selecting new "Dreamweaver Site" from the starting menu.
Dreamweaver is one of the most popular professional web design programs available. It offers a lot of power and flexibility for both designers and developers. There are a lot of features, which can make it intimidating, but in general, it is easy to pick up and start using and the advanced features make it possible to go from beginning web designer to professional in a very short period of time.
1. Open your index.html in Dreamweaver and have a look
2. What looks different? Look at the code and see what has changed.
3. Can you figure out how to insert a link? How about an image?
4. Open up a brand new webpage and look at the code that is inserted for you automatically.
Read through this tutorial and try out using some tables on your site. Dreamweaver CS3 Tutorial
Add the following items to your site with Dreamweaver
1 table (minimum 2 columns, and 2 rows)
1 rollover image
1 image hot spot
Comments can be a nice way to help yourself when you are coding your Web page. Comments are invisible to a Web browser when it displays your Web page. The only way to view comments is to look at the source (HTML) code of the Web page. In this way, you can leave yourself notes so that you don't forget something when you come back later to redesign the page.
Comments always look like this:
<!--This is a comment. Comments are not displayed in the browser-->
Here is an example of how a comment can help remind future designers why things should look a certain way:
<!-- This image should be aligned to the right, and have alt text -->
<img src="mypet.gif" align="right" alt="Look at my Kitty Cat!" />
<IMG SRC="image.gif">where "image.gif" represents the name of the image.
The chain at the top of this lesson:
was put there with this command:
You can change the size of an image using the height and width tags. Keep in mind however that if the original size of the image is quite small and your increase the display size greatly, the image quality will appear quite grainy or blurry.
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
The alt="_____" attribute is used to add a written description of the image. This useful for visually impaired people who have a computer program that can read these tags to help them understand what's on the screen. This is also the text that will be displayed if the image fails to load for whatever reason.
This example has a border value of "2"
<H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR>
<H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE">We are wheelchair accessible.</H4>
Please call for rates<HR>
Now save this web page. If you have not saved the wheelchair image (whechair.gif) then you need to save it too. Remember that both the image and web page must be in the same folder. Once you have saved the web page and image, then SWITCH back to your browser and load the document to see it in action. This is what you should see:
See example below:
Please call for rates
Here is an example of using an image for the link. Please SWITCH to NOTEPAD or to another text editor, and type in the following HTML document:
<H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home"></A>Click on the button to head home</H4><HR>
After you have typed in the document, save it, and then SWITCH to your browser and load it. This is what you should see:
USING ONLY ONE IMAGE FOR EACH OF YOUR THUMB-NAILS
This is often the preferred method as you are offering the same image twice with the thumb-nail image being displayed with the use of the WIDTH and HEIGHT attributes. This is a much faster and more efficient method of loading images because the larger image that will be displayed has already been loaded into the browser's cache and ready to be displayed at any time. A cache is where a browser keeps a memory of images and pages while they display them.
Here is the command line that uses only one image to load both the thumb-nail and the original full size image.
<A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A>
Here is this statement in action. Again you can use the same procedures as before to display the image in full size, save the image, and return BACK to this spot.
This code will give you a single image background
This code will give you a repeating background pattern
Note: The best repeating backgrounds come from images that can be seamlessly tiled - you can find images like that here