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

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補充】設定正確的圖像長寬比
設定正確的圖像長寬比,使圖像不會走樣。圖像的表現才會正確!

怎麼知道照片的大小呢?

一、對一張照片按滑鼠右鍵
二、選單內,按【內容(R)】
三、再按【詳細資料】,就可以看到長、高的數值



電腦幫著算的計算方法:

請到這個兩個網站,它有工具可以幫你依等比例計算出圖像(或影音)的寬、高值,或是計算圖像什麼比例的。aspects.designARCalculator←←網站畫面如下 press it!


手動計算方法:

目前照片一般而言都是寬高 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 語法 → click to show!


比 較:Html語法  vs  CSS語法


HTML語法:

<img
border="3" width="520"
src="https://lh5.googleusercontent.com/-NPagWVQ-rss/UevVfTvJpBI/AAAAAAAAMlQ/bFAegOwzZxM/w889-h500-no/P7214954.JPG">


CSS語法:

 <img
style="border: 3px solid black; width: 520px; "
src="https://lh5.googleusercontent.com/-NPagWVQ-rss/UevVfTvJpBI/AAAAAAAAMlQ/bFAegOwzZxM/w889-h500-no/P7214954.JPG">



CSS的操作,就是把就是把上例所學的各種控制圖像的 HTML 語法,例如border="1" width="320" 等等,全部集中同時都放到style="xxx"這裡面去。
基本上,在現代的數位文本語法寫作中,我們【都是用CSS為主】。


基礎CSS圖像語法範 例:

<img
style="border: 3px solid #FFCCCC; width: 520px; "
src="https://lh5.googleusercontent.com/-NPagWVQ-rss/UevVfTvJpBI/AAAAAAAAMlQ/bFAegOwzZxM/w889-h500-no/P7214954.JPG">


語法呈現樣貌:




進階圖像呈現範例:



CSS語法:

<img
style="border: 3px 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 ;上、中、下


★ 常用圖像濾鏡CSS語法 click here !!


常用技巧:

如果我們想在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):把影音貼到照片上面去



style="border: 3px solid black; width: 520px; "

沒有留言:

張貼留言