 |
|
‧
在Dreamweaver 調整圖片的大小 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU080400 |
|
在Dreamweaver 放大圖片，畫質會變得粗糙，因為原始檔的資訊量不足以顯示為放大的圖
片，若要於即時屬性檢視調整大小，可照以下步驟執行
1.先可選擇圖片（img 標籤），顯示img 標籤的元素螢幕
2.開啟即時屬性檢視窗，於檢視窗的「
|
|
|
|
|
 |
|
‧
LINE@必學！速增粉絲黏著度 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU073000 |
|
抽獎券的運用模式是搭配發送優惠券讓粉絲抽選，也就是抽獎的獎項就是優惠券所設定的內容。所以當舉辦這項活動時，優惠券的內容就必須設定較大的折扣，或是設定成免費、贈品、現金回饋等內容，如果要吸引粉絲踴躍參與還可將中獎率提升，進
|
|
|
|
|
 |
|
‧
互動廣告動畫這樣玩！ |
|
‧類別：
網頁設計 |
|
‧書號：
AEU015200 |
|
有些網頁會有廣告橫幅，有些則會有互動的模式，這次將製作能有這樣效果的網頁動畫。首先想好動畫（腳本）要怎麼進行，本範例是在一開始時有個貓在中間，透過滑鼠點擊牠後，會跳出其他動畫與宣導文字。
1. 新增按鈕元件，然後把影片片
|
|
|
|
|
 |
|
‧
為網站加入 Google 地圖 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU068200 |
|
本篇分享如何用Dreamweaver CC讓網站旅遊文章與景點導覽相輔相承，讓觀看文章的人馬上就能知道位置，增加讀者與文章的互動性。
STEP 01
在 Google 地圖中定好位置後，於左下角選按 設定 \ 分享或嵌入地圖，開啟程式碼頁面。
STEP 02
|
|
|
|
|
 |
|
‧
一看就愛上的手機網頁設計 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU063400 |
|
智慧型手機版網站受限於單一畫面中，只能提供有限的資料量，因此具有往垂直方向延伸網頁的特性。尤其是下層網頁，更需要設計出能清楚判別內容連續性及分段的版型。
Step 1. 分割區域
配合內容劃分區域。利用區分標題的框線，明確區分出
|
|
|
|
|
 |
|
‧
骨塊動畫-零件組合鋼鐵人 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU063700 |
|
骨塊動畫鋼鐵人是由六個零件組成，分別為 頭盔、身體、手臂1、手臂2、腳1、腳2元件，在這一節中將透過設計好的參考圖協助整個鋼鐵人的佈置與組合。
01 組合鋼鐵人的頭盔與身體、手、腳
選按 鋼鐵人 圖層影格 1，拖曳 元件庫 中合適的物
|
|
|
|
|
 |
|
‧
主圖套用幻燈片效果一試就上手！ |
|
‧類別：
網頁設計 |
|
‧書號：
ACU061100 |
|
想加強首頁效果時，或者是想呈現更多張照片時就可以使用主圖套用幻燈片效果。
變更主題（幻燈片）
※ 幻燈片圖片應儲存於「img」-->「slide」資料夾裡。
如何新增幻燈片？
請複製原始碼裡的<li> ∼ </li> 的部分，
|
|
|
|
|
 |
|
‧
自動調整色階的秘訣 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU060500 |
|
影像的基本調整方法中，有一種調整暗、亮部及中間亮度（Gamm）的方法稱為「色階」調整。不熟悉調整作業的人或許會覺得這很困難，如果不想每幅影像都以手動調整，有時候簡單的自動調整也能收到不錯效果。
自動色階調整的步驟
1. 製作色
|
|
|
|
|
 |
|
‧
完美達陣客戶要的網站設計風格 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU059400 |
|
關於設計風格部分，很難光用嘴巴問出客戶到底希望呈現哪一種方向？所以得先清楚地把客戶的想法具體化。
找出風格類似的網站
就某種層面而言，設計的世界非常「主觀」。當然，設計網站的時候，必須以目標對象為前提，設計出適合的效果，
|
|
|
|
|
 |
|
‧
雜點！照片的致命傷 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU055200 |
|
現在的相機強調「高 I S O 」， I S O 值越高， 越能在昏暗的環境中感光， 即使不開閃燈也能拍照。室內的光線當然比不上戶外，所以相機會自動拉高ISO，當我們嘗試著運用「色階」「曲線」來改善光線時，很容易看到如同上圖可怕的雜點。
|
|
|
|
|
 |
|
‧
LOGO商標設計 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU052500 |
|
對客戶來說，LOGO商標只是簡單的圖案，客戶無法理解為啥看起來不用畫很久的東西，費用卻要這麼貴。所以商標的市場，更是很玄的報價標準。就經驗來說，一個LOGO兩三千塊，客戶就能考慮個半天，五六千塊客戶就會考慮更久，要拼到上萬，真的
|
|
|
|
|
 |
|
‧
創意人最喜愛的逐格動畫這樣做 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU009900 |
|
Step 1.
開啟預先準備好的檔案 ，執行「檔案」→「開啟舊檔」。
Step 2.修改影格速率為12fps執行「修改」→「文件」。
在影格速率的文字欄位輸入12。在Flash 本身就可以看成一部電影，我們一般在新增一個新的Flash 動畫時，
|
|
|
|
|
 |
|
‧
在網頁建立郵件超連結 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU052200 |
|
在網頁中常以 E-mail 做為意見表達或聯絡的方法，它能讓網站經營者與瀏覽者間擁有良好的互動，進而透過文字交流聽見更多建言與鼓勵，其建立郵件超連結請參考如下設定：
Step 1.
以 <flower.htm> 檔案中 「鬱金香」 為例：
1 反
|
|
|
|
|
 |
|
‧
滑動影像秀 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU007600 |
|
匯入多張影像文件後，使用動作指令控制影像的滑動顯示，點選按鈕後將影像展示在使用者前面。
Step 1 新增「AS2.0」文件，參考下圖設定文件的屬性。
Step 2 匯入4 張影像到元件庫。
Step 3 新增「img 」影片片段，引入4 張影像
|
|
|
|
|
 |
|
‧
如何做出動畫裡震動的鏡頭 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU006600 |
|
鏡頭的震動是模擬重物掉落地面，或是強烈撞擊，攝影機跟著一起震動的畫面。震動的鏡頭在動畫當中經常會用到，打開電視看看卡通片就可以發現了。只是在動畫當中，鏡頭不會自己震動，必須要DIY 才可以。畫面震動的方式會因為劇情需
|
|
|
|
|
 |
|
‧
打地鼠遊戲製作 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU007500 |
|
在這個範例中，我們使用滑鼠把冒出來的地鼠打掉，被打到的地鼠，臉上會露出痛苦的表情，一樣是利用計時器和按鈕的組合，使用的語法和上個範例類似。
01 首先，開啟範例檔。
02 點選下方的「GO ！」按鈕，開啟屬性面板，在元件實體上輸
|
|
|
|
|
 |
|
‧
連結外部CSS樣式表檔 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU055400 |
|
定義 CSS 樣式表的來源時，可以將它定義為一個單獨的檔案，也就是Dreamweaver 會將所設定 CSS 樣式匯出成為一個副檔名為 .css 的檔案。也因為這個檔案是單獨存在的，所以在網站內的所有網頁都可以使用連結的方式套用這個樣式表，如此一來
|
|
|
|
|
 |
|
‧
網頁製作－幻燈片展示效果 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU059700 |
|
幻燈片播放程式，不僅設定上簡單，在影像與影像切換時可提供25 種的轉景特效，而且還具有互動的效果，控制展示的影像，是不是很心動呢？
以下是幻燈片展示擴充程式的基本資料：
1. 首先設定影像播放的預告內容：
1-1 選取「精選照片
|
|
|
|
|
 |
|
‧
網頁配色技巧 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU055600 |
|
藝術網頁的版式比較多樣化，例如：直觀而熱烈的滿版型，四邊出血、向外擴張；還有符合年輕人口味的曲線型；使網頁具有強烈視覺效果的焦點型等。在色彩的運用上也很多樣化，大多運用對比色，使網站特色鮮明、重點突出。
藝術版式配色的推
|
|
|
|
|
 |
|
‧
修改CSS 版面玩美必修技 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU008100 |
|
只要修改預設的CSS 規則及輸入取代預設的文字即可。請先將檔案存檔為「travel.html」。CSS 版面是由一個一個區塊所組成，首先修改標題列區塊，將文字換成圖片。
Step 1.
將標題列預設的文字刪除， 雙按CSS 面板中的「.twoColFixLtHdr#h
|
|
|
|
|
 |
|
‧
超美影像地圖 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU007700 |
|
影像地圖可以讓網頁的版面更美觀，而且製作出來的網頁不會因瀏覽器的不同，而造成視覺上的差異。製作影像地圖以前，請先使用影像處理軟體( 例如Photoshop 或PhotoImpact)，將影像作適當的編輯。影像地圖可以在同一張影像建立多個連結區域
|
|
|
|
|
 |
|
‧
動態按鈕的製作 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU007800 |
|
使用滑鼠指標移控制影像的變換。二張相同尺寸的影像，參考以下的說明來製作動態按鈕。
Step 1.
開啟「toy1.jpg」到工作區。
Step 2.
執行「編輯- 插入- 矩形分割」指令，建立矩形分割區。
Step 3.
開啟「圖層(「F2」)」面板，選取
|
|
|
|
|
 |
|
‧
讓繪本動起來 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU008900 |
|
通常數位繪本都以介紹書名、作者及配音者的方式開始，所以此段語音內容剛好做為片頭開場白使用，搭配的封面圖片也在「主圖」圖層上場，務必將此圖片及後續登場的每一張圖片都轉換為元件再繼續編輯作業。接下來就在一邊聽語音一邊按F5的動
|
|
|
|
|
 |
|
‧
將AP元素轉換為表格 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU009300 |
|
AP 元素表示已指定絕對定位的HTML 頁面元素，例如：Div 或其他的標籤。AP 元素的內容可以包含文字、影像或任何可以放在HTML 文件的物件。有些瀏覽器對AP 元素的支援並不完整，有可能無法正常顯示網頁的內容。為了確保網頁和瀏覽器的相容
|
|
|
|
|
 |
|
‧
補間動畫搶先學 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU055300 |
|
利用 Flash CS4 新功能 移動補間動畫，一開始先調整主角 "青蛙" 的手腳動作，接著加入與調整移動路徑，讓 "青蛙" 快樂的跳躍在荷葉上。
設計重點：逐格動畫與移動補間動畫的應用，元件實體大小調整與移動路徑的設定
|
|
|
|
|
 |
|
‧
在網頁中插入Flash視訊 |
|
‧類別：
網頁設計 |
|
‧書號：
ACU057600 |
|
執行 插入>媒體>FLV 指令在網頁中插入Flash視訊時，會同時產生視訊播放程式SWF檔案和外觀SWF檔案，這些檔案可用來在網頁上顯示Flash視訊內容，這些檔案會和您在其中加入FLV (Flash Video)內容的HTML檔案，儲存於相同資料夾。當您上
|
|
|
|
|
 |
|
‧
做出創意又可愛的桌面時鐘 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU009200 |
|
取得電腦的時間做為變數的內容，並控制指針的旋轉角度，搭配背景影像製作可愛的時鐘動畫。
Step 1
開啟Clock.FLA 檔案，元件庫包含動畫所需要的元件。
Step 2
新增Hour,Minute 和Sec 影片片段，參考下圖使用[ 線段工具] 繪製指針，
|
|
|
|
|
 |
|
‧
兩頭身卡哇伊形像設計 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU008600 |
|
在繪製兩頭身可愛版形像時，其中一個頭長為頭的比例，另一個頭長為身體，這時可以對身體進行等分，這裡進行了三等分，分別確定了人物形像的胯骨連線和膝部的位置。
兩頭身五官的設定比四頭身有了更明顯的區別，眼睛在臉部的比例變大，省
|
|
|
|
|
 |
|
‧
利用圖層把葉子從綠轉紅 |
|
‧類別：
網頁設計 |
|
‧書號：
AEU009600 |
|
圖層效果的補間動畫，可以利用圖層樣式的改變產生動畫。
以下將示範楓葉由綠轉紅的變化過程。範例檔案由「背景」及從背景複製出來的「葉子」兩個圖層所構成。
Step 1.
在「動畫」面板中，點按「複製選取的影格」按鈕，增加一個影格。
|
|
|
|
|
 |
|
‧
如何設定背景透明的 Flash 動畫？ |
|
‧類別：
網頁設計 |
|
‧書號：
ACU052600 |
|
如果 Flash 動畫放置在一個有指定背景顏色的頁面上，而背景色又與 Flash 本身的背景色不同時，如左下圖，就會另人感到頁面不協調！可否去除 Flash 動畫本身的背景，讓動畫的主體融入網頁指定背景顏色之中呢？
方法一：
在 Dreamwea
|
|
|
|
|
|
|
 |
|
‧
Flash CS3 如何設定自動轉頁？ |
|
‧類別：
網頁設計 |
|
‧書號：
ACU045200 |
|
在進入歡迎首頁後，如果沒有選按直接進入網站鈕，頁面會一直停留在首頁上。如何設定才可在停留幾秒後，自動轉到內頁去呢？
請在要設定自動轉頁的頁面 <index.htm> 上操作下列步驟：
1.選按主功能表 插入 \ HTML \ 檔頭標籤
|
|
|
|
|