Web Development - PowerPoint PPT Presentation

1 / 18
About This Presentation
Title:

Web Development

Description:

Edit images using MS Photo Editor. Create basic meta elements ... Make printing a pain. Print what? URL/title not really correct. Bookmarking is impaired ... – PowerPoint PPT presentation

Number of Views:13
Avg rating:3.0/5.0
Slides: 19
Provided by: Econ82
Category:
Tags: development | web

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com