Frames and Templates

1
Frames and Templates
CS 318
2
CS 318 Course Outline

• Introduction to the Web HTML
• Creating Web Sites Using Dreamweaver
• Links images
• Tables
• Web forms
• Frames, templates, cascading style sheets
• Block elements
• Behaviors
• Images
• Introduction to Flash Animation

3
Web Site Design Guidelines

• All pages in a site should have a consistent
  "look and feel"
• Colors, fonts, links, link text, etc.
• Consistent navigation links should appear on all
  pages
• Design your pages to have 3 5 main "content
  areas"
• All of the pages in a site should have the same
  areas
• Some areas will have the same content across
  pages
• Top banner
• Consistent navigation links

4
How do Web developers achieve a consistent design
over multiple Web pages?

• Frames
• Templates
• Cascading style sheets (CSSs)

5
HTML Frames

• Presents a single Web page as multiple
  independent areas
• Each area may be a separate HTML document or an
  image
• One area might be a banner that is permanently
  displayed
• A second area might be a list of scrollable
  hyperlinks
• A third area might be different text content that
  is updated constantly

6
Example HTML Frame Sites

• http//www.angelfire.com/super/badwebs/
• http//users.ipa.net/djhill/frmain.html
• http//java.sun.com/javase/6/docs/api/

7
Frame Structure

• Frameset HTML document that defines the overall
  frame layout
• Document has a ltframesetgt tag instead of a ltbodygt
  tag
• ltframesetgt tags contain individual ltframegt tags
  that specify links to .htm or graphics files
• Typical frameset contains 2-3 frames

8
Example HTML Frame Document Code
Defines the frame dimensions (number of columns,
number of rows)
lthtmlgt ltheadgt lttitlegtA Simple Frameset
Documentlt/titlegt lt/headgt ltframeset
cols"40, 60" rows"50, 50"gt ltframe
src"frame1.html"gt ltframe src"frame2.html"gt
ltframe src"frame3.html"gt ltframe
src"frame4.html"gt lt/framesetgt lt/htmlgt
Specifies the frame contents
9
Creating a Frameset in Dreamweaver

• First create the Web pages that will be in your
  frames
• Next create the page that will define the
  frameset
• File New Page From Sample Frameset
• Select a design, then click create
• Creates the FRAMESET document
• FRAMESET tag and associated FRAME tags to define
  each frame area
• Specify Web page frame filenames using the Code
  window
• Dreamweaver tries to create new documents for you
  ?
• Finally save the frameset file

10
Working With a Frameset in Dreamweaver

• Dreamweaver doesn't handle frame pages very well
• Sometimes when you try to view a frameset page in
  Code view, you see the code for an individual
  page in the frame
• To view the frameset code
• Modify Frameset - Edit Noframes content
• Or click on the frame borders

11
Opening a Hyperlink in a Different Frame
ltframeset cols"40, 60" rows"50, 50"gt
ltframe src"frame1.html" name"leftFrame"gt
ltframe src"frame2.html" name"rightFrame"gt
ltframe src"frame3.html"gt ltframe
src"frame4.html"gt lt/framesetgt
lta href"www.uwec.edu" target"rightFrame"gt UWEC
Homelt/agt

• Give the target frame a name in the frameset
• Specify the target frame name in the link tag

12
ltnoframesgt Tag

• Browsers that don't support frames skip all
  information in the ltframesetgt tags and render the
  elements in the ltnoframesgt tags instead
• Contain a ltbodygt tag that contains the contents
  of the alternate (frame-less) Web page
• Dreamweaver creates this tag automatically

13
Advantages of Using Frames

• Clearly delineate independent Web page areas
• Great for site maintance
• Enable you to create independent areas in which
  users can
• Scroll
• Link to new Web pages

14
Disadvantages of Frames

• Users can't create a bookmark to a particular
  frame, only to the entire frameset
• Screen readers don't handle frames well
• Search engines can't follow individual frames
  very well
• Most just read the meta tags in the first frame
  page
• You must create meta tags in the frameset page to
  describe ALL frames

15
More Disadvantages of Frames

• Frame sites load slowly (at first then quicker)
• The browser needs to load a different HTML
  document for each frame
• Links on frame pages might not work right
• Back button gets confusing
• Some browsers don't support frames
• You generally need a framed and non-framed
  version of your site to handle this
• Frames behave unpredictably sometimes

16
Using Frames

• Bottom line DON'T USE THEM UNLESS THERE IS A
  COMPELLING REASON TO DO SO!
• You will learn to create equivalent-looking pages
  using ltdivgt tags
• Why learn about them?
• You might have a compelling reason ?
• Many existing (older) sites use frames and you
  might have to update them

17
A frames-based Web page uses the __________ tag
in place of the __________ tag.

• ltframesgt, ltbodygt
• ltframesetgt, ltbodygt
• ltframegt, ltbodygt
• ltnoframesgt, ltbodygt
• None of the above

18
You create the ltnoframesgt tag to specify

• The Web page content that appears if the user's
  browser does not support frames
• The Web page content that does not appear in the
  frameset
• The Web page content that does not appear in the
  frames
• All of the above
• None of the above

19
How do Web developers achieve a consistent design
over multiple Web pages?

• Frames
• Templates
• General
• Dreamweaver
• Cascading style sheets (CSSs)

20
What is a Web template?
21
How do you make Web templates?

• Simplest approach Make the first Web page so it
  looks like you want, then save it using a
  different name and change its content as needed
  for subsequent pages.
• Think critically What might be some problems
  with this approach?

22
Dreamweaver Templates

• A Dreamweaver template defines the appearance of
  a set of HTML documents
• A DW template has different regions
• Fixed (locked) content same for all pages
• Changing (editable) content different in
  individual pages
• Template files have a .dwt extension
• Many pre-made DW templates are available

23
Example Template Regions
Editable regions
Non-editable regions
24
Designing Templates

• Sketch layout area and dimensions using a target
  screen resolution and viewable screen area
  dimensions
• 1024 x 768 955 x 600
• Include as much fixed content as possible
• Banners, menu bars, navigational links
• Use placeholders to designate changeable content
• Image placeholders
• Descriptive editable text regions
• "Enter body content here "

25
Creating a Template in DreamWeaver

• Create a Web site that contains the fixed
  template content
• Images, linked pages, etc.
• Create the template File New Blank Template
  HTML template
• Save the template file
• Create regions on template by using an invisible
  table layout or use one of the premade layouts
• Add the fixed content
• Content that will appear on all site pages
• Create (or edit) the editable regions
• Insert Template Objects Editable Region
• Or on right side under Common-gtTemplates
• Save the template
• Create new Web pages based on the template

26
Creating an Editable Region

• Insert Template Objects Editable Region

Editable region
27
Note the Location of Template Files!

• Dreamweaver automatically creates a folder named
  Templates in the site root, and saves the
  template file in this folder
• Don't change the folder name or move the template
  file or any of the Web site files or BAD things
  will happen

28
Creating an HTML Document Based on a Template

• File
• New
• Page From Template
• DW Templates
• Create

Specifies to update page automatically if
template changes!
29
Code for Template-Based Web Page
Linkage to template
Non-editable Items are disabled and can't
be changed!
Editable items are enabled and can be changed!
30
Templates Frames Compare and Contrast

• Frame-based site
• Create the frameset
• Link individual pages to frameset frames
• Template-based site
• Create the template's fixed content
• Create new pages as needed by changing the
  editable template area

31
Template Advantages

• Achieves a consistent appearance and layout
  throughout the Web site
• Easy to update fixed items on multiple pages
• Just update and resave the template!
• Underlying pages automatically update
  (theoretically)
• You can purchase or download existing templates
  and fine-tune them to meet your needs

32
Template Disadvantages

• Require repeating all fixed content in every page
• Makes the code longer, more complicated, and
  harder to understand/modify
• Sometimes you want to "tweak" a fixed item on a
  single page and you can't
• You can update the underlying HTML in Notepad
• Sometimes Dreamweaver gets 'confused' with
  template files and doesn't update the underlying
  pages
• Seems to happen when you delete, move or rename a
  file
• You have to start over ?

33
Template Disadvantages (continued)

• Dreamweaver template .dwt files are specific to
  Dreamweaver and can't be opened, modified, or
  used by other page layout packages
• Woe to the person who deletes his/her template
  file, moves the template file to a different
  location, or creates a new Web page and
  accidentally stores it in the Templates folder
• You have to start over ?

34
Template Disadvantages (continued)

• Basic templates are fairly easy to create, but
  complex nested templates can be quite difficult

35
A Dreamweaver template

• Is a document with a .dwt extension
• Must be stored in the site root in a folder named
  Templates
• Can contain editable and non-editable areas
• Is used to create a series of Web pages that have
  the same content in some areas
• All of the above