WYSIWYG 만 사용하면 안됩니다.
Dreamweaver는 훌륭한 WYSIWYG 편집기 이지만, "보는 것만으로 얻을 수있는 것"환경에서 웹 페이지를 작성하는 데 관심이 없으면 Dreamweaver 도 사용할 수 있습니다. 위대한 텍스트 편집기이기도하기 때문입니다. 그러나 Dreamweaver 코드 편집기에는 길가에 숨어있는 많은 기능이 있습니다. 주요 초점은 제품의 "디자인보기"또는 WYSIWYG 편집기 부분에 있기 때문입니다.
Dreamweaver 코드 뷰로 들어가는 방법
Dreamweaver를 HTML 편집기로 사용한 적이 없기 전에 페이지 상단의 세 개의 버튼 ( "코드", "분할"및 "디자인")을 알지 못했을 수도 있습니다. Dreamweaver는 기본적으로 "디자인보기"또는 WYSIWYG 모드에서 시작됩니다. 그러나 HTML 코드보기 및 편집으로 전환하는 것은 쉽습니다. "코드"버튼을 클릭하기 만하면됩니다. 또는보기 메뉴로 이동하여 '코드'를 선택하십시오.
HTML 작성 방법을 배우거나 변경 내용이 문서에 어떤 영향을 주는지 알고 싶다면 코드보기와 디자인보기를 동시에 열 수 있습니다. 이 방법의 장점은 두 창에서 모두 편집 할 수 있다는 것입니다. 따라서 이미지 태그의 코드를 HTML로 작성한 다음 디자인보기를 사용하여 드래그 앤 드롭으로 페이지의 다른 위치로 이동할 수 있습니다.
한 번에 두 가지를 모두 보려면 다음 중 하나를 수행하십시오.
- "코드"와 "디자인"사이의 "분할"버튼을 클릭하십시오.
- 보기 메뉴에서 "코드 및 디자인"을 선택합니다.
Dreamweaver를 사용하여 HTML 코드를 편집하는 것이 편한 경우 기본적으로 코드 뷰에서 Dreamweaver를 열도록 환경 설정을 변경할 수 있습니다. 가장 쉬운 방법은 코드 뷰를 작업 영역으로 저장하는 것입니다. Dreamweaver가 마지막으로 사용한 작업 영역에서 열립니다. 그렇지 않은 경우 창 메뉴로 이동하여 원하는 작업 영역을 선택하십시오.
코드보기 옵션
Dreamweaver는 매우 다양한 방법으로 사용자 정의하고 원하는대로 작동하도록하므로 매우 유연합니다. 옵션 창에는 조정할 수있는 코드 색상, 코드 서식, 코드 힌트 및 코드 재 작성 옵션이 있습니다. 그러나 코드 뷰 내에서 일부 특수 옵션을 변경할 수도 있습니다.
코드 뷰에 있으면 도구 모음에 "보기 옵션"단추가 있습니다. 보기 메뉴에서 "코드보기 옵션"을 선택하여 옵션을 볼 수도 있습니다. 옵션은 다음과 같습니다.
- 단어 줄 바꾸기 - 가로로 스크롤하지 않고 볼 수 있도록 HTML 코드를 래핑합니다. 이 옵션은 코드에 캐리지 리턴을 삽입하지 않으므로 읽기 쉽도록 코드 만 표시합니다.
- 줄 번호 - 줄 옆에 줄 번호를 표시합니다. 보기 창보다 긴 줄을 감싸는 줄 바꿈 기호가 표시됩니다.
- 숨겨진 문자 - 웹 페이지에 표시되는 공백 대신 특수 문자를 표시합니다. 점과 같은 것이 공백을 대체하고, 두 개의 쉐브론이 각 탭을 대체하고, 필라 또는 단락 마커가 각 줄 바꿈을 대체합니다.
- 잘못된 코드 강조 표시 - 노란색으로 잘못된 HTML을 강조 표시합니다. 노란색 태그를 선택하면 속성 관리자에서이를 수정하는 방법에 대한 힌트를 제공합니다.
- Syntax Coloring - 코드의 색상 코딩을 켜거나 끕니다. 환경 설정의 코드 색상 영역에서 색상 코딩의 색상을 변경합니다.
- 자동 들여 쓰기 (Auto Indent) - 위의 코드가 들여 쓰기되면 캐리지 리턴 후에 코드를 들여 쓰기합니다. 환경 설정의 코드 서식 섹션에서 탭 크기를 변경하여 들여 쓰기의 크기를 변경할 수 있습니다.
Dreamweaver 코드 뷰에서 HTML 코드 편집
Dreamweaver의 코드 뷰에서 HTML 코드를 쉽게 편집 할 수 있습니다. HTML을 입력하기 만하면됩니다. 그러나 Dreamweaver는 기본 HTML 편집기를 넘어서는 확장 기능을 제공합니다. HTML 태그 작성을 시작하면 <를 입력하십시오. 해당 문자 바로 다음에서 일시 중지하면 Dreamweaver에서 HTML 태그 목록을 표시합니다 . 이것을 코드 힌트라고합니다. 선택 항목의 범위를 좁히려면 문자 입력을 시작합니다. Dreamweaver는 입력하는 내용에 맞는 태그로 드롭 다운 목록의 범위를 좁 힙니다.
HTML을 처음 접하는 경우 HTML 태그 목록을 스크롤하고 다양한 태그를 선택하여 자신이하는 일을 볼 수 있습니다. 태그를 입력하면 Dreamweaver에서 계속 속성에 대한 프롬프트를 표시합니다. 예를 들어 " 태그의 범위를 좁 힙니다.
그러나 코드 힌트는 태그에서 끝나지 않습니다. 코드 힌트를 사용하여 다음을 삽입 할 수 있습니다.
코드 힌트가 나타나지 않으면 Ctrl-spacebar (Windows) 또는 Cmd-spacebar (Macintosh)를 눌러 표시되도록 할 수 있습니다. 코드 힌트가 표시되지 않는 가장 일반적인 이유는 태그를 완료하기 전에 다른 창으로 전환 한 경우입니다. Dreamweaver는 문자 <를 입력하지 않도록 설정하므로 창을 닫고 돌아 오면 코드 힌트를 다시 실행해야합니다.
이스케이프 키를 눌러 코드 힌트 메뉴를 끌 수 있습니다.
시작 HTML 태그를 입력했으면 HTML 태그를 닫아야합니다. Dreamweaver는 자연스럽게이 작업을 수행합니다. 사용자 요구에 가장 적합한 "태그 닫기"옵션을 입력하면
HTML로 페이지를 편집 할 준비가되지 않았지만 작성된 코드를보고 싶다면 코드 검사기를 사용해보십시오. 그러면 별도의 창에 HTML 코드가 열립니다. 코드 뷰와 마찬가지로 작동하며, 실제로는 현재 문서의 분리 가능한 코드 뷰 창입니다. 코드 속성을 열려면 윈도우 메뉴로 이동하여 "코드 검사기"를 선택하거나 키보드의 F10 키를 누릅니다.
Dreamweaver에서는 표시하려는 HTML 코드의 서식을 지정합니다. 예를 들어 들여 쓰기를 위해 3 개의 공백을 사용하지만 IMG 태그를 들여 쓰지 않는 경우 코드 재 작성 옵션에서 해당 형식 정보를 지정할 수 있습니다. 그런 다음 명령 메뉴로 이동하여 "소스 서식 적용"을 선택하십시오. 이것은 다른 사람이 작성한 코드를 익숙한 형식으로 변환하는 좋은 방법입니다.
많은 HTML 코더가 알지 못하거나 사용하지 않는 기능은 HTML 코드를 접을 수있는 기능입니다. 이것은 문서에서 태그를 제거하지는 않지만 작업중인 태그를 방해하지 않도록보기에서 태그를 제거하기 만하면됩니다. 코드를 접는 방법은 다음과 같습니다.
- 숨길 코드 섹션을 선택하십시오.
- 편집 메뉴의 "코드 축소"하위 메뉴에서 "선택 축소"를 선택하십시오.
더 쉬운 방법은 코드를 선택한 다음 거터에 나타나는 코드 축소 아이콘을 클릭하는 것입니다. 선택한 코드를 마우스 오른쪽 버튼으로 클릭하고 "선택 축소"를 선택할 수도 있습니다.
강조 표시된 것을 제외한 모든 것을 숨기려면 위의 방법 중 하나에서 "선택 외부 접기"를 선택하십시오.
축소 된 코드를 확장하려면 두 번 클릭하기 만하면됩니다. 그러면 코드가 열리고 선택됩니다. 그런 다음 해당 선택 영역을 이동하거나 삭제하거나 태그를 추가 할 수 있습니다.
외부 서식 파일을 편집하지 않으려는 페이지에서 항상 접기 및 확장 기능을 사용할 수 있습니다. 외부에서 편집하고 접기를 원하는 컨텐트 영역을 선택하기 만하면됩니다. 그런 다음 HTML을 작성하십시오. 디자인보기에서 페이지를 보거나 브라우저에서 미리 볼 수 있습니다. 접힌 코드는 문서에서 제거되지 않고 단순히 숨겨져 있습니다. 일련의 항목을 작업 할 때도 사용할 수 있습니다. 끝내면 붕괴시킵니다. 코드가 표시되지 않으면 완료되었음을 알 수 있습니다.