网页架构设计.PPT

網頁架構設計 先不要考量網頁設計之技術問題（使用何種工具或語法）。 盡量列舉所有可能內容。 規劃組織內容－分類、整合。 畫出樹形架構圖。 網頁架構設計 HTML語法架構 基本架構 HTML HEAD TITLE TITLE /HEAD BODY 主要內容擺放位置 /BODY /HTML HTML也將是為公訂的文件格式。 HTML語法架構 文件基本資訊(通常放在HEAD中) 表格(table tr td /td /tr /table) 文字區塊 標題(H1至H6) 列表(UL LI /LI /UL) 表單(FORM /FORM) 特殊(A, IMG MAP) 內容定義(EM) 字型設定(FONT /FONT) 程式語言(script language=“JavaScript” /Script) 特殊字元 網頁設計 不能都是文字，但是也不要放太多動態的圖檔。 適當的圖文並貌，注意過猶不及。 其實要注意的反而是網頁的內容，美工部分只要能表現出所要的風格就好， 所以是陪襯的角色 善用網頁製作工具 不懂HTML語法仍可製作網頁。 FrontPage 2000。 使用廣泛，提供動態HTML效果，佈景主題等。 e-Live。 內建很多圖庫與佈景主題，以物件方式安排畫面(轉成table /table，畫面擺放位置會有些許誤差)。 Dreamwave 善用網頁製作工具 FrontPage 2000 善用網頁製作工具 e-Live 善用網頁製作工具 專精一種工具。 善用每種工具－取長補短 網頁上載 IIS 主目錄與本機路徑(真實目錄與虛擬目錄) 個人網頁上載 IIS 個人網頁上載 對NT與IIS可使用檔案總管，把所有網頁資料複製到伺服器上個人網頁之資料夾。 若NT亦架設FTP伺服器，則亦可以CuteFTP等軟體上載。 若FreeBSD與Apache則上載個人網頁以CuteFTP較方便。 為網頁上點妝 善用影像處理軟體。 PhotoImpact。 功能強大易於操作之繪圖軟體。 CSS1, CSS2, Script, Flash ……。 開啟網站 網頁中加入文字 網頁中加入文字 項目符號及編號 網頁中常用之圖片 網頁中插入圖片 網頁中插入圖片 網頁中插入圖片 網頁中插入音樂 網頁中插入表格 * * 擺放網頁之資料夾 擺在伺服器資料夾位置 若伺服器網址為:.tw/ 個人網址為.tw/pweb 選擇檔案 /開啟Web 網路芳鄰? 整個網路 ?PTES? Nature?t00xxx 字型 文字大小 粗體、斜體、底線 字顏色 按shift+enter換行或以滑鼠點選分行設定 按enter換一段落。 選定編號或小圖示清單，子想目按增加縮排兩次 全彩 256色 儲存色彩 失真式 非失真式 壓縮方式 否 (Progressive JPEG可) 可 製作交錯圖 否 可 製作透明圖片 JPEG圖檔格式 GIF圖檔格式 從FrontPage中選圖庫，或從檔案中選取，亦可插入影片。 按此點可照等比例拖曳縮放 按此點可照非等比例拖曳縮放 在圖片上點選右鍵選圖片內容，出現如右對話框 低解析度影像可於原圖為顯示前，先顯示一低解析度圖，文字可為圖片說明或無法顯示時之文字顯示 在編輯的網頁上按滑鼠右鍵後點選網頁內容 *