| 3 | 組 最基本排版語法 |
這是數位文本寫作的基本功啊！要會！
 |
請先看影音後，再閱讀文字。增加理解的背景經驗…
立刻馬上進階學習：
慢工出細活：搞定DIV的調校 click here↗
排版，就是對網頁內的媒材進行「空間位置關係」上的安排。
在數位文本中，這一思考課題，有二種思考的方法，一是：線式；二是：區塊。
線式是傳統文本的排版基本作法，例如「段落」的概念。在數位文本中，雖然仍有沿用，但卻不是最適合的概念方式。
在數位文本中，基本上，我們是以區塊的既念來思考「排版」的主題。因之，區塊這一種文本組構的概念，在這裡，我們要特別的強調和加以說明。
把文字斷行的二種思考方法：線式的 vs 區塊的
任何文本總要有適當的斷行，才能讓「資料」形成可讀性的內容。
Html文本基本有二種思考的方法：
（一）線式的，<br>是最重要的。因為這是在「線式」概念下直接把文字斷行 的方法。換言之，這是「線式」的斷行方法。
（二）是使用<p>xxx</p>或<div>xxx</div>這一種區塊模式的版面方法。它們會佔住整個行區塊的「面積」，因為整個區塊面積被佔了，所以會把其他媒材，例如文字（資料）擠到下面去，就形成了斷行的果效。這就是一般而言block（區塊）層級的標記語法。也就是以「區塊」之概念來思考排版中的斷行作用。
先看以下範例：
| 記事本的內容 | 語法呈現效果(hover here) |
| 文字 斷行 第二行 |
文字斷行第二行 |
| 文字<br> 斷行<br>第二行 | 文字 斷行 第二行 |
| 文字 <p>斷行</p> 第二行 |
文字
斷行 |
| 文字 <div>斷行</div> 第二行 |
文字
斷行
第二行 |
↑click；說明為何要使用區塊標籤
語法說明：- 在我們常使用的寫作軟體「Word」中，要斷行很簡單，只要按一下「Enter」鍵就可以了。這個習慣我們往往也會帶到一般的Html寫作軟體，如「記事本」。但在「記事本」內按「Enter」形成斷行，在網頁的呈現上是沒有作用的。
- 要讓文字在網頁內斷行，就要在想斷行的地方下語法<br>，電腦才能知道你的想法。<br>是少數可以單獨使用，不必有成對之結束碼的語法參數。
- 我們也可以使用<p>xxx</p>這一成對的語法來形成斷行效果。<p>xxx</p>和<br>的不同之處在於，<br>就是很單純的進行斷行作用，而起始碼<p>和結束碼</p>會在形成斷行作用之際再多加上一行空白。也因為這個特性，一般內文的斷行，往往使用<br>，而段落的斷行，會使用<p>xxx</p>（段落 (Paragraph)）。這樣段落就可以形成上、下的空白行。
- <p>xxx</p>對瀏覽器而言，是以區塊的概念來運用。換言之，要想像成是一種長方型的編輯區塊。也就是把文字丟進去在長方型的編輯區塊內。
- <div>xxx</div>是相同的概念。只是div不用在上、下多出空白空間。
網路寫作與區塊文本，必讀必懂！
數位文本對文本內媒材的安排，不是傳統「書」的那種線性概念的安排方式，而是用「區塊」的概念，來對媒材進行安排、布局。
這是很重要的數位文本寫作之特色技法，請一定要了解。
| 網頁排版的最基本概念及歷史發展 [video] [click
開\閉] |
| |
| 網頁排版的最重要觀念：區塊版型 [video] [click
開\閉] |
區塊物件的範例
語法：
前一行
<div style="border: 1px solid red; width: 50%;">這一行</div>
下一行
呈現：
前一行
這一行
按此看變化
說明：
區塊物件，例如<div> xxx </div>，這個DIV區塊，會把版面的寬度完全佔滿。也就是說，有一整個「區塊」感覺的區塊，被宣告為「被佔領」了，別人不得使用。
即使我們對區塊的可使用面積設定為只有使用一半，如上例，widht: 50%，整塊DIV區塊仍是被封閉起來了。
區塊物件的語法形式：HTML vs. CSS
區塊排版概念：區塊內文字的位置：靠左、中間、靠右：HTML形式語法
以下有三種不同的區塊式的排版語法，都可以來控制文字在網頁中的位置，居左、置中、居右，請看範例。同時也注意一下，center, h1, p, div，這些都是區塊型的排版作用。
| 文字位置語法 | 呈現效果 |
| 這是來呈現<center>文字居中< /center>區塊型標籤作用的效果。 | 這是來呈現 |
| <h1
align="left">文字靠左</h1> <h1 align="center">文字居中</h1> <h1 align="right">文字靠右</h1> |
標題靠左標題居中標題靠右 |
| <p
align="left">文字靠左</p> <p align="center">文字居中</p> <p align="right">文字靠右</p> |
文字靠左 文字居中 文字靠右 |
| <div
align="left">文字靠左</div> <div align="center">文字居中</div> <div align="right">文字靠右</div> |
文字靠左
文字居中
文字靠右
|
語法說明：
補充說明：- <center>xxx</center>是最簡單控制文字位置的標籤。很單純把<center>以及</center>之間的所有寫作元素，都將之居中。
- <p align="xxx">xxx</p>標籤，同前面所看到的<p>xxx</p>文字斷行標籤是一樣的，只是在<p>之內多增加了「align="xxx"」這一參數。"xxx"的xxx可以填入「left」（左）、「center」（中）、「right」（右）。一般我們會把xxx稱之為align這一參數的參數值。所以align這一參數的參數值可以是left、center、right。我們同時可以看到，<p>這標籤都會自動增加一空白行。
- <div align="xxx">xxx</div>這一標籤如同<p>一樣，只是它不會多增加一空白行。如果我們把<p>和</p>之間當作一個段落來看，所以會自動增加一空行；那麼我們就可以把<div>和</div>之間視之為一個「區域」，一個可以進行各種控制變化的區域。
- 就瀏覽器的基本預設而言，這三種都是區塊編輯單位，換言之，可想像成是一種長方型的區塊編輯區域。
<center>、<p>、<div>這三個標籤都可以再做更多的參數設定。
語法是跟著時代在變化的，時間的往前走，就有更多的各種效果語法出來。到了後來，就有一種被稱之為CSS的語法安排方式被提出來。style="xxx";（←移入，看下面文字顏色變化）
傳統的語法被稱之為HTML，而在後來更多被發展出來的新式效果語法，就直接用CSS安排方式來處置。
HTML的語法結構是：效果語法一個接一個的平行置放；這容易混亂；
CSS的語法結構是：把所有的效果語法都放在 style="xxx; xxx; xxx;" 這裡面來，可以集中管理。
例如：劃出一條分隔線：HTML vs CSS
在網頁的排版中，常常要利用分隔線來告訴讀者文章的某一部分在此停止。
分隔線的標籤很簡單：
<hr>
效果：
分隔線更多html控制參數的應用：
<hr width="50%" color="#ff7f00" size="3" align="center">
效果：
語法說明：
- width="50%"是指頁的一半寬度，也可以寫成width="200"，是指定寬度200像素。
- color="#xxxxxx"是指定線的顏色。
- size="3"線的高度是3像素。
- align="cneter"是指分隔線居中，align="xxx"的參數值還可以是left靠左、right靠右。
使用CSS語法來取代 Html的語法呈現：
<hr style="width: 50%; border: none; height: 3px; background-color: #ff7f00; margin: auto;">
為什麼要用CSS來取代HTML：
一、HTML的語法結構是：效果語法一個接一個的跟著〔物件標籤（div, p, hr, ...）〕平行置放，多了之後容易混亂；
二、CSS的語法結構是：把所有的效果語法都放在style="xxx; xxx;"這裡面來，可以集中管理。尤其是以後要做互動效果時，更是方便好用啊。只要去動一個style就可以了。
三、CSS的效果語法是一致的，只要學一次就通用。Html，很亂的。
四、早期的html語法，都可以找到相對應的CSS來使用。所以，HTML除了來「被瞭解一下」，就再也沒有人要去使用了。
DIV排版功能常用CSS
/*寬、高*/
style="width: 200px; height: 200px;"
說明：通常只寫寬度，高度讓內容決定。也常用 XX% 指定寬度。
/*裡面字的顏色*/
style="color: red;"
說明：也可以寫顏色代碼，請參考
/*DIV內容物位置*/
style="text-align: left;"
說明：text-align: center; //left, center, right，內文居左、中、右。
/*DIV本身居中*/
style="margin: auto;"
說明：寬度要小於編輯區域才有用。
/*DIV本身靠右*/
style="margin-left: auto; margin-right: 0px;"
說明：兩者要一起寫。Xpx是與右邊界距離。
/*邊框*/
style="border: 1px solid gray;"
說明：也可以單獨控制四個邊，border-left: xxx; //left, top, bottom, right
/*背景色*/
style="background-color: lightgray;"
說明：也可以寫顏色代碼，請參考
補充說明：
如果html和CSS都有設定相同的功能，那麼是以CSS的設定為準。
核心觀念：區塊位置 VS 區塊內容位置
區塊是數位文本寫作，和傳統文本寫作，在思考上最大差別之處。
有二個觀念一定要弄清楚：
一、區塊本身的版面位置，例如區塊是在版面的左、中、右的那一邊。
二、區塊內，內部的內容在區塊內的位置。
這二個不同的觀念一定要弄清楚，而且要會操作。
範例：
<div style="width: 60%; border: 1px solid gray; color: red; text-align: right; margin: auto; background-color: #f0f0f0;">
這是內文。
這是內部的編輯元素，文字、圖像、影音。這是內部的編輯元素。
</div>
這
是內文。
這是內部的編輯元素，文字、圖像、影音。這是內部的編輯元素。
本課程最常用的DIV標 準設定：
<div style="margin: auto; widht: 640px;">
本課程寫作的標準設定。
</div>
比 較：DIV內容 物的位置 vs DIV本身的位置
<div style="text-align: center; border: 1px solid red; width: 50%;">
這是內文。
這是內文。
這是內文。
</div>
這是內
文。
這是內文。
這是內文。
<div style="margin-left: auto; margin-right: 5px; border: 1px solid red; width: 50%;">
這是內文。
這是內文。
這是內文。
</div>
這是內文。
這是內文。
這是內文。
練習：請做出下列範例
這是練習的文字。
這是練習的文字。
練習題：
一、請設定寬度75%，DIV居中，內文靠右。
二、設定寬度60%，DIV右左，內文居中。
延伸練習：CSS的文字語法
| 語法 |
參數 |
呈現 |
| font-family: Verdana, '微軟正黑體'; |
新細明體；標楷體 |
標楷體 |
| font-size: 1.2em; |
15px; 150%; |
字
型放大 |
| font-weight: bold; |
normal; |
粗
體 |
| letter-spacing:0.3em; |
3px; |
字距加大 |
| color: darkred; |
orange; |
字體顏
色 |
| font-style: italic; |
normal; |
字體形狀 |
| text-decoration: underline; |
line-through; |
字體底線樣式 |
| line-height: 1.2; |
2; |
行的高度
|
區塊內的區塊設定方式
在區塊標籤內，仍是可以再設定區塊標籤，以產生排版上的變化。
語法：
<div style="border: 1px solid gray; text-align: center;">
<br>
<br>
在區塊標籤內，以產生排版上的變化。<br>
在區塊標籤內，仍是可以再設定區塊標籤，以產生排版上的變化。<br>
<div
style="border: 1px solid red; width: 60%; margin-left: auto; margin-right: 10px;">
仍是可以再設定區塊標籤，以產生排版上的變化。<br>
</div>
在區塊標籤內，仍是可以再設定區塊標籤。<br>
<br>
<br>
</div>
呈現
在區塊標籤內，以產生排版上的變化。
在區塊標籤內，仍是可以再設定區塊標籤，以產生排版上的變化。
仍
是可以再設定區塊標籤，以產生排版上的變化。
在區塊標籤內，仍是可以再設定區塊標籤。延伸練習：整頁的設定
<body style="border: 1px solid gray; margin: auto; width: 640px;">
<br>
<br>這是「整頁面」的設定，要設定在<body xxx>裡面。
<br>
</body>
沒有留言:
張貼留言