1月
17

[列表] 常見跨瀏覽器相容問題整理

網頁設計, 網頁設計與語法（HTML/CSS）, 跨瀏覽器相容性網頁設計, 跨瀏覽器相容性網頁設計
0 comments

標籤


表格標籤(table)



清單標籤(ul ol li)


[color=#996600]問題整理[/color]

IE瀏覽器瀏覽器下列表式型無效的問題


問題說明：
用到了li標籤，發現在IE瀏覽器下li前面默認的實心圓點不顯示，也就是說list-style-type:disc無效，但是在firefox下確實正常的。
原因可能是因為某些浮動設置造成了li不正常顯示

解決方法：
解決的方法也很簡單，就是使用增加一個屬性：
list-style-position: inside
這樣列表樣​​式類型屬性就生效了。

資料來源：
http://www.weste.net/2010/10-8/72876.html

段落標籤 p



段落標籤(p)預設前後邊距問題
相異瀏覽器：IE6、IE7

問題描述：
一般瀏覽器對段落標籤預設有以「一個字體大小(font-size) = 1em」為高度的前邊距 (margin-before)與後邊距 (margin-after)，使得段落間在排版上有一定的區隔。但在IE6與IE7中則沒有此前後的預設邊距。（註：margin-brefore/-after 效果與 margiin-top/-bottom 相似。）

解決方法：
1) 使用 CSS Reset：無論使用時希望或不希望有預設的前後邊距，都可以在共用的 CSS 檔案中設定屬性值。例如：
p {margin: 0;} 或 p {margin: 1em 0;}

參考文章：
http://mepopedia.com/forum/read.php?844,15896,15956#msg-15956

屬性


以下以 CSS2 官方文件之「屬性 properties」作為分類依據。（括號內為官方文件之章節）
參考資料 (Eric Meyer)：http://meyerweb.com/eric/css/references/css2ref.html

浮動屬性(Float)


在IE中，用了%設定寬度之float多欄式版面會無法正常顯示
相異瀏覽器：FF、IE6、IE7、OP

問題描述：
使用float多欄式版面時，若以%為單位來設定所有欄的寬度，則在IE中有能因為瀏覽器視窗寬度不同，造成顯示混亂。
HTML中最後配置的欄位有可能因為視窗的寬度無法顯示到指定位置，於是就跑到其他欄位的下方。
要解決這個問題，一般會將各欄位的寬度設定為合計值比100%少一些，但除此之外也有其他的解決方法。

圖說：
將兩個寬度設為50%的DIV元素以float設為橫向並排，在IE中，根據視窗寬度不同，其中一欄可能會跑到其他欄的下方去。

解決方法：
1)使寬度合計起來比100%小一點。
依IE的版本的不同其臨界值也會不同，不過大致維持在96%以下，顯示起來就不會有問題，左右欄不設為50%，而設為48%的話，就不會發生其中一欄顯示到下方的情況。
但是顯示時在水平方向就會出現4%以上的留白，視版面設計不同，留白若全部在左邊或右邊，看起來會比較顯眼，因此多數網站在雙欄版面中，會將左右方開，一邊設定為float:left，另一邊則設為float:right，把留白放在中間。

2)在父元素中設定1px的padding。
前述的方法，可能造成版面看起來不自然，這時可採用另一種方法，就是將寬度合計為100%，僅加入padding來做處理。
在欄位全體之父元素box中，於和最後設定float之欄位鄰接的那一側，設定1px以上的padding，便可以解決問題。假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:lef的話，則只要在body元素中設定：padding-right:1px;，版面就能正常顯示了。

例如：
HTML程式碼：

<body>
<div id="main>
....
</div>
<div id="sub">
....
</div>
</body>

CSS程式碼
body{
padding-right:1px;
}

#main{
float:left;
width:50%
}

#sub{
float:left;
width:50%
}


3)在最後的欄位中設定-1px的margin。
假設在body元素中依序配置了#main以及#sub等兩個div元素，而兩欄均設定為float:right的話，則只要在#sub元素中設定：margin-left:-1px;，版面就能正常顯示了。
反過來，若設定margin-right:-1px;則依瀏覽器的種類及版本不同，有可能出現水平方向的捲軸，此時，可在margin被設定為-1px的元素的父元素中設定 overflow:hidden; ，就可以讓水平方向捲軸不顯示出來。
例如：

HTML程式碼：
<body>
<div id="main>
....
</div>
<div id="sub">
....
</div>
</body>

CSS程式碼
#main{
float:right;
width:50%
}

#sub{
margin-left:-1px;
float:right;
width:50%
}

參考文章：
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.193-196

背景屬性（background）


background (14.2.1)

background-attachment (14.2.1)

background-color (14.2.1)

background-image (14.2.1)

background-position (14.2.1)

background-repeat (14.2.1)

邊框屬性（border）


border (8.5.4)

border-bottom (8.5.4)

border-bottom-color (8.5.2)

border-bottom-style (8.5.3)

border-bottom-width (8.5.1)

border-collapse (17.6)

border-color (8.5.2)

border-left (8.5.4)

border-left-color (8.5.2)

border-left-style (8.5.3)

border-left-width (8.5.1)

border-right (8.5.4)

border-right-color (8.5.2)

border-right-style (8.5.3)

border-right-width (8.5.1)

border-spacing (17.6)

border-style (8.5.3)

border-top (8.5.4)

border-top-color (8.5.2)

border-top-style (8.5.3)

border-top-width (8.5.1)

border-width (8.5.1)



caption-side (17.4.1)

clear (9.5.2)

clip (11.1.2)

color (14.1)

content (12.2)

counter-increment (12.5)

counter-reset (12.5)

cursor (18.1)

direction (9.10)

display (9.2.5)

display (17.2)

empty-cells (17.6.1)

float (9.5.1)

[hr]

font (15.2.5)

font-family (15.2.2)

font-size (15.2.4)

[hr]

使用%來設定大小的文字，其顯示狀況會因瀏覽器而異
相異瀏覽器：FF、IE6、IE7、OP

問題描述：
一般瀏覽器的預設字體大小為16像素。
我們雖然可以將文字大小設定為1%~100%，但實際上的顯示大小卻不會以1%為單位進行變化。16像素的文字，以像素為單位在個人電腦的畫面上顯示時，也只能呈現1px~16px共 16個階段的大小，而且設定多少%時會以多少px顯示出來，會因瀏覽器而有所不同，所以我們必須特別注意時計顯示的大小。

目前在CSS中設定文字大小時，使用%為單位做設定的方式已為主流。然而根據設定%值不同，在各瀏覽器中所顯示的大小會有差異，依情況不同，有時可能會造成難以閱讀的狀況。

解決方法：
1)在IE7,FireFox2與Opera9中設定大小為70~75%之文字顯示結果，以文字72%為例，在IE7與Opera9中是以一班較小的文字顯示，但在FireFox2則是使用更小一級的尺寸來顯示，這是相當難以閱讀的尺寸，這種音瀏覽器而造成的文字大小差異，雖然可以在瀏覽器做測試再做最後做修正，但若能先知道離覽器育社大小及對應的%設定值的顯示結果，就可避免設定出產生問題的%值。

參考文章：
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.173-174

[hr]

font-size-adjust (15.2.4)

font-stretch (15.2.3)

font-style (15.2.3)

font-variant (15.2.3)

font-weight (15.2.3)

height (10.5)

letter-spacing (16.4)

行高（line-height）


line-height (10.8-)

表單風格（list-style）


list-style (12.6.2)

[hr]
list-style-image (12.6.2)

將清單項目的開頭符號設為圖像時，其垂直位置會偏離
相異瀏覽器：FF、IE6、IE7、OP

問題描述：
使用list-style-image 屬性，可以設定圖像作為清單項目符號，但在大部份的瀏覽器，不僅會造成文字的垂直位置大幅偏離，更糟的是沒辦法調整該位置，因此目前鮮少使用list-style-image屬性，而是採用li元素的背景圖像來代替。

解決方法：
1)不使用list-style-image屬性，而是將清單的符號設為不顯示，並改用背景圖像來顯示符號的程式碼，利用background-position屬性來調整細部的顯示位置更方便，基本上，只要利用list-style等屬性將清單原本的符號消除，並保留li元素左側用來顯示圖像的padding區域，然後在該處顯示背景圖像即可。例如：

HTML程式碼：
<ul>
<li> 清單項目1</li>
<li> 清單項目2</li>
<li> 清單項目3</li>
<li> 清單項目4</li>
</ul>

CSS程式碼
ul{list-style:none;margin:0;padding:0;line-hiegh:1.5;}
li{margin:0;padding:0 0 0 15px;background:url(marker.gif) 0 0.35em no-repead;}

參考文章：
XHTML+CSS虎之卷，旗標出版社，大藤幹著，p.180-181

[hr]


list-style-position (12.6.2)

list-style-type (12.6.2)

邊距（margin）


margin (8.3)

[hr]

雙倍邊距(Double Margin)問題

一般使用margin：間距，會有比較多問題，因此能夠不用就盡量不用，而使用padding：內距， margin的兼容性沒有pading好，但有時候卻又不得不使用。
例如：在IE6中，若使用了float:left之後導致margin-left雙倍邊距

<div id="sidebar">這裡是sidebar</div><br /> <div id="mainpage">這裡是mainpage</div><br />

CSS的設定

<br /> #sidebar{<br /> float: left;<br /> border: 3px solid #09C;<br /> width: 200px;<br /> margin-left: 20px;<br /> }<br /> <br /> #mainpage{<br /> border: 3px solid #F09;<br /> width: 200px;<br /> float: left;<br /> margin-left: 20px;<br /> }<br />

在Chrome、Firefox、Opera等瀏覽器下時會正常的顯示，但是如果到了IE6下就會出現雙倍邊距。

[hr]

[color=#993300]測試網址：http://mepopedia.com/~jinjin/float/margin2.html[/color]

在IE7以上版本，以及FireFox、GoogleChrome為正常顯示，觀察的效果如下：

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm002.jpg[/IMG]


在IE6出現雙倍邊距的問題

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm003.jpg[/IMG]


解決方法：
只要加入display: inline;即可

<br /> #sidebar{<br /> float: left;<br /> border: 3px solid #09C;<br /> width: 200px;<br /> margin-left: 20px;<br /> display: inline;<br /> }<br /> <br /> #mainpage{<br /> border: 3px solid #F09;<br /> width: 200px;<br /> float: left;<br /> margin-left: 20px;<br /> }<br />

原理：
這是因為區塊默認的display屬性值是block，當設置了浮動的同時，還設置了區塊外邊距就會出現這種情況。

另外第二個區塊和與旁邊區塊之間就不存在雙倍邊距的BUG。

[hr]

[color=#993300]解決雙倍邊距測試網址：http://mepopedia.com/~jinjin/float/margin2-inline.html[/color]

在IE6以及IE7以上版本、FireFox、GoogleChrome皆為正常顯示，觀察的效果如下：

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm005.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/dm004.jpg[/IMG]

[hr]
雙倍邊距(Double Margin)問題整理
何種瀏覽器會有問題
[color=#CC0066]IE6[/color]

何種情況會有問題
[color=#CC0066]在IE6中，靠近網頁邊界的部分，若使用了float:left，也設定margin-left，(若使用了float:right，也設定margin-right)就會產生雙倍邊距[/color]

解決方式
[color=#CC0066]加入display: inline[/color]

[hr]

margin-bottom (8.3)
margin-left (8.3)
margin-right (8.3)
margin-top (8.3)

marker-offset (12.6.1)

max-height (10.7)

max-width (10.4)

min-height (10.7)

min-width (10.4)

outline (18.4)

outline-color (18.4)
outline-style (18.4)
outline-width (18.4)

overflow (11.1.1)

內距（padding）


padding (8.4)

padding-bottom (8.4)
padding-left (8.4)
padding-right (8.4)
padding-top (8.4)

定位屬性（position）


position (9.3.1)

top (9.3.2)
right (9.3.2)
bottom (9.3.2)
left (9.3.2)

quotes (12.4.1)

table-layout (17.5.2)

text-align (16.2)
text-decoration (16.3.1)
text-indent (16.1)
text-shadow (16.3.2)
text-transform (16.5)

unicode-bidi (9.10)

垂直置齊（vertical-align）


vertical-align (10.8-)

visibility (11.2)

white-space (16.6)

width (10.2)

word-spacing (16.4)

z-index (9.9.1)
1月
15

[公告] 期末分數危險名單

100-1《中國》竹視傳一A-電腦輔助設計與繪圖(一), 100-1《中國》竹視傳一B-資訊概論, 100-1《中國》竹視傳一B-電腦輔助設計與繪圖(一)
0 comments

視傳一A 電腦輔助設計與繪圖(一)



作業區：http://mepopedia.com/forum/856

[color=#CC0066]過多作業未繳交，成績危險名單：[/color]

1.1005445023 李維剛
2.1005445055 江子杰
3.1005445058 朱彥銘


[hr]

視傳一B 資訊概論



作業區：http://mepopedia.com/forum/864

[color=#CC0066]過多作業未繳交，成績危險名單：[/color]

1.1005445076 黃翎茹
2.1005445082 吳可婕
3.1005445086 高稷瑄
4.1005445094 沈憶臻
5.1005445120 張家瑜
6.9821445142 李筱雯

[hr]

視傳一B 電腦輔助設計與繪圖(一)



作業區：http://mepopedia.com/forum/861

[color=#CC0066]過多作業未繳交，成績危險名單：[/color]

1.1005445076 黃翎茹
2.1005445082 吳可婕
3.1005445090 方姿云
4.1005445109 謝岡煒



[hr]

以上名單若登記錯誤有問題者，請於1/15(日)15:00前回文或聯絡修正

若要補交者也請於1/15(日)15:00前補交

並請盡速連絡我 jinjin@cute.edu.tw

請看到的同學通知名單上的同學，謝謝大家，並祝大家ALLPASS，假期愉快!
1月
14

[公告] 期末分數危險名單

100-1《中國》竹視傳一C-資訊概論, 100-1《中國》竹視傳一C-電腦輔助設計與繪圖(一)
2 comments

視傳一C 資訊概論



作業區：http://mepopedia.com/forum/865

[color=#CC0066]過多作業未繳交，成績危險名單：[/color]

1.1005445121 劉庭菡
2.1005445124 羅幼如
3.1005445135 侯孟辰
4.1005445150 張育綺
5.1005445156 林致宜
6.1005445167 林沂青
7.1005445169 林　安
8.1005445175 武功勛

[hr]

視傳一C 電腦輔助設計與繪圖(一)



作業區：http://mepopedia.com/forum/862

[color=#CC0066]過多作業未繳交，成績危險名單：[/color]

1.1005445121 劉庭菡
2.1005445135 侯孟辰
3.1005445167 林沂青
4.1005445169 林　安
5.1005445174 蔡筱翎


[hr]

以上名單若登記錯誤有問題者，請於1/15(日)中午12:00前回文或聯絡修正

若要補交者也請於1/15(日)中午12:00前補交

並請盡速連絡我 jinjin@cute.edu.tw

請看到的同學通知名單上的同學，謝謝大家，並祝大家ALLPASS，假期愉快!
1月
08

[公告] 期末作業未繳交名單

100-1《中國》北視傳一A-網頁設計, 100-1《中國》北視傳一B-網頁設計
1 comments

視傳一A-網頁設計網頁設計期末作業未繳交名單：



北四技視傳系1A 1001445029 姚宇平
北四技視傳系1A 1001445134 魏子翔


平時作業繳交太少，期末成績不及格名單：



北四技視傳系1A 1001445116吳思先


[hr]

視傳一B-網頁設計網頁設計期末作業未繳交名單：



北四技視傳系1B 1001445014 高宇
北四技視傳系1B 1001445038 郭芝瑄
北四技視傳系1B 1001445045 洪萱容
北四技視傳系1B 1001445059 張詠涵
北四技視傳系1B 1001445101 楊旻學
北四技視傳系1B 1001445113 侯曉儒
北四技視傳系1B 1001445127 江欣馥
北四技視傳系4A 9711425066 陳冠樺
北四技視傳系4A 9711445035 曹昌文
北四技視傳系4B 9711445085 施婷方


平時作業繳交太少，期末成績不及格名單：



北四技視傳系1B 1001445071 洪融姍


[hr]

以上名單若有已交作業，但登記錯誤，或要補交者
請於1/11(三)前回覆本篇文章
或與我聯絡FB或jinjin@cute.edu.tw

並請看到的同學通知，謝謝大家，並祝大家ALLPASS，假期愉快!
1月
06

[翻譯] 設計理念

100-1《中國》竹視傳一A-電腦輔助設計與繪圖(一), 100-1《中國》竹視傳一B-電腦輔助設計與繪圖(一), 100-1《中國》竹視傳一C-電腦輔助設計與繪圖(一)
6 comments
若翻譯不確定
請將設計理念中文及英文回覆至此篇文章
1月
05

[IF] 1/6(五)報名需準備

100-1《中國》竹視傳一A-電腦輔助設計與繪圖(一), 100-1《中國》竹視傳一B-電腦輔助設計與繪圖(一), 100-1《中國》竹視傳一C-電腦輔助設計與繪圖(一)
1 comments
1/6(五)早上九點，日新206教室
若要報名ＩＦ但不熟悉上傳步驟的同學

先試著自行至網站報名：http://www.ifdesign.de/talents_concept_design_award_e

報名說明：http://mepopedia.com/forum/read.php?868,17528

可準備好
1.學生證掃描或翻拍電子檔
2.作品英文名稱
3.作品英文理念
4.以以下規格編輯海報表板

存為pdf

5.海報jpg檔/5 MB以下/ RGＢ作品解析度 300dpi
6.以下英文

ID Number
201-xxxxxxxxxxxxxx
Graphic Design

Project
Name of project (作品英文名）

Designer
Given name / Surname （設計師名字）

.....
University
China University of Technology
Hsinchu /　Taiwan
Visual Communication Design

Email
Personal email (自己的電子信箱）

希望大家都能享受第一次參加國際獎項的經驗囉
1月
05

[公告] 期末作業繳交

100-1《中國》竹視傳一A-電腦輔助設計與繪圖(一), 100-1《中國》竹視傳一B-電腦輔助設計與繪圖(一)
12 comments
因學校電腦當機，導致課堂上傳的作業沒存到

請同學至[color=#CC0066]學校ＩＣＡＮ系統作業區上傳[/color]
原本在課堂上繳交的這學期以[color=#CC0066]「班級學號姓名」命名的所有作業的壓縮資料夾[/color]
請在[color=#CC0066]1/11週三前上傳繳交完畢[/color]，謝謝各位的配合
造成大家的不便請多多包涵囉。

[color=#993300]若檔案太大或上傳ICAN有問題
請將資料夾壓縮
上傳到http://www.megaupload.com/
再把網址寄給我jinjin@cute.edu.tw[/color]

謝謝大家囉

[hr]

[color=#666600]希望這學期的課程能對大家有些幫助，有些進步
在未來的設計課題裡，要對自己設計的作品有更完整的想法
為什麼要設計這件作品？想要表達甚麼樣的想法？希望能傳達給人甚麼樣的感受？
是不是把每次的設計都當作自己可能的代表作品看待
耐心、用心花巧思的去處理每個細節

都是身為準設計師應該慢慢培養的[/color]

[hr]

另[color=#993300]期末作業若要參賽的同學可等1/10之後在上傳作品圖檔[/color]

若有疑問或困難的同學，可於此回覆或聯絡我。

若有不及格的同學，下禮拜將會在論壇公告，並請同學注意相關消息
1月
01

[Topics] 討論項目

設計實務, 設計實務
0 comments

題目制訂


有興趣的主題


心靈感受的表達以及任何有興趣的主題


想得獎的主題


生態環境的問題：暖化，環保、保育等，關懷與解決之道


社會問題，家暴霸凌毒品愛滋智慧財產等，關懷與解決之道


在地與人文關懷，從文化根基出發，尋找在地特色與以新的設計觀點重新展現


想學習的領域


設計實務，尋找產學合作的機會，以實際案例完成


研發商品，實際製作發行


有興趣但未深入的主題：3D、動畫多媒體影片製作等，藉此完成完整的作品



資料蒐集


請將歷屆專題、新一代、設計參考資源，與制訂主題相關的作品做歸納整理

作品主題│年份│出處


學校科系│公司


作者


設計項目


設計理念│作品獨特性


作品圖片整理(翻拍掃描)│個別說明


作品評論：優點(可學習的部分)│缺點(可修改、加強、改善與切入的部分)



創意季


http://tccp.hach.gov.tw/aplus/
12月
23

[作品] 客委會數位臺灣客家庄第二屆客家創意GO設計大賽

設計實務, 設計實務
0 comments

作品欣賞



1.衣衫著物組：http://archives.hakka.gov.tw/eventA/acticleEventAction.do?method=doSimpleSearch&bonusType=NTg=
2.生活用品組：http://archives.hakka.gov.tw/eventA/acticleEventAction.do?method=doSimpleSearch&bonusType=NTc=
12月
14

[期末作業] 期末海報說明與發表區

100-1《中國》竹視傳一C-電腦輔助設計與繪圖(一)
35 comments

期末作業規範與範例講義


請至學生系統下載

期末作業說明


期末海報作業繳交規範—參加競賽


[color=#CC0099]建議參加的比賽─
IF概念獎
日本富山國際海報三年展http://www.idc-moe.org/index.html[/color]

[hr]

iF概念獎報名步驟及相關資料參考網址：


http://mepopedia.com/forum/read.php?868,17528

[hr]

可發想的範圍


1.社會議題(家暴、霸凌、性侵、詐騙)、環保、地球暖化、生態保育、智慧財產、愛滋、毒品...等。
2.自我探索、人性關懷、弱勢族群(自閉、獨居老人..)
3.在地的人文關懷、探尋文化根基、城鄉概念設計

至少設計三張系列海報。


蒐集任何有關的資料，設計風格及手法不拘。


三張作品統一風格，需寫下：


1.表現風格： 2.設計理念： 3.表現方法：。

可以以Photoshop、Illustrator以及兩種混合製做


製做尺寸：1.A1(594*840mm) 2.作品解析度 300dpi


凡有參加競賽者， 

[hr]

期末海報作業繳交規範—不參加競賽


若真的因還無法達到參賽水準或時間不及，請自選主題或以以下主題設計：

[color=#CC0099]1.自我風格海報設計，2.城鄉海報設計，3.關懷系列[/color]

至少設計三張系列海報。

蒐集任何有關的資料，設計能表達自我風格的海報，風格及手法不拘(但需各包含插圖製作與影相合成兩類)。

三張作品可統一風格，也可以不同風格表現，但需以表達自己個性與風格為主，需寫下：
1.表現風格 2.設計理念 3.表現方法。

分別以Photoshop、Illustrator以及兩種混合製做
製做尺寸：請至少設定 A4 (21X29.7cm)最佳dpi為300

[hr]

製作步驟


1.蒐集與相關的資料，文字及圖片
2.確定設計風格(風格蒐集、海報設計蒐集)
3.確定設計的風格與方向，繪製草圖
4.繪製插圖(須有插圖的部分)
5.相片部分的確定(相片蒐集與處理)
6.文字的確定
7.影像合成，圖像編排與文字編排


繳交方式


12/22前回覆文章
1參加比賽/不參加比賽
2主題：
3.參考資料蒐集(列出參考網址、書籍、範例設計海報或參考圖片)

12/29前回覆文章
1.成品圖檔
2.設計理念：
3.製作時間：
4.心得感想：

1/5
1.成品最後修正
2.列印檔
3.成績確認

[hr]

注意事項


1.需寫上設計理念
2.插圖的部分必須自製
3.不可以使用網路上或現成的插圖
4.可使用現成照片合成處理，但不可使用已處理好的圖片
5.不可使用以前設計的作品，直接當做期末作品

[hr]

作品集


1.期末須繳交電腦繪圖作品集，作品及風格不拘，可與期中作業做結合，也可以CD方式呈現。
2.以Illustrator or PowerPoint or InDesign編排，包含這學期所有的作業
3.含設計作品與設計說明，以及製作過程、草圖，蒐集的資料等等。
4.期末不用整本輸出，但要繳交這學期所有作業電子檔
5.需輸出： 期末作業三張海報
[color=#CC0066]作品集參考講義：http://mepopedia.com/forum/read.php?299,18509[/color]

[hr]

製作進度


12/15期末作業說明，送印說明
12/22期末作業討論
12/29完成作品集以及所有作品的製作，於課堂繳交，作業檢討，
01/05分數公布修正，本學期作業原檔與JPG檔繳交與作品檢討，會考

作品繳交方式


1.以光碟燒錄方式繳交本學期所有作品的電子檔包含：原始檔案與JPG圖檔，可與多位同學一起燒錄
2.以[color=#CC0099]班級，學號，姓名[/color]為命名的資料夾，存放方別以作業名稱命名的資料夾，如[作業01] 數位相片基礎編修-影像調整與色偏處理→放置PSD原檔、成品、原始照片等。將本學期所有作業整哩，並包含作品集檔案。
3.若真的燒錄有困難，請於課堂繳交，但不接受遲交，並請於資料夾名稱命名正確，資料夾分門別類命名完整
4.請至少列印期末作業三張。
12月
14

[期末作業] 期末海報說明與發表區

100-1《中國》竹視傳一B-電腦輔助設計與繪圖(一)
55 comments

期末作業規範與範例講義


請至學生系統下載

期末作業說明


期末海報作業繳交規範—參加競賽


[color=#CC0099]建議參加的比賽─
IF概念獎
日本富山國際海報三年展http://www.idc-moe.org/index.html[/color]

[hr]

iF概念獎報名步驟及相關資料參考網址：


http://mepopedia.com/forum/read.php?868,17528

[hr]

可發想的範圍


1.社會議題(家暴、霸凌、性侵、詐騙)、環保、地球暖化、生態保育、智慧財產、愛滋、毒品...等。
2.自我探索、人性關懷、弱勢族群(自閉、獨居老人..)
3.在地的人文關懷、探尋文化根基、城鄉概念設計

至少設計三張系列海報。


蒐集任何有關的資料，設計風格及手法不拘。


三張作品統一風格，需寫下：


1.表現風格： 2.設計理念： 3.表現方法：。

可以以Photoshop、Illustrator以及兩種混合製做


製做尺寸：1.A1(594*840mm) 2.作品解析度 300dpi


凡有參加競賽者， 

[hr]

期末海報作業繳交規範—不參加競賽


若真的因還無法達到參賽水準或時間不及，請自選主題或以以下主題設計：

[color=#CC0099]1.自我風格海報設計，2.城鄉海報設計，3.關懷系列[/color]

至少設計三張系列海報。

蒐集任何有關的資料，設計能表達自我風格的海報，風格及手法不拘(但需各包含插圖製作與影相合成兩類)。

三張作品可統一風格，也可以不同風格表現，但需以表達自己個性與風格為主，需寫下：
1.表現風格 2.設計理念 3.表現方法。

分別以Photoshop、Illustrator以及兩種混合製做
製做尺寸：請至少設定 A4 (21X29.7cm)最佳dpi為300

[hr]

製作步驟


1.蒐集與相關的資料，文字及圖片
2.確定設計風格(風格蒐集、海報設計蒐集)
3.確定設計的風格與方向，繪製草圖
4.繪製插圖(須有插圖的部分)
5.相片部分的確定(相片蒐集與處理)
6.文字的確定
7.影像合成，圖像編排與文字編排


繳交方式


12/22前回覆文章
1參加比賽/不參加比賽
2主題：
3.參考資料蒐集(列出參考網址、書籍、範例設計海報或參考圖片)

12/29前回覆文章
1.成品圖檔
2.設計理念：
3.製作時間：
4.心得感想：

1/5
1.成品最後修正
2.列印檔
3.成績確認

[hr]

注意事項


1.需寫上設計理念
2.插圖的部分必須自製
3.不可以使用網路上或現成的插圖
4.可使用現成照片合成處理，但不可使用已處理好的圖片
5.不可使用以前設計的作品，直接當做期末作品

[hr]

作品集


1.期末須繳交電腦繪圖作品集，作品及風格不拘，可與期中作業做結合，也可以CD方式呈現。
2.以Illustrator or PowerPoint or InDesign編排，包含這學期所有的作業
3.含設計作品與設計說明，以及製作過程、草圖，蒐集的資料等等。
4.期末不用整本輸出，但要繳交這學期所有作業電子檔
5.需輸出： 期末作業三張海報
[color=#CC0066]作品集參考講義：http://mepopedia.com/forum/read.php?299,18509[/color]

[hr]

製作進度


12/15期末作業說明，送印說明
12/22期末作業討論
12/29完成作品集以及所有作品的製作，於課堂繳交，作業檢討，
01/05分數公布修正，本學期作業原檔與JPG檔繳交與作品檢討，會考

作品繳交方式


1.以光碟燒錄方式繳交本學期所有作品的電子檔包含：原始檔案與JPG圖檔，可與多位同學一起燒錄
2.以[color=#CC0099]班級，學號，姓名[/color]為命名的資料夾，存放方別以作業名稱命名的資料夾，如[作業01] 數位相片基礎編修-影像調整與色偏處理→放置PSD原檔、成品、原始照片等。將本學期所有作業整哩，並包含作品集檔案。
3.若真的燒錄有困難，請於課堂繳交，但不接受遲交，並請於資料夾名稱命名正確，資料夾分門別類命名完整
4.請至少列印期末作業三張。
12月
14

[期末作業] 期末海報說明與發表區

100-1《中國》竹視傳一A-電腦輔助設計與繪圖(一)
34 comments

期末作業規範與範例講義


請至學生系統下載

期末作業說明


期末海報作業繳交規範—參加競賽


[color=#CC0099]建議參加的比賽─
IF概念獎
日本富山國際海報三年展http://www.idc-moe.org/index.html[/color]

[hr]

iF概念獎報名步驟及相關資料參考網址：


http://mepopedia.com/forum/read.php?868,17528

[hr]

可發想的範圍


1.社會議題(家暴、霸凌、性侵、詐騙)、環保、地球暖化、生態保育、智慧財產、愛滋、毒品...等。
2.自我探索、人性關懷、弱勢族群(自閉、獨居老人..)
3.在地的人文關懷、探尋文化根基、城鄉概念設計

至少設計三張系列海報。


蒐集任何有關的資料，設計風格及手法不拘。


三張作品統一風格，需寫下：


1.表現風格： 2.設計理念： 3.表現方法：。

可以以Photoshop、Illustrator以及兩種混合製做


製做尺寸：1.A1(594*840mm) 2.作品解析度 300dpi


凡有參加競賽者， 

[hr]

期末海報作業繳交規範—不參加競賽


若真的因還無法達到參賽水準或時間不及，請自選主題或以以下主題設計：

[color=#CC0099]1.自我風格海報設計，2.城鄉海報設計，3.關懷系列[/color]

至少設計三張系列海報。

蒐集任何有關的資料，設計能表達自我風格的海報，風格及手法不拘(但需各包含插圖製作與影相合成兩類)。

三張作品可統一風格，也可以不同風格表現，但需以表達自己個性與風格為主，需寫下：
1.表現風格 2.設計理念 3.表現方法。

分別以Photoshop、Illustrator以及兩種混合製做
製做尺寸：請至少設定 A4 (21X29.7cm)最佳dpi為300

[hr]

製作步驟


1.蒐集與相關的資料，文字及圖片
2.確定設計風格(風格蒐集、海報設計蒐集)
3.確定設計的風格與方向，繪製草圖
4.繪製插圖(須有插圖的部分)
5.相片部分的確定(相片蒐集與處理)
6.文字的確定
7.影像合成，圖像編排與文字編排


繳交方式


12/22前回覆文章
1參加比賽/不參加比賽
2主題：
3.參考資料蒐集(列出參考網址、書籍、範例設計海報或參考圖片)

12/29前回覆文章
1.成品圖檔
2.設計理念：
3.製作時間：
4.心得感想：

1/5
1.成品最後修正
2.列印檔
3.成績確認

[hr]

注意事項


1.需寫上設計理念
2.插圖的部分必須自製
3.不可以使用網路上或現成的插圖
4.可使用現成照片合成處理，但不可使用已處理好的圖片
5.不可使用以前設計的作品，直接當做期末作品

[hr]

作品集


1.期末須繳交電腦繪圖作品集，作品及風格不拘，可與期中作業做結合，也可以CD方式呈現。
2.以Illustrator or PowerPoint or InDesign編排，包含這學期所有的作業
3.含設計作品與設計說明，以及製作過程、草圖，蒐集的資料等等。
4.期末不用整本輸出，但要繳交這學期所有作業電子檔
5.需輸出： 期末作業三張海報
[color=#CC0066]作品集參考講義：http://mepopedia.com/forum/read.php?299,18509[/color]

[hr]

製作進度


12/15期末作業說明，送印說明
12/22期末作業討論
12/29完成作品集以及所有作品的製作，於課堂繳交，作業檢討，
01/05分數公布修正，本學期作業原檔與JPG檔繳交與作品檢討，會考

作品繳交方式


1.以光碟燒錄方式繳交本學期所有作品的電子檔包含：原始檔案與JPG圖檔，可與多位同學一起燒錄
2.以[color=#CC0099]班級，學號，姓名[/color]為命名的資料夾，存放方別以作業名稱命名的資料夾，如[作業01] 數位相片基礎編修-影像調整與色偏處理→放置PSD原檔、成品、原始照片等。將本學期所有作業整哩，並包含作品集檔案。
3.若真的燒錄有困難，請於課堂繳交，但不接受遲交，並請於資料夾名稱命名正確，資料夾分門別類命名完整
4.請至少列印期末作業三張。
12月
14

[講義10] 以Spry 效果及組件製作動態網頁<選單列>與<標籤面板>

100-1《中國》北視傳一A-網頁設計, 100-1《中國》北視傳一B-網頁設計, 網頁設計, 網頁設計與語法（HTML/CSS）
3 comments
本講義整理自

Adobe Dreamweaver CS5 & CS5.5使用手冊


http://help.adobe.com/zh_TW/dreamweaver/cs/using/index.html

[hr]

以視覺化方式建立 Spry 頁面


http://help.adobe.com/zh_TW/dreamweaver/cs/using/WS2442184F-3DF4-4240-96AF-CC6D792E2A62a.html

Spry 架構是一種 JavaScript 圖庫，可以讓網路設計人員有能力建立網頁，為網頁瀏覽者提供更繽紛多彩的使用經驗。 有了 Spry，您就能使用 HTML、CSS 和極少量的 JavaScript，將 XML 資料納入您的 HTML 文件，並建立如折疊式和選單列等 Widget，同時為各種頁面元素新增不同的效果。 Spry 架構經過特殊設計，對具有 HTML、CSS 和 JavaScript 基本概念的使用者來說，其標記相當簡單且容易使用。

Spry 架構主要是為了網路設計專業人員或高階的非專業網路設計人員而提供， 其主要用途並非做為企業層級網路開發的完整網路應用程式架構 (雖然它可以和其他企業層級的網頁搭配使用)。

[hr]

使用選單列 Widget


關於選單列 Widget


選單列 Widget 是一組導覽選單按鈕，會在網頁瀏覽者將游標停留在其中一個按鈕上時，顯示子選單。 選單列可讓您在有限的空間中顯示大量導覽資訊，也能使網頁瀏覽者不需瀏覽整個網站，就能快速掌握網站內容。

Dreamweaver 可以讓您插入兩種選單列 Widget：垂直和水平。
下列範例顯示水平的選單列 Widget 及展開第三個選單項目的情形：

[img]http://help.adobe.com/zh_TW/dreamweaver/cs/using/images/sp_pop_up1_popup.png[/img]

選單列 Widget (包含<ul>、<li> 和<a> 標籤)

A. 選單項目具有子選單。B. 子選單項目具有子選單

選單列 Widget 的 HTML 是由外部的 ul 標籤所組成，而此標籤包含代表每個最上層選單項目的 li 標籤。 最上層選單項目 (li 標籤) 依序包含 ul 和 li 標籤，可用來定義每個項目的子選單，而子選單同樣可以包含子選單。 最上層選單和子選單可以包含任意數量的子選單項目。

如需選單列Widget運作方式的詳細說明，包括選單列Widget程式碼的完整分析，請參閱http://www.adobe.com/go/learn_dw_sprymenubar_tw。

如需有關建立Spry選單列的教學課程，請參閱http://www.adobe.com/go/vid0168_tw。

[hr]

插入和編輯選單列 Widget


[hr]

自訂選單列 Widget


變更選單項目文字樣式


附加至<a>標籤的CSS 包含文字樣式的相關資訊。
另外還有幾種附加於<a>標籤、與不同的選單狀態相關的文字樣式類別值。

若要變更選單項目的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設值：



變更選單項目背景顏色


附加至<a> 標籤的 CSS 包含選單項目背景顏色的相關資訊。
另外還有幾種附加於<a> 標籤、與不同的選單狀態相關的背景顏色類別值。

若要變更選單項目的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設值：



變更選單項目尺寸


如果您要變更選單項目的尺寸，請變更選單項目的 li 和 ul 標籤的寬度屬性。

1.找出ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 規則。
2.將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度，並將屬性和值 white-space: nowrap; 新增至規則)。
3.找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。
4.將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度)。
5.找出 ul.MenuBarVertical ul li 或 ul.MenuBarHorizontal ul li 規則：
6.新增下列屬性至規則：float: none; 和 background-color: transparent;。
7.刪除 width: 8.2em; 屬性和值。

定位子選單


Spry 選單列子選單的位置是由子選單 ul 標籤上的邊界屬性所控制。

1.找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。
2.將 margin: -5% 0 0 95%; 預設值變更為您所要的值。


[hr]

關於標籤面板 Widget


標籤面板 Widget 是一組面板，可以將內容儲存在很小的空間中。 網頁瀏覽者可以按一下他們要存取的面板標籤，隱藏或顯示標籤面板所儲存的內容。 瀏覽者只要按下不同的標籤，就能開啟 Widget 的面板。 標籤面板 Widget 同時間只能開啟一個內容面板。 下列範例顯示標籤面板 Widget 及展開第三個面板的情形：
[img]http://help.adobe.com/zh_TW/dreamweaver/cs/using/images/sp_tabbed_panels_07.png[/img]

A. 索引標籤。B. 內容。C. 標籤面板Widget。D. 標籤面板

標籤面板 Widget 的 HTML 程式碼是由外部的 div 標籤所組成，而此標籤包含了所有面板、標籤清單、用來包含內容面板的 div，以及代表每個內容面板的 div。 標籤面板 Widget 的 HTML 也包含位於文件頁首和標籤面板 Widget 之 HTML 標記後面的 Script 標籤。

如需標籤面板Widget運作方式的詳細說明，包括Widget程式碼的完整分析，請參閱 http://www.adobe.com/go/learn_dw_sprytabbedpanels_tw。


[hr]

插入和編輯標籤面板 Widget


插入標籤面板 Widget


選取「插入＞Spry＞Spry 標籤面板」。
備註： 您也可以使用「插入」面板中的「Spry」類別來插入標籤面板 Widget。

新增面板至標籤面板 Widget


在「文件」視窗中選取標籤面板 Widget。
按一下「屬性」檢視窗 (「視窗 ＞ 屬性」) 中的面板加號按鈕。
(選擇性) 如果您要變更標籤名稱，請在「設計」檢視中選取標籤文字並加以變更。

從標籤面板 Widget 刪除面板


在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 的「面板」選單中，選取要刪除的面板名稱，並按一下減號按鈕。

開啟面板以進行編輯


請執行下列其中一項作業：
將滑鼠指標移到要以「設計」檢視開啟的面板標籤上方，並按一下標籤右側的眼睛圖示。
在「文件」視窗中選取標籤面板 Widget，然後在「屬性」檢視窗 (「視窗 > 屬性」) 的「面板」選單中，按一下要編輯的面板名稱。

變更面板順序


在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 的「面板」選單中，選取您要移動的面板名稱。
按一下向上或向下箭頭，將面板向上或向下移動。

設定預設開啟的面板


您可以設定當網頁在瀏覽器中開啟時，預設要開啟標籤面板 Widget 的哪個面板。
在「文件」視窗中選取標籤面板 Widget。
在「屬性」檢視窗 (「視窗 ＞ 屬性」) 中，從「預設」面板彈出式選單中選取您要預設開啟的面板。


[hr]

自訂標籤面板 Widget


「屬性」檢視窗可讓您對標籤面板 Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。 您可以更改標籤面板 Widget 的 CSS 規則，並依照您所喜愛的樣式建立 Widget。

如需更改標籤面板 Widget 顏色的快速參考資料，請參閱 David Powers 的 Spry 標籤面板、折疊式控制項和可收合面板樣式設計的快速指南。

如需樣式設計工作的進階清單，請參閱 http://www.adobe.com/go/learn_dw_sprytabbedpanels_custom_tw。

下列主題中的所有 CSS 規則都是指 SpryTabbedPanels.css 檔案中的預設規則。 每當您建立 Spry 標籤面板 Widget 時，Dreamweaver 都會將 SpryTabbedPanels.css 檔案儲存在網站的 SpryAssets 資料夾中。 這個檔案也包含 Widget 所適用各種樣式的實用註解資訊。

[img]http://help.adobe.com/zh_TW/dreamweaver/cs/using/images/tip_help.png[/img]您可以輕鬆地在隨附的 CSS 檔案中直接編輯標籤面板 Widget 的規則，也可以使用「CSS 樣式」面板來編輯 Widget 的 CSS。 「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。

設計標籤面板 Widget 文字


您可以設定整個標籤面板 Widget 容器的屬性，或是個別設定 Widget 組件的屬性，藉此設計標籤面板 Widget 文字的樣式。

[img]http://help.adobe.com/zh_TW/dreamweaver/cs/using/images/tip_help.png[/img]若要變更標籤面板 Widget 的文字樣式，請使用下表找出適合的 CSS 規則，然後新增您自己的文字樣式屬性和值：

[IMG]http://i556.photobucket.com/albums/ss1/whc915/spry01.jpg[/IMG]


變更標籤面板 Widget 的背景顏色



[img]http://help.adobe.com/zh_TW/dreamweaver/cs/using/images/tip_help.png[/img]若要變更標籤面板 Widget 不同部分的背景顏色，請使用下表找出適合的 CSS 規則，然後依照您的喜好新增或變更背景顏色的屬性和值：

[IMG]http://i556.photobucket.com/albums/ss1/whc915/spry02.jpg[/IMG]


限制標籤面板寬度



根據預設，標籤面板 Widget 會展開至所有可用空間。 不過，您只要設定折疊式容器的寬度屬性，就可以限制標籤面板 Widget 的寬度。

1.開啟 SpryTabbedPanels.css 檔案，找出 .TabbedPanels CSS 規則。 這項規則定義了標籤面板 Widget 主要容器元素的屬性。
您也可以選取標籤面板 Widget，然後在「CSS 樣式」面板 (「視窗 > CSS 樣式」) 中找出這項規則。請確認面板已設定為「目前」模式。

2.為規則新增寬度屬性和值，例如 width: 300px;。


[hr]

TAB實作步驟



插入標籤面板


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-01.jpg[/IMG]

語法對照

[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-02.jpg[/IMG]


修改標籤標題，屬性面板對照


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-03.jpg[/IMG]


重新設定標籤外觀的樣式 .TabbedPanelsTab


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-04.jpg[/IMG]


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-05.jpg[/IMG]


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-06.jpg[/IMG]


文字居中對齊的設定


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-07.jpg[/IMG]

效果顯示

[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-08.jpg[/IMG]


設定滑鼠移過時的標籤樣式 TabbedPanelsTabHover


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-18.jpg[/IMG]

效果顯示
[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-09.jpg[/IMG]


設定檢視中頁次的標籤樣式 .TabbedPanelsTabSelected


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-10.jpg[/IMG]


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-11.jpg[/IMG]


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-19.jpg[/IMG]

效果顯示

[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-12.jpg[/IMG]


設定整個標籤面板的外觀樣式.TabbedPanels


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-13.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-14.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-15.jpg[/IMG]


設定標籤內容區的外觀樣式 .TabbedPanelsContentGroup


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-16.jpg[/IMG]

效果預覽

[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-21.jpg[/IMG]


設定標籤內容區的樣式重覆右邊的藍線 .TabbedPanelsContent


[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-17.jpg[/IMG]

效果預覽
[IMG]http://i556.photobucket.com/albums/ss1/whc915/tab-20.jpg[/IMG]
12月
12

[期末作業] 資訊概論期末作業說明

100-1《中國》竹視傳一B-資訊概論, 100-1《中國》竹視傳一C-資訊概論
2 comments

資訊概論期末作業



請完成期中之後的三個作業：

1.轉檔與動圖製作


B班：http://mepopedia.com/forum/read.php?864,17518
C班：http://mepopedia.com/forum/read.php?865,17517

2.螢幕擷取軟體教學或音樂故事製作


B班：http://mepopedia.com/forum/read.php?864,17987
C班：http://mepopedia.com/forum/read.php?865,17986

3.期末作品集製作


http://mepopedia.com/forum/read.php?299,18509
包含電腦繪圖所有作業，其他課課程作業
(1.InDesign，輸出成pdf列印以及swf動態，2.PowerPoint簡報(加分))


製作進度：


12/12作品集教學
12/19作品集製作
12/26完成作品集以及所有作品的製作，於課堂繳交，作業檢討
01/02分數公布修正，作業檢討
12月
11

[講義] 設計作品集製作--以InDesign為例

100-1《中國》竹視傳一B-資訊概論, 100-1《中國》竹視傳一C-資訊概論, 設計實務, 設計實務
0 comments

作品集製作前言


身為設計人，作品集是未來就業或求學非常重要的利器，無論要找設計相關工作，或者繼續念研究所，作品集都是必要條件，因此及早建立及準備可以讓自己的作品更有系統並更加完整。

作品集首先要確立的是：想給對方看到甚麼樣想法及風格的你？
穩重？大膽？多元？創意？活潑？細膩？....

作品風格的呈現及想法為何？

這些都是製作作品集之前必須考慮清楚的。
[hr]
現階段的作品集製作則是希望大家能累積、整理並檢視現階段的作品，必且把每次的作業都當作是未來可以放在作品集的心情去製作，用心認真去製作，並且依照設計原則、清楚的確定設計目標及設計理念為何，逐步的將作品分類並整理，未來將有更豐厚的作品資源可隨時取用，也許會隨著年級逐漸的增長，作品也將更成熟，但這成長的脈絡也會是作品成熟的重要推手，希望將來畢業時，都能有豐富且具有個人風格的作品呈現。

作品集種類及內容



作品集的種類：


平面作品集(InDesign,列印pdf or互動swf)


網頁作品集


動態多媒體作品集(FLASH...)


簡報用作品集(POWERPOINT)



[hr]

作品集內容：


個人簡介


作品分類目錄


單一作品介紹


(1)作品圖片 (系列作品、立體作品或攝影作品可放多張圖以表現整體感)
(2)發想草圖或色稿 (整理過後的發想過程，以表現創意發想的廣度與造型能力)
(3)作品說明：
<1>作品主題：
<2>作品類型：
<3>使用軟體(工具)：
<4>設計(理念)概念：
<5>設計特色(風格、配色...)：
<6>作品尺寸：

[hr]

作品集製作前準備


作品整理與內容撰寫


風格設定


個人LOGO


作品集主視覺設計



[hr]

作品集製作步驟


以InDesign製作作品集的基本步驟


檔案→新增→文件


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-01.jpg[/IMG]


設定為列印形式，及作品集的尺寸、頁數、出血範圍、裝訂方向(橫式左翻或直式右翻))等，作品集選擇『邊界與欄』即可


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-02.jpg[/IMG]


設定邊界與欄數(可依編排形式，自行決定是否需要欄數)


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-03.jpg[/IMG]


設定主版種類與項目


EX：1.封面，2.目錄，3.電腦繪圖，4.攝影，5.設計素描，6.基礎造型，7.設計概論，8.網頁設計，9.資訊概論....



頁面面板→新增主版→新增主版B→命名為目錄


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-04.jpg[/IMG]


選擇第二頁→頁面面板→套用主版至頁面→


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-05.jpg[/IMG]


套用主版至頁面→選擇→套用至第二頁


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-06.jpg[/IMG]


頁面面板→新增主版→新增主版C→命名為電腦繪圖


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-07.jpg[/IMG]


選取頁面→套用置主版→C電腦繪圖


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-08.jpg[/IMG]


於主版頁面加入文字做編排設計


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-09.jpg[/IMG]


在T文字選項拉出文字框→打字→可分別填外框底色


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-10.jpg[/IMG]


也可分別設定文字顏色


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-11.jpg[/IMG]


加入底圖→按右鍵→排列順序→移至最後


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-12.jpg[/IMG]



新增主版並套用原有的主版做法


頁面→新增主版→新增主版D→命名為攝影→根據主版→C-電腦繪圖


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-13.jpg[/IMG]


選取其他頁面→套用至主版頁面→D-攝影


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-14.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-15.jpg[/IMG]


在D-攝影主版上→按右鍵→忽略所有的主版頁面項目


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-16.jpg[/IMG]


將D-攝影右邊的主版修改為攝影的編排


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-17.jpg[/IMG]


將D-攝影左邊的主版也→按右鍵→忽略所有的主版頁面項目


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-18.jpg[/IMG]


將D-攝影左邊的主版修改為攝影的編排


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-19.jpg[/IMG]



增加頁數


頁面→插入頁面


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-20.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-21.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-22.jpg[/IMG]



加入頁碼


先在主板要插入頁碼的位置拉出文字框

文字→插入特殊字元→標記→目前頁碼


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-23.jpg[/IMG]


插入之後的頁碼，會呈現主版的字首符號


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-24.jpg[/IMG]


將頁碼做編排設計


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-25.jpg[/IMG]


將右邊設計好的頁碼複製到左邊的主版


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-26.jpg[/IMG]


依前述步驟，持續新增E-資訊概論主版


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-27.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-28.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-29.jpg[/IMG]



作品頁面編輯


將作品圖檔置入頁面

檔案→置入


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-30.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-31.jpg[/IMG]


InDesign中的圖片框有兩層，一層是外框，一層是圖片內容


同時按Ctrl+Shift才可同時放大或縮小圖片內外框
選取工具選擇的是外框，直接選取工具選擇的是裡面的圖片

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-32.jpg[/IMG]


選擇外框→物件→效果→陰影


製作圖片外框的陰影

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-33.jpg[/IMG]


設定陰影的數值


製作圖片外框的陰影

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-34.jpg[/IMG]


拉出文字框，貼上設計說明文字




工具箱→矩形框架工具→拉出範圍→置入圖片


於矩形框架工具中置入原照片

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-35.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-36.jpg[/IMG]


設定段落樣式


將內文設定共同使用的段落樣式

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-37.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-38.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-39.jpg[/IMG]


於照片上→按右鍵→效果→陰影


在照片上設定陰影

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-40.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-41.jpg[/IMG]


檢視→螢幕模式→預視


觀看預覽效果

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-42.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-43.jpg[/IMG]



動畫效果


視窗→互動→動畫


叫出動畫視窗

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-44.jpg[/IMG]


選擇圖片或任一物件→預設集→選取任一動畫效果


製作動態效果

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-45.jpg[/IMG]


頁面切換效果


翻頁的效果設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-46.jpg[/IMG]


頁面切換效果


翻頁的效果設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-46.jpg[/IMG]

[hr]

將視訊作品由FLASH中增加播放面板


打開FLASH→檔案→匯入→匯入視訊


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-47.jpg[/IMG]


瀏覽→選取視訊檔案


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-48.jpg[/IMG]


設定外觀元素


選擇適合的播放器元素

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-49.jpg[/IMG]


完成視訊匯入


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-50.jpg[/IMG]


於屬性面版修改視訊寬度


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-51.jpg[/IMG]


設定文件尺寸符合視訊尺寸


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-52.jpg[/IMG]


檔案→匯出影片


設定完成匯出影片

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-53.jpg[/IMG]


匯出成swf影片


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-54.jpg[/IMG]


於InDesign置入影片


檔案→置入→選擇製作完成的影片


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-55.jpg[/IMG]


調整置適當大小


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-56.jpg[/IMG]


製作其他動態效果







文字框設定


於文字框上→按右鍵→文字框選項


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-58.jpg[/IMG]


文字框選項設定→內縮間距的設定


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-59.jpg[/IMG]


內縮間距的設定完成的效果


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-60.jpg[/IMG]


將文字框填入底色


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-62.jpg[/IMG]



作品集檔案匯出成動態格式


檔案→轉存


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-63.jpg[/IMG]


轉存成SWF動態檔案，可播放影片及呈現動態互動翻頁等效果


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-64.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-65.jpg[/IMG]




作品集檔案匯出成可列印的PDF格式


轉存成PDF(列印)，可輸出成高品質作品集檔案


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-66.jpg[/IMG]



[hr]

網路相關講義



如何使用 InDesign 製作電子書：http://www.myadobe.com.tw/Technique/InDesign/100811-001.asp
(頁數 1 共 31, 總共 455 篇文章) » 下一頁