Download Framed Layout In Dreamweaver (continued)

Essentials For Design
Dreamweaver
Level One
Julian Rickards
Project 7
Frames
Committed to Shaping the Next Generation of IT Experts.
Objectives
Effective ways to use frames
Properties of framesets and frames
Create a framed-layout
With new pages
Using existing pages
Frameset options
Create links between frames
Set page properties
Accommodate browsers
Copyright (c) 2004 Prentice-Hall. All rights reserved.
2
Why Would I Do This?
Frameset
page


Frame
Visibility
Usage
Pros


Static content
Faster download
Cons




Browser support
Bookmarks
Search results
Printing
Copyright (c) 2004 Prentice-Hall. All rights reserved.
3
Visual Summary


Frames panel
Frameset
Copyright (c) 2004 Prentice-Hall. All rights reserved.
4
Visual Summary (continued)

Frame properties

Frameset properties
Copyright (c) 2004 Prentice-Hall. All rights reserved.
5
Frames-based Web Sites


Web site within a
frame
Frames turn-off
Copyright (c) 2004 Prentice-Hall. All rights reserved.
6
Properties Of A Framed Layout


Nested frames
Characteristics of
nested frames
Copyright (c) 2004 Prentice-Hall. All rights reserved.
7
Framed Layout In Dreamweaver

Select frame
Copyright (c) 2004 Prentice-Hall. All rights reserved.
8
Framed Layout In Dreamweaver
(continued)
Copyright (c) 2004 Prentice-Hall. All rights reserved.
9
Framed Layout In Dreamweaver
(continued)
Copyright (c) 2004 Prentice-Hall. All rights reserved.
10
Work With Web Pages In Frames
Frameset page is
selected
Header frame
is clicked
Copyright (c) 2004 Prentice-Hall. All rights reserved.
11
Work With Web Pages In Frames
(continued)
Edit frame in
document
window
Copyright (c) 2004 Prentice-Hall. All rights reserved.
12
Creating A Frameset
With New Pages

Predefined framesets



Modifiable
Fixed
Two methods


From start page
HTML
Copyright (c) 2004 Prentice-Hall. All rights reserved.
13
Choose The Frames Layout



Framesets
Preview window
Fixed top
frameset

Gray frames
lines
Copyright (c) 2004 Prentice-Hall. All rights reserved.
14
Rename The Frames
Copyright (c) 2004 Prentice-Hall. All rights reserved.
15
Resize The Frames
Copyright (c) 2004 Prentice-Hall. All rights reserved.
16
Add Content To The Frames
Copyright (c) 2004 Prentice-Hall. All rights reserved.
17
Save The Frameset And Frames
Copyright (c) 2004 Prentice-Hall. All rights reserved.
18
Creating A Frameset
With Existing Pages



Very similar
Bring existing page into frame
Adjust dimensions


Visually
Via property inspector
Copyright (c) 2004 Prentice-Hall. All rights reserved.
19
Choose And Prepare The Frameset

Choose top and bottom frames
Copyright (c) 2004 Prentice-Hall. All rights reserved.
20
Insert Existing Web
Pages Into Frames

Choose topnav
Copyright (c) 2004 Prentice-Hall. All rights reserved.
21
Insert Existing Web
Pages Into Frames (continued)

photoLarge frame
Copyright (c) 2004 Prentice-Hall. All rights reserved.
22
Insert Existing Web
Pages Into Frames (continued)

Select the photoThumbs frame in the frames
panel.
Copyright (c) 2004 Prentice-Hall. All rights reserved.
23
Using Frameset Options

Settings

Scroll bars


Borders


Yes, no, default
Size, color, disable
Visitor resizing
Copyright (c) 2004 Prentice-Hall. All rights reserved.
24
Explore Frameset Options

Preview in the browser
Copyright (c) 2004 Prentice-Hall. All rights reserved.
25
Explore Frameset Options

Resize the
browser to
spawn the
vertical
scroll bars
Copyright (c) 2004 Prentice-Hall. All rights reserved.
26
Set And Test The Scroll Options

Set to auto
and preview

Set scroll
setting to
yes
Copyright (c) 2004 Prentice-Hall. All rights reserved.
27
Explore Frameset Border Settings




Not standard
Used in design view as guide
Not on by default
Settings in property inspector
Copyright (c) 2004 Prentice-Hall. All rights reserved.
28
Explore Frameset Border Settings


Preview in the browser
Visible borders
Copyright (c) 2004 Prentice-Hall. All rights reserved.
29
Set the Frame-Resize Option

Enable resize

Check for sufficient size
Copyright (c) 2004 Prentice-Hall. All rights reserved.
30
Linking Between Frames


Each frame can be a target
Target tag <a>





_blank
_self
<frameset>
_parent
_top
Copyright (c) 2004 Prentice-Hall. All rights reserved.
31
Target Links To Frames

Photothumbs
Copyright (c) 2004 Prentice-Hall. All rights reserved.
32
Link Thumbnail Images To
Large Photos

Thumbnail targeted to
photoLarge frame
Copyright (c) 2004 Prentice-Hall. All rights reserved.
33
Link Thumbnail Images from
Outside the Frameset
Copyright (c) 2004 Prentice-Hall. All rights reserved.
34
Use The <base> Tag To Set The
Common Target
Copyright (c) 2004 Prentice-Hall. All rights reserved.
35
Setting Page Properties Of
Framed Pages



Individually
Common style
Seamless
Copyright (c) 2004 Prentice-Hall. All rights reserved.
36
Set Page Backgrounds From
Outside The Frameset
Copyright (c) 2004 Prentice-Hall. All rights reserved.
37
Creating NoFrames Content
Create basic noframes content
Copyright (c) 2004 Prentice-Hall. All rights reserved.
38
Summary



Effective ways to use
frames
Properties of
framesets and frames
Create a framedlayout


With new pages
Using existing pages




Frameset option
Create links between
frames
Set page properties
Accommodate
browsers
End-of-Project Exercises




Screen ID
Multiple Choice
Discussion Questions
Skill Drill




Link to External Sites
Embed a Frameset in a Frame
Link Nested Framesets
Create a Complex Frameset
End-of-Project Exercises

Challenge



Create a Seamless Framed Layout
Splitting a Nonframed Page into Frames
Portfolio Builder

Create a Frame-Based Product Display Page
Copyright (c) 2004 Prentice-Hall. All rights reserved.
41
What Are Your
Questions