第3章专题设计.docVIP

專題設計 本專題設計系採用Ａpache網頁伺服器加上MySQL資料庫，使用Dreamweaver網頁編輯軟體，來設計PHP互動式網頁程式，首先應考慮網站所訴求之對象，大致定位在欲購買手機的年青消費族群，和想要了解目前最新手機功能老顧客。設計概念必須包括前台用戶端互動式網頁，及後台網站管理者資料庫管理，主要的功能為最新消息、手機介紹、加入會員、檔案下載、行銷據點、以及後台管理等六大項來設計，接下來從系統設計架構圖、版面設計、資料庫規劃敍述於後。 圖 3-1系統設計架構圖 網站架構規劃 了解手機企業的背景、客戶對象以及這個網站之於企業的目的後，接著就可以依據上述的調查，規劃出一個大致的網站架構。在表3-1中，我們簡單的描述了網站各網頁的內容資訊，同時也提出需要的相關網頁元件。接著我們依據上表中的描述繪製出網站樹狀架構圖，如上圖3-1。 網頁名稱 說明 需求檔案 歡迎頁 網站的前導頁，一般使用Flash動畫 圖片、影片、文字介紹 首頁 首頁中放置公司最新訊息、公司LOGO 、放置廣告 Banner、安置連接各網頁的超連結、站內搜尋功能、網路搜尋功能–利用 Google 搜尋 1. 公司 LOGO 2. 廣告 Banner 3. 訊息文字 4. 站內搜尋程式撰寫 最新消息 產品促銷、抽獎活動、新品發表 圖片及文字資料 手機介紹 使用多媒體呈現手機相關資訊 圖片、動畫及文字資料 會員新增 使用表單讓用戶可以註冊會員 提供服務表單文字 銷售據點 使用影像地圖呈現服務銷售地點 圖片及文字資料 檔案下載 售後支援服務， 提供鈴聲、桌布、驅動程式、及JAVA遊戲檔案 關於我們 放置公司的相關簡介內容與企業願景 公司相關簡介文字 聯絡我們 提供客戶表單填寫希望的服務項目 提供服務表單文字 友好連結 提供使用者相關的友好連結項目 有好連結資料 版權聲明 有關站內所有圖片及文字所屬版權 相關版權文字說明 網站地圖 全部網頁製作一覽表，方便使用者操作 版面講求清晰易操作 後台管理 管理者對於網站圖片、文字、選單等 圖片、影片、文件檔案 表 3-1 網站內容架構表 前台網頁畫面設計 完成整個網站架構規劃後，接下來提出每一個網頁概念性的草圖，透過草圖來構思，我們使用Visio軟體來繪製。前台網頁畫面主要設計分為三類，各類別及內容設計分別敍述如下: 版面編排：文字與圖片簡明有序，運用節奏、律動、留白的型式原則來維持版面平衡感與韻律性。 文字表現：運用色彩、字體、形狀、線條、形狀、大小、質感、明亮等技巧強調出重要訊息，以易讀性為原則。 圖像表現：維持圖片清晰度，使用同一物件不同角度表達內容。 圖 3-2首頁設計版面各區說明圖 A1 區 :Flash 動畫廣告區，Flash 動畫，設計一個展示手機為主的 flash 動畫，製作所需的素材，可DM資料掃瞄或自行繪製。 A2 區 :導覽列，導覽列的每一項目被選擇及未被選擇時，顏色要不一樣。每一項目被選擇時，會切換到不同的頁面， 在本頁面是「最新訊息」項目被選擇時，所呈現的畫面。導覽列的項目有『最新訊息』、『手機介紹』、『加入會員管理』。 A3 區 :『最新訊息』項目的頁面內容區，共包含 5 個小圖案，及相對應的文字標題及說明，文字標題為『新手機放送』、『哈燒配件』、『MOTO科技發展』、『公關消息活動』、『活動新聞台』共 5 個項目。按每一個小圖案，A4 區的圖片會隨著切換不同的圖片。 A4 區 :『最新訊息』項目的頁面內容區，使用手機圖片素材，利用影像合成特效處理等技巧，設計一張靜態圖片，內容為介紹一款手機。此張完成的圖片，設定成A3 區「新手機放送」相對應的小圖片被選擇時出現。 A5 區 :『最新訊息』項目的頁面內容區，由四小張圖片所組成，依據所設計的版面的風格，使用小張Gif 動畫圖片。 手機介紹網頁設計 按導覽列中的「手機介紹」項目時，切換到下頁劃面 圖3-3 手機介紹設計版面說明圖 B1 區：「手機介紹」項目的頁面，有三個「手機系列圖案」，及相對應的「手機系列名稱」。按不同的「手機系列圖案」時，B4 區會有相對應的多款手機圖案及手機名稱出現，資料從資料庫讀取。 B2 區：按不同的「手機系列圖案」時，B2 區會有相對應的手機「手機系列名稱」出現，資料必須從資料庫讀取。 B3 區：為手機功能篩選區，手機功能共區分為「使用系統」，「基本外型」，「數位相機」，「影音功能」四大功能，子項目。每一功能只能勾選一子項目。當有一子項目被勾選時，B4 區的內容要依據「篩選區的勾選子項目」相對應的改變內容。 B4 區：在此區內按任一手機圖案，就會跳出一個獨立的窗來介紹此款手機。如C1~C4 區的圖例所示。 C1 區：手機的名稱，