- InDesign 使用者指南
- 了解 InDesign
- InDesign 簡介
- 工作區
- 生成式 AI
- InDesign 簡介
- 建立文件及編排版面
- 加入內容
- 文字
- 印刷樣式
- 設定文字格式
- 審核文字
- 拼字檢查和語言字典
- 新增參照
- 樣式
- 表格
- 互動性
- 圖形
- 顏色和透明度
- 尋找和取代
- 共用
- 發佈
- 延伸 InDesign
- 疑難排解
中性語言:自 InDesign 2022 (17.0 版) 起,我們即將修改缺乏包容精神的相關用語,以體現 Adobe 重視包容力的核心價值。在英文、丹麥文、匈牙利文、西班牙文、義大利文、葡萄牙文 (巴西) 和日文版的說明文章中,提及「主版頁面」之處一律從「Master page」(主版頁面) 改成「Parent page」(上層頁面)。
轉存為 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
-
如果不要轉存整份文件,請選取要轉存的文字框、文字範圍、表格儲存格或圖形。
-
選擇「檔案 > 轉存」,並從「存檔類型」清單選取 HTML。
-
指定 HTML 文件的名稱和位置,然後按一下儲存。
-
在 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 是否存在或有效。