利用文件創造報紙風格的版面設計─智邦公益電子報─台灣最大公益電子報發行中心

::旗標電腦文摘::最正確、最豐富的電腦知識寶藏！

2008-4-24│ NO422│訂閱電子報

本週活動：
‧極地祕境─胡得榘南北極攝影旅遊講座
本期主題：
‧利用文件創造報紙風格的版面設計
‧用Flash製作數位相框場景轉換效果
最新主題：
‧居家出遊拍攝 DV 一次上手！
‧控制圖層混和範圍, 實現擬真合成效果

:::最新出版:::

Mac DV拍攝完全探索 - 腳本‧拍攝‧剪接、輸出一次成

本書是針對極想拍好 DV 的使用者設計的旗艦級書籍, 徹底解決多數使用者最常遇到的困擾–『DV 拿在手上不知怎....

高畫質 FullHD 影音王 - 下載、播放、擷取、備份、轉檔、錄製完全解決

數位攝影、設計必修Photshop解密第2版

本週活動：

本期主題：利用文件創造報紙風格的版面設計

文件+ 4 欄排版+ float

CSS 版本   CSS 2.1
支援瀏覽器 IE 6    ○
           IE 7    ○
           Opera   ○
           Firefox ○
           Safari  ○

本範例是試做報社新聞網站的首頁版行, 首先映入眼簾的是一覽無遺的設計。儘管目前XGA 的主流尺寸已在 ( 1027 × 768 pixel )以上, 但若瀏覽者無法在瀏覽器視窗中看到完整的資訊顯示時, 資訊的傳達效果還是會有所欠缺。3 欄式、4 欄式的版面設計是目前此類網站設計的主流, 多欄式的優點是同時也能保有較大的廣告空間。此範例採用報紙格式的標準版面編排, 也就是透過「 float 屬性」來進行版面編排設計。

1.文件的結構化
首先讓我們來進行文字部份格式的結構化吧。由於我們採用的是模仿報紙格式的設計, 因此以段落為主的編排結構來設計；分為「頁首」、「內容」、「頁尾」三項, 再用 id 命名為「 building 」的 <div> 全部群組起來。再將「內容」中分設導覽和四個內容區塊： local-navigation , 主要內容, 次內容, 廣告。最後再依照這四個區塊來編制段落。

首先將文字內容用XHTML結構化

<div id="building">
 <div id="header">
   <h1>大標題し</h1>
   <h2>中標題し</h2>
   <h3>小標題し</h3>
 </div>
 <div id="contents">
   <div id="navigation">ナビゲーション</div>
  <hr />
  <div id="local-navi">ローカルナビゲーション</div>
  <div id="main-contents">メインコンテンツ </div>
  <div id="sub-contents">サブコンテンツ</div>
  <div id="advertisement">広告</div>
  <hr />
 </div>
 <div id="footer">クレジット</div>
</div>

2.設定置中對齊
接著我們將頁面中的內容配置於瀏覽器的中央。在將所有元素群組化的「 building 」設定中, 我們將它設定為「 width:960 px ; ( 寬度960px )」。置中的部份則以「 margin:0 auto; 」來執行。「 margin: 上下設為 0、左右設為 auto (自動)」, 在這裡表示置中對齊。此外, 若擔心在 IE 5 及 5.5 裡無法順利呈現置中對齊的效果, 則可在 body 中加入「 text-align:center; 」、#building 中設定「 text-align:left; 」的語法來處理以上問題。 IE 6 以上的版本則不需進行此相容性的設定。

body {
 text-align:center; /* IE 5.x bug fix */
 }
#building {
 width:960px;
 margin:0 auto;
 padding:0;
 text-align:left; /* IE 5.x bug fix */
 border:1px solid #666;
 }

3.導覽列的指定
本範例中的導覽列並非位在頁首區塊, 而是被包含在內容區塊中。要將導覽項目進一步做視覺化處理, 必須在被定義為清單的條列式項目上套用 CSS 設定。在此選擇使用 ul、il 元素這種最常見的手法來定義清單項目。我們把清單元素的各項目使用 div 元素加以群組化, 加上 id 名為「 navigation 」。接著在 ul 設定「左側的留白 ( padding-left )」、「字型大小 ( font-size)」、「不顯示項目符號 ( list-style:none )」、「文字間隔 ( letterspacing)」。對 li 設定「 float:left; 」讓各個清單項目水平排列。對 a則設定「 display:block; 」以確保滑鼠指標的反應區塊。

...........更多的內容請見《CSS 設計點子爆米花》

本期主題：用Flash製作數位相框場景轉換效果

學習重點：
設定透明度變化形成轉場效果
運用遮色片建立轉場動畫

桌上的數位相框循環播放著小猴子和小熊出遊的合照, 隨著四季的變化, 場景也呈現了不同的風貌, 春天的殘雪、夏天的盛綠、秋天的楓紅和冬天的白雪...。注意看！背景也隨著照片流暢的變換著哦！

傳統相片只能放入一張照片, 看久了難免覺得無聊、想換照片, 可是數位相框就不同囉！數位相框可以輪番播放多張照片, 加上特殊的轉場效果, 讓相框裡的照片百看不厭。這個單元我們就來製作數位相框中的轉場效果, 雖然我們是用小熊和小猴子的合照來練習, 你也可以試著換上自己的數位相片, 讓自己變身為動畫中的主角。

建立四季流暢變換的背景

目前練習檔案中只有一個桌面圖層, 桌面上有數位相框、便條紙和一枝鉛筆。我們先來為動畫製作一個變換四季的背景, 稍後再來建立相框中的內容, 一步步完成本單元的動畫。

學習步驟 1：建立季節轉換背景

請建立一個名為 "四季變換背景" 的影片片段元件, 接著我們就要在此元件的編輯模式中進行動畫設定。

1.請先建立春、夏、秋、冬 4 個圖層, 然後將元件庫中背景元件資料夾內的背景_春拉曳至春圖層的影格 1。

2.背景共有 160 影格的長度, 所以請先在春圖層的影格 160 按下 F5 鍵, 建立動畫的影格長度。接著要設定每個季節的播放影格, 動畫安排每個季節會播放 60 影格, 我們以下方的示意圖來說明要設定的動畫內容。

3.大致了解動畫的設定流程後, 我們就來動手設定春天轉換到夏天的轉場效果吧！先在夏圖層的影格 11 插入關鍵影格, 將元件庫中的背景_夏拉曳到舞台上, 然後選取舞台上的背景_夏, 再到屬性面板將顏色欄改為 Alpha：0%, 表示目前背景_夏是完全透明的。

利用元件註冊點位置來對齊不同的元件實體　

在建立元件時, 我們已將所有的四季背景及照片的元件註冊點固定在左上角, 若想要對齊四季背景的位置, 可在將元件拉曳到舞台上後, 手動將屬性面板的 X、Y 改為 0、0。

4.接著要讓背景_夏由透明變換到完全顯現。請在夏圖層的影格 30 建立關鍵影格, 然後選取舞台上的實體, 再設定 Alpha：100%。

5.設定好 Alpha 值的變化後, 請在影格 11 到影格 30 間任一影格按右鈕, 執行『建立移動補間動畫』命令, 完成透明度漸變的動畫設定。為了使背景_夏在變成清晰後先播放 20 影格, 並能順利與下一個季節進行轉場, 請將夏圖層增加到影格 70 (在影格 70 按下 F5 鍵即可增加影格)。

6.夏天與秋天轉換的動畫也是如上步驟進行設定。請在秋圖層的影格 51 插入關鍵影格, 再將背景_秋拉曳到舞台上, 重新選取舞台上的背景_秋, 將 Alpha 設為 0%；在影格 70 插入關鍵影格, 將 Alpha 設為 100%。

7.在秋圖層影格 51 到影格 70 建立移動補間動畫, 讓背景_秋由透明轉換到完全清楚, 並將秋圖層的影格長度增加到 110。

8.接著要設定秋天轉成冬天雪景的動畫。請在冬圖層的影格 91 插入關鍵影格, 然後從元件庫中將背景_冬拉曳到舞台上。在冬圖層影格 91 的地方, 把 Alpha 設為 0%；在影格 110 插入關鍵影格, 並將舞台上背景_冬的 Alpha 設為 100%。

9.為冬圖層的影格 91 至影格 110 建立移動補間動畫, 再將冬圖層的影格長度增加到影格 150, 就完成秋天轉換成冬天的階段了。

10.之前我們都是設定下一個季節由透明轉換到完全清楚的淡入效果, 這裡我們要反其道而行, 將背景_冬圖層從完全清楚漸變成透明的淡出效果, 就可以順利顯示春圖層中的背景_春了。請在冬圖層的影格 131 插入關鍵影格, 然後將背景_冬的 Alpha 設為 100%；在影格 150 插入關鍵影格, 再將 Alpha 設為 0%, 並在影格 131 至 150 建立移動補間動畫。

TIP:建立好四季變換背景影片片段元件後, 你可以按下 Enter 鍵 (Windows)/ Return 鍵 (Mac) 預覽設定的結果。

...........更多的內容請見《速習 Flash CS3 做網頁動畫》