1 / 63

網站的概念與開發流程

網站的概念與開發流程. 講師 : 陳烱勳 Email: mikemousenana@gmail.com mikemouse@is.cs.nthu.edu.tw. 網站與網頁的基本概念. 「網頁」 -- Web Page 「首頁」 -- Home Page 網站的門面 提供整個網站的內容導覽 公佈最新消息. 網站. 網站就是網頁的集合 網站中的所有網頁彼此連結 線性架構 樹狀架構. 線性架構. 每個網頁以直線方式連結 , 明確地提供上一頁、下一頁及各頁次的連結 搜尋引擎、網路相簿、部落格、產品列表頁. 樹狀架構. 多會安排固定的連結導覽列.

lana-mccall
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. 網站的概念與開發流程 講師:陳烱勳 Email: mikemousenana@gmail.com mikemouse@is.cs.nthu.edu.tw

  2. 網站與網頁的基本概念 • 「網頁」-- Web Page • 「首頁」-- Home Page • 網站的門面 • 提供整個網站的內容導覽 • 公佈最新消息

  3. 網站 • 網站就是網頁的集合 • 網站中的所有網頁彼此連結 • 線性架構 • 樹狀架構

  4. 線性架構 • 每個網頁以直線方式連結, 明確地提供上一頁、下一頁及各頁次的連結 • 搜尋引擎、網路相簿、部落格、產品列表頁

  5. 樹狀架構 • 多會安排固定的連結導覽列

  6. 網站是放在哪裡呢？ • 網路伺服器 • 如何架設網站伺服器 • 申請或租用「虛擬伺服器」 (或稱虛擬主機) • ISP (Internet Service Provider, 網路服務提供者), 或專門提供網站空間服務的公司 • 免費的網站空間 • 自行建立IIS Server • 須考量上傳頻寬 • 需較高花費(因為server不能關機，電費是一個考量重點)

  7. 不同功能的網站分類 • 網站會因設計者不同的需求與定位，而產生各類不同風格與內容的網頁，我們將其分成下列幾個類別，供您製作網站時參考。 • 入口網站 • 網路資訊入口，主要提供新聞、搜尋引擎、聊天室、電子佈告欄(BBS)、電子商務、電子信箱、免費網頁等服務。使用者必須先進這個入口，才能進一步瀏覽資訊內容。

  8. 不同功能的網站分類 • 資訊服務網 • 提供各種資訊服務，常見的有新聞、股市、氣象、娛樂、運動、理財等，幾乎包含生活中需要的資訊與生活常識，同時也提供詞彙搜尋引擎。這類的服務網，必須掌握即時、快速、正確，而且要每天更新。 • 線上百科全書 • 提供各種知識，包括：科學、自然、宗教、歷史、地理、網路、專有名詞、公司行號、人物、人文等。只要輸入關鍵字，點選搜尋鍵，就能找到相關的資料。這類的網站必須具備龐大的資料庫及伺服器，同時還要提供不同的語言版本。以 維基百科 為例，它是非商業型的網站，由基金會支持運作，提供近百個國家的語文查閱，內容已超過11 萬條的中文條目，而且陸續增加中。

  9. 不同功能的網站分類 • 搜尋引擎網 • 同樣提供各類資料的搜尋，但它是以商業經營的形式生存。拉里. 佩奇和謝爾蓋. 布休二位史丹福大學的肄業生，在1998 年共同創立了Google 網站後，快速的網頁搜尋方式，獲得大家的信任。 • 購物拍賣網站 • 集合各類產品或二手物品，登錄在網頁中，供人上網競標購買。例如：e-bay 是專業型的拍賣網站，讓消費者與消費者之間商品的買賣，呈現在網路平台中。

  10. 1-1-2 不同功能的網站分類 • 部落格(Blog) • 這類型網站最符合個人化的表現，它以網頁的方式，做專輯式的整理，內容包含旅遊報導、相片專輯，或是評論各自的看法。有系統的整理，還可以出版電子報，提供專業資訊，供人訂閱。如何設定個人的部落格呢？請進入雅虎部落格的網站(http://tw.blog.yahoo.com) 裡面有非常詳細的介紹與說明。

  11. 使用FTP連上免費空間 • FileZilla(免費軟體) • https://www.ohloh.net/projects/filezilla/download?filename=FileZilla_3.3.4.1_win32-setup.exe • CuteFTP(付費軟體)

  12. 安裝FileZilla client

  13. 新增站台

  14. 連線成功的畫面

  15. Dreamweaver CS4 的操作環境介紹 • Dreamweaver 提供了一個彈性的環境，讓使用者可以搭配使用各種不同的網頁文件。進入 Dreamweaver 軟體首先看到的是歡迎畫面，開啟文件後就可瀏覽整個操作環境。

  16. Dreamweaver 的環境介紹 一、 歡迎畫面的使用 • 每次啟動 Dreamweaver 沒有開啟任何文件時都會顯示歡迎畫面，在上面可以快速開啟最近開啟過的檔案或新增文件。 Dreamweaver CS4的歡迎畫面。請選按 新增 的 HTML開啟一個全新的檔案，以方便等一下的解說。

  17. 操作環境的介紹 • 以下是 Dreamweaver CS4 的操作環境，使用預設的 設計師 使用介面來進行介紹，如果您的介面與我們不同，請比對參考：

  18. Dreamweaver 說明 相關資料的連結。 Dreamweaver各項功能說明 新增功能說明 如何擴充Dreamweaver 功能 Spry 架構 ColdFusion 的說明 Dreamweaver CS4 的輔助說明

  19. Dreamweaver CS4 輔助說明 • 網頁文件 • 說明 \Dreamweaver說明會開啟說明文件網頁視窗。 Dreamweaver說明文件畫面，將 Dreamweaver CS4使用說明分成幾個重要的項目，放置在視窗左方。只要針對所需要的資訊來選按，即會在視窗右方出現相關說明與內容。

  20. 搜尋 功能 明確詢問主題 中文化的說明檔 Dreamweaver 主說明檔中靈活的利用目錄、索引及搜尋功能。

  21. Dreamweaver CS4 官方網站資源 • 說明 • Dreamweaver 說明 • Dreamweaver 交流中心 • Dreamweaver 支援中心 • Adobe 線上討論區 • 將官方網站中的線上資源都整理在此，不僅有最新的教材、文件，甚至有全世界的使用者交流文件與Adobe 工程師的經驗分享。

  22. 操作秘技與重點叮嚀 • 針對初次使用 Dreamweaver 這套軟體的使用者，整理出幾項秘技，讓操作與學習的過程更為順暢 • 關閉或重新使用歡迎畫面

  23. 關閉或重新使用歡迎畫面

  24. 再次進入 Dreamweaver 時，歡迎畫面便不會自動開啟了！若要重新顯示該畫面可以依下述步驟進行設定：

  25. 改變工作區的配置方式 • Dreamweaver CS4 根據使用者習慣的不同，設計了多種工作區的配置，無論是美工人員或是程式設計師都有特殊的工作區配置，甚至能設計屬於自己的工作區配置，在儲存後供人使用。 1. 可以由視窗右上角選按切換鈕或是由功能表列 視窗 \ 工作區版面 選取要使用的工作區配置方式即可。 2. 如果對於目前的工作區配置方式十分滿意，可以由功能表列 視窗 \ 工作區版面 \ 新增工作區 將目前的配置儲存起來。 3. 如果對於自訂並儲存的版面想要執行更名、刪除等動作，可由功能表列 視窗 \ 工作區版面 \ 管理工作區版面 進行管理動作。

  26. 設定預設的副檔名及編碼方式 • 如果沒有特別設定過，Dreamweaver CS4 開啟新檔案時預設的副檔名為 「.html」，編碼方式為 「Unicode (UTF-8)」。

  27. 請選按功能表列 編輯 \ 偏好設定 開啟 偏好設定 對話方塊，選按 分類：新文件。 輸入 預設副檔名：「.htm」。 選按 預設編碼：繁體中文(Big5)。如此即可設定預設的編碼方式為繁體中文，讓網頁避免出現亂碼的情況。相同的，如果想要撰寫其他語系的網頁，可以調整預設編碼中的選項即可完成。

  28. 網站開發的流程

  29. 規劃階段 • 根據使用者之需求，所有參與網站製作的各個單位一起構思、討論, 最後取得共識, 才能確保往後的開發過程不會發生爭議, 能有效率地進行。

  30. 擬定網站內容與目的 • 希望網站提供什麼內容與功能？ • 此網站要完成的目標？ • 網站目的 • 銷售產品 • 建立形象 • 傳遞資訊 • 提供遊戲娛樂 • 社交…

  31. 資料收集與整理 • 當網站的內容擬定之後, 即可請相關企劃人員提供所需的書面文件, 並著手收集或製作要放到網站上的資料 • 文章 • 圖片 • 影片 • 音樂檔…等

  32. 規劃網站架構圖 • 訂出需求網頁 • 設定網頁的檔名 • 網頁的連結方式 • 網頁的瀏覽動線

  33. 二、製作階段 • 網頁版面設計製作 • 影像處理軟體 • Photoshop、Fireworks、PhotoImpact • 繪圖軟體 • Illustrator、CorelDraw • 螢幕顯示範圍的設定 • Notebook • PC • Smart phone(智慧型手機), pad(平板電腦)

  34. 網頁內容較長只設定寬度 • 不同瀏覽器解析網頁的功能皆不相同 • 背景底圖設計成可重複拼貼 • 背景圖片的邊緣設計與背景底色相符

  35. 網頁配色 • 版面設計 • 參考坊間的設計書籍 • 觀摩網路上知名網站的配色與版型, • 例如FWA(http://favouritewebsiteawards.com/) • 會定時推薦精彩酷炫的網頁設計作品, 你可從中學習並培養屬於自己的風格。

  36. 製作與歸納網頁所需的檔案 • 設計好的完整網頁版面先切割成多個部份, 再分別壓縮、轉存為適合網頁的檔案格式 • 將各類圖檔、音效檔、動畫檔、…等分類歸納到相對應資料夾中

  37. 使用 Dreamweaver 製作網頁 • 「網站定義」(chapter 4) • 避免日後製作網頁時發生檔案連結錯誤的問題。 • 製作網頁 • Dreamweaver 製作的相同程式碼, 在不同瀏覽器中可能會顯示出不同的結果 • 由於不同瀏覽器 (或瀏覽器不同的版本) 所支援的語法或功能會有些差異, 用 Dreamweaver 製作的同一種效果, 在不同瀏覽器中可能會顯示出不同的結果, 因此製做網頁時需特別留意相容性的問題。

More Related