Hi Hi

'사이트 탐색 만들기'에 해당되는 글 1건

  1. 12장 사이트 탐색 만들기 (1)

12장 사이트 탐색 만들기

 

사이트 탐색이란 ?
사용자가 일관된 방식으로 사이트를 탐색할 수 있는 기능을 제공하는 클래스 집합이다.
사이트 전체의 레이아웃을 한 곳으로 관리했던 마스터 페이지의 모습과 닮았다.
쉽게 메뉴와 같다고 볼수 있다.


사이트 맵(Site Map)
웹 사이트의 정보를 한눈에 검색하기 위해 만들어진 웹 사이트 시각적 설계도 또는 지도 이다.
XML 형식의 사이트 맵 파일(.sitemap)로 만들어 관리한다.

WebSite.sitemap 예제
 <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="dafault.aspx" tetle="Home" description="메인페이지">
    <siteMapNode url="Introduce.aspx" title="사이트소개" description="사이트 소개"/>
    <siteMapNode url="QnA.aspx" title="Q&amp;A" description="답변 게시판">
      <siteMapNode url="AspNet.aspx" title="ASP.NET" description="ASP.NET 답변게시판"/>
      <siteMapNode url="BookBoard.aspx" title="Books" description="책 관련 답변 게시판"/>
    </siteMapNode>
    <siteMapNode url="Lecture.aspx" title="강의실" description="개발 관련 게시판">
      <siteMapNode url="Basis.aspx" title="기초 강의실" description="ASP.NET 개발을 위한 기초 강의">
        <siteMapNode url="Html.aspx" title="HTML 강의실" description="HTML 강의"/>
      </siteMapNode>
      <siteMapNode url="Primary.aspx" title="초급 강의식" description="ASP.NET 개발을 위한 초급 강의">
        <siteMapNode url="Csharp.aspx" title="C# 강의" description="C# 강의"/>
      </siteMapNode>
      <siteMapNode url="Intermediate.aspx" title="중급 강의" description="ASP.NET 개발을 위한 중급 강의"/>
      <siteMapNode url="Xmlwedservice.aspx" title="XML 웹 서비스" description="XML 웹서비스강의"/>
    </siteMapNode>
  </siteMapNode>
</siteMap>

title : 탐색링크의 제목을 지정한다.
description : 설명 구문을 지정하는 기능과 함께 탐색링크 위로 마우스 포인터를 올렸을 때 나타나는 문구를 지정하는 기능도 한다.
url : 탐색링크를 클릭했을 때 이동할 페이지의 url을 지정한다.




탐색 컨트롤 사용하기

siteMapPath 컨트롤
탐색 경로를 표현하는 데 사용되는 탐색컨트롤 이다.

Home > 강의실 > 기초 강의실 > HTML

SiteMapPath 예제[Html.aspx]

 <%@ Page Language="C#"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>SiteMapPath</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>SiteMapPath</h3>

        <asp:SiteMapPath ID="SiteMapPath1" runat="server">
        </asp:SiteMapPath>

    </div>
    </form>
</body>
</html>


SiteMapPate 컨트롤의 주요속성

PathSeparator  탐색경로의 각 탐색 링크(노드) 사이에 있는 ">" 바꿀 수 있다.
PathDirection 탐색 경로의 정렬 방향을 가져오거나 설정한다.
ShowToolTips 탐색 링크(경로) 위로 마우스 포인터를 올렸을 때 나타나는 툴팁의 사용여보를
                     가져오거나 설정하며 기본값은 True 이다.


TreeView 컨트롤
목차 또는 파일 디렉터리와 같은 계층적 데이터를 트리구조로 표현하는데 사용한다.

TreeVieW 예제[CSharp.aspx]

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreeView</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>TreeView</h3>

        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
        </asp:TreeView>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

   
    </div>
    </form>
</body>
</html>



XML 파일과 바인딩하기
TreeView와 XML파일 바인딩 예제[Shop.aspx]

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>XML 바인딩</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>TreeView와 XML 파일 바인딩</h3>

        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSourCe1">
            <DataBindings>
                <asp:TreeNodeBinding DataMember="Catagory" TextField="title" />
                <asp:TreeNodeBinding DataMember="Item" TextField="title" />
            </DataBindings>
        </asp:TreeView>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Shop.xml"></asp:XmlDataSource>
     </div>
    </form>
</body>
</html>


ShowCheckBoxse 속성
탐색 링크(노드)에 확인란을 표시하여 한 번에 여러 개의 탐색 링크를 선택하도록 할 수 있다.


 <asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSourCe1" ShowCheckBoxes="Leaf">

 

Menu 컨트롤
웹 사이트에서 정적 또는 동적으로 표시되는 메뉴(상단, 좌측 탐색 메뉴 등등)를 표현하는데 사용되는 탐색 컨트롤이다.

정적메뉴는 메뉴가 완전히 확장되어 사용자가 바로 클릭할 수 있는 메뉴를 의미, 동적 메뉴는 사용자가 특정 메뉴 위로 마우스 포인터를 가져갔을 때 동적으로 표시되는 메뉴를 의미한다.

Menu 예제[Intermediate.aspx]

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Menu 컨트롤</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>Menu 예제</h3>

        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

    </div>
    </form>
</body>
</html>