Transcript 基本功能，請自行練習ch09-1-1

Dreamweaver
製作個人網站的第一步
第一次上課課程
瞭解 Dreamweaver 工作介面
 如何設定網站資料夾
 開啟新檔案
 編輯文字與調整
 文字超連結
 錨點設定 (可視為同一頁面內的超連結)
 自行試做簡單網站，上傳個人網頁


自我練習網頁基本功能 (圖片、表格、頁框)
認識 Dreamweaver
Dreamweaver是由Macromedia公司所出版
最專業的網頁設計工具
官方網站：http://www.macromedia.com/
相關產品：Flash、Fireworks、Director、
Authorware、ColdFusion、HomeSite等
為什麼要用Dreamweaver ?
Dreamweaver 是一套功能強大而介面人性化的網頁編輯軟
體及管理工具， 它值得我們學習的地方，不只在於軟體
本身的優點，更在於它與其他軟體的相容整合 ，功能的
全方位延伸，與目前網際網路的多媒體化及動態資料庫
的結合。學習此套軟體來當做我們進入網路專業領域的
入門根基軟體是最適合不過了！
如果我們設計一個複雜的電子商務 (E-Commerce) 網站，
可以用 Dreamweaver 來維護管理 !
如果我們設計一個多媒體形式 (Mulitimedia) 的網站，如
Shockwave Flash 多媒體格式、 DHTML，而
Dreamweaver 也可以發揮最完整的支援整合。
網頁製作前準備工作
一、確定網站的主題與性質
先了解製作這個網站的目的為何？想要表達何種訊
息給瀏覽者？是娛樂性質的網站嗎？企業公司網站？
教育資訊網站？個人網站？或是電子商務網站等......，
確定網站的主題、及所想要表達的內容是很重要的，
這可以使我們在後面製作的過程中，有一個方向可
遵循，也可以使網站內容不會雜亂無章、像大雜燴
一樣。
網頁製作前準備工作
二、構思網站架構
確定了主題後，依據我們想製作的內容，來分類出網站中的各個項目，
每個項目下要放什麼內容、有哪些延伸的小項目等一連串互相連結的
細節要先規劃出來，它就像是一個由上往下延伸的樹狀架構圖，例如
一個介紹個人作品的網站，它的架構可以如下圖所示：
一個明確網站架構，可以使網站內容有系統的呈現出來，在日後的管
理維護上也有非常大的幫助。
網頁製作前準備工作
三、資料的蒐集整理
根據網站主題及架構，來蒐集所需的相關資料、圖檔，
依架構中的各個項目來作資料上的分類、整理。
安裝Dreamweaver
第一次進入Dreamweaver
樣版選擇
Dreamweaver 4 & Dreamweaver MX
 [編輯][偏好設定][一般設定][變更工
作區]

面版簡介 ( 01-2.工作室窗的介紹 )






設計
程式碼
檔案
屬性
插入
狀態列
新增網站 (02-1-1.設定網站資料夾)
先建立專屬資料夾
 [網站][新增網站]
 進行網站設定

開啟新檔案 (頁面屬性) (02-2-1~3)
IE
Tip1: 頁面設定頁面配色
Netscape
Tip2: bgproperties=“fixed”
編輯文字
1.
2.
3.
4.
5.
Enter 與 Shift+Enter (03-1-1. 直接輸入文字)~
Enter 代表的意義 (03-1-1. 直接輸入文字)
Hn 與 Font的差別 (03-2-1. 設定文字格式：標題/字體)
+-n 與 <basefont size=‘x’> (03-2-1. 設定文字格式：級數/大小點數)
右鍵的其他功能 (自行練習)
Tip1: 快速標籤編輯器
Tip2: 右鍵編輯標籤 or 編輯標籤程式碼
加入超連結 (ch08-1-1_設定文字超連結)

Target的設定




_blank
被連結的網頁 (或網站) 以另一個新視窗開啟。
_parent
被連結的網頁開啟時將取代整個 Frameset。
_self
被連結的網頁在原 Frame 中開啟。
_top
當最外圍的 Frameset 中的 Frame 又包含另一個
Frameset 時，被連結的網頁在開啟的時候，將取代
最外圍的整個 Frameset。
錨點(Anchor)設定 (08-2.設定錨點)
第一次上課課程自我練習
瞭解 Dreamweaver 工作介面
 如何設定網站資料夾
 開啟新檔案
 編輯文字與調整
 文字超連結
 錨點設定 (可視為同一頁面內的超連結)
 自行試做簡單網站，上傳個人網頁

淡江網頁空間使用方式

將網頁以 FTP 方式上傳至個人的網頁空
間(50MB)內即可
FTP 位址：ftp.s99.tku.edu.tw
 預設帳號：499xxxxxx (學號)
 預設密碼：身分證號後六碼
護照後六碼
居留證後六碼

學校相關規定可至網頁查閱 http://tknet.tku.edu.tw/
淡江網頁空間使用方式

若非大一同學，則 FTP 位址將隨著自己
的學號做改變

大四同學，學號 496xxxxxx


大三同學，學號 497xxxxxx


FTP 位址：ftp.s96.tku.edu.tw
FTP 位址：ftp.s97.tku.edu.tw
大二同學，學號 498xxxxxx

FTP 位址：ftp.s98.tku.edu.tw
學校相關規定可至網頁查閱 http://tknet.tku.edu.tw/
淡江網頁空間使用方式

將網站首頁設定為：index.html、
index.htm、index.php
進入個人 FTP 網頁空間後，將網站檔案放進
www 資料夾
 即可以網頁瀏覽器查看個人所製作的網頁是
否正確

http://s99.tku.edu.tw/~499xxxxxx/
 檔案對應：FTP 的 www 資料夾中，abc.zip


http://s99.tku.edu.tw/~499xxxxxx/abc.zip
第一次上課內容結束
後方基本功能，請自我練習
Dreamweaver
網頁基本功能請自行練習
插入圖片
(基本功能，請自行練習ch04-1-1)
圖片種類：GIF, JPG, PNG檔
Tip1: 編輯偏好設定檔案型態/ 編輯器
表格(Table)設定.
插入表格
(基本功能，請自行練習ch05-1-1)
列(Row)跟欄(Column)
(基本功能，請自行練習ch05-2-2)
欄列的增加、刪除 (基本功能，請自行練習ch05-2-2)
內距(Cell Padding)與間距(Cell Spacing)
(基本功能，請自行練習ch05-1-2)
表格屬性設定
(基本功能，請自行練習ch05-1-2)
(基本功能，請自行練習ch05-2-1)
套用表格格式
Tip: [命令][表格格式]
(基本功能，請自行練習ch05-4-3)
儲存格
(基本功能，請自行練習ch05-2-3)
頁框 (Frame)
分割Frames
自動分割
手動分割
利用Alt+滑鼠左鍵
(基本功能，請自行練習ch07-1-1)
Frameset屬性
(基本功能，請自行練習ch07-3)
Frame
Tip: [視窗][其他][頁框]
(基本功能，請自行練習ch07-1-2)
其他

在頁框中插入網頁並儲存
(基本功能，請自行練習ch07-2-1)

在頁框中建立新網頁並儲存
(基本功能，請自行練習ch07-2-2)
Dreamweaver
網站製作進階功能
影像地圖 (ch08-3 影像地圖的製作)
重疊區域以先前設定為準
跳頁選單 (ch11-4 自動轉換網址或網頁)
其餘網頁進階功能
ch04-2-1_在網頁中加入FLASH動畫
 ch04-2-3_插入Flash按鈕與Flash文字
 ch08-6_加入導覽列(Navigation Bar)
 ch11-1-1_製作主功能表
 ch11-1-2_建立子功能表
 ch11-3_滑鼠變換影像的效果

Dreamweaver
網頁基本功能請自行練習
表單(Form)
(基本功能，請自行練習ch13)
網站管理者與瀏覽者互動的一種媒介！
 概念如同一份「問卷」或是「考卷」
 常配合資料庫進行使用
 表單元件


文字欄位、按鈕、文字區域、核取方塊（多
選鈕）、選項按鈕、選項按鈕群組、清單選
單、檔案欄位、影像欄位、隱藏欄位、跳頁
式選單
圖層(Layer)
什麼是圖層(Layer)?
圖層(Layer)，對於網頁編輯者而言，無異
是一項快速製作動態網頁的工具，和傳統
網頁編輯方式相較，圖層提供編輯者更多
的編輯彈性，例如圖層可以重疊、隱藏、
隨意移動位置等特性，就是其他網頁工具
所沒有的。
 可放入任何元件、可放置任何位置!

瀏覽器對Layer的支援
使用DHTML CSS規格的定位功能
 <DIV>
 <SPAN>
Netscape Layer
 <LAYER>
 <ILAYER>

都是3.0以後的版本支援
新增圖層
(基本功能，請自行練習ch06-1)
點選面板之
(繪製圖層)圖示
下拉式選單之[插入]  圖層
在圖層中中置入物件
圖層內容設定
圖層內容的裁切
(基本功能，請自行練習ch06-2)
其他
(基本功能，請自行練習ch06-4)

圖層的重疊

圖層的隱藏

圖層與表格的轉換 [修改][轉換]
CSS
CSS的功用
Cascading Style Sheets (串接樣式表)
 版本到CSS 2


多半以<style></style>所包覆
(基本功能，請自行練習ch09-1-1)
簡單的CSS語法
<style>
H1 {color: red; text-align: center}
.AB {color: blue; text-align: right}
</style>
<H1 style=“color: red; text-align: center”>
Tip: [程式碼][參考]
(基本功能，請自行練習ch09-1-1)
CSS在網頁中的使用類型
3.
使用外部連結樣式表 (.css檔)
以內嵌方式，在網頁開頭定義 (style)
局部套用CSS樣式

有其優先順序: 3>2>1
1.
2.
(基本功能，請自行練習ch09-1-1)
新增CSS樣式
Tip:星號代表用瀏覽器才可以看到的效果!
(基本功能，請自行練習ch09-1-2)
CSS樣式交談窗說明
類型 (文字)
 背景
 區塊 (文字間距)
 方框 (周圍邊界)
 邊框 (邊框樣式)
 清單 (條列項目)
 定位
 擴充功能 (較新的功能)

(基本功能，請自行練習ch09-1-2)
使用CSS規則判斷
a:link
「滑鼠未經過」狀態
 a:active
「滑鼠按下」狀態
 a:visited
「URL已經拜訪過」狀態
 a:hover
「滑鼠經過」的狀態

(基本功能，請自行練習ch09-1-6)