Web Authoring      Topic 9 –Navigation And Linking
ObjectivesStudents should able to:1   Explain the use of navigation and links2   Create a horizontal navigation bar to    ...
NavigationNavigation bars provide an easy andvisually interesting way for visitors tonavigate between the sites main secti...
Type of NavigationConsider the following to decide whattype of navigation bar:What level of structural or graphical comple...
Type of Navigation1) Text-only navigation bar2) Graphical navigation bar with rollovers3) Animated navigation bar
FramesOne of the most powerful features in Webdesign is the support of framed documents.Frames allow a single browser toco...
FramesWhy use Frames?1. Frames allow you to keep relevantinformation always on the screen2. Easy Navigation3. Frames helps...
Frameset DocumentA governing HTML file known as theframeset document, defines the layout ofthe frames, their properties, a...
Frameset DocumentIn a frameset document, the opening andclosing <FRAMESET>…</FRAMESET>tag pair replace the <BODY>…</BODY>t...
Frameset DocumentThe <FRAME> tag is within the<FRAMESET> tag pair.The <FRAME> tag tells the browserwhich HTML file goes in...
Attributes of <Frameset>cols = width of first column, width ofsecond column, etcrows = height of first row, height ofsecon...
Example<HTML><HEAD><TITLE>Frames</TITLE></HEAD><FRAMESET cols = ”35%, 65%”>      <FRAME src=”left.html” name=”left_frame”>...
Linking between framesAny link to other pages causes the pageto be loaded into the respective frames.Target links to tell ...
Linking between framesPredefined targets:  Target = “_blank” : open in new window  Target = “_parent ”: open in place of t...
Nested FrameExample                 Header.html          Content.      Welcome.html           html
Nested FrameStep 1 – Identify Nested Area                             Frameset 1:        Header.html                      ...
Nested FrameStep 2 - Create a basic frameset structureto contain the header.html and nestedframe<HTML>     <HEAD><TITLE>Fr...
Nested FrameStep 3 - Create a frameset to contain thecontent.html & welcome.html    <FRAMESET cols= “200, 600”>    <FRAME ...
Nested Frame<html><head><title>Frames</title></head><FRAMESET rows= "100, 300">     <FRAME src=“header.html“ name="top_fra...
Upcoming SlideShare
Loading in …5
×

Web topic 9 navigation and link

774 views
692 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
774
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web topic 9 navigation and link

  1. 1. Web Authoring Topic 9 –Navigation And Linking
  2. 2. ObjectivesStudents should able to: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
  3. 3. NavigationNavigation bars provide an easy andvisually interesting way for visitors tonavigate between the sites main sections.Navigation bar provides the following:1. An easy reference for the contents of your Web site2. A way for visitors to navigate through multiple levelsin your site structure3. A more convenient, customized alternative to abrowsers Back and Forward buttons
  4. 4. Type of NavigationConsider the following to decide whattype of navigation bar:What level of structural or graphical complexitydo you want your site to have?What type of Internet access will visitors to yoursite be using?What are your strongest skills or interests in Webdevelopment? http://www.adobe.com/support/dreamweaver/programs/navbar_overview/
  5. 5. Type of Navigation1) Text-only navigation bar2) Graphical navigation bar with rollovers3) Animated navigation bar
  6. 6. FramesOne of the most powerful features in Webdesign is the support of framed documents.Frames allow a single browser tocontain multiple pages.The browser window gets divided intoindividual panes, each displaying thecontents of a separate HTMLdocument.
  7. 7. FramesWhy use Frames?1. Frames allow you to keep relevantinformation always on the screen2. Easy Navigation3. Frames helps to save bandwidth
  8. 8. Frameset DocumentA governing HTML file known as theframeset document, defines the layout ofthe frames, their properties, and thefilenames of the other HTML documentsdisplayed within them. 4 HTML documents Page 1 needed: 1 Frameset document Page 2 Page 3 3 documents for each of the frame
  9. 9. Frameset DocumentIn a frameset document, the opening andclosing <FRAMESET>…</FRAMESET>tag pair replace the <BODY>…</BODY>tag pair.<FRAMESET> tag is the primary tagused to create a framed web page. Itcontains information on how to divide thescreen into individual frames.
  10. 10. Frameset DocumentThe <FRAME> tag is within the<FRAMESET> tag pair.The <FRAME> tag tells the browserwhich HTML file goes in each frame,placing them in order from left to rightacross the columns and from top tobottom down the rows.
  11. 11. Attributes of <Frameset>cols = width of first column, width ofsecond column, etcrows = height of first row, height ofsecond row, etcframeborder : “yes” or “no”border : accepts a numeric valuebordercolor
  12. 12. 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>
  13. 13. Linking between framesAny link to other pages causes the pageto be loaded into the respective frames.Target links to tell the browser where toopen their reference documents.
  14. 14. Linking between framesPredefined 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 altogetherBase target: target a specific frame bydefault <BASE target = “frame_name”>
  15. 15. Nested FrameExample Header.html Content. Welcome.html html
  16. 16. Nested FrameStep 1 – Identify Nested Area Frameset 1: Header.html header.html Frameset 2: Content.html Welcome.html nested framesNested Area is the content.html andwelcome.html
  17. 17. Nested FrameStep 2 - Create a basic frameset structureto contain the header.html and nestedframe<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>
  18. 18. Nested FrameStep 3 - Create a frameset to contain thecontent.html & welcome.html <FRAMESET cols= “200, 600”> <FRAME src= “content.html” name= “content”> <FRAME src= “welcome.html” name= “main”> </FRAMESET>
  19. 19. 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>

×