網(wǎng)頁(yè)制作三合一教程(第一章)_第1頁(yè)
網(wǎng)頁(yè)制作三合一教程(第一章)_第2頁(yè)
網(wǎng)頁(yè)制作三合一教程(第一章)_第3頁(yè)
網(wǎng)頁(yè)制作三合一教程(第一章)_第4頁(yè)
網(wǎng)頁(yè)制作三合一教程(第一章)_第5頁(yè)
已閱讀5頁(yè)，還剩65頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第1章在網(wǎng)頁(yè)中插入文本和圖像本章要點(diǎn)1.1DreamweaverMX2004的工作界面和基本操作1.2建立本地站點(diǎn)和制作第1個(gè)網(wǎng)頁(yè)1.3建立本地站點(diǎn)和制作第1個(gè)網(wǎng)頁(yè)1.4“星座圖片瀏覽”網(wǎng)1.1DreamweaverMX2004的工作界面和基本操作1.1DreamweaverMX2004的工作界面和基本操作1.1.1工作界面1．選擇工作界面的類型第一次運(yùn)行DreamweaverMX2004后，會(huì)彈出“工作區(qū)設(shè)置”對(duì)話框，如圖1-1-1所示，可以看出，DreamweaverMX2004提供了兩種工作區(qū)布局（也叫工作界面）。選中某一種工作區(qū)名稱的單選鈕，再單擊“確定”按鈕，即可進(jìn)入相應(yīng)的工作區(qū)。如果要更改工作區(qū)設(shè)置，可以進(jìn)行如下的操作。（1）單擊“編輯”→“首選參數(shù)”菜單命令，彈出“首選參數(shù)”對(duì)話框。單擊該對(duì)話框左邊“分類”欄中的“常規(guī)”選項(xiàng)。（2）再單擊“首選參數(shù)”對(duì)話框內(nèi)右邊欄中的“更改工作區(qū)”按鈕，即可彈出如圖1-1-1所示的“工作區(qū)設(shè)置”對(duì)話框。此時(shí)可以重選DreamweaverMX2004的工作區(qū)。

1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-1

“工作區(qū)設(shè)置”對(duì)話框1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-1

“工作區(qū)設(shè)置”對(duì)話框1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-2

采用“設(shè)計(jì)者”風(fēng)格的DreamweaverMX2004工作界面1.1DreamweaverMX2004的工作界面和基本操作1.1.2文檔窗口文檔窗口用來(lái)顯示和編輯當(dāng)前的頁(yè)面文檔。在文檔窗口最大化時(shí)，其標(biāo)簽頂部顯示文檔的名稱。文檔工具欄和標(biāo)準(zhǔn)工具欄在文檔窗口內(nèi)；如果文檔窗口處于還原狀態(tài)，則文檔工具欄和標(biāo)準(zhǔn)工具欄在文檔窗口外，其標(biāo)題欄內(nèi)顯示網(wǎng)頁(yè)的標(biāo)題和網(wǎng)頁(yè)文檔所在的文件夾名稱和網(wǎng)頁(yè)文檔的名稱。文檔窗口的底部有狀態(tài)欄，可以提供多種信息。1．使用“代碼”視圖窗口單擊文檔工具欄中的“顯示代碼視圖”按鈕，切換到“代碼”視圖窗口?！按a”視圖窗口是一種用于編寫和編輯HTML、JavaScript、服務(wù)器語(yǔ)言代碼（如ASP或ColdFusion標(biāo)記語(yǔ)言）以及任何其他類型代碼的手工編碼環(huán)境。讀者還可以在代碼窗口內(nèi)，輸入用HTML編寫的網(wǎng)頁(yè)，再保存該網(wǎng)頁(yè)，然后按F12鍵，用瀏覽器瀏覽它的內(nèi)容。還可以在“代碼”窗口內(nèi)修改源代碼，同時(shí)觀察頁(yè)面的變化。利用“查看”→“代碼視圖選項(xiàng)”菜單下的各菜單命令，可改變代碼的顯示狀態(tài)。

1.1DreamweaverMX2004的工作界面和基本操作2．使用“設(shè)計(jì)”視圖窗口單擊標(biāo)準(zhǔn)工具欄內(nèi)的“顯示設(shè)計(jì)視圖”按鈕，即可進(jìn)入“設(shè)計(jì)”視圖窗口。“設(shè)計(jì)”視圖窗口是一種用于可視化頁(yè)面布局、可視化編輯和快速開(kāi)發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，顯示的效果與在網(wǎng)絡(luò)瀏覽器中瀏覽時(shí)非常相似，可以直接進(jìn)行編輯。3．使用“代碼和設(shè)計(jì)”視圖窗口單擊文檔工具欄內(nèi)的“顯示代碼視圖和設(shè)計(jì)視圖”按鈕，即可進(jìn)入“代碼和設(shè)計(jì)”視圖窗口。“代碼和設(shè)計(jì)”視圖窗口可以在單個(gè)窗口中同時(shí)看到同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖，如圖1-1-3所示。而且在單擊選中“設(shè)計(jì)”視圖窗口中的對(duì)象時(shí)，“代碼”視圖窗口內(nèi)的光標(biāo)也會(huì)定位在相應(yīng)的代碼處；如果在“設(shè)計(jì)”視圖窗口內(nèi)移動(dòng)光標(biāo)位置，則“代碼”視圖窗口中的內(nèi)容也會(huì)隨之變化；如果用鼠標(biāo)拖曳選中“設(shè)計(jì)”視圖窗口中的內(nèi)容，則“代碼”視圖窗口內(nèi)也會(huì)選中相應(yīng)的代碼；反之也會(huì)獲得相應(yīng)的效果。總之，這兩個(gè)窗口內(nèi)代碼與設(shè)計(jì)對(duì)象之間的對(duì)應(yīng)性非常好，這有利于修改HTML代碼。

1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-3

“代碼”視圖窗口與“設(shè)計(jì)”視圖窗口同時(shí)顯示1.1DreamweaverMX2004的工作界面和基本操作如果要切換文檔窗口的視圖，可單擊“查看”→“代碼”（或“設(shè)計(jì)”、“代碼和設(shè)計(jì)”）菜單命令或按Ctrl+-鍵。4．狀態(tài)欄DreamweaverMX2004的狀態(tài)欄位于文檔窗口的底部，如圖1-1-4所示。（1）標(biāo)簽選擇器。HTML標(biāo)簽選擇器在狀態(tài)欄的最左邊，它以HTML標(biāo)記顯示方式來(lái)表示光標(biāo)當(dāng)前位置處的網(wǎng)頁(yè)對(duì)象信息。如果光標(biāo)當(dāng)前位置處有多種信息，則可以顯示出多個(gè)HTML標(biāo)記，不同的HTML標(biāo)記表示不同的HTML元素信息。例如，<body>表示文檔主體，<img>表示圖像，<table>表示表格，<font>表示字體，<tr>表示行，<object>表示插入對(duì)象等。單擊某一個(gè)HTML標(biāo)記，DreamweaverMX2004會(huì)自動(dòng)選取與該標(biāo)記相對(duì)應(yīng)的網(wǎng)頁(yè)對(duì)象，用戶可對(duì)該對(duì)象進(jìn)行編輯。（2）窗口大小信息欄。它用來(lái)顯示與調(diào)整窗口大小。單擊它會(huì)彈出一個(gè)快捷菜單，如圖1-1-5所示。單擊該快捷菜單上邊一欄中的一個(gè)菜單命令，可馬上按照選定的大小改變窗口的大小。單擊該快捷菜單中的“編輯大小”菜單命令，會(huì)彈出“首選參數(shù)”（狀態(tài)欄）對(duì)話框，利用該對(duì)話框可以設(shè)置任何大小的窗口，還可以設(shè)置連接速度。

1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-4DreamweaverMX2004的狀態(tài)欄圖1-1-5

窗口大小信息欄的快捷菜單1.1DreamweaverMX2004的工作界面和基本操作（3）文檔大小/估計(jì)的下載時(shí)間。它給出了文檔大小的字節(jié)數(shù)和網(wǎng)頁(yè)的預(yù)計(jì)下載時(shí)間。1.1.3標(biāo)尺和網(wǎng)格在調(diào)整層的位置、大小和使層對(duì)齊時(shí)，利用Dreamweaver提供的標(biāo)尺和網(wǎng)格工具，可以使操作更準(zhǔn)確。標(biāo)尺和網(wǎng)格工具不但對(duì)層的定位操作有輔助作用，對(duì)其他網(wǎng)頁(yè)對(duì)象的定位操作也有輔助作用。標(biāo)尺和網(wǎng)格只在網(wǎng)頁(yè)編輯窗口內(nèi)顯示，在瀏覽器中不會(huì)顯示出來(lái)。1．標(biāo)尺單擊“查看”→“標(biāo)尺”菜單命令，可調(diào)出它的下一級(jí)菜單，如圖1-1-6所示。（1）如果要顯示標(biāo)尺，則應(yīng)單擊“查看”→“標(biāo)尺”→“顯示”菜單命令。（2）如果要改變標(biāo)尺的單位，則應(yīng)單擊“查看”→“標(biāo)尺”菜單命令的下一級(jí)菜單中的“像素”（Pixels）、“英寸”（Inches）或“厘米”（Centimeters）菜單命令。

1.1DreamweaverMX2004的工作界面和基本操作（3）用鼠標(biāo)拖曳標(biāo)尺原點(diǎn)處的小正方形，此時(shí)鼠標(biāo)指針呈十字線狀。拖曳鼠標(biāo)到合適的位置后松開(kāi)鼠標(biāo)左鍵，即可將原點(diǎn)位置改變。移動(dòng)前的標(biāo)尺情況如圖1-1-7所示，移動(dòng)后的標(biāo)尺情況如圖1-1-8所示。如果要將標(biāo)尺的原點(diǎn)位置還原，可單擊“查看”→“標(biāo)尺”→“重設(shè)原點(diǎn)”菜單命令。

圖1-1-6

“標(biāo)尺”的下一級(jí)菜單圖1-1-7

移動(dòng)前的標(biāo)尺情況圖1-1-8

移動(dòng)標(biāo)尺后的情況1.1DreamweaverMX2004的工作界面和基本操作圖1-1-6“標(biāo)尺”的下一級(jí)菜單圖1-1-7移動(dòng)前的標(biāo)尺情況圖1-1-8移動(dòng)標(biāo)尺后的情況2．網(wǎng)格單擊“查看”→“網(wǎng)格”菜單命令，可以調(diào)出它的下一級(jí)菜單，如圖1-1-9所示。（1）顯示與不顯示網(wǎng)格線。單擊圖1-1-10所示的“顯示網(wǎng)格”菜單命令，使它被選中（顯示網(wǎng)格）或不選中（不顯示網(wǎng)格）。

圖1-1-9

“網(wǎng)格”的下一級(jí)菜單

圖1-1-10

“網(wǎng)格設(shè)置”對(duì)話框1.1DreamweaverMX2004的工作界面和基本操作（2）靠齊（吸附）功能。如果沒(méi)有選中如圖1-1-9所示的“靠齊到網(wǎng)格”菜單命令，移動(dòng)層或改變層的大小時(shí)，最小的單位是一個(gè)像素。另外，在移動(dòng)層時(shí)不容易與網(wǎng)格對(duì)齊。如果選中如圖1-1-9所示的“靠齊到網(wǎng)格”菜單命令，移動(dòng)層或改變層的大小時(shí)，最小的單位是5個(gè)像素。另外，在移動(dòng)層時(shí)可以自動(dòng)與網(wǎng)格對(duì)齊。（3）網(wǎng)格和靠齊的參數(shù)設(shè)置。單擊如圖1-1-9所示的“網(wǎng)格設(shè)置”菜單命令，會(huì)彈出“網(wǎng)格設(shè)置”對(duì)話框，如圖1-1-10所示。利用“網(wǎng)格設(shè)置”對(duì)話框，可以調(diào)整網(wǎng)格的顏色，確定是否顯示網(wǎng)格，選擇是否靠齊到網(wǎng)格，調(diào)整網(wǎng)格的間距，設(shè)置網(wǎng)格是由線組成還是由點(diǎn)組成。

1.1DreamweaverMX2004的工作界面和基本操作1.1.4“屬性”欄和“插入”欄1．“屬性”欄“屬性”欄也叫屬性檢查器或“屬性”面板，如圖1-1-11所示。利用“屬性”欄可以顯示并精確調(diào)整網(wǎng)頁(yè)中選定對(duì)象的屬性?！皩傩浴睓诰哂兄悄芑奶攸c(diǎn)，選中網(wǎng)頁(yè)中的不同對(duì)象，其“屬性”欄的內(nèi)容會(huì)隨之發(fā)生變化。單擊“屬性”欄右下角的按鈕，可以展開(kāi)“屬性”欄；單擊“屬性”欄右下角的按鈕，可收縮“屬性”欄。

圖1-1-11

“屬性”欄1.1DreamweaverMX2004的工作界面和基本操作沒(méi)有選中任何對(duì)象時(shí)單擊“屬性”欄右邊的按鈕，可在光標(biāo)當(dāng)前位置添加HTML；選中一個(gè)對(duì)象時(shí)單擊按鈕，可以編輯相應(yīng)標(biāo)簽的HTML。單擊“窗口”→“屬性”菜單命令，可以在打開(kāi)和關(guān)閉“屬性”欄之間切換。2．“插入”欄“插入”欄也叫“對(duì)象”面板或“對(duì)象”欄，如圖1-1-12所示。它集成了DreamweaverMX2004“插入”菜單中的所有插入對(duì)象命令。在DreamweaverMX2004中，“插入”欄可以顯示為制表符和菜單兩種外觀效果，制表符狀態(tài)的“插入”欄如圖1-1-12所示，菜單狀態(tài)的“插入”欄如圖1-1-13所示。如果要將“插入”欄切換到菜單狀態(tài)，可單擊“插入”欄右邊的按鈕，彈出它的快捷菜單，再單擊該菜單中的“顯示為菜單”菜單命令。如果要將“插入”欄切換到制表符狀態(tài)，可單擊“插入”欄左邊的黑色箭頭，彈出它的快捷菜單，再單擊該菜單中的“顯示為制表符”菜單命令即可。

1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-12

制表符狀態(tài)的“插入”欄圖1-1-13

菜單狀態(tài)的“插入”欄1.1DreamweaverMX2004的工作界面和基本操作“插入”欄包括了“常用”、“布局”等8個(gè)標(biāo)簽項(xiàng)或8個(gè)與標(biāo)簽名稱相同的菜單命令。當(dāng)“插入”欄為制表符狀態(tài)時(shí)，可以使用鼠標(biāo)拖曳“插入”欄左邊的圖標(biāo)，將“插入”欄變?yōu)楦?dòng)面板。一般用戶習(xí)慣使用制表符狀態(tài)的“插入”欄。在制表符狀態(tài)下，每一個(gè)標(biāo)簽內(nèi)有多個(gè)用于插入對(duì)象的按鈕。單擊標(biāo)簽可以切換標(biāo)簽項(xiàng)，單擊標(biāo)簽內(nèi)的對(duì)象按鈕或者將相應(yīng)的按鈕圖標(biāo)拖曳到文檔窗口中，可將相應(yīng)的對(duì)象插入到網(wǎng)頁(yè)中。對(duì)于有些對(duì)象，會(huì)在單擊對(duì)象按鈕或拖曳按鈕圖標(biāo)后，調(diào)出一個(gè)相應(yīng)的設(shè)置對(duì)話框，進(jìn)行完設(shè)置后，單擊“確定”按鈕才可以真正在文檔窗口（即網(wǎng)頁(yè)）中插入對(duì)象。如果在插入對(duì)象的同時(shí)按住Ctrl鍵，就可以避免出現(xiàn)一個(gè)選擇對(duì)象對(duì)話框，而是直接插入一個(gè)相應(yīng)類型的空對(duì)象，如果以后要給該空對(duì)象賦予相應(yīng)內(nèi)容，可以雙擊該對(duì)象。

1.1DreamweaverMX2004的工作界面和基本操作1.1.5面板的常用操作除了前面提到的“屬性”面板和“插入”面板外，在DreamweaverMX2004中還有其他一些面板，這些面板提供了強(qiáng)大的功能，面板可以折疊與展開(kāi)。將鼠標(biāo)指針移到面板左上角的圖標(biāo)處，當(dāng)鼠標(biāo)指針變?yōu)槭皱^狀時(shí)，將面板拖曳離開(kāi)原來(lái)的位置，即可使面板成為一個(gè)可以用鼠標(biāo)拖曳的浮動(dòng)面板，如圖1-1-14所示。將鼠標(biāo)指針移到面板中的圖標(biāo)之上，會(huì)顯示圖標(biāo)的名稱提示。1．面板的拆分與組合（1）單擊面板左上角的按鈕，可以將面板折疊，如圖1-1-15所示；單擊面板左上角的按鈕，可以將面板展開(kāi)，如圖1-1-14所示。

1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-14

浮動(dòng)面板

圖1-1-15

折疊面板1.1DreamweaverMX2004的工作界面和基本操作圖1-1-16面板菜單（2）面板的拆分。如果要將組合面板中的面板（例如，圖1-1-14所示的“歷史記錄”組合面板中的“歷史記錄”面板和“框架”面板）拆分成獨(dú)立的面板，可單擊組合面板中的標(biāo)簽（例如，“歷史記錄”標(biāo)簽），使它成為當(dāng)前面板，再單擊面板右上角的圖標(biāo)，彈出面板菜單。單擊該菜單中的“將歷史記錄組合在”→“新組合面板”菜單命令，如圖1-1-16所示，即可將當(dāng)前面板（例如，“歷史記錄”面板）拆分出來(lái)，組成獨(dú)立的新組合面板。（3）面板的組合。單擊面板（例如，“歷史記錄”面板）右上角的圖標(biāo)，彈出面板菜單，單擊該菜單中的“將歷史記錄組合在”→“框架”菜單命令，即可將當(dāng)前面板（例如，“歷史記錄”面板）與“框架”面板組合在一起。可以看到，組合面板內(nèi)標(biāo)簽的左右次序?qū)φ{(diào)了，“框架”標(biāo)簽在左，“歷史記錄”標(biāo)簽在右，組合面板的名稱也改變?yōu)椤翱蚣堋薄?/p>

1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-16

面板菜單1.1DreamweaverMX2004的工作界面和基本操作2．調(diào)整面板大小和打開(kāi)與關(guān)閉面板3．隱藏所有面板1.1.6新建、打開(kāi)、保存和關(guān)閉網(wǎng)頁(yè)文檔1．“MacromediaDreamweaverMX2004”對(duì)話框在啟動(dòng)DreamweaverMX2004后，會(huì)自動(dòng)彈出“MacromediaDreamweaverMX2004”對(duì)話框，如圖1-1-18所示。該對(duì)話框由5部分組成。如果選中“不再顯示此對(duì)話框”復(fù)選框，則下次啟動(dòng)Dreamweaver時(shí)就不會(huì)再出現(xiàn)此對(duì)話框。

1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-18

“MacromediaDreamweaverMX2004”對(duì)話框1.1DreamweaverMX2004的工作界面和基本操作（1）“打開(kāi)最近項(xiàng)目”欄。其中列出了DreamweaverMX2004最近打開(kāi)過(guò)的文檔名稱，單擊其中的項(xiàng)目可以快速調(diào)出已經(jīng)編輯過(guò)的文檔。單擊“打開(kāi)”按鈕，可以調(diào)出“打開(kāi)”對(duì)話框，利用該對(duì)話框可以選擇要編輯的網(wǎng)頁(yè)文檔，再單擊該對(duì)話框中的“打開(kāi)”按鈕，即可打開(kāi)選定的文檔。（2）“創(chuàng)建新項(xiàng)目”欄。此欄中列出了“新建文檔”對(duì)話框中的大部分可以創(chuàng)建的項(xiàng)目，利用它可以快速創(chuàng)建一個(gè)新的HTML網(wǎng)頁(yè)文檔或者創(chuàng)建一個(gè)Dreamweaver站點(diǎn)。（3）“從范例創(chuàng)建”欄。單擊其中的文件夾按鈕，可調(diào)出不同的“新建文檔”對(duì)話框，利用該對(duì)話框可以新建一個(gè)相應(yīng)的文檔。在它的底部有一個(gè)DreamweaverExchange按鈕，單擊此按鈕后，將鏈接到DreamweaverExchange網(wǎng)站。（4）“Dreamweaver幫助”欄。其內(nèi)有“進(jìn)入Dreamweaver快速指南”和“進(jìn)入Dreamweaver教程”兩個(gè)按鈕。單擊“進(jìn)入Dreamweaver快速指南”按鈕后，將鏈接到一個(gè)網(wǎng)站，可以在該網(wǎng)站內(nèi)瀏覽DreamweaverMX2004新功能的介紹等內(nèi)容。單擊“進(jìn)入Dreamweaver教程”按鈕后，可以打開(kāi)一個(gè)名為“入門”的幫助文件，其中包括了DreamweaverMX2004的基本教程。

1.1DreamweaverMX2004的工作界面和基本操作（5）“介紹”欄。顯示網(wǎng)站的推廣信息。2．新建網(wǎng)頁(yè)文檔（1）在啟動(dòng)DreamweaverMX2004后，會(huì)自動(dòng)彈出“MacromediaDreamweaverMX2004”對(duì)話框，如圖1-1-18所示。單擊該對(duì)話框內(nèi)“創(chuàng)建新項(xiàng)目”欄中的“HTML”選項(xiàng)，即可創(chuàng)建一個(gè)新的HTML網(wǎng)頁(yè)文檔。（2）單擊“文件”→“新建”菜單命令，會(huì)彈出“新建文檔”對(duì)話框，如圖1-1-19所示。從該圖可以看出，利用該對(duì)話框可以建立各種類型的文件。選擇“類別”列表框中的“基本頁(yè)”選項(xiàng)，然后選擇“基本頁(yè)”列表框中的“HTML”選項(xiàng)，再單擊“創(chuàng)建”按鈕，即可新建一個(gè)空白的HTML網(wǎng)頁(yè)文檔。如果選中“類別”列表框中的“動(dòng)態(tài)頁(yè)”選項(xiàng)，則右側(cè)會(huì)列出可以新建的動(dòng)態(tài)頁(yè)面。如果選中“類別”列表框中的其他選項(xiàng)，還可以創(chuàng)建其他的文檔。

1.1DreamweaverMX2004的工作界面和基本操作

圖1-1-19

“新建文檔”（常規(guī)）對(duì)話框1.1DreamweaverMX2004的工作界面和基本操作3．打開(kāi)和關(guān)閉網(wǎng)頁(yè)文檔（1）打開(kāi)網(wǎng)頁(yè)文檔。單擊“文件”→“打開(kāi)”菜單命令，彈出“打開(kāi)”對(duì)話框。在該對(duì)話框內(nèi)選中要打開(kāi)的HTML文檔，然后單擊“打開(kāi)”按鈕，即可將選定的HTML文檔打開(kāi)。例如，可打開(kāi)前面編寫的名字為HTML1.htm的文檔。（2）關(guān)閉網(wǎng)頁(yè)文檔。單擊“文檔”→“關(guān)閉”菜單命令，即可關(guān)閉打開(kāi)的當(dāng)前文檔。如果當(dāng)前文檔在修改后沒(méi)有存盤，則會(huì)彈出一個(gè)提示框，提示用戶是否保存文檔。單擊“文檔”→“全部關(guān)閉”菜單命令，即可關(guān)閉所有打開(kāi)的文檔。4．保存網(wǎng)頁(yè)文檔（1）單擊“文檔”→“保存”菜單命令，可以用原名字保存當(dāng)前的文檔。（2）單擊“文檔”→“另存為”菜單命令，即可調(diào)出“另存為”對(duì)話框。利用該對(duì)話框可以將當(dāng)前的文檔以其他名字保存。（3）單擊“文檔”→“保存全部”菜單命令，即可將當(dāng)前的所有文檔以原名保存。

1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)本節(jié)要完成的項(xiàng)目是在本機(jī)建立第一個(gè)本地站點(diǎn)，同時(shí)制作第1個(gè)網(wǎng)頁(yè)。完成本項(xiàng)目的目的是使讀者對(duì)DreamweaverMX2004的使用方法有一個(gè)初步了解，對(duì)它的作用有一個(gè)初步的認(rèn)識(shí)，為今后的學(xué)習(xí)打下基礎(chǔ)。1.2.1建立本地站點(diǎn)的方法通常在設(shè)計(jì)網(wǎng)頁(yè)前應(yīng)先建立本地站點(diǎn)，建立本地站點(diǎn)就是將本地主機(jī)磁盤中的一個(gè)文件夾定義為站點(diǎn)，網(wǎng)頁(yè)中所有文件均存放在該文件夾中，便于管理。（1）單擊“窗口”→“文件”菜單命令，彈出“文件”面板。單擊該面板中左邊的下拉列表框，單擊“管理站點(diǎn)”列表項(xiàng)，彈出“管理站點(diǎn)”對(duì)話框，如圖1-2-1所示。（2）單擊該對(duì)話框中的“新建”按鈕，彈出它的快捷菜單，再單擊該菜單中的“站點(diǎn)”菜單命令，可調(diào)出“站點(diǎn)定義為”（基本）對(duì)話框，如圖1-2-2所示。

1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)

圖1-2-1

“管理站點(diǎn)”對(duì)話框圖1-2-2

“站點(diǎn)定義為”（基本）對(duì)話框一1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)（3）在文本框內(nèi)輸入站點(diǎn)的名稱（例如，“我的第1個(gè)站點(diǎn)”），單擊“下一步”按鈕，“站點(diǎn)定義為”（基本）對(duì)話框變?yōu)槿鐖D1-2-3所示的內(nèi)容。如果要使用服務(wù)器技術(shù)（例如，ASP.NET等），可單擊選中第二個(gè)單選鈕。然后從它下面的下拉列表框（選中第二個(gè)單選鈕后才會(huì)出現(xiàn)）中選擇要使用的服務(wù)器技術(shù)名稱。否則單擊選中第一個(gè)單選鈕。此處單擊選中第一個(gè)單選鈕。

圖1-2-3

“站點(diǎn)定義為”（基本）對(duì)話框二1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)（4）單擊“下一步”按鈕，“站點(diǎn)定義為”（基本）對(duì)話框如圖1-2-4所示。如果在本地編輯網(wǎng)頁(yè)，編輯好后再上傳到服務(wù)器，可單擊選中第一個(gè)單選鈕，通常選中該單選鈕。選中第二個(gè)單選鈕，可以直接對(duì)服務(wù)器上的文件進(jìn)行編輯。單擊按鈕，可彈出一個(gè)對(duì)話框，用來(lái)選擇一個(gè)文件夾作為站點(diǎn)的根目錄。要求該文件夾必須在此之前已經(jīng)建立。此處選擇第一個(gè)單選鈕，選擇的文件夾路徑為“F:\BDWEB1\”。

1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)

圖1-2-4

“站點(diǎn)定義為”（基本）對(duì)話框三1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)（5）單擊“下一步”按鈕，“站點(diǎn)定義為”（基本）對(duì)話框如圖1-2-5所示。在第一個(gè)下拉列表框中選擇“無(wú)”選項(xiàng)，直接將“F:\BDWEB1\”文件夾作為本地站點(diǎn)文件夾。（6）單擊“下一步”按鈕，彈出“站點(diǎn)定義為”（基本）對(duì)話框中新的內(nèi)容。此時(shí)對(duì)話框中將顯示出“站點(diǎn)”設(shè)置的基本設(shè)置信息，最后單擊“完成”按鈕。此時(shí)，“管理站點(diǎn)”對(duì)話框內(nèi)的列表框中會(huì)增加一個(gè)新建的站點(diǎn)名稱“我的第1個(gè)站點(diǎn)”。（7）單擊“管理站點(diǎn)”對(duì)話框內(nèi)的“完成”按鈕，即可完成新站點(diǎn)的建立。此時(shí)的“文件”面板如圖1-2-6所示，在左邊的下拉列表框中將增加“我的第1個(gè)站點(diǎn)”列表項(xiàng)。

1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)

圖1-2-5

“站點(diǎn)定義為”（基本）對(duì)話框四圖1-2-6

“文件”面板1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)（8）如果要重新進(jìn)行站點(diǎn)設(shè)置，可單擊“站點(diǎn)”→“管理站點(diǎn)”菜單命令，重新彈出“管理站點(diǎn)”對(duì)話框。單擊選中站點(diǎn)的名稱，再單擊該對(duì)話框中的“編輯”按鈕，即可彈出如圖1-2-2所示的“站點(diǎn)定義為”對(duì)話框（標(biāo)題名稱會(huì)改為“我的第1個(gè)站點(diǎn)的站點(diǎn)定義為”）。1.2.2建立本地站點(diǎn)的文件夾和網(wǎng)頁(yè)文檔將鼠標(biāo)指針移到“文件”窗口中，在文件名稱上單擊鼠標(biāo)右鍵，彈出快捷菜單，再單擊快捷菜單內(nèi)的“新建文件夾”菜單命令，可以新建一個(gè)文件夾（例如：MP3、GIF、JPG和SWF等），如圖1-2-7左圖所示。單擊該快捷菜單內(nèi)的“新建文件”菜單命令，可以新建一個(gè)網(wǎng)頁(yè)文檔，然后可輸入主頁(yè)的名字“LXINDEX1.htm”，如圖1-2-7右圖所示。雙擊該文檔圖標(biāo)，即可進(jìn)入該網(wǎng)頁(yè)的編輯窗口，在該窗口內(nèi)，可以編輯新的網(wǎng)頁(yè)。

1.2建立本地站點(diǎn)和制作

第1個(gè)網(wǎng)頁(yè)

圖1-2-7

“文件”面板1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)1.3.1文本輸入1．文本的直接輸入和導(dǎo)入最簡(jiǎn)單的輸入方法是鍵盤輸入，也可以在其他的程序或窗口中選中一些文本，按Ctrl+C鍵，將文本復(fù)制到剪貼板上；然后回到DreamweaverMX2004“設(shè)計(jì)”視圖窗口中，按Ctrl+V鍵，將其粘貼到光標(biāo)所在位置處。在DreamweaverMX2004中，對(duì)從外部導(dǎo)入數(shù)據(jù)的功能已經(jīng)進(jìn)行了改善，它不僅可以保留文本，還可以保留段落的格式和文本的樣式。在“設(shè)計(jì)”視圖窗口中，直接按Enter鍵的效果除了換行外，還會(huì)多空一行，這表示將開(kāi)始一個(gè)新的段落。如果覺(jué)得這樣換行后間距過(guò)大，可在輸入文本后，按Shift+Enter鍵，表示一個(gè)新行將產(chǎn)生在當(dāng)前行的下面，但仍屬當(dāng)前段落，并使用該段落的現(xiàn)有格式。在DreamweaverMX2004“設(shè)計(jì)”視圖窗口中，對(duì)文本的許多操作與在Word中的操作基本一樣。例如，選取文本、刪除文本和復(fù)制文本等操作。2．使用“插入”欄直接輸入和使用單擊“插入”欄上的“文本”標(biāo)簽后，“插入”（文本）欄如圖1-3-1所示。

1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)

圖1-3-1

“插入”（文本）欄1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)在“插入”（文本）欄中有許多文本格式控制按鈕，通過(guò)這些按鈕可以方便地設(shè)置文本的格式。單擊該欄中的“字體標(biāo)簽編輯器”按鈕，將彈出“標(biāo)簽編輯器”對(duì)話框，如圖1-3-2所示。利用該對(duì)話框可以設(shè)置文本的字體、大小和顏色等，還可以編輯文本字體列表。3．插入特殊字符（1）單擊“插入”（文本）欄內(nèi)的字符按鈕，可插入一些特殊字符。依次單擊“插入”（文本）欄的字符按鈕（不含最下邊的“其他字符”按鈕），會(huì)在頁(yè)面編輯窗口內(nèi)顯示“©”;“®”等代碼，在瀏覽器內(nèi)會(huì)顯示“?”“?”等字符。（2）單擊“其他字符”按鈕，將彈出“插入其他字符”對(duì)話框，如圖1-3-3所示。單擊該對(duì)話框中的一個(gè)按鈕，即可在“插入”文本框內(nèi)顯示相應(yīng)的代碼，再單擊“確定”按鈕，即可在頁(yè)面內(nèi)插入一個(gè)特殊字符的代碼。

1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)

圖1-3-2

“標(biāo)簽編輯器”對(duì)話框

圖1-3-3

“插入其他字符”對(duì)話框

1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)1.3.2文本屬性設(shè)置文本的屬性可以通過(guò)如圖1-3-4所示的文本“屬性”欄和“文本”菜單來(lái)設(shè)定。

圖1-3-4

文本的“屬性”欄1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)1．文本標(biāo)題格式設(shè)置根據(jù)HTML規(guī)定，頁(yè)面的文本有6種標(biāo)題格式，它們所對(duì)應(yīng)的字號(hào)大小和段落對(duì)齊方式都是設(shè)定好的。在“格式”下拉列表框內(nèi)，可以選擇各種格式。（1）“無(wú)”選項(xiàng)：用來(lái)設(shè)置無(wú)特殊格式，它規(guī)定文本格式僅決定于文本本身。（2）“段落”選項(xiàng)：正文段落，在文本的開(kāi)始與結(jié)尾處有換行，各行的文本間距較小。（3）“標(biāo)題1”至“標(biāo)題6”選項(xiàng)：用來(lái)設(shè)置標(biāo)題1至標(biāo)題6，約為1至6號(hào)字大小。（4）“預(yù)先格式化的”選項(xiàng)：用來(lái)設(shè)置預(yù)定義的格式。2．文本字體設(shè)置DreamweaverMX2004使用了字體組合的方法，取代了簡(jiǎn)單地給文本指定一種字體的方法。字體組合就是多個(gè)不同字體依次排列的組合。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可給文本指定一種字體組合。在網(wǎng)頁(yè)瀏覽器中瀏覽該網(wǎng)頁(yè)時(shí)，系統(tǒng)會(huì)按照字體組合中指定的字體順序自動(dòng)尋找用戶計(jì)算機(jī)中安裝的字體。采用這種方法可以照顧各種瀏覽器和安裝不同操作系統(tǒng)的計(jì)算機(jī)。

1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)單擊“字體”下拉列表框的按鈕，可以調(diào)出Dreamweaver提供的各種字體組合選項(xiàng)，如圖1-3-5所示。單擊某一個(gè)字體組合的名稱，即可設(shè)置該字體組合。設(shè)置新字體組合的方法如下。（1）單擊如圖1-3-5所示的字體組合列表項(xiàng)中的“編輯字體列表”選項(xiàng)，彈出“編輯字體列表”對(duì)話框，如圖1-3-6所示。單擊選中“字體列表”列表框內(nèi)的“（在以下列表中添加字體）”選項(xiàng)。

1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)

圖1-3-5

字體組合列表項(xiàng)圖1-3-6

“編輯字體列表”對(duì)話框1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)（2）在“可用字體”列表框內(nèi)單擊選中字體后再單擊按鈕，或者雙擊“可用字體”列表框內(nèi)的字體名稱，將選中的字體加到“選擇的字體”列表框內(nèi)。按照上述方法，依次往“選擇的字體”列表框內(nèi)加入字體組合中的各種字體。此時(shí)，會(huì)看到在“字體列表”列表框內(nèi)最下邊隨之顯示出新的字體組合。單擊該對(duì)話框中的“確定”按鈕，即可完成字體組合的創(chuàng)建。（3）如果要?jiǎng)h除字體組合中的一種字體，單擊選中“選擇的字體”列表框內(nèi)該字體的名稱，再單擊按鈕。如果要?jiǎng)h除一個(gè)字體組合，可在“字體列表”列表框內(nèi)單擊選中該字體組合，再單擊“編輯字體列表”對(duì)話框中的按鈕。（4）如果還要增加字體組合，可以單擊“編輯字體列表”對(duì)話框中的按鈕，使“字體列表”列表框內(nèi)增加“在以下列表中添加字體”選項(xiàng)。3．文本字號(hào)和樣式設(shè)置（1）文本大小設(shè)置。單擊選中文本“屬性”欄內(nèi)“大小”下拉列表框中的一種字號(hào)數(shù)字或“極小”等選項(xiàng)，即可完成字大小的設(shè)置。文本字號(hào)的數(shù)字越大，文本也越大。

1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)（2）文本樣式設(shè)置。在“樣式”下拉列表框中可以選擇一種文本樣式。單擊“樣式”下拉列表中的“管理樣式”選項(xiàng)，將彈出“編輯樣式表”對(duì)話框。單擊“新建”按鈕，將彈出“新建CSS樣式”對(duì)話框。利用該對(duì)話框，可以設(shè)置一種新的文本樣式。4．文本的對(duì)齊與縮進(jìn)設(shè)置（1）文本的對(duì)齊設(shè)置。文本的對(duì)齊是指一行或多行文本在水平方向的位置。在將光標(biāo)定位到文本所在的行后，單擊文本“屬性”欄內(nèi)的（左對(duì)齊）、（居中對(duì)齊）和（右對(duì)齊）按鈕來(lái)實(shí)現(xiàn)。（2）文本的縮進(jìn)設(shè)置：將光標(biāo)定位到文本所在的行，再單擊文本“屬性”欄內(nèi)的（減少縮進(jìn)，向左移兩個(gè)單位）按鈕或（增加縮進(jìn)，向右移兩個(gè)單位）按鈕。5．文本樣式與顏色設(shè)置（1）文本樣式的設(shè)置。選中網(wǎng)頁(yè)中的文本，單擊文本“屬性”欄內(nèi)的按鈕，即可將選中的文本設(shè)置為粗體；單擊文本“屬性”欄內(nèi)的按鈕，即可將選中的文本設(shè)置為斜體。

1.3“DreamweaverMX2004學(xué)習(xí)天地”網(wǎng)頁(yè)（2）設(shè)置文本顏色。單擊文本“屬性”欄內(nèi)的“文本顏色”按鈕，調(diào)出顏色面板，如圖1-2-13所示。利用該面板可以設(shè)置文本的顏色。6．文本列表屬性設(shè)置（1）設(shè)置無(wú)序列表和有序列表。選中要排列的文本段，單擊文本“屬性”欄內(nèi)的按鈕，可設(shè)置無(wú)序列表；選中要排列的文本段，單擊文本“屬性”欄內(nèi)的按鈕，可設(shè)置有序列表。（2）定義列表方式。選中要排列的文本段，再單擊“文本”→“列表”→“定義列表”菜單命令。采用這種列表方式的效果是：奇數(shù)行靠左，偶數(shù)行向右縮進(jìn)。

1.4“星座圖片瀏覽”網(wǎng)頁(yè)1.4.1插入和編輯圖像1．利用“插入”（常用）欄中的“圖像”按鈕（1）單擊“插入”（常用）欄內(nèi)的“圖像”按鈕，將彈出“選擇圖像源”對(duì)話框。如果“圖像”按鈕處顯示的不是“圖像”按鈕，可以單擊旁邊的倒三角，再單擊彈出的快捷菜單中的“圖像”按鈕。（2）在“選擇圖像源”對(duì)話框選中圖像文件后，單擊“確認(rèn)”按鈕，即可將選中的圖像加入到頁(yè)面的光標(biāo)處。通常所選圖像應(yīng)放在站點(diǎn)文件夾下的圖像文件夾內(nèi)。（3）在“選擇圖像源”對(duì)話框內(nèi)，“URL”文本框內(nèi)會(huì)給出該圖像的路徑。在“相對(duì)于”下拉列表框內(nèi)，如果選擇“文檔”選項(xiàng)，則“URL”文本框內(nèi)會(huì)給出該圖像文件相對(duì)于當(dāng)前網(wǎng)頁(yè)文檔的路徑和文件名，例如，GIF/P1.gif。如果選擇“站點(diǎn)根目錄”選項(xiàng)，則“URL”文本框內(nèi)會(huì)給出以站點(diǎn)目錄為根目錄的路徑，例如，/GIF/P1.gif。

1.4“星座圖片瀏覽”網(wǎng)頁(yè)選擇“站點(diǎn)根目錄”選項(xiàng)后，如果整個(gè)站點(diǎn)文件夾移動(dòng)了位置，也不會(huì)出現(xiàn)斷鏈現(xiàn)象。2．用鼠標(biāo)拖曳圖像在Windows的“我的電腦”或“資源管理器”中，用鼠標(biāo)拖曳一個(gè)圖像文件的圖標(biāo)到網(wǎng)頁(yè)文檔窗口內(nèi)，即可將圖像加入到頁(yè)面內(nèi)的指定位置。雙擊頁(yè)面內(nèi)的圖像，將彈出“選擇圖像源”對(duì)話框，供用戶更換圖像。3．移動(dòng)、復(fù)制、刪除圖像和調(diào)整圖像的大?。?）移動(dòng)和復(fù)制圖像。單擊選中要編輯的圖像，這時(shí)圖像周圍會(huì)出現(xiàn)幾個(gè)黑色方形的小控制柄。如果要移動(dòng)或復(fù)制圖像，可以像移動(dòng)文字那樣，用鼠標(biāo)拖曳圖像到目標(biāo)點(diǎn)，即可移動(dòng)圖像；按住Ctrl鍵并用鼠標(biāo)拖曳圖像到目標(biāo)點(diǎn)，即可復(fù)制圖像。（2）刪除圖像。先選中要?jiǎng)h除的圖像，再按刪除鍵即可，還可以將它剪切到剪貼板中。（3）簡(jiǎn)單調(diào)整圖像大小。單擊選中要調(diào)整的圖像，用鼠標(biāo)拖曳其控制柄。按住Shift鍵，同時(shí)用鼠標(biāo)拖曳圖像周圍的小控制柄，可以在保證圖像長(zhǎng)寬比不變的情況下調(diào)整圖像大小。

1.4“星座圖片瀏覽”網(wǎng)頁(yè)4．圖像的“屬性”欄在頁(yè)面中加入圖像后，如果要精確調(diào)整圖像的大小和位置，必須使用圖像“屬性”欄。在選中圖像后，圖像“屬性”欄如圖1-4-1所示。

圖1-4-1

圖像“屬性”欄1.4“星座圖片瀏覽”網(wǎng)頁(yè)（1）精確調(diào)整圖像的大小。在“寬”文本框內(nèi)輸入圖像的寬度，系統(tǒng)默認(rèn)的單位是像素（pixels），如果要使用其他單位，則必須在輸入數(shù)字后再輸入單位名稱，例如：in（英寸，1in=96pixels）、mm（毫米，1mm=3.8pixels）、pt（磅，1pt=4／3pixels）和pc（派卡，1pc=16pixels）等。用同樣的方法可在“高”文本框內(nèi)輸入圖像的高度。％表示圖像占文檔窗口的寬度和長(zhǎng)度百分比，設(shè)置后，圖像的大小會(huì)跟隨文檔窗口的大小自動(dòng)進(jìn)行調(diào)整。若不管頁(yè)面大小，只想占頁(yè)面寬度的60％，可在“寬”文本框中輸入60％。如果要還原圖像大小的初始值，可單擊和文字或刪除“寬”和“高”文本框中的數(shù)值。要想將寬度和長(zhǎng)度全部還原，則可單擊“重設(shè)大小”按鈕。（2）調(diào)整圖像的位置。單擊選中要調(diào)整位置的圖像，或?qū)⒐鈽?biāo)移到圖像所在行處，單擊（居左）、（居中）或（居右）按鈕，即可將該行的圖像位置進(jìn)行調(diào)整。

1.4“星座圖片瀏覽”網(wǎng)頁(yè)（3）圖像的路徑?！霸次募蔽谋究騼?nèi)給出了圖像文件的路徑。文件路徑可以是絕對(duì)路徑（file:///F|/WEB1/JPG/T1.GIF，圖像文件不在站點(diǎn)文件夾內(nèi)），也可以是相對(duì)路徑（PICTURE/T1.GIF或/PICTURE/T1.GIF，圖像文件在站點(diǎn)文件夾內(nèi)）。單擊“源文件”右邊的按鈕，即彈出“選擇圖像源”對(duì)話框，利用它可以更換圖像。（4）鏈接?！版溄印蔽谋究騼?nèi)給出了被鏈接文件的路徑。超鏈接所指向的對(duì)象可以是一個(gè)網(wǎng)頁(yè)，也可以是一個(gè)具體的文件。設(shè)置圖像鏈接后，用戶在瀏覽網(wǎng)頁(yè)時(shí)只要單擊該圖像，即可打開(kāi)相關(guān)的網(wǎng)頁(yè)或文件。建立超鏈接有以下3種方法。①直接輸入鏈接地址URL。②拖曳指向文件圖標(biāo)到“站點(diǎn)”窗口要鏈接的文件上。③單擊該文本框右邊的“文件夾”按鈕，彈出“選擇文件”對(duì)話框，利用該對(duì)話框選定文件。

1.4“星座圖片瀏覽”網(wǎng)頁(yè)圖1-4-2顯示圖像的文字提示說(shuō)明（5）圖像命名。在圖像“屬性”欄的左上角會(huì)顯示縮小的選中的圖像，圖像的右邊會(huì)顯示它的字節(jié)數(shù)?？梢栽凇皥D象”文本框內(nèi)輸入圖像的名字，以后可以使用腳本語(yǔ)言（JavaScript、VBScript等）對(duì)它進(jìn)行引用。（6）給圖像加文字提示說(shuō)明。選中要加文字提示說(shuō)明的圖像，再在圖像“屬性”欄內(nèi)的“替代”下拉列表框中輸入圖像的文字提示說(shuō)明。用瀏覽器調(diào)出圖像頁(yè)面后，將鼠標(biāo)移到加文字提示說(shuō)明的圖像上或發(fā)生斷鏈現(xiàn)象時(shí)，即可出現(xiàn)相應(yīng)的文字提示，如圖1-4-2示。

1.4“星座圖片瀏覽”網(wǎng)頁(yè)

圖1-4-2

顯示圖像的文字提示說(shuō)明1.4“星座圖片瀏覽”網(wǎng)頁(yè)5．使用“編輯”欄中的編輯工具編輯圖像圖1-4-3“編輯”欄中的圖像編輯工具使用圖像“屬性”欄中的“編輯”欄內(nèi)的圖像編輯工具（如圖1-4-3所示），可以對(duì)網(wǎng)頁(yè)中插入的圖像進(jìn)行編輯。另外，DreamweaverMX2004可以將外部圖像處理軟件變?yōu)镈reamweaver的附屬圖像處理軟件。（1）使用Fireworks進(jìn)行圖像的最優(yōu)化。選中圖像后，單擊圖像“屬性”欄中的“使用Fireworks最優(yōu)化”按鈕，將彈出Fireworks和“查找源”對(duì)話框。單擊“查找源”對(duì)話框中的“使用此文件”按鈕，會(huì)在Fireworks中打開(kāi)選中的圖像。利用Fireworks可以直接編輯網(wǎng)頁(yè)中選中的圖像，對(duì)它進(jìn)行優(yōu)化處理。編輯完圖像后，單擊Fireworks中的“完成”按鈕，即可回到Dreamweaver，同時(shí)圖像也完成了編輯修改。

1.4“星座圖片瀏覽”網(wǎng)頁(yè)

圖1-4-3

“編輯”欄中的圖像編輯工具1.4“星座圖片瀏覽”網(wǎng)頁(yè)（2）裁切圖像。單擊“裁切”按鈕，會(huì)彈出一個(gè)信息提示框，如圖1-4-4所示。單擊“確定”按鈕后，選中的圖像四周會(huì)顯示8個(gè)黑色控制柄，如圖1-4-5左圖所示。用鼠標(biāo)拖曳這些控制柄，調(diào)整裁切區(qū)域的大小和位置，按回車鍵即可裁切圖像，如圖1-4-5右圖所示。

圖1-4-4

信息對(duì)話框圖1-4-5

裁切圖像1.4“星座圖片瀏覽”網(wǎng)頁(yè)（3）調(diào)整圖像的亮度和對(duì)比度。單擊“亮度和對(duì)比度”按鈕，會(huì)彈出“亮度/對(duì)比度”對(duì)話框，如圖1-4-6所示。利用該對(duì)話框可以調(diào)整選中圖像的亮度和對(duì)比度。（4）調(diào)整圖像的銳度。單擊“銳化”按鈕，會(huì)彈出“銳化”對(duì)話框，如圖1-4-7所示。利用該對(duì)話框可以調(diào)整選中圖像的銳度。

圖1-4-6

“亮度/對(duì)比度”對(duì)話框圖1-4-7“銳度”對(duì)話框1.4“星座圖片瀏覽”網(wǎng)頁(yè)（5）重新取樣。在網(wǎng)頁(yè)圖像進(jìn)行調(diào)整后，“重新取樣”按鈕會(huì)變?yōu)橛行?，單擊它可使圖像重新取樣。1.4.2圖文混排圖1-4-8文字對(duì)齊含義當(dāng)網(wǎng)頁(yè)內(nèi)有文字和圖像混排時(shí)，系統(tǒng)默認(rèn)的狀態(tài)是圖像的下沿和它所在的文字行的下沿對(duì)齊。如果圖像較大，則頁(yè)面內(nèi)的文字與圖像的布局會(huì)很不協(xié)調(diào)，因此需要調(diào)整它們的布局。調(diào)整圖像與文字混排的布局需要使用圖像“屬性”欄。1．圖像與文字相對(duì)位置的調(diào)整圖像“屬性”欄內(nèi)的“對(duì)齊”下拉列表框中有10個(gè)選項(xiàng)，用來(lái)進(jìn)行圖像與文字相對(duì)位置的調(diào)整。這些選項(xiàng)的含義可參見(jiàn)圖1-4-8，同時(shí)進(jìn)行實(shí)際操作來(lái)驗(yàn)證。

1.4“星座圖片瀏覽”網(wǎng)頁(yè)

圖1-4-8

文字對(duì)齊含義1.4“星座圖片瀏覽”網(wǎng)頁(yè)2．圖像與文字間距的調(diào)整圖像與文字的間距是指圖像與文字水平方向和垂直方向的間距。這可以通過(guò)改變“水平邊距”和“垂直邊距”文本框內(nèi)的數(shù)值來(lái)實(shí)現(xiàn)，數(shù)值的單位是像素。如果在“對(duì)齊”下拉列表框內(nèi)選擇“左對(duì)齊”選項(xiàng)，在“水平邊距”文本框內(nèi)輸入40，“垂直邊距”文本框內(nèi)輸入30，則圖文混排的效果如圖1-4-9所示。

圖1-4-9

設(shè)置圖文間距后的圖文混排效果

1.4“星座圖片瀏覽”網(wǎng)頁(yè)1.4.3翻轉(zhuǎn)圖和拼圖1．翻轉(zhuǎn)圖像圖1-4-10翻轉(zhuǎn)圖的初始和翻轉(zhuǎn)后的圖像翻轉(zhuǎn)圖像即鼠標(biāo)經(jīng)過(guò)圖像，它是一種最簡(jiǎn)單、有趣的動(dòng)態(tài)網(wǎng)頁(yè)效果。當(dāng)瀏覽器調(diào)入有翻轉(zhuǎn)圖的網(wǎng)頁(yè)頁(yè)面時(shí)，頁(yè)面顯示的是翻轉(zhuǎn)圖的初始圖像，當(dāng)鼠標(biāo)指針移到該圖像上邊時(shí)，該圖像會(huì)迅速變?yōu)榱硪环鶊D像，當(dāng)鼠標(biāo)指針移出圖像時(shí)，圖像又會(huì)恢復(fù)為初始圖像。圖1-4-10左圖給出了翻轉(zhuǎn)圖的初始圖像，右圖給出了翻轉(zhuǎn)圖變化后的圖像。創(chuàng)建翻轉(zhuǎn)圖像的方法如下。

圖1-4-10

翻轉(zhuǎn)圖的初始和翻轉(zhuǎn)后的圖像1.4“星座圖片瀏覽”網(wǎng)頁(yè)（1）準(zhǔn)備兩幅最好一樣大小的圖像，而且有一定的含義和聯(lián)系，如圖1-4-10所示。（2）單擊“插入”（常用）欄中的“圖像”快捷菜單中的“鼠標(biāo)經(jīng)過(guò)圖像”按鈕，彈出“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，如圖1-4-11所示。

圖1-4-11

“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框1.4“星座圖片瀏覽”網(wǎng)頁(yè)（3）利用“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框設(shè)置翻轉(zhuǎn)圖像的屬性。①“圖像名稱”文本框。在該文本框內(nèi)輸入圖像的名字，以后可以使用腳本語(yǔ)言（Java-Script、VBScript等）對(duì)它進(jìn)行引用。②“原始圖像”文本框。單擊它右邊的“瀏覽”按鈕，可以彈出“原始圖像”（OriginalImage）對(duì)話框，利用“原始圖像”對(duì)話框可

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論