100 가지가 넘는 Dreamweaver 팁 및 기법
Adobe Dreamweaver 는 많은 작업을 수행 할 수 있기 때문에 웹 디자이너에게 매우 유용한 도구입니다. 물론 할 수있는 모든 일들은 배우기가 어렵습니다. 최신 버전 인 CS5의 변경 사항을 포함하여 Dreamweaver에서 수행 할 수있는 여러 가지 작업에 대해 알아보십시오. 그리고 Dreamweaver CS5에서 누락 된 사항을 확인하는 것을 잊지 마십시오.
사이트 정의
- 새 웹 사이트 시작
- 웹 사이트 만들기
- 필요한 경우 사이트의 필요한 부분 만 설정하십시오. * CS5의 새로운 기능
- 더 완벽한 워크 플로를 위해 원격, QA 및 테스트 서버 설정 * CS5의 새로운 기능
- 새 디렉토리 만들기 및 게시
- Doctype 변경
- 페이지에 메타 데이터 포함
사이트 구축
- 원격 사이트 정의
- 웹 서버에 FTP 파일 보내기
- 버전 제어 시스템을 사용하여 파일 체크인 및 체크 아웃
- 고급 버전 관리를 위해 Subversion과 연결 * CS5의 새로운 기능
- 팀원에게 메모 남기기
웹 페이지 만들기
- WYSIWYG 모드로 페이지 작성
- HTML로 페이지 작성
- 템플릿에서 새 페이지 만들기
- 처음부터 새 페이지 만들기
- 템플릿 만들기
- 사이트 디렉토리에 파일 저장
- 페이지 속성 정의
CSS
- CSS 스타일 시트 사용
- 인라인 스타일 추가
- 외부 스타일 시트 만들기
- 외부 스타일 시트 첨부
- 클래스, ID, 태그 및 복합 CSS 선택기 만들기
- 기존 CSS 규칙 편집
- 인쇄 가능한 페이지를위한 CSS 작성
- 스타일 속성 사용 및 사용 안 함 * CS5의 새로운 기능
- 시각적으로 CSS 상자 모델 검사 * CS5의 새로운 기능
본문
- 텍스트 수정
- 다른 글꼴 사용
- 줄 바꿈을 삽입하십시오.
- 특수 문자 사용
- 오늘 날짜 포함
- 의견 쓰기
- 텍스트에 HTML 태그 적용
- HTML 속성을 태그에 추가
모래밭
- 텍스트 및 이미지 링크
- 사이트 링크 확인
- 기본 링크 색상 변경 (링크, 방문, 마우스 오버, 활성)
- 링크에 도구 설명 만들기
- mailto 링크 만들기
- 웹 페이지 앵커 만들기
이미지
- 페이지에 그래픽 추가
- 이미지 수정
- 이미지 크기 조정
- 이미지에 대체 텍스트 추가
- 이미지에 접근성 옵션 추가
- 이미지와 텍스트 정렬
- 롤오버 이미지 만들기
- 이미지 맵 사용
- 이미지 추적 사용
- 이미지 자리 표시 자 사용
- Fireworks HTML 삽입
- Photoshop 파일 삽입
형세
- 포함 된 무료 템포를 사용합니다 * CS5의 새로운 CSS 스타터 레이아웃
- 레이아웃 용 div 삽입
- CSS 스타일 패널에서 div 편집
- 절대 위치 요소 삽입
- 속성 관리자에서 절대 배치 된 요소 서식 지정
- 눈금자, 격자 및 안내선 사용
기울기
- 글 머리 기호 및 번호 매기기 목록 추가
- 목록 글 머리 기호 및 숫자 사용자 지정
테이블
- 표 만들기
- 머리글 행과 열 추가
- 표 셀을 열려면 투명 이미지 를 사용하십시오.
- 고정 너비 및 가변 폭 열 만들기
- 표의 테두리 스타일 변경
- 표 안에 표 삽입하기
- 표 형식 데이터 가져 오기
양식
- 메일 폼 사용
- 양식 동작 정의
- 텍스트, 라디오, 체크 박스, 파일, 이미지, 선택 상자 및 숨겨진 양식 필드 추가
- 필드 세트 및 레이블 필드를 사용하여 양식에 액세스 가능하게 만들기
- 사용자 정의 제출 버튼 만들기
- JavaScript로 양식 유효성 검사 (Spry)
데이터베이스 및 PHP 스크립팅
- 데이터베이스에 사이트 첨부
- PHP / mySQL 사이트 설정
- Spry 요소를 사용하여 데이터베이스에 연결
- 페이지에 데이터 객체 삽입
- Spry 데이터 소스 또는 디스플레이 테스트 및 업데이트
- 디자인 뷰에서 복잡한 동적 사이트 편집
- 동적으로 관련된 모든 파일을 검색하여 PHP CMS 사이트 (WordPress, Joomla 및 Drupal)를 어셈블합니다. * CS5의 새로운 기능
- Zend 프레임 워크와 같은 타사 프레임 워크를 포함한 PHP 코드 용 사용자 정의 클래스 힌트 * CS5의 새로운 기능
프레임
- 프레임이있는 웹 사이트 구축
- noframes 콘텐츠 수정
- 프레임의 서식 및 스타일 지정
- 프레임 간의 기본 링크 대상 설정
상호 작용 추가
- 사진 앨범 제작 (CS5에는 더 이상 제공되지 않음)
- 웹 페이지에 사운드 추가
- 드롭 다운 메뉴 만들기
- Dreamweaver 비헤이비어를 사용하여 팝업 창을 열고, 점프 메뉴를 만들고, 사운드를 재생하고, 이미지를 교환하는 등의 작업을 할 수 있습니다.
- 사이트에 RSS 피드 추가
- 롤오버로 Flash 텍스트 삽입
- 롤오버로 CSS 텍스트 삽입
- 다른 플러그인 삽입
- Spry 메뉴 표시 줄, 탭 패널, 아코디언, 도구 설명 및 접을 수있는 패널 추가
- 위젯 브라우저를 사용하여 자바 스크립트를 알지 않고도 사이트의 새로운 위젯을 찾을 수 있습니다.
페이지 테스트
- 라이브 뷰에서 페이지를 테스트하여 JavaScript 및 상호 작용으로 인한 변경 사항을 확인하십시오. * CS5의 새로운 기능
- HTML 유효성 검사
- 여러 브라우저에서 페이지 미리보기
- 다른 운영 체제에서 페이지를 미리 보려면 BrowserLab을 사용하십시오. * CS5의 새로운 기능
- Device Central을 사용하여 모바일 장치에서 페이지가 어떻게 보이는지 확인하십시오.
- 브라우저 호환성 확인
- 사이트의 작업 요구 사항에 맞게 설정 변경
- 내부 사이트 링크 확인
- 사이트의 접근성 테스트 (CS5에서는 더 이상 사용하지 않음)
- Word 문서를 HTML로 변환
Dreamweaver 사용자 정의
- 확장 기능 추가
- 확장 기능 사용 중지
- 바로 가기로 Dreamweaver 사용자 정의
효율성 향상
- 내장 된 키보드 단축키 사용
- 코드 스 니펫 사용
- 템플릿 만들기 및 사용
- 사용자 지정 템플릿에서 새 페이지 생성
- 템플릿 업데이트
- Dreamweaver 라이브러리와 함께 다른 파일에 하나의 파일 포함
- 라이브러리 항목 업데이트
- SSI를 사용하여 다른 파일에 하나의 파일 포함
- 검색 및 바꾸기 사용