philxyz0316

由 Macromedia 所出的「DreamWeaver」被認為是目前最方便、功能最多、最靈活的網頁製作/網頁設計/電子出版編輯工具
不論您會不會使用 HTML 語法，都能輕鬆的使用 DreamWeaver 這套軟體，進行網頁撰寫與設計。
1.DreamWeaver 使用介面教學
2.DreamWeaver 快速鍵（hot key）的教學與增加的方法
3.DreamWeaver 網頁設計-表格製作 PART-1 （表格基本製作）
4.DreamWeaver 網頁設計-表格製作 PART-2（內框屬性）
5.DreamWeaver 網頁設計-框架的概念與製作

[ 本帖最後由 philxyz0316 於 2007-4-28 23:19 編輯 ]

philxyz0316

第一次開啟DreamWeaver時，很多人都會被介面上數量繁多的浮動視窗弄得眼花撩亂，這個時候，請您將這些浮動視窗全部關起來吧（或按F4），請跟隨講義後面的講解，再開啟需要的視窗。



當然，本範例中對於介面也略做了一些簡介，後若對 DreamWeaver 有興趣，不妨看看唷！


介面簡介

1.「屬性浮動視窗」：
非常重要的一個視窗，這個視窗上的屬性會依不同性質的物件（如table、layer、image、Frame等等）而有所不同，您可以使用「Ctrl + F3」來開啟或關閉它。



2.「物件浮動視窗」：
原本必須寫個老半天的HTML物件（如table、layer、image、Frame等等），在 DreamWeaver 中成為一個個圖形物件：


除了基本的圖層、表單等物件，也可以使用「物件浮動視窗」上的小箭頭「 」變換浮動視窗上的選項（一般來說，DreamWeaver 4.0安裝完之後預設有7個不同的物件視窗，但若想得到最新的物件，可以到MicroMedia的網站下載更多物件）


「字元物件」：在網頁中，有些字元（如「©」、「®」、「¥」等）是寫不出來的，必須利用「字元物件」中提供的特殊字元才能在往頁上顯示這些特殊字。

「表單物件」：包含了按鈕、下拉式選單等（如下圖）表單物件：


「窗框物件」：將網頁切割成數個窗框的好用功能，軟體預設有六種款式，但您也能至MicroMedia網頁下載更多不同的窗框款式。

「檔頭物件」：插入資料庫、meta、或是Reload鍵等檔頭物件。

「隱形物件」：插入錨點、宣告、或是Java Script等隱形（在網頁上看不出來的）物件。

「特殊物件」：插入一些applet等等小程式或是特殊物件。

3.「CCS Style 浮動視窗」：
在網頁中設定「CCS」專用，DreamWeaver 中的CCS應用非常靈活，可以針對一行字或是一整篇文字設定CCS樣式。



4.「Code Inspector 浮動視窗」：
可以在此觀看或直接使用html原始碼編寫網頁，或者，也可以利用「Ctrl + Tab 」來切換「Design View」和「Code View」。



5.「HRML Style for site 浮動視窗」：
在「屬性浮動視窗」上雖然有「 」這些選項可以決定網頁上的文字樣式，但如果您覺得樣式不夠豐富，也可以使用「HRML Style for site 浮動視窗」內提供的樣式。



6.「Frame浮動視窗」：
如果網頁是由多個網頁所組成的，可以呼叫出「Frame浮動視窗」來觀看各窗框間的關係與原始碼。



7.「Behaviors浮動視窗」：
Behaviors可以說是網頁中的特殊效果，常見如「圖片變換效果」、「訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。」等等皆是由Behaviors中製作出來的。
點選視窗上的「」鈕，會出現一條選單（預設為22種不同的Behaviors，若想有更多種Behaviors，請至MicroMedia網站下載，或點選該表單最下面一個選項「Get More Behaviors 」，將會自動連結到Micro MediaPlugins 下載頁）




[ 本帖最後由 philxyz0316 於 2007-4-28 21:15 編輯 ]

philxyz0316

DreamWeaver 快速鍵（hot key）的教學與增加的方法

提高 Dreamweaver 效率的方法之一，就是活用軟體的快速鍵（或稱hot key、熱鍵、shortcuts），在DreamWeaver中除了提供健完善的hot key以外，在4.0版中更加入了「Keyboard Shortcuts」，讓使用者自行設定最適合自己快速鍵。

以下介紹的是以幾種最常用到的快速鍵：

F4	開啟（關閉）所有的浮動視窗。
Ctrl + F2	呼叫或關閉「物件浮動視窗」
Ctrl + F3	呼叫或關閉「屬性浮動視窗」
Ctrl + L	選取一行字或是圖，然後「Ctrl + L」會出現「select file」視窗來選取連結檔案。
Ctrl + Alt + i	在網頁中插入一張圖的方式有很多種，可以使用物件視窗中的「 」，或是直接「Ctrl + Alt + i」來選取圖檔。
Ctrl + Tab	利用「Ctrl + Tab」可以輕鬆快速的切換「Design View 」和「 Code View」。
Ctrl + Shift + i	在DreamWeaver中，為了方便編輯者不會混淆，像layer、透明虛線以及一些invisible的物件，可以用「Ctrl + Shift + i」來切換「可見與不可見透明物件」，這樣講也許有點籠統，亦下圖例來說明，藍色的線條事實上是一個 border= 0 框格 ，「border= 0」表示格線是不存在的，向這樣不存在、或是透明的物件，在DreamWeaver中是以虛線的方式顯示，但若想看看在網頁上顯是的情況，只要以「Ctrl + Shift + i」切換即可。
Ctrl + t	以滑鼠選起一個物件如一張圖 、一個圖層 、[url=]一個影藏檔頭[/url] ，用「Ctrl + t 」可以看原始檔（code），詳情如下圖： 圖檔： 圖層： 檔頭： 您可以在這些「Bdt Tag」裡直接編寫html，編輯完畢，按下enter即可。
Ctrl + w	關閉此頁，但DreamWeaver會另開一張空白頁面。
Ctrl + q	其實跟「Alt + F4」一樣，會直接將DreamWeaver關閉。
Ctrl + a	大家都知道「Ctrl + a」是全選的意思，但在DreamWeaver中比較有趣的是，他的「Ctrl + a 」所選取的範圍為逐漸擴大。
Ctrl + f	「Ctrl + f」一般都是尋找關鍵字的功能，但DreamWeaver中的「Ctrl + f」除了尋找字串以外，還可以一口氣將擁有該字串的所有句子一併列出，並有「轉換」等超好用功能。 舉個「轉換」的例子，如果有一篇文章名為「真有趣」，約有一萬字，作者不小心將「有趣」全部打成「有去」，這時只要以「Ctrl + f」呼叫「Find and Replace」視窗： ↓↓↓↓↓↓↓↓↓↓↓↓ 一口氣將157個「有去」改成正確「有趣」。
Ctrl + j	會出現「page properties」是關於頁面的屬性、標題（title）名稱、背景與字的顏色、大小、等細節的設定。
Ctrl + m	在表格至製作中，按「Tab」鍵可以跳到下一格、或新增下層格數，但如果需校新增上一層表格，只需要「Ctrl + m」即可。
Ctrl + n	新增一頁空白頁面。

以上Hot key如果覺得用起來不順手，或是覺得hot key不夠多，也可以利用「Edit」下「Keyboard Shortcuts」來設定屬於自己專用的hot key唷！

philxyz0316

DreamWeaver 就像是VB一樣，將原本必須自行寫的程式碼，利用元件的方式將這些程式碼圖形化：
比如說，在以前使用notepad編寫網頁時，遇到「表格」(table)時，必須寫上一大段文字：
  
但在 DreamWeaver 中的作法是這樣的：
1.ctrl + F2 會出現物件版面（如下圖）



2.點選版面上的 「insert table」，會出現一個對話窗


「Rows」表示直的行數，「Columns」表示橫的列數，「Width」表示表格的寬度大小，「Borde」r表示表格的邊框寬度，輸入需要的格數資料後，按下「ok」，一個表格就製作完畢了（如下圖）。



這個表格，就是依照「insert table」內輸入的資訊所顯現，成為一行、兩列、寬度為600pixels、邊框寬度為1pixels的表格了，這個方法是在 DreamWeaver 終至做表格最基本的步驟。

philxyz0316

表格製作完畢後，如果希望在上面做點變化，您可以這樣做：

1.Sctrl + F3 ，會出現「屬性檢視版面」（如下圖）



2.將表格選取起來，屬性檢視版面會變成該表格所有有關的變項，如下圖所示，在選取表格後，屬性版面上的選項變成所有可以改變表格屬性的選項。




3.在這塊版面上可以直接改變表格屬性，比方說，在製作完一個表格後，發現格數不夠，直接選取表格，並在屬性版面上的「Rows」（改變直的行數）或是「Cols」（改變橫的列數）中輸入需要的行列數即可改變，如下圖中顯示，在「Rows」中輸入「5」、在「Cols」中輸入「3」會將原來的只有一行二列的表格變成五行三列。



4.如果想改變表格寬度的話，可以直接以滑鼠拉取，或是在屬性面上的「W」（寬度）和「H」（高度）中輸入數值，如下圖例，使用屬性版面功能，在「W」中將原來的100改為「300」、在「H」中輸入「50」（在此要說明的是，本章教學中，所有數值都以「pixels」為單位，但在CW的表格單位有兩種，一為「pixels」、一為「％」，因為以「％」製作的表格為因為不同電腦中對網頁設定的不同而有所異動，所一般來說是用「pixels」比較多）



5.在表格屬性中的「CellPad」可以改變表格中字與格線間的距離，以下圖為例，若採系統預設的話，字與格線間的距離是2或是1pixels，若在「CellPad」中輸入數值「10」，則字與格線間的距離明顯變寬了。



6.在表格屬性中的「CellSpace」可以改變格線寬度，以下圖為例，若採系統預設的話，字與格線間的距離是1pixels，若在「CellSpace」中輸入數值改為「10」的話，則格線寬度就被改變了。



7.與「CellSpace」非常像的是「Border」，一般表格的「Border」值為「1」，若需要製作沒有格線的表格，則在「Border」中輸入「0」，其結果如下，變成雖然有「格子」的存在，但看不到格線。



另外，若將「Border」內的數值改為「10」的話，格線也會變寬，如下圖例，但形式與「CellSpace」便寬的方式不同。




8.我們也可以使用屬性版面來改變表格的顏色， 在「Bg Color」後面的空格中輸入顏色碼（網頁中用來設定顏色的code）若不曉得顏色碼是什麼也沒關係，「Bg Color」後面點選「 」圖示會出現顏色碼表（如下圖），直接選取喜歡的顏色，若覺得色碼表上的顏色不敷使用，可以選擇表上「」圖示，並在出現的色彩盤上選擇您需要的顏色。



以本章為例， 在「Bg Color」上的色碼表選擇「#0099FF」這個顏色，原來的表格，顏色會變成如下圖的顏色。



這時如果在「Brdr Color」中以相同的的方式選擇顏色，則會改變線框的顏色（如下圖）。



也可以利用「背景圖」來美化表格，若有一張像這樣「」的圖案，以滑鼠將表格選起來，在「Bg Image」中輸入該背景圖的位置，或是點選「」圖示選取該圖，則表格就會有背景底圖囉，如下圖所示。



9.如果需要將表格移動，同樣將表格以滑鼠選取，在屬性版面上的「Align」有四種選擇，「Default」表示系統預設的位置（一般來說是左邊）；選擇「Left」表格會對齊左邊；選擇「Center」表格會對齊中間；選擇「Right」表格會對齊右邊



10.如果想看該表格的原始碼，您可以 「ctrl + Tab」來切換與 Code View 與 Design View 間的畫面。或者，在表格被選取的情況下用「ctrl + t 」來觀看表格原始碼。

philxyz0316

關於內框與外框

在DreamWeaver中，雖然同樣是表格，但依不同的選取方式而有不同的意義和屬性，以底下的兩個圖為例，第一種是以滑鼠選取表格的整個外框，第二種是以滑鼠加上CTRL選取表格內框。不同的選取部分在「屬性浮動視窗」上的屬性也都不同，在這個部分要介紹的是第二種選取方式，也就是表格內框屬性的介紹。

philxyz0316

內框的屬性介紹

1.要如何將表格內框選起來呢？很簡單，以滑鼠配合上「Ctrl」鍵即可，以下圖為例。

假如說有個3x3的表格，想做出最右邊哪種地磚感覺時，請左手按著「 Ctrl」，右手以滑鼠點選需要改變顏色的框格，就會變成「」中這種有黑色邊框的選取狀態。

接著，在屬性浮動視窗上「Bg」（背景顏色）、「Brdr」（內框顏色）內選擇顏色，或是在「Bg」加入背景圖（如下圖）。


2.合併表格的方式，一樣用「Ctrl」鍵將要合併的表格選起來，點選屬性浮動視窗上的「 」（Merges selected cells using spans）便可以合併表格（如下圖）



3.增加（分裂）表格格數的方式，則是使用屬性浮動視窗上的「 」 （Splits cell into rows or columns），方法如下圖所示：

按下「 」以後會出線「Split Cell」視窗，選擇「Rows」的話，勢將該格會向下分裂格數，選擇「Columns」的話，會向左分裂格數，您可以在「Number」裡輸入需要分裂成幾格。


4.表格之內的字，位置可以利用屬性浮動視窗上的「Horz」（水平位置）和「Vert」（垂直位置）來改變位置。

位	位	位	位
Horzefault 預設為置左	Horzeft 置左	Horz:Center 置中	Horz:Right 置右

位	位	位	位
Vertefault 預設為置中	Vert:Top 置上	Vert:Middle 置中	Vert:Bottom 置下
位
Vert:Baseline 置於底線

philxyz0316

Dreamweaver 框架的概念

像下圖這樣一個頁，事實上是由三個獨立的網頁合併在一起而成的，在DreamWeaver中利用「Frame」的技巧與概念，也可以輕鬆做出有多個框架組成的網頁唷！



什麼情況下使用「框架」（Frame）式的網頁比較好？以上圖為例，最左邊的選單列和中間上方的LOGO，希望在每個頁面中都出現，但由於這兩頁都是「圖」比較多的頁面，若是放在同一頁，除了在撰寫網頁時必須將所有的網頁都貼上選單和LOGO十分費事以外，Client端使用者也必須每到一頁就重新讀取一次選單和logo十分耗費時間，若使用Frame將不同性質的網頁分開來，以上的問題就可以輕鬆解決。

在DreamWeaver終至做一個由很多網頁組合起來的框架式網頁並不難，方式也有很多種類，以下介紹將介紹一種最簡單的製作方式。

philxyz0316

框架的製作

製作一個如下圖這樣一個網頁，首先必須製作最左邊的「menu.htm」頁，右上的「Logo.htm」和右下的「main.htm」三張網頁



「Menu.htm」：


「Logo.htm」：


「main.htm」：


在這裡附加說明的，網頁名稱必須是「英文」的，否則在讀取網頁時會造成錯誤連結，比方說「munu.htm」若是將檔名寫成「選單.htm」的話，就會出現錯誤。



2.「Ctrl + n」另開一頁新網頁，以「Ctrl + F2 」呼叫出「物件浮動視窗」，在浮動視窗上「common」字樣旁邊的小箭頭「  」點一下會出現一個選單，選取「Frames」後物件浮動視窗內的選項會變成「Frames」框格




3.依照您的需求，在浮動視窗上找尋適合的框架型態，點選之後網頁會變成框架頁（如下圖）



使用滑鼠將框架調成最適當的大小，接著，將滑鼠點到第一個框框內，點選「File」下的「Open in Frame」選取將要在此框格內顯示的網頁menu.htm。



則視窗會變成如下圖的情況：



其他的框格也依照這個方式：



接著選取「File」下的「Save All Fames」，將網頁存成「total.htm」（或是「index.htm」）就完成了。



使用IE或是NETSCAPE來開啟「total.htm」，便可以看到將三個網頁合而為一的效果了。

hsu_james

講得非常詳細,受益良多,謝謝!!