View
45
Download
0
Category
Preview:
Citation preview
Project ASPX 8: Navigating in a Website
1
Create Navigation ASP.Net Control◦ SiteMapPath
◦ Menu
◦ TreeView
◦ SiteMapDataSource
2
3
4
5
Breadcrumbs
6
TreeView
7
Need a SiteMap XML file & a SiteMapDataSource to make navigation controls work
◦ This is an XML file
Root tag -- <siteMap> </siteMap>
Nodes -- <siteMapNode> </siteMapNode>
Explains hierarchy of the website
8
File -> New -> Page
9
Need a SiteMapPath to make navigation controls work
◦ Highest siteMapNode in the XML file is the home page
◦ The menu hierarchy is based upon the xml & NOT on the folder structure
10
Menu control◦ Asp.treeview
Create Web Pages
Load Data◦ SiteMap XML file
Develop Navigation◦ Tree View
◦ Menu
◦ SitePathMap
11
For practice, create an empty website
Add empty .aspx pages
◦ to understand the navigation elements
12
For practice, create an empty website
Add empty .aspx pages
◦ to understand the navigation elements
13
Update all of the pages … ◦ to visualize the
navigation elements Change the
background colors
Add text to identify the pages
◦ File – Properties
14
Update all of the pages ◦ to visualize the
navigation elements Change the
background colors
Add text to identify the pages
◦ File – Properties
15
Create a SiteMap XML file◦ File –> New –> Page
16
Create a SiteMap XML file◦ url is the name of the page
◦ Title is anything
it is the text for the link in the navigation element
◦ Description is a description of the page
17
Create a SiteMap page◦ Watch out for the XML tag structure!!
◦ Two ways … <xxxxx> </xxxxx> or
<xxxxx />
18
Save file◦ Web.sitemap
◦ MUST be in the ROOT directory!!!
19
Drag the TreeView ASP.Net Navigation Control onto the web page
20
Select the Data Source◦ Choose the sitemap
21
Select the Data Source◦ Choose the SiteMap
22
Notice the pages now show!
23
Notice the pages now show!
24
Select AutoFormat from the menu tasks
25
Select AutoFormat from the menu tasks
26
Save file◦ Web.sitemap
27
Drag onto the web page
Create “breadcrumb”
28
Add the Menu Control to the web page
29
AutoFormat
30
Dynamic View◦ Flyout effect
31
32
Menu Control◦ Previous lessons discussed
menu control and sitemap data source
◦ Now, modify the menu
Horizontal / vertical
33
Menu Control◦ Modify the menu
Horizontal / vertical
Levels displayed
34
Menu Control◦ Must be at the
root level
◦ Can override so you can have multiple sitemaps
◦ Beyond this course!!
35
Project ASPX 8: Navigating in a WebsiteCompleted
36
Recommended