*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年9月24日 星期三

圖像剪裁固定大小、去背、拼貼、透明:StylePix


完全免費的圖像處理軟體
剪裁固定大小、去背、拼貼、透明
這幾個技能是圖像編輯中最常用的,
基本上你會了,就足以應付我上課作業的需求了。
記得放入usb中,就可以隨時帶來帶去,馬上可以用。


一、下載、剪裁固定大小圖像:

教學影音說明:
  1. 軟體下載頁面,http://hornil.com/tw/downloads/stylepix/   。
  2. view / option /Display Language: Chinese Traditional,可變成中文介面。
二、拼貼、去背、透明處理:

教學影音說明:
  1. 去背圖及半透明圖,請存成 png 檔。
  2. 去背流程:複制 / 套索 / 選取閉合 /  編輯 / 選取 / 反相 / delete / 底層圖層取消作用 / 取消選取 / 另存新檔 *.png 。



2014年9月21日 星期日

按A就會跑出/隱藏B的互動設置:jQuery



按A就會跑出/隱藏B的互動設置
jQuery 基礎互動寫作
比較細節的內容或資料,一般我們不會馬上就放在頁面上,而是藏起來。
等讀者有感覺了,想看了,再「按一下」 之後的跑出來。以免太多資料內容,把讀者嚇壞 了。



教學示範範例:
海軍官員說,立法院通過近8億元翻修【←click】老舊的海獅級潛艦預算 後,將開國內標,由台船擔任主合約商,再由台船、聯設中心與海軍潛修中心組成維修團 隊。因為台船沒有合適船塢,更換後段船殼工作,將 在海軍乾塢進行,若預算審查順利,預計明年第二季展開維修工程。

官員說,未來潛艦國造將選擇較簡單的構型,暫時擱置絕氣系 統(AIP)。「飛鏢計畫」為荷蘭造海龍級加裝潛射魚叉飛彈工程,首艘已近完成,可望在台灣海域進行試射。

林郁方說,整修海獅級未尋求美方協助,台船與海軍都認為有能力更換船殼,但因應艦殼拆開後,原來貼壁管線可能遭遇無法預期的問題,整修預算已從 4億5000萬元提升到8億元。可提供技術協助的國家,不是只有美 國,也有歐洲國家。



一、影音教學

二、置放 jQuery 主程式
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

說明:
  1. 請將主程式置放於<body>之後。

三、為要「開啟/隱藏」的編輯元素設 ID
  1. 操作程序:選定元素【本例 DIV】 > HTML > 屬性(按二下)>  HTML屬性 > 選擇【ID】 > 內含值
  2. 如一開始要設定隱藏,語法: stye="display: none;" 。

四、設置要互動的寫作元素及互動程式
javascript: $('#a004').slideToggle(800);

說明:
  1. 上列互動語法是要放在「要按下去」的「編輯元素」裡面的,此例是文字。
  2. slideToggle是指:如果開啟的,按下去就會「隱藏」;如果是隱藏的,按下去會「開啟」。程式會自動判斷。
  3. 紅色字體處,是步驟三所設定的ID代碼。800,即藍色字體處,是「速度」。一秒是1000。
  4. 設置的操作:span【本例文字】 > HTML > 屬性【按二下】>  JavaScript事件 > 屬性 >選擇【onclick】> 內含值【程式置入處】
  5. 移過去想跑出滑鼠 icon 的 CSS:style="cursor: pointer;" 。




2014年9月19日 星期五

慢工出細活:搞定DIV的調校





大開眼界 搞定DIV
各式各樣的文字調校 隨心所欲的文本樣貌
簡單的功能操作法 直覺式的調整變化 立即看見


我想要更進一步了解css div基本語法 click here↗


調整文字與邊界的距離:
CSS > 屬性 > 排版定位 > 補白




練 習作業:


安靜的船中,看著沈靜的橋


構思:

一、上方做一個DIV,裡面有圖像和文字。
二、下方放置大圖。
三、DIV做出padding-left: 25px;(補白/左邊),左邊留白。文字加背景色。
四、大圖用margin-top: -125px;(邊界/頂端),向上移動。
五.、調整DIV的position: relative; (位置/相對)以及z-index: 2;(z軸深度),使DIV向上拉高一層,才不會被蓋住。



練 習作業二:





練習作業三,可互動形態:


呈現樣態:(mouse hover ↓)

   廟宇,那眼神如神。






構思:

一、做DIV,設id(#pichover20171122),內置三張圖。
二、用CSS class來分別為圖片位移以及排定層次順序。
四、套入互動CSS,這是用「父子關係」來寫的。


CSS語法:

<style>
/*層次的位移、排序,放置於img */
.zindex001 {
position: relative;
z-index: 1;
}

.zindex002 {
margin-top: -300px;
margin-left: 240px;
position: relative;
z-index: 2;
}

.zindex003 {
margin-top: -75px;
margin-left: -5px;
position: relative;
z-index: 3;
}

/*互動功能語法,id放置於DIV*/
#pichover20171122 img{
padding: 0px;
transition: 0.3s linear;
}

#pichover20171122 img:hover {
position: relative;
z-index: 9;
transform: translate(3px, -3px);
}

</style>

注意:

CSS的各種用法中,控制權的大小分別為,style > id >選擇器 >class。小心,在這個範例中,互動功能使用到 hover ,而 hover 是以 父子關係選擇器 來驅動。因此,你不能用style="xxx"的方式來處置圖片,那樣的話,hover的效果就會失效(style> 選擇器)。而是要用 .class 來設置圖片。這樣hover互動才會有效。父子關係選擇器 > class 。



2014年9月17日 星期三

簡單、快速:3秒調出漂亮文字布局


簡單、快速:3秒調出漂亮文字布局

文字在螢幕上呈現的耐不耐看,是決定了網路文本要不要被閱讀下去的重要因素。一篇好的數位文本,肯定在文字的呈 現 上下足了功夫。 這不是「字型」的原因而已,因為更重要的是字的大小、行寬、粗細, 這三點值得你一再去調整、調校。


一、文字範本的CSS
<style type="text/css">
.title01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.38em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding-left: 2em;
letter-spacing: 0.1em;
background-image: url(https://lh5.googleusercontent.com/-DOigud2kQVs/U7OZ90USuEI/AAAAAAAATjc/PushP-fiJWM/w23-h28-no/blogstars20140702-1.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 23px;
border-bottom: 1px solid darkred;
}

.word01 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
}

.tableword01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
padding: 3px;
}

.column01 {
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px outset darkred;
}
</style>
二、快速套用文字布局影音 教學

  1. 請把範例之CSS複製到<body>之後。
  2. 再依影音教學操作。


【要看啦!】文字的複製、貼上以及嵌入div,的一些超有用的小技巧:



【要看啦!】黑體字怎麼跑不出來?





範例:
<div class="title01">
這是中標的內文
</div>
<div  class="word01">
這是一般的內文。這是一般的內文。這樣的可以表現出,文字表現上的大中小之格式。
</div>

呈現:

這是中標的內文
這是一般的內文。這是一般的內文。這樣的可以表現出,文字表現上的大中小之格式。

2014年9月16日 星期二

快速排版寫作:表格堆積木法



一個堆一個,由上而下,快速的版型寫作效果

快狀的視覺效果,是網路閱讀必然的要求。人們會在一個又一個塊狀的文本編輯區塊內,速讀式的掌握文意,覺得值得 讀下去時,才會有進一步的閱讀動 作。塊狀寫作是一位網路寫手必要的寫作概念和技巧。在初學的過程,「表格功能」很適合來讓創作者完成區塊寫作



按 這裡開始表格堆積木  click here!!







※  左表:設寬度33%。    右表:說寬度66%,表格靠右。



快速學會.影音教學

注意事項:
  1. 用多個「一列的表格」來堆出所要的寫作版型。
  2. 超過一格以上的表格,記得要設定格的寬度,這樣表格才不會亂掉。
  3. 最後記得把格線取消,這樣看起來就像排版的樣子。


★ 表格寫作的三個基本動作。一定要會! click!
★ 常見問題tips:啟動表格,但表格只是小小的不完整。click!


表格及文字的圖文整合寫作


鶯歌陶瓷博物館▼◢

看門的石獅
它的安靜,是來自時間的力量。精神,來自姿色!



線條是主角
那像是來自風的傑作。一種無法被目視的湧動,全部擠壓至一種條狀的吶 喊!


範例使用之CSS:

<style>

/*表格內小標 */
.littletitle010413 {

font-family: Verdana, '微軟正黑體';
font-size: 1.31em;
font-weight: bold;
line-height: 1.6;
text-align: left;
letter-spacing: 0.08em;
margin-bottom: 0.6em;
background-color: rgba(192, 192, 192, 0.2);
}


/* 表格內基本細明體 */
.ironcontentmi010413 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.1em;
}
</style>


範例影音教學:



表格基本寫作技能:
  1. 表格基本寫作動作(一)。 按此前往〉
  2. 表格基本寫作動作(二)。 按此前往〉
  3. 表格基本寫作動作(三)。 按 此前往〉


更多表格排版寫作範例:
  1. 表格基本功:好看的圖和圖說配置。 按此前往〉
  2. 表格的應用:網頁排版之靈魂。 按此前往〉
  3. 表格使用基本功:為照片加上透明文字腰帶。 按 此前往〉
  4. 表格使用基本功:把影音貼到照片上面。 按此前往〉
  5. 從日本雜誌學表格版型。 按此前往〉
  6. 不同分割比例的表格寫作。 按此前往〉
  7. 表格內插入表格的塊狀版型寫作實作。 按此前往〉
  8. table + div + click互動的整合性排版寫作。 按此前往〉