數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2012年10月31日 星期三

讓圖像說更多:DIV + 照片的變化處理



影像視覺投 射出意義!

圖像畫面的細微變化,不是為了悅目,而是要呈現出更多豐富意義。
DIV + 圖像背景圖 + 文字寫作 的整合性寫作技法


DIV + 背景圖 + 文字的圖文寫作之前後對比#1


為什麼不直接對影像進行變化作用,而是要把影像以背景圖的方式塞到DIV,再對DIV進 行變化作用呢?

before
after



那是因為,把圖像以背景圖方式塞到DIV中,可以「圖文整合」表達出更多層次的、可以互動的圖像豐富意義。只要你有能力掌握DIV…

寫作 v.s. 排版#2


數位文本的寫作是一種「有版型概念下的寫作」,換言之,在下筆之前即要構思區塊文本之內異質媒材之間的「排版」關係。
例如,陰影的使用,代表「立體化」;立體化代表「對象化」的強調。對象化,代表對描述客體的加重意義。
圓框化,代表對圖像在意義上的一種柔化的意義呈現。
圖像細微的變化所產生的「意義感受」和文字的寫作搭配起來,會形成豐富層次的意義表達。


數位文本創作者,用傳統的平面術語而言,應是作者、文編和美編的三合一。這並不是媒體競爭環境中對工作人員精簡需求下而來的工作者「多技能」要求,而是數位多媒材文本多重形構寫作概念下的「必要寫作技能」。


#1
網路寫作的「視覺性」
網路文本要重視「視覺性」, 或著說網路新聞的記者要有「為視覺效果而寫作」的能力。
--Stovall(2004),Web Journalims.
Artwick 強調,記者在構思新聞的結構時要有「視覺化的思考」(thinking visually)(Artwick, 2004: 151)。強調「視覺化」指的是要重視數位文本的「呈現樣態」,用傳統平面的術語,亦即是要重視「版型」,而並不是要多用圖像或是濫用圖像,這是一般所常被(學生)誤解的。

因之,視覺化寫作所強調的,即是「版型」的概念對創作者在寫作過程所提出的新要求;如果在螢幕閱讀中掃瞄是最重要的閱讀行為,那麼「版型」之於數位文本的創作,在重要性上就更勝於在其他媒介之上。

照片處理,就是數位文本「版型寫作」模式的必要寫作技能


陰影、圓角效果語法範例#3


「照片處理的前後對比#1」這一文本區塊的完整語法:
<div style="-webkit-box-shadow: 2px 4px 5px gray; background-image: url(https://c1.staticflickr.com/3/2853/33832379760_80526cd4f4_b.jpg); border-radius: 25px; float: right; height: 202px; margin: 10px; width: 270px;">

<span style="font-size: 130%;">after</span></div>

<div style="background-image: url(https://c1.staticflickr.com/3/2853/33832379760_80526cd4f4_b.jpg); height: 202px; margin: 10px; width: 270px;">

<span style="font-size: 130%;">before</span></div>
語法說明:
style="-webkit-box-shadow: 2px 4px 5px gray;",這是陰影框的語法。2px 指陰影 x 軸右移2px,4px 指陰影 y 軸下移 4px, 5px 是指陰影的擴散範圍。gray 是指陰影的顏色,灰色。
style="border-radius: 25px;",這是圓角框的語法。25px 是指彎曲度。

使用kompozer的影音教學:





影音教學中的CSS:
<style>
.divshadow {
-webkit-box-shadow: 2px 2px 2px gray;
}

.divradius {
border-radius: 25px;
}
</style>


對圖像的處理,有二種思考方法,一是對圖像本身進行後製處置。二、把圖像以背景圖方式塞入DIV,再對DIV進行變化操作。第二種方法是我們在此所要強調的,建議常以此種方式來思考對圖像的使用。


新聞是一種「創作」,本來就是,一種有特定規則的創作。

但正如我課堂講的,網路新聞的「閱讀性」,已從「時間性」轉往「空間性」,也就是我愛談的「排版寫作」。

換言之,形式是要帶入對意義的表達過程。

就這點而言,亦即就「空間性」的構思而言,往往易有靈感「枯竭」之感。

來,請看這本…
《前衛藝術理論》
Theorie der Avantgarde
http://www.books.com.tw/products/0010069676

請你不要想去「讀懂它」,真的。你功力遠遠不夠。
但要去翻一下,
前衛藝術,或是現代藝術(以及可能的當代藝術),
有很多範例,
光是作品本身就會給你很多想像。
讓你敢「跨出去」。

補上這本http://www.books.com.tw/products/0010551638
《當代藝術這麼說》





2012年10月28日 星期日

圖文整合寫作的圖像編輯 三步驟搞定!






圖像處理  三步驟
1 視覺焦點
2 主體呈現
3 背景層次
三步驟,精準完成圖文整合。





果有照片之類的東西,就需要在新聞中以某種方式提及,並使讀者把兩者聯繫起來。如果不想在圖片下面加上長的圖片說明或圖片說明區,那就應該在正文中提及圖片。……。如果圖像與文字不吻合,大腦會自動地選擇圖像而拒絕文字。但這樣令人費解,從而會導致新聞報導的失敗(Wolk/彭蘭等譯,2003:92)。
  ──Wolk, R.(2003)。《網絡新聞導論》(彭蘭等譯)。北京:中國人民大學出版社。





1 視覺焦點

視覺焦點:是指當受眾接觸到圖像後,視覺會在圖像上所停止的位置,然後再從此位置開始對圖像的內容及意義進行深一層的理解。

Robert Clay :
眼睛在漫步時,它們還需要有休息的地方,或者為之停留的焦點。
── (2010: 132),《設計之美》。

一般而言,如果畫面沒有特別的設計有意將受眾的視線特定引導到畫面某一「定點」,那麼受眾會依由左而右、由上而下的次序,掃瞄井字型的四個交义點區域,再判定要停在那區域,即視覺焦點,並進行圖像的理解和解讀。

因此,影像媒材的創作者,最好將能凸顯出「針對性」意義的物件元素放在井字型的四個交义點區域。

以下範例,請你移動滑鼠, 找一下視覺焦點在井字型構圖線的那裡。












2 主體呈現

主體呈現:依上述,被放置在井字型四交义點附近區域的物件元素,是為了讓讀者可以快速理解出圖像內具有「針對性」的意義,以與其他媒材進行互文性的理解。

因之,這「物件元素」應是能讓受眾從畫面中形成主體或主題判斷的「重要關係物件」。

下圖是 Dawkins & Wynd 在 Vidoe production: Putting theory into practice 一書中所舉的圖例。四個小朋友的頭部大約集中於橫上方線,共同形成小朋友「群集」的主題。

資料來源:Video production (p. 70), by S. Dawkin & A. I. Wynd, 2010, New York : Palgrave Macmillan.

3 背景層次

背景層次:在畫面中,被判斷成「主體」或「主題」物件元素之外的其他部分,就是背景區域。背景區域會烘托或襯托主體的意義深度或複雜度。

圖像的背景會對圖像與其他媒材形成共構式互文作用解讀時,產生更為豐富的意義添加。

更多的圖例,是我的隨手拍,但也都依井字型構圖法來思考圖像表現,拍得有好有壞,各位可以一張一張看看,我拍攝時心中主體是什麼?


簡單的主題是最好的,用一張主題明確的簡單照片,不要讓讀者疑惑。 Golombisky, K, & Hagen, R./林安琪、于冠雲譯(2012)。《設計之鑰》。台北市:碁峰。 p. 133。


圖像拍攝與精準的意義

視覺焦點、主體呈現與背景層次,這樣的對圖像的解讀過程,是為了要讀出圖像的精準意義出來。

圖文整合,在於文字和圖像要共同作用之下,來形成「共構式」的意義給出。這是多重型構式的文本。即,文字和圖像扮演「同樣重要」的角色。

所以,圖像被解讀出來的意義,一定要清楚。否則,圖文整合式的共構式文本構成,就無法產生可被理解的意義。

再講一次,視覺焦點、主體呈現與背景層次,是解讀出圖像意義的過程。所以,你選擇出來的圖像,要能被以如此的方法來解讀出來。

同樣的,如果你是拍攝者,你就要以這種「構圖方式」來拍攝出圖像。如此,讀者才能解讀出你的拍攝意圖出來。

參考資料:

李明哲(2013)。《多媒體互動新聞寫作:理論與實務》。台北:五南。




4 電視新聞畫面的構圖

來自BBC的新聞畫面,請觀察「如何使用構圖法則」來拍攝畫面。






2012年10月26日 星期五

又一超好用的 image gallery,忍不住要教!



超適合新聞報導用的 Image Gallery! 驚奇!
有大圖、小圖、圖說,可以完整的用Galley來說上故事。
快速。好用。支援中文。幾個步驟,簡單語法,馬上嵌入網頁。

實例展演

秋高氣爽,最適合上陽明山。那是我愛得不得了的山。光是看著陽光灑上樹葉上的綠,心中的莫名就愉快了起來。這種時節,去文化大學上課是很棒的。乾爽的空氣會導引著你>>

Free! 我超愛
Juicebox


執行步驟:

  1. 到 Juicebox 官方網站下載免費的 Juicebox-Lite。檔案為Zip壓縮檔。
  2. 解壓縮。執行 JuiceoxBuilder-Lite.air。xx.air檔,表示你要下載Adobe AIR,安裝,才能執行Juicebox。一般而言,如果你有安裝Adobe CS,就會有安裝Adobe AIR。
  3. 執行後,跟著4個步驟做,很快就完成了。我的教學影音很詳細>>。
  4. 把完成作品的「資料夾」,放到網路空間或新聞系的FTP
  5. 再簡簡單單的下<iframe>語法,就可以嵌到網頁的Html中了。


用<iframe>嵌入網頁語法:

<iframe frameborder="0" height="600" scrolling="no" src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/gallery1026/juicebox1026/index.html" width="580"></iframe>
語法說明:
  • 紅色部分為做好的資料夾中 index.html 檔案的網址位置。此例放在新聞系FTP。
  • <iframe>xxx</iframe>中的寬度 widht="xxx" 和高度 height="xxx"要特別留意一下。<iframe>的寬度要比「大相片」的寬度為寬才行,依我的經驗我會依相片的寬度再多加上40~60px。如依此例,相片是540px,我再加上40px,所以是width="580"。高度也一樣,最好是依相片的高度,再加上照片的三分之二的數值。依此例,高度是360,360的三分之二是240,所以是height="600"。



Q&A: 要改變圖片的大小,如何找出正確的長、寬數字?很簡單,影片>>



影音教學實作作品: 在城市與公園的界線中間>>


往外一跨,即是另一世界。
綠與藍的寂靜,一時間就無蹤無影。
城市的樂趣,就在此,一步間,
站在界線的中間,
我想,
張開雙臂擁抱。

2012年10月25日 星期四

數位寫作:文字對齊的選擇


文字對齊的選擇?

文字對齊模式有四種,
其實會形成不同的視覺效果,
這代表不同的文字位階。


4種靠法:大家都知道,在處理文字的「靠邊」形式,共有四種。靠左、靠右、置中、左右對齊。但,大概你沒有想過,什麼時候用那一種「靠邊」模式,才算「合理」。

主文:就中文字而言,一般的主文,我們會選擇「左右對齊」。因為這會讓文字形成一種文字塊,讓人知道,裡面有很多豐富的訊息想讓你知道。而且訊息量還很多呢!同時,文字塊也有一種較為「正經」的視覺效果,因之一般的「內文」、「主文」等概念下的文字,最好都以「左右對齊」的格式來處理。

標題:那「靠左」、「靠右」以及「置中」這種模式,因為不會形成文字塊狀,至少會有一邊形成不規則狀,這就有某種「對比性」的視覺效果。適合,「標題」概念下的文字,或是「圖說」概念下的文字。

觀察:有了以上的概念,你就可以去觀察文字對齊方式被使用的時機 。我講的只是一個大方向,你最後會形成自己的「文字排列設計法門」。
在版面中的主要文字部分以兩邊對齊的方式放上文字,塑造一種塊面感,並產生一 種力度。
──夏井藝華,《版面設計》





補充資訊# 1:
陰 影框語法
<div style="-webkit-box-shadow: 1px 1px 3px gray; font-size: 130%; font-weight: bold; line-height: 36px; padding: 10px 10px 10px 10px; width: 260px;">
文字對齊模式有四種,<br />
其實會形成不同的視覺效果,<br />
這代表不同的文字位階。<br />
</div>
語法說明:紅色字,即為陰影框的語法。1px x軸位移1px,1px y軸位移1px,3px 陰影柔化範圍 3px,gray 陰影顏色灰色。

補充資訊# 2 :
中文字左右對齊的語法如下:
<div style="text-align: justify;  text-justify: distribute; width: 380px;" title="內文,所以是左右對齊。">
xxxxx
</div>
語法說明:中文較為麻煩,所以紅色兩部分兩者都要寫進去。

2012年10月21日 星期日

數位新聞的寫作結構:分層文本結構


走出「線性結構」,學會「分層文本」寫作


傳統的報紙文字寫法,即是線性結構;
也就是所謂線性文本。
數位文本的文本結構,是「分層文本」結構;
你需要重新來學習。




➲ 文本的結構?

我們一般大概很少去想到:平常在寫、或拍的新聞作品,其實敘事開展的過程是有結構的。在學習數位文本/數位新聞寫作,最大的困難,並不是那些多媒材掌握的技能,而是在於思考文本表達時,那種寫作習慣上結構性的全新改變。

一般而言,常有四種結構形態來表達文本的結構:

  • 直線式(linear)
  • 階層式(hierarchical)
  • 非直線式( nonlinear)
  • 組合式( composite)

如下圖:
資訊來源:Multimedia: Making it work (p. 409), by T. Vaughan, 2008, New York: Sage. 原圖>>

  組合式:敘事性文本最常用的文本結構

一般的平面、電視等文本的訊息流動,都是直線式的。要從頭看到尾,否則就是中斷閱讀。

數位敘事文本/網路新聞文本,在其文本呈現的結構上最常見的是「組合式的」分層文本>8。讀者在閱讀過程中有極大文本控制權,但同時也不至於無方向感的亂讀。換言之,多媒體互動新聞文本的組構,最好是以「組合式」「分層文本」的想法來表現。

用「分層」的想法來寫文章。哈!我猜一定沒都沒想過。所以 寫起數位文本才會那麼痛苦。因為你忽然發現,用線性的思考方式之外,你變得不會思考了!


上課影音分層文本下的互動文本寫作

1.同層互文、2.淺文本到深文本、3.同層補充,這是數位文本「互動寫作」的三種運用模式>>


➲ 怎麼練習?

就去練習寫作分層文本的文章或新聞啊?

不會!看看這個網站:L.V.

有沒有發現,其實就是你在寫 powerpoint 簡報時的那一回事。將你的資料分成幾個重點區塊,每個重點區塊再依內容的重要性,區分成由上而上的文本分層區塊,形成分層文本結構安排。

真的。最後,只是要更多地在區塊裡加入可以連結到其他文本區塊的「連結點」而已。這也就是我上課的一定會要求的習作練習:用 powerpoin 來寫作一篇多媒體互動文章。

然後,愈是在分層文本的上部分的,訊息要愈簡單,以讓讀者快速掌握。而被安排在分層文本下層部分的,則可以是愈「深入」的訊息。因為讀者已被吸引到這裡來了,他/她想要看的是「更深人、更仔細」的內容。


圓 角框線語法 <div id="20121021" style="border-radius: 15px; border: 2px solid orange; height: 240px; margin-bottom: -240px; position: relative; top: -320px; width: 540px;">
<br />
<span style="color: red;">☆</span> 組合式:敘事性文本最常用的文本結構 <span style="color: red;">☆</span>
</div>
語法說明:紅色字 即為圓角框線的語法,15px 即圓的程度。

2012年10月20日 星期六

版型的重要:新的發現


這個時候,我們要記得偉大的編輯是偉大的溝通者。
這個時候,我們也要記得此地並沒有真正的編輯教育,不要相信新聞系、大傳系曾經訓練出屬於台灣的編 輯,台灣的編輯是自學的。
──詹宏志(1991)。〈序:編輯的人格與風格〉.《創意編輯》(台 北:美 璟文化)。


這的確是我的新發現

當過雜誌的總編輯,對版型的要求,那是一定的。但我一直對數位文本的版型之重要性,不太有感覺。多媒材的整合寫作,一直是我掛心的思考點;版型的力量彷若蒸發。

這陣子,那種感覺又回來了。那是因為我又忙著思考:如何才能創造最好的數位文本在閱讀上的「掃瞄效果」。掃瞄,是螢幕閱讀的「正常」行為!

那麼,數位文本中版型的結構要如何才能創造最好的「多媒材的掃瞄效果」呢?我思考著。我觀察著。於是,我也試著創作著。



逛到北京.長城

那天天氣好的不得了。 到了北京,長城,吸引我的地方倒是那幾座廟。
我一直好奇,在面對生死交迫的地方,人們如何來呈現出他們對生命的渴 望。
這座香爐,很新。1997年。
看不出向著生死的卑微,而是一種面對富裕的自信。
彷若唐朝的佛像一般,但少了一種對上蒼冥冥的感動。



版型的構思

先來思考版型的構思流程,再來擔心語法問題。這次我們看的是「長城圖片」的左邊部分:
  1. 先作出一個表格。
  2. 寫字寫到想插圖的地方,就插上圖。但是:(1)圖片要設為置左,這會有 float 的效果,亦即字會向右填滿。語法:<img align="left" xxxx>。 (2)用 CSS 在圖片上設定位置向左位移 100px,語法:style="position: relative; left: -100px;"。
  3. 圖片位移後會有空白出來,所以圖片的右邊界要設為內縮 90 px,以補上空白。語法: style="margin-right: -90px;" 。
  4. 再來就繼續寫字寫下去。

完整語法如下:
<table border="0" cellpadding="2" cellspacing="2" style="width: 372px; line-height: 24px;">
<tbody>
<tr>
<td valign="top">那天天氣好的不得了。
到了北京,長城,吸引我的地方倒是那幾座廟。<img align="left" alt="" height="146" src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/image201210/P80951901019.jpg" style="left: -100px; margin-right: -90px; position: relative; margin-top: 2px; margin-bottom: 0px;" width="300" /><br />我一直好奇,在面對生死交迫的地方,人們如何來呈現出他們對生命的渴
望。<br />
這座香爐,很新。1997年。<br />
看不出向著生死的卑微,而是一種面對富裕的自信。<br />
彷若唐朝的佛像一般,但少了一種對上蒼冥冥的感動。<br />
</td>
</tr>
</tbody>
</table>


2012年10月18日 星期四

網路新聞文字寫作技巧 #10 Tips



事實上,你可能寫得比海明威還要好,但那又如何,如果你不知道如何為網頁而寫作。
── Wagner, R. (2006). Web Design.











技 巧 # 1 標題及次標題有重點。文字內容要有具體意義,要能讓讀者快速掌握重點,以決定是否要往下閱讀。

技 巧 # 2 段落不要過長。太長的段落不適合螢幕閱讀,可以將長段落打散成小段落。文字的內容要直指重點,不要浪費讀者的時間。

技 巧 # 3 要充分使用連結功能。要將文字寫成適合螢幕閱讀,那麼文章構思中的更多資訊就要善用連結功能,引導讀者前往。

技 巧 # 4 文字的使用要精簡。不要有多餘的癈話;動詞要精準,不用過多的形容詞。當然,如果你是文學創作,那就另當別論。

技 巧 # 5 善用條列式的寫法。條列式的寫法可以讓讀者一目了然,快速掌握重點。

技 巧 # 6 隨時整理出小標。小標可以讓讀者不會害怕網路中的大量文字。要讓讀者有耐心看下去,一定要隨時給小標。

技 巧 # 7 多媒體寫作思考。不要什麼都想用文字來表達,有些細節其他媒材可以有更好的表現。當用則用。

技 巧 # 8 增強個人風格式的寫法。個人風格的文體在網路是可以被接受的,但也不要太過分,尤其是寫新聞。

技 巧 # 9 每個段落只有一個重點。不要在一個段落中塞入太多重點,將一個重點談乾淨即可。

技 巧 # 10 經常練習。寫作的文字使用和媒介有很大的關係。如果常寫作網路文章,自然就會感受出文字鋪陳應有的節奏。





陰 影字語法 <td align="center" style="background-color: white; color: white; font-size: 400%; font-weight: bold; text-shadow: gray 1px 1px 3px;" valign="top" width="20%">

網<br />路<br />新<br />聞<br />文<br />字<br />寫<br />作<br />技<br />巧

</td>
語法說明:紅色字,即為陰影字的語法。gray 陰影顏色灰色,1px x軸位移1px,1px y軸位移1px,3px 陰影柔化範圍 3px。



2012年10月17日 星期三

讓文字活起來:重點引文強調的表現


把文字引號起來了



網路書寫,在於文字的表現力上要適合「掃瞄性」。所以,重點強調式的文字框呈現,就是讓讀者快速掌握重點的方式之一。

這種形式的表達,很容易以「表格」的功能來處理。我們可以看一下以下範例如何運用表格。

以下這是一個範例:
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是審美的!……


表格文字框的語法:
<div style="width: 590px;">
<table border="0" cellpadding="5" cellspacing="2" style="border-bottom: 1px solid gray; border-top: 1px solid gray; font-family: '微軟正黑體'; font-size: 130%; line-height: 28px; width: 100%;">
<tbody>
<tr>
<td align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="top" width="10%">「
</td>
<td valign="top">……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……</td>
<td  align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="bottom" width="10%">

</td>
</tr>
</tbody>
</table>
</div>


思考過程:


.先做出一個一列三欄的表格:
  • 左右格各設為整體表格的10%。
  • 整體表格,字體設為「微軟正黑體」,字的大小為130%,行高為28px。
  • 左、右格的字再設為紅色,置中,大小180%,粗體。

10%
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……
10%

.去掉表格格線,再用css的style為表格的上、下加上灰色線。

10%
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……
10%

.再於左、右格去掉「10%」,各加上引號。左格設為置頂,右格設為置底。
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……





▒ CSS 的引號強調作用

這是一段文字。引文的作用在於對文章的重點作出提示。這是網路文字效果運用中常見的技巧手法。這一範例是使用CSS語 法寫成。


CSS語法:使用 class="quo" 即可

.quo {
font-size: 110%;
font-family: '微軟正黑體';
font-weight: bold;
line-height:1.5;
padding: 20px 80px 20px 80px;
background-color: #f0f0f0;
position: relative;
}

.quo::before {
content: open-quote;
font-size: 400%;
font-weight:bold;
position: absolute;
left: 15px;
top: -8px;
}

.quo::after {
content: close-quote;
font-size: 400%;
font-weight:bold;
position: absolute;
right: 15px;
top:-8px;
}



2012年10月14日 星期日

《聯合報》項國寧社長:新聞匯流對記者的改變


2012年10月13日項社長專題演講於銘傳大學舉辦「新興傳播媒體之發展趨勢與影響」論壇。
《聯合報》項國寧社長:
新聞匯流對記者的採訪、寫作會產生物理、化學的改變

X 記者在現場
v 一位記者在到現場後,心中要想的是:
  1. 這則新聞適合那種型態表現,文字為主,video為主,還是整合文本。
  2. 這則新聞要在那個平台出現最好。
v 再來是,「新的科技讓記者增加說故事的方法」。例如,Imagegallery  Slideshow就是說故事的新方法。釋放了傳統媒體所不能做的事情打破了傳統媒體的界線,例如CNN…>>


我的 >> 大跟屁,小評論
這次我請出項社長這位「權威」人物,
再一次來印證老師上課所「屁」的那些東東,
真的不是「屁」哦!
X 記者的技能
因之,聯合報如何來「選擇」記者:


除 了傳統的那些,我們會加考「影音」,video。


2012年10月13日 星期六

我要性感的! 半透明的誘惑 >> 在背景色


真的,我也很喜歡看性感的!

尤其是半透明的那種,癢癢的讓人說不出的「愉悅」。愉悅,這是「文化研究」專用術語啊,同學!。
  • 文化研究是「左派的」,非常「嚴肅」研究流行文化的學問!
我特別喜歡那種「半透明」的,隔上一層的,那種版面的性感。

【段落旋轉語法 ↘】

<div style="font-family: 微軟正黑體; font-size: 210%; font-weight: bold; -webkit-transform:rotate(12deg);">

或者加入互動的class

<style>
.rotate101101 {
-webkit-transform: rotate(0deg);
font-family: 微軟正黑體;
font-size: 210%;
font-weight: bold;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.rotate101101:hover {
-webkit-transform: rotate(6deg);
}
</style>



半透明背景色網頁視覺效果:

 
半透明的背景色!(+)
如果放在圖片上面,背景色就會很性感的
看透過去哦!
但「字」卻仍會清清楚楚,不會變透明的!
語法:
<div style="background-color: rgba(255,181,181,0.2); height: 200px; width: 300px; ">
<br />
<br />
半透明的背景色!<br />
如果放在圖片上面,背景色就會很性感的看透過去哦!<br />
但「字」卻仍會清清楚楚,不會變透明的!
</div>
語法說明:
  • 就用上這個:「background-color: rgba(255,181,181,0.2);」。255, 181, 181,是顏色的RGB碼(>),0.2 是指透明程度。0.0是完全透明,1.0就是不透明了。



背景色   v.s.  透明背景色 (mouseover)
<style>
/* 不透明背景色 */
.bg2016101101 {
background-color: lightgray;
}

/* 透明背景色 */
.bg2016101102 {
background-color: rgba(255,181,181,0.4);
}

</style>


實作影音範例,請按此




背景色的習作:


請做出DIV堆積木法版型。請按此看效果
再請做出不同透明度的背景色,來觀察文本所產生的意義呈現感受。

文字DIV黑色背景色,background-color: rgba(0, 0, 0, 1);
透明層級的變化:     0    0.3   0.5,      0.7,        1   。(←請按看效果




雨天的溫泉鄉

那是烏來,一個在半山中的小鄉。
冬天,飄雨是應景氛圍。
三三兩兩的,是人;
昏昏暗暗的,是路燈的心情。




做法構思:

  1. 先置入一張大圖。
  2. 在圖的下方做一文字框DIV。DIV內寫入標題及內文。
  3. 在標題的文字部分,又設置一個DIV將其包起來。這形成了文字DIV內有標題DIV的結構。
  4. 最後將文字框DIV上移。此即將CSS套入文字DIV內,亦即將class "divword20171108" 設置入文字DIV,即可。


寫作注意事項:

如果上方版面區域的媒材是「圖 片」, 當下方背景圖或背景色,使用 margin-top 的功能上移;當重疊時,那麼背景圖或背景色的功能會失效。

因為,「強勢」的圖片,會蓋住「背 景圖、背景色」。 所以在圖片後面的DIV區塊,如果要使用margin-top去蓋住圖像,則要使用重疊css語法,使 其疊在圖像之上,效果才會出來。例如:

<style>
position: relative;
z-index: 2;
</style>


這樣,圖像下方的DIV區塊的所有效果,就會出來。我要取消z-index功能


我想看文字DIV設定的 style 語法:

<style>

/*文字DIV的CSS*/
.divword20171108 {
box-sizing: border-box;
width: 520px;    /*你可以重新設置寬度,例如width: 560px; ,或是拿掉以預設值來做。*/
margin: auto;
padding: 1em 0em 1em 2em;
background-color: rgba(0, 0, 0, 1);    /*請重新設置參數使其文字DIV透明背景色出現,例如 background-color: rgba(0, 0, 0, 0.3); 。*/
color: white;
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.12em;
margin-top: 0em;    /*請重新設置參數使其文字DIV上移,例如 margin-top: -10em; 。*/
transition: 1s ;
position: relative;           /*以下這二個一定要加才會有文字DIV上升到最上層的效果*/
z-index: 2;
}

/*大標*/
.divword20171108 >div{
font-size: 1.45em;
}

</style>


影音教學:





2012年10月11日 星期四

背景圖的妙用


不必用Photoshop來做圖
把字寫在圖上
就用插入背景圖技巧來完成




要做背景圖這個動作或技巧,是因為我們可以在背景圖上繼續做寫作或編輯的動作。
¡ 可以在背景圖上加字、加圖、加影音等等。
¡ 可以用互動語法,如javascript,來互動地更換背景圖,而不影響圖上的文字等等。
這對圖文整合式的寫作非常重要,根本就是必要技巧!


1 背景圖使用範例(滑鼠移入↓)



掛著的印象是清楚的

一張是大大的牆,貼著許多回憶。但這回憶並不是屬於我的。

那是屬於女兒的。我的早掛於屏東的某個角落。

說明:
DIV、Table等區塊媒材,如果插入背景圖,那麼呈現效果上和圖像是差不多的。但是,這種表現方式有一種優勢,那就是在DIV中,可以繼續寫作編輯元素。更重要的是,這些編輯元素,就可以被互動使用。


2 背景圖技法操作教學



一、插入背景圖之前,請先確定「正確比例」的圖像之寬度與高度。可使用我們教的 stylepix 軟體來測量。
二、之後,就可以依所得之寬度與高度,來設置區塊元素,例如DIV、Table等。


CSS語法(請放置 <head>xxx</head>之間)

<style>
/* 背景圖的設定 */
.bacimg20171014 {
background-image: url(https://c1.staticflickr.com/3/2916/33771841862_c226ef38b6_b.jpg);
background-repeat: no-repeat;
background-size: 480px 320px;    /* 寬度、高度,如果只設寬度,高度電腦會自動算出來 */
background-position: top left;   /* 預設值,對齊DIV的左上角 */
}

/* DIV的樣態設定 */
.divset {
width: 480px;
height: 320px;
text-align: center;
font-weight: 900;
}

</style>



編輯的HTML語法:

<div class="divset bacimg20171014">
這是編輯文字。<br>
</div>



呈現樣態:

這是編輯文本。


背景圖簡易語法說明(詳細教學內容按此):

  1. background-image: url(xxx) 。【xxx為圖像位置網址。】
  2. backgroun-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; 。【不重覆;沿x軸重覆;沿y 軸重覆。】
  3. background-position: top left; 。【圖像位置,在[top,center,bottom] 中三選一, 在[left,center,right] 中三選一。】也可以是 background-position: top 10px left 10px; 。這是指,距離頂部 10px,距離左邊 10px 。
  4. background-size: 480px 320px; 【寬、高度,如果只設寬,高度會自動決定。50% 50%,這是指以背景圖的區塊框(如DIV)為準的比例。cover,這是指圖像自動要填滿區塊框(如DIV)(但圖像可能無法完整呈現)。contain,是指圖像要完整呈現在區塊框內(不一定能完全填滿區塊框)。】


請問,如果「整個網頁」要設背景圖,要如何做?


請把下列的 class 放置於<body xxx>中,即可。

css語法:

<style>
.whobacimg {
background-image: url(圖片的網址);
}

</style>

--------想固定住一張大圖,可以增加的語法------

background-attachment: fixed;    /* 當想使用一張大圖時,背景圖會固定在位置,不會移動 */
background-size: contain;     /* 背景圖會自動變化大小以完整的顯現來符合頁面 */
background-position: top 10px center;     /* 以上方有10px空白,圖像左右中點對準視窗左右之中點 */
background-repeat: no-repeat;     /* 照片不重復出現 */

-------------------------------------------

html語法:

<body class="whobacimg">
x
x
x
</body>


icon圖示:

        



影音教學:



【2012年教案 click here!】

語法說明:
1. 插入背景圖的語法:background-image: url( xxx)。xxx是圖片的位置網址。
2. 這樣圖片就會變成「底圖」,可以在上面繼續寫作、編輯或插入影音聲音等等。


3 網頁中插入背景圖

背景圖同樣也可以放置到整個網頁中。同時,也來處理如何才不會重覆圖像的問題。


語法說明:
1. 圖像不重覆的語法。 background-repeat : no-repeat 。
2. 如果只想讓圖像在 x 軸方向重覆,請用 background-repeat : repeat-x 。
3. 如果是想重覆在 y 軸上,請用 background-repeat : repeat-y 。
4. 這些語法同樣可以用於將圖像以背景圖插入表格、div 等等方面上。


語法補充包
插入背景圖語法整理:
1. background-image: url(xxx) 。【xxx為圖像位置網址。】
2. backgroun-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; 。【不重覆;沿x軸重覆;沿y 軸重覆。】
3. background-position: bottom right; 。【圖像位置,在[top,center,bottom] 中三選一, 在[left,center,right] 中三選一。】



*合併式參數的寫法:


background: lightgray url(圖像網址) no-repeat fixed center / cover;

依次是(不需要的功能參數就不要寫入):

background-color

background-image

background-repeat

background-attachment

background-position / background-size   /* 這兩個要寫在一起才會作用 */


語法範例:

<div style="color: red; border: 1px solid gray; width: 480px; height: 320px; background: url(https://c5.staticflickr.com/6/5552/31292953132_392a535309_b.jpg) no-repeat left 5px top 5px / 420px;">
這是編輯元素。<br>
</div>


呈現:

這是編輯元素。





懶人的超快速手上之影音教學:使用kompozer

影音教學的CSS:

<style>
.backimage101701 {
background-image: url(網片網址);
background-repeat: no-repeat;
background-size: 480px;
}
</style>



3 使用背景圖功能來強調圖像的特定區域

如果想要對圖像的某個重點區域強調。可以先做一個 DIV (設設定寬、高的大小)或是在表格的格子裡,再使用背景圖的功能。
這時要記得:
一、將背景圖放大到你所想要呈現的圖像區域大小之感受。
二、再使用背景圖的移位功能,移動背景圖的所要呈現的區域,到DIV內,來呈現。


請看範例:

單純的圖像↓



使用背景圖強調圖像部分重點↓




範例的html碼:

<div style="width: 400px; height: 300px;" class="backimg20171126"><br>


CSS碼:

<style>

.backimg20171126 {
background-image: url(https://lh3.googleusercontent.com/2_3xxJZRWKWdfzX-FU5e94MyVXpKrXoWgnmISovlP5EEliPfSndI4byEYTGy8gjHysLG34995nn7pq9LQNKONZgW8MN7YE4MTf1SbN7d0msA50fyCsSzTYr7iNXtdoDoaiaUBh90-XcgDNeXmuuX-hMWjqCgh5y0hdHRsoA5P5y6cshZOiw0r7PAyQBryf_zuNhXsSdi5LoTlM4XppGnHTzsFfsdl9c_EVkL5cQsYLZNw-0jE-pTP5zG-1xjHq77HXlIUZ_NuxV7hv0u6lhFPWoRofwpjCSODQmbhHERdo9wlJ0E2cgRCjBVr5juqf7EPyxkRNYHPac0yQ_jNG2Rv7NRli4v1OPekHlk4HzdLGBn23ZU9V85fo0G1CcmZzKttHrSGzAc9yiN7dCPDtB8v0TUxS9P_Q6jEGyF4ZNPeumiwBmLcC_O9exp_1vD2oTOoiTUlAAVNoxFbbRXHoI_is1kH8qDpAL4zXNDX-ALdLCD6RCEBPE94O_e-MDrNtp6cARHKnq7AY2NBxb5wJia5UWD2BLjTVoWUoTEa4k8iUNKKmkwA9AVJihWRG0mEl3V-zs4IBqUc8f-U293aOy0n0MZTt9d2H0wMcMg-8c-GP4NB9nZCPcF_sDEI7-eZhawrG85htaULGkhqp6aairwAcsmCOe2sWGc1zA4=w1099-h824-no);
background-repeat: no-repeat;
background-size: 870px;
background-position: top -140px left -15px;
}

</style>


想 想題練習:

可以利用上面的功能特色,來做出明互動的圖像互動文本意義呈現。





CSS語法:

<style>

.backimg20171126b {
background-image: url(https://lh3.googleusercontent.com/2_3xxJZRWKWdfzX-FU5e94MyVXpKrXoWgnmISovlP5EEliPfSndI4byEYTGy8gjHysLG34995nn7pq9LQNKONZgW8MN7YE4MTf1SbN7d0msA50fyCsSzTYr7iNXtdoDoaiaUBh90-XcgDNeXmuuX-hMWjqCgh5y0hdHRsoA5P5y6cshZOiw0r7PAyQBryf_zuNhXsSdi5LoTlM4XppGnHTzsFfsdl9c_EVkL5cQsYLZNw-0jE-pTP5zG-1xjHq77HXlIUZ_NuxV7hv0u6lhFPWoRofwpjCSODQmbhHERdo9wlJ0E2cgRCjBVr5juqf7EPyxkRNYHPac0yQ_jNG2Rv7NRli4v1OPekHlk4HzdLGBn23ZU9V85fo0G1CcmZzKttHrSGzAc9yiN7dCPDtB8v0TUxS9P_Q6jEGyF4ZNPeumiwBmLcC_O9exp_1vD2oTOoiTUlAAVNoxFbbRXHoI_is1kH8qDpAL4zXNDX-ALdLCD6RCEBPE94O_e-MDrNtp6cARHKnq7AY2NBxb5wJia5UWD2BLjTVoWUoTEa4k8iUNKKmkwA9AVJihWRG0mEl3V-zs4IBqUc8f-U293aOy0n0MZTt9d2H0wMcMg-8c-GP4NB9nZCPcF_sDEI7-eZhawrG85htaULGkhqp6aairwAcsmCOe2sWGc1zA4=w1099-h824-no);
background-repeat: no-repeat;
background-size: 400px;
background-position: top 0px left 0px;
transition: 1s linear;
}

.backimg20171126b:hover {

background-size: 870px;
background-position: top -140px left -15px;

}

</style>



★好用的 background-size: cover;(自動填滿) /互動使用範例


構思:

  1. 先做一個小一點的DIV,設置背景圖,背景圖的大小請設為 cover,即背景圖會自動填滿DIV。
  2. 使用hover互動技法,當滑鼠移入時,DIV變大。因為我們使用cover的設置參數,所以當DIV變大後,背景圖就自動跟著放大。


做法:

一、請將CSS置入文本,即copy  <style>xxx</style>,置放到<head>xxx</head>之間。
二、做出一個小一點的DIV。
三、把 class  " divclas20171015 " 設置入於DIV,即可。


CSS語法:

<style>
/*DIV加上背景圖的設置*/
.divclas20171015 {
width: 240px;
height: 160px;
border: 1px solid orange;
background-image: url(https://c4.staticflickr.com/9/8326/28854716891_111afd83e2_b.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: 0.6s linear;
}

/*互動的設置*/
.divclas20171015:hover {
width: 540px;
height: 360px;

}

</style>


html編輯語法:

<div class="divclas20171015">
<br>
</div>


互動呈現(滑鼠移入 ↓):







☆移入滑鼠就換圖


CSS語法:

<style>

/*DIV加上背景圖的設置*/
.divbacimg20171015 {
width: 540px;
height: 360px;
background: url(https://c6.staticflickr.com/9/8069/28157165253_bab9357353_b.jpg) no-repeat left top / cover;
transition: 1s linear;
}

/*互動的設置*/
.divbacimg20171015:hover {
background-image: url(https://c6.staticflickr.com/9/8842/28233257493_8c9bdfd372_b.jpg);
}

</style>


HTML編輯語法:

<div class="divbacimg20171015">
<br>
</div>


呈現:








2012年10月9日 星期二

我也會 CSS 排版功力大躍進


CSS就是HTML的進階功能補充。
許多HTML做不到的變化,CSS都可以「輔助完成」。
所以要運用CSS,就要先搞懂什麼是HTML才成。

談 CSS ,最重要的一個功能語法就是 style="xxx"
搞定這個,算是出師了。

CSS寫作格式範例:

style="color: red; font-size: 3em; border: 1px solid gray;"


按 這裡看 css  style的效果

語法:

 <div  style="border: 1px solid red;">
這裡是內容。這裡是內容。
</div>

DIV呈現效 果:

這裡是內容。這裡是內容。



★★請先看教學影音,比較好…


  • 好戲開鑼


先舉個例子,好讓你一目了了。首先要看得懂如下的HTML語法:

前一段。
<div>這是測試的段落。</div>
後一段。

然後,在網頁就會變成如下:

前一段。
這是測試的段落。
後一段。

好了,<div>xxx</div>語法除了區塊斷行之外,看起來似乎沒有什麼變化。那麼,style="xxx"可以再來補充什麼進階功能呢?看好哦…開始要加上 style="xxx" 這個功能了…。Html & CSS語法如下:


前一段。
<div style="border: 1px solid black;">這是測試的段落。</div>
後一段。

那,網頁變成:

前一段。
這是測試的段落。
後一段。

哇,中間段落加上了框線。而且是「黑色」「實心」框線。

先來說明 style="border: 1px solid black;"
  1. border: 1px (指線寬1px) solid(指實線) black(指黑色)
  2. 之後要加上「;」,表示結束。很重要哦。
CSS之所以強,就是有很多變化,例如我們改成 style="border: 1px dashed red;" 。那來看看:


前一段。
<div style="border: 1px dashed red;">這是測試的段落。</div>
後一段。

綱頁變成如下:

前一段。
這是測試的段落。
後一段。

厲害吧!!!

說明:
 style="border: 1px dashed red;":dashed是指「虛線」 red是指「紅色」。也可以用顏色代碼,如 #FFB90F。那就會成了這樣:   style="border: 1px dashed #FFB90F;"。

好,那如果有多個指令要一起來呢?先看如下:

前一段。
<div style="border: 1px dashed red; background-color: #FFFFE0; font-family: '微軟正黑體'; font-size: 120%;">這是測試的段落。</div>
後一段。

綱頁呈現為:

前一段。
這是測試的段落。
後一段。

各位可以看到,我們多加了「 background-color: #FFFFE0;」背景色的語法標籤。「font-family: '微軟正黑體';」字體標籤。「font-size: 120%;」字體大小標籤。多種控制碼就同時呈現效果。記得要在每個控制碼後面加上「;」,表示該控制碼的結束。

CSS style好玩的東東很多。以後有空再教。同學有概念了,可以自行到網站去找資料並理解CSS語法了。


  • 同場加映


最後再玩一個「陰影字效果」(google chrome才有效果哦),讓大家開心:

真是令人太爽了

語法:

<span
style="color: #0000ff; font-family: '微軟正黑體'; font-size: 300%; font-weight: bold; text-shadow: #ee0000 1px 1px 3px;">真 是令人太爽了</span>

請各位自行到google 找「CSS3 文字陰影效果」或是「text-shadow」。就有一堆資料可學了。

呵呵,還有一堆同學想要的「走欄效果」,按這裡看範例


補充說明:span V.S. div;線性樣態以及區塊樣態

在上面的例子中,可以看到<span>以及<div>的使用。但,這其實是兩種非常不同的版面空間處理概念。
一、Div(block)是區塊概念,亦即它會以一個長方型的「區塊」來佔據整個版面。不管整個長方型的內容有沒有被填滿,這個長方型空間已被電腦標定為 「被佔據」狀態。
二、Span(inline)是線性概念。被span包起來的編輯物件,就只是單純的被標記為「包起來了」,如此而已。可以對這被包起來的單位進行css 變化,但不會有版面上的變化。

範例說明:

語法:

前面的文字
<div style="width: 80%; border: 1px solid orange; font-weight: 800;">這是DIV內的文字。</div>
後面的文字<br>

呈現:

前面的文字
這是DIV內的文字。
後面的文字


語法:

前面的文字
<span style="border: 1px solid orange; font-weight: 800;">這是DIV內的文字。</span>
後面的文字<br>


呈現:

前面的文字 這是DIV內的文字。 後面的文字



HTML v.s. CSS:
  1. HTML是早期的效果變化的語法。隨著變化的需求增加,後來推出CSS語法,使網頁寫作更方便、更便利。
  2. HTML的「效果」,在CSS裡都有。CSS完全包含了HTML。所以,目前使用CSS是主流的網頁寫作技能。
  3. CSS的使用方法有三種。一、style="xxx"。二、class的使用。三、id的使用。

HTML 語法形態
CSS 語法形態
<i><u>斜體加底線</u> </i>

效果:

斜體加底線



<span style="font-style:italic; text-decoration: underline;">斜體加底線</span>

效果:

斜體加底 線


<style>
.wordeffect {
font-style: italic;
text-decoration: underline;
}
</style>

<span class="wordeffect">斜體加底線</span>

效果:

斜體加底線


<style>
#wordeffect02 {
font-style: italic;
text-decoration: underline;
border: 1px solid darkred;
}
</style>

<span id="wordeffect02">斜體加底線</span>

效果:

斜體加底線

★<style>xxx</style>,請放置在<head>xxx</head>之間。
★ Class可以不斷的重覆被套用到不同的地方,但id只能套用在一個地方。
★如果三種方式都有設定到相同的參數,例如width,那麼優先權是: style > id > class 。

教學影音:使用CSS的三種方法




★ CSS 不同方式的實例使用(效果相同,但使用的方法形態不同):


style  的方式:

<img style="width: 400px; padding: 2px; background-color: lightgray; border: 2px solid red;"
src="https://farm5.staticflickr.com/4448/23756956808_1a326026c3_o.jpg">


Class  的方式:

<style>

.testclassname01 {
width: 400px;
padding: 2px;
background-color: lightgray;
border: 2px solid red;
}

</style>


<img class="testclassname01"
src="https://farm5.staticflickr.com/4448/23756956808_1a326026c3_o.jpg">



★呈現(兩個都相同):


style方式:




Class  的方式:




為什麼要用 Class 這個功能呢?

因為使用一個 Class 就可以讓很多圖像(媒材)使用,這樣就可以形成統一的畫面元素。同時,如果要更改的話,只要去 Class 改動一下,就可以了。


例如:

<style>
.imgtest01 {
width: 200px;
border: 2px solid black;
padding: 2px;
filter: brightness(200%);
}
</style>

<img class="imgtest01" src="https://farm5.staticflickr.com/4335/37419575985_74842e7ce6_o.jpg"><br>
<img class="imgtest01" src="https://farm5.staticflickr.com/4457/37830478406_64ba156579_o.jpg"><br>
<img class="imgtest01" src="https://farm5.staticflickr.com/4509/37190231194_5fb6fde459_o.jpg"><br>


呈現:







馬上使用:套 用漸層色

愈來愈多的CSS效果,在網路上有生產器,並且是以「快速套用」的方 來使用。例如,套用漸層色。我們馬上來練習使用。
漸 層色套用CSS語法生產器網站。Click!!


範例呈現:




語法:

<div class="div-gradient20191013"><br>
</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;
行的高度



我 想要讓「整個網頁」有固定寬度,同時居中,要如何 做?


語法:

<body style="margin: auto; width: 640px; border: 1px solid gray;">

說明:
對「整個頁面」進行變化設置,請將css設置在<body   xxx>裡。



被span的文字要如何位移至居中?


被span包起來的文字,例如<span>文字文字</span>,如果要居中(左、右),那麼就要在其外面加上DIV。再將 DIV設為內文居中。

★注意,<span>本身不能位移,因為它只是為文字做「標記」而已。在其上設了DIV,有了DIV給的「區塊空間」,所以span才能有空 間依據來位移。

語法:

<div style="border: 1px solid red; text-align: center;">
<span style="font-style: italic; text-decoration: underline; font-weight: 800;">這是被Span的文字。</span>
</div>

呈現:

這 是被Span的文字。



我 有做出好幾個class,要如何來命名以及排列它們?


語法:

<style>
.classname01 {
color: red;
font-family: '微軟正黑體';
font-size: 1.07em;
font-weight: bold;

}

.classname02 {
color: gray;
font-family: '微軟正黑體';
font-size: 1.07em;
font-weight: bold;
}


.classname03 {
text-decoration: underline;
text-decoration-color: red;
border: 1px solid gray;
padding: 5px;

}

#idname01 {
background-color: lightgreen;
}



</style>

說明:

把你設置好的class,就依序的排列在<style>xxx</style>裡面,這樣就可以了。id也是排入裡面就成。
再來, class的名稱是可以你自己命名的,也就是「.」後面的文字。
命名原則是:要有英文字母。不可以只是 數目字。不要用中文。


多個 class 以及 id 的使用範例

<div class="classname01 classname03" id="idname01">
這是文字內容。使用了兩個 class,以及一個 id。
class 可以多個共同,中間要有空白,能共同增加效果力。
</div>

這是文字內容。使用了兩個 class,以及一個 id。 class 可以多個共同,中間要有空白,能共同增加效果力。




我想要立刻、馬上地上手進階使用。 

1. 簡單、快速:3秒調出漂 亮文字布局
2. 快速的讓文字變得好看
3. CSS 的文字魔術
4. 讓人「讀得進去」的文字安排
5. 網路新聞文字寫作技巧 #10 Tips



CSS使用技法練習作業


練習題一:

請寫出HTML編輯文本,使 CSS 的 class 的技法,來呈現出如下例之文本樣態!



呈現樣態:

這裡面是文字。請同學用這裡所學的CSS技法,來做出相同感覺的文字區塊呈現樣態。 文字呈現是閱讀的重中之重。



CSS語法:

<style>
.divword2017101701 {
font-family: Verdana, '微軟正黑體';
font-size: 1.09em;
font-weight: 900;
line-height: 1.8;
letter-spacing: 0.07em;
border: 1px dotted red;
}

.divspan2017101701 {
color: red;
font-style: italic;
text-decoration: line-through;
}

</style>


練習題二:

請用 style="xxx" 這樣的寫作技法,來完成上例的文本呈現樣態?請重開新檔。


練習題三:

請跟著下方廣告範例,做出常見的〔大、中、小〕式摘要呈現樣態。請使用三組DIV來完成。


更多「大中小」文字呈現樣態





網頁文字寫作技巧:


Keep it Short

Web writing needs to be much shorter than other kinds of writing. Research shows that people scan web text, rather than read every word. Make it easy for your users to scan for information quickly. A paragraph should consist of 70 words or less.
read more ...