그래픽이나 문서가 최적화되면 원래 파일 유형에 따라 이를 내보내거나 저장할 수 있습니다.
문서를 GIF, JPEG 또는 다른 그래픽 파일 형식의 단일 이미지로 내보내거나 저장할 수 있습니다. 전체 문서를 HTML 파일 및 연관된 이미지 파일로 내보내거나, 선택한 슬라이스 또는 지정된 영역만 내보낼 수도 있습니다. 그 외에도 Fireworks 상태와 레이어를 별도의 이미지 파일로 내보낼 수 있습니다.
Fireworks에서 파일을 내보내는 기본 위치는 다음과 같은 순서로 결정됩니다.
-
새 문서나 이미지가 운영 체제에 저장되는 기본 위치
반면에 Fireworks에서 문서를 저장하는 기본 위치는 다른 기준으로 결정됩니다. 자세한 내용은 Fireworks 파일 저장을 참조하십시오.
-
[내보내기] 팝업 메뉴에서 [이미지만]을 선택하고 [현재 페이지만] 확인란을 선택하거나 선택 취소합니다. 페이지는 [최적화] 패널에서 설정한 이미지 형식으로 내보내집니다.
[내보내기] 팝업 메뉴에서 [페이지를 파일로]를 선택하고 [다른 이름으로 내보내기] 팝업 메뉴에서 [이미지]를 선택합니다. 페이지는 [최적화] 패널에서 설정한 이미지 형식으로 내보내집니다.
[내보내기] 팝업 메뉴에서 [페이지를 파일로]를 선택하고 [다른 이름으로 내보내기] 팝업 메뉴에서 [Fireworks PNG]를 선택합니다. 각 페이지는 Fireworks 8과 이전 버전 호환되는 별도의 PNG 파일로 내보내집니다.
참고:
선택한 형식으로 모든 페이지를 내보내려면 페이지를 모두 선택한 다음 설정을 최적화합니다.
기존 이미지를 Fireworks에서 열어 작업하는 경우에는 이미지를 내보내는 대신 저장할 수 있습니다. 자세한 내용은 다른 형식으로 문서 저장을 참조하십시오.
참고:
문서 내의 특정 이미지만 내보내려면 먼저 문서를 슬라이스한 후 원하는 슬라이스만 내보내야 합니다.
기본적으로 슬라이스된 Fireworks 문서를 내보내면 HTML 파일과 관련 이미지가 내보내집니다. 내보낸 HTML 파일은 웹 브라우저에서 보거나 추가 편집을 위해 다른 응용 프로그램으로 가져올 수 있습니다.
내보내기 전에 [HTML 설정] 대화 상자에서 적절한 HTML 스타일이 선택되어 있는지 확인하십시오. HTML 내보내기 옵션 설정을 참조하십시오.
슬라이스된 문서를 이미 내보낸 후 Fireworks에서 원본 문서를 변경한 경우에는 변경된 이미지나 슬라이스만 업데이트할 수 있습니다. 교체 슬라이스를 찾기 쉽도록 슬라이스에 사용자 정의 이름을 지정합니다.
Flash SWF 또는 Fireworks PNG(내보내기 필요 없음)
애니메이션을 Flash로 가져오기 위해 SWF 파일로 내보냅니다. 또는 Fireworks PNG 소스 파일을 직접 Flash로 가져와서 내보내기 단계를 건너뛸 수도 있습니다. 이러한 직접적인 방법을 사용하면 애니메이션의 모든 레이어와 상태를 가져온 후 Flash에서 추가로 편집할 수 있습니다. Flash 사용을 참조하십시오.
여러 파일
애니메이션 상태나 레이어를 여러 파일로 내보내는 기능은 같은 객체에 대해 여러 레이어에 많은 심볼이 있는 경우에 유용합니다. 예를 들어, 회사 이름의 각 글자가 그래픽으로 애니메이션화되는 경우 배너 광고를 여러 파일로 내보낼 수 있습니다. 상태나 레이어를 여러 파일로 내보내기를 참조하십시오.
문서에 둘 이상의 애니메이션이 있으면 슬라이스를 삽입하고 반복 및 상태 지연 등 애니메이션 설정을 다르게 지정하여 각 애니메이션을 내보낼 수 있습니다.
Fireworks에서는 [최적화] 패널에 지정된 최적화 설정을 사용하여 문서의 각 레이어나 상태를 별도의 이미지 파일로 내보낼 수 있습니다. 내보내는 각 파일의 파일 이름은 레이어나 상태의 이름에 의해 결정됩니다. 이 내보내기 방법은 애니메이션을 내보내는 데에도 사용됩니다.
다르게 지정하지 않는 한 슬라이스된 Fireworks 문서를 내보내면 HTML 파일과 이미지가 내보내집니다. Fireworks에서 HTML을 내보내는 방법을 정의하려면 [HTML 설정] 대화 상자를 사용합니다.
Fireworks에서는 대부분의 웹 브라우저와 HTML 편집기에서 읽을 수 있는 완전한 HTML을 생성합니다. 기본적으로 내보내기는 UTF-8 인코딩을 지정합니다.
Fireworks HTML을 내보내는 방법에는 여러 가지가 있습니다.
HTML 파일을 내보냅니다. 이렇게 하면 나중에 HTML 편집기에서 해당 파일을 열어 편집할 수 있습니다.
Fireworks 파일의 각 페이지를 별개의 HTML 파일로 내보냅니다.
Fireworks에서 HTML 코드를 클립보드에 복사한 다음 해당 코드를 기존 HTML 문서에 직접 붙여넣습니다.
HTML 파일을 내보낸 다음 이 파일을 HTML 편집기에서 열고 파일에서 코드 부분을 수동으로 복사하여 다른 HTML 문서에 붙여넣습니다.
HTML을 CSS(Cascading Style Sheet) 레이어 및 XHTML로 내보냅니다.
[HTML 업데이트] 명령을 사용하여 이전에 만든 HTML 파일을 변경합니다.
Fireworks에서는 HTML을 일반, Dreamweaver, Microsoft® FrontPage® 및 Adobe GoLive® 형식으로 내보낼 수 있습니다.
주의: Adobe Dreamweaver는 Fireworks와 긴밀하게 통합되어 있습니다. Fireworks에서 Dreamweaver로 HTML을 내보내는 방법은 Fireworks에서 다른 HTML 편집기로 내보내는 방법과 다릅니다. Fireworks HTML을 Dreamweaver로 내보내려는 경우 Dreamweaver 사용을 참조하십시오.
Fireworks HTML을 다른 응용 프로그램으로 내보내는 방법은 팀 환경에서 작업할 경우에 적합합니다. 이 방법을 사용하면 한 사용자가 한 응용 프로그램에서 작업을 수행하고 나중에 다른 사용자가 다른 응용 프로그램을 사용하여 작업을 인수할 수 있도록 작업 흐름이 구분됩니다.
문서에 상호 작용 요소가 포함되어 있는 경우 슬라이스된 이미지와 JavaScript 코드를 재구성하는 데 필요한 HTML 코드가 생성됩니다. Fireworks HTML은 내보내는 이미지에 대한 링크를 포함하며 웹 페이지 배경색을 캔버스 색상으로 설정합니다.
문서에 있는 슬라이스 수와 단추에 포함된 상태 수에 따라 하나 이상의 이미지 파일이 생성됩니다.
필요한 경우 spacer.gif라는 파일이 생성됩니다. spacer.gif는 슬라이스된 이미지를 HTML 표에서 재조합할 때 간격 문제를 해결하는 데 사용되는 투명 GIF로서 가로와 세로가 각각 1픽셀입니다. Fireworks에서 스페이서를 내보낼지 여부를 선택할 수 있습니다.
팝업 메뉴를 내보내면 mm_css_menu.js와 CSS 팝업 메뉴 코드를 포함한 .css 파일이 내보내기됩니다. 팝업 메뉴에 하위 메뉴가 없는 경우 arrows.gif 파일도 내보내집니다.
HTML을 Dreamweaver로 내보내거나 복사하는 경우 Fireworks와 Dreamweaver 간의 통합을 원활하게 하는 노트 파일이 만들어집니다. 이 파일의 확장자는 .mno입니다.
Fireworks에서 HTML 코드를 클립보드에 복사하는 방법에는 두 가지가 있습니다. [HTML 코드 복사] 명령을 사용하거나 [내보내기] 대화 상자에서 [클립보드에 복사] 옵션을 선택할 수 있습니다. 나중에 이 HTML을 원하는 HTML 편집기의 문서에 붙여넣습니다.
Fireworks HTML을 다른 응용 프로그램에 넣는 방법을 결정할 때는 HTML 코드를 클립보드에 복사할 때의 다음과 같은 단점을 고려하십시오.
이미지를 하위 폴더에 저장할 수 있는 옵션이 없습니다. 복사한 HTML을 붙여넣을 HTML 파일과 동일한 폴더에 이미지가 있어야 합니다. Dreamweaver에 복사한 HTML은 예외입니다.
Fireworks 팝업 메뉴에 사용된 링크나 경로가 하드 드라이브에 매핑됩니다. Dreamweaver에 복사한 HTML은 예외입니다.
Dreamweaver나 Microsoft FrontPage 이외의 HTML 편집기를 사용하는 경우 단추, 비헤이비어 및 롤오버 이미지와 관련된 JavaScript 코드가 복사되기는 하지만 제대로 작동하지 않을 수 있습니다.
이러한 사항이 문제가 되는 경우 HTML을 클립보드에 복사하는 대신 [HTML 내보내기] 옵션을 사용합니다.
주의: HTML 코드를 복사하기 전에 [HTML 설정] 대화 상자의 [일반] 탭에서 적합한 HTML 스타일을 선택했는지 및 [HTML 주석 포함]을 선택했는지 확인하십시오.
-
Fireworks 문서에 상호 작용 요소가 있는 경우 JavaScript 코드를 복사합니다.
JavaScript 코드는 <SCRIPT> 태그로 둘러싸여 있으며 문서의 <HEAD> 섹션에 위치합니다. 대상 문서에 <SCRIPT> 섹션이 없는 경우 <SCRIPT> 섹션 전체를 복사하여 붙여넣습니다. 해당 섹션이 이미 있는 경우에는 기존 섹션의 내용을 덮어쓰지 않도록 주의하면서 <SCRIPT> 섹션의 내용만 기존 <SCRIPT> 섹션에 복사하여 붙여넣어야 합니다. 또한 코드를 붙여넣은 후 <SCRIPT> 섹션의 JavaScript 함수가 중복되지 않도록 해야 합니다.
참고:
Dreamweaver 문서에서는 [HTML 업데이트]가 다른 HTML 문서에서와 다르게 작동합니다. 자세한 내용은 Dreamweaver 사용을 참조하십시오.
업데이트 시 변경된 이미지만 바꾸도록 선택할 수 있습니다. 그렇지 않으면 모든 코드와 이미지를 덮어쓰게 됩니다. 변경된 이미지만 바꾸도록 선택하면 Fireworks 외부에서 변경한 HTML 파일 내용이 유지됩니다.
참고:
문서 레이아웃을 많이 변경할 경우 Fireworks에서 변경한 후 HTML 파일을 다시 내보냅니다.
XHTML은 웹 페이지를 표시하고 서식을 지정하는 현재 표준인 HTML과 XML(eXtensible Markup Language)을 결합한 것으로서, XHTML은 현재 대부분의 웹 브라우저에서 볼 수 있는 역호환성을 제공하며 XML 내용을 표시하는 PDA, 이동 전화, 기타 다른 휴대 장치 등의 모든 장치에서 읽을 수 있습니다.
Fireworks에서는 XHTML을 가져올 수도 있습니다. HTML 파일에서 Fireworks PNG 파일 만들기를 참조하십시오.
XHTML에 대한 자세한 내용은 www.w3.org에서 W3C(World Wide Web Consortium) XHTML 사양을 참조하십시오.
-
HTML을 내보내거나 복사할 때 사용하는 방법을 사용하여 문서를 내보냅니다. HTML 내보내기를 참조하십시오.
참고:
Fireworks에서는 XHTML로 내보낼 때 UTF-8 인코딩을 사용합니다.
UTF-8(Universal Character Set Transformation Format-8)은 웹 브라우저에서 동일한 HTML 페이지에 여러 문자 세트(예를 들어 중국어 텍스트와 영어 텍스트)를 표시할 수 있도록 하는 텍스트 인코딩 방식입니다. UTF-8 인코딩은 기본적으로 켜집니다.
Fireworks는 UTF-8 인코딩을 사용하는 문서를 가져올 수도 있습니다. HTML 파일에서 Fireworks PNG 파일 만들기를 참조하십시오.
[HTML 설정] 대화 상자에서 HTML을 내보내는 방법을 정의할 수 있습니다. [특정 문서] 탭에서 변경을 하면 변경 내용은 현재 문서에만 적용됩니다. [일반] 설정 및 [표] 설정은 전체 환경 설정으로서, 모든 새 문서에 영향을 줍니다.
-
HTML 스타일
내보낸 HTML에 대한 스타일을 선택합니다.
일반 HTML은 모든 HTML 편집기에서 작동합니다. 그러나 문서에 비헤이비어나 다른 상호 작용 내용이 포함되어 있는 경우 목록에서 사용 중인 편집기를 선택해야 합니다.
XHTML 표준을 사용하여 문서를 내보내려면 팝업 메뉴에서 적절한 XHTML 스타일을 선택합니다.
HTML 주석 포함
HTML에서 복사하고 붙여넣을 위치에 대한 주석을 포함하도록 선택합니다. 문서에 단추, 비헤이비어, 롤오버 이미지 등의 상호 작용 요소가 있는 경우에 권장됩니다.
파일 이름을 소문자로
내보낼 때 HTML 파일과 관련 이미지 파일의 이름을 소문자로 만들려면 이 옵션을 선택합니다.
주의: 이 옵션은 Extension 팝업 메뉴에서 대문자 확장자가 선택되어 있을 때는 HTML 파일의 확장자를 소문자로 바꾸지 않습니다.
팝업 메뉴에 CSS 사용
팝업 메뉴 코드로 JavaScript 대신 CSS를 사용합니다. 코드 내의 링크를 업데이트할 수 있으며 Dreamweaver를 사용하여 메뉴를 인덱스할 수 있습니다.
-
[표] 탭에서 HTML 표에 대한 설정을 선택합니다. 자세한 내용은 HTML 표를 내보내는 방법 정의를 참조하십시오.
-
슬라이스 파일 이름
팝업 메뉴에서 슬라이스 이름을 자동 지정할 방식을 선택합니다. 기본 설정을 사용하거나 원하는 옵션을 선택할 수 있습니다.
주의: 처음 세 개 메뉴 중 하나라도 [없음]으로 선택하면 Fireworks에서는 서로 덮어쓰는 슬라이스 파일을 내보내므로 내보낸 단일 그래픽과 이 그래픽이 모든 셀에 표시되는 표가 남게 됩니다.
기본 대체 태그
이미지를 웹에서 다운로드하는 동안 또는 다운로드에 실패한 경우 이미지 대신에 나타날 텍스트를 입력합니다. 일부 브라우저에서는 이미지 위로 포인터를 가져갈 때 도구 설명으로 나타나기도 합니다. 시각 장애가 있는 웹 사용자를 위한 보조 장치이기도 합니다.
Fireworks 디자인을 인쇄하거나 검토를 위해 배포해야 할 경우에는 Adobe PDF로 내보냅니다. 검토자는 Adobe Reader® 또는 Acrobat®에서 주석을 추가하거나 다른 사람의 주석에 답변할 수 있습니다. PDF 검토 설정에 대한 자세한 내용은 Acrobat 도움말을 참조하십시오.
내보낸 PDF 파일에는 모든 페이지와 하이퍼링크가 그대로 유지되므로 검토자는 웹에서 볼 때와 동일하게 탐색할 수 있습니다. 하지만 HTML 프로토타입과는 달리 Adobe PDF는 검토자가 디자인을 편집하거나 복사하지 못하도록 하는 보안 설정을 제공합니다.
Fireworks를 사용하여 클라이언트 교정본을 PDF 또는 HTML 파일로 만들기(00:05:32)
Fireworks 내보내기 메뉴를 사용하여 클라이언트 승인 또는 팀 검토를 위해 PDF 또는 HTML 문서를 준비하는 방법에 대해 알아보십시오.
작성자: Tom Green
FXG는 Flash Catalyst, Fireworks, Illustrator 및 Photoshop에서 지원되는 파일 형식입니다. FXG 내보내기를 사용하여 벡터 이미지 및 비트맵 이미지를 포함한 파일을 내보낼 경우 <filename.assets> 이름의 별도의 폴더가 생성됩니다. 폴더에는 해당 파일과 관련된 비트맵 이미지가 포함되어 있습니다.
관련 파일 중 하나가 이 폴더에서 삭제된 경우는 가져오기 작업이 실패합니다.
참고:
FXG에 해당 매핑 태그가 없는 요소, 필터, 블렌드 모드, 그레이디언트 및 마스크는 비트맵 그래픽으로 내보내집니다.
참고:
Fireworks에서 캔버스를 벗어나 확장되는 객체는 내보낸 FXG 파일을 Flash Catalyst에서 열었을 때 완전히 표시됩니다.