10 가지 유용한 Dreamweaver 팁 및 비법 초보자 용

Dreamweaver 사용자는 그것이 강점이 무엇인지 확실히 추측 할 것입니다. 오늘날 시장에서 가장 잘 알려진 IDE (통합 개발 환경) 중 하나 인 기능, 옵션 및 토론의 톤이 가득합니다. 그러나 일부 개발자가 요구하는 기준을 충족하지 못할 수도 있습니다. Dreamweaver는 상당한 범위의 개발, 공동 작업 및 코딩 도구를 제공합니다. 이러한 옵션과 도구는 유감스럽고 직관적이지 않은 메뉴 레이어 아래에 숨겨져 있습니다. 따라서 오늘날의 게시물에서 자습서를 제공하고 있습니다..

Dreamweaver의 가장 강력한 기능 중 일부를 통해 신속하게 액세스 할 수 있으며 개발 시간을 단축하고 코드 품질을 크게 향상시키는 유용한 트릭을 소개합니다. 점프 후 전체 목록.

1. 동적 뷰 포함 “라이브 뷰”

우리는 DW가 열린 파일에 대한 정적 인 뷰를 제공한다는 것을 이미 알고 있지만, "동적보기" WordPress와 같은 응용 프로그램?

첫째, 우리는 텔 DW 우리에게 선물을 줄 때 사용할 설정"동적보기" 바르게. 이렇게하려면 다음을 선택하십시오. HTTP 요청 설정 ~로부터 보기> 라이브 뷰 옵션 메뉴를 선택한 다음 도망 또는 우편 응용 프로그램을 올바르게 보는 데 필요한 매개 변수.

다음으로 전환하여 라이브 뷰 DW에서는 이전 버전을 디자인보기 페이지의 라이브, 픽셀 완벽한 WebKit 렌더링이있는 창 표시되는 자리 표시 자 아이콘 대신 라이브 JavaScript, DOM 조작, 데이터베이스 쿼리, 서버 측 코드 및 렌더링 된 CSS로 완성됩니다. 디자인보기.

2. "Code Navigator"는 DW 's Firebug입니다.

한 걸음 더 나아가는 것은 코드 네비게이터 그리고 언제 라이브 뷰 창에서 Alt 키 (Windows 용 Command-Option- 클릭)를 클릭하면 해당 항목을 렌더링 한 코드가 즉시 표시됩니다. 현재 Firefox / Firebug에서 볼 수있는 것과 유사합니다..

3. JavaScript 정지

Ajax의 동적 특성으로 인해 첫 페이지로드시 특정 항목이 렌더링되거나 사용할 수없는 페이지와 상호 작용해야하는 경우가 많습니다. 페이지로드 후 얼마 후에 페이지에 주입되는 항목입니다. 다음은 그 예입니다.

자바 스크립트로 완전히 구현 된 툴팁의 스타일을 변경하고 싶을 수도 있습니다. 오늘날까지는 스크립트를 체계적으로 검색하여 생성되는 내용과 위치를 찾아야합니다..

대신 다음을 시도하십시오.

페이지를 렌더링하십시오. 라이브 뷰, 그 다음 히트 F6 언제든지 자바 스크립트를 일시 중지하여 페이지의 동적 항목과 관련된 코드를 타겟팅하고 해부 할 수 있습니다..

4. 라이브보기의 다음 친한 친구 - "라이브 코드"

사용할 때 라이브 뷰, 당신은 또한 라이브 코드. 라이브 코드 마우스를 가져 가면 코드가 업데이트되고 해당 요소 및 항목과 라이브 뷰 창!

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

Dreamweaver에는 지능적이고 완벽한 HTML 및 CSS 코드 완성 기능이 함께 제공됩니다., 그러나 Javascripts는 어떨까요?? Dreamweaver에서 jQuery 또는 Prototype을 코딩하면 Javascript 코드 완성을 제공하는 API 확장이 있음을 알아야합니다. 그것은 타이핑을 줄여 주며 빠른 코더들에게는 꽤 유용 할 수 있습니다..

자세한 내용을 보거나 다운로드하려면 여기를 클릭하십시오.

• Dreamweaver 용 jQuery API 확장
• Dreamweaver 용 프로토 타입 API 확장

6. 비행 중에 코드 보완하기

코드 페이지가 복잡하지 않고 지저분한 코드 줄처럼 보이나요? 사용 소스 서식 적용 기능을 선택하고 원하는대로 정확하게 다시 포맷하십시오. 신속하게 정리하려면 소스 코드 형식 하단의 아이콘 코딩 툴바 (편집> 도구 모음> 코딩) 선택하고 코드 형식 설정 기본 서식을 설정하는 방법.

또한 형식 옵션에 액세스 할 수 있습니다. 명령> 소스 서식 적용 또는 선택한 코드 블록에만 적용 할 수 있습니다. 선택 영역에 소스 서식 적용 선택권.

7. 위젯 가져 오기

클릭 만하면됩니다. Dreamweaver 확장 아이콘 (응용 프로그램 막대에서 기어처럼 보입니다) 웹 위젯 찾아보기. 그러면 Yahoo!, JQuery 및 기타 여러 공급 업체의 추가 위젯을 찾을 수있는 Adobe Exchange로 이동합니다..

8. Subversion 및 Dreamweaver

그리고 예, Dreamweaver는 Subversion (SVN)을 지원합니다. SVN을 사용하여 프로젝트의 개정 관리를 유지하는 개발자에게는 좋은 소식이 될 수 있습니다. Dreamweaver 개발자 Andrew Voltmer가 토론합니다. Dreamweaver에서 Subversions를 사용하는 방법.

9. 더 이상 중복 스타일 없음

많은 사람들이 워드 프로세서처럼 시각적으로 내용을 업데이트하는 방법으로 Dreamweaver를 사용합니다. Dreamweaver CS4 이전 버전에서는 CSS와 같은 중복 규칙이 적용될 수있었습니다. .클래스 1, .클래스 2, 등등. Dreamweaver CS4에서 속성 검사기 에 HTML 모드 (Inspector의 왼쪽에있는 HTML 아이콘을 클릭하십시오) 그러면 해당하는 모든 CSS에 작별 인사를하고 적절한 HTML 마크 업만 삽입하면됩니다..

10. 양식 검증이 쉬워졌습니다.

양식 필드의 유효성을 검사하고 싶지만 처음부터 다시 작성해야한다고 걱정하십니까? 걱정 마. 텍스트 필드와 같은 기존 양식 요소를 선택하고 Spry 유효성 검사 위젯 ~로부터 삽입> Spry 메뉴. 그런 다음 최소 또는 최대 문자와 같은 유효성 검사 요구 사항을 속성 관리자.

보너스 : 3 추가

11. 관련 파일에 쉽게 액세스하십시오.

HTML 또는 PHP 파일을 열면 문서 창 상단에 CSS, Javascript 및 PHP 용 포함 파일과 같은 종속 파일 행이 표시됩니다. 파일을 열지 않고도이 파일로 쉽게 전환하고 변경하고 저장할 수 있습니다. 관련 파일 막대에서 파일을 클릭하면 소스가 코드 뷰에 표시되고 부모 페이지가 디자인 뷰에 표시됩니다. 또는 코드 탐색기를 사용하여 현재 선택 항목에 영향을주는 CSS 소스 코드에 빠르게 액세스하십시오..

12. 브라우저 호환성 확인

호환성을 검사 할 문서를 엽니 다. 코드 / 스플릿 / 디자인보기에 액세스 할 수있는 동일한 메뉴 막대에서 맨 오른쪽의 '페이지 확인'버튼.

클릭하면 드롭 다운 메뉴가 펼쳐지고 '브라우저 호환성 확인'. 그만큼 브라우저 호환성 결과 창 해결해야 할 문제가있는 창 하단에 표시됩니다..

참고 : 이것은 Mac에서 IE의 새 버전을 확인하지 않습니다! 테스트에 사용할 브라우저를 선택하려면 다음을 선택하십시오. 페이지 확인 > 설정 메뉴에서.

13. PHP 페이지 미리보기

Dreamweaver에서는 소프트웨어 내에서 PHP 코드를 실행하고 미리 볼 수 있습니다. 설정 방법.

시작하기

1. 먼저, 대지 -> 새 사이트 상단 네비게이션에서.
2. 둘 다 볼 수 있습니다. 기본 과 고급 사이트 정의 옵션 탭. 다음을 선택하여 고급 사이트 정의 탭.
3. 해당 상자에 사이트의 폴더 이름을 입력하십시오 (이 예에서는 "myphp"를 폴더 이름으로 사용합니다).
4. '기본 이미지 폴더'입력란에 이름을 입력하여 '이미지'라는 다른 폴더를 만듭니다..
5. 아래의 지역 정보, 필드에 다음 값을 입력하십시오.
   • 사이트 이름: 사이트의 이름. Dreamweaver에서만 사용할 수 있습니다.
   • 로컬 루트 폴더: 이것은 작업 할 사이트의 이름입니다. 충돌을 최소화하거나 이름을 혼동하지 않도록 사이트 이름을 지정하십시오..
   • 기본 이미지 폴더: 이것은 선택 사항이지만 대부분의 사이트에서 이미지를 어느 정도 사용하므로 지금 만들 것을 권장합니다. 이것은 DW가 코딩 단계에서 문서에 이미지를 삽입하는 '모습'입니다..
   • 관련 링크: Dreamweaver에서 문서 링크가 처리되는 방법을 정의합니다. 문서 또는 루트를 선택할 수 있습니다. 이 둘의 차이점은 다음과 같습니다.
     • 문서 상대 - 작업중인 파일 및 링크 할 항목에 상대적인 경로를 삽입합니다..
     • Root Relative - /를 사용하여 ROOT 폴더와 관련하여 문서 / 파일을 연결합니다..
     • 또 다른 대안은 서버 구성 파일에 일부 구성을 추가하는 것입니다. 좀 더 고급 작업 인 지금은 Document-relative를 사용하는 방법을 고집 할 것입니다..
   • HTTP 주소: 프로젝트의 사이트 루트 폴더 입력
   • 대소 문자를 구분하는 링크: Dreamweaver는 프로젝트에있는 파일이 서버에 업로드 할 때 대 / 소문자를 구분할 수 있는지 여부를 확인합니다. 사이트 -> 링크 확인 사이트 맵을 사용할 때 알림이 표시됩니다. 원하는 경우 체크 표시 할 수 있습니다. 필자는 항상 소문자로 파일 이름을 지정하므로 개인적으로 체크하지 마십시오. 대문자는 권장하지 않습니다..
   • 은닉처: 캐시 사용 확인.
6. 에서 원격 정보 페이지에서 FTP 또는 원격 서버에 대한 다른 액세스를 설정하거나 액세스를 없음으로 설정하십시오.
7. 에서 테스트 서버 페이지 테스트 할 파일 형식 / 시스템과 관련된 옵션을 선택하십시오..
8. 버전 관리 이 예제에는 사용되지 않으므로 익숙하지 않은 경우 비워 둘 수 있습니다..
9. 클로킹 .psd, .fla 및 기타 소스 파일을 사이트 폴더 내에 배치 할 수 있으며 DW는 사이트 업로드 / 업데이트시이를 무시합니다..
10. 디자인 노트 파일에 대한 변경 사항을 기록한 웹 디자인 팀에게 이상적입니다. 이 방법을 사용하려면 기본적으로 선택되어 있으며 괜찮습니다..
11. 휴가 파일보기 열, 기부, 과 템플릿 기본적으로.
12. 그만큼 활발한 페이지는 Dreamweaver에 자동으로 포함 된 Spry assets 폴더를 가리키고 있습니다. 이것을 바꿀 필요가 없습니다. 모든 설정이 완료되면 확인을 클릭하십시오. 승인.

Dreamweaver에서 PHP 미리보기

이제 PHP 파일을 열고 필요한 부분을 변경하십시오. Dreamweaver에서이 파일을 보려면 F12 누름 결과가 기본 브라우저에 표시됩니다. 사용되는 브라우저를 변경할 수 있습니다. 편집하다 -> 환경 설정 -> 브라우저에서 미리보기. 이렇게하면 미리보기를 편집하는 시간이 단축되고 브라우저 막대에 긴 URL을 입력하거나 다른 서버 소프트웨어를 사용하여 PHP 파일을 렌더링 할 필요가 없어 시간을 절약 할 수 있습니다!

그게 다야. 행복한 Dreamweaver'ing :-)

편집자 주 : 이 게시물은에 의해 작성됩니다 제시록 Hongkiat.com. 지난 6 년 동안 Jesse는 UI 디자인, 앱 개발 및 웹 트렌드에 몰두했습니다. 그는 맞춤식 앱 개발에 중점을 둔 작지만 매우 재능있는 개발 팀의 설립자이자 디자인 리더입니다..