Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf ·...
Transcript of Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf ·...
![Page 1: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/1.jpg)
Project ASPX 8: Navigating in a Website
1
![Page 2: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/2.jpg)
Create Navigation ASP.Net Control◦ SiteMapPath
◦ Menu
◦ TreeView
◦ SiteMapDataSource
2
![Page 3: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/3.jpg)
3
![Page 4: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/4.jpg)
4
![Page 5: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/5.jpg)
5
Breadcrumbs
![Page 6: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/6.jpg)
6
TreeView
![Page 7: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/7.jpg)
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
![Page 8: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/8.jpg)
8
File -> New -> Page
![Page 9: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/9.jpg)
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
![Page 10: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/10.jpg)
10
Menu control◦ Asp.treeview
![Page 11: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/11.jpg)
Create Web Pages
Load Data◦ SiteMap XML file
Develop Navigation◦ Tree View
◦ Menu
◦ SitePathMap
11
![Page 12: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/12.jpg)
For practice, create an empty website
Add empty .aspx pages
◦ to understand the navigation elements
12
![Page 13: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/13.jpg)
For practice, create an empty website
Add empty .aspx pages
◦ to understand the navigation elements
13
![Page 14: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/14.jpg)
Update all of the pages … ◦ to visualize the
navigation elements Change the
background colors
Add text to identify the pages
◦ File – Properties
14
![Page 15: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/15.jpg)
Update all of the pages ◦ to visualize the
navigation elements Change the
background colors
Add text to identify the pages
◦ File – Properties
15
![Page 16: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/16.jpg)
Create a SiteMap XML file◦ File –> New –> Page
16
![Page 17: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/17.jpg)
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
![Page 18: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/18.jpg)
Create a SiteMap page◦ Watch out for the XML tag structure!!
◦ Two ways … <xxxxx> </xxxxx> or
<xxxxx />
18
![Page 19: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/19.jpg)
Save file◦ Web.sitemap
◦ MUST be in the ROOT directory!!!
19
![Page 20: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/20.jpg)
Drag the TreeView ASP.Net Navigation Control onto the web page
20
![Page 21: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/21.jpg)
Select the Data Source◦ Choose the sitemap
21
![Page 22: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/22.jpg)
Select the Data Source◦ Choose the SiteMap
22
![Page 23: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/23.jpg)
Notice the pages now show!
23
![Page 24: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/24.jpg)
Notice the pages now show!
24
![Page 25: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/25.jpg)
Select AutoFormat from the menu tasks
25
![Page 26: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/26.jpg)
Select AutoFormat from the menu tasks
26
![Page 27: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/27.jpg)
Save file◦ Web.sitemap
27
![Page 28: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/28.jpg)
Drag onto the web page
Create “breadcrumb”
28
![Page 29: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/29.jpg)
Add the Menu Control to the web page
29
![Page 30: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/30.jpg)
AutoFormat
30
![Page 31: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/31.jpg)
Dynamic View◦ Flyout effect
31
![Page 32: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/32.jpg)
32
![Page 33: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/33.jpg)
Menu Control◦ Previous lessons discussed
menu control and sitemap data source
◦ Now, modify the menu
Horizontal / vertical
33
![Page 34: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/34.jpg)
Menu Control◦ Modify the menu
Horizontal / vertical
Levels displayed
34
![Page 35: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/35.jpg)
Menu Control◦ Must be at the
root level
◦ Can override so you can have multiple sitemaps
◦ Beyond this course!!
35
![Page 36: Project ASPX 8: Navigating in a Websiteism5994.business.wayne.edu/...Navigation-SiteMap.pdf · SiteMapDataSource to make navigation controls work This is an XML file Root tag --](https://reader035.fdocuments.us/reader035/viewer/2022071212/6025b20c2cb9a004c85602e2/html5/thumbnails/36.jpg)
Project ASPX 8: Navigating in a WebsiteCompleted
36