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物件。


一、寫作操作步驟


１、程式碼掛入網頁

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

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


２、寫作媒材物件的語法

<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>


３、呈現：

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


４、說明：

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>


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


按二下滑鼠退出！



沒有留言:

張貼留言