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

多媒體要秀在網頁上的基本運作架構。

課堂錄影：〈多媒體新聞寫作〉：時間4分鐘。

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

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

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

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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCQdW6xP3viXjxED0AU4mMelm7wpVqCvKy8_4DYTW9DHS7YtyW4qEfoyBGGknEYPCoEtnMbiaSOHTJP4EPh5Aas7Keudn_kbKkvc7xbZM6XtxJ1itxLZz_US64zS5FfQjdxBgnwzR9Ndo/w667-h500-no/P9086302.JPG">

語法效果：

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

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

語法使用說明：

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

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

★上課建議使用★


操作注意事項：

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

【2015/11/23補充】設定正確的圖像長寬比

設定正確的圖像長寬比，使圖像不會走樣。圖像的表現才會正確！

怎麼知道照片的大小呢？

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



電腦幫著算的計算方法：

請到這個兩個網站，它有工具可以幫你依等比例計算出圖像（或影音）的寬、高值，或是計算圖像什麼比例的。aspects.design。ARCalculator←←網站畫面如下 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXV6Bp-mGrnvhk2TFPhefN9zfu631xXrTsrRWsAhzT1ysQATEnfT7BDRq9ZVyZLpcPyl6X-ugSdQwOzhHBCrVymBqJivVU8tShZVM8ALoabJUF0ao3iTRn8J-ZQe-90arz2OC4BymDRXoY/w889-h500-no/P7214954.JPG">


CSS語法：

 <img
style="border: 3px solid black; width: 520px; "
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXV6Bp-mGrnvhk2TFPhefN9zfu631xXrTsrRWsAhzT1ysQATEnfT7BDRq9ZVyZLpcPyl6X-ugSdQwOzhHBCrVymBqJivVU8tShZVM8ALoabJUF0ao3iTRn8J-ZQe-90arz2OC4BymDRXoY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXV6Bp-mGrnvhk2TFPhefN9zfu631xXrTsrRWsAhzT1ysQATEnfT7BDRq9ZVyZLpcPyl6X-ugSdQwOzhHBCrVymBqJivVU8tShZVM8ALoabJUF0ao3iTRn8J-ZQe-90arz2OC4BymDRXoY/w889-h500-no/P7214954.JPG">


語法呈現樣貌：




進階圖像呈現範例：



CSS語法：

<img
style="border: 3px solid #FFCCCC; padding: 1em; width: 520px; height: 292px; background-color: whitesmoke;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXV6Bp-mGrnvhk2TFPhefN9zfu631xXrTsrRWsAhzT1ysQATEnfT7BDRq9ZVyZLpcPyl6X-ugSdQwOzhHBCrVymBqJivVU8tShZVM8ALoabJUF0ao3iTRn8J-ZQe-90arz2OC4BymDRXoY/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; "

---