Essentials for Design XHTML

Project 7: Working with Frames

Kelly L. Valqui Committed to Shaping the Next Generation of IT Experts.

Copyright (c) 2004 Prentice-Hall. All rights reserved.

1

Why Use Frames?

 Purpose of a frame – subdivide a Web page into logical sections  Many advantages:  Some sections fixed, others scrollable  Constant navigational and menu elements  Dynamically changeable content areas Copyright (c) 2004 Prentice-Hall. All rights reserved.

2

Framesets and Frames



Frameset

 Similar to the layout of a printed document  Tells the browser how to lay out the page  Tells what frames to include in each section  

Frame

 Individual subsection of a page  Tells the browser what content to put into page  Copyright (c) 2004 Prentice-Hall. All rights reserved.

3

and Attributes

 Frameset  

cols

– specifies sizes of each side-by-side frame in the frameset

rows

– specifies sizes of each top-or-bottom frame in the frameset  Size specifications    Relative (percentage) Fixed (pixel) size specifications Asterisk (*) – frame can take the remainder of the page  Frame 

src

– indicates the html file that will occupy a frame 4 Copyright (c) 2004 Prentice-Hall. All rights reserved.

Effects of and (with columns)

Left frame is 20% of page width, right frame is 80%

Copyright (c) 2004 Prentice-Hall. All rights reserved.

5

Effects of and (with rows)

Top frame is 100 pixels high, bottom frame takes up remainder of page

Copyright (c) 2004 Prentice-Hall. All rights reserved.

6

Nesting Framesets inside other Framesets



Direct approach

 Code the nested frameset in the same HTML file as the outer frameset 

Alternative approach

 Code the nested frameset in a separate page, and make the separate page one of the frames of the outer frameset Copyright (c) 2004 Prentice-Hall. All rights reserved.

7

Direct Approach

Copyright (c) 2004 Prentice-Hall. All rights reserved.

8

Alternative Approach

Copyright (c) 2004 Prentice-Hall. All rights reserved.

9

Effect of Frame Nesting

Both approaches have the same effect Note that the right frame is subdivided into two subframes Copyright (c) 2004 Prentice-Hall. All rights reserved.

10

CSS vs. Frames

 Frames and tables can be used for horizontal and vertical placement  But these have limitations  CSS allows finer control over page layout than tables or frames  With XHTML 2.0, CSS will become more predominant 11 Copyright (c) 2004 Prentice-Hall. All rights reserved.

Attributes



noresize

– no value needed. If it is included, the frame's size is fixed, and the grey border bar cannot be moved  NOTE: if

noresize

is not set, the mouse cursor changes a double-sided arrow when hovered over the frame border, allowing resize 

scrolling

– three possible values  yes – scroll bars always visible  no – scroll bars never visible  auto – scroll bars visible only when needed 12 Copyright (c) 2004 Prentice-Hall. All rights reserved.

Effect of

noresize

Attribute

Two-sided arrow will appear and frame can resize if the frame tag is specified as: (without the norseize attribute set) But this will not happen if the frame tag is specified as Copyright (c) 2004 Prentice-Hall. All rights reserved.

13

Effect of

scrolling

Attribute

Scrollbars will not appear if the frame tag is specified as:

scrolling="no"

/> Copyright (c) 2004 Prentice-Hall. All rights reserved.

14

Using Frame Margins and Borders

 Setting height and width margins 

marginheight

attribute – sets the margin spacing at top and bottom of a frame 

marginwidth

attribute – sets the margin spacing at left and right of a frame  Specifying border width of a frame 

frameborder

attribute of tag – sets the width of a frame's border 

border

attribute of tag – sets the width of a frameset's border 15 Copyright (c) 2004 Prentice-Hall. All rights reserved.

Effect of Specifying Margins

Margin in bottom of top frame, caused by changing to

marginheight="4"

/> Copyright (c) 2004 Prentice-Hall. All rights reserved.

16

Effect of Specifying Border Width

All frame borders removed, caused by this code:

border="0"

>

frameborder="0"

/> Copyright (c) 2004 Prentice-Hall. All rights reserved.

17

Targeting Named Frames

 The tag's

name

attribute  Specifies an identifying name for a frame  Name cannot begin with underscore character  Underscore _ character used for special cases  Once named, a frame can be targeted  Anchor tag's

target

attribute tells browser which frame to use for displaying new content Copyright (c) 2004 Prentice-Hall. All rights reserved.

18

Using the

name

and

target

Attributes

name="summerframe"

/>

name="winterframe"

/>

target="winterframe">

winter!

name="springframe"

/> Copyright (c) 2004 Prentice-Hall. All rights reserved.

19

Effect of Clicking on the Link

Because hyperlink reference specified a target frame, the new page went to the target

target="winterframe">

winter!

Copyright (c) 2004 Prentice-Hall. All rights reserved.

20

Using a Base Target

 Concepts  Advantage of base targets  Refreshing frames  Hands-on Exercise  Add a Base Target Copyright (c) 2004 Prentice-Hall. All rights reserved.

21

Advantages of Using a Base Target

 Base target can be used to specify a commonly used target  Therefore, unnecessary to repeatedly type the same target for multiple links  Saves typing time and reduces risk of typing error  Accomplished using the tag  Example syntax:  Will cause all hyperlinks to send content to the "main" frame 22 Copyright (c) 2004 Prentice-Hall. All rights reserved.

Refreshing Pages with Frames

 Refreshing the overall page doesn’t always refresh individual frames  To refresh individual frames:  In Windows – right-click the frame then choose the Refresh Frame option from the pop-up menu  In Macintosh – hold down the mouse button in the frame then choose Refresh Page (or Refresh Frame) 23 Copyright (c) 2004 Prentice-Hall. All rights reserved.

Types of Special Targets



_self target

same frame replaces the content in the 

_parent target

sends the content to the parent document of the frame 

_blank target

opens a completely new browser window for the new page (old window also remains showing) 

_top target

replaces the main frameset (not in a frame, but in the entire window) Copyright (c) 2004 Prentice-Hall. All rights reserved.

24

Effect of the

_self

Target

Clicking the Select All Categories link causes new page to appear in same frame because of this tag:

target="_self"

>See All Categories Copyright (c) 2004 Prentice-Hall. All rights reserved.

25

Effect of the

_top

Target

Clicking any link causes new page to appear as the whole browser window instead of in a single frame because of this: Copyright (c) 2004 Prentice-Hall. All rights reserved.

26

Web Site Flowcharts

 Flowchart – diagram that shows the navigational flow of a Web site  Useful for planning and designing a complex Web site  Create the flowchart before actually creating and linking the site’s pages Copyright (c) 2004 Prentice-Hall. All rights reserved.

27

What is a Parent?

 A parent of a frame is the document containing its frameset  It is not the frameset itself  Therefore, if you want to use nested framesets, use the indirect method (nested frameset in a separate .htm file) Copyright (c) 2004 Prentice-Hall. All rights reserved.

28

Problem with Frames

 Non-frame browsers will not recognize frames  But now, almost all browsers support frames  Still, search engines sometimes index only one frame of a frameset, causing display problems  XHTML 2.0 is eliminating frames  Replaced with XFrames Copyright (c) 2004 Prentice-Hall. All rights reserved.

29

Button Tags

30 Copyright (c) 2004 Prentice-Hall. All rights reserved.

Form Script Options

 Form submissions go to Web server scripts to be processed  Server script is identified in the form tag's

action

attribute  Common types of server-side scripts  Common Gateway Interface (CGI)  ColdFusion  Active Server Pages (ASP) Copyright (c) 2004 Prentice-Hall. All rights reserved.

31

The tag</h3> <p> Provides content to browsers that don't recognize frames  Example syntax: </p> <p><b><noframes></b></p> <p></p> <p><b><body></b></p> <p></p> <p><b>Thank you for visiting our Web site. We are currently working on a frameless version of this site.</b></p> <p></p> <p><b></body></b></p> <p></p> <p><b>

32 Copyright (c) 2004 Prentice-Hall. All rights reserved.