Web Development

1
Web Development Management

• Basic Page Development
• Odds Ends

2
Student Objectives

• Create home page for framed site
• Develop image maps
• Distinguish among types of graphics files
• Edit images using MS Photo Editor
• Create basic meta elements
• Determine color specification for any color

3
Administrative Stuff

• Return quiz
• Comments about websites
• Exam Tuesday . . .
• Or how about Thursday?
• No, not other choices!

4
First, a Correction

• Style rule components
• Selector
• Type (element)
• Class (uses the dot)
• Descendent (two elements involved)
• External (poorly supported)
• Declaration
• Attribute to modify
• Value for attribute
• Two separate examples
• body backgroundredfont-weightbold
• .navigation font-familyOld English MT

5
Frames

• Home page is a container
• ltframeset . . . gt
• ltframe . . . /gt
• ltframe . . . /gt
• . . .
• lt/framesetgt
• Each frame points to a file

6
Typical Attributes for Frame Elements

• ltframesetgt element
• rows or cols
• onLoad /or onUnload
• ltframe /gt element
• name
• src
• scrolling
• noresize
• target
• Example frames01.htm

7
Some Considerations About Links

• Need to add target attribute
• Values
• Standard
• _top
• _new
• . . .
• Frame names

8
Frames Why (Not)?

• Keep visitors at site
• Dont get lost
• Know where they are
• Make printing a pain
• Print what?
• URL/title not really correct
• Bookmarking is impaired

9
Image Maps

• Allow parts of images to serve as links to other
  pages
• New items
• usemap attribute within img element
• map element
• area element
• Interesting example
• the-light.com/colclick.html
• Why client-side?

10
Specifying Image Maps

• Tags involved
• ltimg . . . usemapmapnamegt
• ltmap namemapnamegt . . . lt/mapgt
• ltarea shapeshape coords . . . /gt
• Shapes (0,0 is image top left coordinate)
• rect specify upper left and lower right
• circle specify center and diameter
• poly specify each point (self-closing)
• Also use alt attribute for tool tip on mouseover

11
Images Other Stuff

• Use sparingly
• Arrange to achieve balance with text and white
  space
• Keep small (page should take no more than 10
  second to load at 28kbs)
• Reduce size
• Use thumbnails
• Add warnings (how . . . ?)
• Maintain contrasts when using background images
• Editing MS PhotoEditor example

12
First, Some Background

• Vector versus bitmap
• Filetypes
• .jpg (JPEG)
• .gif (transparent/interlaced/animated)
• .png
• Compression
• Lossless
• Lossy
• Scanning?
• Scan to best quality
• Save (Zip, CD, or HDD)
• Later, play with compression, etc.

13
Image Editing Basics

• Crop
• Resize (resample if possible)
• Make transparent (.gif only)
• Change type
• File type
• Properties
• Effects
• Sharpen
• Miscellaneous

14
Meta Elements

• Meta means about (more or less)
• Metadata data about data
• ltmeta /gt tag refers to meta information, i.e.,
  information about information
• Typical formats
• ltmeta nameinfotype contentswhatever/gt
• or
• ltmeta
• http-equivactiontype
• contentswhatever
• /gt
• Positioning between ltheadgt and lt/headgt
• Multiple tags typically used

15
Using Meta Elements

• Typical name values
• keywords
• description
• author
• Typical http-equiv values
• expires
• refresh
• All tags have content attribute

16
Meta Elements Keywords

• Purpose improve chances of being listed by
  search engines
• Example
• ltmeta
• namekeywords
• contentstatistics Excel math
• /gt

17
Meta Elements HTTP Header Info

• Keeping content current
• ltmeta
• http-equivexpires
• content1 January 2001
• /gt
• ltmeta
• http-equivrefresh
• content120
• /gt
• Redirect from expired page
• ltmeta
• http-equivrefresh content10,newhome.htm
• /gt

18
Objectives Accomplished?

• Create home page for framed site
• Develop image maps
• Distinguish among types of graphics files
• Edit images using MS Photo Editor
• Create basic meta elements
• Determine color specification for any color