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

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;" 是指讓媒材物件先「消失」在視線裡,但在電腦中仍被視為存在。



二、教學影音




響應式互動

利用CSS語法中的參數特色,尢其是「XX%」形式的CSS參數使用,可以容易的創造出「響應式」的互動呈現效果。

語法:

<style>

.divch20191026 {
width: 40%;
border: 1px solid red;
padding: 5px;
}

.picch20191026 {
width:100%;
}
</style>



<div class="divch20191026 ">
<img class="picch20191026" src="https://images.unsplash.com/photo-1571475200232-f0cb2cfb0af5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
</div>


呈現效果,請按此。
請任意拉大縮小瀏覽器,畫面中的圖像會隨之變大縮小,這就是響應式互動。


按二下滑鼠退出!



沒有留言:

張貼留言