Transcript Web Design的不變準則- 工作流程與製作網頁

義守大學資訊管理學系
人因與資管報告
Web Design的不變準則- 工作
流程與製作網頁
老 師：吳有龍 博士
學 生：吳至哲
學 號 :ISU10022026G
日 期：2010/12/20
工作流程概要：
P2
製作網站的相關工作並不是有外觀上的
(設計)而已，為達到客戶的需求，還需要
從各種角度來構思網站。
就最後的結果來說，提案出美觀的設
計當然很重要，但如果沒有弄清楚網站客
群，以及網站想達成的目的，即使花費很
多心力下去製作網站，也很難得到想要的
成果。
因此網頁製作者應該要站在客戶的角
度，並以幫助客戶解決問題為目標來製作
網站
工作流概要
P3

具體上以圖表
示各個階段，逐
步使客戶問題與
目的明確化
聽取需求
決定細節
規劃網站
設計介面
內容企劃
整理內容
架構網站
設計提案
決定規格
製作、實作、測試
網頁製作概要
P4
製作網頁的必備知識
● 製作前的確認事項
● XHTML的基礎知識與寫法
● XHTML的元素與屬性
● CSS的基礎知識與寫法
● CSS版面設計基本規則
● 藉由CSS版面設計文字和段落
● 列印用樣式的製作技巧
● 瀏覽器資源與CSS HACK的基礎
●
製作網頁的必備知識
P5
● 網頁是以CSS+ XHTML製作的:
CSS可以定義網頁的外觀要素(版面、字型、
顏色等)之規格，而CSS的概念(將設計從
HIML中分離出來)更進一步發展來的
製作網頁的必備知識
P6
●檔案與資料夾:
網頁是由許多不同檔案組成的。主要是HTML檔
案、CSS檔案、JPEG檔案等
●字碼與亂碼:
字碼就是分配給各個文字的專有的數字組合。
●指定字碼時的注意事項:
<要使用哪種字碼>是在開始製作網頁時所不
得不決定的重要事項。
製作網頁的必備知識
P7
●在網頁中使用的影像檔案:
目前能在網頁中使用的影像檔格式多，最常
用的JPEG、GIF、PNG這三種影像格式，
重設計，重設計藍裁切輸出圖片時，可進
行選擇影像檔格式。
製作前的確認事項
P8
●需求定義書與製作規格書
●製作環境與運用體制
●依循的XHTML與CSS的版本
●編寫準則
●從設計藍圖中輸出影像:
XHTML的基礎知識與寫法
P9
●XHTML的基本寫法:
XHTML必須以<比HTML更正確的語法>來記
述，而語法主效差是以下這五點。
原素和屬性的名稱必須是小寫
一定要寫上結束標籤
以完整的形式來記述
已引戶來框住屬性質
利用特殊字元
XHTML的基礎知識與寫法
P10
●XHTML的基本結構:
XHTML的元素與屬性
P11
XHTML的原素可分為<head元素>與
<body元素>這兩種。
head元素是記述(網頁的基本資訊) ，
例如，網頁標題和該網頁相關元資訊。
body元素是記述(網頁的內容) ，內容
包含圖片與連結，瀏覽器中顯示的內容，
全要寫在body元素之中。
XHTML的元素與屬性
P12
●設定基本資訊的head元素:
head元素中所記述的是下列網頁基本資訊，
而寫在這個標籤上的內容並不會顯示在瀏覽
器畫面上。
title元素、meta元素、link元素、
style元素、script元素、object元素、
base元素等
XHTML的元素與屬性
P13
●構成網頁內容的body元素:
Bady元素中所記述的，是其特性而分為(區塊
層級元素)與(行內元素)這兩種。
區塊層級元素:是作為一個獨立區塊的元素，
舉凡標題(h1-h6元素)、段落(P元素)、清單(ul
、dl)、表格、表單等元素，都可被歸類為區
塊層級元素。
行內元素:是<在一行敘述之內>的元素。是用
在區塊層級元素中賦予任務給部分文字，或
是崁入內容的重要元素。
CSS的基礎知識與寫法
P14
●CSS的製作流程:
瀏覽器樣是初始化
定意body元素
設定概略版型
定義樣式
調整版面細節
跨瀏覽器對策
檢查語法的妥當性
CSS的基礎知識與寫法
P15
●CSS的檔案字碼:
●CSS的基本寫法:
●選擇器指定方法:
●選擇器的群組化:
●樣式的詳細度與繼承:
CSS版面設計基本規則
P16
●盒子模型:盒子四角形的，而且是由
<content>、<padding>、<border>、
<margin>這四個領域所組成。
CSS版面設計基本規則
P17
●浮動:將盒子配置於左右兩邊就叫浮動。
●定位與絕對定位/相對定位:盒子的配置方
法式意position屬性來指定的，包括相對定
位、絕對定位、固定定位、回到原位置。
CSS版面設計基本規則
P18
●設定顯示方法:利用display屬性，就可以
變更或設定盒子的顯示方法。
藉由CSS版面設計文字和段落
P19
●字型的指定:CSS可用font-family屬性來指
定字型，也可以用逗號做區隔來指定複數的
字型。
列印用樣式的製作技巧
P20
●螢幕顯示與列印的差別:製作印刷用CSS時
必須掌握的事情，就是(電腦螢幕)與(列印)
的差異。
瀏覽器資源與CSS HACK的基礎
P21
●決定目標瀏覽器:
瀏覽器的版本與支援其現
瀏覽器的市占率
瀏覽器的改版動向
●確認並調整瀏覽器上之顯示結果流程
調整瀏覽器前的注意事項
P22
●先從看到的XHTML原始碼開始進行調整:
●以父、子、孫元素的順序來找出原因:
●記住有名的臭蟲
●盒子差異的簡易解決方法
●先認瀏覽器的CSS知原狀況
P23
報告完畢