1 / 36

親愛的老師您好

親愛的老師您好. 感謝您選用本書作為授課教材，博碩文化準備本書精選簡報檔，特別摘錄重點提供給您授課專用。 說明： 1 、本教具為非賣品，不得作為商業之用。 2 、本教具僅授權使用原著作為授課教材之教師作為教學或研究等學術用途。 3 、本教具未授權提供學生任何拷貝、影印、引用、翻印等行為。 4 、教師若需申請網站或內容授權，可透過您的博碩業務協助處理，謝謝。. 博碩文化： 總公司：台北縣汐止市新台五路一段 94 號 6 樓 A 棟 電話： (02) 2696-2869 分機 313 傳真： (02) 2696-2867

isaura
Download Presentation

親愛的老師您好

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 親愛的老師您好 感謝您選用本書作為授課教材，博碩文化準備本書精選簡報檔，特別摘錄重點提供給您授課專用。 說明： 1、本教具為非賣品，不得作為商業之用。 2、本教具僅授權使用原著作為授課教材之教師作為教學或研究等學術用途。 3、本教具未授權提供學生任何拷貝、影印、引用、翻印等行為。 4、教師若需申請網站或內容授權，可透過您的博碩業務協助處理，謝謝。 博碩文化： 總公司：台北縣汐止市新台五路一段94號6樓A棟 電話：(02) 2696-2869 分機 313 傳真：(02) 2696-2867 網址：www.drmaster.com.tw客服信箱：school@drmaster.com.tw 出書提案信箱 schoolbook@drmaster.com.tw

  2. 網頁設計 請老師填入姓名主講 課本：Dreamweaver CS4網頁設計應用集 博碩文化出版發行

  3. 第一章 網站企劃概念 課前指引 雖然現在的網站設計都是強調專業分工，可是若團隊中的每一位成員，都能具有上述的基本知識，對於整個團隊的合作效率絶對有加分的作用。本章會對網站設計流程中的各個部份作重點式的講解說明，好讓初次進入網站設計領域的各位可以有一個能遵循的依據。

  4. 章節大綱 1-1 網站概念 1-2 網頁畫面的組成元素 1-3 網站製作流程 備註：可依進度點選小節

  5. 1-1 網站概念 什麼是網站（Website）？簡單而言就是用來放置網頁（Page）及相關資料的地方，當我們使用工具設計網頁之前，必須先在自己的電腦上建立一個資料夾，用來儲存所設計的網頁檔案，而這個檔案資料夾就稱為「網站資料夾」。 當所有的網頁設計完成後，接下來就要讓別人可以經由網際網路的連線，然後到我們所設計的網頁上瀏覽，此時放置頁面的「網站資料夾」就是一個「網站」了。

  6. 1-1 網站概念 不論我們連線到那一個網址來瀏覽網頁畫面，其實都是連接到放置網頁資料的那個「網站資料夾」，而放置「網站資料夾」的電腦主機則稱為「網站伺服器（Web Server）」。如下圖所示，便是網站伺服器、網站資料夾、以及網頁檔案之間的關係。

  7. 1-2 網頁畫面的組成元素 文字、圖片與超連結是網頁畫面的主要組成元件 http://www.timesawards.com/htm/ADADerList.asp

  8. 1-2 網頁畫面的組成元素 http://www.digiwhale.com.tw/

  9. 1-2 網頁畫面的組成元素 純由Flash設計而成的網頁畫面 http://www.tpbbdo.com.cy/bbdo.html

  10. 1-2 網頁畫面的組成元素 http://www.leoburnett.com/

  11. 1-2 網頁畫面的組成元素 網頁及首頁 (1) 網頁（Page）及首頁（Homepage）也是初學者易於混淆的觀念，當瀏覽者連線到網站時，一定要有個頁面來作為瀏覽者最先看到的畫面，接著再利用此頁面中的超連結來繼續瀏覽其他網頁畫面，這個瀏覽者最先看到網頁稱為首頁（Homepage），其他的頁面則稱為（Page）。

  12. 1-2 網頁畫面的組成元素 網頁及首頁 (1) 所以「首頁」也是一個單純的網頁畫面，但由於首頁具有給瀏覽者最先接觸的特性，因此設計者會對首頁上的美化及網站主題性特別下功夫，以便給人良好的第一印象，以上整理如下表。

  13. 1-3 網站製作流程

  14. 1-3 網站製作流程 規劃時期(1)設定網站的主題及客戶族群 具有線上購物機制的商品網站 http://www.momoshop.com.tw/main/Main.jsp

  15. 1-3 網站製作流程 僅提供商品資料查品的網站 http://www.acer.com.tw/

  16. 1-3 網站製作流程 高雄市稅捐稽徵處的兒童網站 http://www.kctax.gov.tw/kid/index.htm

  17. 1-3 網站製作流程 高雄市稅捐稽徵處的中文網站 http://www.kctax.gov.tw/tw/index.aspx

  18. 1-3 網站製作流程 規劃時期(2)多國語言的頁面規劃 跨國性的企業 ，大多在首頁都會提供不同語系的選擇 http://www.ikea.com/

  19. 1-3 網站製作流程 規劃時期(3)繪製網站架構圖 網站架構圖是如圖中的組織結構，也可稱為是網站中資料的分類方式，我們可以根據「網站主題」及「客戶族群」來設計出網站中需要那些頁面來放置資料。

  20. 1-3 網站製作流程 實用的導覽列，有助於網友了解網站架構及瀏覽資料 http://www.kcg.gov.tw/

  21. 1-3 網站製作流程 規劃時期(4)瀏覽動線設計 1.只有垂直連結順序

  22. 1-3 網站製作流程 2.水平與垂直連結順序

  23. 1-3 網站製作流程 規劃時期(5)設定網站的頁面風格 首頁 http://www.icoke.hk/coke2009/

  24. 1-3 網站製作流程 各主題頁面

  25. 1-3 網站製作流程 規劃時期(6)規劃預算 預算費用是網站設計中最不易掌控及最現實的部份。 不論是架設伺服器或是申請網站空間，還是影像圖庫與請專人設計程式、動畫及資料庫等等，都是一些必須支出的費用。 不論如何，各位都要將可能支出的費用及明細詳列出來，以便進行預算費用的掌控。

  26. 1-3 網站製作流程 規劃時期(7)工作分配及繪製時間表 專業分工是目前市場的主流，在設計團隊中每個人依據自己的專長來分配網站開發的各項工作，除了可以讓網站內容更加精緻外，更可以大幅度的縮減開發時間。 不過專業分工的缺點是進度及時間較難掌控，也因此在分工完成後，還要再繪製一份開發進度的時間表，將各項設計的內容與進度作詳細規劃，同時在團隊中，也要有一個領導者專司進度掌控、作品收集及與客戶的協調作業，以確保各個成員的作品除了風格一致外，也可滿足客戶的需求。

  27. 1-3 網站製作流程 規劃時期(8)網站資料收集 需要有較多商品資料及圖片的網站 http://www.nokia.com.tw/

  28. 1-3 網站製作流程 設計時期(1)網頁元件繪製 在進行頁面設計之前，各位可以先將網頁背景圖案、連結按鈕及Flash動畫先設計好，最後再進行頁面效果組合。其實這個部份就算是各個成員的工作內容了，而分工的目的也在於此，各人因自己本身的專長來設計網頁元件，同時也將客戶所提供的照片進行調整，文字作文案修飾，等一些素材都完成後，就是最後的頁面整合了。

  29. 1-3 網站製作流程 設計時期(2)頁面設計及除錯修正 到這裡才能算是頁面設計，也才會真正運用到Dreamweaver的設計功能。我們在Dreamweaver中新增網站及網頁，然後將各個成員設計好的資料在此作整合，以完成整個網站的建置。網站完成後，還必須視客戶的意見作修正，以及針對網站中所有的功能內容進行測試，確保整個網站內容都正確無誤。因此在先前設計時間表時，要記得將此段測試的時間加入到時間表之中，免得網站完成，卻沒有時間測試的問題。

  30. 1-3 網站製作流程 上傳時期(1)選用網站存放位置

  31. 1-3 網站製作流程 若以一般公司行號而言，初期採用「虛擬主機」是一個不錯的選擇，而且可以視網站的需求，選用主機的功能等級與費用，將自行架設伺服器主機當作公司中長期的方案。如下所示的網站，就有提供虛擬主機服務的網站。 http://www.nss.com.tw/zgc.php

  32. 1-3 網站製作流程 http://hosting.url.com.tw/

  33. 1-3 網站製作流程 上傳時期(2)網站內容宣傳 http://reg.yam.com/register/register.asp

  34. 1-3 網站製作流程 http://tw.dir.yahoo.com/step/index.html

  35. 1-3 網站製作流程 維護及更新時期 我們可定期或是在特定節日時，改變頁面的風格樣式，這樣可以持續為網站帶給瀏覽者的新鮮感。而資料更新就是要隨時注意的部份，避免商品在市面上已流通了一段時間，但網站上的資料卻還是舊資料的狀況發生。 另外網站內容的擴充也是更新的重點之一。網站建立初期，其內容及種類都會較為單純。但是時間一久，慢慢就會需要增加內容，讓整個網站資料更加的完備，關於這方面，也建議各位多去參考其他同類型的網站，或是相關資料書籍，勤做筆記與多下工夫，才能真正的讓網站長長久久。

  36. Q&A討論時間 本章結束

More Related