Web topic 9 navigation and link

Web Authoring

Topic 9 –
Navigation And Linking

Objectives
Students should able to:
1 Explain the use of navigation and links
2 Create a horizontal navigation bar to
link to other pages
- drop down menu
3 Create a side navigation menu
4 Use Web Authoring tool to create
frames using the following HTML tags
- with framesets and frames

Navigation
Navigation bars provide an easy and
visually interesting way for visitors to
navigate between the site's main sections.
Navigation bar provides the following:
1. An easy reference for the contents of your Web site
2. A way for visitors to navigate through multiple levels
in your site structure
3. A more convenient, customized alternative to a
browser's Back and Forward buttons

Type of Navigation
Consider the following to decide what
type of navigation bar:
What level of structural or graphical complexity
do you want your site to have?
What type of Internet access will visitors to your
site be using?
What are your strongest skills or interests in Web
development?
http://www.adobe.com/support/dreamweaver/programs/navbar_overview/

Type of Navigation
1) Text-only navigation bar
2) Graphical navigation bar with rollovers

3) Animated navigation bar

Frames
One of the most powerful features in Web
design is the support of framed documents.
Frames allow a single browser to
contain multiple pages.
The browser window gets divided into
individual panes, each displaying the
contents of a separate HTML
document.

Frames
Why use Frames?
1. Frames allow you to keep relevant
information always on the screen

2. Easy Navigation

3. Frames helps to save bandwidth

Frameset Document
A governing HTML file known as the
frameset document, defines the layout of
the frames, their properties, and the
filenames of the other HTML documents
displayed within them.
4 HTML documents
Page 1 needed:
1 Frameset document
Page 2 Page 3 3 documents for each
of the frame

Frameset Document
In a frameset document, the opening and
closing <FRAMESET>…</FRAMESET>
tag pair replace the <BODY>…</BODY>
tag pair.

<FRAMESET> tag is the primary tag
used to create a framed web page. It
contains information on how to divide the
screen into individual frames.

Frameset Document
The <FRAME> tag is within the
<FRAMESET> tag pair.

The <FRAME> tag tells the browser
which HTML file goes in each frame,
placing them in order from left to right
across the columns and from top to
bottom down the rows.

Attributes of <Frameset>
cols = width of first column, width of
second column, etc
rows = height of first row, height of
second row, etc

frameborder : “yes” or “no”
border : accepts a numeric value
bordercolor

Example
<HTML>
<HEAD><TITLE>Frames</TITLE></HEAD>
<FRAMESET cols = ”35%, 65%”>
<FRAME src=”left.html” name=”left_frame”>
<FRAME src=”right.html” name=”right_frame”>
</FRAMESET>
</HTML>

Linking between frames

Any link to other pages causes the page
to be loaded into the respective frames.

Target links to tell the browser where to
open their reference documents.

Linking between frames
Predefined targets:

Target = “_blank” : open in new window
Target = “_parent ”: open in place of the
parent frameset
Target = “_self ”: open in current window
Target = “_top ”: open in the entire browser
window, replacing the frameset altogether
Base target: target a specific frame by
default
<BASE target = “frame_name”>

Nested Frame
Example

Header.html

Content. Welcome.html
html

Nested Frame
Step 1 – Identify Nested Area

Frameset 1:
Header.html
header.html

Frameset 2:
Content.html Welcome.html
nested frames

Nested Area is the content.html and
welcome.html

Nested Frame
Step 2 - Create a basic frameset structure
to contain the header.html and nested
frame
<HTML>
<HEAD><TITLE>Frames</TITLE></HEAD>
<FRAMESET rows= “ 100, 300” >
<FRAME src=”header.html” name=”top_frame”>
<FRAME src=”body.html” name=”body_frame”>
</FRAMESET>
</HTML>

Nested Frame
Step 3 - Create a frameset to contain the
content.html & welcome.html

<FRAMESET cols= “200, 600”>
<FRAME src= “content.html” name= “content”>
<FRAME src= “welcome.html” name= “main”>
</FRAMESET>

Nested Frame
<html>
<head><title>Frames</title></head>

<FRAMESET rows= "100, 300">
<FRAME src=“header.html“ name="top_frame">
<FRAMESET cols= "200, 600">
<FRAME src= “content.html" name= "content">
<FRAME src= “welcome.html" name= "main">
</FRAMESET>
</FRAMESET>

</html>

Web topic 9 navigation and link

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Web topic 9 navigation and link

Similaire à Web topic 9 navigation and link (20)

Plus de CK Yang

Plus de CK Yang (13)

Dernier

Dernier (20)

Web topic 9 navigation and link