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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

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

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

圖1-1-1

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

圖1-1-1

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

圖1-1-2

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

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

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

圖1-1-3

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

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

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

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

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

圖1-1-6

“標尺”的下一級菜單圖1-1-7

移動前的標尺情況圖1-1-8

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

圖1-1-9

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

圖1-1-10

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

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

圖1-1-11

“屬性”欄1.1DreamweaverMX2004的工作界面和基本操作沒有選中任何對象時單擊“屬性”欄右邊的按鈕，可在光標當前位置添加HTML；選中一個對象時單擊按鈕，可以編輯相應標簽的HTML。單擊“窗口”→“屬性”菜單命令，可以在打開和關閉“屬性”欄之間切換。2．“插入”欄“插入”欄也叫“對象”面板或“對象”欄，如圖1-1-12所示。它集成了DreamweaverMX2004“插入”菜單中的所有插入對象命令。在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個標簽項或8個與標簽名稱相同的菜單命令。當“插入”欄為制表符狀態(tài)時，可以使用鼠標拖曳“插入”欄左邊的圖標，將“插入”欄變?yōu)楦用姘濉Ｒ话阌脩袅晳T使用制表符狀態(tài)的“插入”欄。在制表符狀態(tài)下，每一個標簽內(nèi)有多個用于插入對象的按鈕。單擊標簽可以切換標簽項，單擊標簽內(nèi)的對象按鈕或者將相應的按鈕圖標拖曳到文檔窗口中，可將相應的對象插入到網(wǎng)頁中。對于有些對象，會在單擊對象按鈕或拖曳按鈕圖標后，調(diào)出一個相應的設置對話框，進行完設置后，單擊“確定”按鈕才可以真正在文檔窗口（即網(wǎng)頁）中插入對象。如果在插入對象的同時按住Ctrl鍵，就可以避免出現(xiàn)一個選擇對象對話框，而是直接插入一個相應類型的空對象，如果以后要給該空對象賦予相應內(nèi)容，可以雙擊該對象。

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

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

圖1-1-14

浮動面板

圖1-1-15

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

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

圖1-1-16

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

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

圖1-1-18

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

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

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

圖1-1-19

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

1.2建立本地站點和制作

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

1.2建立本地站點和制作

第1個網(wǎng)頁

圖1-2-1

“管理站點”對話框圖1-2-2

“站點定義為”（基本）對話框一1.2建立本地站點和制作

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

圖1-2-3

“站點定義為”（基本）對話框二1.2建立本地站點和制作

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

1.2建立本地站點和制作

第1個網(wǎng)頁

圖1-2-4

“站點定義為”（基本）對話框三1.2建立本地站點和制作

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

1.2建立本地站點和制作

第1個網(wǎng)頁

圖1-2-5

“站點定義為”（基本）對話框四圖1-2-6

“文件”面板1.2建立本地站點和制作

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

1.2建立本地站點和制作

第1個網(wǎng)頁

圖1-2-7

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

1.3“DreamweaverMX2004學習天地”網(wǎng)頁

圖1-3-1

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

1.3“DreamweaverMX2004學習天地”網(wǎng)頁

圖1-3-2

“標簽編輯器”對話框

圖1-3-3

“插入其他字符”對話框

1.3“DreamweaverMX2004學習天地”網(wǎng)頁1.3.2文本屬性設置文本的屬性可以通過如圖1-3-4所示的文本“屬性”欄和“文本”菜單來設定。

圖1-3-4

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

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

1.3“DreamweaverMX2004學習天地”網(wǎng)頁

圖1-3-5

字體組合列表項圖1-3-6

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

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

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

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

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

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

圖1-4-1

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

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

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

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

圖1-4-2

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

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

圖1-4-3

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

圖1-4-4

信息對話框圖1-4-5

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

圖1-4-6

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

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

圖1-4-8

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

圖1-4-9

設置圖文間距后的圖文混排效果

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

圖1-4-10

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

圖1-4-11

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

溫馨提示

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

最新文檔

評論

0/150

提交評論