E301/Web Publishing: Hypertextual Theory and Design, Michael O'Conner

English 301: Advanced Writing: Web Publishing
Section 1, 11:00 to 12:15

[Introduction] [Syllabus] [Assignments/Grading] [Policies] [New Student Pages][Old Student Pages]

red appleAS4: Practice with Web Page Images and Backgrounds

Create three distinct web pages for this assignment. Each page should have a unique theme or subject.

For each of the three pages, have a different background image.

For each of the pages, choose an "image" design theme, something consistent-an animal, object, person, etc- that goes along with everything else you place on the page.

Each of the Three Theme Pages should include:

a) 8-12 images 
b) 5-6 icons
c) a paragraph or two of text, demonstrating your ability to "wrap" text around images

The pages should also include a displayed ability to "align" images (align left, align right, align center) and you should begin playing with the concept of inserting images into "tables."

Aligning with Text and Images

With Raw HTML scripting:
Use code to align your images properly:
1) <img src = "images/apple1.gif" align="left">
2) the align = code could be left, right, etc. 

With Dreamweaver:
1) click on the image, which will change the "properties panel" 
2) in the properties panel, go the ALIGN
3) choose "left" or "right" (do not choose "top" - this will only align one line of text at the top of the image

With FrontPage:
1) click on image
2) under Format Menu, go down to Position
3) choose Image Position desired (right or left)

 

All images should carry "alt" tags, or text tags within the html code to tell viewers or browsers what an image is if it does not display properly (or cannot be seen by a visually impaired person). 
The coding is simple:  <img src = "images/apple1.gif" align="left" alt="red apple">
In FrontPage, click on the image, click the right mouse button, go to Picture Properties, type into TEXT window
In Dreamweaver, click on image, in properties panel, type into Alt window.

Finally, all images and icons for this assignment must meet proper design characteristics of 72 dpi, and under 100k in size, to ensure quick downloads.  Always change the image size itself, in a program like Photoshop.  Rarely tweak the size of a image with HTML editor or HTML code settings.  

Other important requirements with images:

Other usual requirements:

___clearly labeled and unique page title

___clear descriptors in all links and anchors

___a good mix of icons and images fitting page purpose and design concepts

___adequate white/clear space and well space elements throughout

___page loads quickly--page should load under 30 secs on a 56K modem

___individual graphics under 100k in size

___closes with your name, email, date/revision information

Sample:  Star Trek Images Page

 

[E301 Homepage] [Return to O'Conner's Millikin Home Page]

by Dr. Michael O'Conner, Millikin University. Contact: moconner@mail.millikin.edu