第 1 章 網站的概念 與開發流程.

Presentation on theme: "第 1 章 網站的概念 與開發流程."— Presentation transcript:

1 第 1 章 網站的概念 與開發流程

2 本章重點 1-1 網站與網頁的概念 1-2 網站開發的流程 1-3 製作網頁時的注意事項

3 1-1 網站與網頁的概念 網頁與首頁 (Home Page) 網站就是網頁的集合 網站是放在哪裡呢？ 申請網站空間

4 網頁與首頁 (Home Page) 我們透過瀏覽器在 WWW 上所看到的畫面, 即是所謂的「 網頁」（ Web Page）,而通常當我們進入一個網站時所看到的第一個網頁, 則通稱為該網站的「 首頁」 ,也就是常說的 「Home Page」。許多人都誤以為 Home Page 是指 WWW 上的所有網頁, 殊不知 Home Page 只是網站中的第一個網頁而已, 稱呼網頁應該以「 Web Page」較為恰當。

5 網頁與首頁 (Home Page) 首頁可以說是網站的門面, 其最重要的功能是提供整個網站的內容導覽, 以及最新消息的公佈, 以便讓瀏覽者一進入首頁, 就可以馬上看到最新的訊息, 並快速地找到感興趣的主題, 然後連結到另一個網頁, 觀看更詳細的內容。

6 網頁與首頁 (Home Page)

7 網站就是網頁的集合 什麼是「 網站」 呢？其實網站就是網頁的集合, 也就是說網站設計者把整個網站架構規劃好, 然後再分別製作各個網頁, 並讓網頁間彼此相連結, 使瀏覽網站的人都能連結到各個網頁來觀看網頁內容, 這樣的網頁架構就稱為「 網站」。 網站中的所有網頁, 是以連結的方式彼此連接起來, 不同的連接方式, 產生了不同的網站架構, 大略可分為兩類： 線性架構 樹狀架構

8 線性架構 每個網頁以直線方式連結起來, 網頁中只提供上一頁、下一頁、第一頁的連結, 類似投影片般一頁接著一頁地觀看。

9 線性架構

10 樹狀架構 類似樹狀伸展, 分「層」別類的架構, 網頁中會提供下一層所有網頁的連結, 你可以自由選擇要連結的下一層網頁。

11 樹狀架構

12 樹狀架構

13 網站是放在哪裡呢？ 網站是由許多網頁所組成, 每一個網頁都分別是一個檔案, 網頁中所包含的圖檔、聲音檔、影像檔...等也都是存在網站中, 因此你可能要問：網站要放在哪裡才可以讓大家都透過 Internet 看到呢？ 當網站製作好, 測試無誤後, 需要放到 Web 伺服器上, 如此一來, 全世界各地的瀏覽者才可以連到你的網站瀏覽。

14 網站是放在哪裡呢？ 那你需要架設一台 Web 伺服器嗎？如果是大型企業, 政府學術單位等, 負擔得起高額設備 (高等級的電腦主機與寬頻專線月租費用) 與人事費用的單位才需考慮自行架設；對一般中小企業、工作室、個人而言最省錢又有效率的方式, 就是向 ISP （Internet Service Provider 網路服務提供者） 申請「 虛擬伺服器」 (一般稱虛擬主機） 或是「附屬網站」 , 也就是在 ISP 所架設的 Web 伺服器上租一塊空間, 放置你的網站。

15 申請網站空間 那麼應該選擇申請 「虛擬伺服器」 還是 「附屬網站」 呢？這兩者的差別在於「 虛擬伺服器」 有獨立的 IP 以及經過註冊申請得來的網址。舉個例, 小美設計好一個網站, 然後向 Tacocity 這個網站空間提供者申請了網站空間, 其網址是 , 這就表示小美的網站是 『附屬網站』 , 放在 伺服器之下, 使用該伺服器的 IP, 也沒有獨立的網址, 而 digitalweb則是小美的網站在該伺服器裡存放的路徑。

16 申請網站空間

17 申請網站空間 附屬網站給人較不正式的印象, 若是中小企業的網站, 可以考慮申請虛擬伺服器,另外再請 ISP 分配給你一個獨立的 IP, 並代為申請一個具代表性的正式網址 (須付費) , 這樣瀏覽者一眼就可以從網址判斷該網站是屬於什麼公司。

18 申請網站空間

19 申請網站空間 不管是附屬網站或是虛擬伺服器,每一個網站不一定非得要是一台獨立的主機, 通常一台 ISP 的 Web 伺服器中可能包含了許多個網站。

20 申請網站空間 只要把網站所有的檔案上傳到你所申請的伺服器空間, 便可以讓全世界的朋友透過 Internet 一起分享。網路上有很多提供免費網站空間的地方, 讓個人可以輕輕鬆鬆擁有一個網站, 關於上傳網頁的說明, 我們會在第 10 章介紹。

21 1-2 網站開發的流程 除非是個人網站, 否則一般公司行號的網站開發工作, 不是一個人單打獨鬥就能完成的, 而是群體合作的結果, 即使實際負責網頁製作的只有一人, 參與的角色通常還包括主導網站開發的單位或是客戶, 還有美術繪圖人員、程式設計師等。為了能讓網站開發工作有效率的進行, 在此提供一份網站開發流程供你參考。

22 網站開發的流程

23 網站開發的流程 本書的範例網站也是依循此網站開發流程來製作, 接下來為你詳細說明開發流程的內容, 並將範例網站的實作過程提供出來, 以便讀者在對照之後可以加深了解。

24 網站開發的流程 規劃階段 施工藍圖 施工 維護更新

25 一、規劃階段 擬定網站功能與版本 資料蒐集與整理 繪製網站結構草圖 繪製網頁平面草稿 本階段範例網站的製作過程 建立網站檔案架構

26 1. 擬定網站功能與版本 建立網站的目的是什麼？希望網站提供什麼內容與功能？此網站版本要完成的階段目標？當你能夠完整回答以上三大問題, 就可以確定網站要呈現的面貌了。 網站的目的可以是為了銷售產品、建立形象、供應資訊, 或是提供遊戲娛樂。不同的網站目的會影響網站內容與功能的規劃方向, 若規劃的網站內容與功能很多, 會需要耗費較長的製作時間。為了顧及時效, 可以考慮將網站分階段完成, 先訂定目前階段的網站版本要完成哪些功能與內容。

27 擬定網站功能與版本 此階段需要所有參與網站製作的各個單位一起構思、討論, 最後取得共識, 才能確保往後的開發過程不會發生爭議, 能夠有效率的進行。

28 2. 資料蒐集與整理 當網站的內容擬定之後, 立即著手蒐集要放到網站上的資料, 資料可以是各種形式 (書面、圖片...), 無論什麼形式先蒐集起來再說, 然後才進一步對資料進行整理與篩選, 選出你所要的資料。

29 3. 繪製網站結構草圖 網站內容與蒐集資料確定之後, 可以繪製一張網站結構草圖, 將網站要有哪些網頁以及網頁的連結方式繪製出來。這個階段的重點在於網站中各網頁的瀏覽動線是否順暢, 記得要多多與其他參與人員討論網站結構草圖, 以取得一致的共識。

30 本階段範例網站的製作過程

31 4. 繪製網頁平面草稿 接著就可以開始在紙上繪製各網頁的平面草稿了。首頁要擺放的內容通常比較豐富, 所以設計可能較為複雜, 其餘各主題的網頁, 建議你可以根據網站結構, 讓同一層級、同一主題的網頁使用一致的平面設計, 以呈現出網站的整體性。 網頁的介面設計牽涉到視覺美感、使用哪些網頁元件、網頁技術的支援、操作是否便利、導覽流暢等重點, 是很重要的階段, 還是建議多與美術人員、程式設計師討論你的創意是否可行, 還有主導的單位或客戶是否接受你的設計, 或是有其他建議。

32 本階段範例網站的製作過程

33 5. 建立網站檔案架構 網頁的介面設計確定之後, 接著脫離紙上談兵過程, 開始實際在你的電腦上建立網站的資料夾與檔案的架構, 這時也是 Dreamweaver 該出場的時候。 你可以根據網站結構草圖與蒐集的資料, 將網站需要建立的資料夾與網頁, 製作成一張 『網站檔案架構表』。接著開啟 Dreamweaver, 利用檔案面板來定義一個網站, 並新增一定數量的網頁檔案和資料夾, 然後按照剛才的『 網站檔案架構表』 來替html 檔案及資料夾命名, 並依網站架構將有相關的網頁檔案移入子資料夾中。有關這部份的詳細操作, 請參考第 3 章的說明。

34 本階段範例網站的製作過程

35 本階段範例網站的製作過程

36 二、施工藍圖 製作網頁中所需的各項元件 本階段範例網站的製作過程 網頁版面設計製作 工作分配與網頁內容模組化

37 1. 製作網頁中所需的各項元件 施工的第一個步驟是將之前蒐集得來的資料, 轉化為網頁中可被辨認的檔案格式或可用的資料, 例如書面文字輸入成文字檔案, 平面圖案要掃描成圖檔等。再來是製作或蒐集網頁效果所需的影像圖檔、音效檔、動畫檔、視訊檔...等等網頁元件。

38 2. 網頁版面設計製作 這個階段是由美術人員依據網頁版面草稿, 利用影像處理軟體 (如 Photoshop、Fireworks 、PhotoImpact ), 以及繪圖軟體 (如 Illustrator、CorelDraw) 來進行網頁版面設計製作。此階段的重點是螢幕顯示範圍大小的設定, 若設定 800× 600 像素為最佳顯示範圍, 瀏覽器可顯示的網頁面積大約為 760× 420 像素 (須扣掉視窗標題列、網址列、捲軸、狀態列等的範圍, 才是網頁真正可顯示的範圍) , 那麼設計網頁平面稿時就要以此大小來製作 (這部分可參閱 2-3 節的說明)。

39 網頁版面設計製作 設計版面的另一項重點為整體網站的風格。所謂網站風格包含了網站的 Logo 設計、背景影像、配色等。以網頁配色為例, 如果網站主題或內容是要呈現專業的感覺,網頁主色就應該選用具穩定感的暗色系列；如果網站主題或內容是比較活潑, 則可以選擇較鮮豔的顏色。網頁配色或 Logo 設計等都是非常專業的一項工作, 對於初學網站設計的您來說, 建議可以參考相關的書籍, 或是多逛逛別人的網站, 從中學習並培養屬於自己的風格。

40 網頁版面設計製作

41 3. 工作分配與網頁內容模組化 當網頁元件蒐集齊全, 網頁版面設計稿也完成之後, 可以先找出要重複使用的介面先製作成範本 (Template), 這樣一來, 在製作同類型網頁時只要套用範本, 即可免去重複製作的程序, 專注於該網頁的內容主題製作 (有關範本說明可參閱第 15 章)。

42 工作分配與網頁內容模組化 如果網頁的實際施工製作是由多人合作進行的話, 則還要進行工作的分配以及針對多人開發所需的一些環境設定, 以防止檔案覆蓋。多人開發環境需要一台主機 (不一定要是伺服器, 只要是區域網路中的一台電腦即可) 用來放置網站, 並利用設計備註的功能來進行團體開發的工作溝通, 這部分可參閱第 11 章的說明。

43 三、施工 注意各程式及語法間的相容性 網站上傳

44 1. 注意各程式及語法間的相容性 實際製作網頁時, 要特別注意的是：並不是所有 Dreamweaver 提供的功能都可以在任何一個瀏覽器中看到相同的網頁效果。由於不同瀏覽器 (或不同瀏覽器的版本) 所支援的語法或功能會有些不同, 所以, 網頁完成之後還要注意相容性的問題。Dreamweaver 亦提供我們使用不同瀏覽器來檢視網頁的功能 (了解該瀏覽器是否支援網頁中所用的到語法), 此部份請參閱第 11-4 節的說明。

45 2. 網站上傳 製作好的網站, 經測試無誤後, 即可上傳到 Web 伺服器上。Dreamweaver 內建FTP 功能, 可以直接將網站的檔案上傳到伺服器, 相關說明請參閱第 10 章。

46 網站上傳

47 四、維護更新 將網站的檔案上傳到伺服器, 開放給 Internet 上各角落的人們來參觀瀏覽後, 網站的開發是不是就此結束呢？當然不是, 這只是網站生命的開始而已。請注意網站不是死的, 而是要不斷更新內容才能吸引人再次光臨, 所以資料再更新, 或是網站改版都是必須的。 運用 Dreamweaver 的遠端伺服器與本地端網站檔案同步化功能, 可以做為網站更新過程的管理工具（請參閱第 11 章, 會有更詳盡的說明）。

48 1-3 製作網頁時的注意事項 雖然還沒正式進入 Dreamweaver 編輯網頁, 不過在此還是得先提醒你一些製作網頁時的注意事項, 這樣才能讓整個網站的製作更臻完善。 不要讓瀏覽者等太久 選單要簡單、清楚 視覺設計 與瀏覽者的溝通

49 不要讓瀏覽者等太久 也許你還沒動手做過網頁, 不過應該也參觀過不少網站, 試想自己的瀏覽經驗, 當你興沖沖地開啟某個網站, 正期待這個網站會提供你什麼樣的資訊時, 卻苦等了 10幾、20 幾秒還沒下載完成, 這時候你是不是會想關閉瀏覽器或是先做其他事情再回頭來看網站內容。 所以當自己著手設計網站時, 也要注意不要讓瀏覽者等太久, 你可以儘量縮小網站中的圖片尺寸, 或是提高圖片的壓縮率、不要擺放太多動畫或是影片檔, 才不會讓觀看的人等太久。

50 選單要簡單、清楚 選單是整個網站的重要元件, 它可以讓瀏覽者了解整個網站的內容為何, 並引導瀏覽者從這個頁面進到其它頁面。選單的形式有很多種, 有文字選單、圖片選單、彈出式選單甚至是動畫式選單, 不論設計哪種選單, 最好都能有層次或是具結構性, 不要繞來繞去, 以免瀏覽者在網站中迷路。

51 選單要簡單、清楚

52 選單要簡單、清楚

53 視覺設計 設計網頁最重要的事, 就是能夠讓人一眼就看出設計者想要傳達什麼資訊, 除了事前的規劃工作要確實做好, 在網頁施工時, 也要注意以下幾點： 文字內容：文字的說明最好能簡單扼要, 如果文字量太多, 不妨先放一小段引言, 然後設計一個「所有內容」、「繼續閱讀」、「觀看更多」、…之類的超連結, 讓有興趣閱讀的人連到完整的網頁。

54 視覺設計

55 視覺設計 整體風格及配色：在製作網站前要想好整體的風格走向, 並挑選好主要的色系, 這樣可以讓瀏覽者知道, 目前觀看的內容還是在同一個網站中。

56 視覺設計

57 視覺設計 動畫不宜過多：在網頁中加入動畫最能吸引瀏覽者注意, 不過同一個網頁中最好不要擺放太多動畫, 試想每個動畫同時在閃動, 就會造成視覺干擾不知道該看哪個好。

58 與瀏覽者的溝通 在製作網站時, 最好能設計一個與瀏覽者溝通的網頁, 例如設置留言板、Q&A 頁面, 技術支援、…等, 尤其是商業網站更需要建置此類的網頁, 除了可以提供更好的服務外, 也能提升企業形象。否則最少也要在網頁中擺放 信箱的連結或是聯絡電話等相關訊息。

59 與瀏覽者的溝通