Download to read offline
Uploaded byCK Yang
Web topic 9 navigation and link
Navigation bars and links allow users to easily navigate between different pages and sections of a website. Frames divide the browser window into separate panes that each display a different HTML document, enabling relevant information to remain visible. A frameset document uses <FRAMESET> tags to define the layout and properties of frames and specify the files displayed in each frame. Links between frames use target attributes to indicate where referenced documents should open. Nested frames involve multiple levels of framesets, with one set contained within another.
More Related Content
Similar to Web topic 9 navigation and link
Web topic 9 navigation and link
- 1. Web Authoring Topic 9 – Navigation And Linking
- 2. Objectives Students should ableto: 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
- 3. Navigation Navigation bars providean 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
- 4. Type of Navigation Considerthe 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/
- 5. Type of Navigation 1)Text-only navigation bar 2) Graphical navigation bar with rollovers 3) Animated navigation bar
- 6. Frames One of themost 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.
- 7. 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
- 8. Frameset Document A governingHTML 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
- 9. Frameset Document In aframeset 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.
- 10. 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.
- 11. 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
- 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 frames Anylink 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.
- 14. Linking between frames Predefinedtargets: 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”>
- 15. Nested Frame Example Header.html Content. Welcome.html html
- 16. 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
- 17. 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>
- 18. 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>
- 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>