Home‎ > ‎ICT Programming‎ > ‎

Assignments Fall 2012

Website Evaluation - Friday - Period 5

posted Oct 26, 2012, 9:21 AM by Jon Hamlin


Website Evaluation - Friday - Period 1

posted Oct 26, 2012, 8:08 AM by Jon Hamlin


Website Evaluation - Thursday - Period 5

posted Oct 25, 2012, 11:05 AM by Jon Hamlin   [ updated Oct 26, 2012, 8:08 AM ]


Website Evaluation - Thursday - Period 1

posted Oct 24, 2012, 12:08 PM by Jon Hamlin   [ updated Oct 26, 2012, 8:08 AM ]

Website Evaluation - Period 1 - Day 1



Dreamweaver Collaboration

posted Oct 23, 2012, 8:30 AM by Jon Hamlin

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


Dreamweaver Survey

posted Oct 23, 2012, 8:01 AM by Jon Hamlin

Please complete the following questions to the best of your ability.


Foundations of your Website

posted Oct 10, 2012, 10:39 PM by Jon Hamlin   [ updated Oct 10, 2012, 10:40 PM ]

We are going to begin building a more elaborate website with Dreamweaver.

Your site will need to include the following:

  • Main page with 1 header, 1 sidebar, and 1 footer
  • 2 additional content pages that link to each other and back to the home page
  • A organized format with a clean interface. The pages must share continuity 
Begin by selecting new "Dreamweaver Site" from the starting menu.

Dreamweaver Discovery

posted Oct 9, 2012, 8:23 AM by Jon Hamlin   [ updated Oct 9, 2012, 3:29 PM ]

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.

Dreamweaver is a WYSIWYG editor and code editor for Windows and Macintosh. You can use it to write HTML, CSS, JSP, XML, PHP, JavaScript, and more.


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 image
1 link
1 table (minimum 2 columns, and 2 rows)
1 header
1 rollover image
1 image hot spot


HTML - Comments

posted Oct 4, 2012, 8:19 AM by Jon Hamlin   [ updated Sep 15, 2013, 8:20 PM ]

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!" />


HTML - images

posted Oct 2, 2012, 6:08 PM by Jon Hamlin   [ updated Apr 21, 2015, 10:14 AM ]

PLACING IMAGES ON YOUR WEB PAGE

The basic format is quite simple. It is:

<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:

         <IMG SRC="hrchain.gif">

  1. I called my image "hrchain" standing for Horizontal Rule Chain because it can be used to replace an <HR> or Horizontal Rule command. There are many places on the web where you can find line images to replace horizontal rules. Just take a little time and do a search for them in your favourite search engine. For example, try searching for "free horizontal line images".
  2. IMG stands for "image" (IMaGe). It means that an image will be placed here. The IMG tag is used to insert images within the text. These are often called "inline" images.
  3. SRC stands for "source" (SouRCe). It is an IMG attribute that tells the browser where the source for the image is, that is, the name of the image and where to find the image. Thus the SRC attribute specifies the name and location (URL) of the image file. It can be a relative or an absolute URL. The image should be located in the same directory as the web page it is to appear on. Since no directory is given, the source is assume to be the current directory - the directory of the web page.
  4. "hrchain.gif" is the complete name of this image and this name follows the same format as your HTML document names. That is, you have the name (in my case it is "hrchain"), a dot, and then the suffix ("gif").

IMAGE ATTRIBUTES

SIZE ATTRIBUTE

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">


ALT ATTRIBUTE

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.

BORDER ATTRIBUTE

The BORDER attribute is used to place (or eliminate) a border around the image. The BORDER attribute commands the browser to draw a border of an indicated size around the image. A border is often used when the image is a link to show clearly that the entire area bounded by the border is a hyperlink. Otherwise, it is often used as BORDER="0" (quotes are optional) to turn it off - that is, no border.

This example has a border value of "2"

 

ALIGN ATTRIBUTE

The ALIGN attribute is used in conjunction with placing text around the image. That is, ALIGN controls the alignment of the image with respect to text. To see these attributes in action, please SWITCH to NOTEPAD or to a similar text editor, and type in the following HTML document. I want you do some experimenting with it.
<HTML>
<HEAD>
<TITLE>HALL RENTAL</TITLE>
</HEAD>
<BODY>
<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>
</BODY></HTML>

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:

ABOUT OUR HALL


We are wheelchair accessible.

Please call for rates


USING AN IMAGE AS A LINK

When you want to turn something into a link, whether it be an image or whether it be a word, phrase or sentence, you need the HREF attribute which basically says "this web page is where we are linking to" when someone clicks on the image or words.

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:

<HTML>
<HEAD>
<TITLE>IMAGE AS A LINK</TITLE>
</HEAD>
<BODY>
<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>
</BODY></HTML>

After you have typed in the document, save it, and then SWITCH to your browser and load it. This is what you should see:

Click on the button to head home



THUMB-NAIL IMAGES


With thumb-nails, you offer a very small version of each image (each small image is called a thumb-nail). A visitor to your web page can then click on any thumb-nail to see the larger, original version. Thumb-nails allow for easier viewing of all the images, allow for smaller web pages and allow for faster loading of the pages. Using thumb-nails also allow the visitor to be in charge of what he or she wants to 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.


BACKGROUND IMAGES

This code will give you a single image background

<html>
<body background="bgimage.jpg">
<h1>Hello world!</h1>
</body>
</html>

This code will give you a repeating background pattern

<html>
<head>
<title>How to place a pattern as your website background</title>
</head>
<body style=”background-image:url(pattern.gif); background-repeat:repeat”>
</body>
</html>

Note: The best repeating backgrounds come from images that can be seamlessly tiled - you can find images like that here



1-10 of 18