SharePoint 2013에서 Dreamweaver 및 디자인 관리자 사용

Article
09/20/2012

최초 문서 게시일: 2012년 7월 28일 토요일

SharePoint 2013에는 웹 사이트를 더욱 쉽게 스타일 지정하고 게시할 수 있도록 많은 기능이 새로운 추가되었습니다. 그 중에는 콘텐츠별로 다른 채널 만들기(예: 전체 크기 브라우저, 모바일 장치, 테이블 등에 대해 각각 다른 페이지 집합 만들기) 등의 작업을 수행할 수 있는 디자인 관리자가 있습니다. 서로 다른 마스터 페이지를 각 채널에 연결할 수 있습니다. 매우 흥미로운 기능 중 하나로 표준 HTML 편집 도구에서 페이지를 만든 다음 SharePoint에 업로드하여 마스터 페이지로 사용할 수 있습니다. SharePoint에서는 .html 파일과 동기화되는 .aspx 파일을 자동으로 만듭니다. 이 변환이 수행된 이후에는 편집을 위해 다른 도구로 돌아갈 필요가 없습니다. 기본 편집 도구에서 .html 파일을 편집한 다음 저장하면 SharePoint에서 마스터 페이지를 렌더링하는 데 사용되는 .aspx 파일을 자동으로 동기화합니다.

또한 저희는 SharePoint의 많은 유용한 부분을 가져와서 마스터 페이지에 사용할 수 있도록 코드 조각이라는 것을 제공합니다. 원하는 코드 조각 형식(예: 검색 상자, 빠른 탐색 등)을 선택하고 해당 기능에 대해 자동 생성된 코드를 복사한 다음 마스터 페이지에 붙여 넣으면 됩니다. 공원을 산책하는 것처럼 쉽지는 않지만 표준 .html 페이지를 SharePoint 마스터 페이지로 완벽하게 변환하려면 SharePoint의 몇 가지 특징을 알아야 합니다.

이 게시물에서는 Dreamweaver 자습서(https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html(영문일 수 있음))를 통해 만든 웹 사이트 페이지를 가져와서 제 사이트의 SharePoint 마스터 페이지 및 홈 페이지로 변환해 보겠습니다. 완성된 Dreamweaver 사이트는 다음과 같습니다.

페이지를 보면 해결해야 하는 몇 가지 SharePoint 관련 항목이 있음을 알 수 있습니다.

머리글, 페이지 기본 보기의 배경 및 개별 텍스트 영역에 사용된 이미지
페이지 주요 부분과 세 텍스트 영역의 콘텐츠
추가할 SharePoint 기능(검색 상자 및 일부 탐색 기능 포함)

먼저 콘텐츠의 관점에서 생각해 보겠습니다. 기본 콘텐츠 형식으로 주 콘텐츠를 해결할 수 있지만, 페이지 아래쪽의 세 텍스트 영역 코드 조각을 설명하는 사용자 지정 콘텐츠가 필요합니다. 우선 사용자 지정 콘텐츠를 지원할 새로운 콘텐츠 형식을 만듭니다. 이미지는 기본적으로 콘텐츠에 연결되므로 텍스트에 대한 사이트 열과 함께 이미지에 대한 사이트 열을 추가할 것입니다. 시작 페이지 콘텐츠 형식은 이러한 종류의 페이지에 대해 매우 유용한 기본 클래스이므로 시작 페이지를 기반으로 새로운 콘텐츠 형식을 만든 다음 DW Layout이라고 부르기로 했습니다. 제 레이아웃을 지원하기 위해 다음 열을 추가했습니다.

LeftStoryImage
LeftStoryText
CenterStoryImage
CenterStoryText
RightStoryImage
RightStoryText

이미지 열은 모두 게시를 위한 서식 및 제약 조건이 있는 이미지로 정의되고 텍스트 열은 게시를 위한 서식 및 제약 조건이 있는 전체 HTML 콘텐츠로 정의됩니다.

이제 디자인 관리자에서 첫 단계를 시작할 준비가 되었으므로 Dreamweaver HTML 페이지와 스타일시트를 업로드한 다음 마스터 페이지로 변환해 보겠습니다.

이제 Dreamweaver 또는 자주 사용하는 HTML 편집 도구가 설치된 시스템에서 브라우저를 열고 SharePoint 사이트로 이동합니다. 사이트 작업 메뉴를 클릭하고 디자인 관리자를 선택합니다. 왼쪽의 작업 목록에서 3. 디자인 파일 업로드를 클릭합니다. 마스터 페이지와 스타일시트가 저장되는 SharePoint 폴더에 로컬 드라이브를 매핑하는 링크를 클릭합니다. SharePoint 사이트의 폴더 보기가 열립니다. 이제 파일을 SharePoint에서 Dreamweaver로 직접 끌어 놓을 수 있습니다. 이 기능을 사용할 수 없는 경우에는 항상 마스터 페이지 라이브러리로 이동하여 폴더 보기에서 라이브러리를 열 수 있습니다.

그런 다음 로컬 드라이브의 index.html 마스터 페이지를 폴더 보기의 SharePoint 라이브러리로 복사합니다. Dreamweaver 자습서에서는 스타일시트가 styles라는 하위 폴더에 있다고 가정하므로 해당 폴더를 만든 다음 스타일시트를 이 폴더에 복사합니다.

이제 브라우저의 디자인 관리자 작업 목록에서 4. 마스터 페이지 편집을 클릭합니다. HTML 파일을 SharePoint 마스터 페이지로 변환 링크를 클릭합니다. SharePoint 파일 브라우저 스타일 대화 상자가 열리고 마스터 페이지 갤러리에 복사된 index.html 파일이 표시됩니다. 이 파일을 클릭하여 선택한 다음 삽입 단추를 클릭합니다. 변환이 완료되고 디자인 관리자 페이지의 마스터 페이지 목록에 파일이 표시되고 변환이 완료되었다는 메시지가 나타납니다. 여기서 마스터 페이지 라이브러리의 폴더 보기를 새로 고치면 index.master라는 새 파일이 표시됩니다. 이 파일은 사이트에 업로드한 index.html 파일의 "쌍"입니다. 이후의 이 마스터 파일 업데이트는 SharePoint에서 자동으로 관리하므로 사용자는 HTML 파일 작업만 하면 됩니다.

이제 새 마스터 페이지를 보면 무슨 작업을 해야 하는지를 알 수 있습니다. 디자인 관리자에서 index.html 링크를 클릭합니다. 그러면 페이지가 미리 보기 모드로 열리므로 마스터 페이지의 모양을 확인할 수 있습니다. 변환을 처음 완료한 상태의 마스터 페이지 모양은 다음과 같습니다.

요점:

스타일시트가 적용되어 예상한 글꼴 및 서식으로 표시됩니다.
이미지는 표시되지 않으므로 수정해야 합니다. 일부 이미지는 콘텐츠이고 일부 이미지는 실제 마스터 페이지의 한 부분이므로 이를 고려하여 마스터 페이지를 수정해야 합니다.
표시되는 텍스트는 마스터 페이지의 일부가 아니므로 해당 텍스트를 제거한 다음 홈 페이지에 콘텐츠로 연결해야 합니다.

먼저 필요한 수정 작업에 대해 살펴보겠습니다. 기본 본문 섹션의 배경에 사용되는 이미지를 업로드하고 마스터에서 해당 이미지에 대한 링크를 수정해야 합니다. 페이지 아래쪽에 있는 다른 이미지를 모두 삭제해야 합니다. 또한 페이지에 있는 텍스트는 모두 마스터가 아닌 단일 페이지에 연결되어야 하는 콘텐츠이므로 모든 텍스트를 삭제해야 합니다. 이렇게 하려면 HTML 및 CSS 파일을 SharePoint 마스터 페이지 갤러리의 폴더 보기에서 Dreamweaver로 다시 끌어 놓습니다. HTML 페이지에 SharePoint "항목"이 갑자기 많아지므로 여기에 익숙해져야 합니다. 이제 원하는 HTML 편집기를 사용할 수 있지만 SharePoint 컨트롤과 태그를 사용해야 합니다.

HTML을 스크롤하면 마스터 페이지에 포함되어야 하지만 누락된 이미지를 발견할 수 있습니다. 누락된 이미지는 banner.gif(HTML) 및 main.jpg(main_image DIV의 배경을 설정하는 스타일시트)이며, 먼저 이 문제를 해결하겠습니다.

브라우저에서 뒤로 이동하여 사이트 작업 메뉴를 클릭한 다음 사이트 콘텐츠 보기 메뉴를 클릭합니다. 사이트 모음 이미지 링크를 클릭하여 문서 라이브러리를 엽니다. 이제 두 이미지를 이 라이브러리에 업로드합니다. 라이브러리 URL은 /sitecollectionimages이므로 Dreamweaver를 사용하여 이 라이브러리를 가리키도록 두 이미지의 경로를 변경합니다. 미리 보기 페이지를 새로 고치면 진행 상황이 표시됩니다.

페이지 아래쪽에 가로로 길게 있는 노란색 DIV는 이전 그림에 표시되지 않았습니다. 이 DIV는 첫 번째 그림에 실제로 있지만 브라우저가 너무 크게 조정되어 보이지 않는 것입니다. 노란색 DIV와 관련하여 중요한 내용은 SharePoint에서는 변환 프로세스 중에 이 DIV를 넣고 기본 페이지 콘텐츠에 대한 자리 표시자를 포함한다는 것입니다. 이제 콘텐츠 페이지의 일부이지만 마스터 페이지에 포함되지 않는 콘텐츠를 삭제합니다. 따라서 기본 섹션에서 텍스트를 제거하고 렌더링되지 않는 이미지와 해당 이미지 아래의 텍스트를 삭제합니다. 또한 자리 표시자 DIV(노란색 빼기 기호)를 페이지의 기본 섹션으로 이동합니다. 그리고 이미지와 텍스트가 있는 세 영역에 대한 자리 표시자 컨트롤을 추가합니다. 레이아웃 페이지를 만들 때 컨트롤을 함께 연결합니다.

결과 HTML은 콘텐츠를 배치할 위치에 대한 설명, 특수 SharePoint 처리 태그 및 자리 표시자를 결합한 것입니다. 각 섹션은 다음과 같습니다.

기본 본문:

왼쪽 열:

가운데 열:

오른쪽 열:

페이지 자체는 약간 비어 있지만 이는 마스터 페이지에서 원하는 바이므로 상관 없습니다.

작업을 마쳤으므로 이제 마스터 페이지는 거의 끝났습니다. 일부 메뉴와 검색 상자를 더 추가해야 하지만 이 작업은 잠시 후에 하겠습니다. 지금은 레이아웃 페이지를 만들어 보겠습니다. 레이아웃 페이지에서는 데이터 필드를 페이지의 해당 레이아웃에 "연결"합니다. 이렇게 하려면 사이트 설정… 마스터 페이지 및 페이지 레이아웃으로 이동합니다. 리본 메뉴의 새로 만들기 단추를 클릭하고 페이지 레이아웃을 선택합니다. 새 페이지 레이아웃 화면이 표시되면 이 페이지 레이아웃과 연결할 콘텐츠 형식을 선택합니다. 이 게시물의 앞부분에서 사용자 지정 콘텐츠 형식을 만들고 DW Layout이라고 이름을 지정했습니다. 따라서 연결된 콘텐츠 형식 필드에서 제 DW Layout 콘텐츠 형식을 선택합니다. URL, 제목 및 설명을 입력하여 제 레이아웃 페이지를 만들 수 있습니다. 이 경우 DWLayoutPage.aspx 페이지에 대한 URL을 지정하고, 제목은 Dreamweaver 레이아웃 페이지로 지정하고 Dreamweaver 자습서 사이트 기반 레이아웃 페이지라는 설명을 추가했습니다.

이제 제 레이아웃 페이지를 만들었지만 이 페이지에는 아직 컨트롤이 없습니다. 컨트롤을 페이지에 추가한 다음 앞에서 설명한 콘텐츠 형식의 사용자 지정 필드(LeftStoryImage, LeftStoryText 등)에 바인딩해야 합니다. 또한 제 마스터 페이지에 추가한 자리 표시자 컨테이너에 해당하는 ASP.NET 자리 표시자 컨트롤을 추가해야 합니다. 여기서 각 필드의 데이터는 컨테이너에 연결되고, 컨테이너는 마스터 페이지의 해당 컨테이너 자리 표시자에 출력됩니다. 이런 방법으로 마스터 페이지의 올바른 위치에 데이터를 렌더링합니다.

마스터 페이지에서 위의 세부 정보를 보면 네 개의 콘텐츠 자리 표시자 PlaceHolderMain, PlaceHolderLeft, PlaceHolderCenter 및 PlaceHolderRight가 추가되어 있습니다. 이러한 자리 표시자를 제 레이아웃 페이지에 추가한 다음 각 페이지에 적절한 콘텐츠 형식 필드를 넣어야 합니다. 이렇게 하려면 새 레이아웃 페이지인 DWLayoutPage.aspx를 마스터 페이지 갤러리의 폴더 보기에서 Dreamweaver로 다시 끌어 놓습니다. 기본적으로 레이아웃 페이지에는 자리 표시자 컨트롤 PlaceHolderMain이 이미 있으므로, 이 컨트롤은 추가할 필요가 없습니다. 표준 ASP.NET 컨트롤 태그를 사용하여 다른 컨트롤을 다음과 같이 추가합니다.

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

</asp:Content>

보시다시피 ID를 PlaceHolderLeft로 지정한 다음 ID가 PlaceHolderCenter 및 PlaceHolderRight인 두 컨트롤을 더 추가했습니다.

레이아웃 페이지에 필요한 실제 필드에는 컨트롤이 실제로 이만큼 많지 않습니다. 사용자 지정 콘텐츠 형식이 상속되는 기본 클래스와 함께 제공되는 기본 콘텐츠 필드가 있습니다. 이 필드를 간단히 PublishingPageContent라고 합니다. 이 필드는 페이지의 기본 본문에 들어가므로 PlaceHolderMain 섹션에 게시 컨트롤을 추가했습니다. 섹션은 다음과 같습니다.

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

다른 세 자리 표시자는 각각 두 개의 필드 즉, 이미지 필드와 RTF 필드가 필요합니다. 따라서 두 필드를 추가하고 태그의 FieldName 특성에서 콘텐츠 형식 필드 이름을 다시 사용합니다. PlaceHolderLeft 컨트롤의 예를 들면 다음과 같습니다. 가운데와 오른쪽이 매우 비슷합니다.

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

<PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>

<PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

여기서는 위에서 설명한 메뉴 및 검색 상자가 아닌 마스터 페이지 및 레이아웃 페이지의 관점에서 설정합니다. 따라서 새 페이지를 만들고 새 페이지 레이아웃을 사용하도록 합니다.

이렇게 하려면 페이지 라이브러리로 이동합니다. 리본 메뉴에서 새로 만들기를 클릭하고 DW Layout을 선택합니다. DW Layout은 시작 페이지 콘텐츠 형식에서 상속되는 콘텐츠 형식을 기반으로 하므로 이제 새 메뉴에 표시됩니다.

다음과 같이 필요한 속성을 입력합니다.

이제 시험해 볼 준비가 되었습니다. 시작하려면 마스터 페이지 갤러리로 돌아가서 제 마스터 페이지(index.html)를 게시합니다. 그전에는 페이지를 사이트에 대한 마스터 페이지로 선택할 수 없습니다. 그런 다음 사이트 설정, 마스터 페이지 설정으로 차례로 이동한 다음 제 마스터 페이지를 사이트 마스터 페이지의 마스터로 선택합니다. 처음에는 모든 것이 제로 작동하는지를 확인하기 위해 시스템 마스터 페이지에 대해 마스터를 설정하지 않았습니다. 실수로 마스터 페이지를 시스템 마스터 페이지에 할당한 경우 되돌리려면 매우 어렵습니다.

그런 다음 제 페이지 라이브러리로 돌아가서 방금 만든 dwhome.aspx 페이지를 클릭합니다. 그러면 브라우저에서 페이지가 열리므로 편집할 수 있습니다. 보시다시피 문제 없이 작동합니다.

이제 원본 Dreamweaver 사이트의 데이터를 연결합니다. 모든 텍스트 필드는 서식 있는 HTML이므로 원시 HTML을 Dreamweaver 페이지에서 복사하여 HTML 모드로 필드에 붙여 넣을 수 있습니다.

그림은 좀더 흥미롭습니다. 먼저 로컬 드라이브에서 SharePoint의 Images 폴더로 그림을 업로드합니다. 그런 다음 이미지 변환이라는 SharePoint 2013의 새로운 기능을 이용할 수 있습니다. 이 기능을 사용하여 이미지를 렌더링할 사용자 지정 크기를 만들 수 있습니다. 이 경우 Dreamweaver 자습서 사이트의 이미지는 모두 동일한 크기(316 x 130픽셀)입니다. 이 동작을 모방하려면 사이트 설정)…이미지 변환(디자인 섹션 아래)으로 이동합니다. 바로 사용 가능한 세 가지 변환이 표시됩니다. 방금 링크를 클릭하여 새 항목을 추가하고 설명한 치수로 변환을 만든 다음 Column Image라고 이름을 지정했습니다. 이미지를 페이지에 추가한 후 페이지에서 이미지를 표시하는 데 사용할 이미지 변환을 선택할 수 있습니다. 여기서 Column Image 변환을 선택했습니다. 그러면 모든 항목이 Dreamweaver 사이트에서와 동일하게 정렬됩니다.

작업을 완료한 이후의 모양은 원래 Dreamweaver 사이트와 매우 비슷합니다. 위쪽이 원본 그림이고 바로 아래가 SharePoint 버전입니다.

Dreamweaver 사이트:

SharePoint 사이트:

훌륭해 보입니다. H2 및 H3과 같은 일부 기본 제공 태그의 색과 글꼴만 차이가 있습니다. 이제 해당 영역을 제 스타일시트의 항목을 조정하여 문제를 해결합니다. 한 번만 변경할지 모든 H2, H3 등의 태그에 대해 변경할지 여부를 결정할 수 있습니다.

CSS를 약간 조정하면 기본적으로 원본 Dreamweaver 사이트와 똑같은 페이지가 표시됩니다. 이제 dwhome.aspx 페이지를 체크 인하여 제 사이트에 대한 홈 페이지로 지정합니다. 마지막으로 제 마스터 페이지에 앞에서 설명한 몇 가지 SharePoint 기능(위쪽 탐색, 검색 상자 등)을 추가합니다.

시작하려면 제 마스터 페이지를 폴더 보기에서 Dreamweaver로 다시 끌어 놓습니다. 브라우저에서 사이트 작업 메뉴로 이동하여 디자인 관리자를 선택합니다. 4. 마스터 페이지 편집 옵션을 클릭한 다음 이 연습의 마스터 페이지인 index.html을 클릭합니다. 제 미리 보기를 다시 표시하고 오른쪽 위에 있는 코드 조각 메뉴를 클릭합니다. 그러면 유용한 이 새로운 기능을 사용하여 위쪽 및 세로 탐색, 사이트 제목 및 로고, 검색 상자, 웹 파트 등의 다른 표준 SharePoint 페이지 요소를 선택할 수 있습니다. 이 시나리오에 대해 시각적으로 "보기 좋게" 만들기 위해 사이트에 Products과 Careers라는 일부 새로운 페이지를 추가하고 해당 페이지에 대한 탐색 링크를 만들었습니다.

다시 마스터 페이지에서 제 탐색 및 검색 상자를 이동할 새로운 DIV 요소를 추가했습니다. 그런 다음 코드 조각 페이지로 이동하여 위쪽 탐색 및 검색 상자에 대한 코드를 복사하여 적절한 DIV에 붙여 넣었습니다. 이제 제 마스터 페이지는 다음과 같습니다. 여기서는 간결하게 유지하기 위해 코드 조각을 제거했습니다. 코드 조각 페이지에서 복사한 후 붙여 넣어서 원하는 코드 조각을 가져올 수 있습니다.

<div>

</div>

<div>

</div>

SharePoint 메뉴와 검색 상자를 포함하여 완성된 페이지는 다음과 같습니다.

이제 마쳤으므로 몇 가지 짚고 넘어가야 할 사항이 있습니다. 우선 이 예는 마스터 페이지에 부적절합니다. 왜 그럴까요? 레이아웃이 홈 페이지에 대해서는 잘 작동하지만 대부분의 콘텐츠 페이지에 대해서는 유연하게 사용할 수 없습니다. 이 게시물은 Dreamweaver 환경에서 잘 알려진 예를 사용하고 Dreamweaver 도구와 SharePoint 2013의 새로운 디자인 관리자 기능을 사용하여 SharePoint 환경에서 잘 작동하도록 만드는 데 목적이 있습니다. 그 점에 있어서는 매우 잘 했다고 생각합니다. 실제 작업 시에서는 마스터 페이지에 있는 많은 항목을 레이아웃 페이지에 넣을 수 있습니다. 예를 들어 이 마스터 페이지를 시스템 마스터 페이지로 설정하는 것이 만족스럽지 않을 수 있습니다. 이 경우의 양식 및 설정 페이지의 모양은 다음과 같습니다(사이트 설정 페이지).

이 시점에 UI에서 마스터 페이지를 다시 수정하는 것이 불가능할 수 있습니다. 다행히 다음 PowerShell 코드 조각을 실행하여 기본 마스터 페이지로 설정할 수 있습니다.

$w = Get-SPWeb https://yourWebApp

$w.MasterUrl = "/_catalogs/masterpage/v15.master"

$w.Update()

이제 다른 마스터 페이지로 전환합니다. 샘플 Contoso 마스터 페이지를 살펴보겠습니다.

깔끔해 보이지 않나요? 간단하면서도 사이트의 기본 요소는 다 있습니다. 이 페이지를 시스템 마스터 페이지로 설정한 다음 목록 또는 라이브러리에 대한 설정으로 이동합니다.

누락된 항목이 있나요? 목록 정보 섹션의 상단에 일반적으로 표시되는 탐색 경로가 없습니다. 이 탐색 경로를 클릭하여 목록 콘텐츠로 내용 목록으로 돌아갈 수 있습니다. 이 내용을 지적하는 이유는 다음과 같습니다. 코드 조각 페이지로 이동해도 이 기능으로 사용할 수 있는 탐색 경로 코드가 없습니다. 코드 조각 페이지에는 많은 유용한 코드가 있지만 모든 단일 상황에 정확하게 맞는 단일 컨트롤을 그대로 포함하고 있지는 않습니다. 그렇다면 이 문제를 어떻게 수정하나요? 코드 조각 페이지에서 필요한 항목을 찾을 수 없는 경우 v15.master 파일을 열고 그 곳에서 코드 조각을 찾아야 합니다. v15.master에서 이 탐색 경로에 해당하는 코드는 다음과 같습니다.

<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">

<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

<SharePoint:SPTitleBreadcrumb

runat="server"

RenderCurrentNodeAsLink="true"

SiteMapProvider="SPContentMapProvider"

CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">

<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />

</span>

</PATHSEPARATORTEMPLATE>

</SharePoint:SPTitleBreadcrumb>

</asp:ContentPlaceHolder>

</SharePoint:AjaxDelta>

이 코드에는 ASP.NET 태그가 포함되어 있고 지금 HTML 페이지에서 작업 중이므로 이 코드를 복사하여 HTML 마스터 페이지에 붙여 넣을 수 없습니다. SharePoint 2013에서는 ASP.NET 태그를 "래핑"하는 특수 태그를 사용하므로 HTML 페이지에 대해 "쌍"으로 만들어진 .master 페이지를 업데이트하는 방법을 알고 있습니다. 이렇게 하려면 ASP.NET 태그를 설명 태그에 넣고 "MS:" 앞에 시작 태그를 넣고 "ME:" 앞에 닫는 태그를 넣습니다. 이 코드 주위에 래퍼를 넣으면 다음과 같습니다. 이 코드를 제 HTML 마스터 페이지에 붙여 넣습니다.

</span>

</PATHSEPARATORTEMPLATE>

이 코드를 마스터에 붙여 넣었으므로 이제 탐색 경로를 목록 설정 페이지에 다시 넣는 방법에 대해 알아 보겠습니다.

이제 이 긴 게시물을 요약하여 정리하겠습니다. SharePoint 2013의 새로운 디자인 관리자 기능을 통해 자주 사용하는 HTML 편집기를 사용하여 일상 콘텐츠 관리 작업을 수행하는 방법을 확인했습니다. Dreamweaver를 사용하여 SharePoint 2013에서 Dreamweaver 자습서 사이트를 다시 구축할 수 있습니다. 이 기능은 SharePoint에서 크게 향상되었습니다. 또한 코드 조각 갤러리와 같은 기능을 사용하여 마스터 페이지에 SharePoint 기능을 추가하는 방법과 코드 조각에서 찾을 수 없는 기능이 필요한 경우 어떻게 해야 하는지를 살펴보았습니다. 또한 자주 사용하는 HTML 편집기를 사용하는 이 방법을 표시 서식 파일이라는 다른 중요한 SharePoint 2013 기능에 대해 사용할 수 있습니다. 이러한 기능은 주로 검색 결과에 사용되지만, 이 버전의 SharePoint에 검색 기능이 잘 통합되어 있으므로 많은 용례를 확인할 수 있습니다. 이 블로그 사이트를 참조하여 쿼리 규칙과 결과 유형을 사용하여 솔루션을 구축하는 과정을 종합적으로 연습해 보십시오.

이 게시물의 첨부 파일에는 보기 좋게 서식이 지정된 이 게시물의 Word 버전과 Dreamweaver 자습서 사이트의 최종 SharePoint 버전을 만드는 데 사용된 원본 요소가 포함되어 있습니다.

이 문서는 번역된 블로그 게시물입니다. 원본 문서는 Using Dreamweaver and Design Manager with SharePoint 2013을 참조하십시오.

Share via

SharePoint 2013에서 Dreamweaver 및 디자인 관리자 사용

Additional resources