Website Navigation.

Slides:



Advertisements
Similar presentations
Master Pages, User Controls, Site Maps, Localization Svetlin Nakov Telerik Corporation
Advertisements

Customizing the MOSS 2007 Search Results November 2007 Rafael Perez.
Chapter 5 Creating an Image Map.
Unit 5: Building Presentation Layer Applications with ASP.NET 2.0.
Links and Comments.
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
Navigation Controls MacDonald Ch. 11 MIS 424 MIS 424 Professor Sandvig Professor Sandvig.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Purpose Tags are the key to marking up content on your HTML page. It’s the tags that mark up sections of the page and are defined (aesthetically) on the.
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.
Creating a Web Page HTML, FrontPage, Word, Composer.
1 Designing & Developing Web- Based Solutions in ASP.NET Week 3 Website Navigation & Resources.
WORKING WITH NAMESPACES
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Ch6:creating consistent looking web sites. Master pages Master page defines a combination of fixed content and content place holder to hold the web page(.aspx)
XP New Perspectives on Microsoft Access 2002 Tutorial 51 Microsoft Access 2002 Tutorial 5 – Enhancing a Table’s Design, and Creating Advanced Queries and.
Web Technologies Website Development Trade & Industrial Education
XP 1 CREATING AN XML DOCUMENT. XP 2 INTRODUCING XML XML stands for Extensible Markup Language. A markup language specifies the structure and content of.
Mohammed Mohsen Links Links are what make the World Wide Web web-like one document on the Web can link to several other documents, and those.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Website Development with Dreamweaver
Introduction to ASP.NET T.Ahlam Algharasi. The Visual Studio IDE Start page 2.
XP 1 New Perspectives on XML Binding XML Data with Internet Explorer.
1 Introduction  Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible.
Creating Links. The Anchor Element: The anchor tag can be used in three different ways: 1.External link – to link to a web page outside your own website.
1 Tutorial 12 Working with Namespaces Combining XML Vocabularies in a Compound Document.
CSE 409 – Advanced Internet Technology Today you will learn  Styles  Themes  Master Pages Themes and Master Pages.
1 CS 3870/CS 5870: Note 19 SiteMap and AJAX Lab 8.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
1 CS 3870/CS 5870: Note 18 SiteMap Prog8. Test 2 50 Points Thursday, Nov 12 2:00 PM – 4:00 PM Lab
By Lauren Mayer WEBSITE RESEARCH. NYLON MAGAZINE WEBSITE Header, this is the title of the website and should be the main attraction. This example had.
ASP.NET Rehab AlFallaj. Manualy type the following code for iframe tag in the aspx source code.
Marco Bellinaso Senior Trainer & Consultant Code Architects Srl Building Dynamic Navigation Systems with Visual Studio 2005 and ASP.NET 2.0.
Microsoft FrontPage 2003 Illustrated Complete Working on the Web Site’s Hyperlinks and Appearance.
Session: 4. © Aptech Ltd. 2Creating Hyperlinks and Anchors / Session 4  Describe hyperlinks  Explain absolute and relative paths  Explain how to hyperlink.
MS-PowerPoint 2 Prepared by Isma3eel Al-Taharwa. Content  Animation types.  Applying schema Animation.  Adding Custom Animation.  Making Slide Transition.
Easy Site Navigation Getting organized, staying organized Creating custom site-navigation controls Using Menu, TreeView, and SiteMenuPath controls Make.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
COMP 143 Web Development with Adobe Dreamweaver CC.
Chapter 7 Navigation. Objectives How to move around in your site using server controls and plain HTML How to address pages and other resources like images.
Chapter 2 Creating Website with Web Forms. Objectives Understand the different project types and templates when building ASP.NET web sites. The different.
PowerPoint Adding Hyperlinks and Hiding Slides Learn to Link to websites and other slides in the presentation! Adding Hyperlinks and Hiding Slides Learn.
Getting an account with WordPress.com
Site Maps and Navigation
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Links and Comments in HTML5
Chapter 2 Developing a Web Page.
Internal and External Links
Links and Comments.
Forms.
HTML Vocabulary.
MS PowerPoint 2010 Week 2.
CS 3870 Prog6 Roles Management Due Monday, November 5 Group Assignment.
Introducing HTML & XHTML:
State management & Master Pages in asp.net
CS 3870/CS 5870 Prog 6 Site Map.
CHƯƠNG IX: SITE NAVIGATION & USER CONTROL
Create and edit web pages 2
Links and Comments.
Starting to develop a website
Dreamweaver Basics.
Building ASP.NET Applications
Introduction to the ISB Intranet
Menu.
Links and Comments.
Links and Comments.
NAVIGATION CONTROLS.
SEARCH ENGINE OPTIMIZATION
Website Navigation.
Presentation transcript:

Website Navigation

Site Maps If you want to perform page navigation in response to another action, you can call Response.Redirect() or Server.Transfer() methods in your code. You can use hyperlinks to navigate also But these methods are not suitable for professional web applications where dozens of pages exists. You need a site map , ASP.NET has site map models and the navidation controls that works with it.

Defining a Site Maps There exists only a single site map provider, named XMLSiteMapProvider. Looks for a file named Web.sitemap in the root folder of the website. Aim: to extract the site map data and create the corresponding SiteMap object. This SiteMap object is then made available to the SiteMapDataSource, which you place on every page that uses navigation. Finally, SiteMapDataSource provides the Site map information to navigation controls. You can use the master pages to simplify the task of adding navigation to your website.

Website -> Add New -> then choose Site Map. Creating a Site Map Website -> Add New -> then choose Site Map. Rules of creating this XML file (there exists 5 rules) Rule 1: Site Maps Begin with the <siteMap> Element EveryWeb.sitemap file begins by declaring the <siteMap> element and ends by closing that element. You place the actual site map information between the start and end tags (where the three dots are shown here): <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> ... </siteMap> The xmlns attribute is required, and must be entered exactly as shown here. This tells ASP.NET that the XML file uses the ASP.NET site map standard.

Rule 2: Each Page Is Represented by a <siteMapNode> Element Site Map 2nd Rule Rule 2: Each Page Is Represented by a <siteMapNode> Element So, what does the site map content look like? Essentially, every site map defines an organization of web pages. To insert a page into the site map, you add the <siteMapNode> element with some basic information. Namely, you need to supply the title of the page (which appears in the navigation controls), a description (which you may or may not choose to use), and the URL (the link for the page). You add these three pieces of information using three attributes. The attributes are named title, description, and url, as shown here: <siteMapNode title="Home" description="Home" url="~/default.aspx" /> The ~/ characters in url represent the root folder of your web application. Whole Picture: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> </siteMap>

Site Map 3rd Rule Rule 3: A <siteMapNode> Element Can Contain Other <siteMapNode> Elements Site maps don’t consist of simple lists of pages. Instead, they divide pages into groups. To represent this in a site map file, you place one <siteMapNode> inside another. Instead of using the empty element syntax shown previously, you’ll need to split your <siteMapNode> element into a start tag and an end tag: <siteMapNode title="Home" description="Home" url="~/default.aspx"> ... </siteMapNode> Now you can slip more nodes inside. Here’s an example where a Home group contains two more pages: <siteMapNode title="Products" description="Our products" url="~/products.aspx" /> <siteMapNode title="Hardware" description="Hardware choices"url="~/hardware.aspx" />

In previous all three nodes including the Home Group node. Site Map 3rd Rule cntd. In previous all three nodes including the Home Group node. You might want Group nodes to not to become links, the following sample helps: <siteMapNode title="Products" description="Products"> <siteMapNode title="In Stock" description="Products that are available" url="~/inStock.aspx" /> <siteMapNode title="Not In Stock" description="Products that are on order" url="~/outOfStock.aspx" /> </siteMapNode> When you show this part of the site map in a web page, the Products node will appear as ordinary text, not a clickable link.

Site Map 4th Rule Rule 4: Every Site Map Begins with a Single <siteMapNode> Another rule applies to all site maps. A site map must always have a single root node. All the other nodes must be contained inside this root-level node. That means the following is not a valid site map, because it contains two top-level nodes: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> <siteMapNode title="In Stock" description="Products that are available" url="~/inStock.aspx" /> <siteMapNode title="Not In Stock" description="Products that are on order"url="~/outOfStock.aspx" /> </siteMap> The following site map is valid, because it has a single top-level node (Home), which contains two more nodes: <siteMapNode title="Home" description="Home" url="~/default.aspx"> <siteMapNode title="Not In Stock" description="Products that are on order" url="~/outOfStock.aspx" /> </siteMapNode>

Rule 5: Duplicate URLs Are Not Allowed Site Map 5th Rule Rule 5: Duplicate URLs Are Not Allowed You cannot create two site map nodes with the same URL. But the following sample is valid because the two URLs have different query string arguments at the end. <siteMapNode title="In Stock" description="Products that are available" url="~/products.aspx?stock=1" /> <siteMapNode title="Not In Stock" description="Products that are on order" url="~/products.aspx?stock=0" />

A Sample Simple Site Map <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> <siteMapNode title="Home" description="Home" url="~/default.aspx"> <siteMapNode title="Information" description="Learn about our company"> <siteMapNode title="About Us" description="How 420 was founded" url="~/aboutus.aspx" /> <siteMapNode title="Investing" description="Financial Reports " url="~/financial.aspx" /> </siteMapNode> <siteMapNode title="Products" description="Learn about our products"> <siteMapNode title="RevoStock" description="Stock List" url="~/product1.aspx" /> <siteMapNode title="RevoAnalyze"description="Investment analysis"url="~/product2.aspx" /> </siteMap>

A Sample Simple Site Map Drop on your page the SiteMapDataSource Object. Beside being grayed control in your page. It is invisible when you run your page. Navigation tab of the toolbox has three controls for site mapping: TreeView: The TreeView displays a “tree” of grouped links that shows your whole site map at a glance. Menu: The Menu displays a multilevel menu. By default, you’ll see only the first level, but other levels pop up (thanks to some nifty JavaScript) when you move the mouse over the subheadings. SiteMapPath: The SiteMapPath is the simplest navigation control—it displays the full path you need to take through the site map to get to the current page. For example, it might show Home > Products > RevoStock if you’re at the product1.aspx page. Unlike the other navigation controls, the SiteMapPath is useful only for moving up the hierarchy. To connect one of these controls to the SiteMapDataSource control set its DataSourceID.

Binding Portions of Side Map Using SiteMapDataSource properties (“StartingNodeUrl”) some nodes could be hidden from the user. Figuring out these properties can take some work, and you might need to do a bit of experimenting to decide the right combination of SiteMapDataSource settings you want to use. To make matters more interesting, you can use more than one SiteMapDataSource on the same page. This means you could use two navigation controls to show different sections of thesite map hierarchy.

Using Different Site Maps in the same file You can use different branches or even different files but still you will be limited with that you can not give link to apage more than one. Instead you can try some dummy get information to differentiate them. <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode title="Root" description="Root" url="~/default.aspx"> <siteMapNode title="Dealer Home" description="Dealer Home" url="~/default_dealer.aspx"> ... </siteMapNode> <siteMapNode title="Employee Home" description="Employee Home" url="~/default_employee.aspx"> </siteMap> You can even make your life easier by breaking a single site map into separate files using the siteMapFile attribute, like this: <siteMapNode siteMapFile="Dealers.sitemap" /> <siteMapNode siteMapFile="Employees.sitemap" /> Read your 2008 from page 462 (the SiteMapPath Control) up to 480.