1 / 47

基本概念與 網站的建構程序

基本概念與 網站的建構程序. 項目選擇. 結束. 網路基本概念和常用名詞. www 的一般瀏覽作業流程. Steps ：. 主從架構式 (Client-Server). (1) 這是自己的電腦，當我們在瀏覽器中輸入一個網址（ URL ）或按下一個超鏈結（ Hyperlink ）時，瀏覽器會送出一個要求到網路上，要求傳回網址中所指定的文件。

kishi
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. 基本概念與網站的建構程序

  2. 項目選擇 結束

  3. 網路基本概念和常用名詞

  4. www的一般瀏覽作業流程 Steps： 主從架構式(Client-Server) • (1)這是自己的電腦，當我們在瀏覽器中輸入一個網址（URL）或按下一個超鏈結（Hyperlink）時，瀏覽器會送出一個要求到網路上，要求傳回網址中所指定的文件。 • (2)這個要求會在網際網路(Internet)上傳送，根據網址所指定的位置，找到存有這份文件的 WWW伺服器（Server）。WWW伺服器是一台放有網頁檔案的電腦，它裡面有一個WWW Server的程式，這個程式是專門處理網頁資料和要求用的。 • (3)當這台伺服器（WWW Server）接收到要求，它便會檢查自己的電腦中是否有這份文件，如果有的話，伺服器就會將文件送出，這個文件就是HTML檔案。 • (4) HTML檔案會被送上網際網路，最後傳回到我們自己的電腦中。 • (5)瀏覽器接收到HTML文件，便會開始解讀HTML，將最後的結果呈現在螢幕上讓我們看到。 伺服器端電腦 客戶端電腦

  5. 範例： http://homework.wtuc.edu.tw/~jong/ http://homework.wtuc.edu.tw/~jong/

  6. 網頁的組成元素 • (1)HTML(HyperText Markup Language超文字標記語言) • (2)DHTML(Dynamic HTML) • (3)文字及影像(Text & Images) • (4)視訊(Video) • (5)動畫(Animation) • (6)音訊(Audio) • (7)其他：如Java Applet、Java Script、Active- X及Plug-in (1)文字 (2)圖片 (3)超連結 (4)其他

  7. HTML(HyperText Markup Language)

  8. 網路名詞解說 每一台電腦圖示代表一個區域網路(Local Area Net) • (一)Internet網際網路 • 將世界各地區的電腦網路連接在一起，成為一個全球性的網路，就稱為Internet。換言之，網際網路是各種電腦網路的總集合！

  9. Internet (國際網際網路)上所提供的服務 • 全球資訊網(WWW—World-Wide-Web) • 電子郵件(E_Mail) • 檔案傳輸(FTP—File Transfer Protocol) • 網路新聞論壇(Net News) • 電子佈告欄(BBS) • 遠端傳輸(Telnet) • 地鼠資料查詢系統(Gopher) • 其他

  10. (二)超文字(Hypertext 又稱超文件) • 乃是一種特殊的文字格式，在包含有超文字的文件中，超文字能夠將文件內容與其他的文件連結在一起，所以當使用者在閱讀此篇文件時，可以很輕鬆的連到其它相關的文件，並讀取相關文件中的資料。這種可以超越文件之間界限的連接方式，稱之為『超連結』。

  11. (三)WWW(World Wide Web)—全球資訊網 • 乃指一套可以用來瀏覽文字、圖像、聲音、視訊、動畫、虛擬實境等格式的多媒體系統。除了可瀏覽網頁外，還可下載檔案到電腦。 • (四)WWW Browser—瀏覽器 • 乃是用來瀏覽網際網路(WWW)中的各類資訊的一套軟體；簡言之，要能夠讀取WWW上所提供豐富的圖文等多媒體資訊，就必須藉助瀏覽器(WWW Browser) ，如IE、Netscape、Firefox…。

  12. (五)Web Page—網頁 • 一群相關的文字、圖片、音訊、視訊、動畫…等多媒體資料的集合。 • (六)Web Site—網站 • 一群具備相關性質的多個網頁的集合，利用超連結的設定，將這些網頁彼此連起來便形成一個網站。 • (七)Home Page—首頁 • 開啟一個網站後第一個顯示的網頁， 稱為網站的首頁。 • (八)Home Site—首站 • 開啟瀏覽器後第一個開啟的網站。 網頁基本元素： (1)文字 (2)影像 (3)超連結 (4)其他

  13. (九) Local Site—本地端網站 • 就是在自己電腦上所設計、儲存的網站；設計網站時，必須將所設計的各個網頁和素材儲存在自己的電腦的一個資料夾內，先在本機進行編輯、測試，待完成後再上傳到遠端伺服器上 供他人瀏覽。 • (十) Web Server--網站伺服器 • 乃是網站存放的地方，任何網站必須傳送到網站伺服器上才能為世界各地的瀏覽者透過覽器來閱讀，一台網站伺服器可同時包含多個網站。 • 做為網站伺服器的電腦通常必須24小時開啟。 • (十一)Remote Site—遠端網站 • 乃是傳送到網站伺服器內的網站。

  14. (十二)Hyperlink--超連結 • 為閱讀網頁的媒介，利用文字或圖片製作完成的超連結，可由一個網頁連結到另一個網頁或網站上。 • 超連結又分為兩種： • (1)內部超連結：即自己網站內部網頁間的連結 • (2)外部超連結：即連結到他人網站 • (十三)HTML—超文字標記語言 • 在瀏覽器上所看到的網頁格式、內容等係由HTML程式碼所設定顯示出來。亦即文字、圖片、及其他多媒體元件如何在網頁中顯示、版面的配置如何…等等，均由HTML程式碼所定義。 範例展示

  15. (十四)URL(Uniform Resource Locator) • 全球資源定址器, 由下列元件組成 • 通訊協定://主機位址[/路徑/檔案名稱] • (十五)HTTP—HyperText Transfer Protocol • 超文件傳輸協定：為www(全球資訊網)的通訊協定，可將HTML檔案(即網頁檔案)顯示在瀏覽器上。 • 例 http://www.isu.edu.tw/ • (十六)FTP—File Transfer Protocol • 網際網路上的檔案傳輸協定 • 例 http://ftp.isu.edu.tw/

  16. 網址和網站的類型

  17. 網址的分類 • (一)正式網址 • 有獨立IP位址的網站，例如 • http://www.isu.edu.tw或 http://140.127.180.1 • http://www.nsysu.edu.tw或 http://140.117.11.1 • (二)附屬網址—通常申請免費網站空間的網址均屬之 • 沒有獨立IP位址的網站，例如 • http://www.isu.edu.tw/interface/dept.php?dept_mno=03&dept_id=1

  18. 網站的類型-依網站目的區分 • (一)個人網站—以推銷自己為主要目的 • (二)公司網站—公司業務、產品的介紹 • (三)教育機關網站—學校組織、服務內容、最新消息... • (四)交友網站---線上聊天、遊戲、交友.. • (五)特性主題網站--例如明星、球星..等等的介紹網站

  19. 網頁１ 網頁２ 網頁３ 網頁４ 網頁５ 網站的類型-依網站架構區分 （一）線性結構網站 （二）樹狀及非線性結構網站 網站首頁 首頁 第一層連結 第二層連結

  20. 網站的開發流程

  21. 建立網站的程序 • (一)確定網站目的與定義本地端網站 • (二)蒐集/製作所需素材 • (三) 規劃網站架構： (1)連結架構 (2)資料夾結構 • (四)網頁內容的設計與測試 • (五)遠端網站(即伺服主機)的申請和網站的上傳 • (六)網站的宣傳和更新維護

  22. 網站建立的步驟圖示

  23. (Step 1) 確立網站主旨與擬訂網站主題 • 主題：埔里旅遊網 • 網站主旨： • 透過網際網路介紹埔里鎮的風土民情、主要旅遊景點的特色和名產。除文字外，輔以精美的景觀圖片、山林的萬籟之聲，以吸引全國各地民眾前來休閑，從而促進本地觀光旅遊事業與商機。

  24. (Step 2)擬訂網站的超連結架構圖 例一 網站標題 網站內部連結網頁

  25. (Step 2)擬訂網站超連結架構圖—續 例二

  26. (Step 3) 蒐集/製作所需的素材 網頁基本元素： (1)文字 (2)影像 (3)超連結 (4)其他 文字：歷史文獻/自行撰寫 圖片：靜、動態圖片、交通路線圖… 視訊：影片檔或攝影機錄製的影片 音效：實地錄製山林間的萬籟之聲 其他：如各類動畫檔案 ※在收集資料時須注意版權問題

  27. 【Step 4】擬訂本地端網站資料夾結構 • 主旨 • 為使網站結構清晰、建立容易和日後維護方便，本地端的網站通常可包含下列資料夾，其目的在將所蒐集、製作的各項素材分類儲存： • (1)html資料夾：儲存除首頁外的其餘網頁 • (2)images資料夾：儲存所有圖片，其下可依 圖檔性質再予分類 • (3)animation：存放各類型動畫檔案 • (4)multimedia：存放多媒體檔案，如影片、音效…

  28. (範例)擬訂本地端網站資料夾架構圖 網站根目錄例如D:\puli_net 功能: (1)網頁素材的分類管理 (2)便利網站的維護管理

  29. 【Step 5】設計每一網頁的版面及編輯頁面內容 功能表列 首頁文字 插入 圖片 首頁版面配置之一 提示訊息/網主/更新日期

  30. 範例一

  31. 首頁版面配置之二｜使用頁框分割畫面 網頁橫幅(Banner/Logo) 功能選單 首頁文字 圖片 提示訊息/網主/更新日期

  32. 範例二

  33. 範例三 以整張圖片作為網頁內容, 透過影像地圖的使用來設定連結

  34. 範例四 各類型網站首頁版面配置範例

  35. 【Step 6】網站的申請和上傳(遠端伺服器) • (1)免費網站：例如YAHOO_KIMO 、學校伺服器 • (2)付費網站：又分(a)主機代管 • (b)專線兩種

  36. 【Step 7】網站的宣傳 • (1)在各個搜尋網站登錄：如Yahoo_KIMO 、Google… • (2)到新聞群組中做廣告：即到NetNews新聞群組的留言 板發佈自己的網站網址 • (3)利用E-Mail • 【Step 8】網站的更新和維護 • 網站上傳後須隨時維護和更新，提供最新的內容。惟有不斷充實內容，才可吸引瀏覽者持續的光顧。

  37. 設計網站應注意之事項

  38. (一)資料夾、檔案的命名規則 • (1)由英文小寫字母組成，不宜以中文命名(考量伺服器所使用的作業系統) (2)除底線(_)和連接線(-)符號外，不可包含空白字元或其他標點符號 (3)首頁檔名：index.htm、default.htm、home.htm (4)將不同屬性的檔案，例如影像檔、聲音檔、動畫檔、 HTML檔,…等在網 站下分別建立資料夾，分門別類儲存 • (二)不同瀏覽器的觀看效果—Internate Explorer及NetscapeCommunicator。 • (三)網路的傳輸速度，避免使單一網頁的容量太大，影響傳輸度。 • (四)螢幕解析度，目前以800x600及1024x768的解析度較為常見。 • (五)色彩顯示，儘量以256色的圖形為主。 • (六)不可侵犯他人版權、不可製作或連結色情網站

  39. FrontPage 2003簡介(一) • (1)所見即所得的網頁文件編輯方式 • (2)具有多樣的網頁和網站範本(Template)，可快速建立網站 • (3)具備完善的網站檢視模式，便利網頁的編輯和網站的管理 • (4)具備多樣的佈景主體，可增加網站的美觀效果 • (5)具備製作網頁相簿的功能

  40. FrontPage 2003簡介(二) • (6)具備中文簡、繁體轉換功能 • (7)Share Team Service的功能(大型網站的編輯團隊/小組) • (8)具備網站發佈功能(即上傳功能) • (9)具備多種Web元件，例如跑馬燈、動態按鈕、橫幅廣告管理員…. ，可使網頁更加生動 • (10) FrontPage_2003 的工作環境

  41. 編輯多媒體網頁所須的輔助工具軟體 • (一)影像編輯軟體—如PhotoImpact、PhotoShop.. • (二)動畫編輯軟體---如Ulead Cool 3D、Flash、Ulead GIF Animator…. • (三)音效編輯軟體---如CDex、CoolEdit 2000、Goldwvave…. • (四)視訊編輯軟體---如Movie Maker、iFilmEdit、Ulead Video Studio、Ulead Media Studio、PowerDirector、Premiere….. • (五)其他

  42. 網站的上傳/下載 • 方法有二： • (一)使用 FreeFTP、CuteFTP…等傳輸軟體 • (二)使用FrontPage本身的上傳/下載功能 • 主功能表的【檔案】-【發送Web..】

  43. 使用CuteFTP上傳/下載網站 • (1)開啟 CuteFTP應用程式 2、在此設定網站伺服器的名稱、網址、自己的帳號、密碼 1、點按 New鈕 3、按下 Connect 鈕，連線遠端的網站伺服器

  44. (2)連線成功後顯示如下視窗： 遠端網站內容 本地端網站內容

  45. (3)在左邊的「本地端網站」窗格中，切換到本地端電腦中網站所在的資料夾。(3)在左邊的「本地端網站」窗格中，切換到本地端電腦中網站所在的資料夾。 • (4)選取本地端網站所有內容。 • (5)點按工具列上的上傳鈕(向上箭號) ，即開始上傳所選取的檔案或資料夾。 刪除檔案 重新連線 下載檔案 上傳檔案 網站管理 中斷連線

  46. (6)上傳完成後，右邊窗即顯示遠端網站的內容，如下圖所示：(6)上傳完成後，右邊窗即顯示遠端網站的內容，如下圖所示： 遠端網站的內容

  47. (7)若要將遠端網站的內容下載到本地端電腦，則在左邊窗格中切換到要存放檔案的資料夾路徑，而右邊窗格則為連線的遠端網站(7)若要將遠端網站的內容下載到本地端電腦，則在左邊窗格中切換到要存放檔案的資料夾路徑，而右邊窗格則為連線的遠端網站 • (8)從遠端網站窗格中選取要下載的檔案/資料夾 • (9)點按工具列上的「下載」鈕，如下圖： 3、點按「下載」鈕 1、設定要存放下載檔案的路徑 2、在此窗格中選取要下載的檔案/資料夾；若要下載所有檔案，則選取全部內容

More Related