1 / 53

網站的概念與開發流程

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

fallon
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, 網路服務提供者), 或專門提供網站空間服務的公司 • 免費的網站空間 • TACOCITY:容量6MB • http://www.tacocity.com.tw

  7. 另一個免費空間-Free Web Hosting Area • 1000MB 儲存容量。 • 每日流量為 5GB。 • 試用期間沒有任何形式的廣告（好像要付錢才能移除） • 支援 mail(), GD2 library, php curl, php magickwand(support for ImageMagick), php sockets, php xml, xsl, php soap php pdo…等PHP（version: 5.2.9）函式，更多資訊可參考 PHP Info頁面。 • 支援 Zend Optimizer 和 Ioncube loader 技術。 • 無限制的 MySQL 資料庫（MySQL 版本為 5.0.77，可能隨時更新） • Joomla, phpBB3, SMF, WordPress…等網頁程式一鍵安裝。 • 【網站網址】http://www.freewebhostingarea.com/【註冊頁面】http://www.freewebhostingarea.com/【範例網站】http://single9.ueuo.com/【主機資訊】http://single9.ueuo.com/iphp

  8. 使用它所提供的網域名稱(subdomain)，填好你要的網址之後點選 PROCEED

  9. 填入email 填入密碼 再次填入密碼 填入驗證碼

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

  11. 安裝FileZilla client

  12. 新增站台

  13. 連線成功的畫面

  14. 網站開發的流程

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

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

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

  18. 規劃網站架構圖 • 訂出需求網頁 • 設定網頁的檔名 • 網頁的連結方式 • 檢視網站中各網頁的瀏覽動線是否順暢,記得要多多與其他參與人員討論網站架構草圖, 以取得共識。

  19. 繪製網頁平面草稿 • 接著就可以開始在紙上繪製各網頁的平面草稿了。首頁要擺放的內容通常比較豐富, 所以設計可能較為複雜,其餘各主題的網頁, 建議你可以根據網站結構, 讓同一層級、同一主題的網頁使用一致的平面設計, 以呈現出網站的整體性。 • 網頁的介面設計牽涉到視覺美感、使用的網頁素材和技術支援、操作便利、導覽流暢等重點, 是非常重要的階段, 建議多與美術人員、程式設計師等相關人員討論與確認可行性。

  20. 二、製作階段 • 網頁版面設計製作 • 根據網頁版面草稿, 利用影像處理軟體 (如 Photoshop、Fireworks、PhotoImpact), 或是繪圖軟體 (如 Illustrator、CorelDraw) 來進行網頁版面設計製作。 • 螢幕顯示範圍的設定 • 若設定最佳瀏覽解析度為 1024 x 768 像素,則瀏覽器實際可顯示的網頁面積約為 955 x 600 像素 (須扣掉視窗標題列、網址列、捲軸、狀態列等, 才是網頁真正可顯示的範圍), 那麼設計網頁平面稿時就要以此大小來製作。

  21. 若準備要製作的網頁內容較長, 在設計時可以只設定寬度 • 由於瀏覽器的種類及版本很多，每一種瀏覽器所看到的感覺都不同。 • 為了能兼顧所有瀏覽器, 建議你將背景底圖設計成可重複拼貼, 或是背景圖片的邊緣設計盡量能與背景底色相符, 以避免不自然的銜接情況。

  22. 網頁配色或版面設計等都是非常專業的工作, 對於初學網站設計的人來說, 建議可以參考坊間的設計書籍, 或是多觀摩網路上知名網站的配色與版型, 例如FWA (http://favouritewebsiteawards.com/)會定時推薦精彩酷炫的網頁設計作品, 你可從中學習並培養屬於自己的風格。

  23. 製作與歸納網頁所需的檔案 • 為了避免瀏覽者在開啟網頁時等太久, 通常會將設計好的完整網頁版面先切割成多個部份, 再分別壓縮、轉存為適合網頁的檔案格式；另外, 先前收集的各類圖檔、音效檔、動畫檔、…等, 也可開始根據版型的安排去進行設計及轉存的動作, 並加以分類歸納到資料夾中, 以便日後使用及管理。

  24. 使用 Dreamweaver 製作網頁 • 「網站定義」 • 將剛剛建立的網站資料夾的位置告訴 Dreamweaver, 以免日後製作網頁時發生檔案連結錯誤的問題。(第 4 章) • 定義好網站後, 即可開始著手製作網頁 • 由於不同瀏覽器 (或瀏覽器不同的版本) 所支援的語法或功能會有些差異, 用 Dreamweaver 製作的同一種效果, 在不同瀏覽器中可能會顯示出不同的結果, 因此製做網頁時需特別留意相容性的問題。

  25. 目前網路上較多人使用的瀏覽器有 IE (Internet Explorer)、Firefox、Safari 等, 如果你希望製做出來的網頁可以在大多數的瀏覽器中正常顯示, 建議可安裝多套不同瀏覽器實際測試網頁效果 (請參閱第 5-5 節, 會有更詳盡的說明)。

  26. HTML的文字標籤 • <p> 代表「段落」 (Paragraph) ，其目的在於讓個個段落分明，使整個文章看起來整齊美觀 • < br> 代表「中斷」 (Break) ，其目的在強迫文字呈現於瀏覽器時，能夠切換到下一列。

  27. 範例 <html> <body> 此句話會從此<br> 斷開，就是因為加了&lt;br&gt; 的緣故。 <p> 這是新的一個段落，所以會和前面的文字隔開一列。 <p align=center> 這是靠中的段落。 <p align=right> 這是靠右的段落。 </body> </html>

  28. 若要顯示”<“或”>“ • “<“&lt; • “>”&gt; • 表頭（Heading）常用在強調文字的重要性，讓使用者可以透過不同的 Heading 來區分所在的章節。Heading 以 H1 字型最大，H6 字型最小，預設的 align(排列) 屬性是置左的

  29. 表頭（Heading）範例 <html> <body> <h1 align="left">H1在左邊</h1> <h1 align="center">H1在中間</h1> <h1 align="right">H1在右邊</h1> <h2>H2較H1字型稍小</h2> <h3>H3較H2字型稍小</h3> <h4>H4較H3字型稍小</h4> <h5>H5較H4字型稍小</h5> <h6>H6是最小的</h6> </body> </html>

  30. FONT <FONT SIZE=1>size=1</FONT> <FONT SIZE=2>size=2</FONT> <FONT SIZE=3>size=3</FONT> <FONT SIZE=4>size=4</FONT> <FONT SIZE=5>size=5</FONT> <FONT SIZE=6>size=6</FONT> <FONT SIZE=7>size=7</FONT>

  31. FONT V.S. HEADING • FONT 只會指定字體的大小以及顏色 (除非使用者另加一些標籤) • HEADING 卻會同時加粗字體且在其文字上下空白兩行

More Related