2015年1月31日 星期六

Go to basic：表格（二）







一定要會的表格排版寫作基本動作（二）

表格的使用是數位文本排版寫作的重要基本寫作技巧。
老師累積了數年的教書經驗，看著同學可能常見的錯誤，以及因為基本功不好所導致的「創意」上的不完整。
現在，
2015年重新推出有關表格寫作的基本動作系列。
【按 我復原 click!】

請注意：
在一個表格中，將「幾個格子變為一格」的功能，最好只使用一次。不然，易於出現無法控制之情況。
如需要較複雜之版型，請使用多個表格（都可以使用上述功能），再將其積堆起來，就可以了。



影 音教學內容：
  1. 文字是泥土；圖像是磚塊。
  2. 把表格的幾格變為一格。
  3. 調整格與格之間的寬度。
  4. 表格與單元格的快速CSS套用。
  5. 在表格內插入背景圖。



影音教學範例的 CSS：

<style type="text/css">

.word2015013001 {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6;
}

.word2015013002 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
}

/* 插入背景圖 */
.bacimg20170622 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 800px;
background-position: left -200px top -200px;
}
</style>


表格寫作範例一：

天空的顏色決定了黃昏的溫度！燈光的開啟，是對夜晚的承諾。沈沈的重量！

↑ 請按這裡看上範例影音教學說明：



實作範例一：
這是文字



教學影音：




CSS語法：

<style>

/* 插入背景圖 */
.baim20180211 {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 800px;
background-position: left -200px top -200px;
}

/* 說明文字格式 */
.dword20180211 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.9;
background-color: rgba(152, 152, 152, 0.65);
text-align: center;
color: white;
}

/* 移動文字框 */
.dworpo20180211 {
position: relative;
top: -2em;
margin-bottom: -2em;
}

/* 以上一對是互動的CSS */
#tabtr20180211 {

}

#tabtr20180211:hover +div {
transition: 0.5s;
opacity: 0;
}

</style>







tr裡使用背景圖，創造出單一圖像均分割效果。

夏天。   天氣的好不好，看著綠葉和小蟲就知道了！











下午的食堂

人的多是一種必然。
快走的步代，
是一種讓人賞心的節奏。
★整個表格（table）插入背景圖。



表格寫作相關主題：
  1. Html 的表格應用語法
  2. 快 速排版寫作：表格堆積木法
  3. 簡 單、快速：3秒調出漂亮文字布局
  4. CSS 文字布局快速套用法
  5. 表 格使用基本功(5)：影像排排站呈現規律美




1 則留言:

2015年1月30日 星期五

Go to basic：表格（一）







會的表格排版寫作基本動作（一）：創造視覺的規律性
表格的使用是數位文本排版寫作的重要基本寫作技巧。
老師累積了數年的教書經驗，看著同學可能常見的錯誤，以及因為基本功不好所導致的「創意」上的不完整。
現在，
2015年重新推出有關表格寫作的基本動作系列。
使用表格的寫作時機：
使用表格，最重要的是看重了表格這種空間格式所呈現出來「規律性」之閱讀感知。我們可以從下面的案例看到，一種有規律性的文本呈現樣態，對觀看者會造成理解感知上的影響。

一種以表格的特色所呈現出來的閱讀媒材樣態，是更能有效打散讀者對文本的抗拒性。因此在規律的在比例上，就值得思索，例如1:1 或是 1:2 ，會有不同的視覺呈現。


影 音教學內容：
  1. 設定表格格子的寫作寬度。
  2. 調整表格內文字的排版位置。
  3. 最後，要把格線設為0px，就成形成排版樣貌。
  4. 當表格無法自動撐開時，解法。



操作練習範例：

1:1的比例（使用標準px格寬）：
表格的排版寫作
利用表格的規律特色，
格內文字位置的置放，
輕鬆的，
就可以完成，
有美感的呈現樣態。



1:2的比例（使用33%格寬）：
表格
 讓文本有秩序的寫作方法

說明：
格子寬度1:2的設定，第一格請調整寬度為 「33%」 「的表格」，如圖，請 click !。





秋的雲來
 夏的雲散


從高而下的衝擊
讓一種視野是開朗的明亮
 寬闊的山影
牽動著在水面上搖動的葉
風動的空氣
捲起花的片片白漾


上文範例教學影音：






更多表格排版範例：




表格寫作相關主題：
  1. Html 的表格應用語法　　
  2. 快 速排版寫作：表格堆積木法　　



沒有留言:

2015年1月14日 星期三

和讀者玩抓迷藏的互動技法：easy jQuery




在數位文本中，互動的 功能是有著和讀者「對話」的意味。對話，往往是用一種暗示的方法，來讓讀者體 會，或著說「理解」什麼。
「暗示」是一種形式的提示，用形式來表達想法。
例如，我們可以先把文字遮起來，再用互動的方法讓文字顯現。
也可以按一下，讓區塊消失。
這種方法會讓讀者，停下來想一下，思考一下，作者到底在想什麼？這比較接近我們在「對話」中的情境。
→

補充：那個在下面的按鈕的 html 寫法：

<button type="button">按我區塊會消失!</button><br>

你可以直接把「它」當做一個「字」的概念來想像和構思。
透過buttom，我們可以向讀者提示很多互的暗示和指示。




fldjsfjdsalfjldsj fldjs lf fj dlsj fldsjl fjdls ajf lds
fdslf dslf ldsj f
sfdls fldsj fljdsl;f dls fldsj lfjd slfj dslf ld;sj fldjs lfj dsf
dsfl dslf dsl flds fds
flds fldsj fljd slf lds lfjdsfj lds fdsf
dslfd slf dls flds fld sflj dslf lds fld sfld lf dsfds flds fls fldj slf dslf lsd fds
fdls flds fds lfj ds
dklsf ldsj fldsj fljd slf dslfj dls flds fldsj fldsj
ldf sjfldsj fljds lfj dslj fdsj fljd slfj ds;ljf l;dsj fljd slfj lds f
dslfj ldsjf ldsj fljd slf dlsjf ldsj fldsj fldjs lfj dslfj ds








請先把下列的 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">

範例中 DIV 使用的CSS語法：

<style>
.div2015011201 {
background-color: rgba(39, 39, 39, 0.9);
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64CEwkK-6qvKQbLA-ijLXTpMGG3FIB0qWA_n2mouFbtSvKk255O1m5a0Ybi88_23tVCSVGo2RXNZxc5fWxpeSwP0QtCzKx31epQhlOERoBf1lmae8s2EZIlVvZ-8Os9mtcmPu21nkegI/w162-h166-no/images0112.png);
background-repeat: no-repeat;
background-position: left 0.5em center;
background-size: 32px;
cursor: pointer;
}
</style>








onclick="$(this).hide('slide', {direction: 'up'}, 800);"





onclick="$(this).effect('shake', '4').hide('slide', {direction: 'right'}, 800);"





onclick="$(this).hide('fade', 800);"





onclick="$(this).effect('bounce', '3').hide('fade', 800);"





onclick="$(this).hide('explode');"





onclick="$(this).css({'position': 'relative'}).animate({'top': '-=90px'}).hide('puff');"





onclick="$(this).css({'position': 'relative'}).animate({'left': '+=230px'}).hide('clip');"


補充：還有各種不同的特效，請看此。
更多範例，請按此。



影音教學：



固定版型的補充說明：




沒有留言:

2015年1月9日 星期五

請讓圖隨風而逝吧！：image effect：easy jQuery




★ 請讓圖隨風而逝吧！★
 

▲ Click
構思方向：
  1. 在 Div 內設一背景圖。
  2. 在 Div 內再加入一張圖。這樣就會有二張圖重疊。
  3. 利用互動程式，讓上面那張產生被風吹走的效果，下面的圖就跑出來了。
  4. 接在div下面再做一個div，裡面寫入click。


請複製下列jQuery程式碼到< body>之後：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery-animations-tile-master/external/jquery.animations.min.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery-animations-tile-master/src/jquery.animations-tile.js"></script>



請複製下列 jQuery 驅動碼到<body>之後：

<script>
$(function() {
$('#ima150109').click(function() {
$(this).parent().next().css({'visibility': 'hidden'});
$(this).animate('tile', {
"duration": 2500,
"rows": 12,
"cols": 8,
"effect": "rotate flipX flyToLeft flyToUp",
"fillMode": "forwards"
});
});
});
</script>


注意事項：
  1. 紅色字為要消失圖的 id 。在圖片也要記得設相同的 id 。
  2. 綠色字為速度。1000為一秒。


影音教學：



資料來源：Tile plugin


沒有留言:

2015年1月6日 星期二

抓狂吧！圖片。




抓狂吧！圖片。









請複製下列jQuery碼到<body>之後：


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script
src="http://newsweek.shu.edu.tw:8080/lmc201410/jquery-animations-tile-master/external/jquery.animations.min.js"></script>
<script
src="http://newsweek.shu.edu.tw:8080/lmc201410/jquery-animations-tile-master/src/jquery.animations-tile.js"></script>

<script>

$(function() {

var flag = 1;
$('#pic001').click(function() {

if(flag == 1){
$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7AyK0DOQx_gNx7LdniY_aV2kp7dgZlQ1SViQU-M8G2JBvdgBeae5Um5Oydanv5r4WBP_sz1QQR6UDIyVRXzqzCy9IoRUcFz8kRzJacxMGsyUtB1q0ErC8bnpK5_n-zIKKgImCABGI8Y/w1016-h762-no/P1044405.JPG');
$(this).animate('tile', {
"duration": 2000,
"rows": 8,
"cols": 6,
"effect": "flyIn",
"fillMode": "backwards"
});
flag= 0;}

else{
$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0G1LoZCzKx-zemO7_m173182cbRR1_oXy40o7aJjcxUdlas16s0Bh4mjtxoK7I_rVDYUcC68AMjV_ob8GqsJSqoWZRWqrMFup2K0goXxF0CoMXQKcmu2VVFv6kjc-PfKN8ri8V6_JPLI/w1016-h762-no/P1044582.JPG');
$(this).animate('tile', {
"duration": 2000,
"rows": 8,
"cols": 6,
"effect": "flyIn",
"fillMode": "backwards"
});
flag = 1;
}
});
});

</script>

注意事項：
一、藍色字體者為拼圖過程時間，1秒是1000。
二、褐色是要被拆成幾塊，此例是8x6。
三、綠色字是圖片的網址。
四、紅色字的id，要和一開始圖片所設的id 相同。
五、此範本只能做一張效果，要第二張，請重新複製jQuery碼一次，並更換id。


影音教學：






沒有留言:

互動文本寫作的哲學、社會學面向



2015/01/06：期末總結
互動文本寫作的哲學、社會學面向

教室上課錄影，共二支，每支約10分鐘。




Resizable

請拖拉左下角以展開課堂影音
影音（一）

影音（二）


請按住這裡往下拉◤



數位文本不是單純的一種文本寫作現象，相反的，它「反映」出一種社會變遷過程中，一種新型態文本的需 求。


可以看到，這和現代性以及後現代性是有某種理論上的可關連性。同時也是一種「互文性」、「對話性」 的文本表現樣貌，以「反抗」傳統的「在場」式的大理性 敘述。

你可以使用多媒體及互動的寫作技巧，以片斷的、非線性的、對話的、多媒材 的、互動的方式，來表達一個「在你心中的想法」嗎 ？

這是新時代的新的寫作要求！



沒有留言: