HTML/適應word：修訂版本之間的差異
出自六年制學程
（→將圖包在P標籤中） |
（→方盒子模型(Box Model)） |
||
| 第 37 行： | 第 37 行： | ||
*body 中 以<div style='page:樣式值;'>…</div>包起文件內容 | *body 中 以<div style='page:樣式值;'>…</div>包起文件內容 | ||
===方盒子模型(Box Model)=== | ===方盒子模型(Box Model)=== | ||
| − | + | {{:Box Model}} | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
===長度單位=== | ===長度單位=== | ||
2018年11月26日 (一) 15:55的修訂版本
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'>才能進入整頁模式
- xmlns：聲明名字空間，xml名字空間(namespace)。作用是使同名字的元素或屬性因隸屬不同的名字空間而可以區別。
- w：名字空間的前綴，即等號後面的指示，用 w 為前綴來代表。
- 等號之後是名字空間的唯一標識符，是一個IRI(國際化資源標識符,Internationalized Resource Identifier)引用，但通常是一個URI(統一資源標誌符)引用。此例中是(uniform resource name)urn:架構們-微軟-com:辦公室軟體:文字處理。
- 名字空間的聲明就是：將一個前綴與一個URI關聯起來。
- 不直接使用命名空間的URI是因為URI為了唯一通常會很長，直接使用URI不但造成書寫和閱讀的不便，還會擾亂XML的語法。
- 聲明名字空間時，也可以不定義前綴。未定義前綴的名字空間將被用作預設的名字空間。
- 名字空間的URI僅僅是唯一的標識符，推薦規範不要求，也不建議通過其獲取信息。XML解析器處理名字空間URI時，也僅僅將其作為字符串。例如，地址為 http://www.w3.org/1999/xhtml 的文檔並不包含任何代碼，它僅僅為人類閱讀者描述了XHTML名字空間。之所以採用URI(如'http://www.w3.org/1999/xhtml')來標識名字空間是因與使用簡單的字符串(如xhtml)相比，URI大大降低了名字空間重名的可能性。
- 文檔中的元素名和屬性名可以加前綴(如xhtml:hr)也可以不加前綴(hr)。不加前綴就會被認為屬於預設名字空間，如果預設名字空間沒有定義，則屬於無名字空間。
- 可聲明取消已定義的名字空間，如：xmlns:xhtml=""。
- 當一個元素帶有屬性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(內距)：
- 控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
- 不可以設定負值，這點與 margin 不同。
- 基本語法範例：
padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;
- padding:auto;：讓瀏覽器自己去設定
- padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。
- margin(邊沿)：
- 控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距。
- 可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。
- 基本語法範例：
margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
- margin:auto;：讓瀏覽器自己去設定。
- margin:%;：讓瀏覽器自己去設定，跟邊界元素有關。
- border(邊框)：
- 邊框粗細：用長度表達
- 邊框顏色：可以使用色標準色碼或顏色的英文名稱表達
- 邊框樣式：可以設定實線(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;
- 雙刪除線：<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: 樣式只能畫單刪除線，無法指示畫出雙刪除線。
長度單位
- 百分比：對表格寬度有效，「style='width:百分比'」，可以帶小數點。對表格高度無效。
- 無單位數字：對表格寬度和高度有效，圖照的長、寬，word只接受「width=無單位數字 height=無單位數字」。
- 而此數字代表多寬，由「控制台/外觀及個人/顯示/」控制，如96dpi(100%)則96個寬度單位為1英吋；120dpi(125%)則120個寬度單位為1英吋。
- 公分及 pt ：對表格的寬、高設定有效。pt固定設定每吋72pt。
換頁
<br style='page-break-before:always' />
將圖包在P標籤中
- 在表格中，P不要帶任何字，直接設P為「style='text-align:center;'」這時圖在會表格中水平置中。
- 設P為「style='vertical-align:top;'」讓圖的上緣與字的上緣對齊。
- 設P為「style='vertical-align:middle;'」讓字對圖垂直置中。
表格榻陷
如果表格整列都沒有內容，在 word 中會榻陷是極扁的列，此時在表格中加空白沒用，但加 即可避免表格榻陷。
