*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
融媒體Wix教學
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
Unsplash圖像集
我的給大學生書單

2012年6月16日 星期六

HTML/CSS基本排版語法



3 組 最基本排版語法
這是數位文本寫作的基本功啊!要會


請先看影音後,再閱讀文字。增加理解的背景經驗…

立刻馬上進階學習:
慢工出細活:搞定DIV的調校  click here↗

排版,就是對網頁內的媒材進行「空間位置關係」上的安排。
在數位文本中,這一思考課題,有二種思考的方法,一是:線式;二是:區塊。
線式是傳統文本的排版基本作法,例如「段落」的概念。在數位文本中,雖然仍有沿用,但卻不是最適合的概念方式。
在數位文本中,基本上,我們是以區塊的既念來思考「排版」的主題。因之,區塊這一種文本組構的概念,在這裡,我們要特別的強調和加以說明。



把文字斷行的二種思考方法:線式的 vs 區塊的

任何文本總要有適當的斷行,才能讓「資料」形成可讀性的內容。
Html文本基本有二種思考的方法:
(一)線式的,<br>是最重要的。因為這是在「線式」概念下直接把文字斷行 的方法。換言之,這是「線式」的斷行方法。
(二)是使用<p>xxx</p>或<div>xxx</div>這一種區塊模式的版面方法。它們會佔住整個行區塊的「面積」,因為整個區塊面積被佔了,所以會把其他媒材,例如文字(資料)擠到下面去,就形成了斷行的果效。這就是一般而言block(區塊)層級的標記語法。也就是以「區塊」之概念來思考排版中的斷行作用。

先看以下範例:

記事本的內容 語法呈現效果(hover here)
文字
斷行
第二行
文字斷行第二行
文字<br> 斷行<br>第二行 文字
斷行
第二行
文字
<p>斷行</p>
第二行
文字

斷行

第二行
文字
<div>斷行</div>
第二行
文字
斷行
第二行
↑click;說明為何要使用區塊標籤

語法說明:
  1. 在我們常使用的寫作軟體「Word」中,要斷行很簡單,只要按一下「Enter」鍵就可以了。這個習慣我們往往也會帶到一般的Html寫作軟體,如「記事本」。但在「記事本」內按「Enter」形成斷行,在網頁的呈現上是沒有作用的。
  2. 要讓文字在網頁內斷行,就要在想斷行的地方下語法<br>,電腦才能知道你的想法。<br>是少數可以單獨使用,不必有成對之結束碼的語法參數。
  3. 我們也可以使用<p>xxx</p>這一成對的語法來形成斷行效果。<p>xxx</p>和<br>的不同之處在於,<br>就是很單純的進行斷行作用,而起始碼<p>和結束碼</p>會在形成斷行作用之際再多加上一行空白。也因為這個特性,一般內文的斷行,往往使用<br>,而段落的斷行,會使用<p>xxx</p>(段落 (Paragraph))。這樣段落就可以形成上、下的空白行。
  4. <p>xxx</p>對瀏覽器而言,是以區塊的概念來運用。換言之,要想像成是一種長方型的編輯區塊。也就是把文字丟進去在長方型的編輯區塊內。
  5. <div>xxx</div>是相同的概念。只是div不用在上、下多出空白空間。



網路寫作與區塊文本,必讀必懂!

數位文本對文本內媒材的安排,不是傳統「書」的那種線性概念的安排方式,而是用「區塊」的概念,來對媒材進行安排、布局。

這是很重要的數位文本寫作之特色技法,請一定要了解。







網頁排版的最基本概念及歷史發展 [video] [click 開\閉]

網頁排版的最重要觀念:區塊版型 [video] [click 開\閉]



區塊物件的範例

語法:

前一行
<div  style="border: 1px solid red; width: 50%;">這一行</div>
下一行

呈現:

前一行
這一行
下一行


按此看變化


說明:
區塊物件,例如<div> xxx </div>,這個DIV區塊,會把版面的寬度完全佔滿。也就是說,有一整個「區塊」感覺的區塊,被宣告為「被佔領」了,別人不得使用。
即使我們對區塊的可使用面積設定為只有使用一半,如上例,widht: 50%,整塊DIV區塊仍是被封閉起來了。



區塊排版概念:區塊內文字的位置:靠左、中間、靠右

以下有三種不同的區塊式的排版語法,都可以來控制文字在網頁中的位置,居左、置中、居右,請看範例。同時也注意一下,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>
文字靠左
文字居中
文字靠右
語法說明:
  1. <center>xxx</center>是最簡單控制文字位置的標籤。很單純把<center>以及</center>之間的所有寫作元素,都將之居中。
  2. <p align="xxx">xxx</p>標籤,同前面所看到的<p>xxx</p>文字斷行標籤是一樣的,只是在<p>之內多增加了「align="xxx"」這一參數。"xxx"的xxx可以填入「left」(左)、「center」(中)、「right」(右)。一般我們會把xxx稱之為align這一參數的參數值。所以align這一參數的參數值可以是left、center、right。我們同時可以看到,<p>這標籤都會自動增加一空白行。
  3. <div align="xxx">xxx</div>這一標籤如同<p>一樣,只是它不會多增加一空白行。如果我們把<p>和</p>之間當作一個段落來看,所以會自動增加一空行;那麼我們就可以把<div>和</div>之間視之為一個「區域」,一個可以進行各種控制變化的區域。
  4. 就瀏覽器的基本預設而言,這三種都是區塊編輯單位,換言之,可想像成是一種長方型的區塊編輯區域。
補充說明:

<center>、<p>、<div>這三個標籤都可以再做更多的參數設定。
語法是跟著時代在變化的,時間的往前走,就有更多的各種效果語法出來。到了後來,就有一種被稱之為CSS的語法安排方式被提出來。style="xxx";(←移入,看下面文字顏色變化)
傳統的語法被稱之為HTML,而在後來更多被發展出來的新式效果語法,就直接用CSS安排方式來處置。

HTML的語法結構是:效果語法一個接一個的平行置放;這容易混亂;
CSS的語法結構是:把所有的效果語法都放在 style="xxx; xxx; xxx;" 這裡面來,可以集中管理。


我們舉二例補充說明,有興趣進一步研究的同學,可自行到網路中搜尋各種更多的控制參數。

<center>標籤的語法參數範例:
語法 <center title="這是用Center的範例"  style="width:300px;background:#FFDAB9;">
這是CENTER標籤的示範語法<br>
文字會在水平中央<br>
一個很常用的語法標籤!好用哦!
</center>
效果
這 是CENTER標籤的示範語法
文字會在水平中央
一個很常用的語法標籤!好用哦!
語法說明:
  1. title="xxx",這一參數是指滑鼠移到裡面時,會跳出xxx說明文字。
  2. style="width:300px; background:#FFDAB9;" width:300px是將段落的寬度設定為300像素,background:#FFDAB9是設定段落內的背景顏色。
<div>標籤語法的參數範例:
語法 <div align="center" title="這是用div的使用範例" style="border: 1px solid #ff7f00; width: 320px;">
這是DIV標籤的示範語法<br>
文字在水平中央<br>
寬度是320像素,
有加上邊線!
</div>
效果
這是DIV標籤的示範語法
文字在水平中央
寬度是320像素, 有加上邊線!
語法說明:
  1. "border:1px solid #ff7f00",是指border邊線寬1像素,solid是實心線,#ff7f00是邊線顏色。

劃出一條分隔線:HTML vs CSS

在網頁的排版中,常常要利用分隔線來告訴讀者文章的某一部分在此停止。

分隔線的標籤很簡單:
<hr>
效果:


分隔線更多html控制參數的應用:

<hr width="50%" color="#ff7f00" size="3" align="center">
效果:

語法說明:

  1. width="50%"是指頁的一半寬度,也可以寫成width="200",是指定寬度200像素。
  2. color="#xxxxxx"是指定線的顏色。
  3. size="3"線的高度是3像素。
  4. 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>


沒有留言:

張貼留言