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