Transcript 網頁版面設計製作
網站的概念與開發流程 講師:陳烱勳 Email: [email protected] [email protected] 網站與網頁的基本概念 「網頁」-- 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 使用它所提供的網域名稱 (subdomain)，填好你要的網址之 後點選 PROCEED 填入email 填入密碼 再次填入密碼 填入驗證碼 使用FTP連上免費空間 FileZilla(免費軟體) https://www.ohloh.net/projects/filezilla/downlo ad?filename=FileZilla_3.3.4.1_win32-setup.exe CuteFTP(付費軟體) 安裝FileZilla client 新增站台 連線成功的畫面 網站開發的流程 擬定網站內容與目的 目的是什麼？ 希望網站提供什麼內容與功能？ 此網站要完成的目標？ 網站的目 銷售產品 建立形象 傳遞資訊 提供遊戲娛樂 社交… 規劃階段 此階段需要所有參與網站製作的各個單位一起 構思、討論, 最後取得共識, 才能確保往後的開 發過程不會發生爭議, 能有效率地進行。 資料收集與整理 當網站的內容擬定之後, 即可請相關企劃人員提供所需 的書面文件, 並著手收集或製作要放到網站上的資料 文章 圖片 影片 音樂檔…等 規劃網站架構圖 訂出需求網頁 設定網頁的檔名 網頁的連結方式 檢視網站中各網頁的瀏覽動線是否順暢,記得 要多多與其他參與人員討論網站架構草圖, 以取得共識。 繪製網頁平面草稿 接著就可以開始在紙上繪製各網頁的平面草稿 了。首頁要擺放的內容通常比較豐富, 所以設 計可能較為複雜,其餘各主題的網頁, 建議你可 以根據網站結構, 讓同一層級、同一主題的網 頁使用一致的平面設計, 以呈現出網站的整體 性。 網頁的介面設計牽涉到視覺美感、使用的網頁 素材和技術支援、操作便利、導覽流暢等重點, 是非常重要的階段, 建議多與美術人員、程式 設計師等相關人員討論與確認可行性。 二、製作階段 網頁版面設計製作 根據網頁版面草稿, 利用影像處理軟體 (如 Photoshop、Fireworks、PhotoImpact), 或是繪 圖軟體 (如 Illustrator、CorelDraw) 來進行網 頁版面設計製作。 螢幕顯示範圍的設定 1. 若設定最佳瀏覽解析度為 1024 x 768 像素,則瀏覽 器實際可顯示的網頁面積約為 955 x 600 像素 (須 扣掉視窗標題列、網址列、捲軸、狀態列等, 才是 網頁真正可顯示的範圍), 那麼設計網頁平面稿時 就要以此大小來製作。 若準備要製作的網頁內容較長, 在設計時 可以只設定寬度 由於瀏覽器的種類及版本很多，每一種 瀏覽器所看到的感覺都不同。 為了能兼顧所有瀏覽器, 建議你將背景底 圖設計成可重複拼貼, 或是背景圖片的邊 緣設計盡量能與背景底色相符, 以避免不 自然的銜接情況。 網頁配色或版面設計等都是非常專業的 工作, 對於初學網站設計的人來說, 建議 可以參考坊間的設計書籍, 或是多觀摩網 路上知名網站的配色與版型, 例如 FWA (http://favouritewebsiteawards.com/)會定時 推薦精彩酷炫的網頁設計作品, 你可從中 學習並培養屬於自己的風格。 製作與歸納網頁所需的檔案 為了避免瀏覽者在開啟網頁時等太久, 通常會將設計好的完整網頁版面先切割 成多個部份, 再分別壓縮、轉存為適合 網頁的檔案格式；另外, 先前收集的各 類圖檔、音效檔、動畫檔、…等, 也可 開始根據版型的安排去進行設計及轉存 的動作, 並加以分類歸納到資料夾中, 以 便日後使用及管理。 使用 Dreamweaver 製作網頁 「網站定義」 將剛剛建立的網站資料夾的位置告訴 Dreamweaver, 以免日後製作網頁時發生檔案連結錯誤的問題。(第 4 章) 定義好網站後, 即可開始著手製作網頁 由於不同瀏覽器 (或瀏覽器不同的版本) 所支援的語 法或功能會有些差異, 用 Dreamweaver 製作的同一 種效果, 在不同瀏覽器中可能會顯示出不同的結果, 因此製做網頁時需特別留意相容性的問題。 目前網路上較多人使用的瀏覽器有 IE (Internet Explorer)、Firefox、Safari 等, 如 果你希望製做出來的網頁可以在大多數 的瀏覽器中正常顯示, 建議可安裝多套不 同瀏覽器實際測試網頁效果 (請參閱第 55 節, 會有更詳盡的說明)。 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 卻會同時加粗字體且在其文字 上下空白兩行 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=100>嗨！我是一號跑馬燈</marquee> <marquee direction=right bgcolor="#99ff99" behavior=slide scrollamount=20 scrolldelay=100>Hello！我是二號跑馬燈</marquee> <marquee direction=left bgcolor="#9999ff" behavior=alternate scrollamount=30 scrolldelay=100>嘿嘿！我是三號跑馬燈</marquee> </body> </html>