2014年9月24日 星期三

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


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


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

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

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



1 則留言:

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrT3qtNTiWdwR03SZJD3m0xCb_eJ0aNz1Ih5LqT6g1RzXE3Dv4J15KEJUfoQ2GdFawp-OmnDlCDEYrv8YZK_y1suOtPUqW8MX_ncJXo0CI4YcSuRMN2qQtmycTghCeDFsq73zbyA4-N0/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互動的整合性排版寫作。 按此前往〉



沒有留言: