2237
次閱讀

Dreamweaver介紹+基本教學

由Adobe公司所開發出來的網頁設計軟體，介面簡單容易上手

能做出互動式的精美網頁，提供許多範例供套用，能快速的將網站上線使用

介面化的設計，將較為複雜的程式碼轉換成人性化的使用介面

並且智慧提示相關程式碼，在各種平台也能正確動態顯示，功能強大

今天介紹關於dreamweaver相關的基本教學，提供給完全無經驗的人做教學參考

那就開始吧!

Dreamweaver 基本教學

• 下載Dreamweaver

由Dreamweaver下載後，安裝到本機，接著提示流程去做安裝。

• 首頁

選擇建立新的頁面，其中有分類為HTML、CSS、JS、SVG、PHP、XML、LESS、SASS

• 以範本建立頁面

檔案>新增>新增文件>來自範本的頁面>網站(右側清單選取範本)

選取想要套用的範本後，按下建立即可

若是初學者，也有提供初學者範本提供使用。

• 屬性面板工具

主要功能是讓選取的物件可以透過屬性的變更，直覺化的呈現所套用的屬性

像是影像，可以設定原始檔、連結、替代、ID、高與寬，以及編輯裁切等等

表格，可設定列與欄數、寬、像素、內距、行距、如何對齊、邊框多少、類別為何等

• 文件視窗工具

提供可以即時瀏覽現在做的專案在瀏覽器上呈現的樣子，這項功能可以帶來不少效率

若是使用一般的編輯器，往往還要多一個重整網頁的動作，無法及時預覽網頁的呈現

Dreamweaver除了提供直覺化的版面設計功能，若有程式碼的基礎，可以直接使用語法做編輯

同樣也能及時在文件視窗做預覽更改。

• 超連結

在網頁中，超連結佔很重要的部分，不僅是外部連結出去的網頁，內部網頁中的相連也是屬於超連結管轄的部分，需要有正確的路徑指向，才會使網頁不會出現404錯誤訊息。

在Dreamweaver中，超連結設定也很簡單，有分成放在文字內部的超連結，也就是按下文字後就會導向指定的連結中，設定方法為先選取想要放入超連結的文字，接著到【屬性】中建立超連結，或是按下【指向檔案】圖示，放入檔案連結或是文件連結。

另外也可以設定怎麼開啟文件，有五種方法，若是要在空白的瀏覽器視窗中開啟要選擇_blank、在目前的分頁中直接開啟的話要選擇_self、在新的瀏覽器中載入要選擇_top、直接在新視窗中開啟要選擇_new、在上一層頁面中開啟要選擇_parent

• 版面配置

在網頁設計軟體中，此軟體是否能給予開發者更多的輔助跟功能決定了軟體的實用程度，Dreamwraver中，對於版面配置有提供尺規、版面導引線、格線等視覺輔助工具幫忙做版面配置，畢竟人眼無法做出最精準的判斷，若是透過輔助，在設計上也會省去不少力氣

尺規在【檢視】中按下顯示就會出現了，可以幫助測量版面，單位也可以更改為像素、英寸

版面導引線，在檢視>設定檢視選項>導引線>貼齊導引線 中叫出，是從尺規拖曳到文件上的線，幫助對齊物件使用的，

格線，類似PPT中在對齊物件時，若偵測到可以對齊、置中等地方，就會自動出現導引線好讓物件可以正確的對齊

• CSS工具面板

在【視窗】中即可叫出CSS設計工具，面板中相較於程式碼的表現更為直覺化、好操作，有來源、@媒體、選取器、屬性四大功能設定，根據個別的規則中使用。

• CSS偏好樣式設定

在【編輯】中的偏好設定叫出，即可設定要套用的CSS樣式選項，讓Dreamweaver可以知道如何寫CSS的樣式屬性

• 表格設定

網頁設計內有大量的資料想要呈現，有些複雜的內容可以透過表格來作呈現，dreamweaver也有提供表格的功能

【插入】中可以加入表格，接著會跳出屬性的設定框，列、欄、表格寬度、邊寬粗細、儲存隔間距

頁首靠左對齊、靠上對齊、兩者皆有或是無，輔助功能則有註解、摘要等功能

同時，表格也可以從Excel中匯入表格、文字檔透過分隔號來分隔繪製成表格