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

2014年12月31日 星期三

掀起你的蓋頭來：resizable div：easy jQuery UI


可以隨意調整大小，拉出大小的文本區塊！

123


Resizable

這一行以下是DIV
這是內容文字。
這是內容


↖從這裡拉！
456


請將下列CSS及jQuery程式碼放到<body>之後：

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

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>

<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; overflow: hidden; }
#resizable h3 { text-align: center; margin: 0; }
</style>

說明：
一、紅色字是一開始要出現的div的大小。


請將下列html放到欲編輯處：

<div style="border: 1px solid transparent; width: 170px; height: 170px;">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
這一行以下是DIV<br>
<div style="width: 352px; height: 282px;">
這是內容文字<br>
這是內容<br>
<img style="width: 320px; height: 213px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIm_nG48lEN7LiosOSGVlmqN_UWQeeROnQM-UD_ZRV22rHRNLFypa99MwojHquM0OgiXlzz9Jv-gXuOyDLb4bfPtR_JbcLkh8_kjnQN4v8DwzmpKD82bp0-i52opE4-1HToqGxKBoBC8/w759-h506-no/IMG_2083.JPG">
</div>
<br>
</div>
</div>



說明：
一、綠色者字，為固定版型用的，其大小是比一開始出現的多加上20px。
二、橘色字體者是裡面內容的div。可以自由的做內容。裡面的藍色字體是div的大小，請自行設定。



影音教學：







0 讓我聽聽您的想法：

2014年12月26日 星期五

規律互動的背影色　有秩序的文字列


規律互動的背影色　有秩序的文字列

kds dlf  lds fldj djalfdjsl fds
dksf dsj fdjs alfjd safdsh fds fdsalf dsf
dls afdls lfdjsl kfjlkds lfdj sfj dsl fdlsa
fkdsf ljsdlaf lds aflds lfj dslaf lds fld sf ds;lf
ldsf dlsaj fd sfj ldsjf ldjs  dsf dsfd
sfkds fds fdhsa kfhdsk fkdsj flds lf dsf ds
dlsf dsj fds fjd slf dslfj ds
ld slf dslj flds fdjs lfj dlsajf ldsj flds lf dslf ds
dsl dsf ds fds
dlsf ldsjf lds fdjsfj dslf dsf


請 把下列CSS置放於<body>之後：

<style>
/*
這是整體表格的CSS
*/
table.tab20141226 {
border-spacing: 2px 0.1em;
word-break: break-all;
border: 0px;
}

/*
這是奇數列的CSS
*/
table.tab20141226 >tbody >tr:nth-child(odd) >td {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
background-color: transparent;
padding: 1em 0em;
}

/*
這是偶數列的CSS
*/
table.tab20141226 >tbody >tr:nth-child(even) >td {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
padding: 1em 0em;
background-color: rgba(232, 255, 245, 0.6);
}

/*
這是互動背景色的CSS
*/
table.tab20141226 >tbody >tr >td:hover {
background-color: rgba(240, 240, 240, 0.9);
}
</style>



影 音教學：



有關如何使用網頁顏色的教學：here
顏色代碼網站，及代碼轉換：here


0 讓我聽聽您的想法：

2014年12月21日 星期日

小資料量快速互動list：使用ol / li：easy jQuery






  1. 第一中標
  2. 第一中標的內文。第一中標的內文。第一中標的內文。
  3. 第二中標
  4. 第二中標的內文。第二中標的內文。第二中標的內文。第二中標的內文。
  5. 第三中標
  6. 第三中標的內文。第三中標的內文。第三中標的內文。第三中標的內文。第三中標的內文。
  7. 第四中標



  1. lds dsjfl djs fds f
  2. ldjs fdls fdsfjd sj fdlsj fd slf
  3. dls fdls fds fld sf dsl fdjslfd sf ds
  4. dlsfldsj f dsfj klds fds fj dsfj dkls fds fd s
  5. dskf dsj fdsj fljd slf dsl fdls fds f dslf dsf dsf
  6. ldjs fld sjfjd sljf dsj fljd slf dlsj fdjs flj dslfj dlsj fljd slfj dsljf lds fjdslkfj dlsjf lds fldjs lf dsjf ds f dsf
  7. dlsjfds fds fd fds fds fds






CSS 語法，請複製到<body>之後：

<style>
/*
整個list的CSS語法
*/
ol#ol20141221 {
margin: 0px;
padding-left: 0.5em;
list-style-type: none;
position: relative;
z-index: 99;
}

/*
整個奇數列list的CSS語法
*/
ol#ol20141221 >li:nth-child(odd) {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
border-bottom: 1px solid black;
cursor: pointer;
background-color: white;
}

/*
整個偶數列list的CSS語法
*/
ol#ol20141221 >li:nth-child(even) {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border-bottom: 1px solid black;
margin: 1em 0px;
padding-bottom: 0.3em;
background-color: white;
}

/*
整個偶數列list隱藏的CSS語法
*/
ol.displno >li:nth-child(even) {
display: none;
}
</style>



jQuery 互動語法，請複製於<body>之後：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$('ol#ol20141221').find('li').filter(':even').click(function() {
$(this).next().slideToggle(600);
});
});
</script>



影 音教學：






0 讓我聽聽您的想法：

2014年12月16日 星期二

有變化的版型：表格+CSS：圓角、陰影、旋轉、移動




這裡有很多字。這裡有很多字。 這裡有很多字。這裡有很多字。

這裡共有四種版面編輯動作：圓角、陰影、旋轉、滑鼠移入互動。【mouse enter↙】
這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有 很多字。

在表格的TD中，使用1px div的排版概念（上課術語），形成跨限制的Div面積呈現。【請看教學video】



CSS 語法，請置於<body>之後：

<style>
/*
圓角框CSS語法
*/
.radius1215 {
border-radius: 25px;
}

/*
陰影框CSS語法
*/
.boxshadow1215 {
-webkit-box-shadow: 2px 2px 2px gray;
}

/*
旋轉框CSS語法
*/
.rotate1215 {
-webkit-transform: rotate(-8deg);
}

.rotate121502 {
-webkit-transform: rotate(6deg);
}

/*
相對位置移動CSS語法
*/
.relapo1215 {
position: relative;
top: 1.5em;
left: 2.2em;
}

/*
字的安排的CSS語法
*/
.tdword1215 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6em;
letter-spacing: 0.1em;
}

/* 滑入有背景色CSS語法
*/
#tdhover1215:hover {
background-color: #CEFFCE;
}
</style>


教 學影音：



0 讓我聽聽您的想法：

2014年12月12日 星期五

有規律呈現文字：使用表格+CSS

表格搭配CSS，文字呈現有規律。
對於要處理大量文字，或是大量資料的版型需求而言，這是很好的解決方法。


這是標題
這是內文這是內文。
這是內文這是內文。
這是內文這是內文。
這是標題
這是內文這是內文。
這是內文這是內文。
這是內文這是內文。




CSS 語法，請放在<body>之後：

<style>


table.tab20141212 {
border-spacing: 2px 0.8em;
word-break: break-all;
border: 0px;
}

/*
這是奇數列的CSS
*/

table.tab20141212 >tbody >tr:nth-child(odd) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
border: 0px;
}

/*
這是偶數列的CSS
*/

table.tab20141212 >tbody >tr:nth-child(even) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
}
</style>



教 學影音：



互動css語法補充：

在<style>xxx</style>裡面加入下面二條css，則會互動地產生「有規律」的背景顏色：

table.tab20141212 >tbody >tr:nth-child(odd) >td:hover {
background-color: #DEDEBE;
}

table.tab20141212 >tbody >tr:nth-child(even) >td:hover {
background-color: #CAFFFF;



0 讓我聽聽您的想法：
訂閱： 文章 (Atom)