Dreamweaver에 대한 10가지 해킹 - 웹 개발자를 위한 최고의 코드 편집기

Dreamweaver는 인터넷의 모든 웹 기반 활동의 어머니입니다. 대부분의 사람들에게 Dreamweaver는 웹 사이트를 만드는 도구일 뿐이지만 Dreamweaver가 최강이라는 사실은 전문가만 알고 있습니다.

Dreamweaver에는 웹 개발자가 가장 좋아하는 도구인 많은 기능과 옵션이 있습니다. 의심할 여지 없이 이 소프트웨어는 현재 시장에서 다른 어떤 웹 개발 소프트웨어도 가지고 있지 않은 가장 잘 알려진 IDE(통합 개발 환경)를 가지고 있습니다. 개발, 공동 작업 및 코딩 도구인 Dreamweaver는 웹 개발자가 사용할 수 있는 적절한 범위를 제공합니다. 그렇기 때문에 초보자 웹 개발자는 Dreamweaver를 최대한 활용할 수 있는 방법을 아는 것이 중요합니다.

전문 웹 개발자와 일반 웹 개발자를 구분하는 모든 측면은 아쉬운 직관적인 메뉴의 레이어 아래에 숨겨져 있기 때문에 새로운 웹 개발자는 기술 향상에 어려움을 겪고 있습니다. 그러나 이 기사에서는 오늘날 시장의 요구 사항을 충족시키기 위해 알아야 할 매우 중요한 Dreamweaver의 숨겨진 강력한 기능을 보여 드리겠습니다. 이 기사는 이러한 기능에 빠르게 액세스하는 데 도움이 되며 작업 품질을 개선하고 코딩을 크게 향상시킬 수 있는 유용한 상위 10가지 핵을 제공합니다.

1. 다이내믹 뷰 및 라이브 뷰:

Dreamweaver가 정적 보기 또는 열린 파일을 제공한다는 것은 누구나 알고 있습니다. 그러나 WordPress와 같은 응용 프로그램의 동적 보기에 대한 질문에는 답이 없습니다. 동적 보기를 설정하려면 동적 보기에 사용할 설정에 대해 Dreamweaver에 알려야 합니다. 이를 설정하려면 보기 > 라이브 보기 > 옵션 메뉴를 클릭하여 HTTP 요청 설정으로 이동한 다음 애플리케이션을 올바르게 보는 데 필요한 GET 또는 POST를 입력하십시오.

그런 다음 디자인 보기 패널을 대체할 Dreamweaver의 라이브 뷰를 페이지의 픽셀 단위로 완벽하게 렌더링된 라이브 WebKit으로 전환합니다. 그런 다음 디자인 보기 인터페이스의 자리 표시자 아이콘 대신 라이브 Javascript, DOM 조작, 데이터베이스 쿼리, 서버 측 코드 및 렌더링된 CSS로 완료합니다.

2. 탐색을 강화하기 위한 부트스트랩:

탐색은 Bootstrap이 많은 도움을 줄 수 있는 작은 화면의 요구 사항을 충족할 수 있는 적응형 기능이 있어야 하는 반응형 웹 사이트의 한 페이지 구성 요소입니다. Bootstrap을 사용하면 탐색 모음을 쉽게 설정하고 가로 스트립에서 세로 패널로 전환할 수 있습니다. 그 이유는 Dreamweaver가 Bootstrap의 모든 탐색 유연성을 지원하고 효과적이고 반응이 빠른 웹 사이트를 개발할 때 이 기능을 사용하기 쉽기 때문입니다.

빠른 보기를 제공하기 위해 다음은 개발에서 Bootstrap을 사용하는 방법에 대한 빠른 데모입니다.

Bootstrap으로 탐색을 강화하는 것은 Dreamweaver의 새 문서 대화 상자에서 시작됩니다. 새 문서 대화 상자에서 Bootstrap Framework 버튼을 클릭하고 사전 빌드 레이아웃 옵션 확인란을 선택하여 다음과 같은 모든 기능을 갖춘 탐색 옵션을 사용합니다.

• 순서가 없고 의미상 올바른 표준 링크 목록입니다.
• 브랜드 이미지를 배치할 로고를 배치하는 영역입니다.
• 제출 버튼과 검색 필드를 활성화할 준비가 되었습니다.
• 하위 탐색 항목의 드롭다운 메뉴에 대한 사전 설정과 구분선으로 완성합니다.
• 필요할 때 정렬할 수 있는 왼쪽 및 오른쪽 섹션.
• 내장된 응답성.

어렵다면 다른 방법이 있습니다. Dreamweaver를 사용하면 사용자 정의된 탐색 모음을 만들 수 있습니다. 어두운 팔레트를 선호하는 경우 <nav> 태그에 .navbar-inverse 클래스를 추가하기만 하면 됩니다. 가지고 놀 수도 있습니다. 탐색을 항상 페이지 위에 표시하려면 .navbar-fix-top을 입력하십시오. 아래에 표시하려면 .navbar-fixed-bottom을 입력합니다. 이러한 모든 Bootstrap 클래스는 표준이며 Dreamweaver 코드 힌트도 이러한 코딩을 지원하므로 전체 코딩을 염두에 둘 필요가 없습니다. 요소 표시에 .navbar를 입력하기만 하면 원하는 옵션을 선택할 수 있는 팝업 목록이 나타납니다.

3. 자바스크립트 동결:

Ajax는 매우 역동적인 특성을 가지고 있습니다. 이것이 첫 페이지 로드 시 사용할 수 없거나 렌더링되지 않은 항목이 있는 페이지와 상호 작용해야 하는 경우가 많은 이유입니다. 이러한 항목은 로드 시간이 지나면 페이지에 삽입될 수 있으므로 첫 번째 로드에서는 표시되지 않습니다. 예를 들어, JavaScript에서 완전히 구현된 도구 설명의 스타일을 변경하려는 경우 스크립트를 통해 체계적으로 검색하여 어떤 항목이 어디에서 생성되었는지 확인하곤 했습니다. 스크립트를 통해 검색하는 대신 다음을 시도하십시오.

Dreamweaver를 라이브 뷰에 넣고 페이지를 렌더링합니다. 그런 다음 F6 키를 눌러 언제든지 JavaScript를 고정하면 페이지에 있는 모든 동적 항목의 코드를 분석하고 대상으로 지정할 수 있습니다. 이렇게 하면 동적 항목의 정확한 코드를 타겟팅하는 데 도움이 될 뿐만 아니라 동적 웹 사이트 내에서 코드를 검색하는 시간을 줄여 개발 속도를 높일 수 있습니다.

4. 코드 강조 표시:

복잡한 코딩을 매일 밤낮으로 보는 데 익숙하지 않다면 코딩 스크립트가 매우 혼란스러울 수 있습니다. 여기에서 코드를 강조 표시하면 전체 스크립트에서 분판을 만드는 데 도움이 됩니다. 최첨단으로 눈을 움직이는 대신 Dreamweaver에는 코드를 읽는 데 도움이 되는 코딩을 강조 표시하는 기능이 있습니다. 이를 위해 Dreamweaver 환경 설정을 열고 기술 미리 보기 섹션을 켭니다. 그런 다음 코드 강조 표시 활성화 옵션을 클릭하고 Dreamweaver에서 작업을 수행하도록 합니다. 그러나 이 기능은 최신 버전에서만 사용할 수 있으므로 Dreamweaver 버전을 업데이트해야 할 수도 있습니다.

강조 표시 옵션을 활성화한 후 아무 태그나 두 번 클릭하면 현재 페이지에 있는 모든 태그 인스턴스가 강조 표시됩니다. 그러나 매개변수를 정의해야 합니다. 이 도구는 유사한 요소를 빠르게 식별하고 이동하는 데 유용합니다. 요소를 강조 표시했으면 키보드 단축키 f3(PC의 경우 F3, Mac의 경우 CMD-G)를 사용하여 강조 표시된 한 요소에서 다음 요소로 이동합니다. 또한 shift 수정자는 이전 섹션으로 뒤로 이동할 수 있습니다. 또한 코드 강조 표시는 HTML 태그 속성 및 값과도 작동하므로 특정 클래스를 쉽게 찾을 수 있습니다.

5. 자동 자바스크립트 완성:

Dreamweaver는 지능적이고 완전한 HTML 및 CSS 코드가 있는 훌륭한 플랫폼입니다. 그러나 일부 사람들은 JavaScript가 완전하지 않다고 생각합니다. jQuery 또는 Prototype의 경우 Dreamweaver에는 Javascript 완성 코드를 제공하는 API 확장이 있다는 것을 알아야 합니다. 이러한 코드를 사용하면 전체 스크립트를 입력할 필요가 없고 빠른 코더에게 매우 편리하기 때문에 이러한 코드는 개발 프로세스의 속도를 높입니다.

Dreamweaver는 모든 웹 개발자가 작업 속도를 높이고 최소한의 노력으로 최상의 제품을 생산할 수 있도록 도와주는 이러한 유형의 jQuery 및 Prototype 완성 코드를 사용할 수 있는 유일한 웹 개발 소프트웨어입니다.

6. 관련 파일에 쉽게 액세스:

CSS 및 JavaScript는 HTML 및 PHP 파일을 열 때 표시되는 독립 파일의 이름입니다. PHP 파일을 여는 동안 창 상단에서 볼 수 있습니다. 이러한 모든 옵션이 전면에 배치되기 때문에 이러한 파일로 쉽게 전환할 수 있고 열지 않고도 저장할 수 있는 변경을 수행할 수 있습니다. 관련 파일 표시줄에서 파일을 클릭하면 코드 보기에 해당 소스가 표시되고 디자인 보기에서 상위 페이지가 표시됩니다.

또한 모든 코드 탐색기 도구를 사용하여 현재 솔루션에 영향을 줄 CSS 소스 코드에 빠르게 액세스할 수도 있습니다. CSS 소스 코드에 대한 이러한 빠른 액세스는 코딩 시간을 줄이고 웹 개발자가 개발 프로세스의 다양한 측면에 집중할 수 있도록 합니다.

7. 즉석에서 코드를 아름답게 합니다.

체계화되지 않고 지저분한 코드 라인은 이 코딩의 개발자가 코드를 순서대로 작성할 만큼 전문적이고 숙련되지 않았음을 보여줍니다. 이것은 또한 웹사이트의 검색 엔진 최적화 동안 많은 것을 계산하는 것입니다. 그러나 코드를 구성하고 아름답게 하는 것은 사람들이 생각하는 것만큼 어렵지 않습니다. Dreamweaver 옵션에 대한 올바른 지식이 있으면 즉시 코드를 구성할 수 있습니다. "소스 서식 적용" 옵션을 사용하고 원하는 대로 정확하게 수정하십시오. 코딩을 깔끔하고 깔끔하게 하려면 코딩 툴바 하단의 '소스 코드 형식 지정'을 클릭한 후 '편집 > 툴바 > 코딩'으로 이동한 후 '코드 형식 설정'을 선택하여 원하는 설정을 지정합니다.

스크립트를 구성하는 또 다른 방법은 명령 > 소스 서식 적용에서 서식 옵션에 액세스하거나 선택 항목에 소스 서식 적용 옵션을 선택하여 코딩 블록에만 적용하는 것입니다.

8. 보푸라기 없는 코딩:

Adobe가 Dreamweaver에 강력한 도구와 기능을 아무리 많이 제공하더라도 웹 사이트에서 더 많이 작업할수록 코딩 측면에서 더 많은 작업을 수행해야 합니다. 이것은 기술을 향상시킬 수 있지만 코딩을 너무 많이 작성하는 것은 쉬운 일이 아니기 때문에 끝없는 오류의 문도 열어줍니다. Dreamweaver는 그것을 알고 있기 때문에 Creative Cloud(CC)인 Dreamweaver의 최신 버전에는 Linting 지원이라는 기능이 있습니다. Linting은 CSS, HTML 및 JavaScript에 사용할 수 있는 기본 프로그래밍 구문 검사 도구입니다. 이를 통해 Dreamweaver는 문제나 오류를 식별할 때마다 일반 및 특정 플레어를 여러 개 보냅니다.

테스트를 실행하려면 Dreamweaver에서 전체 코드 페이지를 열면 상태 표시줄의 오른쪽에 있는 원 안에 작은 녹색 확인 표시가 나타납니다. 작은 녹색 체크 표시만 둘러져 있으면 코드에 문제가 없는 것입니다. 빨간색 원으로 둘러싸인 적십자 표시가 있는 경우 코딩에 문제가 있는 것이며 웹 사이트를 제대로 실행하려면 수정해야 합니다. 또한 오류 표시를 클릭하면 오류 설명과 함께 실수를 한 열과 행으로 이동할 수 있습니다. 가장 좋은 점은 이 기능에 제한이 없으며 녹색 표시가 나지 않을 때까지 사용할 수 있다는 것입니다.

9. 브라우저 호환성 확인:

브라우징 기능은 모든 웹 개발 프로세스의 가장 기본적인 것 중 하나입니다. 이것이 바로 Dreamweaver가 웹 개발을 시작하기 전에 이러한 기본 사항을 절대 놓치지 않도록 보다 쉽게 ​​만든 이유입니다. 호환성을 확인하려는 Dreamweaver에서 문서를 엽니다. 코드 아이콘, 분할 보기 및 디자인 보기 옵션이 있는 메뉴 모음에서 "페이지 확인" 버튼이라는 또 다른 옵션이 있습니다.

클릭하면 드롭다운 메뉴가 열리고 여기에서 브라우저 호환성 확인을 선택하고 별도의 창에서 호환성 결과를 확인합니다.

10. 코드 최소화:

큰 웹 사이트를 코딩하는 동안 코드 덩어리가 화면에서 짜증을 내기 시작하는 경우가 종종 있습니다. 키보드에서 버튼 하나만 누르면 이러한 코딩 덩어리를 최소화할 수 있다는 것을 아는 사람은 거의 없습니다. 코딩 청크에서 변경할 필요가 없다고 확신하는 경우 해당 블록을 선택하고 코드 라인 번호 옆에 있는 "-"를 클릭하십시오. 그 덩어리는 최소화하고 확장할 때까지 귀찮게 하지 않습니다.