[라이브 뷰]는 기존의 Dreamweaver 디자인 뷰와는 다르게 브라우저에서 페이지가 보이는 모습이 편집 불가능하고 좀 더 사실적인 렌더링을 제공합니다. [라이브 뷰]는 [브라우저에서 미리 보기] 명령을 대체하지는 않지만 Dreamweaver 작업 영역을 고려하여 사용자의 페이지가 "라이브"로 보일 수 있는 다른 방법을 제공합니다.

언제든지 [디자인] 뷰에서 [라이브 뷰]로 전환할 수 있습니다. 그러나 [라이브 뷰]로 전환하는 것은 Dreamweaver에서 기타 기존 뷰(코드/분할/디자인) 사이의 전환과는 무관합니다. [디자인] 뷰에서 [라이브 뷰]로 전환할 때 [디자인] 뷰와 편집 가능한 "라이브" 간을 단순히 선택 전환하는 것입니다.

[라이브 뷰]로 들어간 후 [디자인] 뷰가 고정되어 있는 동안 [코드] 뷰는 편집할 수 있어서 코드를 변경한 다음 [라이브 뷰]를 새로 고쳐 변경 사항이 반영되는 것을 확인할 수 있습니다. [라이브 뷰]에 있을 때 라이브 코드를 보는 추가 옵션이 있습니다. [라이브 코드] 뷰는 브라우저가 페이지를 렌더링하기 위해 실행하는 코드의 버전을 표시하는 [라이브 뷰]와 비슷합니다. [라이브 뷰]처럼 [라이브 코드] 뷰는 편집 불가능한 뷰입니다.

[라이브 뷰]의 추가적인 장점은 JavaScript를 고정하는 기능입니다. 예를 들어 [라이브 뷰]로 전환하고 사용자 상호 작용의 결과로 색상을 변경하는 Spry 기반 표 행에 커서를 놓을 수 있습니다. JavaScript를 고정하면 [라이브 뷰]는 현재 상태에서 페이지를 고정시킵니다. 그런 다음 CSS 또는 JavaScript를 편집하고 페이지를 새로 고쳐 변경 사항이 적용되는 것을 확인할 수 있습니다. [라이브 뷰]에서 JavaScript를 고정하는 것은 팝업 메뉴의 다른 상태 또는 기존 [디자인] 뷰에서 확인할 수 없는 기타 대화형 요소의 속성을 확인하고 변경하려는 경우 유용합니다.

라이브 뷰를 사용하는 작업에 대한 Dreamweaver 엔지니어링 팀의 비디오 개요를 보려면 www.adobe.com/go/dw10liveview_kr을 참조하십시오.

라이브 뷰를 사용한 작업, 관련된 파일 및 코드 탐색기에 대한 비디오 자습서는 www.adobe.com/go/lrvid4044_dw_kr을 참조하십시오.

1. [디자인] 뷰([보기] > [디자인]) 또는 [코드 및 디자인] 뷰([보기] > [코드 및 디자인])를 사용하고 있는지 확인합니다.

2. [라이브 뷰] 버튼 을 클릭합니다.

3. (선택 사항) 코드 뷰, CSS 스타일 패널, 외부 CSS 스타일 시트 또는 다른 관련된 파일에서 변경 사항을 확인합니다.

   [라이브 뷰]를 편집할 수 없지만 다른 영역(예: [CSS 스타일] 패널 또는 [코드] 뷰)에서 편집하는 옵션으로 [라이브 뷰]에서 클릭하면 변경할 수 있습니다.

   문서의 맨 위의 관련 파일 툴바에서 관련된 파일을 열어 [라이브 뷰]에 포커스를 유지하는 동안 CSS 스타일 시트와 같은 관련된 파일로 작업할 수 있습니다.

4. [코드] 뷰 또는 관련된 파일에서 변경을 한 경우 [문서] 툴바에서 [새로 고침] 버튼을 클릭하거나 F5 키를 눌러 [라이브 뷰]를 새로 고칩니다.

5. 편집 가능한 [디자인] 뷰로 돌아가려면 [라이브 뷰] 버튼을 다시 클릭합니다.

[라이브 코드]에 나타나는 코드는 브라우저에서 페이지 소스를 볼 때 나타나는 것과 비슷합니다. 해당 페이지 소스가 정적인 동안 브라우저에서 페이지의 소스만 제공하며 [라이브 코드] 뷰는 동적이고 [라이브 뷰]에서 페이지와 상호 작용하면 업데이트를 합니다.

1. [라이브 뷰]를 사용하고 있는지 확인합니다.

2. [라이브 코드] 버튼 을 클릭합니다.

   Dreamweaver는 브라우저가 페이지를 실행하기 위해 사용하는 라이브 코드를 표시합니다. 해당 코드는 노란색으로 강조 표시되어 있으며 편집할 수 없습니다.

3. 편집 가능한 [코드] 뷰로 돌아가려면 [라이브 코드] 버튼을 다시 클릭합니다.

다음 중 한 가지를 수행합니다.

• F6 키를 누릅니다.

• [라이브 뷰] 버튼의 팝업 메뉴에서 [JavaScript 고정]을 선택합니다.

문서의 맨 위에 있는 알림 표시줄은 JavaScript가 고정되어 있다는 것을 알려줍니다. 알림 표시줄을 닫으려면 닫기 링크를 클릭합니다.

[JavaScript 고정] 옵션 외에도 [라이브 뷰] 버튼의 팝업 메뉴 또는 [보기] > [라이브 뷰 옵션] 메뉴 항목에서 사용할 수 있는 일부 기타 옵션이 있습니다.

JavaScript 고정

현재 상태에서 JavaScript의 영향을 받은 요소를 고정합니다.

JavaScript 비활성화

JavaScript를 비활성화하고 브라우저에서 JavaScript가 활성화되어 있지 않은 경우 보이는 페이지를 다시 렌더링합니다.

플러그인 비활성화

플러그인을 비활성화하고 브라우저에서 플러그인이 활성화되어 있지 않은 경우 보이는 페이지를 다시 렌더링합니다.

문서 소스에 테스트 서버 사용

ColdFusion 페이지와 같은 동적 페이지에서 주로 사용하며 동적 페이지에서 기본적으로 선택합니다. 이 옵션을 선택하면 Dreamweaver는 [라이브 뷰] 표시의 소스로 사이트 테스트 서버의 파일 버전을 사용합니다.

문서 링크에 로컬 파일 사용

비동적 사이트의 기본 설정입니다. 테스트 서버를 사용하는 동적 사이트에 대해 이 옵션을 선택하면 Dreamweaver는 테스트 서버의 파일 대신 문서에 링크된 파일(예: CSS 및 JavaScript 파일)의 로컬 버전을 사용합니다. 그러면 관련된 파일을 로컬에서 변경할 수 있어 테스트 서버에 넣기 전에 어떻게 보일지를 확인할 수 있습니다. 이 옵션을 선택 해제한 경우 Dreamweaver는 관련된 파일의 테스트 서버 버전을 사용합니다.

HTTP 요청 설정

라이브 데이터를 표시하는 값을 입력할 수 있는 고급 설정 대화 상자로 안내합니다. 자세한 내용을 보려면 대화 상자의 [도움말] 버튼을 클릭하십시오.