CS3
網站設計的發展與未來趨 勢 • • • • • •
Web2.0 、 AJAX 電子商務 網頁互動多媒體 網路視訊 SEO 搜尋引擎最佳化 網路廣告
政府網站規範與無障礙網 站介紹 • 無障礙網頁空間服務網 http://enable.nat.gov.tw
網頁版面設計資源介 紹 • 商業網站版型 http://www.webpage.com.tw/ • 免費網站版型 http://www.mastertemplates.com/ http://www.freshtemplates.com/ http://www.templateyes.com/ http://www.freeflashtemplates.com/ http://www.opensourcedesign.com/ • 免費網頁圖示資源 http://www.websiteicons.net/
網頁版面設計概念
• 決定網頁尺寸：
1024*768 、 800*600 、自動延伸
• 自動延伸範例：
http://www.taiwan123.com.tw http://www.post.gov.tw http://5river.nccu.idv.tw
• 網頁範本、風格選擇
網頁版面設計概念
• 網頁基本元素： 1
2
3
4
1. 上方 Banner 區塊 2. 上方或左邊選單 Menu 區 塊 3. 主要內容區塊 4. 版權宣告區塊
網站建置流程
設定目標
網站結構 蒐集資料
版面草圖 版面設計
網頁設計
內容更新維護
登錄宣傳
內部測試
外部測試
網頁上傳
網站建置類型
靜態網站
動態網站
Internet
動態網站 含資料庫
提出需求 回應需求 資料庫 資料庫 使用者
網站伺服器
應用程式 伺服器
靜態網頁製作流程
版面設計
版面配置
網頁設計
多媒體內容
Photoshop
ImageReady
Extension
Flash
Fireworks
Dreamweaver
PhotoImpact
Java Script
PhotoImpact
Web Site
動態網站
動態網頁製作流程
網站伺服器
動態網頁語法
ASP
IIS
ODBC
JSP
JSP Server
或
ColdFusion
ColdFusion Server
DNSless
Linux + Apache
資料庫
.NET Framework
PHP
Apache
ASP.NET Windows + IIS
應用程式伺服器
DataBase
Access SQL Server MySQL
網站設計原則
• 檔案、資料夾名稱： 請儘量以英文方式命名， 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) • 影像置入後的屬性設定 • 圖文並排的模式 • Flash 按鈕、 Flash 文字
網頁背景
• 網頁中背景圖具有磁磚式貼圖的特性 • 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@mail2000.com.tw? subject=test&body=test%0D%0Atest1%0D %0Atest3
網頁表單
• 表單的寄送： 2. 透過 Mail Server 線上寄信： 此方式需配合 Mail Server 與安裝 CDO 或 Jmail 元件，再使用相關 語法才能完成線上寄信的動作。