Dreamweaver 템플릿의 경로 이해

Dreamweaver 템플릿
HTML 페이지가 템플릿으로 저장되면, Dreamweaver에서는 로컬 루트 폴더의 루트 수준에서 템플릿 폴더를 만들고, 적용되는 모든 페이지에 대한 소스가 되는 .dwt 파일을 생성합니다. HTML 페이지가 템플릿에 적용될 때마다([파일] > [템플릿으로 새로 만들기] 또는 [수정] > [템플릿] > [페이지에 템플릿 적용]) .dwt 파일에 대한 사이트 루트 상대 링크가 만들어집니다. 이 사이트 상대 링크가 항상 올바로 연결되는 이유는 .dwt 파일이 항상 사이트 폴더 구조에서 루트 수준의 Templates 폴더에 있을 것이기 때문입니다. .dwt 파일이 Templates 폴더로부터 이동되거나 Templates 폴더가 이동되거나 이 폴더의 이름이 변경되면, 링크가 깨질 것입니다. Dreamweaver가 .dwt 파일을 만드는 Templates 폴더에 이 파일을 유지하는 것은 매우 중요합니다. 혼동을 피하려면, Templates 폴더 내에 사이트의 다른 요소(이미지 소스 파일이나 HTML 문서)를 저장하지 않는 것이 좋습니다.

페이지가 템플릿 파일에 어떻게 연결됩니까?
파일이 기존 페이지에 적용되거나 템플릿으로 새 페이지를 만들면 다음 코드가 소스에 삽입됩니다.

<!-- #BeginTemplate "/Templates/templateName.dwt" -->

Dreamweaver에서 생성하는 HTML 소스 코드를 보려면 [창] > [HTML]을 선택합니다.

위의 경로는 새 페이지에 나타나는 표준 HTML 소스를 대체합니다. 이 경로는 새 파일이 생성하는 일반적인 태그로 시작하는 대신, 로컬 루트 폴더의 내부, Templates라는 한 폴더 내부에 하나의 수준, 해당 페이지의 편집 가능한 영역 내부에 있지 않은 모든 정보를 포함하는 .dwt 파일이 존재함을 지정하고 있습니다. 이 경로는 브라우저를 보내어 페이지 속성, 레이아웃 및 그래픽 등 .dwt 파일에만 있는 모든 내용을 제공할 파일의 올바른 위치를 살펴봅니다. 이것이 페이지의 편집 가능한 영역 외부의 변경 사항을 .dwt 파일에 바로 적용해야 하는 이유입니다. .dwt 파일 자체를 열어서 수정하면 템플릿에 적용된 모든 페이지가 전과 동일한 위치의 파일에 연결됩니다. 템플릿에 적용된 모든 페이지는 모두 새 정보를 사용하여 자동으로 업데이트됩니다.

문서 상대와 사이트 루트 상대
HTML 페이지를 템플릿에 연결하는 경로는 사이트 루트 상대 경로입니다. 이 경로는 디렉토리 구조의 최상위 레벨(로컬 루트 폴더)에서 시작한 후, 그 다음 아래 폴더(Templates)를 따라가서, 최종적으로 .dwt 파일에 연결되므로 사이트 루트 상대적이라고 합니다. Dreamweaver는 어떤 다른 파일 폴더가 사이트 구조에 존재하는지에 상관없이 템플릿이 있게 될 위치를 정확히 알고 있으므로 Templates 폴더에 있는 템플릿에 대한 사이트 루트 상대 경로를 자동으로 생성합니다.

문서 상대는 한 파일에서 다른 파일로의 구체적인 경로를 만듭니다. 이 경로는 파일 폴더 구조의 최상위 레벨(사이트 루트)에서 시작하지 않고, 한 파일에서 시작하여 필요한 파일 폴더(디렉토리)를 무엇이든 통과하고 다른 파일의 위치에서 정지하는 경로를 생성합니다. 서로를 가리키는 문서 상대 링크를 만들기 전에 양쪽 파일을 로컬 루트 폴더 내부에 저장해야 합니다.

파일을 원격 서버에 업로드하기 전에 브라우저에서 로컬로 페이지를 미리 볼 수 있으려면, 페이지가 문서에 상대적이어야 합니다. Dreamweaver에서와는 달리 Internet Explorer와 Netscape 브라우저에서는 어떤 로컬 루트 폴더가 정의되었는지 알 방법이 없으므로, 현재 보고 있는 문서에 상대적인 경로만 따를 수 있습니다. 대부분의 사용자는 페이지를 업로드하기 전에 브라우저에서 로컬로 페이지를 보는 것을 선호하므로, Dreamweaver에서는 기본적으로 파일이 링크로 연결되거나 이미지가 삽입될 때마다 문서에 상대적이 됩니다. 이미지나 링크를 다른 HTML 페이지에 삽입하기 전에 파일을 저장하지 않은 경우, Dreamweaver에는 현재 페이지의 위치에 대한 참조가 없으므로 다음과 같은 경로를 생성합니다.

file:///HardDrive/Desktop Folder/localRootFolder/subfolder/subfolder/images/content.htm

또는

file:///C:/Desktop/localRootFolder/subfolder/subfolder/images/content.htm

이러한 경로는 워크스테이션에 대해서만 구체적이며, 파일을 원격 서버에 업로드할 때에는 작동하지 않습니다.

아래 차트는 문서 상대와 사이트 루트 상대 경로 간 차이를 그래픽으로 설명합니다. 아래 예에서, bio.htm 페이지에는 대체 경로 선택 사항을 사용하여 logo.jpg라는 그래픽이 삽입되어 있습니다.

 

템플릿의 문서 상대 경로

이미지 및 링크를 .dwt 파일에 직접 삽입하면 혼동될 수 있습니다. .dwt 파일에서 작업할 때 문서 상대적으로 만드는 모든 링크는 정확히 .dwt 파일에 상대적이 됩니다. 생성되는 경로는 해당 HTML 페이지나 이미지 소스에서부터 .dwt 파일까지 구체적입니다. Dreamweaver는 참조된 페이지가 템플릿에 실시간으로 적용된 위치의 기록을 보관하고, 참조된 HTML 파일의 경로를 현재 페이지에 대해 올바르도록 자동으로 조정합니다. 템플릿에 적용된 페이지와 .dwt 둘 다에 대한 HTML 소스를 살펴보면, 경로는 다를 것이며, 달라야만 합니다. Dreamweaver가 각 페이지의 특정 위치에 대한 경로를 자동으로 조정하지 않은 경우, 문서 상대적인 경로는 .dwt 파일을 제외한 모든 파일에서 깨집니다.

다음은 Dreamweaver가 문서 상대 경로를 조정할 수도 있는 방법의 예입니다.

템플릿에서 그래픽으로의 원래 경로:

../graphics/images/banner.gif

템플릿에 적용된 페이지에서 조정된 경로:

../../graphics/images/banner.gif

Dreamweaver는 템플릿에서 템플릿에 적용된 페이지로의 사이트 루트 상대 또는 절대(http://) 경로를 수정할 필요가 없으므로 조정하지 않습니다.

템플릿에 적용된 페이지의 문서 상대 경로

템플릿에 첨부된 페이지의 편집 가능 영역 내부에서 이미지 및 링크를 삽입하는 것은 템플릿에 첨부되지 않은 페이지에서 이미지나 링크를 삽입하는 것과 정확히 같은 방식으로 작동합니다. 다른 페이지나 링크에 대한 링크를 만들기 전에 [파일] > [템플릿으로 새로 만들기]를 선택한 다음, [파일] > [저장](로컬 루트 폴더 내 위치 선택)을 선택하는 절차를 따르는 경우, Dreamweaver에서는 [HTML 페이지 선택] 또는 [이미지 소스 선택] 대화 상자 양쪽에서 기본값을 [문서 상대]로 지정하게 됩니다. "상대 위치" 팝업 메뉴를 [사이트 루트]를 선택하도록 수동으로 변경하지 않는 한, 브라우저에서 로컬로 작업을 미리 볼 때 이미지와 링크를 사용할 수 있습니다.

템플릿의 사이트 루트 상대 경로

다른 페이지에 대한 링크를 만들거나 그래픽의 이미지 소스를 참조하기 위해 템플릿 파일에서 작업할 때, [HTML 파일 선택] 및 [이미지 소스 선택] 대화 상자의 팝업 메뉴를 사용하면, 문서 상대와 사이트 루트 상대 간에 선택할 수 있습니다. 위의 차트에서 볼 수 있듯이, [사이트 루트]를 선택하면 현재 Dreamweaver에 열려 있는 .dwt 파일과는 독립적으로, 로컬 루트 폴더에서 선택되는 파일로 바로 가는 경로가 만들어집니다. 파일이 원래 위치로부터 옮겨지더라도 링크가 깨지지 않은 상태로 남을 것이므로 사이트 디렉토리 구조에 있는 내용이 로컬 루트 폴더 내에서 이동할 가능성이 있을 때 사이트 루트 상대 링크를 사용하는 것이 유용할 수 있습니다.

템플릿에서 그래픽으로의 원래 경로:

/graphics/images/banner.gif

템플릿에 적용된 페이지의 경로:

/graphics/images/banner.gif

Dreamweaver는 템플릿에서 템플릿에 적용된 페이지로의 사이트 루트 상대 또는 절대(http://) 경로를 수정할 필요가 없으므로 조정하지 않습니다. 문서의 위치(.dwt 파일이든, 아니면 템플릿에 첨부된 HTML 파일이든 상관없이)는 사이트 루트 상대 경로와 상관이 없습니다.

템플릿에 적용된 페이지의 사이트 루트 상대 경로
사이트 루트 상대 링크를 사용하는 것은 사이트가 복잡하거나, 사이트가 함께 작업하는 개발자 팀과 관련되어 있거나, 정기적으로 수정될 사이트 디렉토리 구조가 사이트에 있을 경우 도움이 될 수 있습니다. 사이트 상대 링크를 만들려면, [이미지 소스 선택]와 [HTML 파일 선택] 대화 상자 양쪽에 있는 "상대 위치"라는 단어 옆의 팝업 메뉴에서 [사이트 루트]를 선택만 하면 됩니다.

만들어진 경로는 로컬 루트 폴더에서 시작하여, 하위 폴더를 개수에 상관 없이 통과하여, 결국 연결된 페이지나 이미지에서 끝나므로, 개발자는 링크를 깨지 않고 페이지나 자산을 사이트 디렉토리 구조에서 하나 이상의 하위 폴더 위로 유연하게 이동시킬 수 있습니다. 예를 들어, 위의 차트에서는, logo.jpg 파일을 images 폴더에서 features 폴더로 이동했어야 하고 링크가 사이트 루트 상대 링크였다면, 브라우저가 여전히 그래픽을 찾는 데 문제가 없었을 것입니다. 경로가 문서 상대 링크라면, logo.jpg와 bio.htm 파일 둘 다 문서 상대 경로가 만들어졌을 때 있었던 폴더 구조에 남아 있어야 합니다. 경로가 만들어진 후 두 파일 중 하나를 이동하면 경로가 깨집니다.

위에서 언급했듯이, 문서 상대 링크만 브라우저에서 로컬로 미리 볼 수 있습니다. 사이트 루트 상대 링크를 사용하도록 선택하는 경우, 브라우저에서 페이지를 볼 방법은 두 가지뿐입니다.

첫 번째 방법은 원격 서버에서 파일을 업로드(올리기)한 다음, 브라우저에서 URL 로케이터 필드에 절대 경로를 입력하여 해당 페이지로 이동하는 것입니다. 이 방법을 사용하면, 페이지가 웹에 있는 다른 사람이 페이지를 보는 것처럼 보입니다. 페이지를 수정하려면, 파일의 로컬 복사본을 열고, 변경한 다음, HTML 페이지를 저장하고, ftp 서버에 연결하여 새 파일을 원격 서버에 "올립니다". 동일한 폴더에 있는 동일한 이름의 파일은 원격 서버에서 이전 버전의 파일을 덮어씁니다.

브라우저에서 사이트 상대 링크를 미리 보는 두 번째 방법은 개인 웹 서버를 사용하는 것입니다. Windows에서만 [파일] > [브라우저에서 미리 보기] > [브라우저 목록 편집]을 사용하고 [로컬 서버를 사용하여 미리 보기]를 선택하여 Dreamweaver로 이동하여 이 옵션을 설정할 수 있습니다. 이 옵션을 선택하면 Dreamweaver에서 개인 웹 서버를 사용하여 문서를 미리 볼 수 있습니다.

참고: Macintosh의 경우, 시스템 수준으로 개인 웹 서버가 설정되어 있습니다. 추가 도움이 필요하면 시스템 설명서를 확인하십시오.

 

쉽고 빠르게 지원 받기

신규 사용자이신가요?