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
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
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/
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 tocontain multiple pages.The browser window gets divided intoindividual panes, each displaying thecontents of a separate HTMLdocument.
FramesWhy use Frames?1. Frames allow you to keep relevantinformation always on the screen2. Easy Navigation3. Frames helps to save bandwidth
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
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.
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.
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
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.
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”>
Nested FrameExample Header.html Content. Welcome.html html
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
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>