HTML/適應word

出自六年制學程
在2024年3月20日 (三) 11:05由林芸伍對話 | 貢獻所做的修訂版本

(差異) ←上個修訂 | 最新修訂 (差異) | 下一修訂→ (差異)
跳轉到: 導覽搜尋

2010

寫html用word讀存docx或pdf去7-11印
載入CSS 可連圖照 可連圖照僅接受檔內的內嵌圖照
不能顯示連結的圖照

前置處理

  • 雖會忽視「<!DOCTYPE html>」,但仍建議這樣寫,以便使用下一項<meta charset='utf-8' />。
  • 接受「<meta charset='utf-8' />」
  • 須<html xmlns:w='urn:schemas-microsoft-com:office:word'>才能進入整頁模式
    1. xmlns:聲明名字空間,xml名字空間(namespace)。作用是使同名字的元素或屬性因隸屬不同的名字空間而可以區別。
    2. w:名字空間的前綴,即等號後面的指示,用 w 為前綴來代表。
    3. 等號之後是名字空間的唯一標識符,是一個IRI(國際化資源標識符,Internationalized Resource Identifier)引用,但通常是一個URI(統一資源標誌符)引用。此例中是(uniform resource name)urn:架構們-微軟-com:辦公室軟體:文字處理。
    4. 名字空間的聲明就是:將一個前綴與一個URI關聯起來
    5. 不直接使用命名空間的URI是因為URI為了唯一通常會很長,直接使用URI不但造成書寫和閱讀的不便,還會擾亂XML的語法。
    6. 聲明名字空間時,也可以不定義前綴。未定義前綴的名字空間將被用作預設的名字空間。
    7. 名字空間的URI僅僅是唯一的標識符,推薦規範不要求,也不建議通過其獲取信息。XML解析器處理名字空間URI時,也僅僅將其作為字符串。例如,地址為 http://www.w3.org/1999/xhtml 的文檔並不包含任何代碼,它僅僅為人類閱讀者描述了XHTML名字空間。之所以採用URI(如'http://www.w3.org/1999/xhtml')來標識名字空間是因與使用簡單的字符串(如xhtml)相比,URI大大降低了名字空間重名的可能性。
    8. 文檔中的元素名和屬性名可以加前綴(如xhtml:hr)也可以不加前綴(hr)。不加前綴就會被認為屬於預設名字空間,如果預設名字空間沒有定義,則屬於無名字空間。
    9. 可聲明取消已定義的名字空間,如:xmlns:xhtml=""。
    10. 當一個元素帶有屬性xmlns="",該元素和它的後代被視為「無名字空間」。
  • 以整頁模式顯示:
<!--[if gte mso 9]>
<xml>
 <w:WordDocument>
  <w:View>Print</w:View>
 </w:WordDocument>
</xml>
<![endif]-->
  • title標籤,決定頁名。
  • 以<link rel='stylesheet' type='text/css' href='網址' />來載入樣式表
  • style段落中
@page 樣式值 {size:寬 長;margin:上 右 下 左;}
.nicetable {border:1px solid black;border-collapse:collapse;}
.nicetable td{border:1px solid black;border-collapse:collapse;}
  • body 中 以<div style='page:樣式值;'>…</div>包起文件內容

方盒子模型(Box Model)

  • padding(內距):
    1. 控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
    2. 不可以設定負值,這點與 margin 不同。
    3. 基本語法範例:

      padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;

    4. padding:auto;:讓瀏覽器自己去設定
    5. padding:%;:讓瀏覽器自己去設定,跟邊界元素有關。
  • margin(邊沿):
    1. 控制一個區域(例如 DIV 或 span)的外邊界距離,俗稱外距。
    2. 可以設定負値,會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如,我們將 A 區塊的 margin-bottom 設為 0 , B 區塊的 margin-top 設為 -10px ,那麼 B 區塊的文字就會疊到 A 區塊的文字上。
    3. 基本語法範例:

      margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;

    4. margin:auto;:讓瀏覽器自己去設定。
    5. margin:%;:讓瀏覽器自己去設定,跟邊界元素有關。
  • border(邊框):
    1. 邊框粗細:用長度表達
    2. 邊框顏色:可以使用色標準色碼或顏色的英文名稱表達
    3. 邊框樣式:可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等:
      border-style:solid;
      border-style:dotted;
      border-style:dashed;
      border-style:double;
      border-style:outset;
      border-style:groove;
      border-style:ridge;
      border-style:inset;
      border-style:none;
    4. 雙刪除線:<span style='position:relative;top:0.7em;border-top:5px double red;'><span style='position:relative;top:-0.7em;'>雙刪除線</span></span>
      • 先用 position:relative; 讓元素「可用top」以相對其「原本該出現的所在位置」,調整至新位置。
      • 再用 top:0.7em; 在上方塞約半個字,使上框線下降約半個字
      • 最後增加一個子元素,用 top:-0.7em; 讓字回到「原來該出現的位置」。
      • 須要如此做的原因是因為 text-decoration: 樣式只能畫單刪除線,無法指示畫出雙刪除線。

長度單位

  1. 百分比:對表格寬度有效,「style='width:百分比'」,可以帶小數點。對表格高度無效。
  2. 無單位數字:對表格寬度和高度有效,圖照的長、寬,word只接受「width=無單位數字 height=無單位數字」。

而此數字代表多寬:

    • Word 2016 以上的版本,每英吋 96 點的設定,不受螢幕解析度設定的影響。
    • Word 2010 以下的版本,每英吋 96 點的設定,只適用螢幕解析度 100% 。由「控制台/外觀及個人/顯示/」控制,如:
      96dpi(100%)則 96 個寬度單位為1英吋
      120dpi(125%)則 120 個寬度單位為1英吋
  1. 公分及 pt :對表格的寬、高設定有效。pt固定設定每吋72pt。
  2. 指定欄寬要有效,必須幾乎所有的 cell 都對其設有寬度。

換頁

<br style='page-break-before:always' />

將圖包在P標籤中

  • 在表格中,P不要帶任何字,直接設P為「style='text-align:center;'」這時圖在會表格中水平置中。
  • 設P為「style='vertical-align:top;'」讓圖的上緣與字的上緣對齊。
  • 設P為「style='vertical-align:middle;'」讓字對圖垂直置中。

表格榻陷

如果表格整列都沒有內容,在 word 中會榻陷是極扁的列,此時在表格中加空白沒用,但加&nbsp;即可避免表格榻陷。

表格中的 <li> 會錯亂

從 word 2007~2019 表格內的 <li> 會跨格從 1 往下編,無視 ul,ol,type,start,style='list-style-type:???' 。

解決的方法:到 https://www.aconvert.com/tw/document/html-to-doc/ 去轉檔,再用 word 讀取,此時列點被轉成「外凸段落」才能正常顯示。

其他的 html-to-doc 尚未發現成功的例子。

HTML 中圖靠右且文繞圖,不會表現

  1. 如果圖包在 div 中,由於 word 不承認 div ,所有 div 的屬性設定均不表現。
  2. 如果圖包在 p 中, p 靠右會表現,但文繞圖不表現。

手動設定文繞圖的步驟:

  1. 查出圖應有的長寬
  2. 插入圖
  3. 依 1. 調大小
  4. 靠右
  5. 設為文繞圖
  6. 用「取代」用「空字串」換掉多餘的「^p」

HTML 中將圖置於表中,整個表靠右且文繞圖,會表現

但圖露出多少,受 line-height 設定影響,可以設「line-height:100%;」讓圖完整露出。

但 paragrap_u8.css 預設表格內 line-height:14pt; 解決方法有二:

  1. 引用 class:.putInto :會自動設定 line-height:100%; 並去除表格框線。
  2. 用行內 style 去設定 line-height:100%; 及消除表格框線。

HTML 中 border-collapse:separate ,無法表現

Microsoft 365 Word

載入 css 排版時

  1. 忽略表格內的 padding 設置,一律設為 .75pt 。須手動調整表格的「儲存格邊界」。
  2. 對 table 設置 line-height 會被 th 和 td 重設

字體波浪符偏上問題

  1. 華康與文鼎的半形波浪符「~」會偏上,但是細明體與標楷體沒有這個狀況
    • 因為U+007E的設計不同字體不一樣
    • 建議可以改成U+FF5E,或是全形波浪符(shift+enter 後 shift+~)