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

2012年4月30日 星期一

如何找到新聞系Ftp檔案的網址


在多媒體文本寫作中,常常要用到網路空間裡面的檔案。 而確定Ftp檔案的網址是很重要的步驟。 以下我們要來告訴同學,如何確定出新聞系Ftp空間中, 檔案位置的網址。 ↖

FTP教學影音片:

教學內容注意事項:
(1)新聞系Ftp網路空間,檔案位置網址的標準寫法:
http://newsweek.shu.edu.tw:8080/你開的目錄/次目錄/檔案名稱 .副檔名
上面紅字的部分,請你照抄,然後把你在新聞系Ftp開的檔案夾名稱、次檔案夾名稱, 寫進去。再來是你的檔案名稱。 這樣就可以了。

(2)例如:我在Ftp開了一個資料夾「ftptest01」,裡面又開了一個次資料夾「01」,次資料夾裡面有一個檔案是「test01.doc」。
這是Ftp中檔案的位置:
sftp://student@192.192.149.151:4322/student/ftptest001/001/test01.doc

請務必一定要改成如下:
http://newsweek.shu.edu.tw:8080/ftptest001/001/test01.doc
把藍色的部分,改成紅色的部分。這樣電腦才能正確的找到檔案位置。


建立FileZilla連線的相關資料:
主機:192.192.149.151
連接埠:4322
伺服器種類:SFTP
登入形式 :一般
使用者:student
密碼:(上課時提供,或fb訊息問我)
FileZilla連線軟體下載:http://filezilla-project.org/



2012年4月29日 星期日

網路空間的使用:安裝 Dropbox & 建立 public folder


安裝Dropbox並建立Public folder

多媒體寫作有太多地方要用到網路空間。
尤其是互動文本寫作,要用到flash的機會相當多,
我們往往要把flash檔放到網路空間才能使用。

在這裡我們要介紹免費網路空間 Dropbox網站
新聞系同學注意 Ü 



新聞系Ftp 是給新聞系學生上課使用,交作業要用它。
Dropbox有免費的2G空間,學生可以一般個人使用。非課堂的朋友也非常適合使用。



安裝Dropbox影音教學:



注意事項:
1.要分享連結出去的檔案,例如我們常用的Flash及多媒體寫作各種技巧,請一定要放在「public」這個資料夾之下,不然會連不出去。如下圖:


2.根據一些同學使用的經驗總結,如果把.html檔(即網頁檔)放到 public folder 中再連出去,往往有一些效果會不見了。所以如果是網頁檔,最好放在 ftp 。


**注意:public資料夾要按下列方式啟動才有作用**
如果你安裝之後找不到Public folder,那麼可以手動調整:
(1)請到 https://www.dropbox.com/enable_public_folder 。
(2)請按下 “enable public folder” 按鈕。
(3)送出 “Send email”,然後到你的e-mail信箱去打開驗證信箱。
(4)依指示,再填入帳號(e-mail〕以及密碼。
(5)〔建議!〕此時重新開機,之後就會有public folder了。


讀者來信更正,請各位同學一定要看這裡。

enable-public-folder只適用專業版及企業方案.登入Dropbox帳戶後,利用右上角"共享資料夾"圖示,就能產生public資料夾. 詳細說明見https://www.dropbox.com/help/16

2012年4月28日 星期六

Flash の ppt白痴大法01! 多媒體寫作就是簡單。


同學,
我們這次用非常簡單的ppt來思考多媒體互動寫作。
以後還會有更多!
學一下,真的簡單到不行了!

先看一下要學的範例:


可以看到,有文、有圖、有video。而且三者是相互說明。例如video就可以放上記者自己的講話和說明。這樣多媒體文本的力道就不是其他的媒介可以代替的。


再來,請看操作說明:


操作過程必要資訊:
1. 請下載並安裝iSpring這個軟體。請至此下載:http://www.ispringsolutions.com/
2. 將做好的檔案夾放到新聞系的FTP站,請參考新聞系網路空間的使用(FTP)
3. 請注意在新聞系ftp中,*.swf的檔案位置格式如下:

http://newsweek.shu.edu.tw/~student/你開的目錄/檔案名稱.副檔名


黑字請照抄,紅字改成你放在新聞系FTP的位置。

4. 將這個flash(*.swf)嵌入網頁的語法如下:

<embed width=640 height=480 base="."  loop="true" menu="true" play="true" src="http://newsweek.shu.edu.tw/~student/你的資料夾名稱/次資料夾名稱/檔名.swf" type="application/x-shockwave-flash"  wmode="transparent"></embed>


說明:
width=640 寬度
height=480 高度
src="http://..." 是swf檔案的位置

**大小可以自行調整,檔案位置請小心抄寫。其他的可以不變**


2012年4月16日 星期一

來了來了 小世界多媒體新聞也可以被按「讚」!


讓小世界網路組也可以被按讚!
社群網站是未來新聞傳播的重要管道之一;
我們要開始來感受,新聞的社群流動的力道。



step 1
  1. 請先上傳作業到小世界網路組。
  2. 經課堂檢討後,被確定為「上版」。
  3. 請複製「上版的作品」在小世界網路組的「網址」。
step 2
  1. 請到 https://developers.facebook.com/docs/plugins/like-button ,或「按此到達」。
  2. 將step 1的網址填入,並取得嵌入碼。
  3. 請將獲得之嵌入碼再寫入作品網頁,並再次【修改】/【上傳檔案】即可
  4. 注意:新檔案最好重新命名(不要用中文),然後【刪除】那裡要打勾,如圖。
step 3
  1. video影音教學:


注意事項:
一、請用純文字編輯器來執行此動作,如記事本、Notepad++等。
二、請注意影音中要加入 https 的地方。
三、使用記事本另存新檔時,請要選擇utf-8的編碼,如下圖:

四、要上傳後,fb的按讚才會顯示出來。


2012年4月12日 星期四

網頁文本的分欄及斜置


4分57秒
照片提供:張齡同學

文字要走欄!
就目前的螢幕顯示科技而言,文字在螢幕上是「不耐閱讀」的。所以讓文字行寬變短的走欄應用,就非常重要。
將文字區塊斜置,則是要對某些特定文字加以強調的作法。在讀者快速掃瞄閱讀的過程中,提供其快速掌握重點的提示,這些提示往往會決定了讀者是否要繼續往下閱讀




走欄、斜置的語法
1. 讓網頁文字走欄:
<div style="count: 3;">
要走欄的文字。<br>
</div>
2. 讓區塊文字斜置:
<div style="transform: rotate(1deg);">
要斜置的文字區塊。<br>
</div>
語法說明:
  1. 這兩個語法只對 Google Chorme 有效,IE 是無效果的。
  2. column-count: 3 ,這數字 3 是指走三欄。
  3. rotate(xdeg)中, x 要填入數字,可以是正或負的數字,會決定傾斜度。本例為數字 1 。


常用走欄的CSS 語法:

column-count: 2;                                     //分成幾欄

column-gap: 40px;                                 //欄與欄的寬度

column-rule: 1px solid lightblue;           //分欄線的設定



1.老師對於哲學有些專研,那想要問老師覺得研究哲學對老師有甚麼影響,會不會建議大學生也接觸哲學?
  說研究不敢啦,我覺得文科大概分幾個層次啦,哲學、社會學、歷史,再過來就是應用的社會科學,傳播就是在應用的社會科學,為什麼會這樣分呢?很簡單,哲學就是在探討最根本的問題,生死啦、存在啦,這一類的東西。那社會學就是往下down,可能就是社會上的問題,不是這種根本的問題,然後再到歷史又是另一個東西,我們對經驗值得了解,每個時代的變化的了解,不同層次的東西。我喜歡讀哲學啦,為什麼喜歡讀哲學,因為從小時候就喜歡讀這個東西,基本上跟每個人生命的習氣比較不一樣,我比較care生死存亡的問題。
  人總會死吧,死了要到哪邊去,社會學不會跟你碰這種問題,歷史會碰一點,傳播更不會講。你們一輩子碰這問題呀,那你總會碰到吧,你哪天得癌症壓,你會死呀,你從小不準備生死的問題你怎麼辦。哲學不只生死的問題,我們說追求自由,甚麼是自由,你經驗過自由嗎?你一輩子沒經驗過自由壓,你憑甚麼去追求自由。當然我會說你為什麼沒經驗過自由,那有很多哲學的問題。是不同層次的問題,這是第一個。
  那第二個,那哲學是因為他是大問題,所以他可以釐清處我們很多思路。我就把從哲學問題把很多觀念打清楚之後,你在問社會學,或是傳播的問題,其實你很多方向是清楚的,你不會東讀一點西讀一點。讀哲學總是一條路啦,你生命中很多困擾,鼓勵你讀哲學。如果對做學問有興趣,如果你不把哲學弄好,那做學問是不可能的。


  很多呀,西洋哲學史,開始讀哲學史啦,比較不會這麼深,漫畫哲學壓,我們圖書館很多呀,其實我喜歡讀哲學家傳記,很多小本小本的,康德、黑格爾、其實我覺得你不用怕,就開始讀柏拉圖、亞里斯多德,很希臘很古典的東西,其實他反而把問題談得清楚,比如說我們也是壓,談網路也會談到柏拉圖,談後現代也會談到柏拉圖,像柏拉圖跟亞里斯多德都有很多根本的問題在他們那時候就問出來了,只是每個時代在解決他的方法不一樣。
  哲學是讓你理解問題的型態啦,我當然是鼓勵啦,讀不懂,當小說看,有的時候真的是不一定讀得進去啦,跟生命的個性有關,但就去讀書館找哲學史,這本讀不懂就讀別本,字讀不懂就看漫畫的也行,不然就去看傳記也好,把它當小說都會對你有幫助啦。



2.老師的作風相對於其他的老師相對自由。但在自由的同時,更會準備很多的教材,也會在FB上錄製影片讓學生們學習更多的東西,準備了很多東西,但有不會逼學生去學。
這個是為什麼呢?感覺老師有著自己的一套哲學,可不可以跟我們分享這個人生哲學。
  大概是受中國哲學有影響啦,如人飲水,冷暖自知。或者你要用佛教的術語,不同的根器吧,《法華經》:大根、大枝、中根、中枝、小根、小枝 。我覺得在世新這樣子狀況的學校,每個學生的性向是不一樣的,我覺得強迫每一個學生一定要去理解某種制式的東西,我覺得是太殘忍了
  對我而言,你上課看的出來,很多學生眼睛是沒辦法發光的,不是說好不好或是對不對,生命情調不再這邊,生命情調很重要。有些人適合當導演,那他幹嘛理解柏拉圖?有些人就是當salers啊,你看郭台銘,他賺這麼多錢,你跟他說柏拉圖他能理你呀,但這個社會不是每個人都需要理解柏拉圖呀,只是這社會也需要郭台銘這樣的人。
  我覺得我尊重每一個學生的個性,基本上是這樣子。
  可是那當然尊重每個學生的個性,當然尊重學生的個性,當老師也會希望每一個學生都能夠讀一點,在你的課當中都有一點收穫吧,我說有一點收穫是這樣子,因為我生命的經驗,一學期上下來說有多大的收穫,都是騙人的啦。幾句話聽到耳朵去那就不得了了,總比睡覺好吧,幾句話聽到耳朵去就不得了了,但問題是如何讓幾句話進到耳朵,用禪宗的說法,這個叫做手段。


  甚麼叫做手段,有些人適合課堂上講的天花亂墜,總有幾個學生喜歡那種調調,有些人不行,有些人可能看影音,他看得進去;有些人可能會覺得這個老師有趣,又不會兇人,好像滿好混的,他因為這樣不會怕我,他會來跟我聊天,聊了幾句他聽進去了,換句話說我覺得在世新這樣的學校你不用去期待用一個方法讓100%的學生都能夠接受,而是每一種方法大概就只能「對應」,用禪宗或是佛教的術語那是對應。
  你根器會對應到不同東西,這根氣沒有好壞之別。所以我去創造各種方法去對應各種可以吸引他的學生。我自己對世新的學生感覺是,你強迫他,他可能課堂上表現得很制式啦,但是你可能斬斷他的興趣,我覺得斬斷興趣是件很恐怖的事情,因為興趣不一定要在我教他的時候萌芽,他可能在兩年後三年後會再出來,我覺得不要斬斷興趣是很重要的。所以為什麼我上課盡可能地笑笑的,很搞笑的,我覺得那是維持學生的一種興趣的過程,而這是很重要的,我很care這種東西,所以才會是這樣的一種上課型態。
陳伯瑞同學的採訪稿,全文。刊登於《小世界》。
Many thanks!!




使用kompozer的影音教學:



教學影音內 容:

<style>
.colum0308 {
column-count: 3;
column-rule: 3px outset gray;
}

.word030801 {
font-family: Verdana, '微軟正黑體';
font-size: 1.06em;
font-weight: normal;
line-height: 1.8em;
text-align: left;
padding: 0.5em;
}

.rotate030801 {
transform: rotate(-3deg);
}
</style>





2012年4月8日 星期日

把錄音檔放到多媒體網路新聞中去



把訪問錄音檔或相關聲音檔放到網路新聞中去,就可以增加新聞內容的豐富度以及臨場感。例如,你要呈現暗夜的貓叫…

把聲音檔嵌入網頁中有二種方法:
(1)傻瓜法:找到可以直接產生聲音檔嵌入語法的網站,再輸入聲音檔的位置網址。
(2)高竿法:使用<embed>語法,來直接控制聲音檔。


Ü傻瓜法影音教學:


影音內容注意事項:
(1)一定要先把聲音檔放到網路空間,可放至Dropbox或是新聞系的FTP
(2)FTP檔案位置網址轉化碼:http://newsweek.shu.edu.tw:8080/。



Ü高竿法影音教學:


影音內容注意事項:
(1)嵌人聲音檔語法:
<embed src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/audiox/Cat_3.mp3" autostart="false" width="300" height="60" />
(2)說明:
src=" http://newsweek.shu.edu.tw:8080/lmcsilver20121007/audiox/Cat_3.mp3 " 錄音檔案存放位置
autostart="true" 使自動播放
autostart="false" 不自動播放
width="300" → 播放器寬度
hight="60" → 播放器高度


***###***
Q:老師我想請問:怎麼在網頁裡面自動放歌?

A:這是把聲音檔嵌入到網頁的進階運用。基本上,就是把播放器給隱藏起來,
再設定為自動播放就成了。請看下列的進階語法:

<embed src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/audiox/Cat_3.mp3" autostart="true"  hidden="true"  width="300" height="60" />

可以看到,我們多了個 hidden="true" 的控制項,這代表要不要隱藏播放器。
hidden="true" 使自動隱藏
hidden="false" 不自動隱藏
autostart="true" 自動播放




移動滑鼠就換圖的多媒體互動寫作技能



滑鼠移入就換

透過互動形成的圖像變化,
可以讓創作者進行更豐富的意義表達。↙↙




1 實作範例

1.語法的作用實例 ââ 請把8移至圖內


2.語法練習素材照片,供同學習作用↙。

第一張:http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg

第二張:http://farm8.staticflickr.com/7195/6909391890_89b10a66c8_z.jpg
P3182950
6868049716_15fc49cb6c_z (2)

語法說明

原始語法如下:
<img src="http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg" onmouseover="this.src='http://farm8.staticflickr.com/7195/6909391890_89b10a66c8_z.jpg';" onmouseout="this.src='http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg';" width=640>

語法說明:
  1. img src="xxx"是指瀏覽器一進入此頁就要出現的圖片。xxx是指圖片的位置網址。
  2. 「onmouseover="this.src='xxx';''」,是指滑鼠移到這張圖片位置時,要換成另一張圖片。xxx是指要換成的圖片的位置網址。英文字很清楚的表示了:on(在) mouse(滑鼠) over(移過)。
  3. 「onmouseout="this.src='xxx';",是指滑鼠離開時,要出現的圖片。在此例,是同第一張出現的圖。
  4. 這是利用視覺的誤差所形成的效果,用來說明圖片內容很好用。
  5. 二張圖片的大小最好一樣,比較容易處理。請注意: 「;」分號及各種標點符號都要打對,才行。

影音教學第一版。【video ↗】
影音教學第二版 with KompoZer。 ↙↙



實例示範二

再來提供一個使用這技巧的寫作範例:

老鏡並不銳利,但顏色卻很古典。至少是一種溫暖的顏色感。
這種溫暖素,是現代鏡比較感受不到。
Olympus om 50mm f3.5 Macro拍的。移滑鼠去看它!â8


更多這支鏡頭的所拍的照片,請進。





滑鼠移入,換圖,小移動變化

這個練習,是直接寫入圖像就可以了。
再來是,於圖像中 img 設定各種參數及互動語法,即可。簡單,好用。


範例呈現:


    大家都有口福了!


設寫入jQuery程式 於<head>xxx</head>之間:

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>


HTML:

<img style="width: 420px; height: 315px; position: relative; left: 0px; top: 0px;"
onmouseout="$(this).animate({left: '-=5px', top: '+=5px'},200).attr('src', '移出時的照片網址');"
onmouseover="$(this).animate({left: '+=5px', top: '-=5px'},200).attr('src', '移入時的照片網址');"
alt=""
src="一開始時的照片網址"
align="top">

【說明:】
  1. 請記得在img style裡加入參數: position: relative; left: 0px; top: 0px;
  2. 移動的距離,可自行設定數字(藍色字 體)。



PART II 低調炫技的換圖法




滑鼠移入的低調震動,引起讀者的注意。 
教學影音
1.請copy下列程式並貼到<head>xxx</head>之間或<body>之後。使用KompoZer建議放到<body> 之後。
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
2.請copy下語法貼到要呈現的編輯區域。
<script>
$(function() {
   $('#chp001').hover( function(){
      $('#chp001>img').attr({src: '滑鼠移入後要出現的照片位置網址'}).effect({effect: 'shake', direction: 'up', distance: 2, times: 1});
      },
      function(){
   $('#chp001>img').attr({src:'滑鼠移出後要出現的照片位置網址'});
   });
});
</script>

<div id="chp001" style="width: 480px; height: 270px;">
<img  style="width: 480px; height: 270px;" alt="" src="一開始要出現的照片位置網址"><br>
</div>
說明:
第 2 部分的語法,只能產生一個換圖,如果要再做第二個,請再將第 2 部分語法重貼一次,並更改所有的 id 識別碼,如上例紅色字部分,例如全部改成 chp002 。


純CSS語法的「滑鼠移入即換圖」:下面範例




作 法:
語法:
一、請先做一個div,並把寬度和高度設成和圖像的大小一致。並設好id。此例為id="divchpic01",即紅色字體者。
二、再來把圖像以「背景圖」的作法,塞到div裡面,即有圖片呈現的效果。 利用css的hover功能,即「滑鼠移入會變化」的功能,並設定成滑鼠移入就換掉背影圖。【即把右邊的css語法貼到<body>之後或<head>xxx</head>之間】。
三、如此就形成範例中的效果。
<style>
#divchpic01 {
background-image: url(第一張照片網址);
background-repeat: no-repeat;
background-size: 560px;
}

#divchpic01:hover {
background-image: url(第二張照片網址);
</style>
教 學影音:





滑鼠移入,照片就會滑動




教學影音:



CSS語法:

<style>
.baimg032801 {
background-image: url(https://lh3.googleusercontent.com/--SjwjQEH5iw/VRQegF-l_kI/AAAAAAAAaxY/X4Hl4PW5odI/w1049-h700-no/IMG_4621.JPG);
background-repeat: no-repeat;
background-size: 420px;
}
</style>

jQuery程式:請放 到<body>之後

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">

驅動程式碼:請放到 <body>之後

<script>
$(function() {
$('.baimg032801').hover(function() {
$(this).find('>img').hide('slide', {direction: 'right'}, 400);
},
function() {
$(this).find('>img').show('slide', {direction: 'right'}, 400);
});

});
</script>

說明:
移動的方向有:left, right, up, down 四種方向。
移動的速度是:一秒為1000。所以400是0.4秒。







CSS:hover  圖片連動效果


網友:
請問這個語法有辦法做連動嗎?
例如我滑鼠移到A圖片上 除了A圖片會變換成B圖片之外 另一邊的C圖片也會改變成D圖片的語法?


寫作構思:
一、設置一列二欄的表格。將表格格子的寬度和高度設定好。
二、將背景圖的css語法寫入到<head>xxx</head>之間。
三、將class "tdgacgroimg161216" 設置到 table 裡。注意哦,是 table 裡。
四、背景圖的寬度及高度,要和表格的格子寬、高度,一致。






<style>

/*滑鼠未移入前,左邊格子的背景圖css*/
table.tdgacgroimg161216 >tbody >tr >td:nth-of-type(1) {
background-image: url(https://c2.staticflickr.com/6/5621/30836315425_21ac8c49a9_b.jpg);
background-repeat: no-repeat;
background-size: 279px; /*這裡設置背景圖的寬度、高度*/
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

/*滑鼠未移入前,右邊格子的背景圖css*/
table.tdgacgroimg161216 >tbody >tr >td:nth-of-type(2) {
background-image: url(https://c1.staticflickr.com/6/5586/30837219312_7c8a8ee18f_b.jpg);
background-repeat: no-repeat;
background-size: 279px; /*這裡設置背景圖的寬度、高度*/
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

/*滑鼠移入後,左邊格子的背景圖css*/
table.tdgacgroimg161216 >tbody >tr:hover >td:nth-of-type(1) {
background-image: url(https://c3.staticflickr.com/6/5642/30491037130_c585d097cb_b.jpg);
}

/*滑鼠移入後,左邊格子的背景圖css*/
table.tdgacgroimg161216 >tbody >tr:hover >td:nth-of-type(2) {
background-image: url(https://c3.staticflickr.com/6/5563/30817634722_09455344ae_b.jpg);
}

</style>



CSS:hover  套圖緩慢移動效果



滑鼠移入DIV後,裡面的照片就會緩慢的移動。




構思方向:

一、請先做出一個DIV。
二、在DIV內置入你想放入的多圖片,圖片請設定好大小一致。
三、把<style>xxx</style>置入到<head>xxx</head>中間,即寫入 css。
四、把class  " teat00290b ",置入到DIV 裡。就可以了。


<style>
div.teat00290b {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
overflow: hidden;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}

div.teat00290b >img {
margin: 3px 7px 3px 2px;

}

div.teat00290b:hover >img:nth-of-type(1) {
margin-left: -390px; /*這裡的數字決定了離動之距離*/
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
</style>





文繞 圖;滑鼠移入,圖變大,版型不變


CSS語法:

<style>

/*DIV的設置*/
.divimg2017101501 {
width: 420px;
height: 280px;
float: left;
padding: 2px;
margin: 0px 5px 5px 0px;
border: 1px solid gray;
}

/*裡面圖像大小的設置*/
.divimg2017101501 img {
width: 420px;
transition: 0.6s linear;
}

/*滑入DIV後的互動設置*/
.divimg2017101501:hover img {
width: 560px;
position: relative;
z-index: 2;
}

</style>


HTML編輯區的語法:

<div class="divimg2017101501">
<img  alt=""
src="https://c3.staticflickr.com/9/8720/28767341842_11b2a4d8df_b.jpg"><br>
</div>



互動呈現效果:



這是文是文字這是文字這是文字
這是文字
這是文字這是
這是文字是文字這是文是文字
這是文字這是文字這是文字這是文文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字



滑鼠移入,圖像移動,文字秀出來。純CSS。easy!!

 純CSS互動,構思也簡單。運用上也很有可創意性。例如,鳥的圖象,滑鼠移入後,鳥的名字就可以秀出來。


呈現範例:






    這裡是那裡呢?
    一種黑暗中的動態感。
   
    在新北市的一個十字路口中!



構思及作法:

  1. 做出一個文字框(DIV),設定寬、高,要和圖像的寬、高一致。
  2. 文字框的意欲位置,寫入文字。
  3. 緊接著就把圖像置入於文字後。寬、高要和文字框一致。
  4. 將class " wordimgcla20171217 "寫入到文字框,即可。這裡使用選擇器父子關係的觀念。


CSS語法:

<style>
/*文字框的設定,字變化*/
.wordimgcla20171217 {
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: 800;
line-height: 1.7;
letter-spacing: 0.1em;
text-shadow: 0px 0px 15px rgba(255,215,0, 0.7);
position: relative;
}

/*使用position: absolute 移動圖片*/
.wordimgcla20171217 img {
position: absolute;  
left: 0px;
top: 0px;        /*以上三個參數值使圖片移到文字框左上角定位*/
transition: 1s linear;
}

/*滑鼠移入後的變化*/
.wordimgcla20171217:hover img {
left: 0px;      /*圖移動的方置和距離,使用left, top來設定*/
top: -180px;
}

</style>


試看看?

你可以把參數值

overflow: hidden;

加到文字框的 Class 設定中,看看會什麼變化。



滑 鼠移入,放大照片




CSS:

<style>

.flex-container03 {
display: flex;
width: 540px;
height: 360px;
justify-content: center;
align-items: center;
overflow: hidden;
border: 1px solid lightgray;
}

.flex-container03 >img {
width: 95%;
transition: 0.8s;
}

.flex-container03:hover >img {
width: 150%;
}

</style>


HTML語法:

<div class="flex-container03">
<img alt=""
src="https://farm2.staticflickr.com/1923/45411339412_bab3351a32_c.jpg">
</div>

做法:

  1. 做一個DIV。
  2. 裡面放入照片。
  3. DIV使用flex功能設定照片垂直居中。
  4. 加入 hover 互動功能,放大照片。