2014年3月12日星期三

Alexey Brodovitch (1898~1971)

1898年生在俄羅斯。

1920年他和家人以及未婚妻離開家鄉來到巴黎。成了失去故土流離失所的一名俄羅斯人。故土那種優雅與憂鬱並存的氣質在他身上體現得尤為明顯。

1924年 Brodovitch為Le Bal Banal，一個幫助貧困藝術家的舞蹈藝術基金設計海報，獲為第一名。

1930年離開法國巴黎前往美國，在費城藝術大學教授廣告藝術專業課程，開辦自己的教學工作室

1934~1958 成為Haper's Bazaar's art director，開啟了Brodovitch為時尚行業和雜誌帶來革命性創新的24年。

1948年攝影作品 BALLET 出版

1949年 Al-bro 字體設計 -

1950年藝術設計雜誌 PORTFOLIO 出刊並擔任其art director

<1924海報設計獲獎作品>

1934~1958

Brodovitch making the magazine a forerunner in American graphic design against other reputable fashion and lifestyle magazines like Vogue and Vanity Fair.

在他為《Harper's Bazaar》所做的平面設計中，圖片常常以突破陳規的方式出現。

大膽而具有視覺衝擊力的頁面留白設計是Brodovitch的風格標記。他敢於為頁面留出巨大的空白位置，文字和標題在他的安排下彷彿圖片中的時裝人物一樣，隨時可以翩然起舞或衝出邊界。

他還是那個創造出跨頁圖片排列方式的人。

非對襯的佈局，流動排版，交疊的影像，大膽的留白，跨頁為單位。

在1938年6月號的《Harper's Bazaar》裡，他讓兩個模特在相鄰頁面上遙相對望，各自矗立在撕裂開來的頁面中央，帶來強烈的視覺衝擊力。

<1949年 Al-bro 字體設計>

<1950年藝術設計雜誌 PORTFOLIO >

<1948年攝影作品 BALLET >
35MM相機無閃光燈慢速膠片速度

<Floor Chair (model 1211-C), c. 1950>

Brodovitch是受運動，如Art Deco, Dadaism, Constructivism, Bauhaus, and Surrealism所影響，但很難將他歸類到單一運動，一如他所說的“我們必須探索新的溝通方式”
Brodovitch未創立任何設計理論，因為他認為優秀的版面設計是沒有方法論可言的，唯一需要保持的是變化與對比感。
一個版面設計者必須執著於好的圖片，而當圖片不夠好時，則全靠他的創意性技巧來力挽狂瀾。

資料來源: http://en.wikipedia.org/wiki/Alexey_Brodovitch
http://www.yoka.com/club/famousmen/2011/0209432809.shtml

2014年2月27日星期四

曾經有個網頁技術主管跟我說：現在網頁已經不用table了, 都用div了, 這樣講有對有錯,
他真正意思應該是用div標簽建立起基本的layout佈局, 這部份當然沒什異議, 但是table是否那麼醜陋, 感覺根本就是垃圾般標簽....丟掉吧 ..

也因此依其意思, 全用了div標簽, 類似以下寫法

＜div class="equal"＞
＜div class="row"＞
＜div class="one"＞＜/div＞
＜div class="two"＞＜/div＞
＜div class="three"＞＜/div＞
＜/div＞
＜/div＞

用到的css屬性如下
display:table; 用在class="equal"
display:table-caption; （表格標題樣式寫法）
display:table-row; 用在class="row"
display:table-cell; 用在class="one"、class="two"、class="three"
參考網址：http://www.cainiao8.com/web/csstech2007/11-divliketable.html

實做完的結果, 老實說我懷念起了<table> 的語法了（老朋友阿...）,
因為加了一堆無意義的div標簽 , 也加了一堆class樣式,

符合HTML5標準化的表格寫法

以下標籤需依其順序性書寫

<table>
<caption> /* table 詳細描述
<colgroup> <col> /* 欄位群組的樣式設定
<thead> 表格表頭搭配 <th>/* （<th>為欄位標題的意思）
<tfoot> 表格結尾
<tbody> 表格內容(可重複此表籤)

實際操作的畫面如下
DEMO

語法如下

<table>

<caption>102學年度考試成績
<summary>摘要:此成績將會佔學年成績的百分之30％</summary>
</caption>

<colgroup>
<col span="2" style="background-color:white">
<col style="background-color:yellow">
</colgroup>

<thead>
<tr>
<td colspan="3" class="subject">數學</td>
</tr>
<tr>
<th>學號</th>
<th>姓名</th>
<th>分數</th>
</tr>
</thead>

<tbody>
<tr>
<td>st-001</td>
<td>王大明</td>
<td>90</td>
</tr>
<tr>
<td>st-002</td>
<td>林小芬</td>
<td>85</td>
</tr>
</tbody>

</table>

說明

為了使資料表格更富有意義 , 結構更清晰 , 劃分了表頭表尾表內容 , 對表格詳加描述 , 則針對群組化欄位的設定
第一個會取學號、st-001、st-002 , 則會取兩個組欄位
為資料欄位的標題欄
html5不支援cellpadding、cellspacing、width、align、scope ,請用css作設定

參考網址 http://www.pdprogrammeur.com/tables-and-html5-table/

2014年2月21日星期五

網頁字體大小設定

在<body>設定網頁字體基本樣式
body{
font-size:62.5%; /* 62.5% * 16px(瀏覽器預設) = 10px */

line-height:1.5; /* 本身字級的1.5倍 */

font-family:Microsoft JhengHei,Arial, Helvetica, sans-serif;

}

縮寫可寫成 font:62.5% / 1.5 Microsoft JhengHei,Arial, Helvetica, sans-serif;
其完整的CSS屬性如下
font: font-style font-variant font-weight font-size / line-height font-family;

h1{
font-size:240%;
}

h2{

font-size:1.8em;

}

p{
font-size:1.5em;
}

基本單位會以10px作計算, 因此
h1標題字 240% * 10px = 24px
h2標題字 1.8 * 10px = 18px
p 1.5 * 10px = 15px
(1em = 一個基本單位 )

建議用％或em而不用px
因為只要我將基本單位作調整, 例如改為75%, 基本單位重新以12px作計算, 上述的h1、h2、p也會一併相對作調整, 因此用百分比或em來作設定, 是非常彈性的設定方式

另外
line-height:1.5; 為何不用 px 或 em 、%
因為設定了 px 或 em 、%
會以基本單位作為統一基準計算而造成標題字行距過擠的狀況
無單位的寫法會依各自的字大小作倍率換算

字型部份, 繁體部份多一個微軟正黑體可以使用,
英文 Microsoft JhengHei

----------------------------------------------------------------------------------------------------------------------------------

font-size 字體尺寸設定分為絕對大小、相對大小、高度、百分比

1.絕對大小

2.相對大小

有larger及smaller兩種,假設父元素為medium
larger = 絕對大小的large ,smaller = 絕對大小的small

3.高度

又分em、ex、px ｜ in、cm、mm、pt、pc （後五種為印刷單位）
1em = 1各基本單位
1ex = 1各基本單位（取小寫高度）

4.百分比

2013年5月15日星期三

政治大學外國語文學院招生海報製作

2013年4月11日星期四

雜誌稿–長壽村的12個飲食秘密

網站規劃建置

巖山雷藏寺 http://www.yanshan.gvrs.info/

EDM設計製作

假睫毛：韓風‧日雜電眼妝必學密技，馬上變身「２倍自然大眼」！

commadesign

2014年3月12日星期三

Alexey Brodovitch

Alexey Brodovitch (1898~1971)

<1924海報設計獲獎作品>

Brodovitch making the magazine a forerunner in American graphic design against other reputable fashion and lifestyle magazines like Vogue and Vanity Fair.

在他為《Harper's Bazaar》所做的平面設計中，圖片常常以突破陳規的方式出現。

大膽而具有視覺衝擊力的頁面留白設計是Brodovitch的風格標記。他敢於為頁面留出巨大的空白位置，文字和標題在他的安排下彷彿圖片中的時裝人物一樣，隨時可以翩然起舞或衝出邊界。

他還是那個創造出跨頁圖片排列方式的人。

非對襯的佈局，流動排版，交疊的影像，大膽的留白，跨頁為單位。

在1938年6月號的《Harper's Bazaar》裡，他讓兩個模特在相鄰頁面上遙相對望，各自矗立在撕裂開來的頁面中央，帶來強烈的視覺衝擊力。

資料來源: http://en.wikipedia.org/wiki/Alexey_Brodovitch
http://www.yoka.com/club/famousmen/2011/0209432809.shtml

2014年2月27日星期四

符合HTML5標準化的表格TABLE

符合HTML5標準化的表格寫法

以下標籤需依其順序性書寫

語法如下

說明

2014年2月21日星期五

網頁字體大小設定

1.絕對大小

2.相對大小

3.高度

2013年5月15日星期三

2013年4月11日星期四

熱門文章

2014年3月12日 星期三

Alexey Brodovitch

Alexey Brodovitch (1898~1971)

<1924海報設計獲獎作品>

Brodovitch making the magazine a forerunner in American graphic design against other reputable fashion and lifestyle magazines like Vogue and Vanity Fair.

在他為《Harper's Bazaar》所做的平面設計中，圖片常常以突破陳規的方式出現。

大膽而具有視覺衝擊力的頁面留白設計是Brodovitch的風格標記。他敢於為頁面留出巨大的空白位置，文字和標題在他的安排下彷彿圖片中的時裝人物一樣，隨時可以翩然起舞或衝出邊界。

他還是那個創造出跨頁圖片排列方式的人。

非對襯的佈局 ，流動排版，交疊的影像，大膽的留白，跨頁為單位。

在1938年6月號的《Harper's Bazaar》裡，他讓兩個模特在相鄰頁面上遙相對望，各自矗立在撕裂開來的頁面中央，帶來強烈的視覺衝擊力。

資料來源: http://en.wikipedia.org/wiki/Alexey_Brodovitch http://www.yoka.com/club/famousmen/2011/0209432809.shtml

2014年2月27日 星期四

符合HTML5標準化的表格TABLE

符合HTML5標準化的表格寫法

以下標籤需依其順序性書寫

語法如下

說明

2014年2月21日 星期五

網頁字體大小設定

1.絕對大小

2.相對大小

3.高度

2013年5月15日 星期三

2013年4月11日 星期四

2014年3月12日星期三

非對襯的佈局，流動排版，交疊的影像，大膽的留白，跨頁為單位。

資料來源: http://en.wikipedia.org/wiki/Alexey_Brodovitch
http://www.yoka.com/club/famousmen/2011/0209432809.shtml

2014年2月27日星期四

2014年2月21日星期五

2013年5月15日星期三

2013年4月11日星期四