- Dreamweaver 사용 안내서
- 소개
- Dreamweaver 및 Creative Cloud
- Dreamweaver 작업 영역 및 보기 옵션
- 사이트 설정
- 파일 관리
- 레이아웃 및 디자인
- CSS
- 페이지 내용 및 에셋
- 페이지 속성 설정
- CSS 머리글 속성 및 CSS 링크 속성 설정
- 텍스트 작업
- 텍스트, 태그, 속성 찾기 및 바꾸기
- DOM 패널
- 라이브 뷰에서 편집
- Dreamweaver에서 문서 인코딩
- 문서 창에서 요소 선택 및 보기
- 속성 관리자에서 텍스트 속성 설정
- 웹 페이지 맞춤법 검사
- Dreamweaver에서 가로줄 사용
- Dreamweaver에서 글꼴 조합 추가 및 수정
- 에셋을 사용하여 작업
- Dreamweaver에서 날짜 삽입 및 업데이트
- Dreamweaver에서 즐겨찾기 에셋 만들기 및 관리
- Dreamweaver에서 이미지 삽입 및 편집
- 미디어 오브젝트 추가
- Dreamweaver에서 비디오 추가
- HTML5 비디오 삽입
- SWF 파일 삽입
- 오디오 효과 추가
- Dreamweaver에서 HTML5 오디오 삽입
- 라이브러리 항목을 사용하여 작업
- Dreamweaver에서 아랍어 및 히브리어 텍스트 사용
- 링크 및 내비게이션
- jQuery 위젯 및 효과
- 웹 사이트 코딩
- Dreamweaver에서의 코딩 정보
- Dreamweaver의 코딩 환경
- 코딩 환경 설정
- 코드 색상 표시 맞춤 설정
- 코드 작성 및 편집
- 코드 힌트 및 코드 완성
- 코드 축소 및 확장
- 스니펫으로 코드 재사용
- 코드 린트
- 코드 최적화
- 디자인 뷰에서 코드 편집
- 페이지의 헤드 내용 작업
- Dreamweaver에 서버측 포함 삽입
- Dreamweaver에서 태그 라이브러리 사용
- Dreamweaver에 사용자 정의 태그 가져오기
- JavaScript 비헤이비어 사용(일반 지침)
- 빌트인 JavaScript 비헤이비어 적용
- XML 및 XSLT 정보
- Dreamweaver에서 서버측 XSL 변환 수행
- Dreamweaver에서 클라이언트측 XSL 변환 수행
- Dreamweaver에서 XSLT의 문자 엔티티 추가
- 코드 서식 지정
- 제품 간 워크플로
- 템플릿
- Dreamweaver 템플릿 정보
- 템플릿 및 템플릿 기반 문서 인식
- Dreamweaver 템플릿 만들기
- 템플릿에서 편집 가능 영역 만들기
- Dreamweaver에서 반복 영역 및 표 만들기
- 템플릿의 옵션 영역 사용
- Dreamweaver에서 편집 가능 태그 속성 정의
- Dreamweaver에서 중첩 템플릿을 만드는 방법
- 템플릿 편집, 업데이트 및 삭제
- Dreamweaver에서 xml 내용 내보내기 및 가져오기
- 기존 문서에서 템플릿 적용 또는 제거
- Dreamweaver 템플릿의 내용 편집
- Dreamweaver에서 템플릿 태그에 대한 구문 규칙
- 템플릿 영역의 강조 표시 환경 설정
- Dreamweaver에서 템플릿 사용 시 이점
- 모바일 및 멀티스크린
- 다이내믹 사이트, 페이지 및 웹 양식
- 웹 애플리케이션 이해
- 애플리케이션 개발용 컴퓨터 설정
- 데이터베이스 연결 문제 해결
- Dreamweaver에서 연결 스크립트 제거
- 다이내믹 페이지 디자인
- 다이내믹 콘텐츠 소스 개요
- 다이내믹 콘텐츠의 소스 정의
- 페이지에 다이내믹 콘텐츠 추가
- Dreamweaver에서 다이내믹 콘텐츠 변경
- 데이터베이스 레코드 표시
- Dreamweaver에서 라이브 데이터 제공 및 문제 해결
- Dreamweaver에서 사용자 정의 서버 비헤이비어 추가
- Dreamweaver를 사용하여 양식 구성
- 양식을 사용하여 사용자 정보 수집
- Dreamweaver에서 ColdFusion 양식 작성 및 활성화
- 웹 양식 제작
- 양식 요소를 위한 HTML5 지원 개선
- Dreamweaver를 사용하여 양식 개발
- 애플리케이션의 시각적 구성
- 웹 사이트 테스트, 미리보기 및 게시
- 문제 해결
Dreamweaver 웹 페이지에서 미디어 오브젝트를 삽입 및 편집하고 디자인 노트를 사용하는 방법 등에 대해 학습합니다.
Dreamweaver 문서에서 SWF 및 FLV 파일 외에도 다른 오디오 또는 비디오 오브젝트를 삽입할 수 있습니다. 미디어 오브젝트와 함께 액세스 가능성 속성을 삽입한 경우 HTML 코드에서 해당 액세스 가능성 속성 값을 설정하고 편집할 수 있습니다.
-
문서 창에서 오브젝트를 삽입하려는 위치에 삽입 포인터를 놓습니다.
-
다음 중 하나를 수행하여 오브젝트를 삽입합니다.
삽입 패널의 HTML 범주에서 삽입할 오브젝트의 유형에 해당하는 아이콘을 선택합니다.
[삽입] > [HTML] 하위 메뉴에서 해당 오브젝트를 선택합니다.
미디어 오브젝트의 소스 파일을 선택하고 특정 매개 변수를 지정할 수 있는 대화 상자가 나타납니다.
참고:이러한 대화 상자가 나타나지 않게 하려면 [편집] > [환경 설정] > [일반](Windows) 또는 [Dreamweaver] > [환경 설정] > [일반](Macintosh)을 선택한 다음 [오브젝트 삽입 시 대화 상자 보기] 옵션의 선택을 취소합니다. 대화 상자를 표시하는 모든 환경 설정을 무시하려면 오브젝트를 삽입하는 동안 Control 키(Windows) 또는 Option 키(Macintosh)를 누릅니다.
-
[파일 선택] 대화 상자에서 필요한 작업을 끝내고 [확인]을 클릭합니다.참고:
[액세스 가능성] 대화 상자는 [편집] > [환경 설정] 대화 상자에서 미디어를 삽입할 때 속성을 표시하도록 선택한 경우 나타납니다.
-
액세스 가능성 속성을 설정합니다.참고:
오브젝트를 선택하고 코드 보기에서 HTML 코드를 편집하거나 마우스 오른쪽 버튼으로 클릭(Windows) 또는 Control 키를 누른 상태에서 마우스로 클릭(Macintosh)한 후 [태그 코드 편집]을 선택하여 미디어 오브젝트의 속성을 편집할 수 있습니다.
제목
미디어 오브젝트의 제목을 입력합니다.
액세스 키
텍스트 상자에 브라우저에서 해당 양식 오브젝트를 선택하는 데 사용할 키보드의 키(한 문자)를 입력합니다. 이렇게 하면 사이트 방문자는 선택 키와 함께 Ctrl 키(Windows)를 사용하여 오브젝트에 액세스할 수 있습니다. 예를 들어 선택 키로 B를 입력했으면 Ctrl+B 키를 눌러 브라우저에서 오브젝트를 선택할 수 있습니다.
탭 인덱스
양식 오브젝트의 탭 순서 번호를 입력합니다. 페이지에 Tab 키를 눌러 이동할 수 있는 링크 및 양식 오브젝트가 여러 개 있고 이러한 항목 사이에 특정 이동 순서가 필요한 경우에 탭 순서를 설정하면 편리합니다. 오브젝트에 대한 탭 순서를 설정할 때 순서에서 누락되는 오브젝트가 없도록 하십시오.
-
[확인]을 클릭하여 미디어 오브젝트를 삽입합니다.참고:
[취소]를 클릭할 경우 문서에 미디어 오브젝트 자리 표시자는 나타나지만 Dreamweaver에서 액세스 가능성 태그나 속성을 이 미디어 오브젝트에 연결하지는 않습니다.
소스 파일을 지정하거나 치수, 기타 매개 변수 및 속성을 설정하려면 각 오브젝트의 속성 관리자를 사용합니다. 오브젝트의 액세스 가능성 속성을 편집할 수 있습니다.
미디어 파일용 외부 편집기 시작
Dreamweaver에서 외부 편집기를 실행하여 대부분의 미디어 파일을 편집할 수 있습니다. Dreamweaver에서 파일 편집 시 실행할 편집기를 지정할 수도 있습니다.
-
시스템에서 미디어 파일 유형과 편집기가 연결되어 있는지 확인합니다.
파일 유형과 연결된 편집기를 확인하려면 Dreamweaver에서 [편집] > [환경 설정]을 선택한 다음 [범주] 목록에서 [파일 유형/편집기]를 선택합니다. [확장명] 열에서 파일 확장명을 클릭한 다음 [편집기] 열에서 해당 파일 유형과 연결된 편집기를 확인합니다. 파일 유형과 연결된 편집기를 변경할 수 있습니다.
-
파일 패널에서 미디어 파일을 더블 클릭하여 외부 편집기에서 파일을 엽니다.
파일 패널에서 파일을 더블 클릭했을 때 시작되는 편집기를 기본 편집기라고 합니다. 이미지 파일을 더블 클릭하면 Dreamweaver에서는 Adobe Fireworks 같은 기본 외부 이미지 편집기에서 해당 파일을 엽니다.
-
기본 외부 편집기를 사용하고 싶지 않으면 다음 중 하나를 수행하여 시스템의 다른 편집기를 사용할 수 있습니다.
파일 패널에서 파일 이름을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Ctrl 키를 누른 상태에서 마우스로 클릭(Macintosh)한 다음 컨텍스트 메뉴에서 열기를 선택합니다.
디자인 뷰에서 현재 페이지 내의 미디어 요소를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Ctrl 키를 누른 상태에서 마우스로 클릭(Macintosh)한 다음 컨텍스트 메뉴에서 [편집]을 선택합니다.
Dreamweaver에서 시작할 편집기 지정하기
Dreamweaver에서 파일 유형을 편집할 때 사용할 편집기를 지정하고 Dreamweaver가 인식하는 파일 유형을 추가 또는 삭제할 수 있습니다.
지정한 파일 유형에 대한 외부 편집기 지정하기
-
[편집] > [환경 설정]을 선택한 다음 [범주] 목록에서 [파일 유형/편집기]를 선택합니다.
.gif, .wav, .mpg와 같은 파일 이름 확장명이 왼쪽의 [확장명] 아래에 나열됩니다. 선택된 확장명과 연결된 편집기가 오른쪽의 [편집기] 아래에 나열됩니다.
-
[확장명] 목록에서 파일 유형 확장명을 선택하고 다음 중 하나를 수행합니다.
파일 유형에 새 편집기를 연결하려면 [편집기] 목록 위에 있는 플러스(+) 버튼을 클릭한 다음 나타난 대화 상자를 완료합니다.
예를 들어 파일 유형에 Acrobat을 연결하려면 Acrobat 아이콘을 선택합니다.
편집기를 파일 유형에 대한 기본 편집기로 만들어 파일 패널에서 해당 파일 유형을 클릭할 때 해당 편집기가 열리도록 하려면 [편집기] 목록에서 편집기를 선택하고 [기본 편집기로 지정]을 클릭합니다.
파일 유형과 편집기의 연결을 해제하려면 [편집기] 목록에서 해당 편집기를 선택하고 [편집기] 목록 위에 있는 마이너스(-) 버튼을 클릭합니다.
새 파일 유형 및 연결된 편집기 추가하기
-
[확장명] 목록 위에 있는 플러스(+) 버튼을 클릭하고 파일 유형 확장명(확장명 시작 부분의 마침표 포함)을 입력합니다. 확장명을 여러 개 입력할 때는 공백으로 구분합니다.
예를 들어 .xml 및 .xsl 확장명을 시스템에 설치된 XML 편집기와 연결하려면 .xml .xsl과 같이 입력합니다.
-
[편집기] 목록 위에 있는 플러스(+) 버튼을 클릭한 다음 나타난 대화 상자를 완료하여 해당 파일 유형에 대한 편집기를 선택합니다.
파일 유형 제거하기
-
[확장명] 목록에서 파일 유형을 선택하고 [확장명] 목록 위에 있는 마이너스(-) 버튼을 클릭합니다.참고:
파일 유형을 제거한 후에는 취소할 수 없으므로 정말로 제거할 것인지 다시 한 번 확인하십시오.
미디어 오브젝트에 디자인 노트 사용하기
Dreamweaver의 다른 오브젝트처럼, 미디어 오브젝트에도 디자인 노트를 추가할 수 있습니다. 디자인 노트는 특정 파일과 연결된 노트로 별도의 파일에 저장됩니다. 디자인 노트를 사용하면 이미지 소스 파일의 이름과 파일 상태에 대한 주석 등 문서와 관련된 기타 파일 정보를 추적할 수 있습니다.
-
문서 창의 오브젝트를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Ctrl 키를 누른 상태에서 마우스로 클릭(Macintosh)합니다.참고:
오브젝트에 디자인 노트를 추가하려면 먼저 사이트를 정의해야 합니다.
-
컨텍스트 메뉴에서 [페이지]에 대한 [디자인 노트]를 선택합니다.
-
디자인 노트에 원하는 정보를 입력합니다.참고:
또는 파일을 선택하고 컨텍스트 메뉴를 표시한 다음 컨텍스트 메뉴에서 [디자인 노트]를 선택하여 파일 패널의 미디어 오브젝트에 디자인 노트를 추가할 수도 있습니다.
FLV가 아닌 비디오 추가
다양한 방법과 형식을 사용하여 웹 페이지에 비디오를 추가할 수 있습니다. 비디오는 사용자 시스템에 다운로드되거나 스트리밍 방식을 통해 다운로드되는 동안 재생될 수도 있습니다.
-
클립을 사이트 폴더에 배치합니다.
대부분 AVI 또는 MPEG 파일 유형의 클립을 사용합니다.
-
페이지에 클립에 대한 링크를 만들거나 클립을 포함시킵니다.
클립에 대한 링크를 만들려면 "클립 다운로드"와 같은 링크 텍스트를 입력한 다음 이 텍스트를 선택하고 속성 관리자에서 폴더 아이콘을 클릭합니다. 비디오 파일을 찾아 선택합니다.
참고:일반 스트리밍 형식 파일을 보려면 이 형식을 지원하는 Real Media, QuickTime, Windows Media와 같은 보조 애플리케이션(플러그인)을 다운로드해야 합니다.
플러그인 내용 삽입
브라우저 플러그인용 QuickTime 동영상과 같은 내용을 만든 다음 Dreamweaver를 사용하여 이 내용을 HTML 문서에 삽입할 수 있습니다. 일반적인 플러그인으로는 RealPlayer와 QuickTime 등이 있으며, 일부 내용 파일은 mp3와 QuickTime 동영상을 포함하고 있습니다.
브라우저 플러그인을 사용하는 동영상 및 애니메이션은 문서 창의 디자인 뷰에서 바로 미리 볼 수 있습니다. 모든 플러그인 요소를 한번에 재생하여 페이지가 사용자에게 어떻게 보이는지 확인할 수도 있고, 각각을 개별적으로 재생하여 올바른 미디어 요소가 포함되었는지 확인할 수도 있습니다.
ActiveX 컨트롤을 사용하는 동영상이나 애니메이션은 미리 볼 수 없습니다.
플러그인 내용을 삽입했으면 속성 관리자를 사용하여 해당 내용의 매개 변수를 설정합니다. 속성 관리자에서 다음 속성을 보려면 플러그인 오브젝트를 선택합니다.
속성 관리자는 먼저 가장 일반적으로 사용되는 속성을 표시합니다. 모든 속성을 보려면 오른쪽 아래 모서리의 확장 화살표를 클릭합니다.
플러그인 내용 삽입 및 속성 설정
-
문서 창의 디자인 뷰에서 내용을 삽입할 위치에 삽입 포인터를 놓고 다음 중 하나를 수행합니다.
[삽입] 패널의 [일반] 범주에서 [미디어] 버튼을 클릭하고 메뉴에서 [플러그인] 아이콘 을 선택합니다.
[삽입] > [미디어] > [플러그인]을 선택합니다.
-
나타난 대화 상자에서 플러그인용 내용 파일을 선택하고 [확인]을 클릭합니다.
-
속성 관리자에서 플러그인 옵션을 설정합니다.
이름
스크립트 작업 시 플러그인을 식별하기 위한 이름을 지정합니다. 속성 관리자의 맨 왼쪽에 있는 레이블 없는 텍스트 상자에 이름을 입력합니다.
W 및 H
페이지에 있는 오브젝트의 폭과 높이를 픽셀 단위로 지정합니다.
소스
소스 데이터 파일을 지정합니다. 폴더 아이콘을 클릭하여 파일을 찾거나 파일 이름을 입력합니다.
플러그인 URL
pluginspace 속성의 URL을 지정합니다. 사용자가 플러그인을 다운로드할 수 있는 사이트의 전체 URL을 입력합니다. 페이지를 방문한 사용자에게 플러그인이 없을 경우 브라우저는 이 URL에서 플러그인을 다운로드합니다.
정렬
오브젝트가 페이지에서 정렬되는 방식을 결정합니다.
V 간격과 H 간격
플러그인의 위, 아래, 양쪽 측면의 공백을 픽셀 수로 지정합니다.
테두리
플러그인 주위에 나타나는 테두리의 폭을 지정합니다.
매개 변수
플러그인에 전달할 매개 변수를 추가로 입력할 수 있는 대화 상자를 엽니다. 많은 플러그인이 특정 매개 변수에 응답합니다.
[속성] 버튼을 클릭하여 선택된 플러그인에 할당되어 있는 속성을 볼 수도 있습니다. 이 대화 상자에서 폭 및 높이와 같은 속성을 편집, 추가 및 삭제할 수 있습니다.
문서 창에서 플러그인 내용 재생
-
이전 단원에서 설명한 메서드 중 하나를 사용하여 미디어 요소를 하나 이상 삽입합니다.
-
다음 중 하나를 수행합니다.
삽입한 미디어 요소 중 하나를 선택한 다음 [보기] > [플러그인] > [재생]을 선택하거나 속성 관리자의 [재생] 버튼을 클릭합니다.
[보기] > [플러그인] > [모두 재생]을 선택하면 선택된 페이지에서 해당 플러그인을 사용하는 모든 미디어 요소가 재생됩니다.
참고:[모두 재생]은 현재 문서에만 적용됩니다. 예를 들어 프레임세트의 다른 문서에는 적용되지 않습니다.
플러그인 내용 재생 중단하기
-
미디어 요소를 선택하고 [보기] > [플러그인] > [정지]를 선택하거나 속성 관리자의 [정지] 버튼을 클릭합니다.
[보기] > [플러그인] > [모두 중지]를 선택하여 재생 중인 모든 플러그인 내용을 중단할 수도 있습니다.
플러그인 문제 해결
문서 창의 플러그인 내용 재생 단계를 따랐는데도 플러그인 내용이 제대로 재생되지 않는 경우 다음을 시도하십시오.
연결된 플러그인이 컴퓨터에 설치되어 있는지, 내용이 현재 설치되어 있는 플러그인 버전과 호환되는지 확인합니다.
Configuration/Plugins/UnsupportedPlugins.txt 파일을 텍스트 편집기에서 열어 문제를 일으키는 플러그인이 나열되어 있는지 확인합니다. 이 파일에는 Dreamweaver에서 문제를 일으키기 때문에 지원되지 않는 플러그인 목록이 기록되어 있습니다. 특정 플러그인이 문제를 일으킬 경우 이 파일에 추가하는 것이 좋습니다.
메모리가 충분한지 확인합니다. 일부 플러그인은 실행 시 추가로 2 ~ 5MB 정도의 메모리가 필요합니다.
비헤이비어를 사용하여 미디어 조절
비헤이비어를 페이지에 추가하여 여러 미디어 오브젝트를 시작하고 중단할 수 있습니다.
Shockwave 또는 Flash 조절
Shockwave 동영상이나 SWF 파일에서 프레임 재생, 중단, 되감기, 이동 등의 작업을 수행합니다.
사운드 재생
사운드를 재생할 수 있습니다. 예를 들어 마우스 포인터를 링크 위로 이동할 때마다 사운드 효과를 재생할 수 있습니다.
플러그인 확인
사이트 방문자의 컴퓨터에 필요한 플러그인이 설치되어 있는지 확인하고, 올바른 플러그인이 설치되어 있는지에 따라 각각 다른 URL로 이동시킬 수 있습니다. [플러그인 확인] 비헤이비어는 ActiveX 컨트롤을 확인하지 않으므로 플러그인에만 적용됩니다.
매개 변수를 사용하여 미디어 오브젝트 조절
SWF 파일 및 플러그인을 제어할 수 있는 특정 매개 변수를 정의합니다. 매개 변수는 object, embed 및 applet 태그에 사용됩니다. 매개 변수는 오브젝트 유형에 따라 다른 속성을 설정합니다. 예를 들어 SWF 파일에서 object 태그에 대한 quality 매개 변수 <paramname="quality"value="best">를 사용할 수 있습니다. [매개 변수] 대화 상자는 속성 관리자에서 사용할 수 있습니다. 오브젝트에 필요한 매개 변수에 대한 정보는 해당 오브젝트에 대한 설명서를 참조하십시오.
ActiveX 컨트롤의 데이터 파일 식별에 널리 사용되고 있는 표준은 없습니다. 어떤 매개 변수를 사용해야 하는지 확인하려면 사용하고 있는 ActiveX 컨트롤의 설명서를 참조하십시오.
매개 변수의 이름 및 값 입력하기
-
문서 창에서 매개 변수를 가질 수 있는 오브젝트를 선택합니다.
-
속성 관리자가 열려 있지 않으면 속성 관리자를 열고 아래쪽에 있는 [매개 변수] 버튼을 클릭합니다. 속성 관리자가 확장되어 있어야 합니다.
-
플러스(+) 버튼을 클릭하고 해당 열에 매개 변수 이름과 값을 입력합니다.
매개 변수 제거하기
-
매개 변수를 선택하고 마이너스(-) 버튼을 누릅니다.
매개 변수 재배열하기
-
매개 변수를 선택하고 위쪽 또는 아래쪽 화살표 버튼을 사용합니다.