Your SlideShare is downloading. ×
  • Like
Web topic 9  navigation and link
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web topic 9 navigation and link



Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Web Authoring Topic 9 –Navigation And Linking
  • 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. 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. 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?
  • 5. Type of Navigation1) Text-only navigation bar2) Graphical navigation bar with rollovers3) Animated navigation bar
  • 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. FramesWhy use Frames?1. Frames allow you to keep relevantinformation always on the screen2. Easy Navigation3. Frames helps to save bandwidth
  • 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. 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. 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. 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. 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. 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. 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. Nested FrameExample Header.html Content. Welcome.html html
  • 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. 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. 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. 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>