Adobe Dreamweaver를 사용하는 방법

Adobe Dreamweaver는 웹 디자이너를 위한 매우 강력한 도구입니다. Adobe Dreamweaver로 할 수 있는 작업이 너무 많기 때문입니다. 물론, 당신이 할 수 있는 모든 일들이 배우기 어렵게 만듭니다. 최신 버전인 CS5의 변경 사항을 포함하여 Dreamweaver에서 수행할 수 있는 여러 가지 작업에 대해 알아보십시오. 그리고 다음 사항을 확인하는 것을 잊지 마십시오. Dreamweaver CS5에서 누락.

사이트 정의

• 새 웹사이트 시작
• 웹사이트 만들기
• 사이트에서 필요한 부분만 필요할 때 설정하세요. *CS5의 새로운 기능
• 보다 완전한 워크플로를 위해 원격, QA 및 테스트 서버 설정 *CS5의 새로운 기능
• 새 디렉토리 생성 및 게시
• 문서 유형 변경
• 페이지에 메타 데이터 포함

귀하의 사이트를 라이브로 만들기

• 원격 사이트 정의
• 웹 서버에 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 편집
• 절대 위치 요소 삽입
• 속성 관리자에서 절대 위치 요소 서식 지정
• 눈금자, 격자 및 안내선 사용

기울기

• 글머리 기호 및 번호 매기기 목록 추가
• 목록 글머리 기호 및 번호 사용자 지정

테이블

• 테이블 만들기
• 머리글 행 및 열 추가
• 사용하다 투명한 이미지 테이블 셀을 열어 두려면
• 고정 너비 및 유연한 너비 열 만들기
• 표의 테두리 스타일 변경
• 테이블 안에 테이블 포함
• 테이블 형식 데이터 가져오기

양식

• mailto 형식 사용
• 양식 작업 정의
• 텍스트, 라디오, 확인란, 파일, 이미지, 선택 상자 및 숨겨진 양식 필드 추가
• fieldset 및 레이블 필드를 사용하여 양식에 액세스 가능하게 만들기
• 사용자 지정 제출 버튼 만들기
• JavaScript(Spry)로 양식 유효성 검사

데이터베이스 및 PHP 스크립팅

• 사이트를 데이터베이스에 연결
• PHP/mySQL 사이트 설정
• Spry 요소를 사용하여 데이터베이스에 연결
• 페이지에 데이터 개체 삽입
• Spry 데이터 원본 또는 디스플레이 테스트 및 업데이트
• 디자인 보기에서 복잡한 동적 사이트 편집
• PHP CMS 사이트(WordPress, Joomla 및 Drupal)를 조합하기 위해 동적으로 관련된 모든 파일을 검색합니다. *CS5의 새로운 기능
• Zend 프레임워크와 같은 타사 프레임워크를 포함하여 PHP 코드에 대한 사용자 정의 클래스 힌트 *CS5의 새로운 기능

프레임

• 프레임 웹사이트 구축
• 노프레임 콘텐츠 편집
• 프레임 서식 지정 및 스타일 지정
• 프레임 간의 기본 링크 대상 설정

상호 작용 추가

• 사진 앨범 만들기(더 이상 CS5에 없음)
• 웹 페이지에 사운드 추가
• 드롭다운 메뉴 만들기
• Dreamweaver 비헤이비어를 사용하여 팝업 창 열기, 점프 메뉴 만들기, 사운드 재생, 이미지 교체 등
• 사이트에 RSS 피드 추가
• Flash 텍스트를 롤오버로 삽입
• 롤오버로 CSS 텍스트 삽입
• 다른 플러그인 삽입
• Spry 메뉴 모음, 탭 패널, 아코디언, 도구 설명 및 접을 수 있는 패널 추가
• JavaScript를 몰라도 위젯 브라우저를 사용하여 사이트에 대한 새 위젯 찾기

페이지 테스트

• 라이브 뷰에서 페이지를 테스트하여 JavaScript 및 상호 작용으로 인한 변경 사항 확인 *CS5의 새로운 기능
• HTML 확인
• 여러 브라우저에서 페이지 미리보기
• BrowserLab을 사용하여 다른 운영 체제에서 페이지 미리보기 *CS5의 새로운 기능
• Device Central을 사용하여 모바일 장치에서 페이지가 어떻게 보이는지 확인
• 브라우저 호환성 확인
• 사이트에서 작업해야 하는 항목과 일치하도록 설정을 변경합니다.
• 내부 사이트 링크 확인
• 사이트의 접근성 테스트(CS5에서는 더 이상 지원되지 않음)
• 변환 워드 문서 HTML로

Dreamweaver 사용자화

• 확장 프로그램 추가
• 확장 프로그램 비활성화
• 단축키로 Dreamweaver 사용자화

효율성 증대

• 내장 키보드 단축키 사용
• 코드 조각 사용
• 템플릿 생성 및 사용
• 사용자 정의 템플릿에서 새 페이지 생성
• 템플릿 업데이트
• Dreamweaver 라이브러리를 사용하여 한 파일을 다른 파일에 포함
• 라이브러리 항목 업데이트
• SSI를 사용하여 한 파일을 다른 파일에 포함
• 검색 및 바꾸기 사용