초보자를 위한 10가지 간단하지만 유용한 Dreamweaver 팁 및 요령

Adobe Dreamweaver는 웹 디자이너를 위한 강력한 도구입니다. Dreamweaver는 웹 사이트를 개발하기 위한 시각적 디자인 화면과 코드 편집기를 제공합니다. 장단점이 있지만 광범위한 기능을 통해 웹 사이트를 효과적으로 구축할 수 있습니다.

다음은 초보자를 위한 간단하지만 유용한 Dreamweaver 팁 10가지입니다.

1. 줄 바꿈을 삭제합니다.

문서, 전자 메일 또는 Word 파일에서 Dreamweaver로 텍스트를 복사하는 동안 단락이나 줄 끝에 줄 바꿈이 생깁니다. 링크 나누기 문자 <br>는 줄의 끝을 나타내므로 그 뒤에 오는 모든 텍스트는 그 아래 줄에 표시됩니다. 이러한 문자는 보이지 않으므로 제거하기가 어렵습니다. Dreamweaver는 일반적으로 이러한 문자를 강조 표시하지 않지만 환경 설정 메뉴에서 설정을 변경하여 프로그램이 줄 바꿈을 나타내는 작은 노란색 아이콘을 표시하도록 할 수 있습니다. 줄 바꿈이 표시되면 쉽게 삭제할 수 있습니다.

2. 사이트 정의를 기억하십시오.

사람들은 종종 Dreamweaver에서 작업하는 것과 단어 문서로 작업하는 것을 혼동합니다. 그러나 사이트를 디자인한다는 것은 하나의 파일을 만드는 것이 아니라 이미지, JavaScript 파일, 웹페이지 및 CSS 파일과 같은 상호 관련된 파일 모음으로 사이트를 만드는 것입니다. 이것을 이해하지 못하는 사용자는 종종 사이트 설정의 중요성을 잊어버립니다. Dreamweaver는 설치하기 쉬운 사이트 프로세스를 제공합니다. 사이트 파일 위치에 대한 정보를 제공하고 다양한 Dreamweaver 관리 도구 중 하나를 선택할 수 있습니다. 이러한 도구는 파일을 웹 서버로 전송하고 끊어진 링크를 확인하며 템플릿으로 사이트를 구축합니다.

3. 코드의 글꼴 크기를 늘립니다.

글꼴 크기를 조정하는 Dreamweaver의 기능을 사용하면 몇 가지 간단한 단계를 통해 코드 크기를 늘릴 수 있습니다. 글꼴 크기를 늘리려면 먼저 Dreamweaver > 환경 설정을 선택한 다음 글꼴 범주를 클릭한 다음 새 크기를 선택하고 확인을 클릭합니다. 이렇게 하면 코드를 쉽게 읽을 수 있고 눈의 피로 없이 오랜 시간 동안 웹사이트 개발 작업을 할 수 있습니다.

4. CSS 배경 속기를 끕니다.

CSS의 특징 중 하나는 background 속성입니다. 이 기능을 사용하면 배경에 색상이나 이미지를 추가할 수 있습니다. Dreamweaver의 배경 속기 속성은 3줄 코드를 이미지, 색상 및 반복 속성을 정의하는 한 줄로 줄입니다. 이것은 확실히 배경 속성을 정의하는 것을 더 쉽게 만들 수 있지만 속기 버전에 하나의 속성을 남겨두면 웹 브라우저는 "없음"으로 처리합니다. 예를 들어 이미지 속성만 지정하면 배경을 변경하는 동안 웹 브라우저는 이전 배경에서 기존 색상을 제거합니다. 따라서 이 문제를 방지하려면 CSS 배경 속기를 끄는 것이 좋습니다.

5. CSS Designer로 스타일 복사:

CSS Designer를 사용하면 웹 페이지의 스타일을 시각적으로 향상시킬 수 있습니다. CSS 디자이너의 더 많은 기능을 사용하려면 선택기를 마우스 오른쪽 버튼으로 클릭하여 복사 또는 복제 작업을 사용하십시오. 이 옵션을 사용하면 한 선택기에서 다른 선택기로 스타일을 복사할 수 있습니다. 이러한 스타일에는 배경, 텍스트, 애니메이션 또는 테두리가 포함됩니다. 전체 선택기를 복사하려면 대상 접근 방식에 대해 표준 복제 또는 미디어 쿼리로 복제 명령을 사용하십시오. 이러한 바로 가기는 많은 시간을 절약하고 일관된 스타일을 유지합니다.

6. 탐색 모음을 제거합니다.

Adobe Dreamweaver CS5에는 브라우저 탐색 도구 모음이 함께 제공됩니다. 이 툴바는 Dreamweaver의 라이브 뷰 옵션과 함께 사용하도록 만들어졌습니다. 문서 창에서 이 두 옵션을 모두 찾을 수 있습니다. 라이브 뷰는 웹 페이지의 미리보기를 보는 데 사용됩니다. 라이브 뷰에서는 링크를 클릭하여 특정 페이지로 이동할 수 있습니다. 탐색 도구 모음은 새 페이지의 위치를 ​​표시하고 페이지 사이를 쉽게 탐색할 수 있도록 합니다. 보기 > 도구 모음 섹션에서 브라우저 탐색 옵션을 선택 취소하여 사용하지 않을 때 이 도구 모음을 숨길 수 있습니다.

7. 파일 관리:

모든 파일은 Dreamweaver로 사이트를 설정할 때 파일 패널에 있습니다. 파일 이름 바꾸기, 이동 및 강조 표시와 같은 많은 기능에 이 파일 패널을 사용할 수 있습니다. 이것은 아마도 일반적이며 이 모든 것을 알고 있을 수 있지만 웹 페이지는 일반 파일과 다릅니다. 웹 페이지에는 이미지, 다른 웹 페이지에 대한 링크 및 외부 스타일 시트 파일의 CSS 스타일이 있습니다. 일반적으로 Windows 탐색기를 통해 이미지, 웹 페이지 또는 CSS 파일의 이름을 바꾸면 링크가 끊어질 수 있습니다. 반면 Dreamweaver에서는 파일 패널을 사용하여 파일을 이동하거나 이름을 바꾸는 경우 링크를 자동으로 업데이트할 수 있습니다. 이렇게 하면 끊어진 링크가 없습니다.

8. 태그 선택기 선택:

CSS 클래스 스타일을 적용하는 동안 태그를 정밀하게 추가하거나 제거하는 것은 어려울 수 있습니다. 정확한 선을 선택하려면 Dreamweaver의 태그 선택기가 가장 좋습니다. 태그 선택기는 문서 창의 왼쪽 하단에 있습니다. 이 선택기는 텍스트 주위에 있는 모든 HTML 및 기타 태그를 표시합니다. 태그 선택기 막대에서 사용 가능한 태그를 클릭하여 특정 태그를 선택할 수 있습니다. 강조 표시된 태그는 태그가 선택되었음을 나타냅니다.

9. 스니펫 사용:

Dreamweaver는 많은 시간을 절약할 수 있는 핵심 코드인 스니펫을 제공합니다. 스니펫은 Creative Cloud를 통해 동기화되므로 모든 시스템에서 사용할 수 있습니다. 가장 많이 사용하는 단축키를 단축키로 지정할 수 있습니다. 단축키를 편집하고 싶다면 단축키 디자인을 열고 표준 세트를 복제하십시오. 그런 다음 명령 섹션 아래의 스니펫 범주를 선택하여 즐겨찾기를 선택합니다. 그런 다음 생성한 것을 포함하여 사용 가능한 모든 스니펫 목록을 찾을 수 있습니다. 가장 어려운 부분은 사용되지 않는 키보드 조합을 파악하는 것입니다. 그러나 이것은 수정자를 사용하여 해결할 수 있습니다.

10. WordPress와 Dreamweaver 연결:

Dreamweaver와 WordPress는 훌륭한 팀을 만듭니다. Dreamweaver의 동적 파일 도구 세트를 사용하여 WordPress 페이지를 디자인하고 수정할 수 있습니다. 이 도구 세트에는 사용자 정의 필터, 동적으로 관련된 파일 및 사이트별 코드 힌트가 포함되어 있습니다. 어려운 부분은 Dreamweaver에서 다른 사이트 페이지와 작업하는 방법을 알아내는 것입니다. 먼저 WordPress 사이트 루트에 있는 index.php 파일로 시작하고 거기에서 탐색해야 합니다. 웹 주소에 직접 경로를 추가하거나 Dreamweaver 기능을 사용하여 링크를 클릭할 수 있습니다. 페이지가 표시되면 Dreamweaver의 CSS 및 기타 도구를 제어할 수 있습니다.

Adobe Dreamweaver는 웹 사이트 구축에 적합합니다. 코드 완성, 코드 축소 및 구문 강조와 같은 기본 기능과 함께 코드 내부 검사 및 실시간 구문 검사와 같은 일부 고급 기능이 함께 제공됩니다. 이 언급된 팁은 웹사이트를 보다 효율적으로 구축하는 데 도움이 됩니다. 많은 코딩 없이 웹사이트를 구축할 수 있는 도구를 찾고 있다면 이 웹사이트 구축 도구를 확인하십시오.