다음을 통해 공유


연습: 사용자 지정 마스터 페이지 및 사이트 페이지를 이미지로 가져오기

이 연습에서는 SharePoint 사용자 지정 마스터 페이지와 이미지가 있는 사이트 페이지를 Visual Studio SharePoint 프로젝트로 가져오는 방법을 보여 줍니다.

이 연습에서는 다음 작업을 수행하는 방법을 보여 줍니다.

  • SharePoint Designer에서 이미지를 사용하여 사용자 지정 마스터 페이지와 사이트 페이지를 만듭니다.

  • 사용자 지정 마스터 페이지, 이미지 및 사이트 페이지를 SharePoint 솔루션 파일(.wsp)로 내보냅니다.

  • SharePoint 솔루션 패키지 가져오기 프로젝트를 사용하여 .wsp 파일을 Visual Studio SharePoint 프로젝트로 가져오고 배포합니다.

참고

다음 지침처럼 컴퓨터에서 Visual Studio 사용자 인터페이스 요소 일부에 대한 이름이나 위치를 다르게 표시할 수 있습니다. 이러한 요소는 사용하는 Visual Studio 버전 및 설정에 따라 결정됩니다. 자세한 내용은 Visual Studio 설정을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

SharePoint Designer에서 항목 만들기

이 예제에서는 내보내기 위해 SharePoint Designer에서 사용자 지정 마스터 페이지, 사용자 지정 마스터 페이지를 참조하는 사이트 페이지 및 사이트 페이지에 나타날 이미지 파일을 만드는 방법을 보여 줍니다. 이미지는 SharePoint에서 /images/ 폴더에 추가됩니다.

SharePoint Designer에서 사용자 지정 마스터 페이지를 만들려면

  1. SharePoint Designer의 탐색 창에서 마스터 페이지를 클릭합니다.

  2. 리본에서 빈 마스터 페이지를 클릭합니다.

  3. SharePoint Designer의 아래쪽에서 코드 탭을 클릭합니다.

  4. 기존 태그를 다음 태그로 바꿉니다.

    <%@ Master Language="C#" %>
    <%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <html dir="ltr">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <SharePoint:RobotsMetaTag runat="server" __designer:Preview="" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl00' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"></SharePoint:RobotsMetaTag>
    <title>Web Page</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ContentPlaceHolder id="ContentPlaceHolderMain" 
            runat="server">
          </asp:ContentPlaceHolder>
    </form>
    </body>
    </html>
    
  5. 페이지를 mybasic1.master로 저장합니다.

SharePoint Designer에서 콘텐츠 데이터베이스에 이미지 추가

이제 사이트 페이지에 표시할 이미지를 추가할 수 있습니다. 이미지가 SharePoint 콘텐츠 데이터베이스에 배포됩니다.

SharePoint Designer에서 콘텐츠 데이터베이스에 이미지를 추가하려면

  1. 리본에서 모든 파일을 클릭한 다음 트리 뷰에서 이미지를 선택합니다.

  2. 리본에서 파일 가져오기를 클릭하고 원하는 파일을 선택한 다음 확인을 클릭합니다. 이 예제에서 파일의 이름은 myimg1.png입니다.

    이미지를 구성하는 데 도움이 되도록 하위 폴더를 만들 수도 있습니다.

  3. 가져오기 대화 상자를 닫습니다.

사이트 페이지 만들기

이 기본 사이트 페이지에서는 사용자 지정 마스터 페이지를 사용하고 이전 단계에서 추가한 이미지를 표시합니다.

사이트 페이지를 만들려면

  1. 탐색 창에서 사이트 페이지를 클릭합니다.

  2. 리본에서 페이지 단추를 클릭한 다음 ASPX를 클릭합니다. 새 파일의 이름을 mycontentpage1.aspx로 지정합니다.

    사이트 페이지를 구성하는 데 도움이 되도록 하위 폴더를 만들 수도 있습니다.

  3. 목록에서 MyContentPage1.aspx를 클릭하여 속성 페이지를 연 다음 페이지의 아래쪽에서 편집 링크를 클릭합니다.

  4. 페이지의 아래쪽에서 코드 단추를 클릭합니다.

  5. 기존 태그를 다음 태그로 바꿉니다.

    <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase" MasterPageFile="../_catalogs/masterpage/mybasic1.master" meta:progid="SharePoint.WebPartPage.Document" %>
    
    <asp:Content ID="Main" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server">
    <img alt="My Image" longdesc="My image from images folder" src="../images/myimg1.png" />
    </asp:Content>
    
  6. 업데이트된 사이트 페이지를 저장합니다.

SharePoint에서 항목 내보내기

SharePoint에서 항목을 SharePoint 솔루션 파일(.wsp)로 내보냅니다.

SharePoint Designer에서 항목을 내보내려면

  1. SharePoint Designer의 탐색 모음에서 팀 사이트를 클릭한 다음 리본에서 템플릿으로 저장을 클릭합니다.

  2. 템플릿으로 저장 대화 상자에서 파일 이름과 템플릿 이름을 입력하고 콘텐츠 포함 확인란을 선택한 다음 마침을 클릭합니다.

    사이트의 콘텐츠가 .wsp 파일에 저장됩니다.

  3. 솔루션을 내보낸 후 솔루션 갤러리 링크를 클릭하여 사용 가능한 솔루션 파일의 목록을 표시합니다.

  4. 새 .wsp 파일을 클릭하고 시스템에 저장합니다.

Visual Studio로 항목 가져오기

Visual Studio로 .wsp 파일을 가져옵니다. 콘텐츠를 가져온 후 사용자 지정하고 항목을 더 추가한 다음 배포할 수 있습니다.

.wsp 파일의 항목을 Visual Studio로 가져오려면

  1. Visual Studio에서 SharePoint 솔루션 패키지 가져오기 프로젝트를 만듭니다.

  2. 가져올 항목 선택 페이지의 형식 열에 있는 모듈 아래에서 가져오기 위해 다음 표의 파일만 선택합니다.

    파일 이름

    설명

    _catalogsmasterpage_

    사용자 지정 마스터 페이지

    images_

    SharePoint 파일 시스템의 이미지 파일

    SitePages_

    사이트 페이지

  3. 마침을 클릭하여 선택한 항목을 가져옵니다.

  4. 솔루션 탐색기에서 사용자 지정 마스터 페이지를 클릭하고 배포 충돌 해결 속성을 자동으로 설정합니다.

    이렇게 하면 배포 충돌이 자동으로 해결됩니다.

  5. 새 마스터 페이지의 이름이 기존 페이지의 이름과 같으면 기존 페이지가 SharePoint Designer에서 기본 마스터 페이지나 사용자 지정 마스터 페이지로 표시되지 않도록 합니다.

    기존 마스터 페이지가 기본 마스터 페이지나 사용자 지정 마스터 페이지로 표시된 경우 마스터 페이지를 삭제할 수 없다는 배포 오류가 발생합니다. 이 문제를 방지하려면 다음을 수행합니다.

    • 기존 마스터 페이지가 기본 마스터 페이지로 설정된 경우 임시로 다른 마스터 페이지를 기본 마스터 페이지로 설정합니다. SharePoint에 파일을 배포한 후 새 마스터 페이지를 기본 마스터 페이지로 설정합니다.

    • 기존 마스터 페이지가 사용자 지정 마스터 페이지로 설정된 경우 임시로 다른 마스터 페이지를 사용자 지정 마스터 페이지로 설정합니다. SharePoint에 파일을 배포한 후 새 마스터 페이지를 사용자 지정 마스터 페이지로 설정합니다.

  6. 빌드 메뉴에서 솔루션 배포를 클릭합니다.

  7. SharePoint 사이트를 열고 배포된 항목을 확인합니다.

Visual Studio로 파일을 가져오고 SharePoint에 배포하는 다른 방법은 Visual Studio에서 파일을 모듈에 추가하는 것입니다. 자세한 내용은 다음을 참조하십시오. 방법: 마스터 페이지 또는 테마 가져오기모듈을 사용하여 솔루션에 파일 포함.

참고 항목

개념

기존 SharePoint 사이트에서 항목 가져오기

기타 리소스

SharePoint 솔루션 개발

웹 파트 또는 응용 프로그램 페이지를 위해 재사용 가능한 컨트롤 만들기