2014年7月5日 星期六

布落格寫作05：寫出漂亮的中標和內文















這是大標的示範範例
這是中標的示範範例！
這是小標的示範範例！


這是【基本黑體內文】設定呈現樣態。以下：
我們一直強調，數位文本是 區塊性的寫作文本，換言之，一段概念或想法要用塊狀的方式來做 呈現的處理。這樣才能讓讀者在文本中快速的跳躍閱讀。

【基本內文：走二欄】的設置。以下：
也因為在螢幕閱讀中，讀者是非常沒有耐心的，所以在文字的處理上要特別費心。一般而言，文字要被處理得適合「掃瞄式」閱讀。也就是說，字不要太多，字要大 一點，行距 高一點，然後用黑體字。

最後，這是沒有做任何設計的一般性內文。換句話說，如果你沒有用div再加上class的功能，那麼直接寫下文字時，最後呈現出來的就會是這種樣子。一般而言，最多四行就要分段才好。
＊＊這是分開段落的空白行＊＊。
段與段之間要留一個空白行。如上所示。 ↑ mouseover



一、請寫入中標和內文，再分別做成Div，請看影音教學：


  1. blog寫作設置的代碼
    style=" margin: auto; width: 588px; font-size: 15.4px; line-height: 1.4; "
  2. 做出大、中標及內文的div，請分別再設置class代碼。請參考上面教學影音。
二、請複製下列中標及內文css 語法並於貼入<body>之後：

<style>

/* 大標 */
.bigtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 2.2em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
margin-bottom: 1.5em;
text-align: center;
border-bottom: 3px solid darkorange;
}

/* 大標:hover */
.bigtitle01:hover {
border-bottom: 3px solid #0080FF;
}

/* 中標 */
.midtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.25em;
font-weight: bold;
line-height: 2.4;
text-align: center;
letter-spacing: 0.03em;
margin-top: 1em;
margin-bottom: 1.2em;
border-bottom: 1px solid red;
border-top: 1px solid red;
text-align: center;
}

/* 小標 */
.littletitle01 {
width: 75%;
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
margin-bottom: 0.2em;
border-bottom: 1px solid red;
}

/* 小標:hover */
.littletitle01:hover::after {
content:"   /";
}

/* 基本黑體內文 */
.ironcontent01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.5;
text-align: left;
letter-spacing: 0.1em;
}

/* 基本內文：走二欄 */
.ironcontent02 {
line-height: 1.8;
letter-spacing: 0.1em;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule: 1px outset gray;
}

</style>
三、DIV文字寫作上的各種小問題：

【上手動作！】文字的複製、貼上以及嵌入div：


【上手動作！】快速刪除DIV：


【上手動作！】DIV內的DIV，插入文字：




更多和本文相關的 CSS 影音教學網頁：
  1. 讓 人「讀得進去」的文字安排
  2. CSS 的文字魔術
  3. DIV + CSS 隨心所欲搞定網路排版寫作(二): 放入背景圖
  4. CSS 文字布局快速套用法
  5. 3秒調出漂亮文字布局
  6. 文字安排的大、中、小




張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)