Tonights Topics

1
Tonights Topics

• Review
• More HTML
• FrontPage
• Sample FP web
• Web Publishing
• HTML Exam Review

2
Bits n Pieces

• Reminders
• Save often!
• Make copies/backups!
• Put name date in comments on all web pages
  lt!--.--gt

3
GIFs and JPGs - Review

• Reduces original image file size
• GIF Graphics Interchange Format
• Best for text and line art images with fewer
  colors
• Saving process removes actual colors from image
• Can have transparent portions
• JPG Joint Photographers Expert Group
• Best for intense, multiple-color images like
  photographs
• Saving process removes just pieces of color
• No transparency
• Image quality declines each with resize and save

4
1
2

• High quality JPG
• File size 9KB
• Lower quality JPG
• File size 3KB

Original file size 136KB!
3
4

• High quality GIF
• File size 11 KB
• Low quality GIF
• File size 6KB

5
HTML Tables

• Purpose display data contain, control page
  elements
• Use 0 size table border for invisible border
  to control page elements
• Mathematical in theory
• Example 800 pixel wide table containing four 200
  pixel wide columns
• Table is made of cells
• Cells can be merged and split
• Plan table structure to minimize merging and
  splitting cells

6
HTML Tables
Table
This cell spans 3 columns and 1 row.

• Table with 4 rows and 3 columns was initially
  inserted
• Cells merged here

Cells

• Individual cells within the table
• Cells span rows and columns

This cell spans 1 column and 1 row.
This cell spans 1 column and 2 rows.
7
HTML Tables
data

• Tables
• Container tags

Data about the individual cell like its size,
images and/or text contained within the cell
lttablegt lttrgtlt/trgt lttdgtlt/tdgt lttrgt
lt/trgt lttdgtlt/tdgt lt/tablegt
table tags
rows
8
HTML Whats left?

• Lists

9
HTML Lists

• 5 kinds of lists in basic HTML
• Ordered lists ltOLgt .lt/OLgt
• 1., 2., 3., 4., 5.
• A., B., C. a., b., c. I., II., III. I., ii.,
  iii.
• Unordered lists ltULgt.lt/ULgt
• 3 bullets disc, square, circle

10
HTML Lists

• Ordered lists, Unordered lists
• Container tags
• Tags contain the list items
• ltOLgt or ltULgt
• ltLIgtlt/LIgt
• ltLIgtlt/LIgt
• ltLIgtlt/LIgt
• lt/OLgt or lt/ULgt

11
HTML Lists

• Other HTML Lists
• Definition lists ltDLgt ..lt/DLgt
• Definition term ltDTgt lt/DTgt
• Definition definition ltDDgt lt/DDgt
• Definition term ltDTgt lt/DTgt
• Menus
• Single column of items
• ltMENUgt
• ltLIgt . lt/LIgt
• ltLIgt . lt/LIgt
• lt/MENUgt
• Directories
• Could be multiple columns
• 20 characters or less
• ltDIRgt
• ltLIgt . lt/LIgt
• ltLIgt . lt/LIgt
• lt/DIRgt

12
HTML Whats left?

• Nill! Nada! Nothing!
• Thats it!!!
• Hooray!!!

13

• Create a new FrontPage web
• Site vs. page
• Add content to the website
• Pages
• Images
• Code
• Publish the website

14
(No Transcript)
15
FP web file will be saved here
16
Unique FP files for communicating with server
Server must have FP file extensions to use
Publish function in FP
17
FP Web folder
18
Page open and ready to add content
Suggestion work on one or two pages at a time.
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
Right click to see dialog box
23
Page title
Sound
24
Background
Hyperlink and text colors
25
(No Transcript)
26
(No Transcript)
27
Highlight cells and right click to merge cells
28

• Hotspots
• Image selected
• Draw hotspots using Drawing Toolbar

29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
What about Frames?
Two or more pages within the frame of one
larger page
36
Other Topics

• JavaScript
• Usually code in head and body of page
• Minimal code in body signals use of more
  detailed code in head
• Calendars, calculators, random image selection,
  controlled pop-up window, much more!
• Example
• http//www.scriptsearch.com/cgi-bin/jump.cgi?ID36
  89

37
Publishing the Site
38
Publishing the Site
Select FrontPage and enter URL
39
Publishing the Site
40
Publishing the Site
Your URL
Options
Click on Publish.
41
HTML Exam Review

• Paper/written exam
• Note card okay! (one side of 8 ½ X 11 sheet of
  paper)
• HTML material covered in class and homework
• Web development/design basics
• Objective and subjective
• Multiple choice, true/false, short answer, etc.
• HTML code analysis
• Example Given a screen print of desired
  resultwhy isnt this code working?

42
Next Time

• HTML Exam
• Frames
• Templates
• More FrontPage Features
• More JavaScript
• Keep considering Final Project!