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

轉存哪些內容

InDesign 會轉存所有內文、連結和嵌入的圖形、SWF 影片檔案、註腳、文字變數 (做為文字)、項目符號和編號清單、內部交互參照,以及跳到文字或網頁的超連結。表格也可轉存為 HTML。InDesign 會保留表格格式設定,例如表格線條和儲存格線條。表格會有指定的唯一識別碼,以便在 Dreamweaver 中可當作 Spry 資料集來參考。置入的音訊和 h.264 影片檔案會以 HTML5 的 <audio> 與 <video> 標記括住。InDesign 也會轉存您繪製的物件 (例如矩形、橢圓形和多邊形)、貼上的物件 (包括貼上的 Illustrator 影像) 以及轉換為外框的文字。

不會轉存的內容

InDesign 不會轉存超連結 (網頁連結以及跳至同一文件中文字錨點之文字所套用的連結除外)、XML 標記、書冊、書籤、SING 字符檔、頁面切換效果、索引標記、作業範圍上未選取而且未接觸頁面的物件,或是主版頁面項目 (除非轉存前已覆寫或選取)。

轉存為 HTML

  1. 如果不要轉存整份文件,請選取要轉存的文字框、文字範圍、表格儲存格或圖形。
  2. 選擇檔案 > 轉存並從存檔類型清單選取 HTML

  3. 指定 HTML 文件的名稱和位置,然後按一下儲存

  4. 在 HTML 轉存選項對話框中,指定一般影像進階區域中所需的選項,然後按一下確定

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

HTML 轉存選項

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

一般

一般選項
一般選項

轉存:

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

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

內容順序:

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

基於頁面佈局: 項目在頁面上的位置會決定閱讀順序。

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

(僅限亞洲版本) 如果選取「基於頁面佈局」,則 InDesign 會根據文件裝訂來決定頁面物件的閱讀順序 (從左至右或從右至左)。

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

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

格式化選項:

選取項目符號和編號的格式設定選項。

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

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

● 對應至依序清單: 將編號清單轉換為使用標記格式化成 HTML 的「清單項目」。

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

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

不要在 HTML 中包含類別:

若您不希望在 HTML 中包含類別,請選取此選項。此選項會在 HTML 轉存時移除標記中顯示的類別ID 屬性。同時也會移除所有 HTML 中顯示的多餘 div 標記。

在 HTML 中包含類別:

選取此選項以在 HTML 中包含類別。

產生 CSS: 指定您是否想要 InDesign 針對轉存的檔案產生 CSS。如果選取「產生 CSS」選項,那麼也可以選取保留本機優先選項,以包含像是斜體或粗體等本機格式設定。

保留本機優先選項: 包含本機格式設定,例如斜體或粗體。

新增樣式表:

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

JavaScript 選項:

選取新增指令碼,以便在 HTML 頁面開啟時執行 JavaScript。InDesign 不會檢視 JavaScript 是否存在或有效。

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

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