web topic 9 navigation and link
DESCRIPTION
TRANSCRIPT
Web Authoring
Topic 9 – Navigation And Linking
Objectives
1 Explain the use of navigation and links2 Create a horizontal navigation bar to
link to other pages - drop down menu3 Create a side navigation menu4 Use Web Authoring tool to create frames using the following HTML tags - with framesets and frames
Students should able to:
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:
http://www.adobe.com/support/dreamweaver/programs/navbar_overview/
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?
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.
The browser window gets divided into individual panes, each displaying the contents of a separate HTML document.
Frames allow a single browser to contain multiple pages.
Frames
1. Frames allow you to keep relevant information always on the screen
Why use Frames?
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.
Page 1
Page 2 Page 3
4 HTML documents needed: 1 Frameset document 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 framesPredefined targets:
Target = “_blank” : open in new windowTarget = “_parent ”: open in place of the
parent framesetTarget = “_self ”: open in current windowTarget = “_top ”: open in the entire browser window, replacing the frameset altogether
Base target: target a specific frame by default
<BASE target = “frame_name”>
Nested FrameExample
Header.html
Content.html
Welcome.html
Nested FrameStep 1 – Identify Nested Area
Nested Area is the content.html and welcome.html
Header.html
Content.html Welcome.html
Frameset 1:
header.html
Frameset 2:
nested frames
Nested FrameStep 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>