轉存為 HTML,可以輕鬆地將 InDesign 內容轉換為可供網頁使用的格式。當您將內容轉存為 HTML 時,即可控制轉存文字與影像的方法。InDesign 會透過 CSS 同名樣式類別來標示 HTML 內容,以保留轉存內容中所套用的段落、字元、物件、表格和儲存格樣式等的名稱。使用 Adobe Dreamweaver 或任何支援 CSS 的 HTML 編輯器,您就可以快速將格式設定和版面套用到內容中。

轉存哪些內容

InDesign 會轉存所有內文、連結和嵌入的圖形、SWF 影片檔案、註腳、文字變數 (做為文字)、項目符號和編號清單、內部交互參照,以及跳到文字或網頁的超連結。也會轉存表格,但不會轉存特定格式設定,例如表格和儲存格線條。表格會指定成唯一識別碼,以便在 Dreamweaver 中可當作 Spry 資料集來參考。置入的音訊和 h.264 影片檔案會以 HTML5 的 <audio> 與 <video> 標記括住。

不會轉存哪些內容

InDesign 不會轉存您繪製的物件 (例如矩形、橢圓形和多邊形)、超連結 (網頁連結以及跳至同一文件中文字錨點之文字所套用的連結除外)、貼上的物件 (包括貼上的 Illustrator 影像)、轉換為外框的文字、XML 標記、書冊、書籤、SING 字符檔、頁面切換效果、索引標記、作業範圍上未選取而且未接觸頁面的物件,或是主版頁面項目 (除非轉存前已覆寫或選取)。

  1. 如果不要轉存整份文件,請選取要轉存的文字框、文字範圍、表格儲存格或圖形。
  2. 選擇「檔案 > 轉存」並從「存檔類型」清單選取「HTML」。
  3. 指定 HTML 文件的名稱和位置,然後按一下「儲存」。
  4. 在「HTML 轉存選項」對話框中,指定「一般」、「影像」和「進階」區域中所需的選項,然後按一下「確定」。

隨即以指定的名稱和 .html 副檔名 (例如「newsletter.html」) 建立文件;如有指定,也會在相同位置儲存網頁影像次檔案夾 (例如「newsletter-web-images」)。

HTML 轉存選項

在「HTML」對話框中,指定下列選項。

一般選項

一般區域包含下列選項。

轉存

決定只轉存選取的項目還是整份文件。如果已選取文字框,則會轉存含溢排文字在內的整個內文。

如果選取「文件」,除了未覆寫的主版頁面項目和不可見圖層上的頁面項目之外,會轉存所有跨頁的全部頁面項目。XML 標記和產生的索引與目錄則會加以忽略。

內容順序 / 排序

讓您指定頁面物件的讀取順序。

基於頁面佈局

項目在頁面上的位置會決定讀取順序。

如果選取「基於頁面佈局」,則 InDesign 會從左到右或從上到下掃描,以決定頁面物件讀取順序。在某些情況下,特別是在複雜、多欄文件中,設計元素可能不會顯示為所要的讀取順序。您可以使用 Dreamweaver 重新排列內容並設定其格式。

(僅限亞洲版本) 如果選取「基於頁面佈局」,則 InDesign 會根據文件裝訂來決定頁面物件的讀取順序 (從左至右或從右至左)。在某些情況下,特別是在複雜、多欄文件中,轉存的設計元素可能不會顯示為所要的讀取順序。您可以使用 Dreamweaver 重新排列內容並設定其格式。

與 XML 結構相同

如果選取「與 XML 結構相同」,則「XML 結構」面板會控制轉存內容的順序以及要轉存哪些內容。如果您已經標記內容,則可以直接在「XML 結構」面板中拖曳標記,以設定 XHTML 轉存順序。如果未標記內容,則可以從「結構」面板選單中選擇「新增未標記的項目」,以產生可以重新排序的標記。如果您不希望在轉存中包含某個項目,可以直接刪除在「XML 結構」面板中的標記。(刪除標記並不會刪除 INDD 檔案中的內容。)請參閱標記頁面項目

與文章面板相同

「文章」面板中的元素順序會決定讀取順序。只有已核取的文章才會被轉存。請參閱包含要轉存的文章

邊界

以 Ems 或像素指定簡單的邊界。以 Ems 指定邊界可以獲得更好的多重畫面相容性。相同的值會套用到所有邊界:上、下、左、右。

項目符號

選取「對應至無順序清單」,將項目符號段落轉換為使用 <ul> 標記格式化為 HTML 的「清單項目」。選取「轉換為文字」,使用 <p> 標記將項目符號當做文字來設定格式。如果您已經使用原生 InDesign 自動項目符號,則也會包含子項目符號。

編號

決定編號在 HTML 檔案中的轉換方式。如果您已經使用原生 InDesign 自動編號,則也會包含子項目符號。

對應至依序清單

將編號清單轉換為使用 <ol> 標記格式化為 HTML 的「清單項目」。

對應至靜態排序清單

將編號清單轉換為「清單項目」,但會依據 InDesign 中段落的目前編號來指定 <value> 屬性。

轉換為文字

將編號清單轉換為以段落之目前編號當做文字開頭的段落。

轉存後檢視 HTML

如果有的話,請啟動瀏覽器。

影像選項

拷貝影像

指定如何將影像轉存為 HTML。

原件

將原始影像轉存至「<document_name>-web-images」次檔案夾。選取這個選項時,所有其他選項都會變成灰色。

最佳化

讓您變更設定以決定影像的轉存方式。

連結到伺服器路徑

這個選項會讓您輸入出現在影像檔案前面的本機 URL (例如 "images/"),而不會將影像轉存至次檔案夾。 在 HTML 程式碼中,連結屬性會顯示您所指定的路徑和副檔名。當您自行將影像轉換為相容於網頁的影像時,這個選項效果特別好。

保留佈局的外觀

核取這個選項會從佈局承襲影像物件屬性。

解析度 (ppi)

以像素/英寸 (ppi) 指定影像的解析度。雖然作業系統已經標準化為 72 ppi 或 96 ppi,但行動裝置的範圍仍然是從 132 ppi (iPad) 到 172 ppi (Sony Reader),一直到超過 300 ppi (iPhone 4)。您可以對每個選取的物件指定一個 ppi 值。值包括 72、96、150 (現今所有電子書裝置的平均值) 及 300。

影像大小

指定影像大小是否必須保持固定,還是要相對於頁面來調整大小。「相對於頁面大小」可依據相對於 InDesign 頁面寬度的影像大小來設定相對百分比值。這個選項會導致影像以相對於閱讀區域寬度的方式,以等比例重新調整大小。

影像對齊方式和間距

指定影像對齊方式: 靠左、置中、靠右,以及與前段間距、與後段間距。

設定套用至錨定物件

核取這個選項可將這些設定套用到所有錨定物件。

影像轉換

讓您選擇是否將文件中的最佳化影像轉換成 GIF、JPEG 或 PNG。選擇「自動」可讓 InDesign 決定每個實例所要使用的格式。選擇 PNG 會關閉影像壓縮設定;請對不失真的影像或包含透明度的影像使用 PNG。

GIF 選項 (浮動視窗)

讓您控制 InDesign 在最佳化 GIF 檔案時,處理顏色的方式。GIF 格式會使用不超過 256 色的有限顏色浮動視窗。

選擇「最適化」,使用圖形中的代表性顏色樣本來建立浮動視窗,而不會有任何混色 (混合小型特別色以模擬額外顏色)。選擇「網頁」,建立由 Windows 和 Mac OS 系統顏色的子集所組成的網頁安全色浮動視窗。選擇「系統 (Win)」或「系統 (Mac)」,使用內建的系統顏色浮動視窗來建立浮動視窗。這個選項可能會導致非預期的結果。

選取「交錯」能夠以填入遺失線條的方式,漸進載入影像。如果未選取這個選項,則影像會看起來很模糊,然後在到達完整解析度時逐漸變得清晰。

JPEG 選項 (影像品質)

為每個建立的 JPEG 影像,在檔案壓縮 (檔案較小) 和影像品質之間決定折衷點。「低」會產生最小檔案和最低影像品質。

JPEG 選項 (設定格式方式)

決定包含影像的檔案在網頁上開啟時,顯示 JPEG 圖形的速度。選擇「漸進式」,讓 JPEG 影像在下載時逐部顯示並且愈來愈清楚 (透過這個選項建立的檔案會稍微大一點,而且檢視時需要更多 RAM)。選擇「基線」,只在每個 JPEG 檔案完全下載後才顯示;在檔案顯示前會出現預留位置暫代。

忽略物件轉換設定

忽略套用在個別影像的「物件轉存選項」。請參閱套用物件轉存選項

進階選項

使用進階區域來設定 CSS 和 JavaScript 選項。

CSS 選項

重疊樣式表」(CSS) 是控制網頁內容表現方式的格式設定規則集合。當您使用 CSS 設定頁面格式時,會將內容和呈現方式分離。頁面內容 (HTML 程式碼) 位於 HTML 檔案本身,而定義程式碼呈現方式的 CSS 規則位於另一個檔案 (外部樣式表) 或在 HTML 文件中 (通常在「表頭」區段中)。 例如,您可以為選取文字指定不同字體大小,而且使用 CSS 來控制網頁中區塊層級元素的格式和位置。

內嵌 CSS

轉存為 XHTML 時,您可以建立顯示在 HTML 檔案之「表頭」區段中具有宣告 (屬性) 的 CSS 樣式清單。

如果選取「包含樣式定義」,InDesign 會嘗試讓 InDesign 文字格式的屬性符合 CSS 對等項目。如果取消選取此選項,HTML 檔案則會包含空的宣告。您可以稍後在 Dreamweaver 中編輯這些宣告。

如果選取「保留本機優先選項」,會包含如斜體或粗體等本機格式設定。

無 CSS

選取此選項會忽略 HTML 檔案中的 CSS 區段。

外部 CSS (CS5.5)

指定現有 CSS 樣式表的 URL,通常是相對 URL,例如「/styles/style.css」。InDesign 不會檢查 CSS 是否存在或有效,因此您必須使用 Dreamweaver 確認外部 CSS 設定。

其他 CSS (CS6)

使用「新增樣式表」按鈕指定 CSS。

JavaScript 選項

選取「連結至外部 JavaScript」,以便在開啟 HTML 頁面時執行 JavaScript。請指定 JavaScript 的 URL (通常是相對 URL)。InDesign 不會檢視 JavaScript 是否存在或有效。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策