线性结构树状结构.PPT

網站的開發流程 本章提要 網站與網頁的概念 網站開發的流程 網站與網頁的概念 網頁與 Home Page 網站就是網頁的集合 網站的結構 網站是放在哪裡呢 申請網站空間 網頁與 Home Page 我們透過瀏覽器在 WWW 上所看到的畫面, 即是網頁 (Web Page), 而進入網站所看到的第一個網頁, 則通稱為該網站的首頁, 也就是「Home Page」。 首頁最重要的功能是提供整個網站的內容導覽, 以及公佈最新消息, 使瀏覽者一進入首頁即可看到最新的訊息, 並迅速地連結到感興趣的主題觀看內容。 網頁與 Home Page 網站就是網頁的集合 網站就是網頁的集合。 網站設計者把整個網站架構規劃好, 然後再分別製作各個網頁, 並讓網頁間彼此相連結, 使瀏覽網站的人都能連結到各個網頁來觀看網頁內容, 這樣的網頁架構就稱為網站。 網站的結構 網站中的所有網頁, 是以連結的方式彼此連接起來, 不同的連接方式, 產生了不同的網站結構, 大略可分為兩類： 線性結構 樹狀結構 線性結構 每個網頁以直線方式連結起來, 網頁中只提供上一頁、下一頁、第一頁的連結, 類似投影片般一頁接著一頁地觀看。 線性結構 樹狀結構 類似樹狀伸展, 分層別類的結構, 網頁中會提供下一層所有網頁的連結, 你可以自由選擇要連結的下一層網頁。 樹狀結構 網站是放在哪裡呢 除了每一個網頁分別是一個檔案外, 網頁中所包含的圖檔、聲音檔、影像檔...等也都是存在網站中。 當網站製作好, 測試無誤後, 就需要放到 Web 伺服器上, 如此全世界各地的瀏覽者才可以連到你的網站瀏覽。 網站是放在哪裡呢 大型企業, 政府學術單位等, 才需考慮自行架設 Web 伺服器。對於一般中小企業、個人而言, 最省錢又有效率的方式, 就是向 ISP (Internet Service Provider 網路服務提供者) 申請虛擬伺服器 (一般稱虛擬主機) 或是附屬網站。即在 ISP 所架設的 Web 伺服器上租一塊空間, 放置網站。 申請網站空間 虛擬伺服器與附屬網站的差別, 在於虛擬伺服器有獨立的 IP, 且是經過註冊申請得來的網址。 申請網站空間 例如小咪向 ISP 申請了網站空間, 網址是 /UserData/vinceyan , 表示該網站是附屬網站 , 放在 ISP 的 伺服器之下, 使用該伺服器的 IP, 也沒有獨立的網址, 而 /UserData/vinceyan 則是網站存放的路徑。 申請網站空間 申請網站空間 網站開發的流程 一、規劃階段 二、施工藍圖 三、施工 四、維護更新 網站開發的流程 除了個人網站, 一般網站開發的工作, 通常是群體合作的結果, 即使實際負責網頁製作的只有一人, 參與的角色可能還包括主導網站開發的單位或是客戶, 還有美術繪圖人員、程式設計師等。 網站開發的流程 網站開發的流程 一、規劃階段 擬定網站功能與版本 資料蒐集與整理 繪製網站結構草圖 繪製網頁平面草稿 建立網站檔案架構 1. 擬定網站功能與版本 為了顧及時效, 可考慮將網站分階段完成, 先訂定目前階段要完成的功能與內容。 2. 資料蒐集與整理 網站內容擬定後, 立即著手蒐集要放到網站上的資料, 然後對資料進行整理與篩選, 選出你所要的資料。 3. 繪製網站結構草圖 可繪製一張網站結構草圖, 將網站要有哪些網頁以及網頁的連結方式繪製出來。 4. 繪製網頁平面草稿 繪製各網頁的平面草稿。首頁的設計可能較為複雜, 其餘各主題的網頁, 建議你根據網站結構, 讓同一層級、同一主題的網頁使用一致的平面設計。 網頁設計牽涉到視覺美感、網頁元件、網頁技術支援等重點, 建議多與美術人員、程式設計師、主導單位及客戶討論。 4. 繪製網頁平面草稿 5. 建立網站檔案架構 將網站需要建立的資料夾與網頁, 製作成網站檔案架構表。檔案名稱最好使用英文小寫, 附檔名只有 3 個字母, 如 .htm 等, 一般 Web 伺服器支援的首頁檔名多半是 index.htm, 可詢問 ISP 業者來確定。 利用 Dreamweaver 網站面板定義網站, 並依網站檔案架構表建立網頁檔案和資料夾。 5. 建立網站檔案架構 5. 建立網站檔案架構 二、施工藍圖 製作網頁中所需的各項元件 網頁版面設計製作 工作分配與網頁內容模組化 1. 製作網頁中所需的各項元件 將資料轉化為網頁中可被辨認的檔案格式或可用的資料。 再製作或蒐集網頁效果所需的影像圖檔、音效檔、動畫檔、視訊檔...等等網頁元件。 2. 網頁版面設計製作 由美術人員依據網頁版面草稿, 利用影像處理軟體 (如 Photoshop、Fireworks), 以及繪圖軟體 (如 CorelDraw、Freehand) 來進行網頁版面設計製作。 這個階段的重點, 是設定螢