网站制作与整合.ppt
网站制作与整合 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望授課大綱 part1part1p網站建置的基本pDreamweaver 2004 的基本操作n建置網站n文字nCSSn圖片n超連結n多媒體00 00 網站建置的基本流程確認主題功能設計網頁版面準備內容元件進行實作維護更新需求評估規劃內容架構測試上傳00 00 個人網站的製作p規劃網站的內容及功能n傳達資訊n交流分享n展示作品、興趣n幾米的官方網站 http:/ 00 00 個人網站的製作p草擬網站架構n結構草圖00 00 個人網站的製作p製作平面草圖00 00 個人網站的製作p製作 wireframe 版本n可用作初步的測試與修正00 00 個人網站的製作p製作圖形介面n設計：Photoshop,Illustratorn裁切：ImageReady,Firework00 00 個人網站的製作p準備內容及元件n文字、影像、動畫、聲音、視訊n適用格式n顯示大小或時間長短n檔案大小Text文字圖片聲音影像動畫ex00 ex00 練習圖像切割1.用 ImageReady 開啟 ex00 資料夾中的ex00.psd2.將 ex00.psd 作適當的裁切3.將影像輸出成網頁 top.htm01 01 認識DW工作環境p工作區介紹n功能表n插入列n切換網頁編輯模式n編輯區n狀態列n屬性面板n其他功能面板01 01 認識DW工作環境p面版操作p偏好設定n一般設定n狀態列：可以模擬下載速度ex01 ex01 認識DW工作環境1.啟動 Dreamweaver MX 20042.探索一下 DW 的工作區及各項面板02 02 建立網站p在硬碟新增一專案資料夾n元件素材n文件資訊n網頁p在 DW 定義網站n設定網站資料夾n修改網站設定02 02 建立網站p網頁的新增：n以網站架構圖為藍圖n新增網頁n新增資料夾：較複雜層次較多的大型網站，可以以資料夾分類02 02 建立網站p網頁的儲存與編輯n首頁的命名 index.htm,default.htm,index.asp,index.php(可在網頁伺服器設定)n其他檔案的命名p請用英文及數字，不要用中文p檔名以英文字母開始p不要用空白，以_或大小寫組合代替，如：my_file.htm、myFile.htmp不要使有特殊符號p避免過長，建議不要超過20個字元02 02 建立網站p設定頁面屬性n標題n背景及邊界(改用CSS)n編碼方式p繁體中文 big5p萬國通用碼 unicode02 02 建立網站p設定標頭：插入列 HTMLn關鍵字、說明：讓搜尋引擎容易找到n重新整理(refresh)p預覽網頁nIEnFireFoxex02 ex02 建立網站1.請定義一個新網站 machi2.請新增網頁：index.htm,about.htm,mustknow.htm,links.htm,club.htm3.請新增一資料夾 show,並在內新增一網頁index.htm4.編輯首頁，設定頁面屬性5.設定標頭6.預覽03 03 網頁文字p文字輸入n直接輸入n貼上已存在的內容p文字編輯n段落、斷行n特殊字元n分隔線n空白03 03 網頁文字p文字屬性設定 n段落樣式n字型、大小、色彩、字體n對齊n超連結n項目n文字縮排p使用基本HTML(其他改用CSS)03 03 網頁文字p使用者可更改瀏覽器的文字大小和字型p文字的單位p優缺點ex03 ex03 網頁文字1.打開 mustknow.htm2.打開 ex03.txt，複製內容至空白網頁3.更改文字屬性，區別大小標題，項目4.儲存04 04 CSS樣式表p什麼是CSS?nW3C訂定的語法，用來擴展HTML語法的功能nCSS1、CSS2 pCSS 的基本：n原始碼：n使用方式p內嵌 vs.外部連結.cssp重訂 HTML 標籤 vs.自訂樣式04 04 CSS樣式表pCSS樣式面板p重新定義HTMLp樣式式設定n類型、背景、區塊、方框、邊框、清單n定位:p絕對(相對於網頁左上角)p相對(相對於原來在網頁中的位置)04 04 CSS樣式表p自訂CSS樣式n名稱.headingn設定n套用n取消n修改04 04 CSS樣式表p外部樣式表n新增 CSS(檔名.css)n設定 n連結n套用ex04 ex04 CSS樣式表1.開啟目mustknow.htm2.重新定義表列項目的樣式3.新增一自訂樣式4.設定頁面background,margin,padding05 05 網頁圖片p網頁圖片格式ngif：最多使用 256 個色彩來顯示影像資料，較適用於文字形式的影像、線稿與美工圖案。比較特別的是可將背景設為透明，還可以製成動畫njpg：壓縮比率高達1:10，同時又保存影像的整體相片品質，但當壓縮率愈高，影像的品質會愈低，較適用於自然風景及人物照片npng：融合了 jpg 和 gif 的優點，支援用於遮罩的 alpha 色頻、並可儲存 48 位元的彩色影像，缺點為檔案較jpg大，且不像gif可支援動畫05 05 網頁圖片p網頁圖片格式p插入圖片n插入列n從檔案面板拖拉至適當位置p加入影像預留位置05 05 網頁圖片p修改圖片屬性n大小n來源n超連結n文繞圖n替代文字n間距n外框n編輯圖片05 05 網頁圖片p製作影像地圖n建立連結區域n修改與刪除ex05 ex05 網頁圖片1.開啟 mustknow.htm2.插入圖片 ex04.jpg3.修改屬性：圖靠右、上下間距 64.開啟 links.htm5.製作圓形影像的 hot area6.練習調整、修改及刪除06 06 超連結p文字超連結 人物人物n預設值n用頁面屬性更改顏色n利用 CSS 變換超連結文字狀態a:link a:hover a:active a:visited06 06 超連結p圖片超連結 *把邊框設為0，就不有藍框了p變換影像的特效(Rollover)n行為面板njavascript06 06 超連結p使用錨點n用於頁面過長，避免不斷捲動頁面n設定錨點人物人物n設定連結人物人物 *加入回到原點的連結06 06 超連結p設定外部連結n外部連結n開啟在新視窗：目標設為_blankp設定Email連結:mailto:p檔案下載的連結 *最好能標示檔案類型及大小ex06 ex06 超連結1.開啟 links.htm製作超連結利用CSS更改連結顏色樣式2.開啟 ex00.psd製作文字特效選取並輸出為網頁影像3.開啟 top.htm製作 Rollover 的特效製作圖形連結至各相關網頁4.開啟 mustknow.htm在上方的導覽列及各標題前加錨點在導覽列製作錨點超連結在各區塊製作回上方的連結07 07 多媒體pFlash動畫n插入Flash(.swf)n設定屬性pFlash 按鈕pFlash文字pFlash Video(.flv)07 07 多媒體p視訊及聲音 n外掛程式(activeX,plugin)n常見種類：pWindows media(.wmv.wma)pReal Media(.ra.rm.rmvb)pQuickTime(.mov)07 07 多媒體p視訊及聲音 n下載(漸進式)vs.串流n內嵌或外部開啟07 07 多媒體p視訊及聲音 nCode 非內建p屬性p參數Real media http:/ Windows media http:/ ex07 多媒體1.開啟 mustknow.htm插入一Flash按鈕回上方並連結至#top2.開啟 links.htm插入音樂sample.wav設定屬性 75x40
