Dreamweaver 문서의 글꼴 환경 설정
문서의 인코딩은 브라우저에서 문서의 표시 방식을 결정합니다. Dreamweaver 글꼴 환경 설정을 사용하면 원하는 글꼴 및 크기로 지정된 인코딩을 볼 수 있습니다. 단, [글꼴 환경 설정] 대화 상자에서 선택한 글꼴은 Dreamweaver에 글꼴이 나타나는 방식에만 영향을 끼치며 방문자의 브라우저에 문서가 나타나는 방식에는 영향을 끼치지 않습니다. 브라우저에 글꼴이 나타나는 방식을 변경하려면 속성 관리자를 사용하거나 CSS 규칙을 적용하여 텍스트를 변경해야 합니다.

새 문서의 기본 인코딩 설정에 대한 자세한 내용은 문서 만들기 및 열기를 참조하십시오.

편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Mac)을 선택합니다.

왼쪽의 [범주] 목록에서 [글꼴]을 선택합니다.

[글꼴 설정] 목록에서 인코딩 유형(예: 서유럽어 또는 일본어)을 선택합니다.

참고:

아시아 언어를 표시하려면 2바이트 글꼴을 지원하는 운영 체제를 사용해야 합니다.

선택한 인코딩의 각 범주에 사용할 글꼴과 크기를 선택합니다.

참고:

[글꼴] 팝업 메뉴에는 컴퓨터에 설치된 글꼴만 표시됩니다. 예를 들어 일본어 텍스트를 보려면 일본어 글꼴이 설치되어 있어야 합니다.

가변 폭 글꼴

Dreamweaver에서 일반 텍스트(예: 단락, 머리글, 표의 텍스트)를 표시하는 데 사용하는 글꼴입니다. 기본값은 시스템에 설치된 글꼴에 따라 달라집니다. 미국에서 사용되는 시스템의 대부분에서 기본값은 Windows의 경우 Times New Roman 12pt(중)이고, Mac OS의 경우 Times 12pt입니다.
고정 폭 글꼴

Dreamweaver에서 pre, code 및 tt 태그 내의 텍스트를 표시하는 데 사용하는 글꼴입니다. 기본값은 시스템에 설치된 글꼴에 따라 달라집니다. 미국에서 사용되는 시스템의 대부분에서 기본값은 Windows의 경우 Courier New 10pt(소)이고, Mac OS의 경우 Monaco 12pt입니다.
코드 보기

코드 보기 및 코드 관리자에 나타나는 모든 텍스트에 사용되는 글꼴입니다. 기본값은 시스템에 설치된 글꼴에 따라 달라집니다.
Dreamweaver 강조 색상 사용자 정의
강조 표시 환경 설정을 사용하면 Dreamweaver에서 템플릿 영역, 라이브러리 항목, 서드 파티 태그, 레이아웃 요소 및 코드를 구분하는 색상을 사용자 정의할 수 있습니다.

[편집] > [환경 설정]을 선택하고 [강조 표시] 범주를 선택합니다.

강조 색상을 변경할 오브젝트 옆에 있는 색상 상자를 클릭한 다음 색상 피커를 사용하여 새 색상을 선택하거나 16진수 값을 입력합니다.

특정 옵션의 강조 표시 기능을 활성화 또는 비활성화하려면 보기 옵션을 선택 또는 해제합니다.

CSS Designer
CSS Designer 패널(윈도우 > CSS Designer)은 미디어 쿼리와 함께 CSS 스타일과 파일을 “시각적”으로 생성하고 속성을 설정할 수 있는 CSS 속성 관리자입니다.

CSS Designer에서 수행한 모든 작업은 Ctrl/Cmd+Z를 사용하여 실행 취소하거나 Ctrl/Cmd+Y를 사용하여 다시 실행할 수 있습니다. 라이브 뷰에 변경 사항이 자동으로 반영되고 관련 CSS 파일도 새로 고쳐집니다. 관련 파일이 변경되었음을 알려주기 위해 해당 파일의 탭이 잠시 동안(약 8초) 강조 표시됩니다.

CSS Designer 패널(CC)
CSS Designer 패널

CSS Designer 패널은 다음과 같은 창 및 옵션으로 구성되어 있습니다.

전체 창에는 현재 문서와 관련된 모든 CSS, 미디어 쿼리 및 선택기가 나열됩니다. 필요한 CSS 규칙을 필터링하고 속성을 수정할 수 있습니다. 이 모드를 사용하여 선택기 또는 미디어 쿼리를 만들기 시작할 수도 있습니다.

이 모드는 선택에 따라 달라지지 않습니다. 페이지에서 요소를 선택하면 관련 선택기, 미디어 쿼리 또는 CSS가 CSS Designer에 강조 표시됩니다.

현재 창에는 현재 문서의 디자인 또는 라이브 뷰에서 선택된 모든 요소의 계산된 스타일이 열거됩니다. 코드 보기에서 CSS 파일에 대해 이 모드를 사용하는 경우 강조되는 해당 선택기의 모든 속성을 표시합니다.

이 모드는 컨텍스트를 인식합니다. 문서에서 선택한 요소와 연계된 선택기의 속성을 편집하려면 이 옵션을 사용합니다.

소스 창에는 문서와 관련된 모든 CSS 스타일 시트가 나열됩니다. 이 창에서는 CSS를 생성하여 문서에 첨부하거나 문서 내에 스타일을 정의할 수 있습니다.

@미디어를 선택하면 소스 창에 선택된 소스의 모든 미디어 쿼리가 나열됩니다. 특정 CSS를 선택하지 않을 경우 문서와 연계된 모든 미디어 쿼리가 이 창에 표시됩니다.

선택기를 선택하면 소스 창에 선택된 소스의 모든 선택기가 표시됩니다. 미디어 쿼리도 선택할 경우 해당 미디어 쿼리에 대한 선택기만 표시됩니다. CSS 또는 미디어 쿼리를 선택하지 않을 경우 이 창에 문서의 모든 선택기가 표시됩니다.

@미디어 창에서 전역을 선택하면 선택한 소스의 미디어 쿼리에 포함되지 않은 모든 선택기가 표시됩니다.

속성에는 지정한 선택기에 설정할 수 있는 속성이 표시됩니다. 자세한 내용은 속성 설정을 참조하십시오.

CSS Designer의 창을 축소 또는 확장하는 경우 세션 내에서 창의 크기가 기억됩니다. 소스 및 미디어 창은 크기를 다시 변경할 때까지 사용자 정의 크기를 유지합니다.

참고: 페이지 요소를 선택하면 [선택기] 창에서 가장 높은 우선권 선택기가 선택됩니다. 특정 선택기의 속성을 보려면 창에서 선택기의 이름을 클릭합니다.

[소스] 창에서 [모든 소스]를 선택하면 모든 선택기를 볼 수 있습니다. 선택한 소스의 미디어 쿼리에 속하지 않는 선택기를 보려면 [@미디어] 창에서 [전역]을 클릭합니다.

시각적 안내 도구 개요
Dreamweaver는 문서를 디자인하고 브라우저에 나타날 문서 모양을 예측하는 데 유용한 여러 가지 시각적 안내 도구를 제공합니다. 다음과 같은 작업을 수행할 수 있습니다.

문서 창을 원하는 창 크기로 맞추어 페이지에 요소가 배치되는 모양을 확인합니다.

페이지 배경의 바탕 이미지는 Adobe® Photoshop® 또는 Adobe® Fireworks® 등의 일러스트레이션 또는 이미지 편집 애플리케이션에서 만든 디자인을 복제하는 데 사용합니다.

눈금자와 안내선은 페이지 요소의 위치를 지정하고 크기를 조절할 때 정밀한 시각적 기준으로 사용합니다.

그리드는 절대 위치 요소(AP 요소)의 위치를 정확하게 지정하거나 크기를 정확하게 조절하는 데 사용합니다.

페이지의 그리드 표시는 AP 요소를 정렬하는 데 유용하며, 스냅 기능을 활성화하면 AP 요소를 이동하거나 크기를 조정할 때 AP 요소가 자동으로 가장 가까운 격자점에 스냅됩니다. 이미지, 단락 등의 오브젝트는 그리드에 스냅되지 않습니다. 스냅은 그리드가 보이는지 여부에 관계없이 작동합니다.

페이지 확대/축소
Dreamweaver에서는 문서 창에서 배율을 증가(확대)하여 그래픽의 픽셀 정밀도를 확인하고 작은 항목을 좀더 쉽게 선택하며, 작은 텍스트로 페이지를 디자인하고 큰 페이지를 디자인하는 등의 작업을 수행할 수 있습니다.

페이지를 확대하거나 축소하려면 [보기] > [디자인 뷰 옵션] > [확대]를 클릭하여 사용 가능한 확대 옵션 중 하나를 선택합니다.

다양한 확대/축소 옵션 중에서 선택할 수 있습니다. 다음과 같은 옵션이 있습니다.

선택물에 맞추기 - 오브젝트 또는 텍스트를 선택하고 문서 창을 선택물로 채우려면 이 옵션을 선택합니다.
모두 맞추기 - 문서 창을 전체 페이지에 맞춥니다.
폭에 맞추기 - 문서 창을 페이지의 전체 폭에 맞춥니다.
참고:

돋보기 도구를 사용하지 않고 Ctrl+= 키(Windows) 또는 Command+= 키(Macintosh)를 눌러 확대할 수도 있습니다. 돋보기 도구를 사용하지 않고 Ctrl+- 키(Windows) 또는 Command+- 키(Macintosh)를 눌러 축소할 수도 있습니다.

Dreamweaver에 대한 일반 환경 설정
편집 > 환경 설정(Windows) 또는 Dreamweaver > 환경 설정(Macintosh)을 선택합니다.

다음 옵션을 설정합니다.

탭에서 문서 열기는 모든 문서가 탭으로 구분된 단일 창에 열리므로 탭을 사용하여 각 문서 사이에서 전환할 수 있습니다(Mac에만 해당).

시작 화면 표시는 Dreamweaver 실행 시나 열려 있는 문서가 없을 때 Dreamweaver 시작 화면을 표시합니다.

시작할 때 문서 다시 열기는 Dreamweaver를 닫을 때 열려 있던 모든 문서를 엽니다. 이 옵션을 선택하지 않으면 Dreamweaver를 시작할 때 시작 화면 표시 설정에 따라 시작 화면 또는 빈 화면이 표시됩니다.

읽기 전용 파일을 열 때 경고는 읽기 전용(잠김) 파일을 열 때 경고 메시지가 표시됩니다. 파일의 잠금 해제/체크아웃, 파일 보기 또는 취소를 선택합니다.

관련 파일 활성화는 현재 문서(예: CSS 또는 JavaScript 파일)와 관련된 파일을 볼 수 있습니다. 문서 위쪽에 각 관련 파일에 대한 버튼이 표시되고, 버튼을 클릭하면 파일이 열립니다.

동적 관련 파일 검색은 동적 관련 파일을 [관련 파일] 툴바에서 자동으로 표시할지 또는 수동 확인 후 표시할지 여부를 선택할 수 있습니다. 동적 관련 파일의 검색을 비활성화하도록 선택할 수도 있습니다.

파일 이동 시 링크 업데이트는 사이트 내에서 문서를 이동, 이름 변경 또는 삭제할 때 링크 업데이트를 처리하는 방법을 지정합니다. 이 환경을 설정하여 링크를 항상 자동으로 업데이트하거나, 링크를 업데이트하지 않거나, 업데이트 수행 여부를 묻도록 할 수 있습니다. (자동으로 링크 업데이트를 참조하십시오.)

오브젝트 삽입 시 대화 상자 표시는 삽입 패널 또는 삽입 메뉴를 사용하여 이미지, 표, Shockwave 동영상 및 다른 특정 오브젝트를 삽입할 때 Dreamweaver에서 추가 정보를 입력할 대화 상자를 표시할지 여부를 결정합니다. 이 옵션이 해제된 경우에는 대화 상자가 나타나지 않으므로 속성 관리자를 사용하여 이미지의 소스 파일, 표의 행 개수 등을 지정해야 합니다. 롤오버 이미지 및 Fireworks HTML의 경우에는 이 옵션의 설정 여부와 관계없이 오브젝트를 삽입할 때마다 대화 상자가 나타납니다. 이 설정을 일시적으로 무시하려면 오브젝트를 만들어서 삽입할 때 Ctrl 키를 누른 상태에서 클릭(Windows)하거나 Command 키를 누른 상태에서 클릭(Macintosh)합니다.

2바이트 인라인 입력 활성화는 2바이트 텍스트(예: 일본어 문자)를 허용하는 개발 환경이나 언어 키트를 사용할 때 문서 창에 2바이트 텍스트를 직접 입력할 수 있습니다. 이 옵션을 선택하지 않으면 2바이트 텍스트의 입력 및 변환을 위한 텍스트 입력 창이 나타나며 이 창에 텍스트를 입력해야 문서 창에 표시됩니다.

머리글 다음에 일반 단락으로 전환은 디자인 또는 라이브 뷰에서 머리글 단락의 끝에 Enter(Windows) 또는 Return(Macintosh) 키를 누르면 p 태그를 사용하여 새 단락이 만들어집니다. (머리글 단락은 h1 또는 h2와 같은 머리글 태그가 지정된 단락입니다.) 이 옵션이 해제된 경우 머리글 단락 끝에서 Enter 또는 Return 키를 누르면 동일한 머리글 태그가 지정되는 새 단락이 만들어집니다. 따라서 한 행에 여러 개의 머리글을 입력한 후 되돌아가서 각 머리글 아래에 세부 정보를 입력할 수 있습니다.

연속된 여러 공백 허용은 디자인 또는 라이브 뷰에서 둘 이상의 공백을 입력하는 경우 단어 잘림 방지 공백이 만들어집니다. 이 공백은 브라우저에서 여러 공백으로 표시됩니다. 예를 들어 타자기에서 하는 것처럼 문장 간에 두 개의 공백을 입력할 수 있습니다. 이 옵션은 주로 워드 프로세서에서 입력하는 사용자를 위해 고안된 것입니다. 이 옵션이 해제되어 있으면 여러 개의 공백이 하나의 공백으로 처리됩니다. 브라우저가 여러 개의 공백을 하나의 공백으로 처리하기 때문입니다.

및  대신  및  사용은 Dreamweaver에서 일반적으로 b 태그를 적용하는 작업을 수행할 때마다 strong 태그가 적용되고 일반적으로 i 태그를 적용하는 작업을 수행할 때마다 em 태그가 적용되도록 지정합니다. 이러한 작업에는 HTML 모드로 텍스트 속성 관리자에서 굵게 또는 기울임체 버튼을 클릭하거나 [서식] > [스타일] > [굵게] 또는 [서식] > [스타일] > [기울임체]를 선택하는 경우가 포함됩니다. 문서에 b 및 i 태그를 사용하려면 이 옵션의 선택을 해제합니다.

참고: W3C(World Wide Web Consortium)에서는 b 및 i 태그의 사용을 권장하지 않는데 그 이유는 strong 및 em 태그가 b 및 i 태그보다 더 많은 의미 정보를 제공하기 때문입니다.

 또는 

 - 

 태그 내에 편집 가능 영역을 배치할 경우 경고는 단락이나 머리글 태그 안에 편집 가능 영역이 있는 Dreamweaver 템플릿을 저장할 때마다 경고 메시지를 표시할지 여부를 지정합니다. 이 메시지는 사용자에게 해당 영역에 단락을 더 이상 만들 수 없다는 것을 알려줍니다. 이는 기본적으로 활성화되어 있습니다.

활성 문서에 대한 실행 취소 작업 제한은 실행 취소 작업을 현재 편집 중인 파일로 제한합니다. 예를 들어 CSS 파일을 편집 중인 경우, 해당 CSS 파일에 적용된 변경 내용에 대해서만 실행 취소를 할 수 있습니다.

그러나 이 확인란이 비활성화되면 HTML 소스와 모든 관련 CSS 파일은 단일 실행 취소 내역만 사용하며, 따라서 HTML 코드나 관련 CSS 파일에서의 작업 여부에 상관없이 모든 작업을 실행 취소할 수 있습니다.

최대 작업 내역 단계 수는 Dreamweaver에서 기억되는 단계의 수를 결정합니다. (대부분의 경우 기본값을 사용하면 충분합니다.) 지정된 단계 수를 초과하면 가장 오래된 단계부터 제거됩니다.

맞춤법 사전에는 유효한 맞춤법 사전이 나열됩니다. 사전에 여러 가지 지역어나 맞춤법 규칙(예: 미국식 영어 및 영국식 영어)이 포함된 경우에는 지역어가 [사전] 팝업 메뉴에 별도로 표시됩니다.

사용자 정의 작업 영역 만들기
요구 사항에 맞게 패널을 추가하거나 제거하여 작업 영역을 사용자 정의할 수 있습니다. 그러면 문서 툴바의 [작업 영역 전환기]에서 나중에 액세스 하기 위해 저장하여 작업 영역에 이 변경 내용을 저장할 수 있습니다.

현재 패널 크기 및 위치를 명명된 작업 영역으로 저장하면 패널을 이동하거나 닫은 경우에도 해당 작업 영역을 복원할 수 있습니다.

사용자 정의 작업 영역을 저장하려면:

[윈도우] > [작업 영역 레이아웃] > [새 작업 영역]을 선택합니다.
작업 영역 이름을 입력합니다.
작업 영역이 저장되고 문서 툴바의 [작업 영역 전환기]에서 볼 수 있습니다.

사용자 정의 작업 영역을 삭제하려면:

애플리케이션 표시줄의 작업 영역 전환기에서 [작업 영역 관리]를 선택하여 [작업 영역 관리] 대화 상자를 엽니다. 작업 영역을 선택한 다음 [삭제]를 클릭합니다.

작업 영역 표시 또는 전환

문서 툴바의 작업 영역 전환기에서 작업 영역을 선택합니다.

다중 사용자 시스템에서 Dreamweaver 맞춤 설정
Windows XP 또는 Mac OS X와 같은 다중 사용자 운영 체제에서도 필요에 따라 Dreamweaver를 사용자 정의할 수 있습니다.

Dreamweaver에서는 각 사용자별로 정의된 구성이 다른 사용자의 구성에 영향을 주지 않도록 합니다. 이를 위해 Dreamweaver는 인식 가능한 다중 사용자 운영 체제에서 처음 실행될 때 다양한 구성 파일의 사본을 작성합니다. 이러한 사용자 구성 파일은 사용자가 소유하는 폴더에 저장됩니다.

Dreamweaver를 다시 설치하거나 업그레이드하는 경우 Dreamweaver에서는 기존 사용자 구성 파일의 백업 사본을 자동으로 만듭니다. 따라서 이런 파일을 수동으로 사용자 정의한 경우 해당 변경 내용에 계속 액세스할 수 있습니다.

탭으로 구분된 문서 표시 (Mac 전용)
각 문서에 대응하는 탭을 사용하여 하나의 문서 창에 여러 문서를 표시할 수 있습니다. 또한 각 문서를 개별 창에 표시해 부동 작업 영역으로 나타낼 수도 있습니다.

개별 창에서 탭으로 표시된 문서 열기

Control 키를 누른 상태로 탭을 클릭하여 컨텍스트 메뉴에서 [새 창으로 이동]을 선택합니다.

기본 탭 문서 설정 변경

[Dreamweaver] > [환경 설정]을 선택하고 [일반] 범주를 선택합니다.
탭에서 [문서 열기]를 선택하거나 선택 해제한 다음 [확인]을 클릭합니다.
환경 설정을 변경할 때, 현재 열려 있는 문서의 표시 형태는 변경되지 않습니다. 그러나 새 환경 설정을 선택한 다음에 열리는 문서는 선택된 환경 설정에 따라 표시됩니다.

시작 화면은 Dreamweaver를 시작할 때 그리고 열어 놓은 문서가 없을 때 항상 표시됩니다. 시작 화면을 숨길 수 있으며 나중에 다시 표시할 수 있습니다. 시작 화면이 숨겨져 있고 열어 놓은 문서가 없을 때에는 문서 창이 비어 있게 됩니다.

Dreamweaver의 일반 패널
Dreamweaver에서는 여러 패널을 가지고 작업할 수 있습니다. 일반적으로 사용되는 일부 패널을 여기에서 설명합니다.

삽입 패널 개요
삽입 패널(윈도우 > 삽입)에는 표, 이미지 및 링크와 같은 오브젝트를 만들고 삽입할 수 있는 버튼이 있습니다. 이러한 버튼은 여러 범주로 구성되며 위쪽의 드롭다운 목록에서 원하는 범주를 선택하여 전환할 수 있습니다.

삽입 패널
삽입 패널

일부 범주의 버튼에는 팝업 메뉴가 표시됩니다. 팝업 메뉴에서 선택하는 옵션이 해당 버튼의 기본 액션이 됩니다. 예를 들어 문자 버튼의 팝업 메뉴에서 행 분리를 선택하면 이후에 문자 버튼을 클릭할 때마다 Dreamweaver에서 행 분리를 삽입합니다. 팝업 메뉴에서 새 옵션을 선택할 때마다 버튼의 기본 액션이 바뀝니다.

삽입 패널은 다음과 같은 범주로 구성됩니다.

HTML

div 태그, 이미지와 같은 오브젝트 및 표 등 가장 자주 사용되는 HTML 요소를 만들고 삽입할 수 있습니다.
양식

양식을 만들고 검색, 월 및 암호와 같은 요소 삽입을 위한 버튼이 포함되어 있습니다.
템플릿

문서를 템플릿으로 저장하고 특정 영역을 편집 가능, 선택적, 반복 또는 편집 가능 옵션 영역으로 표시할 수 있습니다.
Bootstrap 구성 요소

반응형 프로젝트에서 사용할 수 있는 탐색, 컨테이너 드롭다운 등을 제공하는 Bootstrap 구성 요소가 들어 있습니다.
jQuery Mobile

jQuery Mobile을 사용하는 사이트를 작성하는 버튼이 들어 있습니다.
jQuery UI

아코디언, 슬라이더 및 버튼과 같은 jQuery UI 요소를 삽입할 수 있습니다.
즐겨찾기

가장 많이 사용하는 삽입 패널 버튼을 한 곳으로 모아 구성할 수 있습니다.
참고:

 XML, JavaScript, Java 및 CSS와 같은 특정 유형의 파일을 사용하는 경우 이러한 코드 파일에 항목을 삽입할 수 없으므로 삽입 패널과 디자인 뷰 옵션이 흐리게 표시됩니다.

오브젝트 삽입
삽입 패널을 사용해 오브젝트를 삽입하려면:

삽입 패널의 [범주] 팝업 메뉴에서 적절한 범주를 선택합니다.

다음 중 하나를 수행합니다.

오브젝트 버튼을 클릭하거나 버튼 아이콘을 문서 창(디자인, 라이브 또는 코드 보기)으로 드래그합니다.

버튼의 화살표를 클릭한 다음 메뉴에서 옵션을 선택합니다.

오브젝트에 따라 해당 오브젝트 삽입 대화 상자가 나타나서 파일을 찾거나 오브젝트에 대한 매개 변수를 지정하라는 메시지가 표시됩니다. 또는 Dreamweaver가 문서에 코드를 자동으로 삽입하거나 태그 편집기 또는 패널을 열어 코드 삽입 전에 사용자가 정보를 지정할 수 있게 할 수 있습니다.

일부 오브젝트의 경우 디자인 뷰에서 오브젝트를 삽입하면 대화 상자가 나타나지 않지만 코드 보기에서 오브젝트를 삽입하면 태그 편집기가 나타납니다. 또 다른 오브젝트의 경우 오브젝트를 디자인 뷰에서 삽입하면 오브젝트가 삽입되기 전에 Dreamweaver가 코드 보기로 전환됩니다.

삽입 패널 환경 설정 편집
[편집] > [환경 설정](Windows) 또는 [Dreamweaver] > [환경 설정](Macintosh)을 선택합니다.

[환경 설정] 대화 상자의 [일반] 범주에서 [오브젝트 삽입 시 대화 상자 보기]를 선택 취소하여 이미지, 표, 스크립트 및 헤드 요소 등의 오브젝트를 삽입할 때 대화 상자를 숨기거나, 오브젝트를 만드는 동안 Ctrl 키(Windows) 또는 Option 키(Macintosh)를 누른 상태로 있습니다.

참고:

이 옵션을 해제하고 오브젝트를 삽입하면 오브젝트에 기본 속성 값이 지정됩니다. 오브젝트를 삽입한 후에 속성 관리자를 사용하여 오브젝트 속성을 변경합니다.

삽입 패널의 즐겨찾기 범주에서 항목 추가, 삭제 또는 관리
삽입 패널에서 범주를 선택합니다.

버튼이 표시될 영역에서 마우스 오른쪽 버튼으로 클릭하거나(Windows) Control 키를 누른 상태에서 클릭(Macintosh)한 다음 [즐겨찾기 사용자 정의]를 선택합니다.

[즐겨 찾는 오브젝트 사용자 정의] 대화 상자에서 필요에 따라 변경하고 [확인]을 클릭합니다.

오브젝트를 추가하려면 왼쪽의 [사용 가능한 오브젝트] 창에서 오브젝트를 선택한 다음 두 창 사이에 있는 화살표를 클릭하거나 [사용 가능한 오브젝트] 창에서 오브젝트를 더블 클릭합니다.

삽입 패널의 즐겨찾기 사용자 정의
삽입 패널의 즐겨찾기 사용자 정의

참고:

한 번에 한 개의 오브젝트를 추가할 수 있습니다. 즐겨찾기 목록에 전체 범주를 추가할 목적으로 [일반]과 같은 범주 이름을 선택할 수는 없습니다.

오브젝트나 분리 기호를 삭제하려면 오른쪽의 [즐겨 찾는 오브젝트] 창에서 오브젝트를 선택한 후 해당 창 위에 있는 [즐겨 찾는 오브젝트 목록에서 선택한 오브젝트 제거] 버튼을 클릭합니다.
오브젝트를 이동하려면 오른쪽의 [즐겨 찾는 오브젝트] 창에서 오브젝트를 선택한 후 해당 창 위에 있는 위쪽/아래쪽 화살표 버튼을 클릭합니다.
오브젝트 아래에 분리 기호를 추가하려면 오른쪽의 [즐겨 찾는 오브젝트] 창에서 오브젝트를 선택한 후 해당 창 아래에 있는 [분리 기호 추가] 버튼을 클릭합니다.
삽입 패널의 [즐겨찾기] 범주에 있지 않은 경우 이 범주를 선택하고 변경 내용을 확인합니다.

파일 패널 개요
파일 패널을 사용하면 Dreamweaver 사이트의 파일을 보고 관리할 수 있습니다.

파일 패널을 사용하면 파일과 폴더가 Dreamweaver 사이트와 연관되어 있는지 여부에 상관없이 이를 확인할 수 있으며 파일 열기 및 이동 등의 표준 파일 유지 관리 작업을 수행할 수 있습니다.

파일 패널은 파일을 관리하고 원격 서버와의 파일 전송에 사용됩니다.

파일 패널
파일 패널

파일 패널로 할 수 있는 모든 옵션에 대한 자세한 내용은 파일 및 폴더 관리를 참조하십시오.

창 크기 팝업 메뉴에 표시된 값 변경
[창 크기] 팝업 메뉴에서 [크기 편집]을 선택합니다.

창 크기 목록의 폭 또는 높이 값을 클릭하고 새로운 값을 입력합니다. 문서 창의 높이는 변경하지 않고 폭만 특정 크기로 조정하려면 높이 값을 선택한 후 삭제합니다.

[설명] 상자를 클릭한 후 특정 크기에 대한 설명을 입력합니다.

창 크기 팝업 메뉴에 새 크기 추가
[창 크기] 팝업 메뉴에서 [크기 편집]을 선택합니다.

창 크기 팝업 메뉴에 창 크기 추가
창 크기 팝업 메뉴에 창 크기 추가

[폭] 열의 마지막 값 아래에 있는 공백을 클릭합니다.

[폭]과 [높이]에 값을 입력합니다.

[폭] 또는 [높이] 중 하나만 설정하려면 다른 한 필드를 비워두면 됩니다.

[설명] 필드를 클릭한 후 추가한 크기에 대한 설명을 입력합니다.

예를 들어 800 x 600픽셀 모니터 항목 옆에 SVGA 또는 일반 PC를 입력하고 832 x 624픽셀 모니터 항목 옆에 17인치 Mac을 입력할 수 있습니다. 대부분의 모니터는 다양한 픽셀 치수로 조정할 수 있습니다.

[적용] 버튼을 클릭한 다음 대화 상자를 닫습니다.

이제 새 창 크기를 [창 크기] 팝업 메뉴에서 사용할 수 있습니다.

문서 툴바 개요
문서 툴바는 문서의 다른 보기를 재빨리 전환할 수 있는 버튼을 포함하고 있습니다. 툴바에는 문서를 보거나 로컬 사이트와 원격 사이트 간에 문서를 전송하기 위한 몇 가지 일반적인 명령 및 옵션도 들어 있습니다.

문서 툴바(CC)
문서 툴바

문서 툴바에는 다음 옵션이 표시됩니다.

코드 보기

문서 창에 코드 보기만 표시됩니다.
분할 보기

문서 창이 코드와 라이브/디자인 뷰 사이에서 분할됩니다. 디자인 뷰 옵션은 유동 그리드 문서에서 사용할 수 없습니다.
라이브 뷰

변경 작업을 수행하면 변경 내용을 보여주기 위해 실시간으로 HTML5 프로젝트 및 업데이트를 정확하게 렌더링하는 대화형 미리보기입니다. 또한 라이브 뷰에서 HTML 요소를 편집할 수 있습니다. 라이브 뷰 옵션 옆에 있는 드롭다운 목록을 사용하여 라이브 뷰와 디자인 뷰 사이를 전환할 수 있습니다. 이 드롭다운 목록은 유동 그리드 문서에서 사용할 수 없습니다.
디자인 뷰

웹 브라우저에서 사용자에게 어떻게 보이는지를 알려주는 문서를 표시합니다.
표준 툴바 개요
표준 툴바

표준 툴바를 표시하려면 창 > 툴바 > 표준을 선택합니다. 툴바에는 새로 만들기, 열기, 저장, 모두 저장, 코드 인쇄, 잘라내기, 복사, 붙여넣기, 실행 취소, 재실행 등 파일 및 편집 메뉴에 있는 일반적인 작업을 위한 버튼이 포함되어 있습니다.
브라우저 내비게이션 툴바 개요
이제 브라우저 내비게이션 툴바가 라이브 뷰에서 활성화(윈도우->툴바->표준을 선택하여 활성화한 경우)되었으며, 이를 통해 문서 창에서 현재 보고 있는 페이지의 위치를 확인할 수 있습니다. 라이브 보기는 일반 브라우저와 같은 역할을 합니다. 따라서 로컬 사이트 외부에 있는 사이트.

브라우저 내비게이션 툴바(CC)
브라우저 내비게이션 툴바

A. 브라우저 컨트롤 B. 주소 상자 
기본적으로 링크는 라이브 보기에서 활성화되지 않습니다. 링크가 활성화되어 있지 않으면 다른 페이지로 가져오지 않고 문서 창에서 링크 텍스트를 선택하거나 클릭할 수 있습니다. 라이브 보기에서 링크를 테스트하려면 [보기] > [라이브 뷰 옵션] > 링크 클릭(Ctrl+Click Link) 또는 계속 링크 클릭 선택하여 한 번 클릭 또는 연속 클릭을 사용할 수 있습니다.

툴바 개요
툴바는 문서 창의 왼쪽에 수직으로 나타나며 모든 보기 옵션, 즉 코드 보기, 라이브 뷰 및 디자인 뷰에서 볼 수 있습니다. 툴바의 버튼은 보기 전용이며 작업 중인 내용에 대한 보기에 적용 가능할 때만 나타납니다. 예를 들어 라이브 뷰에서 작업하고 있는 경우에는 서식 소스 코드 등 코드 보기 전용 옵션이 표시되지 않습니다. 

툴바 맞춤 설정
필요에 따라 툴바에 메뉴 옵션을 추가하거나 원치 않는 메뉴 옵션을 제거함으로써 이 툴바를 맞춤화할 수 있습니다.

툴바를 맞춤화하려면 다음 단계를 따르십시오.

툴바에서 을 클릭하여 [툴바 맞춤 설정] 대화 상자를 엽니다.

툴바 맞춤 설정
툴바 맞춤 설정

툴바에서 사용하려는 메뉴 옵션을 선택하거나 선택 해제한 다음 [완료]를 클릭하여 툴바 설정을 저장합니다.

기본 툴바 버튼을 복원하려면 툴바 대화 상자에서 [기본값 복원]을 클릭합니다.

상태 표시줄 개요
문서 창의 아래쪽에 있는 상태 표시줄에는 현재 만들고 있는 문서에 관한 추가 정보가 제공됩니다.

상태 표시줄(CC)
상태 표시줄

A. 태그 선택기 B. 출력 패널 C. 코드 색상 표시 D. 전환 삽입 및 덮어쓰기 E. 행과 열 번호 
태그 선택기

현재 선택 항목을 둘러싸고 있는 태그들의 계층 구조를 표시합니다. 계층 구조에 있는 태그를 클릭하면 해당 태그 및 그 내용이 선택됩니다. 를 클릭하면 문서의 본문 전체를 선택할 수 있습니다. 태그 선택기에서 태그의 class 또는 ID 속성을 설정하려면 태그를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 상태에서 클릭(Macintosh)한 후 컨텍스트 메뉴에서 클래스 또는 ID를 선택합니다.

출력 패널

문서의 코딩 오류를 표시하는 출력 패널을 표시하려면 이 아이콘을 클릭합니다.

코드 색상 표시

(코드 보기에서만 사용 가능)

프로그래밍 언어에 따라 표시되는 코드 색상 표시를 변경하려면 팝업 메뉴에서 코딩 언어를 선택합니다.

전환 삽입 및 덮어쓰기

(코드 보기에서만 사용 가능)

코드 보기에서 작업하는 동안 삽입 및 덮어쓰기 간에 전환을 허용합니다.

행과 열 번호

(코드 보기에서만 사용 가능)

커서가 위치하는 행 번호 및 열 번호를 표시합니다.

속성 관리자 개요
속성 관리자(윈도우 > 속성)를 사용하면 텍스트 또는 삽입된 오브젝트 등 현재 선택된 페이지 요소의 자주 사용하는 속성을 확인하고 편집할 수 있습니다.

속성 관리자의 내용은 선택한 요소에 따라 다릅니다. 예를 들어 페이지에서 이미지를 선택하면 속성 관리자는 이미지의 속성(파일 경로, 폭과 높이, 경계 등)을 보여 줍니다.

속성 관리자(CC)
속성 관리자

속성 관리자는 기본적으로 작업 영역의 아래쪽 가장자리에 있지만 작업 영역에서 결합을 해제하고 부동 패널로 만들 수 있습니다.

참고:

특정 태그 속성과 관련된 모든 속성을 보거나 편집하려면 태그 관리자를 사용합니다.

특정 속성 관리자에 대한 도움말에 액세스하려면 속성 관리자의 오른쪽 상단에서 [도움말] 버튼을 클릭하거나 속성 관리자의 [옵션] 메뉴에서 도움말을 선택하십시오.

페이지 요소의 속성 보기 및 변경
문서 창에서 페이지 요소를 선택합니다.

속성 관리자를 확장하여 선택한 요소의 모든 속성을 확인할 수 있습니다.

속성 관리자에서 속성을 변경합니다.

참고:

특정 속성에 대한 자세한 내용을 보려면 문서 창에서 요소를 선택한 다음 속성 관리자의 오른쪽 상단에 있는 [도움말] 아이콘을 클릭합니다.

변경한 내용이 문서 창에 곧바로 적용되지 않는 경우에는 다음 방법 중 하나로 변경 내용을 적용합니다.

속성 편집 텍스트 필드의 바깥 부분을 클릭합니다.
Enter 키(Windows) 또는 Return 키(Macintosh)를 누릅니다.
Tab 키를 눌러 다른 속성으로 전환합니다.
컨텍스트 메뉴
컨텍스트 메뉴는 작업 중인 오브젝트나 창과 관련된 유용한 명령 및 속성에 대한 편리한 액세스를 제공합니다. 컨텍스트 메뉴는 현재 선택 항목에 적용되는 명령만 표시합니다.

컨텍스트 메뉴를 열려면 코드 보기의 코드 부분이나 라이브 뷰 또는 디자인 뷰의 오브젝트를 마우스 오른쪽 버튼을 클릭(Windows)하거나 Ctrl 키를 누른 상태로 클릭(Mac)합니다.

Dreamweaver에서 채널 재정렬
요구 사항에 맞게 Dreamweaver 모든 패널의 위치와 모양을 사용자 정의할 수 있습니다.

패널 고정 및 고정 해제

패널을 고정시키려면 해당 탭을 도킹 내, 상단, 하단 또는 다른 패널 사이로 드래그합니다.
패널 그룹을 고정시키려면 해당 제목 표시줄(탭 상단의 단색 빈 막대)을 도킹으로 드래그합니다.
패널 또는 패널 그룹을 제거하려면 해당 탭 또는 제목 표시줄을 도킹 밖으로 드래그합니다. 다른 도킹으로 드래그하거나 부동 상태로 만들 수 있습니다.
패널 이동

패널을 이동하면 패널을 이동할 수 있는 영역인 밝은 파란색 놓기 영역이 나타납니다. 예를 들어 패널을 다른 패널의 위나 아래에 있는 좁은 파란색 놓기 영역으로 드래그하여 도킹의 위나 아래로 이동할 수 있습니다. 놓기 영역이 아닌 곳으로 패널을 드래그하면 패널이 작업 영역에서 부동 상태로 표시됩니다.

패널을 이동하려면 해당 탭을 드래그합니다.
패널 그룹을 이동하려면 해당 제목 표시줄을 드래그합니다.
참고:

패널을 이동할 때 Ctrl 키(Windows) 또는 Command 키(Mac OS)를 누르면 패널이 고정되는 것을 방지할 수 있습니다. 작업을 취소하려면 패널을 이동하는 동안 Esc 키를 누르십시오.

패널 추가 및 제거

도킹에서 모든 패널을 제거하면 도킹도 제거됩니다. 놓기 영역이 나타날 때까지 작업 영역의 오른쪽 가장자리로 패널을 이동하여 도킹을 만들 수 있습니다.

패널을 제거하려면 탭을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 상태로 클릭(Mac)한 다음 [닫기]를 선택하거나 [윈도우] 메뉴에서 선택 해제합니다.
패널을 추가하려면 [윈도우] 메뉴에서 패널을 선택하여 원하는 위치에 고정시킬 수 있습니다.
패널 그룹 조작

패널을 그룹으로 이동하려면 패널 탭을 그룹의 강조 표시된 놓기 영역으로 드래그합니다.
그룹에서 패널을 재정렬하려면 패널의 탭을 그룹의 새 위치로 드래그합니다.
그룹에서 패널을 제거하여 부동 상태로 만들려면 해당 탭을 그룹 밖으로 드래그합니다.
그룹을 이동하려면 탭 상단에 있는 해당 제목 표시줄을 드래그합니다.
부동 패널 스택

패널을 도킹 밖으로 드래그할 때 놓기 영역을 벗어나면 패널이 작업 영역의 어느 위치에나 놓을 수 있는 부동 상태가 됩니다. 부동 패널 또는 패널 그룹을 누적하여 맨 위의 제목 표시줄을 드래그할 때 한 단위로 이동하도록 할 수 있습니다.

부동 패널을 누적하려면 패널의 탭을 다른 패널 아래쪽에 있는 놓기 영역으로 드래그합니다.
누적 순서를 변경하려면 패널의 탭을 위나 아래로 드래그합니다.
스택에서 패널 또는 패널 그룹을 제거하여 부동 상태로 만들려면 해당 탭 또는 제목 표시줄을 스택 밖으로 드래그합니다.
패널 크기 조정

패널, 패널 그룹 또는 패널 스택을 최소화 또는 최대화하려면 탭을 더블 클릭하거나 탭 영역(탭 옆의 빈 공간)을 더블 클릭합니다.
패널의 크기를 조정하려면 패널의 한쪽 면을 드래그합니다. 
패널 아이콘 확장 및 축소

패널을 아이콘으로 축소하여 작업 영역을 정리할 수 있습니다. 경우에 따라 패널은 기본 작업 영역에서 아이콘으로 축소됩니다.

열의 모든 패널 아이콘을 축소하거나 확장하려면 도킹 위쪽에 있는 양방향 화살표를 클릭합니다.
패널 아이콘을 하나만 확장하려면 해당 아이콘을 클릭합니다.
아이콘만 표시되고 레이블은 표시되지 않도록 패널 아이콘의 크기를 조정하려면 텍스트가 보이지 않을 때까지 도킹의 폭을 조정합니다. 아이콘 텍스트를 다시 표시하려면 도킹의 폭을 넓힙니다.
확장된 패널을 다시 아이콘으로 축소하려면 해당 탭, 아이콘 또는 패널의 제목 표시줄에 있는 양방향 화살표를 클릭합니다.

Dreamweaver 온보딩
Dreamweaver를 설치한 후 애플리케이션을 처음 실행할 때 필요에 맞춰 Dreamweaver 작업 영역을 개인화할 수 있도록 세 가지 질문으로 구성된 빠른 시작 메뉴가 화면에 나타납니다.

이 질문에 대한 답변을 기반으로 개발자 작업 영역(최소한의 코드 집중식 레이아웃) 또는 표준 작업 영역(코드 작성 시 시각적 도구 및 인앱 미리보기를 제공하는 분할 레이아웃)에서 Dreamweaver가 열립니다. 

작업 영역을 선택한 후 사용하기 편한 색상 테마를 선택합니다. 이제 시작할 수 있습니다.

참고:

[편집] > [환경 설정] 대화 상자를 사용하여 이 작업 영역의 환경 설정을 언제든지 변경할 수 있습니다.

개선된 홈 화면
Dreamweaver의 홈 화면을 통해 최근에 사용한 파일, 파일 유형 및 스타터 템플릿에 빠르게 액세스할 수 있습니다.

구독 상태에 따라 시작 작업 영역에 사용자의 요구에 맞게 조정된 내용이 표시될 수도 있습니다.

실행 시 또는 열어 놓은 문서가 없을 때 Dreamweaver에 홈 화면이 표시됩니다.

Dreamweaver의 시작 작업 영역
Dreamweaver의 시작 작업 영역
Dreamweaver 시작 환경의 옵션
학습

이 화면에서 바로 Dreamweaver 튜토리얼에 액세스하려면 [학습]을 클릭합니다.
빠른 시작

표시된 파일 유형 중 하나를 클릭하여 Dreamweaver에서 문서 만들기를 시작합니다.
시작 템플릿

Dreamweaver의 패키지로 제공되는 스타터 템플릿 중 하나를 엽니다.
홈

시작 화면으로 돌아가려면 [홈]을 클릭합니다. 
시작 화면에서 최근에 작업한 파일을 조회할 수 있습니다. 최근에 작업한 파일이 없는 경우 이 탭은 비어 있습니다.

이 화면의 오른쪽 상단에 있는 검색 아이콘을 사용하여 검색 기능을 이용할 수도 있습니다. 검색어를 입력하면 애플리케이션이 해당 검색어와 관련이 있는 최근 파일, Creative Cloud 에셋, 도움말 링크 및 스톡 이미지를 표시해 줍니다.

참고:

이 시작 화면이 활성화되고, 기본적으로 열립니다. 이 시작 화면 필요하지 않은 경우 [환경 설정] > [일반] 대화 상자에서 [시작 화면 표시]를 선택 취소하십시오.
새로 만들기를 클릭하여 Dreamweaver 파일을 새로 제작할 수 있습니다. 시스템에 이미 파일이 있는 경우에는 열기를 클릭합니다. Dreamweaver에서 문서 만들기 및 열기에 대한 자세한 내용은 파일 만들기 및 열기를 참조하십시오.

작업 영역 개요
Dreamweaver 작업 영역에서는 문서와 오브젝트 속성을 볼 수 있습니다. 또한 대부분의 일반 작업이 툴바에 배치되어 있으므로 빠르게 문서의 변경 작업을 수행할 수 있습니다.

Dreamweaver 작업 영역(CC)
Dreamweaver 작업 영역

A. 애플리케이션 표시줄 B. 문서 툴바 C. 문서 창 D. 작업 영역 전환기 E. 패널 F. 코드 보기 G. 상태 표시줄 H. 태그 선택기 I. 라이브 뷰 J. 툴바 
작업 영역 요소 개요
작업 영역에는 다음과 같은 요소가 포함됩니다.

애플리케이션 표시줄

애플리케이션 창 위쪽에는 작업 영역 전환기, 메뉴(Windows만 해당) 및 기타 애플리케이션 컨트롤이 있습니다.
문서 툴바

문서 창에 대한 다양한 보기 옵션(디자인 뷰, 라이브 뷰 및 코드 보기 등)을 제공하는 버튼이 있습니다.
표준 툴바

표준 툴바를 표시하려면 창 > 툴바 > 표준을 선택합니다. 툴바에는 새로 만들기, 열기, 저장, 모두 저장, 코드 인쇄, 잘라내기, 복사, 붙여넣기, 실행 취소, 재실행 등 파일 및 편집 메뉴에 있는 일반적인 작업을 위한 버튼이 포함되어 있습니다.
툴바

애플리케이션 창 왼쪽에는 보기 전용 버튼이 있습니다.
문서 창

사용자가 만들고 편집하는 현재 문서가 표시됩니다.
속성 관리자

선택한 오브젝트나 텍스트의 다양한 속성을 보고 변경할 수 있습니다. 속성은 오브젝트마다 다양합니다.
태그 선택기

문서 창 하단의 상태 표시줄에 있습니다. 현재 선택 항목을 둘러싸고 있는 태그들의 계층 구조를 표시합니다. 계층 구조에 있는 태그를 클릭하면 해당 태그 및 그 내용이 선택됩니다.
패널

작업 모니터링 및 수정을 지원합니다. 삽입 패널, CSS Designer 패널 및 파일 패널을 예로 들 수 있습니다. 패널을 펼치려면 해당 탭을 더블 클릭합니다.
Extract 패널

Creative Cloud에서 PSD 파일을 업로드하고 볼 수 있습니다. 이 패널을 사용하여 PSD 구성 요소에서 CSS, 텍스트, 이미지, 글꼴, 색상, 그레이디언트, PSD 및 치수 등을 추출하여 문서에 삽입할 수 있습니다.
삽입 패널

이미지, 표, 미디어 요소 등 다양한 유형의 오브젝트를 문서에 삽입할 때 사용하는 버튼이 있습니다. 각 오브젝트는 삽입할 때 다양한 속성을 설정할 수 있는 HTML 코드입니다. 예를 들어 삽입 패널의 [표] 버튼을 클릭하여 표를 삽입할 수 있습니다. 삽입 패널 대신 삽입 메뉴를 사용하여 오브젝트를 삽입할 수도 있습니다.
파일 패널

Dreamweaver 사이트에 포함된 파일이든 원격 서버에 있는 파일이든 상관없이 파일과 폴더를 관리할 수 있습니다. 파일 패널에서도 로컬 디스크에 있는 모든 파일에 액세스할 수 있습니다. 자세한 내용은 파일 및 폴더 관리를 참조하십시오.
스니펫 패널

Dreamweaver의 다른 여러 웹 페이지, 웹 사이트 및 설치에서 코드 스니펫을 저장 및 다시 사용할 수 있습니다(동기화 설정 사용). 자세한 내용은 스니펫으로 코드 재사용을 참조하십시오.
CSS Designer 패널

미디어 쿼리와 함께 CSS 스타일과 파일을 “시각적”으로 생성하고 속성을 설정할 수 있는 CSS 속성 관리자입니다.
참고:

Dreamweaver에는 다양한 패널, 관리자 및 창이 있습니다. 패널, 관리자 및 창을 열려면 윈도우 메뉴를 사용합니다.

문서 창 개요
문서 창에는 현재 문서가 표시됩니다. 문서의 보기를 전환하려면 문서 툴바에서 보기 옵션을 사용합니다.

[보기] 메뉴에서 [보기] 옵션을 사용하여 보기를 전환할 수도 있습니다.

라이브 뷰

브라우저에 있는 문서를 사실적으로 표현할 수 있으며 브라우저에서와 같이 문서와 상호 작용할 수 있습니다. 라이브 뷰에서 HTML 요소를 직접 편집할 수 있으며 같은 보기에서 변경 사항을 곧바로 미리 볼 수 있습니다. 라이브 뷰에서 편집하는 방법에 대한 자세한 내용은 라이브 뷰에서 HTML 요소 편집을 참조하십시오.
디자인 뷰

시각적 페이지 레이아웃, 시각적 편집 및 빠른 애플리케이션 개발을 위한 디자인 환경입니다. Dreamweaver의 디자인 뷰에서는 브라우저에 페이지를 표시할 때와 비슷하게 문서를 표시하고 모든 편집 작업을 할 수 있습니다.
코드 보기

HTML, JavaScript 및 기타 모든 종류의 코드를 작성하고 편집하기 위한 하드 코딩 환경입니다.
코드 - 코드

코드 보기의 분할 버전으로, 여기서는 스크롤을 통해 문서의 여러 섹션을 동시에 사용할 수 있습니다.
코드 - 라이브

동일한 문서의 코드 보기와 라이브 뷰를 모두 하나의 창에서 볼 수 있습니다.
코드 - 디자인

동일한 문서의 코드 보기와 디자인 뷰를 모두 하나의 창에서 볼 수 있습니다.
라이브 코드

브라우저가 페이지를 실행할 때 사용하는 실제 코드를 표시하고 라이브 보기에서 페이지와 상호 작용할 때 동적으로 변경할 수 있습니다.
문서 창이 최대화(기본값)되면 열려 있는 모든 문서의 파일 이름을 보여 주는 탭이 문서 창 위쪽에 나타납니다. 파일에 아직 저장되지 않은 변경 내용이 있는 경우 파일 이름 뒤에 별표가 표시됩니다.

또한 문서의 탭 아래(또는 별도의 창에서 문서를 보는 경우 문서의 제목 표시줄 아래)에 관련 파일 툴바도 표시됩니다. 관련 문서란 CSS 파일 또는 JavaScript 파일과 같이 현재 파일과 관련이 있는 문서입니다. 문서 창에서 이런 관련된 파일 중 하나를 열려면 관련 파일 툴바에서 해당 파일 이름을 클릭합니다.

보기 간 전환
다른 보기 사이를 빠르게 전환하려면 문서 툴바를 사용합니다. 자세한 내용은 문서 툴바 개요를 참조하십시오.

보기 메뉴에서 다음 옵션을 사용하여 보기를 전환할 수도 있습니다.

코드 보기 전용: 코드 선택
분할 보기: 분할을 선택하고 분할 옵션 중 하나를 선택합니다.
보기 모드: 라이브 뷰와 디자인 뷰 사이 전환
보기 전환: 현재의 보기 모드에서 다른 보기 모드로 전환합니다.
보기 메뉴 옵션을 사용하여 보기 전환
보기 메뉴 옵션을 사용하여 보기 전환

겹쳐 놓기, 바둑판식 또는 문서 창 정렬
한 번에 여러 문서를 열 경우 겹쳐 놓기나 바둑판식으로 배열할 수 있습니다.

문서 창을 겹쳐 놓으려면 [윈도우] > [배열] > [겹쳐 놓기] 를 선택합니다.

문서를 바둑판식으로 배열하려면:

(Windows) [윈도우] > [배열] > [가로 바둑판식] 또는 [세로 바둑판식]을 선택합니다.
(Macintosh) [윈도우] > [배열] > [바둑판식]을 선택합니다.
여러 개의 파일을 열면 문서 창에 탭이 지정됩니다. 탭이 지정된 문서 창의 순서를 재정렬하려면 창의 탭을 그룹의 새로운 위치로 드래그합니다.

문서 창 크기 조절
상태 표시줄에는 문서 창의 현재 치수가 픽셀 단위로 표시됩니다. 페이지가 특정 크기에서 최상의 상태로 표시되도록 디자인하려면 문서 창을 미리 정의된 크기 중 하나로 조정하거나, 미리 정의된 크기를 편집하거나, 크기를 만들면 됩니다.

디자인 뷰 또는 라이브 뷰에서 페이지의 보기 크기를 변경할 때는 보기 크기의 치수만 변경됩니다. 문서 크기는 변경되지 않습니다.

미리 정의된 크기 및 사용자 정의 크기 외에도 미디어 쿼리에 지정된 크기도 나열되어 있습니다. 미디어 쿼리에 해당하는 크기를 선택하면 미디어 쿼리를 사용하여 페이지가 표시됩니다. 모바일 디바이스를 잡는 방향에 따라 페이지 레이아웃이 변경되는 디바이스에 대해 페이지 미리보기 방향을 변경할 수 있습니다.

문서 창 크기를 조절하려면 문서 창 아래쪽의 [창 크기] 팝업 메뉴에 있는 크기 중 하나를 선택합니다.

문서 크기 조절 옵션
문서 크기 조절 옵션

표시된 창 크기는 브라우저 창에서 테두리를 제외한 내부 치수를 나타냅니다. 모니터 크기나 모바일 디바이스는 오른쪽에 표시됩니다.

CSS 페이지 글꼴, 배경색 및 배경 이미지 속성 설정
[페이지 속성] 대화 상자를 사용하여 글꼴, 배경색, 배경 이미지를 비롯하여 웹 페이지에 사용할 여러 기본 페이지 레이아웃 옵션을 지정합니다.

[파일] > [페이지 속성]을 선택하거나 텍스트 [속성 관리자]의 [페이지 속성] 버튼을 클릭합니다.

[모양(CSS)] 범주를 선택하여 해당 옵션을 설정합니다.
페이지 글꼴

웹 페이지에 사용할 기본 글꼴 패밀리를 지정합니다. Dreamweaver에서는 텍스트 요소에 특별히 다른 글꼴이 설정되어 있지 않으면 사용자가 지정하는 글꼴 패밀리를 사용합니다.
크기

웹 페이지에 사용할 기본 글꼴 크기를 지정합니다. Dreamweaver에서는 텍스트 요소에 특별히 다른 글꼴 크기가 설정되어 있지 않으면 사용자가 지정하는 글꼴 크기가 사용됩니다.
텍스트 색상

글꼴을 렌더링할 기본 색상을 지정합니다.
배경색

페이지의 배경색을 설정합니다. [배경] 색상 상자를 클릭하고 색상 피커에서 색상을 선택합니다.
배경 이미지

배경 이미지를 설정합니다. [검색] 버튼을 클릭한 다음 이미지를 찾아 선택합니다. 또는 [배경 이미지] 상자에 배경 이미지의 경로를 입력합니다.Dreamweaver에서는 브라우저와 마찬가지로 배경 이미지가 전체 창을 채우지 않을 경우 해당 이미지를 반복해서 바둑판식으로 배열합니다. (배경 이미지를 바둑판식으로 배열하지 않으려면 CSS(겹쳐 놓기 스타일 시트)를 사용하여 이미지의 바둑판식 배열을 비활성화합니다.)
반복

페이지에 배경 이미지를 어떻게 표시할지를 지정합니다.
배경 이미지를 한 번만 표시하려면 [반복 없음] 옵션을 선택합니다.

이미지를 가로/세로 모든 방향의 바둑판식으로 배열하거나 반복하려면 [반복] 옵션을 선택합니다.

이미지를 가로 방향의 바둑판식으로 배열하려면 [x-반복] 옵션을 선택합니다.

이미지를 세로 방향의 바둑판식으로 배열하려면 [y-반복] 옵션을 선택합니다.

왼쪽 여백 및 오른쪽 여백

페이지의 왼쪽 및 오른쪽 여백의 크기를 지정합니다.
위쪽 여백 및 아래쪽 여백

페이지의 위 및 아래 여백의 크기를 지정합니다.
HTML 페이지 속성 설정
[페이지 속성] 대화 상자의 이 범주 속성을 설정하면 페이지의 CSS 서식이 아닌 HTML로 설정됩니다.

[파일] > [페이지 속성]을 선택하거나 텍스트 [속성 관리자]의 [페이지 속성] 버튼을 클릭합니다.

[모양(HTML)] 범주를 선택하여 해당 옵션을 설정합니다.
배경 이미지

배경 이미지를 설정합니다. [검색] 버튼을 클릭한 다음 이미지를 찾아 선택합니다. 또는 [배경 이미지] 상자에 배경 이미지의 경로를 입력합니다.Dreamweaver에서는 브라우저와 마찬가지로 배경 이미지가 전체 창을 채우지 않을 경우 해당 이미지를 반복해서 바둑판식으로 배열합니다. (배경 이미지를 바둑판식으로 배열하지 않으려면 CSS(겹쳐 놓기 스타일 시트)를 사용하여 이미지의 바둑판식 배열을 비활성화합니다.)
배경

페이지의 배경색을 설정합니다. [배경] 색상 상자를 클릭하고 색상 피커에서 색상을 선택합니다.
텍스트

글꼴을 렌더링할 기본 색상을 지정합니다.
링크

링크 텍스트에 적용할 색상을 지정합니다.
방문한 링크

방문한 링크에 적용할 색상을 지정합니다.
활성 링크

마우스 또는 포인터로 링크를 클릭했을 때 적용할 색상을 지정합니다.
왼쪽 여백 및 오른쪽 여백

페이지의 왼쪽 및 오른쪽 여백의 크기를 지정합니다.
위쪽 여백 및 아래쪽 여백

페이지의 위 및 아래 여백의 크기를 지정합니다.
페이지의 제목 및 인코딩 속성 설정
[제목/인코딩 페이지 속성] 옵션을 사용하면 웹 페이지를 제작하는 데 사용되는 언어에 고유한 문서 인코딩 유형을 지정할 수 있으며 [제목/인코딩 페이지 속성] 옵션은 해당 인코딩 유형에 사용할 유니코드 표준화 양식을 지정할 수도 있습니다.

다음 중 하나를 수행합니다.

[파일] > [페이지 속성] 클릭
[윈도우] > [속성]을 클릭한 다음 텍스트 속성 관리자에서 [페이지 속성]을 클릭합니다.
[페이지 속성] 패널에서 [제목/인코딩]를 선택합니다. 다음과 같은 옵션을 구성할 수 있습니다.

제목: 문서 창과 대부분의 브라우저 창의 제목 표시줄에 표시할 페이지 제목을 지정합니다.
문서 형식 (DTD): 문서 유형 정의를 지정합니다. 예를 들어 팝업 메뉴에서 [XHTML 1.0 Transitional]이나 [XHTML 1.0 Strict]를 선택하면 XHTML과 호환되는 HTML 문서를 만들 수 있습니다.
인코딩: 문서의 문자에 사용되는 인코딩을 지정합니다. 문서 인코딩으로 [유니코드(UTF-8)]를 선택하면 UTF-8이 모든 문자를 안전하게 표시하므로 엔티티는 인코딩할 필요가 없습니다. 다른 문서 인코딩을 선택하면 일부 문자를 표시하기 위해 엔티티를 인코딩해야 할 수도 있습니다. 
새로 고침: 기존 문서를 변환하거나 새 인코딩을 사용하여 다시 열 수 있습니다.
유니코드 표준화 양식: 문서를 인코딩으로 UTF‑8을 선택한 경우에만 활성화됩니다. 유니코드 표준화 양식에는 네 가지가 있습니다. 표준화 양식 C는 월드 와이드 웹(World Wide Web)의 문자 모델에서 가장 자주 사용되는 양식이기 때문에 가장 중요한 유니코드 표준화 양식입니다. Adobe에서는 서로 다른 세 가지 유니코드 표준화 양식을 제공합니다. 유니코드에서는 비슷하게 보이지만 서로 다른 방식으로 문서 안에 저장될 수 있는 일부 문자들이 있습니다. 예를 들어 "ë"(e-움라우트)는 하나의 문자인 "e-움라우트"를 의미하거나 "정규 라틴 e" + "움라우트 조합"이라는 두 개의 문자를 의미할 수도 있습니다. 유니코드 조합 문자는 이전 문자와 함께 사용되던 문자이므로 움라우트는 “라틴 e” 위에 표시됩니다. 이 두 양식은 시각적으로 동일하게 표기되지만 각 양식은 파일 안에 서로 다른 내용으로 저장됩니다. 표준화는 서로 다른 양식으로 저장될 수 있는 모든 문자를 동일한 양식을 사용하여 저장되도록 하는 과정입니다. 즉, 문서에 있는 모든 “ë” 문자가 하나의 “e-움라우트”나 “e” + “움라우트 조합”으로 저장되며 하나의 문서 안에 두 개의 양식으로 저장되지 않습니다. 
유니코드 서명 포함(BOM): 문서에 BOM(Byte Order Mark)을 포함합니다. BOM은 텍스트 파일 시작 부분에 위치한 2 ~ 4 바이트이며 해당 파일을 유니코드로 규정하고 그 뒤에 따르는 바이트들의 바이트 순서를 규정합니다. UTF-8에는 바이트 순서가 없으므로 UTF-8 BOM 추가는 선택 사항입니다. UTF-16 및 UTF-32를 사용할 경우에는 필수 사항입니다.

Dreamweaver를 설치한 후 애플리케이션을 처음 실행할 때 필요에 맞춰 Dreamweaver 작업 영역을 개인화할 수 있도록 세 가지 질문으로 구성된 빠른 시작 메뉴가 화면에 나타납니다.

이 질문에 대한 답변을 기반으로 개발자 작업 영역(최소한의 코드 집중식 레이아웃) 또는 표준 작업 영역(코드 작성 시 시각적 도구 및 인앱 미리보기를 제공하는 분할 레이아웃)에서 Dreamweaver가 열립니다. 

작업 영역을 선택한 후 사용하기 편한 색상 테마를 선택합니다. 이제 시작할 수 있습니다.

참고:

[편집] > [환경 설정] 대화 상자를 사용하여 이 작업 영역의 환경 설정을 언제든지 변경할 수 있습니다.

개선된 홈 화면

Dreamweaver의 홈 화면을 통해 최근에 사용한 파일, 파일 유형 및 스타터 템플릿에 빠르게 액세스할 수 있습니다.

구독 상태에 따라 시작 작업 영역에 사용자의 요구에 맞게 조정된 내용이 표시될 수도 있습니다.

실행 시 또는 열어 놓은 문서가 없을 때 Dreamweaver에 홈 화면이 표시됩니다.

Dreamweaver의 시작 작업 영역

Dreamweaver 시작 환경의 옵션

학습

이 화면에서 바로 Dreamweaver 튜토리얼에 액세스하려면 [학습]을 클릭합니다.

빠른 시작

표시된 파일 유형 중 하나를 클릭하여 Dreamweaver에서 문서 만들기를 시작합니다.

시작 템플릿

Dreamweaver의 패키지로 제공되는 스타터 템플릿 중 하나를 엽니다.

홈

시작 화면으로 돌아가려면 [홈]을 클릭합니다. 

시작 화면에서 최근에 작업한 파일을 조회할 수 있습니다. 최근에 작업한 파일이 없는 경우 이 탭은 비어 있습니다.

이 화면의 오른쪽 상단에 있는 검색 아이콘을 사용하여 검색 기능을 이용할 수도 있습니다. 검색어를 입력하면 애플리케이션이 해당 검색어와 관련이 있는 최근 파일, Creative Cloud 에셋, 도움말 링크 및 스톡 이미지를 표시해 줍니다.

참고:

이 시작 화면이 활성화되고, 기본적으로 열립니다. 

이 시작 화면 필요하지 않은 경우 [환경 설정] > [일반] 대화 상자에서 [시작 화면 표시]를 선택 취소하십시오.

새로 만들기를 클릭하여 Dreamweaver 파일을 새로 제작할 수 있습니다. 시스템에 이미 파일이 있는 경우에는 열기를 클릭합니다. Dreamweaver에서 문서 만들기 및 열기에 대한 자세한 내용은 파일 만들기 및 열기를 참조하십시오.

작업 영역 개요

Dreamweaver 작업 영역에서는 문서와 오브젝트 속성을 볼 수 있습니다. 또한 대부분의 일반 작업이 툴바에 배치되어 있으므로 빠르게 문서의 변경 작업을 수행할 수 있습니다.

Dreamweaver 작업 영역

A. 애플리케이션 표시줄 B. 문서 툴바 C. 문서 창 D. 작업 영역 전환기 E. 패널 F. 코드 보기 G. 상태 표시줄 H. 태그 선택기 I. 라이브 뷰 J. 툴바 

작업 영역 요소 개요

작업 영역에는 다음과 같은 요소가 포함됩니다.

애플리케이션 표시줄

애플리케이션 창 위쪽에는 작업 영역 전환기, 메뉴(Windows만 해당) 및 기타 애플리케이션 컨트롤이 있습니다.

문서 툴바

문서 창에 대한 다양한 보기 옵션(디자인 뷰, 라이브 뷰 및 코드 보기 등)을 제공하는 버튼이 있습니다.

표준 툴바

표준 툴바를 표시하려면 창 > 툴바 > 표준을 선택합니다. 툴바에는 새로 만들기, 열기, 저장, 모두 저장, 코드 인쇄, 잘라내기, 복사, 붙여넣기, 실행 취소, 재실행 등 파일 및 편집 메뉴에 있는 일반적인 작업을 위한 버튼이 포함되어 있습니다.

툴바

애플리케이션 창 왼쪽에는 보기 전용 버튼이 있습니다.

문서 창

사용자가 만들고 편집하는 현재 문서가 표시됩니다.

속성 관리자

선택한 오브젝트나 텍스트의 다양한 속성을 보고 변경할 수 있습니다. 속성은 오브젝트마다 다양합니다.

태그 선택기

문서 창 하단의 상태 표시줄에 있습니다. 현재 선택 항목을 둘러싸고 있는 태그들의 계층 구조를 표시합니다. 계층 구조에 있는 태그를 클릭하면 해당 태그 및 그 내용이 선택됩니다.

패널

작업 모니터링 및 수정을 지원합니다. 삽입 패널, CSS Designer 패널 및 파일 패널을 예로 들 수 있습니다. 패널을 펼치려면 해당 탭을 더블 클릭합니다.

Extract 패널

Creative Cloud에서 PSD 파일을 업로드하고 볼 수 있습니다. 이 패널을 사용하여 PSD 구성 요소에서 CSS, 텍스트, 이미지, 글꼴, 색상, 그레이디언트, PSD 및 치수 등을 추출하여 문서에 삽입할 수 있습니다.

삽입 패널

이미지, 표, 미디어 요소 등 다양한 유형의 오브젝트를 문서에 삽입할 때 사용하는 버튼이 있습니다. 각 오브젝트는 삽입할 때 다양한 속성을 설정할 수 있는 HTML 코드입니다. 예를 들어 삽입 패널의 [표] 버튼을 클릭하여 표를 삽입할 수 있습니다.삽입 패널 대신 삽입 메뉴를 사용하여 오브젝트를 삽입할 수도 있습니다.

파일 패널

Dreamweaver 사이트에 포함된 파일이든 원격 서버에 있는 파일이든 상관없이 파일과 폴더를 관리할 수 있습니다.파일 패널에서도 로컬 디스크에 있는 모든 파일에 액세스할 수 있습니다. 자세한 내용은 파일 및 폴더 관리를 참조하십시오.

스니펫 패널

Dreamweaver의 다른 여러 웹 페이지, 웹 사이트 및 설치에서 코드 스니펫을 저장 및 다시 사용할 수 있습니다(동기화 설정 사용). 자세한 내용은 스니펫으로 코드 재사용을 참조하십시오.

CSS Designer 패널

미디어 쿼리와 함께 CSS 스타일과 파일을 “시각적”으로 생성하고 속성을 설정할 수 있는 CSS 속성 관리자입니다.

•  
•  

• 웹 개발의 첫 번째 단계는 잠재 고객의 욕구, 기술과 마케팅 요구 사항을 분석하는 기획 단계입니다. 또한 웹 사이트를 설계하고 게시하는 데 필요한 정보를 수집하고 다음과 같은 질문에 대한 답변을 얻게 됩니다.

  • 웹 사이트 호스팅을 위해 어떤 서비스 공급업체를 선택합니까? 게시 서버로의 파일 업로드에 대한 권한을 가지고 있습니까?
  • 웹 사이트에 어떤 도메인 이름이 사용됩니까?
  • 기존의 웹 사이트를 Dreamweaver로 마이그레이션하는 경우 파일과 에셋은 현재 어디에 저장됩니까? 이 정보가 저장된 서버에 대한 액세스 권한이 있습니까?
  • 동적 웹 사이트를 원할 경우 어떤 서버를 이용해 데이터가 동적으로 표시되는지를 테스트할 수 있습니까? 동적 데이터 로딩하는 데 사용하려는 웹 애플리케이션 서버의 세부 사항을 확인할 수 있습니까?
  • 웹 사이트에 어떤 종류의 에셋이 필요합니까?
  • 처음부터 디자인된 에셋이 됩니까? 에셋이 이미 사용 가능한 경우, 이에 대한 액세스 권한이 있습니까?
  • 에셋을 디자인하는 데 어떤 앱을 사용고자 합니까?
  • 반응형 웹 사이트 제작을 계획합니까?

  개발하고자 하는 웹 사이트와 호스팅하고자 하는 방법과 위치에 대해 명확하게 이해하며 웹 개발 과정에 Dreamweaver와 Creative Cloud가 선택되었다고 가정하고 다음 단계를 진행합니다.

Dreamweaver를 통한 웹 개발

• 웹 사이트에 필요한 모든 에셋이 있는지 확인하십시오. 로컬 폴더나 Adobe의 Creative Cloud Libraries에 이들 에셋을 수집하고 정리하십시오.

• 다음을 사용해 Dreamweaver에서 새 문서를 만듭니다.

  • 비어 있는 새 문서
  • Dreamweaver의 패키지로 제공되는 스타터 템플릿
  • 다른 사람이 제작한 템플릿 파일(*.dwt)

  참고:

  Dreamweaver에 익숙하지 않거나 웹 개발을 배우는 중이라면 웹 페이지를 디자인을 준비하고 실행하는 데 스타터 템플릿이 큰 도움이 됩니다.

  처음부터 시작하는 것을 계획하더라도 이 페이지를 살짝 참고해 좋은 웹 페이지 디자인의 요소를 이해하는 것이 좋습니다.

• Dreamweaver 작업 영역에 익숙해지는 데 몇 분 정도 소요될 수 있습니다. 사용하기 편한 작업 영역을 찾은 다음 색상 테마 설정합니다. 자신에게 맞는 방법으로 다른 패널을 재구성합니다.

• Dreamweaver에서 사이트 설정합니다. 파일 및 에셋이 있는 폴더 구조를 만듭니다. 정보를 구성하고 구조를 결정했으면 사이트 만들기를 시작할 수 있습니다. (자세한 내용은 Dreamweaver 사이트 정보를 참조하십시오.)

  이 단계에서 원격 서버에 대한 연결을 설정하고 (동적 내용이 있는 경우) 테스트 서버를 설정하는 것이 좋습니다. 

• 코드 보기에서 웹 페이지 코딩을 시작하거나 디자인/라이브 뷰에서 웹 페이지를 디자인합니다.

  Photoshop 구성 요소 사용하려면 Dreamweaver로 추출하여 작업할 수 있습니다. Photoshop 구성 요소를 사용하여 작업하는 방법에 대한 자세한 내용은 Dreamweaver CC의 Extract를 참조하십시오.

  텍스트, 이미지, 롤오버 이미지, 이미지 맵, 색상, 동영상, 사운드, HTML 링크, 표 등의 디자인 요소를 추가합니다.

• CSS를 사용하여 웹 페이지의 모양 스타일을 지정합니다.

  Dreamweaver에서 다양한 방법으로 CSS를 사용하여 작업할 수 있습니다.

  • CSS를 하드 코딩할 수 있습니다. CSS 하드 코딩에 도움을 주는 Dreamweaver의 코딩 기능에 대한 자세한 내용은 Dreamweaver의 코딩 환경을 참조하십시오.
  • CSS 페이지를 만드는 데 익숙하지 않은 경우 CSS를 만드는 데 도움을 주는 CSS Designer 패널을 사용할 수 있습니다. 자세한 내용은 CSS Designer를 사용하여 페이지 레이아웃 지정을 참조하십시오.
  • Sass 및 Less 파일로 작업하기를 원할 경우 Dreamweaver는 이에 대한 옵션도 지원해 Dreamweaver 사이트 Sass 및 Less 파일을 가져와 작업할 수 있습니다. 그러면 Dreamweaver가 이를 자동 컴파일해 (또는 수동 컴파일을 선택할 수 있음) CSS 변경 사항에 대한 결과를 실시간으로 볼 수 있습니다. Dreamweaver에서 Sass 및 Less 파일 사용에 대한 자세한 내용은 CSS 프리프로세서를 참조하십시오.

• 동적 내용 제작을 위해 웹 애플리케이션을 설정합니다.

  대부분의 웹 사이트에는 동적 페이지가 있으며 이 페이지로 인해 방문자는 데이터베이스에 저장된 정보를 볼 수 있고, 일부 방문자는 데이터베이스에 새 정보를 추가하거나 정보를 편집할 수도 있습니다. 이와 같은 페이지를 만들려면 먼저 웹 서버와 애플리케이션 서버를 설정한 다음, Dreamweaver 사이트를 만들거나 수정한 후 데이터베이스에 연결해야 합니다. 자세한 내용은 동적 사이트, 페이지 및 웹 양식을 참조하십시오.

• 동적 페이지 만들기.

  Dreamweaver에서는 데이터베이스, 양식 매개 변수, JavaBeans 구성 요소에서 추출한 레코드세트를 포함한 다양한 소스의 동적 내용을 정의할 수 있습니다. 페이지에 동적 내용을 추가하려면 동적 내용을 페이지에 드래그하기만 하면 됩니다.

  한 개의 레코드나 여러 레코드를 동시에 표시하도록 페이지를 설정하고 둘 이상의 레코드 페이지를 표시할 수 있으며 한 레코드 페이지에서 이전/다음으로 이동할 수 있는 특수 링크를 추가하고 사용자들이 레코드를 추적할 수 있도록 도와주는 레코드 카운터를 만들 수도 있습니다. 자세한 내용은 동적 사이트, 페이지 및 웹 양식을 참조하십시오.

• 웹 사이트를 테스트 및 미리보기 후 게시하십시오. 

  페이지를 만들면서 웹 사이트가 디자인에 따라 어떻게 진행되는지 확인하기 위해 미리보기를 해야 합니다. 코드 보기 및 라이브 뷰를 나란히 유지하여 코딩을 분할 보기할 수 있습니다.

  또한 디바이스에서(반응형 웹 페이지를 만드는 경우) 또는 브라우저에서 실시간으로 웹 페이지를 미리 볼 수 있습니다.

  실시간 미리보기 환경이 필요하지 않은 경우 브라우저 환경에서 일반 미리보기를 사용할 수 있습니다.

  이미 원격 서버에 대한 연결을 정의하여 웹 사이트를 게시한 경우 활성화할 원격 서버에 파일을 추가해야 합니다.