Web Design Lesson 5

1
Web Design Lesson 5

• Lexington Technology Center
• March 25, 2003
• Bob Herring
• On the web at www.lexington1.net/adulted/computer/
  web_design.htm

2
Web Design Lesson 5
Review of Thursdays Lesson

• Cascading Style Sheets
• Inline Styles
• Linked Style Sheets
• Imported Style Sheets
• Using ltDIVgt and ltSPANgt
• Contextual Styles
• Class and ID Attributes
• Measurement Units in HTML
• Text Properties

2
3
Web Design Lesson 5
Setting Keywords

• Keywords help search engines find your page
• Select File, and choose Properties

Properties
3
4
Web Design Lesson 5
Setting Keywords

• In the Properties dialog, click the Custom
  Tab
• Click the Add button in the User Variables
  section
• The name is keywords. Type in descriptive
  things about your site

Keywords
Add
4
5
Web Design Lesson 5
Keywords in the ltHEADgt Section

• Switch to HTML view to see the keywords
  meta-tag
• keywords can be added directly in the HTML view

Keywords Meta-Tag
5
6
Web Design Lesson 5
Adding Sounds to a Page

• To add a sound that the user can play, use the
  ltEMBEDgt tag
• Netscape browsers can play AU, AIFF, WAV, and
  MIDI sounds
• Internet Explorer browsers can play WAV and
  MIDI sounds
• Height and width attributes are for Netscape
  browsers
• Other attributes
• Loop -- number of times to play, can be set to
  infinite
• Autostart -- starts playing as soon as the file
  is loaded
• Hidden -- doesnt show the console

ltEMBED SRCmaintitl.wav HEIGHT100
WIDTH150gt
6
7
Web Design Lesson 5
Adding Sounds to a Page

• To embed a sound using FrontPage, click Insert,
  then Advanced
• In the submenu, choose Plug-In

Plug-In
7
8
Web Design Lesson 5
Adding Sounds to a Page

• In the Plug-In Properties dialog, browse to the
  sound file
• Type in a message to be displayed by browsers
  that cant play it

Browse
8
9
Web Design Lesson 5
Adding a Background Sound

• A background sound can be added to your page
• Explorer will find it either in the ltHEADgt
  section or the ltBODYgt
• For Netscape it must be in the ltBODYgt
• Use both of the statements below to ensure that
  both Netscape and
• Explorer will play the sound
• Unwanted sounds can annoy the user use with
  care!

ltEMBED SRCmaintitl.wav HIDDENtrue
AUTOSTARTtruegt ltBGSOUND SRCmaintitl.wav
LOOPinfinitegt
9
10
Web Design Lesson 5
A Short Page to Test Background Sounds

• Type this page in Notepad
• Save it in a folder with a sound open with
  your browser to hear it play

lthtmlgt ltheadgt lttitlegtSome Titlelt/titlegt
lt/headgt ltbodygt ltpgttestlt/pgt ltembed
srcmaintitl.wav hiddentrue
autostarttruegt ltbgsound src"maintitl.wav"
loop"infinite"gt lt/bodygt lt/htmlgt
Name of your file here
10
11
Web Design Lesson 5
Hotspots

• Hotspots are graphic anchors for hyperlinks
• To create them, insert a picture, then use the
  Picture Toolbar to draw
• After the spot is drawn, the hyperlink dialog
  will appear

Polygonal Hotspot
Rectangular Hotspot
Circular Hotspot
Hotspot Tools
11
12
Web Design Lesson 5
Highlighting Hotspots

• Making changes to hotspots is easier without
  the picture
• Click the Highlight Hotspot tool to suppress
  the picture

12
13
Web Design Lesson 5
Hotspots in HTML View

• Switch to HTML view to see how hotspots are
  coded
• Hotspots are mapped to the picture with the
  ltMAPgt tag
• The name of the picture comes near the end.
  Adjust the picture path
• if necessary, but dont change the name of
  the map!

ltMAPgt Tag
Picture Name Reference
13
14
Web Design Lesson 5
Themes

• FrontPage has several built-in themes
  (automatic styles)
• Make sure to use the built-in FTP publishing
  utility to get all of its
• components loaded, or the page may not
  appear like it should

14
15
Web Design Lesson 5
Changing a Theme

• To change a theme, click the Modify button
• Buttons to change the color scheme, graphics,
  and text will appear

Modification Choices
Modify Button
15
16
Web Design Lesson 5
Modifying Theme Fonts

• The text button adds a font choice dialog on
  the left

16
17
Web Design Lesson 5
Changing Colors in a Theme

• The color button shows various color choices
• Colors are grouped by compatibility, similar to
  Microsoft Publisher

17
18
Web Design Lesson 5
Theme Sample

• This is the theme applied to the hotspot example

18
19
Web Design Lesson 5
Theme Applied as a Style

• Switch to HTML view to see the theme command in
  the ltHEADgt
• Themes work similarly to cascading style
  sheets, so the files that
• command it must also be sent to your site

Theme
19
20
Web Design Lesson 5
Web Settings -- General Tab

• The General tab contains the name of the web
• Check-in and check-out can be selected

20
21
Web Design Lesson 5
Web Settings -- Advanced Tab

• The Advance tab sets the scripting language

21
22
Web Design Lesson 5
Web Settings -- Language Tab

• The Language tab sets language of the page
  (i.e., English)

22
23
Web Design Lesson 5
Web Settings -- Navigation Tab

• The Navigation tab sets the targets of
  navigation bars

23
24
Web Design Lesson 5
Web Settings -- Database Tab

• The Database tab adds a database to be
  connected to the page
• FrontPage tests the connection to see if it
  will work

24
25
Web Design Lesson 5
Options -- General Tab

• The General tab can open the last web on
  start
• Warn if FrontPage is not the default HTML
  editor and
• Check the dates of files

25
26
Web Design Lesson 5
Options -- Configure Editors Tab

• The Configure Editors tab sets the program to
  edit certain types of files

26
27
Web Design Lesson 5
Options -- Reports View Tab

• The Reports View tab sets the old files date
• It also sets the slow to load time for pages

27
28
Web Design Lesson 5
Page Options -- General Tab

• The General tab sets the use of ltDIVgt and
  ltSPANgt and can
• automatically place a form around form
  components
• This is the location of the spell check control

28
29
Web Design Lesson 5
Page Options -- AutoThumbnail Tab

• The AutoThumbnail tab sets how thumbnails will
  appear

29
30
Web Design Lesson 5
Page Options -- Default Font Tab

• The Default Font tab sets the font to be used
  for normal text
• The generic font for serif and sans-serif can
  be selected

30
31
Web Design Lesson 5
Page Options -- HTML Source Tab

• The HTML Source tab sets the appearance of the
  HTML View tab
• Special rules for tags can also be set

31
32
Web Design Lesson 5
Page Options -- Color Coding Tab

• This tab sets the colors of the HTML code seen
  in HTML view

32
33
Web Design Lesson 5
Page Options -- Compatibility Tab

• The Compatibility tab sets the browsers to
  write for
• Various component technologies can be unset
  to account for
• lower level browsers

33
34
Web Design Lesson 5
Review

• Keywords
• Sounds
• Themes
• Web Settings
• Options
• Page Options

34