사용 안내서 취소

Fireworks 및 Dreamweaver 작업

검색

마지막 업데이트 날짜 2022년 11월 28일

Dreamweaver

앱 열기

HTML 페이지에서 웹 그래픽을 편집, 최적화 및 삽입하는 워크플로를 효율적으로 만들기 위해 Fireworks와 Dreamweaver를 사용합니다.

참고:

해당 기능은 Adobe Dreamweaver 버전에서 지원되지 않습니다.

Fireworks 이미지 삽입

Dreamweaver와 Fireworks는 링크, 이미지 맵, 표 슬라이스 등에 대한 변경을 포함하여 동일한 파일 편집 절차의 많은 부분을 인식하고 공유합니다. 두 애플리케이션을 함께 사용하면 HTML 페이지에서 웹 그래픽 파일을 편집, 최적화 및 삽입하는 워크플로를 효율적으로 만들 수 있습니다.

[이미지 삽입] 명령을 사용하여 Fireworks에서 내보낸 그래픽을 Dreamweaver 문서에 직접 배치할 수 있으며 Dreamweaver 이미지 자리 표시자를 사용하여 새로운 Fireworks 그래픽을 만들 수도 있습니다.

Dreamweaver 문서에서 이미지를 표시할 위치에 삽입 포인터를 위치시킨 후 다음 중 하나를 수행합니다.
- [삽입] > [이미지]를 선택합니다.
- [삽입] 패널의 [일반] 범주에서 [이미지] 버튼을 클릭하거나 문서로 드래그합니다.
Fireworks에서 내보낸 원하는 파일을 찾아 [확인](Windows) 또는 [열기](Macintosh)를 클릭합니다.

참고:

Fireworks 파일이 현재 Dreamweaver 사이트에 없는 경우 해당 파일을 루트 폴더로 복사할 것인지 묻는 메시지가 나타납니다. [예]를 클릭합니다.

Dreamweaver에서 Fireworks 이미지 또는 표 편집

Fireworks 표의 일부분인 이미지 또는 이미지 슬라이스를 열어서 편집하면 Dreamweaver를 통해 Fireworks가 실행되고 해당 이미지 또는 표가 내보내진 PNG 파일이 열립니다.

참고:

여기서는 PNG 파일에 대한 기본 외부 이미지 편집기로 Fireworks가 설정된 것으로 가정합니다. Photoshop을 JPEG 및 GIF 파일에 대한 기본 편집기로 설정하려는 경우가 많겠지만 Fireworks도 이러한 파일에 대한 기본 편집기로 자주 설정됩니다.

이미지가 Fireworks 표의 일부인 경우  주석이 HTML 코드에 있으면 전체 Fireworks 표를 열어서 편집할 수 있습니다. Dreamweaver 스타일 HTML 및 이미지 설정을 사용하여 Fireworks에서 Dreamweaver 사이트로 소스 PNG 파일을 내보낸 경우 Fireworks 표 주석이 HTML 코드에 자동으로 삽입됩니다.

Dreamweaver에서 속성 관리자가 열려 있지 않으면 [창] > [속성]을 선택하여 엽니다.
이미지 또는 이미지 슬라이스를 클릭하여 선택합니다.

Fireworks에서 내보낸 이미지를 선택하면 속성 관리자는 이 이미지를 Fireworks 이미지나 표로 인식하고 PNG 소스 파일의 이름을 표시합니다.
Fireworks를 시작하여 편집하려면 다음 중 하나를 수행합니다.
- 속성 관리자에서 [편집]을 클릭합니다.
- Ctrl(Windows) 또는 Command(Macintosh)를 누른 상태에서 선택한 이미지를 더블 클릭합니다.
- 선택한 이미지를 마우스 오른쪽 버튼으로 클릭하거나(Windows) Control 키를 누른 상태에서 마우스를 클릭하고(Macintosh), 컨텍스트 메뉴에서 [편집] > [Fireworks]를 선택합니다.
참고:

Fireworks가 소스 파일을 찾지 못할 경우 PNG 소스 파일을 입력하라는 메시지가 표시됩니다. Fireworks 소스 파일로 작업할 경우 변경 내용이 소스 파일과 내보낸 파일 모두에 저장됩니다. 그렇지 않은 경우 내보낸 파일만 업데이트됩니다.
Fireworks에서 소스 PNG 파일을 편집하고 [완료]를 클릭합니다.

Fireworks에서는 변경 내용을 PNG 파일에 저장하고, 업데이트된 이미지(또는 HTML과 이미지)를 내보내고, 포커스를 Dreamweaver로 반환합니다. 업데이트된 이미지 또는 표가 Dreamweaver에 나타납니다.

Dreamweaver와 Fireworks 통합에 대한 튜토리얼은 www.adobe.com/go/vid0188_kr을 참조하십시오.

Dreamweaver에서 Fireworks 이미지 최적화

Dreamweaver를 사용하여 Fireworks 이미지 및 애니메이션을 빠르게 변경할 수 있습니다. Dreamweaver에서는 최적화 설정, 애니메이션 설정, 내보낸 이미지의 크기와 영역 등을 변경할 수 있습니다.

Dreamweaver에서 원하는 이미지를 선택하고 다음 중 하나를 수행합니다.
- [명령] > [이미지 최적화]를 선택합니다.
- 속성 관리자에서 이미지 설정 편집 버튼을 클릭합니다.
[이미지 미리보기] 대화 상자에서 편집을 수행합니다.
- 최적화 설정을 편집하려면 [옵션] 탭을 클릭합니다.
- 내보낸 이미지의 크기와 영역을 편집하려면 [파일] 탭을 클릭합니다.
완료되면 [확인]을 클릭합니다.

Fireworks를 사용하여 Dreamweaver 이미지 자리 표시자 수정

Dreamweaver 문서에서 자리 표시자 이미지를 만든 다음 Fireworks를 시작하여 자리 표시자 이미지를 대체할 그래픽 이미지나 Fireworks 표를 디자인할 수 있습니다.

이미지 자리 표시자에서 새 이미지를 만들려면 시스템에 Dreamweaver와 Fireworks가 모두 설치되어 있어야 합니다.

PNG 파일에 대한 이미지 편집기로 Fireworks를 설정했는지 확인합니다.
[문서] 창에서 이미지 자리 표시자를 클릭하여 선택합니다.
다음 중 하나를 수행하여 [Dreamweaver에서 편집] 모드로 Fireworks를 시작합니다.
- 속성 관리자에서 [생성]을 클릭합니다.
- Ctrl 키(Windows) 또는 Command 키(Macintosh)를 누르고 이미지 자리 표시자를 더블 클릭합니다.
- 이미지 자리 표시자를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Ctrl 키를 누른 채 클릭(Macintosh)한 다음 [Fireworks에서 이미지 생성]를 선택합니다.
Fireworks 옵션을 사용하여 이미지를 디자인합니다.

Fireworks는 Dreamweaver에서 이미지 자리 표시자를 사용하여 작업하는 중에 설정한 이미지 자리 표시자 설정을 인식합니다. 이 설정에는 Fireworks 캔버스 크기와 관련된 이미지 크기, Fireworks에서 소스 파일 및 내보내기 파일에 대한 기본 문서 이름으로 사용하는 이미지 ID 및 텍스트 정렬이 포함됩니다. 또한 Fireworks는 Dreamweaver에서 작업하는 동안 해당 이미지 자리 표시자에 연결한 링크 및 특정 비헤이비어(이미지 교체, 팝업 메뉴, 텍스트 설정 등)를 인식합니다.

참고:

이미지 자리 표시자에 추가한 링크를 Fireworks에서 볼 수 없는 경우에도 링크는 그대로 유지됩니다. Fireworks에서 핫스팟을 그리고 링크를 추가해도 Dreamweaver의 이미지 자리 표시자에 추가한 링크가 삭제되지 않습니다. 하지만 Fireworks에서 새 이미지의 슬라이스를 잘라내면 이미지 자리 표시자를 대체할 때 Dreamweaver 문서의 링크가 삭제됩니다.

이미지 정렬, 색상, V 간격 및 H 간격, 맵 등의 이미지 자리 표시자 설정은 Fireworks에서 인식되지 않으므로 이미지 자리 표시자 속성 관리자에서 비활성화됩니다.
작업을 마친 후 [완료]를 클릭하면 저장할 것인지 묻는 메시지가 표시됩니다.
[다음 위치에 저장] 텍스트 상자에서 Dreamweaver 로컬 사이트 폴더로 정의한 폴더를 선택합니다.

이미지 자리 표시자를 Dreamweaver 문서에 삽입할 때 이름을 지정한 경우 Fireworks의 [파일 이름] 상자는 해당 이름으로 채워집니다. 이름은 변경할 수 있습니다.
[저장]을 클릭하여 PNG 파일을 저장합니다.

[내보내기] 대화 상자가 나타납니다. 이 대화 상자에서 이미지를 GIF 또는 JPEG 파일로 내보내거나 슬라이스 이미지를 HTML과 이미지로 내보냅니다.
[다음 위치에 저장]에서 Dreamweaver 로컬 사이트 폴더를 선택합니다.

[이름] 상자에는 PNG 파일에 사용한 이름이 자동으로 표시됩니다. 이름은 변경할 수 있습니다.
다른 이름으로 저장 유형의 경우 내보낼 파일의 형식으로 [이미지만] 또는 [HTML과 이미지] 등을 선택합니다.
[저장]을 클릭하여 내보낸 파일을 저장합니다.

파일이 저장되고 포커스가 Dreamweaver로 반환됩니다. Dreamweaver 문서에서, 내보낸 파일 또는 Fireworks 표가 이미지 자리 표시자를 대체합니다.

Fireworks 팝업 메뉴 정보

Fireworks를 사용하여 쉽고 빠르게 CSS 기반 팝업 메뉴를 만들 수 있습니다.

확장성 및 다운로드 속도의 향상 외에도 Fireworks로 만든 팝업 메뉴를 사용하여 다음과 같은 이점을 얻을 수 있습니다.

검색 엔진으로 메뉴 항목을 인덱스할 수 있습니다.
화면 판독기에서 메뉴 항목을 읽을 수 있으므로 페이지에 대한 액세스가 보다 용이합니다.
Fireworks에서 생성한 코드는 표준을 준수하며 이에 대한 유효성 검사를 수행할 수 있습니다.
Dreamweaver와 Fireworks 중 하나만 사용하여 Fireworks 팝업 메뉴를 편집할 수 있습니다. Dreamweaver에서 변경한 내용은 Fireworks에서 유지되지 않습니다.

Dreamweaver에서 Fireworks 팝업 메뉴 편집

Fireworks 8 이상에서 팝업 메뉴를 만든 다음 Dreamweaver와 Fireworks(Roundtrip 편집 기능 사용) 중 하나만 사용하여 해당 팝업 메뉴를 편집할 수 있습니다. Dreamweaver에서 메뉴를 편집한 다음 Fireworks에서 편집하면 텍스트 내용을 제외한 이전의 모든 편집 내용이 손실됩니다.

Dreamweaver로 메뉴를 편집하려면 Fireworks를 사용하여 팝업 메뉴를 만든 다음 Dreamweaver만 사용하여 해당 메뉴를 편집하고 사용자 정의합니다.

Fireworks에서 메뉴를 편집하려면 Dreamweaver에서 Roundtrip 편집 기능을 사용하면 됩니다. 이 경우 Dreamweaver에서 직접 메뉴를 편집해서는 안 됩니다.

Dreamweaver에서 팝업 메뉴가 표시된 Fireworks 표를 선택한 다음 속성 관리자에서 [편집]을 클릭합니다.

소스 PNG 파일이 Fireworks에서 열립니다.
Fireworks에서 [팝업 메뉴 편집기]로 메뉴를 편집한 다음 Fireworks 툴바에서 [완료]를 클릭합니다.

편집된 팝업 메뉴는 Fireworks에서 Dreamweaver로 반환됩니다.

Fireworks MX 2004 이하 버전에서 팝업 메뉴를 만든 경우에는 Dreamweaver의 [비헤이비어] 패널에서 [팝업 메뉴 보기] 대화 상자를 열어 편집할 수 있습니다.

Fireworks MX 2004 이하 버전에서 만든 팝업 메뉴 편집

Dreamweaver에서 팝업 메뉴를 트리거하는 핫스팟 또는 이미지를 선택합니다.
[비헤이비어] 패널(Shift+F3)에서 [액션] 목록의 [팝업 메뉴 보기]를 더블 클릭합니다.
[팝업 메뉴] 대화 상자에서 필요한 변경을 수행한 후 [확인]을 클릭합니다.

Fireworks 소스 파일에 대한 실행 및 편집 환경 설정

Fireworks를 사용하여 이미지를 편집하는 경우 Fireworks는 대개 소스 PNG 파일에서 웹 페이지의 이미지를 내보냅니다. Dreamweaver에서 편집하기 위해 이미지 파일을 열면 Fireworks에서 소스 PNG 파일이 자동으로 열리며, 소스 PNG 파일을 찾을 수 없는 경우에는 사용자에게 파일의 위치를 묻습니다. 필요한 경우 삽입된 이미지를 Dreamweaver에서 열도록 Fireworks에서 환경 설정을 하거나, Dreamweaver에서 이미지를 열 때마다 삽입된 이미지 파일이나 Fireworks 소스 파일을 사용할 수 있는 옵션이 Fireworks에 표시되도록 할 수 있습니다.

참고:

Dreamweaver는 몇 가지 경우에만 Fireworks의 실행과 편집 환경 설정을 인식합니다. 특히 Fireworks 표의 일부가 아니고 소스 PNG 파일에 대한 디자인 노트 경로가 올바른 이미지를 열어서 최적화하는 상태에서만 제대로 인식됩니다.

Fireworks에서 [편집] > [환경 설정](Windows) 또는 [Fireworks] > [환경 설정](Macintosh)을 선택한 다음 [실행 및 편집] 탭(Windows)을 클릭하거나 팝업 메뉴에서 [실행 및 편집](Macintosh)을 선택합니다.
외부 애플리케이션에 놓인 Fireworks 이미지를 편집하거나 최적화할 때 사용할 환경 설정 옵션을 지정합니다.

항상 소스 PNG 사용

디자인 노트에 정의된 Fireworks PNG 파일을 배치된 이미지의 소스로 자동으로 엽니다. 소스 PNG 및 이와 일치하는 배치된 이미지가 업데이트됩니다.

소스 PNG 사용 안 함

소스 PNG 파일의 존재 여부와 상관없이 배치된 Fireworks 이미지를 자동으로 엽니다. 배치된 이미지만 업데이트됩니다.

실행할 때 묻기

소스 PNG 파일을 열 것인지 묻는 메시지가 표시됩니다. 이 메시지에서 전체 실행과 편집 환경 설정도 지정할 수 있습니다.

Dreamweaver 문서에 Fireworks HTML 코드 삽입

Fireworks의 [내보내기] 명령을 사용하면 최적화된 이미지와 HTML 파일을 Dreamweaver 사이트 폴더 내의 원하는 위치로 내보내고 저장할 수 있습니다. 그런 다음 해당 파일을 Dreamweaver에 삽입할 수 있습니다. Dreamweaver에서는 Fireworks에서 생성된 HTML 코드를 연결된 이미지, 슬라이스, JavaScript와 함께 문서에 삽입할 수 있습니다.

Dreamweaver 문서에서 Fireworks HTML 코드를 삽입할 위치에 삽입 포인터를 놓습니다.
다음 중 하나를 수행합니다.
- [삽입] > [이미지 오브젝트] > [Fireworks HTML]을 선택합니다.
- [삽입] 패널의 [일반] 범주에서 [이미지] 버튼을 클릭하고 팝업 메뉴에서 [Fireworks HTML 삽입]을 선택합니다.
[검색]을 클릭하여 Fireworks HTML 파일을 선택합니다.
해당 파일을 더 이상 사용하지 않으려면 [파일 삽입 후 삭제]를 선택합니다. 이 옵션을 선택해도 HTML 파일과 연결된 소스 PNG 파일에는 영향을 주지 않습니다.

참고:

HTML 파일이 네트워크 드라이브 상에 있으면 휴지통으로 이동되지 않고 영구적으로 삭제됩니다.
[확인]을 클릭하여 HTML 코드와 함께 관련 이미지, 슬라이스 및 JavaScript를 Dreamweaver 문서에 삽입합니다.

Fireworks HTML 코드를 Dreamweaver에 붙여넣기

Fireworks에서 생성된 이미지와 표를 Dreamweaver에 배치하는 빠른 방법은 Fireworks HTML 코드를 직접 복사하여 Dreamweaver 문서에 붙여넣는 것입니다.

Fireworks HTML 코드를 복사하여 Dreamweaver에 붙여넣기

Fireworks에서 [편집] > [HTML 코드 복사]를 선택합니다.
마법사의 지시에 따라 HTML 및 이미지 내보내기를 설정합니다. 메시지가 표시되면 내보낸 이미지의 대상 폴더로 Dreamweaver 사이트 폴더를 지정합니다.

마법사는 이미지를 지정된 대상으로 내보내고 HTML 코드를 클립보드에 복사합니다.
Dreamweaver 문서에서 HTML 코드를 붙여넣으려는 위치에 삽입 포인터를 놓은 다음 [편집] > [Fireworks HTML 붙여넣기]를 선택합니다.

내보낸 Fireworks 파일과 연결된 모든 HTML 및 JavaScript 코드가 Dreamweaver 문서에 복사되고, 이미지의 링크가 모두 업데이트됩니다.

Fireworks HTML 코드를 Dreamweaver로 내보내고 붙여넣기

Fireworks에서 [파일] > [내보내기]를 선택합니다.
내보낸 이미지의 대상 폴더로 Dreamweaver 사이트 폴더를 지정합니다.
[내보내기] 팝업 메뉴에서 [HTML 및 이미지]를 선택합니다.
[HTML] 팝업 메뉴에서 [클립보드에 복사]를 선택하고 [내보내기]를 클릭합니다.
Dreamweaver 문서에서 내보낸 HTML 코드를 붙여넣으려는 위치에 삽입 포인터를 놓은 다음 [편집] > [Fireworks HTML 붙여넣기]를 선택합니다.

내보낸 Fireworks 파일과 연결된 모든 HTML 및 JavaScript 코드가 Dreamweaver 문서에 복사되고, 이미지의 링크가 모두 업데이트됩니다.

Dreamweaver에 있는 Fireworks HTML 코드 업데이트

Fireworks의 [파일] > [HTML 업데이트] 명령은 Dreamweaver에 있는 Fireworks 파일을 업데이트할 때 실행과 편집 기법 대신 사용할 수 있습니다. Fireworks에서 [HTML 업데이트]를 사용하여 소스 PNG 이미지를 편집한 다음 모든 내보낸 HTML 코드와 Dreamweaver 문서에 있는 이미지 파일을 자동으로 업데이트할 수 있습니다. Dreamweaver가 실행 중이 아닌 경우에도 이 명령을 사용하여 Dreamweaver 파일을 업데이트할 수 있습니다.

Fireworks에서 소스 PNG 파일을 열어 편집을 수행합니다.
[파일] > [저장]을 선택합니다.
Fireworks에서 [파일] > [HTML 업데이트]를 선택합니다.
업데이트할 HTML이 포함된 Dreamweaver 파일로 이동한 다음 [열기]를 클릭합니다.
업데이트된 이미지 파일을 배치할 대상 폴더 위치로 이동하여 [선택](Windows) 또는 [선택](Macintosh)을 클릭합니다.

Fireworks가 Dreamweaver 문서의 HTML과 JavaScript 코드를 업데이트합니다. 또한 HTML과 연결되어 업데이트된 이미지를 내보내고, 지정된 대상 폴더에 이미지를 놓습니다.

Fireworks에서 업데이트할 대응되는 HTML 코드를 찾지 못하면 Dreamweaver 문서에 새 HTML 코드를 삽입할 수 있는 옵션을 제공합니다. Fireworks는 새 코드의 JavaScript 부문은 문서의 시작 부분에 놓고, 이미지의 링크나 HTML 표는 마지막에 놓습니다.

웹 포토 앨범 만들기

웹 포토 앨범 만들기 기능은 Dreamweaver CS5부터 더 이상 사용되지 않습니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?