網站的開發流程 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "網站的開發流程 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 網站的開發流程 著作權所有 © 旗標出版股份有限公司

2 本章提要 網站與網頁的概念 網站開發的流程

3 網站與網頁的概念 網頁與 Home Page 網站就是網頁的集合 網站的結構 網站是放在哪裡呢 申請網站空間

4 網頁與 Home Page 我們透過瀏覽器在 WWW 上所看到的畫面, 即是網頁 (Web Page), 而進入網站所看到的第一個網頁, 則通稱為該網站的首頁, 也就是「Home Page」。 首頁最重要的功能是提供整個網站的內容導覽, 以及公佈最新消息, 使瀏覽者一進入首頁即可看到最新的訊息, 並迅速地連結到感興趣的主題觀看內容。

5 網頁與 Home Page

6 網站就是網頁的集合 網站就是網頁的集合。 網站設計者把整個網站架構規劃好, 然後再分別製作各個網頁, 並讓網頁間彼此相連結, 使瀏覽網站的人都能連結到各個網頁來觀看網頁內容, 這樣的網頁架構就稱為網站。

7 網站的結構 網站中的所有網頁, 是以連結的方式彼此連接起來, 不同的連接方式, 產生了不同的網站結構, 大略可分為兩類： 線性結構 樹狀結構

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

9 線性結構

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

11 樹狀結構

12 網站是放在哪裡呢 除了每一個網頁分別是一個檔案外, 網頁中所包含的圖檔、聲音檔、影像檔...等也都是存在網站中。
當網站製作好, 測試無誤後, 就需要放到 Web 伺服器上, 如此全世界各地的瀏覽者才可以連到你的網站瀏覽。

13 網站是放在哪裡呢 大型企業, 政府學術單位等, 才需考慮自行架設 Web 伺服器。對於一般中小企業、個人而言, 最省錢又有效率的方式, 就是向 ISP (Internet Service Provider 網路服務提供者) 申請虛擬伺服器 (一般稱虛擬主機) 或是附屬網站。即在 ISP 所架設的 Web 伺服器上租一塊空間, 放置網站。

14 申請網站空間 虛擬伺服器與附屬網站的差別, 在於虛擬伺服器有獨立的 IP, 且是經過註冊申請得來的網址。

15 申請網站空間 例如小咪向 ISP 申請了網站空間, 網址是 , 表示該網站是附屬網站 , 放在 ISP 的 伺服器之下, 使用該伺服器的 IP, 也沒有獨立的網址, 而 /UserData/vinceyan 則是網站存放的路徑。

16 申請網站空間 附屬網站總是給人不正式的印象, 若是中小企業的網站, 則可申請虛擬伺服器, 也就是請 ISP 分配一個獨立的 IP, 並代為申請一個具代表性的正式網址。

17 申請網站空間

18 網站開發的流程 一、規劃階段 二、施工藍圖 三、施工 四、維護更新

19 網站開發的流程 除了個人網站, 一般網站開發的工作, 通常是群體合作的結果, 即使實際負責網頁製作的只有一人, 參與的角色可能還包括主導網站開發的單位或是客戶, 還有美術繪圖人員、程式設計師等。

20 網站開發的流程

21 網站開發的流程

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

23 1. 擬定網站功能與版本 為了顧及時效, 可考慮將網站分階段完成, 先訂定目前階段要完成的功能與內容。

24 2. 資料蒐集與整理 網站內容擬定後, 立即著手蒐集要放到網站上的資料, 然後對資料進行整理與篩選, 選出你所要的資料。

25 3. 繪製網站結構草圖 可繪製一張網站結構草圖, 將網站要有哪些網頁以及網頁的連結方式繪製出來。

26 4. 繪製網頁平面草稿 繪製各網頁的平面草稿。首頁的設計可能較為複雜, 其餘各主題的網頁, 建議你根據網站結構, 讓同一層級、同一主題的網頁使用一致的平面設計。 網頁設計牽涉到視覺美感、網頁元件、網頁技術支援等重點, 建議多與美術人員、程式設計師、主導單位及客戶討論。

27 4. 繪製網頁平面草稿

28 5. 建立網站檔案架構 將網站需要建立的資料夾與網頁, 製作成網站檔案架構表。檔案名稱最好使用英文小寫, 附檔名只有 3 個字母, 如 .htm 等, 一般 Web 伺服器支援的首頁檔名多半是 index.htm, 可詢問 ISP 業者來確定。 利用 Dreamweaver 網站面板定義網站, 並依網站檔案架構表建立網頁檔案和資料夾。

29 5. 建立網站檔案架構

30 5. 建立網站檔案架構

31 二、施工藍圖 製作網頁中所需的各項元件 網頁版面設計製作 工作分配與網頁內容模組化

32 1. 製作網頁中所需的各項元件 將資料轉化為網頁中可被辨認的檔案格式或可用的資料。
再製作或蒐集網頁效果所需的影像圖檔、音效檔、動畫檔、視訊檔...等等網頁元件。

33 2. 網頁版面設計製作 由美術人員依據網頁版面草稿, 利用影像處理軟體 (如 Photoshop、Fireworks), 以及繪圖軟體 (如 CorelDraw、Freehand) 來進行網頁版面設計製作。 這個階段的重點, 是設定螢幕顯示的範圍大小, 若設定為 800×600 像素, 瀏覽器可顯示的網頁面積大約 760×420 像素, 那麼設計網頁平面稿時就要以此大小來製作 。

34 2. 網頁版面設計製作

35 3. 工作分配與網頁內容模組化 當網頁元件蒐集齊全, 網頁版面設計稿也完成之後, 先找出可重複使用的介面設計與網頁元件, 製作成樣版 (Template) 及圖庫 (Library)。 套用樣版可免去重複製作的程序, 專注於該網頁的內容製作。而重複出現的網頁元件, 可從圖庫中直接拉曳出來使用, 不必再重新製作一次。

36 3. 工作分配與網頁內容模組化 如果網站是由多人合作, 還要進行工作的分配, 並針對多人開發完成環境設定, 以防止檔案覆蓋。多人開發環境需要一台主機用來放置網站, 並利用設計備註來進行團體開發的工作溝通。

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

38 1. 注意各程式及語法間的相容性 網頁的相容性問題, 包括在網頁中使用如 Word、FrontPage 製作的 HTML 文件, 若有多餘無謂的程式碼, Dreamweaver 清除多餘程式碼功能即可解決。 不同瀏覽器以及新舊版本的相容問題。可在網頁中加入 Script 程式, 以設定瀏覽器種類與版本, 以免運用到不支援的網頁技術。

39 2. 網站上傳 製作好的網站, 經測試無誤後, 即可上傳到 Web 伺服器上。Dreamweaver 內建 FTP 功能, 可以直接將網站的檔案上傳到伺服器。

40 2. 網站上傳

41 四、維護更新 資料更新：將網站的檔案上傳到伺服器, 開放給 Internet 上的人們來參觀瀏覽後, 要不斷更新內容才能吸引人再次光臨, 所以資料再更新, 或是網站改版都是必須的。運用 Dreamweaver 的遠端伺服器與本地端網站檔案同步化功能, 可做為網站更新過程的管理工具。