Unit 6.3. Advanced Framesets

In Chapter 5, “Introduction to HTML: Basic Tags, Tables, and Frames,” you created a two-frame frameset. This frameset is sufficient for the splash page since it does not require a left navigation bar. The Student section, however, requires a left navigation. A nested frame is needed to incorporate this section into our already existing frameset.

Nesting Framesets

First, let’s look at how to nest frames using one frameset.

FOR EXAMPLE

<FRAMESET ROWS="20%,*"> 
  <FRAME SRC="topnav.htm" NAME="top"> 
  <FRAMESET COLS="30%,*"> 
      <FRAME SRC="students_left_nav.htm" NAME="students_left"> 
      <FRAME SRC="student_search.htm" NAME="students_main"> 
  </FRAMESET> 
  <NOFRAMES> 
  <BODY> 
  <P> 
  You must use a browser that can display frames to see this page 
  </P> 
  </BODY> 
  </NOFRAMES> 
</FRAMESET>

The main frameset specifies two frames. The first frame is defined by the following:

<FRAME SRC="topnav.htm" NAME="top">

Define the second frame with a frameset instead of another <FRAME> tag as you did in Chapter 5. This nested frameset is bold in the example above.

This method is fine if the application will always have a left navigation bar. In your application, however, the Splash Page has no left navigation bar. How do you set up the framesets so that when a user clicks on Student Info the Splash Page is replaced with a left navigation bar frame and a main frame?

First, create a two-frame frameset with a top frame and main frame.

FOR EXAMPLE

<FRAMESET ROWS="64,*"> 
  <FRAME NAME="top" SCROLLING="no" NORESIZE SRC="topnav.htm"> 
  <FRAME NAME="main" SRC="splash.htm"> 
  <NOFRAMES> 
  <BODY> 
  <P>THIS PAGE USES FRAMES, BUT YOUR BROWSER DOESN'T SUPPORT 
  THEM.</P> 
  </BODY> 
  </NOFRAMES> 
</FRAMESET>

The links in the top navigation bar will link to a frameset and target the main frame:

<A HREF="student_main_frame.htm" TARGET="main">Student Information</A>

So, instead of loading a regular HTML document into the frame ‘Main’ you are loading a frameset into it. The code for ‘students_main_frame.htm’ looks like this:

FOR EXAMPLE

<FRAMESET COLS="30%,*"> 
  <FRAME SRC="students_left_nav.htm" NAME="students_left"> 
  <FRAME SRC="student_search.htm" NAME="students_main"> 
  <NOFRAMES> 
  <BODY> 
  <P>THIS PAGE USES FRAMES, BUT YOUR BROWSER DOESN'T SUPPORT 
  THEM.</P> 
  </BODY> 
  </NOFRAMES> 
</FRAMESET>

Now, create the files to be loaded into the frames students_left and students_main. The student left navigation bar contains two menu items: Search Student and Add/Edit Student. Name the file ‘students_left_nav.htm.’ For the Search Student menu item, create a simple HTML page with the text ‘Student Search’ and name it ‘search_student.htm.’

Below is sample HTML code for ‘students_left_nav.htm’:

FOR EXAMPLE

<HTML> 
<HEAD> 
<TITLE>Student Left Nav</TITLE> 
</HEAD> 
<BODY> 
<TABLE BORDER="0" WIDTH="100%"> 
  <TR> 
    <TD ALIGN="center"><A HREF="search_student.htm" TARGET="students_ 
    main"><SMALL><FONT 
FACE="Arial">Search Student</FONT></SMALL></A> 
    </TD> 
  </TR> 
  <TR> 
    <TD ALIGN="center"><A HREF="student_personal_info" TARGET= 
    "students_main"><SMALL><FONT 
FACE="Arial">Add/Edit Student</FONT></SMALL></A> 
    </TD> 
  </TR> 
</TABLE> 
</BODY> 
</HTML>

More Frameset Attributes

NORESIZE and SCROLLING Attributes

The <FRAME> tag has two attributes that give you further control over the look and feel of the frames:

NORESIZE 
SCROLLING="YES"|"NO"|"AUTO"

NORESIZE

This attribute prevents users from resizing the frame. All of the edges of a frame cannot be resized even if an adjacent frame is resizable.

SCROLLING

Determines whether scrollbars are available for a frame. “AUTO” will apply scrollbars to a frame only if needed as determined by the browser. “YES” will apply a scrollbar whether needed or not. And “NO” prevents a scrollbar from being applied to a frame if needed or not. If the SCROLLING attribute is not specified the default is “AUTO”.

BORDER and FRAMEBORDER Attributes

You can also control whether frames appear with or without a border. If you choose to apply a border to the frames, the width of the border can also be set:

BORDER="width in pixels" 
FRAMEBORDER="YES"|"NO"

BORDER

The BORDER attribute is an attribute of the <FRAMESET> tag and can only be used in the outermost frameset. It controls the thickness of the border. The thickness is specified in pixels. If no BORDER attribute is present, the default is 5 pixels.

<FRAMESET BORDER="2" …>

FRAMEBORDER

The FRAMEBORDER is an attribute of both the <FRAMESET> and <FRAME> tags. It determines whether a border is applied to a frame or not. The default is to apply a border.

<FRAME … FRAMEBORDER="NO"…>

or

<FRAMESET …FRAMEBORDER="NO" …>

Frames vs. Tables

Tables
Table 6.1. Benefits and Negatives of Using Tables
Benefits Negatives
Most Web designers favor tables over frames for page layouts. The designer has more control over how the page is rendered in the browser. Frames can cut off part of a document if there is no scrollbar, and scrollbars on the frames are not aesthetically pleasing. Tables can be difficult to work with or slow to load if there are too many nested tables.

Frames
Table 6.2. Benefits and Negatives of Using Frames
Benefits Negatives
Frames allow for better performance because the entire page does not have to be reloaded every time. If a user clicks on a link in the left nav bar, then only the document in the main frame has to be loaded and not the top nav bar, left nav bar, and main area. Web pages using frames cannot be book-marked. Only the frameset is bookmarked. Frames can be difficult when trying to access a page through JavaScript.

Unit 6.3 Exercises

6.3.1. Create a Classes Frameset
Q1: Create a frameset for the Classes menu item. Name it classes_ frame.htm. It will have a left nav bar and a main frame. Name them classes_left and classes_main, respectively. Set the frame classes_left to 150 and the frame classes_main to fill up the rest of the window.
6.3.2. Load Top Navigation Bar links in to main frame
Q1: In the top navigation bar, make the link Classes load classes_frame.htm into the main frame.
6.3.3. Create the Instructor Frameset
Q1: Using the skills you have learned in this chapter create the instructor frameset, instructor left navigation bar, and instructor personal info form. Refer to the Application Specifications located on this book’s Web site for the requirements.

Exercise Answers

6.3.1. Answer

Q1: Create a frameset for the Classes menu item. Name it classes_ frame.htm. It will have a left nav bar and a main frame. Name them classes_left and classes_main, respectively. Set the frame classes_left to 150 and the frame classes_main to fill up the rest of the window.
A1: 
<HTML> 
<HEAD>Student Details</HEAD> 
<FRAMESET COLS="150,*"> 
  <FRAME NAME="classes_left" SRC="classes_left_nav.htm"> 
  <FRAME NAME="classes_main" SRC="classes_list.htm" SCROLLING="auto"> 
  <NOFRAMES> 
  <BODY> 
  <P>This page uses frames, but your browser doesn't support them. </P> 
  </BODY> 
  </NOFRAMES> 
</FRAMESET> 
</HTML>

6.3.2. Answer

Q1: In the top navigation bar, make the link Classes load classes_frame.htm into the main frame.
A1: 
<A HREF="classes_frame.htm" TARGET="main">Student Details</a>

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.136.18.48