網站的概念與開發流程 講師 : 陳烱勳 email:...
Post on 21-Dec-2015
235 views
TRANSCRIPT
網站與網頁的基本概念 「網頁」 -- 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 Ima
geMagick), 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
使用它所提供的網域名稱 (subdomain) ，填好你要的網址之後點選 PROCEED
填入 email
填入密碼
再次填入密碼
填入驗證碼
使用 FTP 連上免費空間 FileZilla( 免費軟體 )
https://www.ohloh.net/projects/filezilla/download?filename=FileZilla_3.3.4.1_win32-setup.exe
CuteFTP( 付費軟體 )
安裝 FileZilla client
新增站台
連線成功的畫面
網站開發的流程
擬定網站內容與目的 目的是什麼？ 希望網站提供什麼內容與功能？ 此網站要完成的目標？ 網站的目
銷售產品 建立形象 傳遞資訊 提供遊戲娛樂 社交…
規劃階段 此階段需要所有參與網站製作的各個單位一起構思、討論 , 最後取得共識 , 才能確保往後的開發過程不會發生爭議 , 能有效率地進行。
資料收集與整理 當網站的內容擬定之後 , 即可請相關企劃人員提供所
需的書面文件 , 並著手收集或製作要放到網站上的資料
文章 圖片 影片 音樂檔…等
規劃網站架構圖 訂出需求網頁 設定網頁的檔名 網頁的連結方式
檢視網站中各網頁的瀏覽動線是否順暢 ,記得要多多與其他參與人員討論網站架構草圖 , 以取得共識。
繪製網頁平面草稿 接著就可以開始在紙上繪製各網頁的平面草稿了。首頁要擺放的內容通常比較豐富 , 所以設計可能較為複雜 ,其餘各主題的網頁 , 建議你可以根據網站結構 , 讓同一層級、同一主題的網頁使用一致的平面設計 , 以呈現出網站的整體性。
網頁的介面設計牽涉到視覺美感、使用的網頁素材和技術支援、操作便利、導覽流暢等重點 , 是非常重要的階段 , 建議多與美術人員、程式設計師等相關人員討論與確認可行性。
二、製作階段1. 網頁版面設計製作 根據網頁版面草稿 , 利用影像處理軟體 (如
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&
gt; 的緣故。 <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 卻會同時加粗字體且在其文字上下空白兩行
HR 水平線
<HR width=“50%”> 長度是視窗寬度一半的水平線
<HR size=10> 粗細大小是 10 的水平線
<HR noshade size=10> 無陰影且粗細大小是 10 的水平線
<HR align=right width="70%" size=4> 置右且長度是視窗寬度 70% 、粗細大小是 4 的水平線
marquee 標籤 可以達到「跑馬燈」的效果 <html> <head> <title>跑馬燈 </title> </head> <body> <marquee direction=left bgcolor="#ff9999" behavior=scroll scrollamount=10 scrolldelay=1
00>嗨！我是一號跑馬燈 </marquee> <marquee direction=right bgcolor="#99ff99" behavior=slide scrollamount=20 scrolldelay=1
00>Hello！我是二號跑馬燈 </marquee> <marquee direction=left bgcolor="#9999ff" behavior=alternate scrollamount=30 scrolldelay
=100>嘿嘿！我是三號跑馬燈 </marquee> </body> </html>