문서 Adobe CS5 Dreamweaver의 툴바 - Adobe Creative Suite 5 (Adobe CS5)의 문서 도구 모음

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver의 문서 도구 모음에는 코드 및 디자인과 같은 다른 모드에서 문서를 볼 수있는 도구가 포함되어 있으며 이러한 항목을 처리합니다 문서 제목 및 브라우저 호환성.

• 코드보기: 이보기를 사용하여 코드와 코드 만 표시하십시오. Dreamweaver를 사용하면 색상 코딩 태그, 속성, CSS 및 기타 요소를 사용하여 코드를 해독 할 수 있습니다.

  ->

• 분할보기: 이 옵션을 선택하면 코드 윈도우와 디자인보기간에 문서 윈도우가 분할됩니다. 이 뷰는 디자인과 코드를 동시에 볼 수 있으므로 매우 유용합니다.

  

  문서 툴바에서 페이지보기를 조정합니다.

• 디자인보기: 이 옵션은 문서 윈도우의 디자인보기에서 페이지를 표시합니다.

  -

• 라이브 코드: 라이브 뷰를 사용하면 브라우저에서 볼 수있는 문서 소스 코드를 볼 수 있지만이보기에서 페이지 코드를 편집 할 수는 없습니다.

• 브라우저 호환성 확인: 이 메뉴는 접근성과 같은 페이지 무결성 또는 CSS 규칙이 여러 브라우저에서 호환 가능한지 여부를 확인할 수있는 옵션을 표시합니다.

• 라이브 뷰: 라이브 뷰는 브라우저, 경계선, 안내선 및 기타 시각 자료가없는 것처럼 페이지를 렌더링합니다. 라이브 뷰에서는 미리보기 된 컨텐츠를 편집 할 수 없지만 코드, 분할 또는 디자인보기로 이동하여 페이지 컨텐츠를 수정할 수 있습니다.

• 검사: 새로운 검사 단추는 라이브 뷰와 함께 작동하여 페이지의 요소 서식을 지정하는 CSS 규칙을 나타냅니다. 검사가 활성화 된 상태에서 페이지에서 요소를 선택하면 CSS 스타일 패널에서 해당 요소의 서식을 지정하는 속성을 표시하고 특정 속성을 비활성화하거나 수정하고 결과를 볼 수 있습니다.

• 브라우저에서 미리보기 / 디버그: 설치된 웹 브라우저, Adobe의 BrowserLab 또는 Device Central 중 하나에서 문서를 미리 보거나 디버깅하려면이 버튼을 클릭합니다.

• 시각 자료: 이 버튼을 클릭하면 다양한 시각 자료 (예: 테두리 및 안내선)를 선택하여 다양한 요소를보고 페이지를보다 쉽게 ​​디자인 할 수 있습니다.

• 디자인보기 새로 고침: 코드보기에서 변경 한 후 문서의 디자인보기를 새로 고치려면이 단추를 클릭합니다. 코드보기에서 변경 한 사항은 파일을 저장하거나이 단추를 클릭하는 등의 특정 작업을 수행 할 때까지 디자인보기에 자동으로 나타나지 않습니다.

• 문서 제목: 이 필드에 문서 이름을 입력하십시오.

• 파일 관리: 이 버튼을 클릭하면 파일 관리 팝업 메뉴가 나타납니다.이 메뉴를 사용하여 사이트에서 문서를 체크 인 또는 체크 아웃 할 수 있습니다.

• 이전 페이지 / 다음 페이지 / 새로 고침 / 주소 표시 줄: 라이브 뷰에서이 도구는 웹 브라우저에서와 마찬가지로 작동하여 페이지를 탐색하고 페이지를 새로 고치고 현재 페이지. 라이브 뷰가 활성화되어 있지 않으면 주소 표시 줄이 작동하여 현재 작업중인 문서의 경로가 표시됩니다.

• 관련 문서: 외부 CSS 및 JavaScript 파일과 같이 페이지에서 사용하거나 첨부 한 문서 (Mac) 또는보기 선택 (코드 / 분할 / 디자인) 버튼 (Windows) 위에 나열되어 있습니다. 나열된 문서를 클릭하면 문서를 전환 할 필요없이 분할보기에서 첨부 된 파일을 편집 할 수 있습니다.

  • XML, JavaScript, CSS 및 기타 코드 기반 파일 유형은 [코드] 뷰에서만보고 편집 할 수 있습니다. 디자인 및 분할 단추가 흐리게 표시됩니다.

  • 새로 고침을 사용하면 코드 블록의 여는 태그 나 닫는 태그를 선택할 수있는 기능과 같이 DOM (Document Object Model)에 종속적 인 코드 기능도 업데이트됩니다.

• 라이브 뷰 옵션: 이 메뉴에서 옵션을 클릭하고 선택하여 문서가 표시되는 방식을 제어하고 라이브 뷰가 활성화 될 때 작동합니다.