dreamweaver简报-岭东科技大学数位学习平台.ppt

網站設計的發展與未來趨勢 Web2.0、AJAX 電子商務 網頁互動多媒體 網路視訊 SEO搜尋引擎最佳化 網路廣告 政府網站規範與無障礙網站介紹 無障礙網頁空間服務網.tw 網頁版面設計資源介紹 商業網站版型.tw/ 免費網站版型//////free-website-templates//關鍵字：templates 免費網頁圖示資源// 網頁版面設計概念 決定網頁尺寸：1024*768、800*600、自動延伸 自動延伸範例：.tw.twhttp://5river.nccu.idv.tw 網頁範本、風格選擇 網頁版面設計概念 網頁基本元素：1.上方Banner區塊2.上方或左邊選單Menu區塊3.主要內容區塊4.版權宣告區塊 網站建置流程 網站建置類型 靜態網頁製作流程 動態網頁製作流程 網站設計原則 檔案、資料夾名稱：請儘量以英文方式命名，90%首頁一般皆命名為index.htm(html)、default.htm(html) 頁面設計長度以一頁為主，避免超過一頁 網頁架構以一至四層，並注意垂直、水平link，方便使用者瀏覽 注意版權問題 30秒40ｋ原則 網站的基本架構 認識網頁（為何我們使用Dreamweaver開發網頁） 網頁和網站之間的關係 製作網頁的前置工作 何謂網頁(HTML語法) 認識Dreamweaver 開始建立網站、視窗介面的認識 新增網站(定義網站) 開新網頁和網頁儲存 網頁標題Title 網頁基本編輯 段落p與強迫換行br 空白字元 nbsp; ＣＳＳ樣式表 什麼是CSS 認識CSS CSS樣式面板 設定中文字體 建立CSS樣式 自訂CSS樣式（類別） 重新定義HTML標籤（標籤） 使用CSS選擇器（進階） ＣＳＳ樣式表 CSS的匯出與連結 編輯CSS樣式表 編修CSS樣式表 刪除CSS樣式表 ＣＳＳ樣式練習 文字大小 文字顏色(網頁色彩為16進位 #00FF00) 行距 字距 邊界 首段縮排 首段凸排 編號清單/項目清單 超連結顏色設定 兩組以上超連結顏色設定 超連結的製作 連結到網站中其他頁面的超連結 連結到網頁中不同段落的連結（錨點超連結） 電子郵件超連結 連結到其他網站的連結和目標的設定 加入分隔線 網頁美化 頁面屬性 網頁背景和文字顏色 網頁的邊界 以圖片當網頁背景 用圖形來美化網頁 適用於網頁的圖檔格式(GIF、JPG、PNG) 影像置入後的屬性設定 圖文並排的模式 網頁背景 網頁中背景圖具有磁磚式貼圖的特性 Dreamweaver中有四個地方具有背景圖屬性：1.整個網頁的背景2.Table表格3.Layer圖層4.CSS中的文字背景 網頁表格 認識表格的三個必備標籤：table tr td儲存格內容/td /tr/table 網頁表格 表格特性介紹：1.表格寬度的單位2.儲存格的合併、分割3.儲存格無內容的處理4.儲存格寬度調整的問題4.表格框線樣式的處理 網頁表單 認識常用表單的類別：1.文字欄位2.選單、清單3.選項按鈕、核取方塊4.文字區域5.送出與重設按鈕6.欄位集 網頁表單 表單的驗證：1.內建行為「檢驗表單」2.擴充元件「CheckForm」3.Spry驗證 網頁表單 表單的寄送：1.透過Email：mailto:郵件位置?subject=信件主旨body=信件內容cc=副本郵件位置mailto語法中如何讓body內容的分行符號：%0D%0A(只適用IE6以上版本，IE5不行)例如：mailto:harmonica80@.tw?subject=testbody=test%0D%0Atest1%0D%0Atest3 網頁表單 表單的寄送：2.透過Mail Server線上寄信：此方式需配合 Mail Server 與安裝 CDO 或 Jmail 元件，再使用相關語法才能完成線上寄信的動作。 * * 嶺東科技大學視傳系兼任講師：廖述文 0923-328600 harmonica80@ Youtube影音頻道： 關鍵字「述文老師」 1 2 4 3 設定目標 網站結構 版面草圖 蒐集資料 版面設計 登錄宣傳 外部測試 網頁上傳 內部測試 網頁設計 內容更新維護 網站伺服器 Internet 使用者 應用程式 伺服器 資料庫 提出需求 回應需求 靜態網站 動態網站 動態網站 含資料庫 PhotoImpact Photoshop ImageReady Fireworks Dreamweaver Extension Flash Java Script PhotoImpact Web Site