작업 공간에서 내보내기

검색
Adobe Fireworks CS6 사용 안내서

이 페이지

적용 대상: Adobe Fireworks CS5 Adobe Fireworks CS6

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

그래픽이나 문서가 최적화되면 원래 파일 유형에 따라 이를 내보내거나 저장할 수 있습니다.

문서를 GIF, JPEG 또는 다른 그래픽 파일 형식의 단일 이미지로 내보내거나 저장할 수 있습니다. 전체 문서를 HTML 파일 및 연관된 이미지 파일로 내보내거나, 선택한 슬라이스 또는 지정된 영역만 내보낼 수도 있습니다. 그 외에도 Fireworks 상태와 레이어를 별도의 이미지 파일로 내보낼 수 있습니다.

Fireworks에서 파일을 내보내는 기본 위치는 다음과 같은 순서로 결정됩니다.

  1. 문서의 현재 내보내기 환경 설정(문서를 내보낸 다음 PNG를 저장하면 정의됨)

  2. 현재 내보내기/저장 위치([저장], [다른 이름으로 저장] 또는 [내보내기] 대화 상자에 표시된 기본 위치가 아닌 다른 위치로 이동할 때 정의됨)

  3. 현재 파일의 위치

  4. 새 문서나 이미지가 운영 체제에 저장되는 기본 위치

    반면에 Fireworks에서 문서를 저장하는 기본 위치는 다른 기준으로 결정됩니다. 자세한 내용은 Fireworks 파일 저장을 참조하십시오.

페이지를 이미지 파일로 내보내기

  1. [파일] > [내보내기]를 선택합니다.

  2. 내보내기 파일의 위치를 선택합니다.

  3. 다음 중 한 가지를 수행합니다.

    • [내보내기] 팝업 메뉴에서 [이미지만]을 선택하고 [현재 페이지만] 확인란을 선택하거나 선택 취소합니다. 페이지는 [최적화] 패널에서 설정한 이미지 형식으로 내보내집니다.

    • [내보내기] 팝업 메뉴에서 [페이지를 파일로]를 선택하고 [다른 이름으로 내보내기] 팝업 메뉴에서 [이미지]를 선택합니다. 페이지는 [최적화] 패널에서 설정한 이미지 형식으로 내보내집니다.

    • [내보내기] 팝업 메뉴에서 [페이지를 파일로]를 선택하고 [다른 이름으로 내보내기] 팝업 메뉴에서 [Fireworks PNG]를 선택합니다. 각 페이지는 Fireworks 8과 이전 버전 호환되는 별도의 PNG 파일로 내보내집니다.

    참고:

    선택한 형식으로 모든 페이지를 내보내려면 페이지를 모두 선택한 다음 설정을 최적화합니다.

단일 이미지 내보내기

기존 이미지를 Fireworks에서 열어 작업하는 경우에는 이미지를 내보내는 대신 저장할 수 있습니다. 자세한 내용은 다른 형식으로 문서 저장을 참조하십시오.

참고:

문서 내의 특정 이미지만 내보내려면 먼저 문서를 슬라이스한 후 원하는 슬라이스만 내보내야 합니다.

  1. [최적화] 패널에서 파일 형식을 선택하고 형식별 옵션을 설정합니다.

  2. [파일] > [내보내기]를 선택합니다.

  3. 이미지 파일을 내보낼 위치를 선택합니다.

    웹 그래픽을 저장하기에 가장 좋은 위치는 대개 로컬 웹 사이트 내의 폴더입니다.

  4. 확장자 없이 파일 이름을 입력합니다. 확장자는 파일 유형에 따라 내보내기 도중 추가됩니다.

  5. [내보내기] 팝업 메뉴에서 [이미지만]을 선택합니다.

  6. [저장]을 클릭합니다.

슬라이스된 문서 내보내기

기본적으로 슬라이스된 Fireworks 문서를 내보내면 HTML 파일과 관련 이미지가 내보내집니다. 내보낸 HTML 파일은 웹 브라우저에서 보거나 추가 편집을 위해 다른 응용 프로그램으로 가져올 수 있습니다.

내보내기 전에 [HTML 설정] 대화 상자에서 적절한 HTML 스타일이 선택되어 있는지 확인하십시오. HTML 내보내기 옵션 설정을 참조하십시오.

모든 슬라이스 내보내기

  1. [파일] > [내보내기]를 선택합니다.

  2. 내보낼 하드 드라이브의 폴더로 이동합니다.

  3. [내보내기] 팝업 메뉴에서 [HTML과 이미지]를 선택합니다.

  4. [파일 이름] 상자(Windows) 또는 [다른 이름으로 저장] 상자(Mac OS)에 파일 이름을 입력합니다.

  5. HTML 팝업 메뉴에서 [HTML 파일 내보내기]를 선택합니다.

  6. [슬라이스] 팝업 메뉴에서 [슬라이스 내보내기]를 선택합니다.

  7. (선택 사항) [이미지를 하위 폴더에 놓기]를 선택합니다.

  8. [저장]을 클릭합니다.

선택한 슬라이스 내보내기

  1. 여러 슬라이스를 선택하려면 Shift 키를 누른 상태에서 클릭합니다.

  2. [파일] > [내보내기]를 선택합니다.

  3. 로컬 웹 사이트 내의 폴더와 같이 내보낸 파일을 저장할 위치를 선택합니다.

  4. [내보내기] 팝업 메뉴에서 [HTML과 이미지]를 선택합니다.

  5. 확장자 없이 파일 이름을 입력합니다. 확장자는 파일 유형에 따라 내보내기 도중 추가됩니다.

    여러 슬라이스를 내보내는 경우 사용자가 입력하는 이름이 내보내는 모든 그래픽의 루트 이름으로 사용됩니다. [레이어] 패널이나 [속성] 관리자를 사용하여 사용자 정의 이름을 지정한 그래픽은 예외입니다.

  6. [슬라이스] 팝업 메뉴에서 [슬라이스 내보내기]를 선택합니다.

  7. 내보내기 전에 선택한 슬라이스만 내보내려면 [선택한 슬라이스만]을 선택하고 [슬라이스 이외의 영역 포함] 옵션을 선택하지 않은 상태로 둡니다.

  8. [저장]을 클릭합니다.

슬라이스 업데이트

슬라이스된 문서를 이미 내보낸 후 Fireworks에서 원본 문서를 변경한 경우에는 변경된 이미지나 슬라이스만 업데이트할 수 있습니다. 교체 슬라이스를 찾기 쉽도록 슬라이스에 사용자 정의 이름을 지정합니다.

  1. 슬라이스를 숨기고 아래에 있는 영역을 편집합니다.

  2. 슬라이스를 다시 표시합니다.

  3. 슬라이스를 마우스 오른쪽 단추로 클릭하거나(Windows) Control 키를 누른 상태에서 클릭(Mac OS)한 다음 [선택한 슬라이스 내보내기]를 선택합니다.

  4. 동일한 기본 이름을 사용하여 원본 슬라이스와 동일한 폴더를 선택하고 [저장]을 클릭합니다.

  5. 기존 파일을 바꿀지 묻는 메시지가 나타나면 [확인]을 클릭합니다.

    참고:

    Fireworks에서 원본 슬라이스의 내보내기 크기 이상으로 슬라이스의 크기를 조절하지 않아야 합니다. 그렇지 않으면 슬라이스 업데이트 시 HTML 문서에 예상치 않은 결과가 나타날 수 있습니다.

애니메이션 내보내기

애니메이션을 만들고 최적화하면 내보낼 준비가 된 것입니다. 애니메이션을 다음 파일 유형 중 하나로 내보낼 수 있습니다.

애니메이션 GIF

이 유형은 클립 아트나 만화 그래픽에 적합합니다.

Flash SWF 또는 Fireworks PNG(내보내기 필요 없음)

애니메이션을 Flash로 가져오기 위해 SWF 파일로 내보냅니다. 또는 Fireworks PNG 소스 파일을 직접 Flash로 가져와서 내보내기 단계를 건너뛸 수도 있습니다. 이러한 직접적인 방법을 사용하면 애니메이션의 모든 레이어와 상태를 가져온 후 Flash에서 추가로 편집할 수 있습니다. Flash 사용을 참조하십시오.

여러 파일

애니메이션 상태나 레이어를 여러 파일로 내보내는 기능은 같은 객체에 대해 여러 레이어에 많은 심볼이 있는 경우에 유용합니다. 예를 들어, 회사 이름의 각 글자가 그래픽으로 애니메이션화되는 경우 배너 광고를 여러 파일로 내보낼 수 있습니다. 상태나 레이어를 여러 파일로 내보내기를 참조하십시오.

문서에 둘 이상의 애니메이션이 있으면 슬라이스를 삽입하고 반복 및 상태 지연 등 애니메이션 설정을 다르게 지정하여 각 애니메이션을 내보낼 수 있습니다.

애니메이션 GIF 내보내기

  1. [선택] > [선택 취소]를 선택하여 슬라이스와 객체를 모두 선택 취소하고 [최적화] 패널에서 파일 형식으로 [애니메이션 GIF]를 선택합니다.

  2. [파일] > [내보내기]를 선택합니다.

  3. 파일 이름을 입력하고 대상을 선택합니다.

  4. [저장]을 클릭합니다.

애니메이션 설정이 다른 여러 애니메이션 GIF 내보내기

  1. 애니메이션을 Shift 키를 누른 상태에서 클릭하여 모두 선택합니다.

  2. [편집] > [삽입] > [사각형 슬라이스] 또는 [다각형 슬라이스]를 선택합니다.

  3. 메시지 상자에서 [다중]을 클릭합니다.

  4. 각 슬라이스를 개별적으로 선택하고 [상태] 패널에서 각각에 대해 서로 다른 애니메이션 설정을 지정합니다.

  5. 애니메이션화할 슬라이스를 모두 선택하고 [최적화] 패널에서 파일 형식으로 [애니메이션 GIF]를 선택합니다.

  6. 각 슬라이스를 개별적으로 내보내려면 각 슬라이스를 마우스 오른쪽 단추로 클릭하거나(Windows) Control 키를 누른 상태에서 클릭(Mac OS)한 다음 [선택한 슬라이스 내보내기]를 선택합니다. [내보내기] 대화 상자에서 각 파일의 이름을 입력하고 대상을 선택한 다음 [저장]을 클릭합니다.

상태나 레이어를 여러 파일로 내보내기

Fireworks에서는 [최적화] 패널에 지정된 최적화 설정을 사용하여 문서의 각 레이어나 상태를 별도의 이미지 파일로 내보낼 수 있습니다. 내보내는 각 파일의 파일 이름은 레이어나 상태의 이름에 의해 결정됩니다. 이 내보내기 방법은 애니메이션을 내보내는 데에도 사용됩니다.

  1. [파일] > [내보내기]를 선택합니다.

  2. 파일 이름을 입력하고 대상 폴더를 선택합니다.

  3. [내보내기] 팝업 메뉴에서 다음과 같은 옵션을 선택합니다.

    상태를 파일로

    상태를 여러 파일로 내보냅니다.

    레이어를 파일로

    레이어를 여러 파일로 내보냅니다.

    주의: 이 옵션은 현재 상태의 모든 레이어를 내보냅니다.

  4. 내보내는 각 이미지를 각 상태의 객체만 포함되도록 자동으로 자르려면 [이미지 재단]을 선택합니다. 객체를 넘어 빈 영역을 포함한 전체 캔버스를 포함하려면 이 옵션을 선택 취소합니다.

  5. [저장]을 클릭합니다.

문서에서 영역 내보내기

  1. [도구] 패널에서 [영역 내보내기] 도구를 선택합니다.

  2. 내보낼 문서 영역을 정의하는 선택 윤곽을 드래그합니다.

    참고:

    드래그하면서 선택 윤곽의 위치를 조정할 수 있습니다. 마우스 단추를 누르고 스페이스바를 계속 누른 상태에서 선택 윤곽을 캔버스의 다른 위치로 드래그합니다. 선택 윤곽을 계속 그리려면 스페이스바를 놓습니다.

    마우스 단추를 놓으면 내보내기 영역이 선택되어 있습니다.

  3. 필요에 따라 내보내기 영역의 크기를 조절합니다.

    • 내보내기 영역 선택 윤곽의 크기를 비례적으로 조절하려면 Shift 키를 누른 상태에서 핸들을 드래그합니다.

    • 선택 윤곽을 중심부터 크기 조절하려면 핸들을 Alt 키를 누른 상태에서 드래그하거나(Windows) Option 키를 누른 상태에서 드래그(Mac OS)합니다.

    • 비례를 유지하면서 중심부터 크기 조절하려면 핸들을 Alt-Shift 키를 누른 상태에서 드래그하거나(Windows) Option-Shift 키를 누른 상태에서 드래그(Mac OS)합니다.

  4. 내보내기 영역의 선택 윤곽 내부를 두 번 클릭하여 [이미지 미리 보기]로 이동합니다.

  5. [이미지 미리 보기]에서 설정을 조정하고 [내보내기]를 클릭합니다.

  6. 파일 이름을 입력하고 대상 폴더를 선택합니다.

  7. [내보내기] 팝업 메뉴에서 [이미지만]을 선택합니다.

  8. [저장]을 클릭합니다.

    참고:

    내보내지 않고 취소하려면 내보내기 영역의 선택 윤곽 외부를 두 번 클릭하거나 Esc 키를 누르거나 다른 도구를 선택합니다.

HTML 내보내기

다르게 지정하지 않는 한 슬라이스된 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을 다른 응용 프로그램으로 내보내는 방법은 팀 환경에서 작업할 경우에 적합합니다. 이 방법을 사용하면 한 사용자가 한 응용 프로그램에서 작업을 수행하고 나중에 다른 사용자가 다른 응용 프로그램을 사용하여 작업을 인수할 수 있도록 작업 흐름이 구분됩니다.

내보내는 HTML에 주석 포함

Fireworks HTML 주석은 <!-- 로 시작하여 -->로 끝납니다. 이 두 마커 사이의 내용은 HTML이나 JavaScript 코드로 해석되지 않습니다.

  1. 내보내기 전에 [HTML 설정] 대화 상자의 [일반] 탭에서 [HTML 주석 포함] 옵션을 선택합니다.

내보내기 결과

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 내보내기

  1. [파일] > [내보내기]를 선택합니다.

  2. 내보낼 하드 드라이브의 폴더로 이동합니다.

  3. [내보내기] 팝업 메뉴에서 [HTML과 이미지]를 선택합니다.

  4. [옵션] 단추를 클릭하고 [HTML 설정] 대화 상자의 [일반] 탭에 있는 [HTML 스타일] 팝업 메뉴에서 사용 중인 HTML 편집기를 선택합니다. 사용 중인 HTML 편집기가 나열되지 않으면 [일반]을 선택합니다.

    참고:

    HTML 편집기를 HTML 스타일로 선택해야 HTML 편집기로 가져오는 단추 및 롤오버와 같은 상호 작용 요소가 제대로 작동합니다.

  5. [확인]을 클릭합니다.

  6. HTML 팝업 메뉴에서 [HTML 파일 내보내기]를 선택합니다.

  7. 문서에 슬라이스가 있는 경우 [슬라이스] 팝업 메뉴에서 [슬라이스 내보내기]를 선택합니다.

  8. 이미지를 별도의 폴더에 저장하려면 [이미지를 하위 폴더에 놓기]를 선택합니다. 특정 폴더를 선택하거나 Fireworks 기본 이미지 폴더를 사용할 수 있습니다.

  9. 여러 페이지로 구성된 Fireworks 문서를 내보낼 경우 [현재 페이지만] 확인란을 선택 취소하여 모든 페이지를 별개의 HTML 문서로 내보냅니다.

  10. [저장]을 클릭합니다.

    내보낸 후 하드 드라이브에 Fireworks에서 내보낸 파일이 나타납니다. [내보내기] 대화 상자에서 지정한 위치에 이미지와 HTML 파일이 생성됩니다.

HTML 코드를 클립보드에 복사

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 주석 포함]을 선택했는지 확인하십시오.

[HTML 코드 복사] 옵션을 사용하여 Fireworks HTML 복사

  1. [편집] > [HTML 코드 복사]를 선택합니다.

  2. 마법사의 안내를 따릅니다. 이미지를 내보낼 대상 폴더의 위치를 묻는 메시지가 나타나면 폴더를 지정합니다. 대상 폴더는 HTML 파일을 저장할 위치여야 합니다.

    참고:

    HTML 코드를 Dreamweaver로 붙여넣을 경우 코드를 붙여넣을 HTML 파일과 동일한 Dreamweaver 사이트에 이미지가 있는 한, 이미지를 내보내는 위치는 어디든 상관없습니다.

[내보내기] 대화 상자를 사용하여 Fireworks HTML 복사

  1. [파일] > [내보내기]를 선택합니다.

  2. [내보내기] 대화 상자에서 이미지를 내보낼 대상 폴더를 지정합니다. 대상 폴더는 HTML 파일을 저장할 위치와 동일해야 합니다.

    참고:

    HTML 코드를 Dreamweaver로 붙여넣을 경우 코드를 붙여넣을 HTML 파일과 동일한 Dreamweaver 사이트에 이미지가 있는 한, 이미지를 내보내는 위치는 어디든 상관없습니다.

  3. [내보내기] 팝업 메뉴에서 [HTML과 이미지]를 선택합니다.

  4. HTML 팝업 메뉴에서 [클립보드에 복사]를 선택합니다.

  5. 문서에 슬라이스가 있는 경우 [슬라이스] 팝업 메뉴에서 [슬라이스 내보내기]를 선택합니다.

  6. [옵션] 단추를 클릭하고 [HTML 설정] 대화 상자에서 사용 중인 HTML 편집기를 선택한 다음 [확인]을 클릭합니다.

  7. [저장]을 클릭합니다.

Fireworks에서 복사한 HTML을 HTML 문서에 붙여넣기

  1. HTML 편집기에서 기존 HTML 문서를 열거나 새 HTML 문서를 만듭니다. 이미지를 내보낸 위치와 동일한 위치에 문서를 저장합니다.

    참고:

    Dreamweaver를 사용하는 경우 내보내는 이미지와 동일한 위치에 HTML 파일을 저장하지 않아도 됩니다. Fireworks에서 Dreamweaver 사이트로 이미지를 내보내고 HTML 파일을 해당 사이트 내의 위치에 저장하면 Dreamweaver에서 관련 이미지에 대한 경로를 확인합니다.

  2. HTML 코드를 보고 <BODY> 태그 사이에 삽입 포인트를 놓습니다.

    참고:

    Fireworks에서 복사한 HTML 코드에는 열거나 닫는 <HTML> 및 <BODY> 태그가 포함되어 있지 않습니다.

  3. HTML 코드를 붙여넣습니다.

    가능하면 클립보드에 복사할 때 이미지를 웹 사이트상의 최종 위치로 내보냅니다. Fireworks는 문서에 대해 상대적인 URL을 사용하므로 HTML이나 이미지가 이동하면 URL 링크가 끊어집니다.

내보낸 Fireworks 파일에서 코드를 복사하여 다른 HTML 문서에 붙여넣기

  1. HTML 편집기에서 내보낸 Fireworks HTML 파일을 엽니다.

  2. 필요한 코드를 강조 표시하고 클립보드에 복사합니다.

  3. 기존 HTML 문서를 열거나 새 문서를 만듭니다.

  4. 코드를 새 HTML 파일에 붙여넣습니다. <HTML> 및 <BODY> 태그는 이미 대상 HTML 문서에 포함되어 있으므로 복사하지 않아도 됩니다.

    Fireworks의 [HTML 설정] 대화 상자에서 [HTML 주석 포함]을 선택한 경우 주석의 지침에 따라 코드를 복사하여 적절한 위치에 붙여넣습니다.

  5. Fireworks 문서에 상호 작용 요소가 있는 경우 JavaScript 코드를 복사합니다.

    JavaScript 코드는 <SCRIPT> 태그로 둘러싸여 있으며 문서의 <HEAD> 섹션에 위치합니다. 대상 문서에 <SCRIPT> 섹션이 없는 경우 <SCRIPT> 섹션 전체를 복사하여 붙여넣습니다. 해당 섹션이 이미 있는 경우에는 기존 섹션의 내용을 덮어쓰지 않도록 주의하면서 <SCRIPT> 섹션의 내용만 기존 <SCRIPT> 섹션에 복사하여 붙여넣어야 합니다. 또한 코드를 붙여넣은 후 <SCRIPT> 섹션의 JavaScript 함수가 중복되지 않도록 해야 합니다.

내보낸 HTML 업데이트

업데이트를 하면 이전에 내보낸 Fireworks HTML 문서를 변경할 수 있으며 이는 문서의 일부만 업데이트할 때 유용합니다.

참고:

Dreamweaver 문서에서는 [HTML 업데이트]가 다른 HTML 문서에서와 다르게 작동합니다. 자세한 내용은 Dreamweaver 사용을 참조하십시오.

업데이트 시 변경된 이미지만 바꾸도록 선택할 수 있습니다. 그렇지 않으면 모든 코드와 이미지를 덮어쓰게 됩니다. 변경된 이미지만 바꾸도록 선택하면 Fireworks 외부에서 변경한 HTML 파일 내용이 유지됩니다.

참고:

문서 레이아웃을 많이 변경할 경우 Fireworks에서 변경한 후 HTML 파일을 다시 내보냅니다.

  1. [파일] > [HTML 업데이트]를 선택합니다.

  2. 업데이트할 파일을 선택합니다.

  3. [열기]를 클릭합니다.

  4. 다음 중 한 가지를 수행합니다.

    • Fireworks에서 생성한 HTML이 없으면 [확인]을 클릭하여 문서의 끝에 새 HTML을 삽입합니다.

    • Fireworks에서 생성한 HTML이 있으면 다음 중 한 가지를 선택하고 [확인]을 클릭합니다.

      이미지와 해당 HTML 대체

      이전 Fireworks HTML을 바꾸기

      이미지만 갱신

      이미지만 덮어쓰기

  5. [이미지 폴더 선택] 대화 상자가 나타나면 폴더를 선택하고 [열기]를 클릭합니다.

CSS 레이어 내보내기

또한 CSS 레이어를 서로 겹치고 쌓일 수 있습니다. Fireworks에서 일반 HTML 출력은 겹쳐지지 않습니다.

  1. [파일] > [내보내기]를 선택합니다.

  2. 파일 이름을 입력하고 대상 폴더를 선택합니다.

  3. [내보내기] 팝업 메뉴에서 [CSS 및 이미지]를 선택합니다.

    • 현재 상태만 내보내려면 [현재 상태만]을 선택합니다.

    • 현재 페이지만 내보내려면 [현재 페이지만]을 선택합니다.

    • 이미지를 저장할 폴더를 선택하려면 [이미지를 하위 폴더에 놓기]를 선택합니다.

  4. [옵션]을 클릭하여 HTML 페이지 속성을 설정합니다.

  5. [찾아보기]를 클릭하여 배경 이미지를 지정하고 배경 이미지 바둑판식 배열을 설정합니다.

    • 이미지를 한 번만 표시하려면 [반복 없음]을 선택합니다.

    • 이미지를 가로/세로 모든 방향의 바둑판식으로 배열하거나 반복하려면 [반복]을 선택합니다.

    • 이미지를 가로 방향의 바둑판식으로 배열하려면 [가로반복]을 선택합니다.

    • 이미지를 세로 방향의 바둑판식으로 배열하려면 [세로반복] 옵션을 선택합니다.

  6. 브라우저에서의 페이지 정렬 방식을 왼쪽 맞춤, 가운데 맞춤 또는 오른쪽 맞춤으로 선택합니다.

  7. [확인]을 클릭한 다음 [저장]을 클릭합니다.

XHTML 내보내기

XHTML은 웹 페이지를 표시하고 서식을 지정하는 현재 표준인 HTML과 XML(eXtensible Markup Language)을 결합한 것으로서, XHTML은 현재 대부분의 웹 브라우저에서 볼 수 있는 역호환성을 제공하며 XML 내용을 표시하는 PDA, 이동 전화, 기타 다른 휴대 장치 등의 모든 장치에서 읽을 수 있습니다.

Fireworks에서는 XHTML을 가져올 수도 있습니다. HTML 파일에서 Fireworks PNG 파일 만들기를 참조하십시오.

XHTML에 대한 자세한 내용은 www.w3.org에서 W3C(World Wide Web Consortium) XHTML 사양을 참조하십시오.

  1. [파일] > [HTML 설정]을 선택하고 [일반] 탭의 [HTML 스타일] 팝업 메뉴에서 XHTML 스타일을 선택한 다음 [확인]을 클릭합니다.

  2. HTML을 내보내거나 복사할 때 사용하는 방법을 사용하여 문서를 내보냅니다. HTML 내보내기를 참조하십시오.

    참고:

    Fireworks에서는 XHTML로 내보낼 때 UTF-8 인코딩을 사용합니다.

UTF-8 인코딩을 사용 또는 사용하지 않고 파일 내보내기

UTF-8(Universal Character Set Transformation Format-8)은 웹 브라우저에서 동일한 HTML 페이지에 여러 문자 세트(예를 들어 중국어 텍스트와 영어 텍스트)를 표시할 수 있도록 하는 텍스트 인코딩 방식입니다. UTF-8 인코딩은 기본적으로 켜집니다.

Fireworks는 UTF-8 인코딩을 사용하는 문서를 가져올 수도 있습니다. HTML 파일에서 Fireworks PNG 파일 만들기를 참조하십시오.

UTF-8 인코딩을 사용하지 않고 문서 내보내기

  1. [파일] > [HTML 설정]을 선택합니다.

  2. [특정 문서] 탭에서 [UTF-8 인코딩] 확인란을 선택 취소하고 [확인]을 클릭합니다.

  3. HTML을 내보내거나 복사할 때 사용하는 방법을 사용하여 문서를 내보냅니다.

HTML 내보내기 옵션 설정

[HTML 설정] 대화 상자에서 HTML을 내보내는 방법을 정의할 수 있습니다. [특정 문서] 탭에서 변경을 하면 변경 내용은 현재 문서에만 적용됩니다. [일반] 설정 및 [표] 설정은 전체 환경 설정으로서, 모든 새 문서에 영향을 줍니다.

  1. 다음 중 한 가지를 수행합니다.

    • [파일] > [HTML 설정]을 선택합니다.

    • [내보내기] 대화 상자에서 [옵션] 단추를 클릭합니다.

  2. [일반] 탭에서 원하는 옵션을 선택합니다.

    HTML 스타일

    내보낸 HTML에 대한 스타일을 선택합니다.

    일반 HTML은 모든 HTML 편집기에서 작동합니다. 그러나 문서에 비헤이비어나 다른 상호 작용 내용이 포함되어 있는 경우 목록에서 사용 중인 편집기를 선택해야 합니다.

    XHTML 표준을 사용하여 문서를 내보내려면 팝업 메뉴에서 적절한 XHTML 스타일을 선택합니다.

    확장자

    팝업 메뉴에서 파일 확장자를 선택하거나 새로 입력합니다.

    HTML 주석 포함

    HTML에서 복사하고 붙여넣을 위치에 대한 주석을 포함하도록 선택합니다. 문서에 단추, 비헤이비어, 롤오버 이미지 등의 상호 작용 요소가 있는 경우에 권장됩니다.

    파일 이름을 소문자로

    내보낼 때 HTML 파일과 관련 이미지 파일의 이름을 소문자로 만들려면 이 옵션을 선택합니다.

    주의: 이 옵션은 Extension 팝업 메뉴에서 대문자 확장자가 선택되어 있을 때는 HTML 파일의 확장자를 소문자로 바꾸지 않습니다.

    팝업 메뉴에 CSS 사용

    팝업 메뉴 코드로 JavaScript 대신 CSS를 사용합니다. 코드 내의 링크를 업데이트할 수 있으며 Dreamweaver를 사용하여 메뉴를 인덱스할 수 있습니다.

    외부 파일에 CSS 쓰기

    HTML 파일과 같은 위치로 내보낸 외부 .css 파일에 CSS 코드를 기록하도록 선택합니다. .css 파일의 이름은 확장자만 제외하고 HTML 파일의 이름과 동일합니다. 이 옵션을 선택하면 이름이 mm_css_menu.js인 파일도 HTML 파일과 동일한 위치에 내보내집니다.

    주의: 이 옵션은 [팝업 메뉴에 CSS 사용] 옵션을 선택한 경우에만 사용할 수 있습니다.

    파일 생성자(Mac OS)

    팝업 메뉴에서 관련된 응용 프로그램을 선택합니다. 하드 디스크에서 내보낸 HTML 파일을 두 번 클릭하면 선택한 응용 프로그램에서 해당 파일이 자동으로 열립니다.

  3. [표] 탭에서 HTML 표에 대한 설정을 선택합니다. 자세한 내용은 HTML 표를 내보내는 방법 정의를 참조하십시오.

  4. [특정 문서] 탭에서 다음 옵션 중 하나를 선택합니다.

    슬라이스 파일 이름

    팝업 메뉴에서 슬라이스 이름을 자동 지정할 방식을 선택합니다. 기본 설정을 사용하거나 원하는 옵션을 선택할 수 있습니다.

    주의: 처음 세 개 메뉴 중 하나라도 [없음]으로 선택하면 Fireworks에서는 서로 덮어쓰는 슬라이스 파일을 내보내므로 내보낸 단일 그래픽과 이 그래픽이 모든 셀에 표시되는 표가 남게 됩니다.

    기본 대체 태그

    이미지를 웹에서 다운로드하는 동안 또는 다운로드에 실패한 경우 이미지 대신에 나타날 텍스트를 입력합니다. 일부 브라우저에서는 이미지 위로 포인터를 가져갈 때 도구 설명으로 나타나기도 합니다. 시각 장애가 있는 웹 사용자를 위한 보조 장치이기도 합니다.

    여러 개의 탐색 모음 HTML 페이지 내보내기(프레임 세트 없이 사용)

    여러 페이지를 함께 링크하는 탐색 모음을 내보낼 때 선택합니다. Fireworks에서는 탐색 모음의 각 단추에 대한 추가적인 페이지를 내보냅니다.

    슬라이스 이외의 영역 포함

    슬라이스가 없는 캔버스의 영역을 포함하려면 선택합니다.

    UTF-8 인코딩

    기본적으로 켜집니다. 내보낸 문서에 여러 문자 세트의 문자를 표시할 수 있습니다. 이 옵션을 끄려면 확인란을 선택 취소합니다.

  5. 이 설정을 전체 기본 설정으로 저장하려면 [기본값 설정]을 클릭합니다..

Adobe PDF 파일 내보내기

Fireworks 디자인을 인쇄하거나 검토를 위해 배포해야 할 경우에는 Adobe PDF로 내보냅니다. 검토자는 Adobe Reader® 또는 Acrobat®에서 주석을 추가하거나 다른 사람의 주석에 답변할 수 있습니다. PDF 검토 설정에 대한 자세한 내용은 Acrobat 도움말을 참조하십시오.

내보낸 PDF 파일에는 모든 페이지와 하이퍼링크가 그대로 유지되므로 검토자는 웹에서 볼 때와 동일하게 탐색할 수 있습니다. 하지만 HTML 프로토타입과는 달리 Adobe PDF는 검토자가 디자인을 편집하거나 복사하지 못하도록 하는 보안 설정을 제공합니다.

  1. [파일] > [내보내기]를 선택합니다.

  2. [내보내기] 팝업 메뉴에서 [Adobe PDF]를 선택합니다.

  3. 내보낼 페이지를 선택하고 [내보내기 후 PDF 보기]를 선택하면 PDF가 자동으로 Adobe Reader 또는 Acrobat에서 열립니다.

  4. PDF를 사용자 정의하려면 [옵션]을 클릭하고 다음 설정을 조정합니다.

    호환성

    내보낸 파일을 열 수 있는 Adobe PDF 응용 프로그램을 지정합니다.

    압축

    이미지 압축 유형을 결정하여 파일 크기를 줄입니다. 일반적으로 색상 단위의 점진적 전환을 사용하는 사진 등의 이미지에는 JPEG 및 JPEG2000 압축을 사용하면 좋은 결과를 얻을 수 있습니다. ZIP은 넓은 단색 영역이 있는 일러스트레이션에 적합합니다.

    품질

    JPEG 또는 JPEG2000 압축의 경우에는 이미지 화질을 설정할 수 있습니다. 화질을 높게 설정하면 이미지 화질은 높아지지만 파일 크기는 커집니다.

    회색 음영으로 변환

    모든 이미지를 회색 음영으로 변환하여 파일 크기를 줄입니다.

    텍스트 선택물 사용

    내보낸 파일의 텍스트를 검토자가 복사할 수 있습니다. 파일 크기를 크게 줄이려면 이 옵션을 선택 취소합니다.

    도련 값

    각 페이지에 있는 이미지 주위에 표시되는 검은색 테두리의 픽셀 너비를 결정합니다. 예를 들어 값 20은 각 이미지 주위에 20픽셀의 테두리를 그립니다.

    암호를 사용하여 문서 열기

    내보낸 파일을 열려면 [열기 암호]가 필요합니다.

    암호를 사용하여 작업 제한

    인쇄, 편집, 복사 및 주석 작성 기능을 수행하려면 [보안 암호]가 필요합니다.

  5. [확인]을 클릭하여 [옵션] 대화 상자를 닫습니다.

  6. 파일 이름과 위치를 지정하고 [저장]을 클릭합니다.

    참고:

    Fireworks 문서의 페이지에 투명 캔버스가 있으면 PDF로 내보낼 때 투명도가 적용된 객체는 투명성을 잃게 됩니다. 이를 피하기 위해서는 PDF로 내보내기 전에 캔버스를 불투명 배경으로 설정하십시오.

비디오

Fireworks를 사용하여 클라이언트 교정본을 PDF 또는 HTML 파일로 만들기(00:05:32)

Fireworks 내보내기 메뉴를 사용하여 클라이언트 승인 또는 팀 검토를 위해 PDF 또는 HTML 문서를 준비하는 방법에 대해 알아보십시오.

작성자: Tom Green

Adobe Acrobat 또는 Adobe Reader에서 내보낸 PDF 파일을 볼 때 다음 설정을 사용합니다.

  1. Adobe Acrobat 또는 Adobe Reader에서 [편집] > [환경 설정]을 선택합니다.

  2. 왼쪽 패널에서 [페이지 표시]를 선택합니다.

  3. [사용자 정의 해상도]를 72ppi로 설정합니다.

  4. [확대/축소] 값을 100%로 설정합니다.

FXG 파일 내보내기

FXG는 Flash Catalyst, Fireworks, Illustrator 및 Photoshop에서 지원되는 파일 형식입니다. FXG 내보내기를 사용하여 벡터 이미지 및 비트맵 이미지를 포함한 파일을 내보낼 경우 <filename.assets> 이름의 별도의 폴더가 생성됩니다. 폴더에는 해당 파일과 관련된 비트맵 이미지가 포함되어 있습니다.

관련 파일 중 하나가 이 폴더에서 삭제된 경우는 가져오기 작업이 실패합니다.

참고:

FXG에 해당 매핑 태그가 없는 요소, 필터, 블렌드 모드, 그레이디언트 및 마스크는 비트맵 그래픽으로 내보내집니다.

  1. [파일] > [내보내기]를 선택하고 파일을 저장할 위치로 이동합니다.

  2. FXG 파일의 파일 이름을 입력합니다.

  3. [내보내기] 대화 상자의 [내보내기] 메뉴에서 [FXG 및 이미지]를 선택합니다.

  4. [저장]을 클릭합니다.

참고:

Fireworks에서 캔버스를 벗어나 확장되는 객체는 내보낸 FXG 파일을 Flash Catalyst에서 열었을 때 완전히 표시됩니다.