Dreamweaver 1 網頁製作

標籤：window   包括   dfa   更換   字型   rip   eth   輔助   外觀   

1.網站1.1 建立網站

點擊功能表列中網站進行網站建立，輸入網站名稱，路徑

1.2 設定影像檔夾1.3 網站管理

網站的編輯、複製、刪除

2.頁面屬性欄2.1 外觀

1.設定頁面整體的字型、大小、顏色

2.背景顏色，背景映像，映像是否重複，怎麼重複

3.頁面邊距

2.2 連結

         

1.連結的字型、大小、顏色

2.連結顏色：

                  連結顏色：      本身顏色

                  變換映像連結：滑鼠經過連結時的顏色

　　　　    已訪問連結：  已訪問之後的顏色

　　　　   活動連結：     滑鼠點擊時的顏色

 

 

2.3標題

1.能分為六層標題

2.設定標題字型、顏色

 2.4 標題/編碼

1.網頁名稱

 

2.5 跟蹤映像

跟蹤映像”是Dreamweaver一個非常有效功能，它允許使用者在網頁中將原來的平面設計稿作為輔助的背景。
這麼一來，使用者就可以非常方便地定位文字、映像、表格、層等網頁元素在該頁面中的位置了。跟蹤映像的具體使用是這樣的：
首先使用各種繪圖軟體作出一個想象中的網頁排版格局圖，然後將此圖儲存為網狀圖像格式（包括gif、jpg、jpeg和png）。
用Dreamweaver開啟你所編輯的網頁，在菜單中選擇“修改>頁面屬性”，然後在彈出的對話方塊中的“跟蹤映像”項中輸入剛才建立的網頁排版格局圖所在位置。
再在映像透明度中設定跟蹤映像的透明度，OK。這樣你就可以在當前網頁中方便地定位各個網頁元素的位置了。
使用了跟蹤映像的網頁在用Dreamweaver編輯時不會再顯示背景圖案，但當使用瀏覽器瀏覽時正好相反，跟蹤映像不見了，所見的就是經過編輯的網頁（當然能夠顯示背景圖案）。

 

3.製作網頁基本操作3.1 文本3.11 添加文本

直接編輯、複製粘貼、其他檔案匯入

3.12 添加空格

1.預設只能添加一個空格

2.通過插入菜單 —— HTML ——  特殊字元 —— 插入空格  

3.Ctrl+shift+空格

3.13 添加日期

插入菜單進行操作

 

3.14 插入水平線

.通過插入菜單 —— HTML —— 水平線

3.15 添加特殊字元

.通過插入菜單 —— HTML ——  特殊字元 

3.16設定文字格式設定

字型、大小、顏色

3.17 分段與換行

分段：enter

換行：shift+enter

3.18 設定段落格式

1.對齊：

2.列表變編號

3.縮排

3.2 映像3.21 常用圖片格式

1.GIF： 特點：圖片資料量小、可帶動畫資訊、可透明背景顯示，最高只支援265種顏色

　　　　用途：網站logo、廣告條、網頁背景映像

2.JPEG： 特點：可高效的壓縮圖片的資料量、圖片變小卻不會丟失顏色畫質

　　　　 用途：顯示照片等顏色豐富的映像

3. PNG：特點：融合了GIF能做透明背景的特點，又具有JPEG處理精美映像的特點

　　　　 用途：繪製網頁

3.22 插入映像3.23 設定映像基本屬性

映像名稱、寬、高、源檔案、替代、邊框

3.24 圖文混排

1.邊距

2.對齊

3.25 編輯映像

1.裁剪

2.銳利化

3.對比、亮度

4.重新採樣

5.最佳化（為圖片瘦身）

3.26 滑鼠經過更換圖片特效

插入功能表列完成

 

4.超連結4.1 內部連結——同個網站中的其他網頁4.2 外部連結——不同網站或本網站以外的網頁

1.連結中輸入連結地址

2.目標中選擇開啟位置

　　_blank ：每點擊一次連結建立一個新的視窗

　　_self ：會在當前視窗、架構頁面中開啟

　　_new ：會在同一個剛建立好的視窗中開啟

　　_parent ：如果是嵌套架構，會在父架構中開啟

　　_top ：會在完整的瀏覽器視窗中開啟

4.3 連結樣式

參考2.2

4.4 錨點連結——到網頁中某一特定位置

1.選中要命名的錨點

點擊錨點，對該錨點命名

2.選擇連結點，

當前頁面：在連結中輸入 #錨點名

其他網頁：網頁地址#錨點名

4.5 E-mail電子郵件連結

選中需要串連部分，點擊電子郵件連結，輸入連結地址

4.6 下載連結

1.當檔案是exe檔案、zip、rar類型問件時瀏覽器無法直接開啟，便會提示下載

4.7 空連結

1.在連結中輸入#

2.一般導覽列中首頁位置就是一個空連結

4.8 映像熱區連結

在映像中繪製一塊地區，建立連結

4.9 映像導航條

映像超連結

4.10 導向功能表

選中表單中的導向功能表，進行編輯

 

4.11 指令碼連結——通過觸發指令碼命令

在連結中輸入指令碼代碼

1. 添加到收藏夾：javascript:window.external.addFavorite(‘網址‘,‘名稱‘)
2. 表示關閉視窗：javascript:window.close()
3. 表示彈出一個提示對話方塊：javascript:alert(‘hello!‘)
4. 設定為預設首頁：（需通過空連結#,觸發onClick事件）

在連結中輸入#

選中連結點，在代碼中#後輸入
onClick="this.style.behavior=‘url(#default#homepage)‘;this.setHomePage(‘網址‘)"

4.12 超連結的管理

1.串連路徑：

　　絕對路徑：連結中使用完整URL地址

　　相對於文檔的路徑：../    表示上一層檔案夾

　　相對於網站根目錄的路徑：/  表示根目錄

2. 自動更新連結 ：檔案位置變動，自動更新網頁中連結路徑

3. 檢查串連

5.表格 5.1插入表格，進行設定

5.2 選定表格、儲存格進行設定

5.3 表格嵌套

在儲存格中插入表格

5.4 應用表格版面配置頁面5.41 類型：

1.國子型

2.拐角型

3.標題本文型

4.左右架構型

5.上下架構型

6.綜合架構型

7.封面型

8.flash型

9.變化型

5.42 頁首

通常放置logo，廣告條

5.43 頁尾

放置著作權資訊、聯絡電話、網站介紹、備案資訊等

5.44 導覽列

雙倍儲存格，空一格放一個資訊，設定高度，內容位置

5.45 資訊列6.架構6.1 架構

一個架構就是一個地區，可以單獨開啟一個HTML文檔，多個架構就組成了框架組

6.2 建立架構

選擇架構結構，建立架構

 

6.3儲存架構

有多少個架構就要儲存多少次，再加最外層

6.4 作用

1.做網頁的布局，將網頁分成不同的部分

2.簡化網頁的編寫：網頁之間相同的內容，只需要編寫一次

3.加快網頁的瀏覽：每次網頁只需要更新變化的那個架構的內容

6.5設定框架組和架構屬性

按一下滑鼠架構邊框，對架構進行設定

6.6自訂架構

 1.拖動編輯視窗的邊框：滑鼠位於編輯視窗的邊框，對邊框進行拖動，建立新的架構

2.按住 alt 鍵時拖動

7.多媒體元素7.1多媒體元素

flash多媒體元素

音頻多媒體元素

視頻多媒體元素

 

 

7.2 插入flash多媒體元素7.21 flash動畫

插入flash動畫檔案，副檔名為 .swf

7.22 插入flash按鈕

 Dreamweaver自身帶有一些flash按鈕

7.23插入flash文本7.24插入映像查看器 7.25插入flash paper7.26插入flash視頻7.3 插入音頻多媒體元素

 

 

8.AP DIV元素8.1. AP

AP：絕對位置元素，稱為層，定位靈活

8.2 建立AP DIV8.3 編輯AP DIV8.4 層的可見度設定8.5 層的嵌套8.6 與表格的轉換9.行為特效10.

Dreamweaver 1 網頁製作