*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2012年6月29日 星期五

立即體驗:30秒會寫html

30秒

會寫 HTML


by 編輯老師

要讓電腦中的瀏覽器(如Intel Exploer、Chrome、Firefox、Safari)呈現出文本,電腦要讀Html才知道如何把寫作者的想法表現出來。


  1. HTML是什麼東東啊?
  2. 立即體會,30秒你就會了
  3. I have ? s



 
Html是什麼東東啊?



例如我們想讓電腦的螢幕 呈現出下列的螢幕文本表現:
快樂來學Html,成為數位匯流寫 作高手


那麼電腦要讀到的指令必須如下:
<big><big>快樂</big></big>來學<b>Html< /b>,成為<font color="#00cccc"><i>數位匯流</i></font><u>寫
作<big><font color="red"><big><big>高手</big></big></font></big></u>!<img
alt="" src="https://lh5.googleusercontent.com/-uAjuxQRkN40/UabH6TZgWMI/AAAAAAAAI1E/zw-Gb-FdJo0/w138-h187-no/1ZE6_1020501.jpg"
height="84" >
這些要讓電腦讀懂並且可以把你的想法表現出來的指令,就是Html。





 
立即體驗,30秒你就會了。

不要被上面那些奇怪的符號唬住了!跟著教學影片做一遍,只要30秒,保證你會「喔!」一聲的說:「怎麼這麼簡單!」



教學說明:
  1. 要練習感受Html,首先你要使用純文字編輯器,例如Windows內附的記事本,或是我比較愛用的Notepad++
  2. 【編碼】請選 -- UTF8。
  3. 存檔時,檔案的副檔名要設成「.html」。例如test01.html
  4. 再來用瀏覽器打開這檔案,或是直接用滑鼠按二下檔案,即成。
  5. 最後,基於教學上的需要,請一律使用 google chrome 瀏覽器,才能支援我所教的很多效果。



Mac使用者
  1. 打開【文字編輯】軟體。
  2. 請按 shift+command+T 進入純文字編輯模式。
  3. 鍵入內文。
  4. 按【檔案】 -- 【儲存】。
  5. 按【純文字編碼 】-- UTF8 。
  6. 【儲存為】-- 檔名.html 。
  7. 按【儲存】。
  8. 按【使用html】。



Mac使用者使用方法02






康德:
有兩種東西,我們越是經常反復地加以思索,它們就越是給人心灌輸時時翻 新、有增無減的讚嘆和敬畏:頭頂的星空和內心的道德法則(曼弗雷德.蓋爾/黃文前、張紅山譯,2012:80)。
曼弗雷德.蓋爾/黃文前、張紅山譯,2012,《康德的世界》。北京: 中央編譯出版社。



 
I have ?s
Q:我又不是資工、資管、資傳等電腦相關科系,也不是電腦高手,反正會用電腦就好
      !為什麼要學Html?
A:這樣說吧!學中文你總要會用標點符號吧!這和你是不是中文系的或是你的中文寫
      作能力好不好,沒什麼關係!那是用中文寫作的基本技能。同樣的,Html是數位文本
      寫作的基本技能。數位寫作是未來的基本寫作能力,因為未來是「螢幕閱讀」的時代。



螢幕閱讀是未來溝通方式。
互動電視、電腦、平板電腦、手機,甚至公車、計程車、走廊、電梯內的種種大小螢幕等等,到處都可以看到各種大小螢幕。
這些螢幕是未來書寫、溝通和傳播的最重要媒介。
為這些螢幕寫作就是數位文本寫作!


Q:數位文本寫作和傳統平面寫作比較起來,在學習上有沒有要特別去注意和用心的
      地方呢?
A:有的!多媒體寫作文本互動性,是數位文本寫作和傳統平面寫作相較起來,最
      不一樣的地方。這二部分沒有掌握好,沒有表現出來,數位文本和傳統平面文本就
      沒有什麼不一樣了!這樣的數位文本就被戲稱為「鏟入」式內容,也就是說只是把
      平面的東西原封不動倒進螢幕罷了!



數位文本寫作【<】
多媒體互動文本寫作,是一種全新的寫作經驗。
這種多媒介的寫作過程,同時也就要有能力掌握各種多媒體素材。
例如當想要描寫搭乘台北站高鐵時聽到的聲音,就要有能力把聲音展示出來



老師有話說:

人,一定有背景知識,或背景經驗,才能有學習的進步,才能有下判斷的可能。 小說看多了,你就會寫出好文章;球賽看多了,你自然可以區分出球打得好不好。 數位文本的學習亦然。你要多看數位互動文本,你自然就有數位寫作的創作力。

來,你可以多看看以下的網站,裡面有很多不同類型的網站、網頁介紹。

The best design!
Awwwards!




2012年6月24日 星期日

HTML/ CSS 的表格應用語法

「表格」是網頁寫作的靈魂技能
再複雜的版面,都是由表格以及表格應用觀念所排列出來的。 因 之,Html的表格語法是如何呈現,就是要去理解、掌握之事。 先來看下列的多媒體新聞,這正是由表格所排版出來的
範例:


動物園的河濱

那是天氣很好的日子,
很多人都往陽光照耀的河濱前進,尋找更有視野的時光。
請再看一下表格寫作的講解〔click!〕,再看下面文字解說:




Html基礎表格語法


表格由列與欄組成,表格中的空格稱之為儲存格。我們先來看下面的圖例:
^ 第
^ 一
^ 欄
^ 第
^ 二
^ 欄

A B
C D
第一列
第二列

再來是Html表格語法:
<table>
  <tr>  <td>A</td><td>B</td>  </tr>
  <tr>  <td>C</td><td>D</td>  </tr>
</table>
語法說明:
  1. <table></table>、<tr></tr>、<td></td>是三個最主要的表格語法標籤。瀏覽器讀到<table>時會知道要處理表格了,而讀到</table>時則是知道表格結束。也就是說<tabel>是表格的起始碼,而</table>是表格的結束碼。
  2. <tr>xxx</tr>是一列,而裡面的xxx是儲存格。<td>xxx</td>是指一個儲存格,而xxx是儲存格的內容。如上表, <tr>  <td>A</td><td>B</td>  </tr>這是指一列中有二個儲存格 <td>A</td>以及<td>B</td> ,其內容分別是A以及B。
  3. 表格語法處理起來是比較麻煩的,建議基本上看得懂就成。表格的製作及使用最好還是以網頁編輯器如Kompozer來處理較好。

幾個重要的 HTML 表格語法參數:table v.s. td


對表格進一步控制有幾個重要的參數,同學要注意的是控制參數如果是放在<table>裡,是指控制表格全部,如放在<td> 裡面則只是控制單一儲存格。表格範例:
第一格 第二格
語法呈現:
<table bgcolor="#ffffcc" border="2">
<tr>
<td align="left" width="240">第一格<br>
</td>
<td align="center" width="150">第二格<br>
</td>
</tr>
</table>
語法說明:
  1. 在<table xxx>裡面的是指控制整個表格,bgcolor="#ffffcc"是指表格的背景顏色,border="2"是指表格的框線寬度為2px。如果border="0"就會取消格線,那麼看起來就好像是排版一樣,是我們常運用表格來排版的技巧。
  2. <td xxx>是指對單一儲存格進行控制。就第一格而言,align="left"是指文字靠左,width="240"是指第一格寬度為240像素。第二格,align="center"是指文字居中,width="150" 指寬度150像素。
  3. ★★整個表格的寬度是由所有的格子的寬度相加而成(如果表格本身沒有設定的話)。換言之,想要寫出多寬的表格,可由各格子寬度的設定來加總。



使用CSS的語法:

<table style="background-color: #ffffcc; border: 2px solid black;" >
<tr>
<td style="border: 1px solid black; text-align: left; width: 240px; color: red;" >第一格<br>
</td>
<td style="border: 1px solid black; text-align: center; width: 150px;" >第二格<br>
</td>
</tr>
</table>


呈現:

第一格
第二格

整個表格的靠左、居中及靠右


語法:

<table bgcolor="lightgray" border="1" align="center">
<tr>
<td align="left" width="240">第一格<br>
</td>
<td align="right" width="180" bgcolor="lightgreen"> 第二格<br>
</td>
</tr>
</table>
 
呈現:

第一格
第二格

說明:

一、整個表格的移動位置對齊,要在<table >內設定。左、中、右,是 align="left"、align="center"、align="right"。
二、如果是設定在<td>,是指內文的對齊方式。
三、看到沒有,同一個html align="xxx",在表格及格子的作用效果是不同的。很煩!所以,統一的CSS才會被流行使用。


使用CSS的語法:

<table style="background-color: lightgray; border: 1px solid black; margin: auto; ">
<tr>
<td style="text-align: left; width: 240px; border: 1px solid black;">第一格<br>
</td>
<td style="text-align: right; width: 180px; background-color: lightgreen; border:1px solid black;">第二格<br>
</td>
</tr>
</table>


呈現:

第一格
第二格



表格和圖像


在<td>xx</td>內寫入圖像的語法<img src="xxx">,就可以了。要注意的是,格子的寬度要和圖像寬度相同。

語法:

<table bgcolor="#FFC78E" border="1" align="center">
<tr>
<td align="left" width="260"><img src="https://c2.staticflickr.com/8/7524/27385003153_656ca16a9c_b.jpg" style="width: 100%; margin: 0px; padding: 0px;"><br>
</td>
<td  align='center' valign="top" width="120" bgcolor="lightgreen" style="padding-left: 5px;"><span style="font-weight: 900; font-size: 1.07em;"> 墾丁</span><br>
南部的顏色。<br>
</td>
</tr>
</table>

呈現:


墾丁
南部的顏色。
以及,
生性不受控制的雲。


說明:

格子,td內,的內容,其垂直方式的設定方式為上、中、下:valign="top"、valign="middle"、valign="bottom" 。

文字的垂直方式CSS語 法:

 style="vertical-align: top;"   //top, middle, bottom,  //上、中、底

作業:

請用 CSS 語法做出上面的範例。


CSS簡明語法大全 ←← click


寫作觀念:「媒材物件」的理解和操作


在上例中,「一個」文本樣態的呈現,我們卻要同時考慮table、td、img這「三種」不同的寫作元素。這樣的寫作思考模式,就是「媒材物件」的概念在 發揮作用了。

什麼是「媒材物件」這樣的概念呢?「物件」是要指涉什麼意思?為什麼數位寫作要強調這一寫作觀念?它和傳統文本寫作最大的差別在那裡呢?

來,先從你能了解的經驗值開始。如下,

<div>
這是文字內容。
</div>

上例,當「這是文字內容」這幾個媒介材料(媒材/文字),被<div>xxx</div>包起來後,這幾個文字就有了「媒材物 件」的屬性了。

被<div>xxx</div>包起來後,這幾個字就成為一個「單元」,可以透過對DIV下語法,對這幾個字(單元)進行變化操 作。我們把這樣的,藉由語法包起來的媒材單元,稱之為「媒材物件」。所以,上例,DIV就是一個媒材物件。

當我們思考時,不是思考「六個字」,而是思考這 六個字所形成的「一個單元」。因之,「一個單元」就以「物件」來指稱。

這是傳統文本寫作時所不用特別具備的「寫作觀念和技法」,但卻是數位文本寫作的「重要核心觀念和技法」。

於是,<table>xxx</talbe>,<td>xxx</td>,<p> xxx</p>,就可以被視之為是不同的、各自獨立的媒材物件。

另一種媒材物件的形式是<img src="xxx">。

它不用被語法「包起來」,例如上述<div>,而是本身就是「媒材物件」。因為,它本身就是一個可以用語法來進行操作的「單元」。例如改變 寬、高值。

所以,媒材(可以是不同的媒材)只要是被語法形成某一單元,以進行可能的變化操作,就可以被稱之為「媒材物件」,也可以說是被規定為某一「媒材物件」。

「媒材物件」裡面,往往也會包含著不同的「媒材物件」,例如table裡面,包含著td、img等不同的媒材物件。因而,媒材物件與「裡面媒材物件」所形 成的關係,就是「層級關係」;也就是媒材物件的層級關係 (click)



區塊居中 v.s. 區塊內容居中


還記得嗎?在之前<div>、<p>區塊物件中,也有看到 align="center",這是指區塊內的內文要居中。區塊物件 本身無法調整。
在表格物件中,格子,<td>,如果用 align="cneter"也是指內文居中。

但如果是表格<table>,則是指表格區塊本身居中。<hr>也是。

區塊居中和區塊物件的內文居中,是兩種不同的空間性寫作概念。

用align="center“,事實上容易引起混淆。所以後來,在CSS 語法中,就有全新的規定,可以讓所有區塊物件「全部通用」


CSS內文的位置是:

style="text-align: center;",(left/ center/ right)。

CSS區塊物件的位置:

左: margin-left: 3px; 【這是預設值,可不寫;也可以設定靠左的距離,紅字部分】
靠中: margin-left: auto; margin-right: auto; 【要寫這二個才有用】。或,直接寫: margin: auto; 也可以。
靠右: margin-left: auto; margin-right: 5px; 【要寫二個,可以設定靠右的距離,紅字部分】

語法:

<div style="width: 300px; margin-left: auto; margin-right: auto; text-align: center; border: 1px solid red;">
這是內文。
</div>

呈現:

這 是內文。



表格格線,使用html 及 css 上的差異



表格的框線,可以用html以及css兩種寫法來寫。但這二種方法,在呈現效果上有一些不同,你要能知道,才不會被搞亂。

如果用html來寫,在<table xxx>加上 border="1",那麼表格本身以及格子, 都會有框線。所以看起來會有兩層的感覺。


語法:

<table  border="1">
<tr>
<td align="center" width="200">第一格<br>
</td>
<td align="center" width="200">第二格<br>
</td>
</tr>
</table>


呈現:

第一格
第二格



但是,如果是用CSS來寫,style="border: 1px solid black;",於<table xxx>之內寫入,則只會在表格本身有框線,格子是 沒有的。如果格子的框線也想 要出來,就要在<td xxx>裡面也下css語法。


語法:

<table  style="border: 1px solid black;">
<tr>
<td align="center" width="200" style="border: 1px solid black;">第一格<br>
</td>
<td align="center" width="200" style="border: 1px solid black;">第二格<br>
</td>
</tr>
</table>


呈現:

第一格
第二格


在<td xxx>之內寫入CSS語法,格子框線就會出現。請 按我看格線



為什麼要使用表格。
因為要創造文本內容媒材排列上的規律感。


表格 CSS 語法:

<table
style="border: 1px solid black; text-align: left; width: 100%; table-layout: fixed;">

<tr>
<td style="border: 1px solid black; vertical-align: top;"><img
style="width: 100%;"
src="https://farm2.staticflickr.com/1878/29622624577_61d2bc1ffc_c.jpg">
<br>
</td>
<td style="border: 1px solid black; vertical-align: top;"><img
style="width: 100%;"
src="https://farm2.staticflickr.com/1878/29622622427_9e6f338942_c.jpg">
<br>
</td>
</tr>

</table>


呈現:




(↑ hover:格線消失,成為排版版型呈現)


平均表格的寬度的 CSS 語法:
style="table-layout: fixed;" //fixed, auto //平均格寬, 沒有平均格寬


排版技巧:將表格格線取 消,就會有規律性的版面出現。

style="border: 0px  solid red;"     // 0px 將格線寬度設為0

style="border: 1px  solid transparent;"    // transparent 將格線設為透明



table CSS 專用語法:


style=“ border-collapse: separate;"   // separate, collapse   //邊線分開、邊線合一

style=" border-spacing: 3px;"  //也可以兩個 3px 5px   //左右邊線距離  上下

style=" table-layout: fixed;"   // fixed, auto    //固定分割、不固定分割

請看參考範例 W3school 互動實例



文本的哲學:數位文本、空間敘事與表格寫作

數位文本是一種全新的文本形式,它用匯流及互動來呈現文本意義。表格,不只是重要寫作技巧,它同時有著它的「文本理論」。




【進階】使用Kompozer寫作:表格操作技能





影片內容補充說明:
內容使用軟體KompoZer,使用及下載  click here


使用kompoZer快速學會表格運用:
一定要會的表格排版寫作基本動作(一)
一定要會的表格排版寫作基本動作(二)
一定要會的表格排版寫作基本動作(三)


如果我們想要把整個表格居中或靠右時要如何來做呢?

影音教學:



更多表格排版寫作範例


★★ 請挑選一範例為作業的範本



2012年6月21日 星期四

讓我們來互動吧:Html基礎互動語法



*測試範例*
〔頁首跳回點〕



憑什麼說這是「最基礎」的互動寫作概念?
課堂錄影:3分鐘 
網路文本最大特色之一,就在於//
這裡所指的互動,並不是如同我們所熟悉的諸如報紙「讀者來函」,或是電視、廣播 「call in」,而是指「數位文本」媒介本身在閱讀過程中的「文本互文性」[video ↗]



Krug:
當我們掃視網頁時,其實是在尋找把東西標示成可按(觸控式螢幕則是「輕鬆點」)的各式視覺提示,像是形狀(按鈕、按鍵等)、位置(例如功能欄)以及特別的格式(如顏色和底線)(Krug, 2014: 37)。

Steve Krug/陳芳智譯(2014)。《如何設計好網站:Don't Make Me Think》。台北市:上奇。



什麼是數位文本媒介的「文本互文性」?
就是以非線性的閱讀方式,即時的透過另一 種資料來解釋目前可能要被解釋的材料。沒關係!先看下面的例子:

閱讀這一教學網站時,可以同時參閱「我的影像blogger」。有更多……

在閱讀上面的文字時,如果讀者沒有「我的影像bolgger」的背景知識,可以馬上的用滑鼠 按下「我的影像blogger」,就會跑到「我的影像blogger」頁面,這時即可以透過被連結的 頁面迅速進行某種程度的理解。這就是「文本互文性」。在數位文本中,上述功能稱 「超連結」,這是數位文本互文寫作的最基本技能。


外部超連結

超連結的功能中,外部超連結是最常用的。先看用文字超連結的Html寫法。

語法:

請到<a href="http://lmcsilver.blogspot.tw/">我的影像blogger</a>看例子。


呈現效果:

請到我的影像blogger看例子。

語法說明:
  1. 首先可以看到,「我的影像blogger」是想被超連結的文字,所以要在「我的影像blogger」之前加上起始碼「<a href="http://lmcsilver.blogspot.tw/">,在其後加上結束碼</a>。
  2. 之後,可以進行超連結作用的文字,一般而言都會被預設設定成變了顏色,表示是有超連作用的。
  3. <a href="xxx">中的xxx是指要連結出去的網頁,請書寫完整,最好從瀏覽器的網址列copy。詳細操作請看下面的影音教學。
  4. <a href="xxx"  target="_blank"> 按下去外連</a>紅色字語法,可以形成「新頁面開啟連結」的功能。

同樣的語法,我們來看看用圖像如何超連結。圖像超連結的Html 寫法。

語法:

我的<a href="https://24h.pchome.com.tw/"><img src="https://c1.staticflickr.com/5/4274/35008151376_b935bdc8c5_b.jpg"  style="width: 120px;"></a>午餐。

呈現效果:

我的午餐。

語法說明:
  1. 紅色字<img xxx>是嵌入圖像的語法。所以我們在<img xxx>之前加上超連結的起始碼<a href="xxx">,在其後加上結束碼</a>。這樣一定用滑鼠按圖片,就會連結出去。
  2. 不管是文字或圖像,超連結的語法標籤是相同的,都是<a href="xxx">「要被連結之物」</a>。<a href="xxx>中的xxx就是要連出去的網頁網址。


用超連結下載檔案

超連結語法不但可以外連到某一網頁,也可以用來下載某一檔案。下載的Html語法。

語法:

我要<a href="http://lmcdwriting.org/userfiles/lmc201708/JCS36_R00_06MingcheLi_4Mar2016%20%281%29.zip">下載pdf</a>
案。

呈現效果:

我要下載pdf檔案

語法說明:
  1. 同樣的,在「下載pdf」這幾個要被按下去的字之前加入起始碼<a href="xxx">,及在其後加入結束碼</a>,這樣就可以下載了。<a href="xxx">中的xxx是指檔案所在網路空間位置網址。
  2. 正如同學可以看到的,一旦按下下載之後,瀏覽器常常會自動打開所下載的檔案。如果同學一定要出現下載後的選擇視窗畫面,請把檔案壓縮成壓縮檔,下載壓縮檔時,就會出現下載選擇的選項。  
  3. 如果使用google網路硬碟。請於檔案按右鍵,選擇「取得檔案共用連結」,如下圖,再按下方「共用設定」,即可看到可使用的檔案網址。

網頁內部的超連結

超連結所呈現的互文性,不只是連結到外部資料,也可以是內部同一文本的相互參照。 這就是網頁內部超連結要派上場的時候了。

先按看看網頁內部超連的呈現效果:


按下Top,跳到頁首。

Html內部連結語法:

按下<a href="#a1">Top</a>,跳到頁首。   >>按下去要跳的地方
<a name="a1">〔頁首跳回點〕</a>      >>所要跳到的目的地

語法說明:
  1. 這範例的功能是按下「Top」,網頁就會自動跑到最上面有著「〔頁首跳回點〕」的地方。這就是網頁內部連結。
  2. 電腦會從 <a href="#a1">Top</a>裡的#a1為判斷符號,然後找到有著<a name="a1">的地方停止下來。換言之,從a1對到a1。
  3. a1是筆者自己設的,各位可以自行設定符號,要注意的是如果是設定# b2,那電腦就會在<a name="b2">的地方停下來。換言之,電腦會自動尋找<a href="#xx">和<a name="xx">這xx是相同的符號之地而停下來。
  4. 這一部分的設定較為麻煩,請看下面的影音教學。


使用KompoZer寫作對內、對外超連結語法影音教學↗


超好用的CSS互動功能:hover





這是CSS才增加的互動功能,超級好用,以後我們會使用得不計其數。
在這裡,我們先對這種互動的形成結構以及操作方法,先有初步了解。


一、寫入CSS,請放置 於<head>xxx</heda>之間:

<style>

.classinter01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.08em;
font-weight: 800;
line-height: 1.8;
border: 1px solid transparent;
}

.classinter01:hover {
color: red;
border: 1px solid gray;
}

</style>


二、請參看下列語法:

<div class="classinter01">這是第一文字塊。</div>
<div class="classinter01">這是第二文字塊。</div>
<div class="classinter01">這是第三文字塊。</div>


三、請看互動效果:

這是第一文字塊。
這是第二文字塊。
這是第三文字塊。

請移入滑鼠↑



四、說明:
  1. 這是以二個單位形成「一組」的結構形式,來完成互動作用。
  2. 一個是 .classinter01 這個class,而另一個是在其後加上 :hvoer ,形成 .classinter01:hover ,這樣就可以運作。
  3. 作用的流程是,當滑鼠滑入到有 .classinter01 的物件時, .classinter01:hover  後面所增加的變化參數,最後再加進去。於是形成互動。
  4. 此例就是,當移入到有 .classinter01 的 div 物件時,.classinter01:hover 所設置的 紅字、邊線效東,就會被加入。
  5. 注意 .classinter01:hover  這中間不能有空白字元,要連續的寫在一起。



按一下就互動:第一次使用 jQuery

jQuery是所謂的外掛式程式。但它是目前最熱門javascript的套件。

我們透過對jQuery的學習使用,來了解「外掛型」「程式式」互動機制的運作流程,以及了解此種互種機制模式的寫作操作概念及過程。

這次互動模態的基本型模是:按A物件就跑出/隱藏B物件。


一、寫作操作步驟


1、程式碼掛入網頁

請將下列程式碼寫入到<head>xxx</head>之間:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>


2、寫作媒材物件的語法

<style>xxx</style>請寫入<head>xxx</head>之間

<style>
.divinteractive {
width: 65%;
height-line: 1.4;
padding-left: 2em;
border: 1px solid gray;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: 900;
letter-spacing: 0.07em;
box-shadow: 2px 2px 2px 2px silver;
cursor: pointer;    /*這是手型滑鼠指示的參數*/
}
</style>

<div class="divinteractive" onclick=" $('#interactivetest001').slideToggle(); "> 這是DIV的內容,請按我,跑出圖片。</div>
<br>
<div id="interactivetest001" style="display: none;"><img src="圖像網址" style="width: 540px;"></div>


3、呈現:

這是DIV的內容,請按我,跑出圖 片。


4、說明:

onclick=" $(' #interactivetest001' ).slideToggle(800); "

按下去  =" $(' #被控制物件的id ' ).作用模式(時間); "

語法可以被解釋為,在「那個」DIV按下去(onclick)之後,作者想要控制的媒材物件(用id來指定)(此例為有圖像的DIV), 就會以slideToggle(上下滑動)的樣態來互動地呈現。

onclick="xxx" 可以放置到任何媒材物件,例如span、table、img等。

時間,是指1000等於一秒。800是800/1000秒。

再者,style="display: none;" 是指讓媒材物件先「消失」在視線裡,但在電腦中仍被視為存在。



二、教學影音






2012年6月16日 星期六

HTML/CSS基本排版語法



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


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

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

把文字斷行的二種方法

任何文本總要有適當的斷行,才能讓「資料」形成可讀性的內容。
Html提供了不少排版用的方法,(一)而<br>是最重要的。因為這是直接把文字斷行
的最常用方法。
(二)是使用<p>xxx</p>或<div>xxx</div>這一種區塊模式的版面方法。它們會佔住整個行區塊的「面積」,然後又自動斷行,把之後的文字(資料)擠到下面去,就形成了斷行的果效。這就是一般而言block(區塊)層級的標記語法。 先看以下範例:

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

斷行

第二行
文字
<div>斷行</div>
第二行
文字
斷行
第二行
語法說明:
  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>文字居中< /center>
文字居中
<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是邊線顏色。

劃出一條分隔線

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

分隔線的標籤很簡單:
<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;
行的高度




2012年6月14日 星期四

使用Html來變化文字


HTML
文字變化

Html能帶給我們「驚奇」的體驗,往往是從對文字的變化進行控制開始。這通常也 是學習Html的第一步,更是數位多媒體文本寫作的基礎能力。這部分一旦上手,對 Html就再也不會怕了

建議先看影 音說明,增加閱讀背景經驗值。 click here!!




來,就先看下面的表格內容,先直覺的感受一下什麼是Html的功效:
原始文字 加上字型語法 呈現效果
標題文字 <h3>標題文字</h3>

標題文字

粗體文字 <b>粗體文字</b> 粗體文字
斜體文字 <i>斜體文字</i> 斜體文字
加底線文字 <u>加底線文字</u> 加底線文字
畫刪除線文字 <strike>畫刪除線文字< /strike> 畫刪除線文字
文字上標 文字<sup>上標</sup> 文字上標
語法說明:
  1. 要對文字進行變化,首先必須在想要變化的文字前、後加上控制變化的語法參數。以對「粗體文字」 進行變化為例,要在「粗體文字」之前加上<b>,在之後再加上</b>,於是就形成成「<b>粗體文字</b>」這樣的形式。<b>是文字變化的起始參數,而</b>是結束參數。這告訴電腦要從那裡開始變化,而又在那裡結束。一般而言,結束的參數往往是起始的參數再加上「/」這一符號。
  2. 除了少數的例外,Html的語法參數往往是「起始」與「結束」成對。這是很重要的Html語法槪念。這不只是對文字變化而已,而是大部分的Html語法均如此。
  3. 文字變化的語法還有很多,上面只是常用的例子而已。有興趣進一步學習的同學,可以在網路上找到更多的文字變化語法參數。

二種以上的效果共同使用,要如何來寫語法:
<i><u>斜體加底線文字</u></i>                             斜體加底線文字


我們可以看到,這是以同心圓的樣態來排列。



文字大小的變化


有時Html往往會用不同的語法參數來形成類似功能的變化。以文字大小變化這一功能為例,就可以用<hx>xxx</hx>、<font size="數字">xxx</font>、<small>xxx</small>這三種不同的控制參數來進行文字大小的變化。請看範例:

<hx>xxx</hx>文字語法
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>

這是標題 1

這是標題 2

這是標題 3

這是標題 4

這是標題 5
這是標題 6
語法說明:
  1. 通常<hx>xxx</hx>這一文字變化語法形式被稱之為「標題語法」。從h1到 h6共有六組。數字愈小,標題愈大。
  2. 之所以稱之為標題語法,是因為在結束參數</hx>之後,瀏覽器會自動斷行。這很適合文章中標題的版面使用。
請看以下範例及說明:


文字語法 呈現效果
範例1 文字標題<br>內文 文字標題
內文
範例2 <h3>文字標題</h3>內文

文字標題


內文

在範例1中,「文字標題」與「內文」中間有<br>的斷行語法,文字才形成斷行。但在範例2中,不須用<br>,<h3>xxx</h3>就會自動形成斷行之際再加上一空白行。

再來,請看第二範例:
<font size="數字">xxx</font>以及<small>xxx</small>語法
原始文字 文字大小語法 呈現效果
文字大小 <small>文字大小</small> 文字大小
文字大小 <big>文字大小</big> 文字大小
文字大小 <font size="1">文字大小</font> 文字大小
文字大小 <font size="2">文字大小</font> 文字大小
文字大小 <font size="3">文字大小</font> 文字大小
文字大小 <font size="4">文字大小</font> 文字大小
文字大小 <font size="5">文字大小</font> 文字大小
文字大小 <font size="6">文字大小</font> 文字大小
語法說明:
  1. 先來看<font size="數字">xxx</font>這一語法參數。控制文字大小的數字是「1」到「7」,共七個級距。如果沒有對文字的大小進行控制的話,那一般呈現的大小是「3」,換言之3是預設的文字大小。
  2. <big>xxx</big>是指將字從預設大小增大一級,即第「4」級。所以上表可以看到,<big>xxx</big>的文字大小和<font size="4">xxx</font>的文字大小是一樣的。而<small>xxx</font>是指將文字從預設小大降一級。

文字顏色的變化

對上面的文字變化語法有一些認識後,相信文字顏色的語法就讓人覺得相對簡單了。

文字顏色語法: 呈現效果:
<font color="#ff0000">文字顏色</font> 文字顏色
語法說明:
  1. 相信各位現在可以感受到,html的語法結構有著相似性。文字顏色的語法<font color="#xxxxxx">xxx</font>和文字大小的語法<font size="x">xxx</font>就差別在「color="#ff0000"」這一參數。
  2. 「#ff0000」是紅色的顏色代碼。更完整的顏色代碼表,請按此參考
文字顏色使用上的注意事項:
  1. 文字是要傳達想法和概念的,因之文字的顏色和背景顏色最好有明顯的對比,也就是說文字要能清晰而明顯的呈現出來。換言之,憑直覺的閱讀而言,文字在閱讀上不能有吃力的感覺。因為沒有讀者喜歡花力氣去辨識出一個一個字。
  2. 一般而言,一份網頁文本內的文字顏色不要太多,最好不要超過五種不同的顏色。因為花花綠綠的顏色往往會搶掉讀者對文字意義本身的理解。
  3. 對顏色有進一步興趣的同學,最好再去理解一下色彩學中不同顏色之間的「對比」性質或是「類似」性質。亦即什麼是對比色,什麼是類似色。這樣才能創造最好的數位閱讀環境。

寫出空白的半形字元

這是什麼意思呢?先看下面的例子:

二個空白的空格之後         再跑字出來。


html編輯中是長這樣的:

二個空白的空格之後&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再跑字出來。


說明:
  1. 在利用純文字編輯器時,如果真的要出現空白字元,就要打上「&nbsp;」,電腦才會知道你要空白字元。這是英文半形的空白字元,但因網頁的設定不同,空白的小大有時不同。試試幾次就知要放幾個。
  2. 直接在網頁編輯器作業,如我們教的Kompozer,就不用擔心這問題。不管是中文全形或英文半形空白,直接打字下去就對了。不然為什麼要用網頁編輯器呢?但同學仍要了解這一狀況,才不會在看原始碼時看不懂。


變化字體

語法:

<font face="微軟正黑體">中文字型的變化</font>

效果:

中文字型的變化

說明:
  1. 一般常用的電腦中文字有:新細明體(內文使用)、微軟正黑體(標題使用)、標楷體(引文使用)。英文常用字:Georgia (內文)、Verdana (標題或非內文字)。
  2. 但目前漸漸有使用微軟正黑體來當作中文內文字體的趨勢。同學可以自行觀察。



走 馬燈特效

語法:

<marquee>要跑的文字或物件</marquee>

效果:

要跑的文字或物件
語法2:

<marquee  behavior="alternate"> 要跑的文字或物件</marquee>

效果:

要跑的文字或物件



2012年6月12日 星期二

使用 HTML/ CSS 語法把圖片嵌到網頁




多媒體要秀在網頁上的基本運作架構。
課堂錄影:〈多媒體新聞寫作〉:時間4分鐘。



兩項重點請先背起來:
一、照片請先上傳到網路,例如google的相簿集。
二、請找到照片的「網址」。使用chrome時,請在照片上按右鍵,選【複製圖片位址(o)】。

使用Html把圖像嵌入到網頁中,讓我們先來看看嵌入圖像的基本語法

<img src="圖像所在的位置網址">


好,先來運用一下這個基本圖像嵌入語法:

<img src="https://lh4.googleusercontent.com/-vzq4jdZdW-A/UjwPg8TvSGI/AAAAAAAAOhU/PDlh85b2H7U/w667-h500-no/P9086302.JPG">

語法效果:


★寫作技巧:請在上面這張照片的上面,按右鍵(使用chrome),再按【複製圖片位置(o)】,就可以「貼出」網址了。



好,先看教學影片跟著做一遍:用Html把圖片嵌到網頁


語法使用說明:

  1. 首先要能找出存放在網路空間中圖檔的位置網址。同學請一定要留意:圖檔只是放在你/妳的個人電腦中是沒有用的。圖檔首先要存放到網路空間,例如此例是被放置在google的相簿中。同學要先將圖檔上傳到網路,再把圖像檔案位置的網址找出來。我們的教學以google為例,其他的原理相同。
  2. 在相簿網站中的照片,請一定要設為「公開」
  3. 在html語法的寫作模式下,寫入圖像嵌入語法:<img src=" ">。然後把圖像位置網址放入到「src=" "」的「" "」中。此例中,圖像的位置網址就是「https://lh4.googleusercontent.com/-vzq4jdZdW-A/UjwPg8TvSGI/AAAAAAAAOhU/PDlh85b2H7U/w667-h500-no/P9086302.JPG」。


【2018/10/03更新】使用google的相簿系統當作圖床
★上課建議使用★


操作注意事項:

一、請登入google。
二、請點按【相片】。
三、請點按【共享】。
四、請按【建立新的共享相簿】。
五、點選照片──按【繼續】。
六、輸入電子郵件── 按【完成】──【新增標題】──【傳送】。
七、打開共享資料夾── 拖入照片── 選按照片。
八、在「大照片」處按滑鼠右鍵──【複製圖片位置】。



【2015/11/23補充】設定正確的圖像長寬比
設定正確的圖像長寬比,使圖像不會走樣。圖像的表現才會正確!



手動計算方法:

目前照片一般而言都是寬高 16:9 的比例,所以寬度x(9/16)=高度。
例如,寬度400px,400x9/16=225,高度即225px。

同樣的,如果照片的寬高比例是 4:3,那麼寬度x(3/4)=高度。
例,寬度是520px,520x3/4=390,高度是390px 。


【2018/09/29補充】多媒體寫作時使用flick的圖像系統,好用!
這個我也愛用! click here to 我的flickr



操作注意事項:
一、進入flickr網頁,【登入】。
二、上傳圖片。
三、從【你的足跡】進入到【相機膠卷】。
四、選擇照片,按「右上方的雙箭頭符號」。
五、在照片上按右鍵,選【複製圖片位置】。


進階圖像嵌入 HTML 語法使用

從基本的語法中,可以發展出更多對圖像呈現的HTML控制參數,這使得多媒體寫作者可以在網頁中對圖像進行編輯創作。請看下列語法:

<img src="https://c1.staticflickr.com/6/5626/31263527992_f299fdb2b2_b.jpg" border="1" width="320" height="240">

語法效果:


進階Html圖像語法說明:
  1. border="1"。border是指圖像的框線,border="1"是指1像素單位的框線,可以填入2、3、4、…等。如果「" "」填入0,那就是取消框線。
  2. width="320",是指設定圖像的寬度為320像素。height="240",是指設定圖像的高度為240像素。如果只設定寬度width="xx",而沒有設定高度height="xx",電腦會依寬度來自動設定高度。
  3. 整個圖像語法的控制參數還有更多,有興趣的同學可以自行在網路中找到更多相關資料。跟著控數參數練習一遍,就可以了解了。這並不難。所以老師一再強調,這是數位多媒體寫作的「基本技能」。
  4. 相關圖像的控制參數/編輯功能,將在使用網頁編輯器KompoZer的圖像運用單元中,有更多的說明介紹。在此我們先了解什麼是語法,語法如何使用,控制參數如何運作,即可。有了這些基本的認知,就可以更充分掌握、精準控制網頁編輯軟體。




圖像的排版觀念與技法


首要謹記的觀念:請把圖像當作是「字母」,
用這觀念來對圖像進行排版操作。



一、圖像後面要接上文字

思考:
因為圖像被當作是「字母」,所以直接在<img xxx>的後面置上文字,就可以了。

語法:
<img width="240" src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg"> 後面的文字。<br>

呈現:
後面的文字。


二、圖像要獨立出現

思考:
圖像想單獨出現,就是說它獨立的成為一行。因此,就要在圖像的後面斷行,即加上<br>。或是將圖像納入<div>形成獨立區 塊。

語法:
<img width="240" src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg"><br>後面的文字。<br>


呈現:

後面的文字。

語法:
<div align="center"><img width="240" src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg"></div>後面的文字。<br>


呈現:
後面的文字。


三、多張圖像接續出現

思考:
那就是說,像寫字一樣,讓<img xxx>不斷的接上去就成了。

語法:
<img width="180" src="https://c4.staticflickr.com/9/8438/28989624891_5a9a9faab2_b.jpg"><img width="180" src="https://c6.staticflickr.com/9/8637/28854719061_2c5ac0918e_b.jpg"><img width="180" src="https://c8.staticflickr.com/9/8453/28148080543_cdc619801d_b.jpg"><br>

呈現:



常用靜態圖像的 CSS 語法

CSS的操作,就是把就是把上例所學的各種控制圖像的 HTML 語法,例如border="1" width="320" 等等,全部集中同時都放到style="xxx"這裡面去。


圖像呈現範例:



CSS語法:

<img
style="border: 1px solid #FFCCCC; padding: 1em; width: 520px; height: 292px; background-color: whitesmoke;"
src="https://lh5.googleusercontent.com/-NPagWVQ-rss/UevVfTvJpBI/AAAAAAAAMlQ/bFAegOwzZxM/w889-h500-no/P7214954.JPG"><br>
說明:
  1. style="xxx" xxx是 css 對圖像的控制碼。可和html碼並用。
  2. border: 1px solid #FFCCCC; 這是指邊線,寬度、形態、顏色。padding: 1em; 邊線到圖像之間的距離,1em。
  3. width: 520px; height: 292px; 這是指定圖像的寬度和高度,如果只有指定寬度,高度會自動調整。background-color: whitesmoke; 這是指背景色,即圖像到邊框之間的顏色。
  4. 如果在html那邊有設定圖像長、寬,同時CSS這裡也有設定圖像長、寬,以CSS的設定為準。因為CSS是後來發展出來的,可以更精準、更豐富變化頁面元素的語法。


Q&A:如果html和CSS都有設定寬度,那麼會以那一個為準呢?
語法:
<img src="https://c1.staticflickr.com/6/5626/31263527992_f299fdb2b2_b.jpg"  width="200" style="width: 520px;">
請按此看結果!



常用圖像CSS參數:

width: 520px;      //寬度 〔如果只設寬度,高度會自動計算;也常用 xx% 來設定〕

height: 360px;       //高度 〔如果只設高度,寬度會自動〕

border: 1px solid red;       //框線:線寬、樣態、顏色

padding: 3px;      //留白值       ( padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;    //左、右、上、下 )

background-color: lightgray;     //背景色

box-shadow: 2px 2px 2px gray;      //照片陰影值

border-radius: 25px;      //圓角框

filter: brightness(200%);       //照片亮度

 filter: opacity(30%);      //照片透明度

transform: rotate(3deg);      //旋轉度(可加負值)

vertical-align: top;   //文字接圖的位置 /top, middle, bottom ;上、中、下



常用技巧:

如果我們想在DIV或Table裡面要加入圖片,可以用 width: xx%; 這樣的方法來設定圖像寬度,就不用老是為寬度算來算去。

<div style="width: 80%; margin:auto; border: 1px solid red; text-align: center;">

<img style="width:75%; border-radius: 15px; box-shadow: 2px 2px 2px gray;"  src="https://farm2.staticflickr.com/1968/43029666230_4a1849e876_c.jpg">

</div>

效果:




練習作業區


習題一:

請用上列的圖像CSS標記參數,做出如下的圖像呈現樣態。



呈現:

  
雪山的風動。追尋日光的人群。面向黑暗的靜。



更多有趣的圖像特效及互動呈現:
  1. 移 動滑鼠就換圖的多媒體互動寫作技能
  2. 讓 圖像說更多:照片的陰影、圓角框處理
  3. 正 流行的互動文本表現:Content slider
  4. 背 景圖的妙用
  5. 表 格使用基本功(7):把影音貼到照片上面去