530 likes | 645 Views
網站的概念與開發流程. 講師 : 陳烱勳 Email: mikemousenana@gmail.com mikemouse@is.cs.nthu.edu.tw. 網站與網頁的基本概念. 「網頁」 -- Web Page 「首頁」 -- Home Page 網站的門面 提供整個網站的內容導覽 公佈最新消息. 網站. 網站就是網頁的集合 網站中的所有網頁彼此連結 線性架構 樹狀架構. 線性架構. 每個網頁以直線方式連結 , 明確地提供上一頁、下一頁及各頁次的連結 搜尋引擎、網路相簿、部落格、產品列表頁. 樹狀架構. 多會安排固定的連結導覽列.
E N D
網站的概念與開發流程 講師:陳烱勳 Email: mikemousenana@gmail.com mikemouse@is.cs.nthu.edu.tw
網站與網頁的基本概念 • 「網頁」-- Web Page • 「首頁」-- Home Page • 網站的門面 • 提供整個網站的內容導覽 • 公佈最新消息
網站 • 網站就是網頁的集合 • 網站中的所有網頁彼此連結 • 線性架構 • 樹狀架構
線性架構 • 每個網頁以直線方式連結, 明確地提供上一頁、下一頁及各頁次的連結 • 搜尋引擎、網路相簿、部落格、產品列表頁
樹狀架構 • 多會安排固定的連結導覽列
網站是放在哪裡呢? • 網路伺服器 • 如何架設網站伺服器 • 申請或租用「虛擬伺服器」 (或稱虛擬主機) • ISP (Internet Service Provider, 網路服務提供者), 或專門提供網站空間服務的公司 • 免費的網站空間 • TACOCITY:容量6MB • http://www.tacocity.com.tw
另一個免費空間-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
填入email 填入密碼 再次填入密碼 填入驗證碼
使用FTP連上免費空間 • FileZilla(免費軟體) • https://www.ohloh.net/projects/filezilla/download?filename=FileZilla_3.3.4.1_win32-setup.exe • CuteFTP(付費軟體)
擬定網站內容與目的 • 目的是什麼? • 希望網站提供什麼內容與功能? • 此網站要完成的目標? • 網站的目 • 銷售產品 • 建立形象 • 傳遞資訊 • 提供遊戲娛樂 • 社交…
規劃階段 • 此階段需要所有參與網站製作的各個單位一起構思、討論, 最後取得共識, 才能確保往後的開發過程不會發生爭議, 能有效率地進行。
資料收集與整理 • 當網站的內容擬定之後, 即可請相關企劃人員提供所需的書面文件, 並著手收集或製作要放到網站上的資料 • 文章 • 圖片 • 影片 • 音樂檔…等
規劃網站架構圖 • 訂出需求網頁 • 設定網頁的檔名 • 網頁的連結方式 • 檢視網站中各網頁的瀏覽動線是否順暢,記得要多多與其他參與人員討論網站架構草圖, 以取得共識。
繪製網頁平面草稿 • 接著就可以開始在紙上繪製各網頁的平面草稿了。首頁要擺放的內容通常比較豐富, 所以設計可能較為複雜,其餘各主題的網頁, 建議你可以根據網站結構, 讓同一層級、同一主題的網頁使用一致的平面設計, 以呈現出網站的整體性。 • 網頁的介面設計牽涉到視覺美感、使用的網頁素材和技術支援、操作便利、導覽流暢等重點, 是非常重要的階段, 建議多與美術人員、程式設計師等相關人員討論與確認可行性。
二、製作階段 • 網頁版面設計製作 • 根據網頁版面草稿, 利用影像處理軟體 (如 Photoshop、Fireworks、PhotoImpact), 或是繪圖軟體 (如 Illustrator、CorelDraw) 來進行網頁版面設計製作。 • 螢幕顯示範圍的設定 • 若設定最佳瀏覽解析度為 1024 x 768 像素,則瀏覽器實際可顯示的網頁面積約為 955 x 600 像素 (須扣掉視窗標題列、網址列、捲軸、狀態列等, 才是網頁真正可顯示的範圍), 那麼設計網頁平面稿時就要以此大小來製作。
若準備要製作的網頁內容較長, 在設計時可以只設定寬度 • 由於瀏覽器的種類及版本很多,每一種瀏覽器所看到的感覺都不同。 • 為了能兼顧所有瀏覽器, 建議你將背景底圖設計成可重複拼貼, 或是背景圖片的邊緣設計盡量能與背景底色相符, 以避免不自然的銜接情況。
網頁配色或版面設計等都是非常專業的工作, 對於初學網站設計的人來說, 建議可以參考坊間的設計書籍, 或是多觀摩網路上知名網站的配色與版型, 例如FWA (http://favouritewebsiteawards.com/)會定時推薦精彩酷炫的網頁設計作品, 你可從中學習並培養屬於自己的風格。
製作與歸納網頁所需的檔案 • 為了避免瀏覽者在開啟網頁時等太久, 通常會將設計好的完整網頁版面先切割成多個部份, 再分別壓縮、轉存為適合網頁的檔案格式;另外, 先前收集的各類圖檔、音效檔、動畫檔、…等, 也可開始根據版型的安排去進行設計及轉存的動作, 並加以分類歸納到資料夾中, 以便日後使用及管理。
使用 Dreamweaver 製作網頁 • 「網站定義」 • 將剛剛建立的網站資料夾的位置告訴 Dreamweaver, 以免日後製作網頁時發生檔案連結錯誤的問題。(第 4 章) • 定義好網站後, 即可開始著手製作網頁 • 由於不同瀏覽器 (或瀏覽器不同的版本) 所支援的語法或功能會有些差異, 用 Dreamweaver 製作的同一種效果, 在不同瀏覽器中可能會顯示出不同的結果, 因此製做網頁時需特別留意相容性的問題。
目前網路上較多人使用的瀏覽器有 IE (Internet Explorer)、Firefox、Safari 等, 如果你希望製做出來的網頁可以在大多數的瀏覽器中正常顯示, 建議可安裝多套不同瀏覽器實際測試網頁效果 (請參閱第 5-5 節, 會有更詳盡的說明)。
HTML的文字標籤 • <p> 代表「段落」 (Paragraph) ,其目的在於讓個個段落分明,使整個文章看起來整齊美觀 • < br> 代表「中斷」 (Break) ,其目的在強迫文字呈現於瀏覽器時,能夠切換到下一列。
範例 <html> <body> 此句話會從此<br> 斷開,就是因為加了<br> 的緣故。 <p> 這是新的一個段落,所以會和前面的文字隔開一列。 <p align=center> 這是靠中的段落。 <p align=right> 這是靠右的段落。 </body> </html>
若要顯示”<“或”>“ • “<“< • “>”> • 表頭(Heading)常用在強調文字的重要性,讓使用者可以透過不同的 Heading 來區分所在的章節。Heading 以 H1 字型最大,H6 字型最小,預設的 align(排列) 屬性是置左的
表頭(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>
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>
FONT V.S. HEADING • FONT 只會指定字體的大小以及顏色 (除非使用者另加一些標籤) • HEADING 卻會同時加粗字體且在其文字上下空白兩行