CIT 040 Index > Assignment: Images

Assignment: Images

This is the second part of an assignment that will use images and links when complete. We will now add some images and other links in the placeholder pages created in the previous assignment. Assignment specifications updated 26 March 2007.

Read everything before doing anything. This is not a trivial assignment. No individual part of the assignment is difficult, but there are a lot of parts. The pages that you create will look correct only if you do these parts correctly.

Finding the Images

The images that you will use for this assignment are indexed at http://evc-cit.info/cit040/evc_pics/. You will copy them from that site into your public_html/images directory.

Here is a list of the images you will need and their dimensions (where necessary). The ones marked ??? are ones you have to find out for yourself. All <img> elements must have correct height and width attributes.

Unless specified otherwise, images should have no border.

Text should flow around images unless stated otherwise, and it should break at the proper places. For example, a left-aligned image followed by a right-aligned image should not look like this:

Misaligned text and images

Rather, it should look like this:

Properly aligned text and images

Leave room around the images with margin: as appropriate. (This is covered in the lecture notes.)

General Requirements

The register.html File

Put Add the following text to the register.html file. Change the title and heading as specified here, but do not get rid of the links that are already there. Text in square brackets [like this] is instructions that tell you what your file must look like.

[Title of page is "EVC Registration"]

[ level 1 heading ] Registering at Evergreen Valley College

[insert image adm_records_th.jpg at right side of screen] The
Admissions and Records Building is the place where you can register
for classes online or in person. This is also
the place where you: [this should be a bulleted list]

   * pay your fees
   * get transcripts
   * check course availability

[insert image bookstore_th.jpg at left side of screen] After you
have registered, you need to go to the
bookstore on the upper level of the Gullo Student Center
to pick up the books for your courses.

[horizontal rule, 75% of width of window]

[insert cafeteria_th.jpg at right side of screen] When you need
a break, go to cafeteria on the lower level of the Gullo
Student Center.

The buildings.html File

Put Add the following text in the buildings.html file. Change the title and heading as specified here, but do not get rid of the links that are already there. Text in square brackets [like this] is instructions that tell you what your file must look like. All the pictures on this page must have a one-pixel border. You produce a one-pixel border by adding this to your style attribute:

border: 1px solid black;

All the pictures on this page will be clickable. This is the only page that has clickable pictures.

When you click...You will see
acacia_th.jpgacacia.jpg
cedro_th.jpgcedro.jpg
roble_th.jpgroble.jpg
sequoia_th.jpgsequoia.jpg
[Title of page is "EVC Classroom Buildings"]

[ level 1 heading ] Evergreen Valley College Classroom Buildings


Click any picture on this page to see a larger version of it.

[insert images acacia_th.jpg and sequoia_th.jpg side by
side, centered horizontally in the window. The words
"Acacia and Sequoia" should appear in small type (80% of normal
size), centered beneath the two pictures.]

The Acacia and Sequoia buildings are on the northeast side of
the campus. The Sequoia building is the newest of the campus
classrooms, with the most modern facilities in its lecture rooms.

[insert images roble_th.jpg and cedro_th.jpg side by
side, centered horizontally in the window. The words
"Roble and Cedro" should appear in small type (80% of normal
size), centered beneath the two pictures.]

The Roble and Cedro buildings are located on the northwest
side of the campus.

See a screenshot that shows what I mean when I say that the words "Acacia and Sequoia" should be centered beneath the two pictures. Do the same sort of thing for "Roble and Cedro".

The miscellaneous.html File

Put Add the following text in the miscellaneous.html file. Change the title and heading as specified here, but do not get rid of the links that are already there. Text in square brackets [like this] is instructions that tell you what your file must look like. All the pictures on this page must have a one-pixel border.

[Title of page is "EVC Miscellanea"]

[ level 1 heading ] Evergreen Valley College Miscellanea

[ level 2 heading ] Computing Facilities

[insert image rg240_th.jpg aligned at right side of screen]
Evergreen Valley College has several computer labs where
students can do their work for their Business Information Systems
or Computer Information Technology courses. At the right you see
the Windows computer lab in room RG-240.

[horizontal rule; 75% of width of screen]

[insert image chavez_grove_th.jpg at left side of screen] One of
the places that you can go to relax and enjoy the weather is Cesar E.
Chavez Grove, near the lower level of the old Learning Resource Center.

[horizontal rule; 75% of width of screen]

[image library_th.jpg should be at the right side of the screen]
The Library and Educational Technology Center is one of the newest
buildings on campus.

When You Finish

You must validate your documents before you submit them. They must be valid XHTML 1.0 transitional.

Upload all your files to the correct places on the server.