2014年7月29日 星期二

布落格寫作07：div 堆積木排版寫作









什麼是網路排版寫作？ 【教學說明 show/hide】
這就是說一位布落客作者在寫作時，不但要思考內容是什麼，同時也要思考版型的樣態會是什麼樣子。以前的傳統寫作，內容及版型的產製是分開的，所以有作者、 有美編；但在網路布落格中，一位作者要同時來處理兩種工作項目。換言之，作者與美編的工作性質會同時存在於布落客作者。這是第一點。
第二點是，正如同大家所熟悉的，網路的文本是很視覺化的，比較接近傳統的「圖文整合」式的文本表現。一位作者在寫作時，要能同時構思版型；這不但能讓作者 準確的把各種文本素材掌握好，同時也是要透過圖文的互文性來傳達出作者的想法和企圖。
第三點，要達成排版寫作，最基本的技法即是用div區塊的推疊。就像是堆積木一樣，讓幾塊div區塊相互的推疊起來，就可以快速的完成一種簡單的圖文整合 版型的寫作。





Div 區塊堆疊排版寫作的互動範例【click】↗
Div區塊排版寫作相關CSS語法：

  1. margin: 20px; 外邊距。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕。
  2. margin-top: 20x; 上外邊距。〔-top 上/ -right 右/ -bottom 下/ -left 左〕。
  3. padding: 20px; 外邊距。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕。
  4. padding-top: 20x; 上外邊距。〔-top 上/ -right 右/ -bottom 下/ -left 左〕。
  5. border-style: solid; 框線樣式。〔solid 實線／dotted 虛線／dashed 短折線／double 雙重 線〕。〔border-*-style: 樣式; 指定邊框； *(-top 上/ -right 右/ -bottom 下/ -left 左)〕。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕
  6. border-width: 2px; 框線粗細。〔實線／百分比〕。〔border-*-width: 粗細; 指定邊框； *(-top 上/ -right 右/ -bottom 下/ -left 左)〕。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕
  7. border-color: red; 框線顏色。〔顏色值〕。〔border-*-color: 顏色; 指定邊框； *(-top 上/ -right 右/ -bottom 下/ -left 左)〕。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕
  8. （合併）border: solid 1px red; 框線（樣式 粗細 顏色）。
  9. border-top: solid 1px red; 上邊線。〔-top 上/ -right 右/ -bottom 下/ -left 左〕。
  10. width: 30px; 寬度。〔數值/ 百分比/ auto〕。
  11. height: 30px; 高度。〔數值/ 百分比/ auto〕。
  12. float: left; 浮動。〔left 左/ right 右/ none 取消〕。
  13. clear: both; 清除浮動。〔none 不清除/ left 解除靠左浮動/ right 解除靠右浮動/ both 解除浮動〕。
  14. overflow: scroll; 捲軸。〔visible 顯示/ hidden 隱藏/ scroll 固定捲軸/ auto 自動捲軸〕。
  15. overflow-x: scroll; x軸捲軸。〔-y y軸捲軸〕〔scroll/ hidden〕。
  16. overflow: -webkit-marquee; 跑馬燈。
  17. visibility: hidden; 不可見。〔visible 可見/ hidden 不可見〕。
  18. opacity: 0.2; 透明度。〔0~1.0 消失~全顯〕。
看懂上面的簡表＆div 的css語法特色。



Div區塊CSS語法網路外部資源：
  1. HTML 教學之容器（樣式）
  2. CSS 語法教學
  3. W3School CSS教程
  4. CSS(Cascading Style Sheet) Note


Div區塊lmc的網路教學：
  1. 我 也會 CSS 排版功力大躍進
  2. DIV + CSS 隨心所欲搞定網路排版寫作
  3. CSS 的文字魔術
  4. 圖 像的置左、置中、置右：CSS 搞定照片




張貼者： 於 沒有留言:

2014年7月7日 星期一

布落格寫作06：照片及youtube影音嵌入網頁

















多媒體的文本寫作 click to full text
數位新聞的挑戰，從最根本 的寫作過程而言，在於新媒材的使用。正如同約翰．凱奇在音樂領域對於30年代電子樂器出現後的使用預見：音樂的表現形式將從現存樂器的專制下獲得解放；我 們可以譜寫和演奏以轟鳴的馬達聲、風聲、心跳聲和山崩地裂聲組成的四重奏（Russell／常寧生等譯，2003：427）。以螢幕為呈現媒介的數位新 聞，擴大了我們對於組構新聞文本媒材概念，使得我們從諸如文字、聲音、影像、影音等組構傳統新聞文本的「有形的媒材」解放出來，一些「無形的」媒材，諸如 超連結、互動、clikc位置、flash、javascript等，也成為了我們組構數位新聞的必要「媒材」（李明哲，2013：140-141）。
跨螢幕的「媒 介重製」能力與「匯流溝通」能力，是數位內容、新聞的「數位文本呈現」能力與「數位產製技術」能力。不管是數位文本呈現能力還是數 位產製技術能力都是以針對「數位呈現科技」加以應用而來的能力，換言之就是要能將數位科技所帶來的呈現特色，諸如超連結性、互動性、非線性、多媒體性、整 合性等等，帶入以多重形構為章法的媒材布局思考、應用，「上手的」將數位作品呈現於各式螢幕媒介通路。因之，某些最基本「數位科技」的學習和掌握就是不可 迴避的，如此才有能力理解、體會、思考數位科技的新呈現特色，同時也才有能力與其他數位科技專業者進行匯流溝通。正如同Brownlow在《當代媒體寫 作》一書中的訪談所言：「我們不是HTML程式寫作員，但我們知道如何將各種媒材一起放到網頁上。我們使用特定套裝軟體來完成部分工作，但學會一些基本 HTML仍是重要的」（Wilber & Miller, 2003: 216）。在上文的「多媒體寫作基礎技能項目」列表，就是本書所要開展的技能面的教學項目。這些是「蹲馬步」、是「基本功」，是數位寫作能力養成過程中不 可迴避的學習過程。
李明哲，2013，《多媒體互動新聞寫作》，台北：五南。


一、使用google的相簿系統並嵌入照片，請看影音教學：

上傳照片並直接設為「公開」。★建議使用★


更改上傳的照片為「公開」。第二方法。

  1. 照片上傳後，要記得設為「公開」，才能連出去。
  2. 在照片上按右鍵，請選「複製影像網址」，即可嵌入。
二、使用youtube影音系統並嵌入影音，請看教學影音：


  1.  上傳後到youtube編輯頁面，請案【分享】／【嵌入】，取得嵌入碼。
  2. 到KompoZer，請按【插入】／【HTML】，即可嵌入影音。
三、多媒體互動blogger寫作相關教學：

  1. 調 整KompoZer來使得編輯最佳化。
  2. 把KompoZer 做好的文章貼到blogger〔Youtube↗〕。

使用flickr：
如果你想使用flickr圖像系統。請看這裡。



更多和影像及影音相關的音教學網頁：
  1. 圖 像「去背」技法：基本技法之一，必學。
  2. 使 用Html語法把圖片嵌到網頁。
  3. 將 圖片放到寫作的網頁：使用KompoZer。
  4. 網 頁嵌入PDF、影音、聲音、Flash、youtube的Html語法運用。


張貼者： 於 沒有留言:

2014年7月5日 星期六

布落格寫作05：寫出漂亮的中標和內文















這是大標的示範範例
這是中標的示範範例！
這是小標的示範範例！


這是【基本黑體內文】設定呈現樣態。以下：
我們一直強調，數位文本是 區塊性的寫作文本，換言之，一段概念或想法要用塊狀的方式來做 呈現的處理。這樣才能讓讀者在文本中快速的跳躍閱讀。

【基本內文：走二欄】的設置。以下：
也因為在螢幕閱讀中，讀者是非常沒有耐心的，所以在文字的處理上要特別費心。一般而言，文字要被處理得適合「掃瞄式」閱讀。也就是說，字不要太多，字要大 一點，行距 高一點，然後用黑體字。

最後，這是沒有做任何設計的一般性內文。換句話說，如果你沒有用div再加上class的功能，那麼直接寫下文字時，最後呈現出來的就會是這種樣子。一般而言，最多四行就要分段才好。
＊＊這是分開段落的空白行＊＊。
段與段之間要留一個空白行。如上所示。 ↑ mouseover



一、請寫入中標和內文，再分別做成Div，請看影音教學：


  1. blog寫作設置的代碼
    style=" margin: auto; width: 588px; font-size: 15.4px; line-height: 1.4; "
  2. 做出大、中標及內文的div，請分別再設置class代碼。請參考上面教學影音。
二、請複製下列中標及內文css 語法並於貼入<body>之後：

<style>

/* 大標 */
.bigtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 2.2em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
margin-bottom: 1.5em;
text-align: center;
border-bottom: 3px solid darkorange;
}

/* 大標:hover */
.bigtitle01:hover {
border-bottom: 3px solid #0080FF;
}

/* 中標 */
.midtitle01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.25em;
font-weight: bold;
line-height: 2.4;
text-align: center;
letter-spacing: 0.03em;
margin-top: 1em;
margin-bottom: 1.2em;
border-bottom: 1px solid red;
border-top: 1px solid red;
text-align: center;
}

/* 小標 */
.littletitle01 {
width: 75%;
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
margin-bottom: 0.2em;
border-bottom: 1px solid red;
}

/* 小標:hover */
.littletitle01:hover::after {
content:"   /";
}

/* 基本黑體內文 */
.ironcontent01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.5;
text-align: left;
letter-spacing: 0.1em;
}

/* 基本內文：走二欄 */
.ironcontent02 {
line-height: 1.8;
letter-spacing: 0.1em;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule: 1px outset gray;
}

</style>
三、DIV文字寫作上的各種小問題：

【上手動作！】文字的複製、貼上以及嵌入div：


【上手動作！】快速刪除DIV：


【上手動作！】DIV內的DIV，插入文字：




更多和本文相關的 CSS 影音教學網頁：
  1. 讓 人「讀得進去」的文字安排
  2. CSS 的文字魔術
  3. DIV + CSS 隨心所欲搞定網路排版寫作(二): 放入背景圖
  4. CSS 文字布局快速套用法
  5. 3秒調出漂亮文字布局
  6. 文字安排的大、中、小




張貼者： 於 沒有留言:

2014年7月1日 星期二

布落格寫作04：互動的gallery, fancyBox







請同學／網友們一定要透過這一範例，親自學會寫作互動形式的文本。只有你自己有這種寫作的經驗，你才能真的有辦法去思考「如何寫互動形式的」文本。






走到某一條小溪，那可是滿眼的綠啊！ Click & See More !!  ▽



一、請編輯要被「按下去」跑出效果的圖片，影音教學：


  1. 圖片請一定要設定 id 的代碼，這樣「按下去」才會產生互動效果。
  2. 本例的 id 是 id="img0701"
二、請複製下列 jQuery 語法並於貼入<body>之後：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" type="text/css" href="http://newsweek.shu.edu.tw:8080/lmcsilver20121007/fancyapps-fancyBox-0ffc358/source/jquery.fancybox.css" media="screen">

<script>
$(function() {
$("#img0701").click(function() {
$.fancybox.open([
{
href : '第一張照片網址',
title : '1st 圖說'
},
   
{
href : '第二張照片網址',
title : '2nd 圖說'
},

{
href : '第三張照片網址',
title : '3rd 說'
}   
    ],
{
helpers : {
        overlay : {
            css : {
                'background' : 'rgba(173, 173, 173, 0.90)'
            }
        }
    },

afterLoad : function() {        
this.width  = '560';
this.height = '373';
},
autoSize: true,
padding: 5,
openEffect: 'elastic',
preload: true
});
});
});
</script>
三、語法調整的選項及注意事項：

  1. 請把步驟一的圖片所設的 id 代碼（img0701）寫入到程式中，如此才能相互配合發生互動作用，在紅色字體處。
  2. 請加入要跳出的照片網址和圖說，可以一直加到你高興為止。在紫色字體處。
  3. 你可以調整 overlay 的顏色以及透明度。金色字體處。請到色碼表轉換網站。
  4. 請調整所要跳出圖片的大小（長、寬）。水 藍字體處。
  5. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>這條程式碼，綠色字體處，一頁中只能出現一次。如已使用其他互動模式用了這 條，請不要複製進去。總之，一個互動網頁只能出現一次，請保留最前面出現的那條即可。
  6. 這個互動模組只能有一次的效果。如果要做第二個，請重覆步驟一、二，並記得一 要重新改變 id 的代碼。
  7. 設置 id 代碼時，請同時一定要有英文和數字，同時不要用中文字。


參考資料來源：fancyBox website.。


更多fancyBox的互動寫作教學：
按一下就跳出「全文閱讀」
學生超愛用的影音跳出法：fancyBox 快速使用法
按一下跑出補充說明的圖文框：fancybox 補充技能
按一下就可以跑出圖片、影音、image gallery、網頁、flash…


補充資料01：如何使用google blog 寫出互動式多媒體數位文本


張貼者： 於 沒有留言:

2014年6月28日 星期六

布落格寫作03：為單篇文章加上FB的「讚」









一、請進入下列程式碼網頁：

取得按讚程式碼的網頁： https://developers.facebook.com/docs/plugins/like-button?locale=zh_TW
二、請進入網誌後端進行編輯寫作：


一、文章要先上版完畢。
二、取得blog文章的那頁網址。
三、再依下面影音操作。
三、教學影音：


參考資料來源：取得按讚程式碼的網頁。


張貼者： 於 沒有留言:

2014年6月27日 星期五

布落格寫作02:調整KompoZer來使得編輯最佳化






一、請調整「KompoZer」的設定值：

  1. 請取得kompoZer，下載、安裝及基礎使用，請參考教學網頁。
  2. 任可布落格都有一些版面上的微調；而KompoZer的版面是原始預設計。當我們要用KompoZer來當作主要編輯器，就要做 某些調整，其頁面呈現才會最接近我們在第一單元時，對google Blogger的設置。
二、網頁設置，請看教學影音：


注意事項：
  1. 請在<body>處做如下設定 style="margin: auto; width: 588px; font-size: 15.4px; line-height: 1.4;" 。
  2. 請務必做如下設置：〔格式〕／〔頁面標題與屬性〕／〔選擇字元編碼方式〕／Unicode(UTF-8)。
  3. 一開始要多按幾下 Enter 鍵，以擴張可編輯區域。
三、請消除 googel blogger 對圖片的某些預設值：

  1. google blogger 會在圖片的border,  padding,  以及陰影上做一些設定。我們要消除這些，以接近KompoZer的編輯畫面。請看上面教學影音。
  2. 請將下列 CSS 語法貼到：〔範本〕／〔自定〕／〔進階〕／〔新增 CSS 〕的編輯區域。
.post-body img {
border: 0px solid red;
margin: 0px;
padding: 0px;
background-color: transparent;
box-shadow: none;
}


張貼者： 於 沒有留言:

2014年6月24日 星期二

世新新聞布落格星叢計畫01：開設一個網誌





一、請到「新增網誌」的頁面：

  1. 請取得google帳號及密碼，其實也就是Android手機的google帳號、密碼。
  2. 請在chrome網址列打入 www.google.com.tw ，進入google首頁。
  3. 請找到「更多」，按下後請選blogger。
  4. 如果需要驗證，請依指示，最後會看到「新增網誌」，請按下。
二、網頁設置，請看教學影音：


注意事項：
  1. 範本請選擇「簡單系列」。
  2. 版面配置請留意教學影音說明。
  3. 進階／網頁文字，字的大小請設為14px。
  4. 如依影音教學，最後的編輯區域寬度為 588px 。



The first important!



張貼者： 於 沒有留言:
訂閱： 文章 (Atom)