全套課件-《Dreamweaver-8案例教程》-蘇玉雄_第1頁(yè)
全套課件-《Dreamweaver-8案例教程》-蘇玉雄_第2頁(yè)
全套課件-《Dreamweaver-8案例教程》-蘇玉雄_第3頁(yè)
全套課件-《Dreamweaver-8案例教程》-蘇玉雄_第4頁(yè)
全套課件-《Dreamweaver-8案例教程》-蘇玉雄_第5頁(yè)
已閱讀5頁(yè)，還剩436頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Dreamweaver8案例教程第1章

Dreamweaver8概述

本章學(xué)習(xí)目標(biāo)Dreamweaver8的安裝與啟動(dòng)1.1Dreamweaver的工作界面1.2Dreamweaver8的新增功能1.3使用Dreamweaver8的幫助1.5Dreamweaver8的快捷鍵1.41.1Dreamweaver8的安裝與啟動(dòng)

MacromediaDreamweaver8是一款專業(yè)的HTML編輯器，用于對(duì)Web站點(diǎn)、Web頁(yè)和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。無論您是喜歡直接編寫HTML代碼的駕馭感還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver8都會(huì)為您提供幫助良多的工具，豐富您的Web創(chuàng)作體驗(yàn)。1.1.1安裝軟件所需的系統(tǒng)配置Dreamweaver8多計(jì)算機(jī)系統(tǒng)的要求不是很高，下面列出了運(yùn)行Dreamweaver8所需的最低軟件和硬件要求：（1）PentiumII以上，或兼容處理器；（2）800×600真彩色顯示器，建議使用1024×768或更高配置；（3）CD-ROM驅(qū)動(dòng)器；（4）Windows支持的顯示卡；（5）256MB內(nèi)存，建議使用512MB。（6）300MB剩余硬盤空間；（7）鼠標(biāo)、軌跡球或其它定點(diǎn)設(shè)備；（8）WindowsNT4.0或更高版本、Windows2000、WindowsXPProfessional等；（9）可選硬件包括：打印機(jī)或繪圖儀、數(shù)字化儀、串口或并口、網(wǎng)絡(luò)卡、調(diào)制解調(diào)器或其他訪問Internet的連接設(shè)備。1.1.2Dreamweaver8的安裝在安裝Dreamweaver8之前，請(qǐng)關(guān)閉所有正在運(yùn)行的應(yīng)用程序。安裝步驟如下：（1）要確保關(guān)閉了所有防毒軟件，將Dreamweaver8的安裝盤插入CD-ROM驅(qū)動(dòng)器，稍后即可出現(xiàn)Dreamweaver8的安裝界面，如圖1-1所示。1.1.2Dreamweaver8的安裝（2）接著將看到如圖1-2所示的安裝提示，單擊“下一步”；（3）選擇“我接受該許可證協(xié)議中的條款（A）”，然后在單擊“下一步”，如圖1-3所示；1.1.2Dreamweaver8的安裝（3）選擇“我接受該許可證協(xié)議中的條款（A）”，然后在單擊“下一步”，如圖1-3所示；（4）接著將看到如圖1-4所示的界面，如果要更改Dreamweaver8軟件的安裝路徑，請(qǐng)單擊“更改”按紐，在“選擇要?jiǎng)?chuàng)建的快捷方式”中，可以選一個(gè)也可兩個(gè)都選，然后單擊“下一步”；1.1.2Dreamweaver8的安裝（5）在如圖1-5所示的界面中，可根據(jù)自身需要來進(jìn)行選擇，在這里我們選擇默認(rèn)“全選”，然后單擊“下一步”；（6）然后單擊“安裝”如圖1-6所示，Dreamweaver8就開始正式安裝了；1.1.2Dreamweaver8的安裝（7）正確安裝完Dreamweaver8中文版后，若在步驟（4）中選中“在桌面上創(chuàng)建快捷方式”，則在計(jì)算機(jī)桌面上，將自動(dòng)生成Dreamweaver8中文版快捷圖標(biāo)。1.2Dreamweaver的工作界面Dreamweaver8的工作界面主要包括有標(biāo)題欄、菜單欄、文檔工具欄、文檔窗口、狀態(tài)欄、插入面版、屬性面版和CSS樣式面版。本節(jié)將主要介紹Dreamweaver8的工作界面。首先啟動(dòng)Dreamweaver8，將顯示如圖1-7所示的界面。1.2.1標(biāo)題欄在大多數(shù)的Windows應(yīng)用程序里面都有，Dreamweaver8的標(biāo)題欄在應(yīng)用程序的最上面，它的左側(cè)用來顯示當(dāng)前正在運(yùn)行的應(yīng)用程序名稱，它的右側(cè)為最小化、最大化（還原）和關(guān)閉按鈕，如所示。需要說明的是，圖1-8所示的標(biāo)題是默認(rèn)的文檔標(biāo)題UntitledDocument，顯示的文件名為Untitled-1。每當(dāng)用戶創(chuàng)建一個(gè)新的文檔時(shí)，Dreamweaver8就會(huì)自動(dòng)以Untitled給出一個(gè)默認(rèn)的名字。當(dāng)用戶保存文件時(shí)，系統(tǒng)會(huì)提示用戶另外命名一個(gè)名字，當(dāng)然用戶也可以以默認(rèn)的名字來保存。1.2.2菜單欄標(biāo)題欄的下面是菜單欄，包括有“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“命令”、“站點(diǎn)”、“窗口”、“幫助”10個(gè)菜單項(xiàng)，如圖1-9所示。在Dreamweaver8中，單擊菜單欄中的菜單項(xiàng)，將彈出對(duì)應(yīng)的下拉菜單。下拉菜單包含了Dreamweaver8的主要功能，通過鼠標(biāo)選擇菜單中的某個(gè)選項(xiàng)，Dreamweaver8就執(zhí)行相應(yīng)的命令。Dreamweaver8菜單選項(xiàng)有以下3種形式：

（1）子菜單命令：該類命令的名稱后面帶有一個(gè)向右的小三角箭頭，當(dāng)鼠標(biāo)移動(dòng)到該類命令上時(shí)，就會(huì)打開一個(gè)子菜單。例如在“插入”菜單下的“媒體”菜單命令，如圖1-10。（2）開關(guān)命令：該命令在命令執(zhí)行后，命令的左邊會(huì)加上“

”的選擇標(biāo)記。例如在“查看”菜單下的“設(shè)計(jì)”菜單命令，如圖1-11。（3）對(duì)話框命令：該類命令的名稱后面帶有一個(gè)省略號(hào)，單擊該類命令則會(huì)打開一個(gè)對(duì)話框。例如在“插入”菜單下的“表格”菜單命令，則會(huì)彈出如圖1-12的對(duì)話框。

1.2.3文檔工具欄“文檔”工具欄中包含按鈕，這些按鈕使您可以在文檔的不同視圖間快速切換：“代碼”視圖、“設(shè)計(jì)”視圖、同時(shí)顯示“代碼”和“設(shè)計(jì)”視圖的拆分視圖。工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)?！拔臋n”工具欄的位置如圖1-13所示。1.2.4文檔窗口文檔窗口顯示當(dāng)前文檔?？梢赃x擇下列任一視圖：（1）設(shè)計(jì)視圖：是一個(gè)用于可視化頁(yè)面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，Dreamweaver顯示文檔的完全可編輯的可視化表示形式，類似于在瀏覽器中查看頁(yè)面時(shí)看到的內(nèi)容。（2）代碼視圖：是一個(gè)用于編寫和編輯HTML、JavaScript、服務(wù)器語(yǔ)言代碼（如PHP或ColdFusion標(biāo)記語(yǔ)言）以及任何其它類型代碼的手工編碼環(huán)境。（3）代碼和設(shè)計(jì)視圖：可以在單個(gè)窗口中同時(shí)看到同一文檔的代碼視圖和設(shè)計(jì)視圖。當(dāng)文檔窗口有一個(gè)標(biāo)題欄時(shí)，標(biāo)題欄顯示頁(yè)面標(biāo)題，并在括號(hào)中顯示文件的路徑和文件名。如果您做了更改但尚未保存，Dreamweaver將在文件名后顯示一個(gè)星號(hào)。1.2.5狀態(tài)欄文檔窗口底部的狀態(tài)欄顯示的是正創(chuàng)建的文檔有關(guān)的信息，如圖1-14所示。（1）標(biāo)簽選擇器：標(biāo)簽選擇器顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部?jī)?nèi)容。單擊<body>可以選擇文檔的整個(gè)正文。若要設(shè)置標(biāo)簽選擇器中某個(gè)標(biāo)簽的class或id屬性，請(qǐng)右鍵單擊(Windows)或按住Control鍵并單擊(Macintosh)該標(biāo)簽，然后從上下文菜單中選擇一個(gè)類或ID。標(biāo)簽選擇器是選擇標(biāo)簽的首選方法，因?yàn)樗梢源_保您始終準(zhǔn)確地選擇標(biāo)簽。（2）手形工具：可以用來單擊文檔并將其拖入“文檔”窗口。（3）“縮放”工具和“設(shè)置縮放比率”：“縮放”工具和“設(shè)置縮放比率”彈出式菜單可以讓您為文檔設(shè)置縮放比率。（4）“窗口大小”彈出式菜單：該菜單僅在“設(shè)計(jì)”視圖中可見。用來將“文檔”窗口的大小調(diào)整到預(yù)定義或自定義的尺寸?！按翱诖笮　睆棾鍪讲藛蔚挠覀?cè)是頁(yè)面的文檔大小和估計(jì)下載時(shí)間。1.2.6插入面版插入面版包含用于創(chuàng)建和插入對(duì)象（如表格、層和圖像）的按鈕，如圖1-15所示。當(dāng)鼠標(biāo)指針滾動(dòng)到一個(gè)按鈕上時(shí)，會(huì)出現(xiàn)一個(gè)工具提示，其中含有該按鈕的名稱。這些按鈕被組織到幾個(gè)類別中，您可以在“插入”欄的左側(cè)切換它們。當(dāng)前文檔包含服務(wù)器代碼時(shí)，還會(huì)顯示其它類別。當(dāng)您啟動(dòng)Dreamweaver時(shí)，系統(tǒng)會(huì)打開您上次使用的類別。1.2.7屬性面版屬性面版可以檢查和編輯當(dāng)前選定頁(yè)面元素（如文本和插入的對(duì)象）的最常用屬性。屬性面版中的內(nèi)容根據(jù)選定的元素會(huì)有所不同。例如，如果您選擇頁(yè)面上的一個(gè)圖像，則屬性面版將改為顯示該圖像的屬性如圖像的文件路徑、圖像的寬度和高度、圖像周圍的邊框等，如圖1-23所示。1.2.8CSS樣式面版使用CSS樣式面板可以跟蹤影響當(dāng)前所選頁(yè)面元素的CSS規(guī)則和屬性，如圖1-24所示。使用CSS樣式面板頂部的切換按鈕可以在兩種模式之間切換。使用CSS樣式面板還可以在“所有”和“當(dāng)前”模式下修改CSS屬性。1.3Dreamweaver8的新增功能Dreamweaver8包含了許多新增的功能，這些新增功能改善了軟件的易用性，并使您無論處于設(shè)計(jì)環(huán)境還是編碼環(huán)境都可以方便地制作頁(yè)面。1.3.1使用最佳做法（1）利用XML數(shù)據(jù)進(jìn)行可視化創(chuàng)作：使用功能強(qiáng)大的可視化工具，可快速利用XML將源集成到工作中，并揭開XML到HTML轉(zhuǎn)換的神秘面紗。（2）新的標(biāo)準(zhǔn)CSS面板：可以通過新的標(biāo)準(zhǔn)CSS面板集中學(xué)習(xí)、了解和使用以可視化方式應(yīng)用于頁(yè)面的CSS樣式。（3）CSS布局可視化：在設(shè)計(jì)時(shí)應(yīng)用可視化助理來描畫CSS布局邊框或?yàn)镃SS布局加上顏色。應(yīng)用可視化助理可揭示出復(fù)雜的嵌套方案，并改善所選內(nèi)容。（4）“樣式呈現(xiàn)”工具欄：利用新的CSS媒體類型支持，可按照與用戶所看到內(nèi)容相同的方式查看內(nèi)容，而不管傳送機(jī)制如何。使用“樣式呈現(xiàn)”工具欄可切換到“設(shè)計(jì)”視圖，以查看它在印刷品、手持設(shè)備或屏幕上的顯示方式。（5）改善的CSS呈現(xiàn)功能：“設(shè)計(jì)”視圖的準(zhǔn)確性有了顯著改善，從而能夠在大多數(shù)瀏覽器中呈現(xiàn)復(fù)雜的CSS布局。Dreamweaver現(xiàn)在完全支持高級(jí)CSS技術(shù)，如溢出、偽元素和表單元素。1.3.2完成更多工作

利用經(jīng)過優(yōu)化的用戶工作流程（縮短了完成常見任務(wù)所需的時(shí)間），可以在更短的時(shí)間內(nèi)完成更多的工作。Dreamweaver8消除了完成一些繁瑣操作的麻煩，因此您能夠花費(fèi)更多的時(shí)間來設(shè)計(jì)和開發(fā)出色的Web站點(diǎn)和應(yīng)用程序。（1）后臺(tái)文件傳輸：在Dreamweaver8將文件上載到服務(wù)器時(shí)繼續(xù)工作。（2）縮放：使用縮放可以更好地控制設(shè)計(jì)。放大并檢查圖像，或使用復(fù)雜的嵌套表格布局?？s小可預(yù)覽頁(yè)面的顯示方式。（3）輔助線：使用輔助線來測(cè)量頁(yè)面布局，將頁(yè)面布局和頁(yè)面模型加以比較，精度可達(dá)至像素級(jí)別。可視化反饋有助于準(zhǔn)確地測(cè)量距離，并且支持智能靠齊。（4）“編碼”工具欄：新的“編碼”工具欄在“代碼”視圖一側(cè)的溝槽欄中提供了用于常見編碼功能的按鈕。（5）代碼折疊通過隱藏和展開代碼塊，重點(diǎn)顯示您想要查看的代碼。1.3.3與最新技術(shù)和標(biāo)準(zhǔn)集成Dreamweaver8支持學(xué)習(xí)和利用新的技術(shù)，其中包括PHP5、Flash視頻、ColdFusionMX7和MacromediaWebPublishingSystem。（1）支持ColdFusionMX7：更新的ColdFusionMX7支持功能包括新的服務(wù)器行為和代碼提示。為了將代碼提示和調(diào)試功能與ColdFusion的正確版本相匹配，Dreamweaver將在第一次連接到站點(diǎn)時(shí)自動(dòng)檢測(cè)服務(wù)器版本。Dreamweaver與ColdFusion的緊密集成使您能夠直接從“數(shù)據(jù)庫(kù)”面板中添加和刪除數(shù)據(jù)庫(kù)，并查看當(dāng)前站點(diǎn)中定義的ColdFusion專有組件。（2）支持PHP5：利用更新的PHP5支持功能，其中包括服務(wù)器行為和代碼提示。（3）Flash視頻：快速便捷地將Flash視頻文件插入Web頁(yè)。（4）通知和事件記錄：跟蹤在站點(diǎn)內(nèi)進(jìn)行的每項(xiàng)操作。Dreamweaver中的事件可通知MacromediaWebPublishingSystem服務(wù)器，以便記錄WPS系統(tǒng)中的所有Web站點(diǎn)變更。1.4Dreamweaver8的快捷鍵同大多數(shù)設(shè)計(jì)軟件一樣，Dreamweaver8也擁有輔助設(shè)計(jì)用的“快捷鍵”?？旖萱I的最大功能是簡(jiǎn)化操作步驟，熟練運(yùn)用快捷鍵，可以大大提高工作效率。選擇“編輯”菜單下的“快捷鍵”命令，可以看到如圖1-25所示的圖片。1.4.1快捷鍵對(duì)話框快捷鍵管理器的各個(gè)選項(xiàng)功能如下：（1）當(dāng)前設(shè)置：允許您選擇Dreamweaver中提供的一組預(yù)定義快捷鍵或者任何一組您自定義的快捷鍵。預(yù)定義的快捷鍵組列在菜單的上方。例如，如果您很熟悉HomeSite或BBEdit中的快捷鍵，則可以通過選擇相應(yīng)的預(yù)定義組來使用這些快捷鍵。（2）命令：允許您選擇要編輯的命令類別。例如，您可以編輯菜單命令（如“打開”命令）或代碼編輯命令（如“平衡大括弧”）。（3）命令列表：顯示與您從“命令”彈出菜單中選擇的類別相關(guān)聯(lián)的命令以及指定的快捷鍵?！安藛蚊睢鳖悇e將該列表顯示為一個(gè)樹狀視圖，該視圖復(fù)制了菜單的結(jié)構(gòu)。其它的類別在一個(gè)平面列表中按名稱（如“退出應(yīng)用程序”）順序列出命令。（4）快捷鍵：顯示分配給選定命令的全部快捷鍵。1.4.2添加快捷鍵添加快捷鍵的步驟如下：（1）從“命令”彈出菜單中選擇一個(gè)命令類別?！懊睢绷斜盹@示該類別中的命令，若選擇文件類別，將顯示文件類別的相關(guān)快捷鍵，如圖1-26所示。（2）在“命令”列表中選擇一個(gè)命令。分配給該命令的快捷鍵顯示在“快捷鍵”文本框中，若選擇打開命令，則將顯示打開命令相應(yīng)的快捷鍵，如圖1-27所示。1.4.3編輯快捷鍵編輯快捷鍵的步驟如下：（1）從“命令”彈出菜單中選擇一個(gè)命令類別。“命令”列表顯示該類別中的命令。（2）在“命令”列表中選擇一個(gè)命令。分配給該命令的快捷鍵顯示在“快捷鍵”文本框中。（3）選擇要更改的快捷鍵，如圖1-29所示。（4）在“按鍵”文本框中單擊，然后輸入一個(gè)新的鍵組合，如圖1-30所示。（5）單擊“更改”按鈕以更改該快捷鍵。1.4.4刪除快捷鍵刪除快捷鍵的步驟如下：（1）從“命令”彈出菜單中選擇一個(gè)命令類別。“命令”列表顯示該類別中的命令。（2）在“命令”列表中選擇一個(gè)命令。分配給該命令的快捷鍵顯示在“快捷鍵”文本框中。（3）選擇一個(gè)快捷鍵。（4）單擊“刪除項(xiàng)(-)”按鈕。1.5使用Dreamweaver8的幫助當(dāng)我們?cè)趯W(xué)習(xí)的過程出現(xiàn)問題難以解決時(shí)，一個(gè)最好的辦法就是使用Dreamweaver8的在線幫助，下面我們介紹使用的在線幫助的方法。1.5.1打開幫助系統(tǒng)選擇“幫助”菜單下的“Dreamweaver幫助”，就可以打開Dreamweaver8幫助系統(tǒng)，如圖1-31所示。也可以直接按下F1鍵打開幫助系統(tǒng)。1.5.2使用幫助使用幫助系統(tǒng)查找所需要的信息可以按以下方法進(jìn)行：1、若要搜索產(chǎn)品中的幫助(Windows)，請(qǐng)執(zhí)行以下操作：（1）在Dreamweaver幫助中，單擊“搜索”選項(xiàng)卡。（2）在文本框中鍵入一個(gè)單詞或短語(yǔ)，然后單擊“列出主題”。（3）雙擊結(jié)果列表中的一個(gè)主題，可顯示該主題，如圖1-32所示。1.5.2使用幫助2、若要使用索引(Windows)，請(qǐng)執(zhí)行以下操作：（1）在Dreamweaver幫助中，單擊“索引”選項(xiàng)卡。（2）滾動(dòng)到字母列表中的一個(gè)索引項(xiàng)，然后雙擊該項(xiàng)可顯示索引信息，如圖1-33所示。1.5.3查看操作相關(guān)幫助在編輯的過程中，有時(shí)需要查看當(dāng)前操作的幫助信息，這時(shí)可以按照如下方法操作：（1）如果是在對(duì)話框中，要查看當(dāng)前對(duì)話框的信息，可以單擊對(duì)話框的“幫助”按紐，啟動(dòng)幫助系統(tǒng)后將直接跳轉(zhuǎn)到當(dāng)前操作有關(guān)的幫助信息頁(yè)面上。例如在表格對(duì)話框中單擊“幫助”按紐，如圖1-34所示，則會(huì)顯示表格的幫助信息，如圖1-35所示。（2）如果是在使用浮動(dòng)面版進(jìn)行編輯的過程中，要查看幫助系統(tǒng)，可以單擊浮動(dòng)面版上的按紐，也可以啟動(dòng)幫助系統(tǒng)，并直接跳轉(zhuǎn)到與當(dāng)前操作相關(guān)的幫助頁(yè)面上。例如在屬性面版上單擊按紐，如圖1-36所示，將會(huì)顯示屬性的相關(guān)幫助信息本章小結(jié)Dreamweaver8是美國(guó)Macromedia公司推出的一款網(wǎng)頁(yè)編輯工具，它具有所見即所所得的功能，并支持最新的DHTML和CSS標(biāo)準(zhǔn)，是目前市場(chǎng)最為流行的網(wǎng)頁(yè)編輯器。

本章主要介紹了Dreamweaver8的安裝與啟動(dòng)，Dreamweaver8的工作界面、Dreamweaver8新增功能以及Dreamweaver8的幫助系統(tǒng)等知識(shí)。通過對(duì)本章知識(shí)的學(xué)習(xí)，相信讀者對(duì)Dreamweaver8已經(jīng)有了一個(gè)初步的了解，為今后的學(xué)習(xí)打下了基礎(chǔ)。第2章

Dreamweaver8

站點(diǎn)的管理

本章學(xué)習(xí)目標(biāo)

Dreamweaver8的站點(diǎn)設(shè)置2.1

使用Dreamweaver8編輯站點(diǎn)2.2Dreamweaver8的站點(diǎn)地圖2.3發(fā)布站點(diǎn)2.42.1Dreamweaver8的站點(diǎn)設(shè)置

Dreamweaver站點(diǎn)提供一種組織所有與Web站點(diǎn)關(guān)聯(lián)的文檔的方法。通過在站點(diǎn)中組織文件，可以利用Dreamweaver將站點(diǎn)上傳到Web服務(wù)器、自動(dòng)跟蹤和維護(hù)鏈接、管理文件以及共享文件。若要充分利用Dreamweaver的功能，需要定義一個(gè)站點(diǎn)。2.1.1認(rèn)識(shí)Dreamweaver8的站點(diǎn)

Dreamweaver站點(diǎn)由三部分組成，具體取決于開發(fā)環(huán)境和所開發(fā)的Web站點(diǎn)類型：（1）本地文件夾：是您的工作目錄。Dreamweaver將該文件夾稱為“本地站點(diǎn)”。此文件夾可以位于本地計(jì)算機(jī)上，也可以位于網(wǎng)絡(luò)服務(wù)器上。這就是為Dreamweaver站點(diǎn)所處理的文件的存儲(chǔ)位置。（2）遠(yuǎn)端文件夾：是存儲(chǔ)文件的位置，這些文件用于測(cè)試、生產(chǎn)、協(xié)作等，具體取決于開發(fā)環(huán)境。Dreamweaver在“文件”面板中將該文件夾稱為“遠(yuǎn)端站點(diǎn)”。一般說來，遠(yuǎn)端文件夾位于運(yùn)行Web服務(wù)器的計(jì)算機(jī)上。（3）測(cè)試服務(wù)器文件夾：是Dreamweaver處理動(dòng)態(tài)頁(yè)的文件夾。2.1.2定義新的站點(diǎn)定義一個(gè)新的站點(diǎn)步驟如下：（1）在C盤新建一個(gè)文件夾。打開“我的電腦”，打開C盤，點(diǎn)鼠標(biāo)右鍵，選擇“新建”，選擇“文件夾”選項(xiàng)，如圖2-1所示。此時(shí)，C盤下會(huì)出現(xiàn)一個(gè)新建文件夾圖標(biāo)，如圖2-2所示。2.1.2定義新的站點(diǎn)（2）現(xiàn)在開始在Dreamweaver8中把web這個(gè)文件夾定義為站點(diǎn)。打開Dreamweaver8，在菜單欄上，點(diǎn)擊站點(diǎn)菜單，選擇新建站點(diǎn)，如圖2-4所示。（3）接下來需要給站點(diǎn)起一個(gè)名字，可以起任意一個(gè)名字，如圖2-5所示，這里輸入“個(gè)人主頁(yè)”。2.1.2定義新的站點(diǎn)（4）按下一步按鈕，選擇“是否使用服務(wù)器技術(shù)”。因?yàn)閷?shí)例建立的是一個(gè)靜態(tài)站點(diǎn)，就選擇“否，我不想使用服務(wù)器技術(shù)”，如圖2-6所示。（5）按下一步按鈕，因?yàn)橐獋鞯骄W(wǎng)上的虛擬主頁(yè)空間，就要選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后再傳到服務(wù)器上”，如圖2-7所示。2.1.2定義新的站點(diǎn)（6）按下一步，選擇要定義的本地根文件夾，如圖2-8所示。這里選擇web文件夾，如圖2-9所示。2.1.2定義新的站點(diǎn)

點(diǎn)“選擇”按鈕，然后單擊“下一步”按紐。因?yàn)闆]有使用遠(yuǎn)程服務(wù)器，就選擇“無”，如圖2-10所示。（7）然后單擊“下一步”，看到如圖2-11所示的完成信息。2.1.2定義新的站點(diǎn)（8）按完成按鈕，一個(gè)站點(diǎn)就定義好了，如圖2-12所示。2.1.3使用“高級(jí)設(shè)置”來設(shè)置站點(diǎn)同樣，我們還可以使用“站點(diǎn)定義”對(duì)話框中的“高級(jí)”設(shè)置來設(shè)置Dreamweaver站點(diǎn)?！案呒?jí)”設(shè)置使您可以根據(jù)需要分別設(shè)置本地、遠(yuǎn)端和測(cè)試文件夾。1、設(shè)置本地文件夾本地文件夾是Dreamweaver站點(diǎn)的工作目錄。此文件夾可以位于本地計(jì)算機(jī)上，也可以位于網(wǎng)絡(luò)服務(wù)器上。2.1.3使用“高級(jí)設(shè)置”來設(shè)置站點(diǎn)設(shè)置本地文件夾，可以按如下步驟：（1）選擇“站點(diǎn)”>“管理站點(diǎn)”，將出現(xiàn)“管理站點(diǎn)”對(duì)話框如圖2-13所示。（2）單擊“新建”，出現(xiàn)“站點(diǎn)定義”對(duì)話框，如圖2-14所示。2.1.3使用“高級(jí)設(shè)置”來設(shè)置站點(diǎn)（3）如果未顯示“高級(jí)”設(shè)置，請(qǐng)單擊“高級(jí)”按鈕?！罢军c(diǎn)定義”對(duì)話框的“高級(jí)”選項(xiàng)卡顯示“本地信息”類別選項(xiàng)，輸入“本地信息”選項(xiàng)，如圖2-15所示。（4）如果已經(jīng)做好了設(shè)置遠(yuǎn)端服務(wù)器的準(zhǔn)備，請(qǐng)?zhí)^剩下的步驟；選擇左側(cè)的“遠(yuǎn)端信息”類別，然后完成該對(duì)話框，如圖2-16所示。2.1.3使用“高級(jí)設(shè)置”來設(shè)置站點(diǎn)（4）如果已經(jīng)做好了設(shè)置遠(yuǎn)端服務(wù)器的準(zhǔn)備，請(qǐng)?zhí)^剩下的步驟；選擇左側(cè)的“遠(yuǎn)端信息”類別，然后完成該對(duì)話框，如圖2-16所示。（5）單擊“確定”，即可完成站點(diǎn)的設(shè)置工作。2.1.3使用“高級(jí)設(shè)置”來設(shè)置站點(diǎn)2、設(shè)置遠(yuǎn)端文件夾為Dreamweaver站點(diǎn)設(shè)置本地文件夾后，可以設(shè)置遠(yuǎn)端文件夾。根據(jù)開發(fā)環(huán)境的不同，遠(yuǎn)端文件夾是您存儲(chǔ)用于進(jìn)行測(cè)試、協(xié)作、生產(chǎn)、部署等的文件的位置。設(shè)置遠(yuǎn)端文件夾的步驟同設(shè)置的步驟如下：（1）選擇“站點(diǎn)”>“管理站點(diǎn)”。出現(xiàn)“管理站點(diǎn)”對(duì)話框，如圖2-17所示。2.1.3使用“高級(jí)設(shè)置”來設(shè)置站點(diǎn)（2）選擇現(xiàn)有的Dreamweaver站點(diǎn)。如果沒有定義任何Dreamweaver站點(diǎn)，請(qǐng)?jiān)诶^續(xù)前創(chuàng)建一個(gè)本地文件夾。（3）單擊“編輯”。出現(xiàn)“站點(diǎn)定義”對(duì)話框，如圖2-18所示。2.1.3使用“高級(jí)設(shè)置”來設(shè)置站點(diǎn)(4）如果未顯示“高級(jí)”設(shè)置，請(qǐng)單擊“高級(jí)”按鈕，如圖2-19所示。（5）從左側(cè)的“類別”列表中選擇“遠(yuǎn)程信息”，如圖2-20所示。2.1.3使用“高級(jí)設(shè)置”來設(shè)置站點(diǎn)（6）選擇一個(gè)“訪問”選項(xiàng)。（7）單擊“確定”即可。2.2Dreamweaver8編輯站點(diǎn)Dreamweaver站點(diǎn)建立好了以后，有時(shí)我們需要對(duì)Dreamweaver站點(diǎn)進(jìn)行一些修改、刪除、復(fù)制等操作，下面我們將詳細(xì)介紹Dreamweaver站點(diǎn)的修改、刪除、復(fù)制等操作。2.2.1打開本地站點(diǎn)打開站點(diǎn)的步驟如下：（1）選擇“站點(diǎn)”>“管理站點(diǎn)”。出現(xiàn)“管理站點(diǎn)”對(duì)話框，如圖2-22所示。（2）選擇要打開的站點(diǎn)名稱。例如選擇“個(gè)人主頁(yè)”站點(diǎn)，然后單擊“完成”按紐，將打開“個(gè)人主頁(yè)”站點(diǎn)，如圖2-23所示。2.2.2修改本地站點(diǎn)修改本地站點(diǎn)的步驟如下：（1）選擇“站點(diǎn)”>“管理站點(diǎn)”。出現(xiàn)“管理站點(diǎn)”對(duì)話框，如圖2-24所示。（2）選擇要修改的站點(diǎn)名稱。例如選擇“web”站點(diǎn)，然后單擊“編輯”按紐，將打開“web”站點(diǎn)設(shè)置對(duì)話框，如圖2-25所示。（3）在圖2-25中修改站點(diǎn)中要修改的內(nèi)容，然后單擊“確定”按紐即可完成站點(diǎn)的修改。2.2.3刪除已經(jīng)存在的站點(diǎn)刪除站點(diǎn)的步驟如下：（1）選擇“站點(diǎn)”>“管理站點(diǎn)”。出現(xiàn)“管理站點(diǎn)”對(duì)話框，如圖2-26所示。（2）選擇要?jiǎng)h除的站點(diǎn)名稱。例如選擇“web”站點(diǎn)，然后單擊“刪除”按紐，將出現(xiàn)如圖2-27所示的對(duì)話框。選擇“是”按紐后，即可完成站點(diǎn)的刪除工作，如圖2-28所示。2.2.4復(fù)制已經(jīng)存在的站點(diǎn)復(fù)制已經(jīng)存在的站點(diǎn)的步驟如下：（1）選擇“站點(diǎn)”>“管理站點(diǎn)”。出現(xiàn)“管理站點(diǎn)”對(duì)話框，如圖2-29所示。（2）選擇要?jiǎng)h除的站點(diǎn)名稱。例如選擇“個(gè)人主頁(yè)”站點(diǎn)，然后單擊“復(fù)制”按紐即可完成站點(diǎn)的復(fù)制，如圖2-30所示。2.3Dreamweaver8的站點(diǎn)地圖Dreamweaver8站點(diǎn)的本地文件夾視作鏈接的圖標(biāo)的視覺地圖，此視覺地圖稱為Dreamweaver8的站點(diǎn)地圖。使用站點(diǎn)地圖可以將新文件添加到Dreamweaver站點(diǎn)，或者添加、修改或刪除鏈接。站點(diǎn)地圖從主頁(yè)開始顯示兩個(gè)級(jí)別深度的站點(diǎn)結(jié)構(gòu)，它將頁(yè)面顯示為圖標(biāo)，并按在源代碼中出現(xiàn)的順序來顯示鏈接。站點(diǎn)地圖是理想的站點(diǎn)結(jié)構(gòu)布局工具，它快速地設(shè)置整個(gè)站點(diǎn)結(jié)構(gòu)，然后創(chuàng)建站點(diǎn)地圖的圖形圖像。2.3.1查看站點(diǎn)地圖

在顯示站點(diǎn)地圖之前，必須先定義站點(diǎn)的主頁(yè)。站點(diǎn)的主頁(yè)可以是站點(diǎn)中的任意頁(yè)面，它不必是站點(diǎn)的主要頁(yè)面。這種情況下，主頁(yè)只是地圖的起點(diǎn)。定義站點(diǎn)的主頁(yè)可按以下步驟：（1）在“文件”面板（“窗口”>“文件”）中，從彈出式菜單（當(dāng)前站點(diǎn)、服務(wù)器或驅(qū)動(dòng)器顯示在該菜單中）中選擇一個(gè)站點(diǎn)，如圖2-31所示。（2）右鍵單擊要設(shè)為主頁(yè)的文件，然后選擇“設(shè)成首頁(yè)”，如圖2-32所示。2.3.1查看站點(diǎn)地圖查看站點(diǎn)地圖的步驟如下：（1）打開“文件”面板（“窗口”>“文件”），在折疊的“文件”面板中，選擇“站點(diǎn)視圖”彈出式菜單中的“地圖視圖”（2）“文件”面板顯示的站點(diǎn)地圖中將顯示兩個(gè)級(jí)別深度的站點(diǎn)結(jié)構(gòu)，如圖2-34所示。2.3.1查看站點(diǎn)地圖（3）單擊文件名旁的加號(hào)(+)和減號(hào)(-)可顯示或隱藏鏈接在第二級(jí)之下的頁(yè)面。（4）站點(diǎn)地圖中的顏色代表如下：以紅色顯示的文本指示斷開的鏈接。以藍(lán)色顯示并標(biāo)有地球圖標(biāo)的文本指示其他站點(diǎn)上的文件或特殊鏈接（如電子郵件或腳本鏈接）。綠色選中標(biāo)記指示您已取出的文件。紅色選中標(biāo)記指示他人取出的文件。鎖形圖標(biāo)指示只讀或鎖定的文件。2.3.2修改站點(diǎn)地圖布局使用“站點(diǎn)地圖布局”選項(xiàng)可自定義站點(diǎn)地圖的外觀。可以更改主頁(yè)、顯示的列數(shù)、圖標(biāo)標(biāo)簽顯示文件名還是顯示頁(yè)標(biāo)題以及是否顯示隱藏文件和相關(guān)文件。修改站點(diǎn)地圖布局的步驟如下：（1）選擇“站點(diǎn)”>“管理站點(diǎn)”，打開“站點(diǎn)定義”對(duì)話框，出現(xiàn)“管理站點(diǎn)”對(duì)話框，如圖2-35所示。（2）單擊“編輯”，出現(xiàn)“站點(diǎn)定義”對(duì)話框，如圖2-36所示。2.3.2修改站點(diǎn)地圖布局（3）在左側(cè)的“類別”列表中選擇“站點(diǎn)地圖布局”，“站點(diǎn)定義”對(duì)話框顯示了“站點(diǎn)地圖布局”選項(xiàng)，如圖2-37所示。（4）按需要進(jìn)行更改，然后單擊“確定”關(guān)閉“站點(diǎn)定義”對(duì)話框，單擊“完成”關(guān)閉“管理站點(diǎn)”對(duì)話框。2.3.3顯示或隱藏站點(diǎn)地圖1、若要在站點(diǎn)地圖中顯示或取消隱藏標(biāo)記，可按以下步驟：（1）在站點(diǎn)地圖中選擇一個(gè)或多個(gè)文件。（2）右鍵單擊(Windows)或按住Control鍵單擊(Macintosh)，然后選擇“顯示/隱藏鏈接”，如圖2-38所示。2.3.3顯示或隱藏站點(diǎn)地圖

若要在站點(diǎn)地圖中顯示或隱藏標(biāo)記為隱藏的文件，可按以下步驟：（1）在折疊的“文件”面板（“窗口”>“文件”）中，單擊右上角的“選項(xiàng)”菜單，如圖2-39所示。（2）可按以下之一步驟顯示隱藏文件：選擇“查看”>“顯示標(biāo)記為隱藏的文件”，如圖2-40所示。2.3.3顯示或隱藏站點(diǎn)地圖

選擇“查看”>“布局”以打開“站點(diǎn)地圖選項(xiàng)”對(duì)話框，然后選擇“顯示標(biāo)記為隱藏的文件”選項(xiàng)，如圖2-41所示。

圖2-41顯示標(biāo)記為隱藏的文件2.3.4保存站點(diǎn)地圖若要?jiǎng)?chuàng)建當(dāng)前站點(diǎn)地圖的圖像文件，可以按以下步驟：（1）在折疊的“文件”面板（“窗口”>“文件”）中，單擊右上角的“選項(xiàng)”菜單，然后選擇“文件”>“保存站點(diǎn)地圖”，如圖2-42所示。（2）在出現(xiàn)的“保存站點(diǎn)地圖”對(duì)話框，輸入一個(gè)名稱，如圖2-43所示。（3）在“文件類型”彈出菜單中，選擇.bmp或.png。（4）選擇該文件的保存位置并輸入圖像的名稱，單擊“保存”即可2.4發(fā)布站點(diǎn)創(chuàng)建了Web站點(diǎn)后，下一步就是通過將文件上傳到遠(yuǎn)程文件夾來發(fā)布該站點(diǎn)。遠(yuǎn)程文件夾是存儲(chǔ)文件的位置，這些文件用于測(cè)試、生產(chǎn)、協(xié)作和發(fā)布。Dreamweaver將此文件夾稱為遠(yuǎn)程站點(diǎn)。2.4.1了解遠(yuǎn)程站點(diǎn)遠(yuǎn)程站點(diǎn)通常是運(yùn)行Web服務(wù)器的遠(yuǎn)程計(jì)算機(jī)上保存本地文件副本的位置。用戶在瀏覽器中查看網(wǎng)頁(yè)時(shí)，就是在訪問在Web服務(wù)器上運(yùn)行的遠(yuǎn)程站點(diǎn)。在創(chuàng)建了Web站點(diǎn)前，還必須能夠訪問遠(yuǎn)程Web服務(wù)器，例如ISP的服務(wù)器等等。也可以在本地計(jì)算機(jī)上創(chuàng)建一個(gè)Web服務(wù)器，如IIS或Apache服務(wù)器等等。2.4.2定義遠(yuǎn)程文件夾定義遠(yuǎn)程文件夾的步驟如下：（1）在Dreamweaver中，選擇“站點(diǎn)”>“管理站點(diǎn)”，在“管理站點(diǎn)”對(duì)話框中，選擇“su”站點(diǎn)。（2）單擊“編輯”，在“站點(diǎn)定義”對(duì)話框中，如果未顯示“高級(jí)”設(shè)置，請(qǐng)單擊“高級(jí)”選項(xiàng)卡，如圖2-45所示。2.4.2定義遠(yuǎn)程文件夾（3）從左側(cè)的“類別”列表中選擇“遠(yuǎn)程信息”，如圖2-46所示。（4）選擇一個(gè)“訪問”選項(xiàng)：連接到Internet上的服務(wù)器的最常見方法是“FTP”和“SFTP”；如果您使用本地計(jì)算機(jī)作為Web服務(wù)器，連接到本地計(jì)算機(jī)的最常見方法是“本地/網(wǎng)絡(luò)”。2.4.2定義遠(yuǎn)程文件夾（4）選擇一個(gè)“訪問”選項(xiàng)：連接到Internet上的服務(wù)器的最常見方法是“FTP”和“SFTP”；如果您使用本地計(jì)算機(jī)作為Web服務(wù)器，連接到本地計(jì)算機(jī)的最常見方法是“本地/網(wǎng)絡(luò)”。（5）如果您選擇“FTP”，請(qǐng)輸入以下選項(xiàng)，如圖2-47所示：輸入服務(wù)器的主機(jī)名（例如）。在“主機(jī)目錄”文本框中，輸入從FTP根文件夾到遠(yuǎn)程站點(diǎn)的根文件夾(su)的服務(wù)器路徑。在相應(yīng)的文本框中輸入用戶名和密碼。如果您的服務(wù)器支持SFTP，選擇“使用安全FTP(SFTP)”選項(xiàng)。單擊“測(cè)試”測(cè)試連接。2.4.2定義遠(yuǎn)程文件夾（6）如果您選擇“本地/網(wǎng)絡(luò)”，請(qǐng)單擊文本框旁邊的文件夾圖標(biāo)，然后瀏覽到遠(yuǎn)程站點(diǎn)的根文件夾，如圖2-48所示。（7）單擊“確定”。Dreamweaver創(chuàng)建到遠(yuǎn)程文件夾的連接。在遠(yuǎn)程服務(wù)器上根文件夾中創(chuàng)建一個(gè)空文件夾。將新的空文件夾命名為su（與本地根文件夾的名稱相同）。2.4.3上傳本地文件夾上傳本地文件夾的步驟如下：（1）在“文件”面板（“窗口”>“文件”）中，選擇站點(diǎn)的本地根文件夾(su)。單擊“文件”面板工具欄上的“上傳文件”藍(lán)色箭頭圖標(biāo)，如圖2-49所示。（2）當(dāng)Dreamweaver詢問您是否要上傳整個(gè)站點(diǎn)時(shí)，單擊“確定”，如圖2-50所示。2.4.3上傳本地文件夾（3）Dreamweaver將所有文件復(fù)制到您在定義遠(yuǎn)程文件夾中定義的遠(yuǎn)程文件夾。此操作可能需要一些時(shí)間，因?yàn)镈reamweaver必須上傳本站點(diǎn)中的所有文件。（4）當(dāng)上傳完所有文件后，可以單擊“文件”面板工具欄上的“展開以顯示本地和遠(yuǎn)程站點(diǎn)”圖標(biāo)，將出現(xiàn)如圖2-51所示。（5）最后，在瀏覽器中打開遠(yuǎn)程站點(diǎn)以確保正確上傳了所有文件。本章小結(jié)Dreamweaver8站點(diǎn)是一組具有共享屬性的鏈接文檔和資源。Dreamweaver站點(diǎn)由三部分組成：本地文件夾、遠(yuǎn)端文件夾、測(cè)試服務(wù)器文件夾。并詳細(xì)介紹了在Dreamweaver8中定義站點(diǎn)的方法和步驟，進(jìn)而介紹了Dreamweaver站點(diǎn)修改、刪除、復(fù)制等操作。

Dreamweaver8的站點(diǎn)地圖是本地文件夾視作鏈接的圖標(biāo)的視覺地圖。本章也重點(diǎn)介紹了在Dreamweaver8中查看、修改、保存站點(diǎn)地圖等操作。遠(yuǎn)程站點(diǎn)通常是運(yùn)行Web服務(wù)器的遠(yuǎn)程計(jì)算機(jī)上保存本地文件副本的位置。用戶在瀏覽器中查看網(wǎng)頁(yè)時(shí)，就是在訪問在Web服務(wù)器上運(yùn)行的遠(yuǎn)程站點(diǎn)。本章最后詳細(xì)介紹了定義遠(yuǎn)程站點(diǎn)的方法和步驟，同時(shí)介紹了利用Dreamweaver8上傳本地文件夾的步驟。第3章

頁(yè)面操作本章學(xué)習(xí)目標(biāo)基本操作3.1文檔元素3.2頁(yè)面的可視化向?qū)?.3案例3-1查看和編輯頭文件3.4第3章頁(yè)面操作3.1基本操作基本操作頁(yè)面操作是設(shè)計(jì)網(wǎng)頁(yè)的基本操作，它包括了打開和編輯文檔、控制文檔屬性、定義文檔標(biāo)題等多個(gè)方面。3.1.1新建頁(yè)面當(dāng)Dreamweaver8.0啟動(dòng)時(shí)，系統(tǒng)會(huì)自動(dòng)創(chuàng)建一個(gè)無標(biāo)題的文檔，默認(rèn)為html空網(wǎng)頁(yè)，如果為您提供了幾種選擇新的工作文檔的選項(xiàng)?？梢杂孟铝蟹椒▌?chuàng)建新文檔：1.選擇“文件”>“新建”。即出現(xiàn)“新建文檔”對(duì)話框，如圖3-1所示?！俺Ｒ?guī)”選項(xiàng)卡已被選定。3.1.1新建頁(yè)面2.從“類別”列表中選擇“基本頁(yè)”、“動(dòng)態(tài)頁(yè)”、“模板頁(yè)”、“其他”或“框架集”；然后從右側(cè)的列表中選擇要?jiǎng)?chuàng)建的文檔的類型。例如，選擇“基本頁(yè)”創(chuàng)建HTML文檔，或選擇“動(dòng)態(tài)頁(yè)”創(chuàng)建ColdFusion或ASP文檔，諸如此類。3.單擊“創(chuàng)建”按鈕。新文檔在“文檔”窗口中打開。3.1.2存儲(chǔ)頁(yè)面文檔創(chuàng)建之后需要保存它，保存文檔步驟如下：若要保存新文檔，請(qǐng)執(zhí)行以下操作：1. 選擇“文件”>“保存”，快捷鍵是Ctrl+S，如圖3-2所示3.1.2存儲(chǔ)頁(yè)面2.在出現(xiàn)的對(duì)話框中，定位到要用來保存文件的文件夾。注意：最好將文件保存在Dreamweaver站點(diǎn)中。3.在“文件名稱”文本框中，鍵入文件名。請(qǐng)不要在文件名和文件夾名中使用空格和特殊字符，文件名也不要以數(shù)字開頭。具體說來就是不要在打算放到遠(yuǎn)程服務(wù)器上的文件名中使用特殊字符（如é、?、或￥）或標(biāo)點(diǎn)符號(hào)（如冒號(hào)、斜杠或句號(hào)）；很多服務(wù)器在上傳時(shí)會(huì)更改這些字符，這會(huì)導(dǎo)致與這些文件的鏈接中斷。4.單擊“保存”3.1.3打開已有的頁(yè)面在Dreamweaver中可打開現(xiàn)有Web頁(yè)或基于文本的文檔，即使它們不是用Dreamweaver創(chuàng)建的?？纱蜷_該文檔并用Dreamweaver在“設(shè)計(jì)”視圖或“代碼”視圖中編輯該文檔。若要打開現(xiàn)有的文件，請(qǐng)執(zhí)行以下操作：1. 選擇“文件”>“打開”，出現(xiàn)“打開”對(duì)話框，如圖3-3所示。3.1.3打開已有的頁(yè)面2.定位到并選擇要打開的文件。3.單擊“打開”，文檔在文檔窗口中打開。3.1.4瀏覽和調(diào)試頁(yè)面可以隨時(shí)在瀏覽器中預(yù)覽文檔，而不必先保存文檔或?qū)⑽臋n上傳到Web服務(wù)器，默認(rèn)瀏覽器為IE瀏覽器，瀏覽頁(yè)面的具體方法為：方法一：?jiǎn)螕簟拔募?gt;“在瀏覽器中預(yù)覽”，選擇一個(gè)瀏覽器瀏覽。方法二：使用快捷鍵F12鍵在主瀏覽器中顯示當(dāng)前文檔，或者使用Ctrl+F12在候選瀏覽器中顯示當(dāng)前文檔。3.1.4瀏覽和調(diào)試頁(yè)面方法三：?jiǎn)螕粼跒g覽器上預(yù)覽/調(diào)試按鈕，或者在下拉菜單中選擇瀏覽器，如圖3-4所示。3.1.5頁(yè)面屬性頁(yè)面標(biāo)題、背景圖像和顏色、文本和鏈接顏色以及邊距是每個(gè)Web文檔的基本屬性。用戶可以使用“頁(yè)面屬性”對(duì)話框設(shè)置或更改頁(yè)面屬性。打開頁(yè)面屬性對(duì)話框。使用下面的方法之一就可以打開頁(yè)面屬性對(duì)話框，如圖3-5所示。方法一：?jiǎn)螕簟靶薷摹辈藛蜗碌摹绊?yè)面屬性”；方法二：?jiǎn)螕粑谋尽皩傩浴睓z查器中的“頁(yè)面屬性”按鈕，即會(huì)打開“頁(yè)面屬性”對(duì)話框。方法三：在頁(yè)面空白處單擊右鍵，選擇“頁(yè)面屬性”。頁(yè)面屬性對(duì)話框3.1.5頁(yè)面屬性2. 設(shè)置頁(yè)邊距在“頁(yè)面屬性”對(duì)話框中的“外觀”選項(xiàng)卡中設(shè)置上、下、左、右邊距。3. 設(shè)置頁(yè)面標(biāo)題在頁(yè)面屬性對(duì)話框中的“標(biāo)題/編碼”選項(xiàng)卡，在標(biāo)題單行文本框中輸入頁(yè)面標(biāo)題。注意：如果不給頁(yè)面加標(biāo)題，頁(yè)面會(huì)在瀏覽器窗口、書簽列表和歷史記錄列表中顯示為無標(biāo)題文檔。4. 設(shè)置頁(yè)面背景顏色在頁(yè)面屬性對(duì)話框中的“外觀”類別中可以設(shè)置頁(yè)面的背景顏色。注意：如果同時(shí)使用背景圖像和背景顏色，下載圖像時(shí)會(huì)出現(xiàn)顏色，然后圖像覆蓋顏色。如果背景圖像包含任何透明像素，則背景顏色會(huì)透過背景圖像顯示出來。3.1.5頁(yè)面屬性5. 設(shè)置頁(yè)面鏈接顏色在頁(yè)面屬性的“鏈接”選項(xiàng)卡中，可以設(shè)置頁(yè)面中鏈接的顏色，如圖3-6所示。3.1.6導(dǎo)入WORD文件在Dreamweaver8.0中可以直接導(dǎo)入Word文檔和Excel文檔。其步驟如下：1. 單擊“文件”菜單下“導(dǎo)入”，選擇“Word文檔”2. 在彈出的對(duì)話框中，選擇相應(yīng)的Word文件在對(duì)話框中選擇“清理Word段落間距”的復(fù)選框，可以清理Word生成的無關(guān)HTML代碼。3. 單擊“確定”也可以在打開了word生成的HTML文檔后，再單擊“命令”菜單中的“清理Word生成的HTML”選項(xiàng)，如圖3-7所示清理Word生成的HTML3.1.7HTML源文件的操作顯示HTML源代碼的方法有：方法一：?jiǎn)螕簟安榭础辈藛蜗碌摹按a”選項(xiàng)。方法二：直接單擊文檔工具欄中的按鈕。方法三：?jiǎn)螕簟按a”菜單中的“代碼檢查器”打開代碼檢查器。第3章頁(yè)面操作3.2文檔元素3.2文檔元素在Dreamweaver8.0頁(yè)面中有多種元素，可以使用鼠標(biāo)直接單元選中這些元素，也可以采用選擇標(biāo)簽的方法來選擇相應(yīng)的文檔元素，其中包括可見元素和不可見元素。對(duì)于可見元素，可以單擊并直接進(jìn)行編輯；對(duì)于不可見元素，就需要在編輯前把它設(shè)為可見元素。3.2.1選擇元素若要在“文檔”窗口的“設(shè)計(jì)”視圖中選擇元素，通?？梢詥螕粼亍Ｈ绻夭豢梢?，必須使其可見后才能選擇它。1. 選擇可見元素若要選擇“文檔”窗口中的可見元素，請(qǐng)單擊元素或在元素上拖過。2. 選擇不可見元素選擇不可見元素，請(qǐng)選擇“查看”>“可視化助理”>“不可見元素”（如果還沒有選擇該菜單項(xiàng)），然后在“文檔”窗口中單擊元素的標(biāo)記。3. 選擇整個(gè)標(biāo)記若要選擇完整的標(biāo)簽，請(qǐng)單擊“文檔”窗口左下角的標(biāo)簽，如圖3-9所示，如果要選擇該單元格，單擊TD標(biāo)簽即可選擇了。3.2.2改變不可見元素有些HTML代碼在瀏覽器中沒有可見的表示形式。例如，comment標(biāo)簽不會(huì)出現(xiàn)在瀏覽器中。但是，此標(biāo)簽在創(chuàng)建能夠選擇、編輯、移動(dòng)和刪除這類不可見元素的頁(yè)面時(shí)很有用。Dreamweaver使您可以指定在“文檔”窗口的“設(shè)計(jì)”視圖中是否顯示標(biāo)記不可見元素位置的圖標(biāo)。若要指明在選擇“查看”>“可視化助理”>“不可見元素”時(shí)顯示哪些元素標(biāo)記，可以在“不可見元素”首選參數(shù)中設(shè)置選項(xiàng)，如圖3-10所示。查看菜單3.2.2改變不可見元素若要更改“不可見元素”首選參數(shù)，單擊“編輯”菜單下的“首選參數(shù)”，選擇“不可見元素”選項(xiàng)卡，如圖3-11所示，在顯示的選項(xiàng)組中，選擇需要顯示或隱藏的元素復(fù)選框。第3章頁(yè)面操作3.3頁(yè)面的可視化向?qū)?.3.1調(diào)整文檔窗口大小在Dreamveaver8.0中，狀態(tài)欄顯示“文檔”窗口的當(dāng)前尺寸（以像素為單位）。如圖3-12所示方法一：直接拖動(dòng)窗口，查看元素如何適應(yīng)頁(yè)面。在Windows中，用戶可以將“文檔”窗口最大化以便它填充集成窗口的整個(gè)文檔區(qū)域。3.3.1調(diào)整文檔窗口大小方法二：若要將“文檔”窗口的大小調(diào)整為預(yù)定義的大小，可以從“文檔”窗口底部的“窗口大小”彈出菜單中選擇一種大小，如圖3-13所示3.3.1調(diào)整文檔窗口大小注意：在Windows中，您可以將“文檔”窗口最大化以便它填充集成窗口的整個(gè)文檔區(qū)域。當(dāng)“文檔”窗口最大化時(shí)，您無法調(diào)整它的大小。如果是在640x480顯示器上使用，可以選擇“536x196（640x480，默認(rèn)）”的大小。注意：當(dāng)“文檔”窗口最大化時(shí)，您無法調(diào)整它的大小。對(duì)于不是很精確的大小調(diào)整，請(qǐng)使用操作系統(tǒng)的標(biāo)準(zhǔn)窗口大小調(diào)整方法，如拖動(dòng)窗口的右下角。3.3.2使用標(biāo)尺標(biāo)尺可幫助您測(cè)量、組織和規(guī)劃布局。標(biāo)尺可以顯示在頁(yè)面的左邊框和上邊框中，以像素、英寸或厘米為單位來標(biāo)記。1. 顯示或隱藏標(biāo)尺若要在打開和關(guān)閉狀態(tài)之間切換標(biāo)尺，請(qǐng)選擇“查看”>“標(biāo)尺”>“顯示”，如圖3-14所示。3.3.2使用標(biāo)尺2. 更改度量單位若要更改度量單位，請(qǐng)從“查看”>“標(biāo)尺”子菜單中選擇“像素”、“英寸”或“厘米”，如圖3-14所示。3. 設(shè)置標(biāo)尺原點(diǎn)要更改原點(diǎn)，請(qǐng)將標(biāo)尺原點(diǎn)圖標(biāo)拖到頁(yè)面上的任意位置，如圖3-15。若要將原點(diǎn)重設(shè)到它的默認(rèn)位置，請(qǐng)選擇“查看”>“標(biāo)尺”>“重設(shè)原點(diǎn)”。3.3.2使用標(biāo)尺4. 使用網(wǎng)格功能單擊“查看”菜單中的“網(wǎng)格”子菜單，選擇“顯示網(wǎng)格”即可在文檔編輯區(qū)內(nèi)顯示網(wǎng)格，去掉顯示網(wǎng)格前的，即可隱藏網(wǎng)格。在“查看”菜單中選擇“網(wǎng)格”子菜單中“網(wǎng)格設(shè)置”，彈出如圖3-16所示網(wǎng)格設(shè)置對(duì)話框。第3章頁(yè)面操作3.4查看和編輯頭文件3.4.1顯示頭部元素在Dreamweaver8.0可以使用“查看”菜單、“文檔”窗口的“代碼”視圖或代碼檢查器查看文檔的head部分中的元素。方法一：?jiǎn)螕簟安榭础辈藛沃械摹按a”，在HTML代碼中<head>與</head>之間的代碼就是文檔頭文件的內(nèi)容。方法二：?jiǎn)螕簟安榭础辈藛沃械摹拔募^內(nèi)容”。對(duì)于head內(nèi)容的每一個(gè)元素，“設(shè)計(jì)”視圖中的“文檔”窗口頂部都有一個(gè)標(biāo)記。例如，在一個(gè)空白的HTML文件中將顯示和兩個(gè)標(biāo)記，單擊標(biāo)記，屬性面板出現(xiàn)如圖3-17所示信息，主要是查看文檔的Meta信息。3.4.1顯示頭部元素單擊標(biāo)記，屬性面板出現(xiàn)如圖3-18所示的信息，此標(biāo)記主要是對(duì)文檔標(biāo)題的查看。3.4.2使用頭部元素網(wǎng)頁(yè)的中的頭部元素包含了說明信息、關(guān)鍵字、說明信息、基礎(chǔ)和鏈接等。單擊“插入”菜單下的“HTML”選項(xiàng)，在“文件頭標(biāo)簽”的下拉菜單中選擇要插入的文件頭元素插入即可，如圖3-19所示。3.4.2使用頭部元素提示：在“查看”菜單中設(shè)置顯示“文件頭內(nèi)容”，單擊head部分中的圖標(biāo)之一以選中它，即可在屬性檢查器中設(shè)置或修改元素的屬性。下列是有關(guān)HEAD元素的屬性信息，1. 插入設(shè)置Meta屬性：meta標(biāo)簽是記錄有關(guān)當(dāng)前頁(yè)面的信息（如字符編碼、作者、版權(quán)信息或關(guān)鍵字）的head元素。這些標(biāo)簽也可以用來向服務(wù)器提供信息，如頁(yè)面的失效日期、刷新間隔和PICS等級(jí)。2. 設(shè)置標(biāo)題屬性：只有一種標(biāo)題屬性：頁(yè)面標(biāo)題。在大多數(shù)瀏覽器中查看頁(yè)面時(shí)，標(biāo)題會(huì)出現(xiàn)在瀏覽器標(biāo)題欄和Dreamweaver“文檔”窗口的標(biāo)題欄中。標(biāo)題還出現(xiàn)在工具欄中。在“標(biāo)題”文本框中輸入頁(yè)面標(biāo)題。3.4.2使用頭部元素3. 設(shè)置關(guān)鍵字屬性：許多搜索引擎裝置（自動(dòng)瀏覽Web頁(yè)為搜索引擎收集信息以編入索引的程序）讀取關(guān)鍵字meta標(biāo)簽的內(nèi)容，并使用該信息在它們的數(shù)據(jù)庫(kù)中將您的頁(yè)面編入索引。因?yàn)橛行┧阉饕嫦拗扑饕年P(guān)鍵字或字符的數(shù)目，或者當(dāng)超過了限制的數(shù)目時(shí)，它將忽略所有的關(guān)鍵字，所以最好只使用幾個(gè)精選的關(guān)鍵字。在標(biāo)記為“關(guān)鍵字”的文本框中輸入關(guān)鍵字，并以逗號(hào)隔開。4. 設(shè)置描述屬性：許多搜索引擎裝置（自動(dòng)瀏覽Web頁(yè)為搜索引擎收集信息以編入索引的程序）讀取說明meta標(biāo)簽的內(nèi)容。有些使用該信息在它們的數(shù)據(jù)庫(kù)中將您的頁(yè)面編入索引，而有些還在搜索結(jié)果頁(yè)面中顯示該信息（而不只是顯示文檔的前幾行）。有些搜索引擎限制索引字符的數(shù)目，所以最好將說明限制在幾個(gè)字在標(biāo)記為“說明”的文本框中輸入描述性文本。5. 設(shè)置刷新屬性：使用刷新元素可以指定瀏覽器在一定的時(shí)間后應(yīng)該自動(dòng)刷新頁(yè)面，方法是重新載入當(dāng)前頁(yè)面或轉(zhuǎn)到不同的頁(yè)面。該元素通常用于在顯示了說明URL已改變的文本消息后，將用戶從一個(gè)URL重定向到另一個(gè)URL。3.4.2使用頭部元素6. 延遲是在瀏覽器刷新頁(yè)面之前需要等待的時(shí)間（以秒為單位）。若要使瀏覽器在完成載入后立即刷新頁(yè)面，請(qǐng)?jiān)谠撐谋究蛑休斎?。動(dòng)作指定在指定的延遲后，瀏覽器是轉(zhuǎn)到另一個(gè)URL還是刷新當(dāng)前頁(yè)面。若要打開另一個(gè)URL而不是刷新當(dāng)前頁(yè)面，請(qǐng)單擊“瀏覽”按鈕，然后瀏覽到并選擇要載入的頁(yè)面。7. 設(shè)置基礎(chǔ)屬性：使用Base元素可以設(shè)置頁(yè)面中所有文檔相對(duì)路徑相對(duì)的基礎(chǔ)URL。8. 設(shè)置鏈接標(biāo)簽的屬性：使用link標(biāo)簽可以定義當(dāng)前文檔與其它文件之間的關(guān)系。注意：head部分中的link標(biāo)簽與body部分中的文檔之間的HTML鏈接是不一樣的。第3章頁(yè)面操作案例3-1創(chuàng)建基本頁(yè)面案例效果案例3-1創(chuàng)建基本頁(yè)面知識(shí)目標(biāo)：利用Dreamweaver8.0新建一個(gè)基礎(chǔ)頁(yè)面并設(shè)置頁(yè)面屬性操作步驟：1. 打開Dreamweaver8.0，新建一個(gè)頁(yè)面。2. 在圖中所示的標(biāo)題文本框中設(shè)置標(biāo)題為“公司簡(jiǎn)介”，如圖4-18所示。案例3-1創(chuàng)建基本頁(yè)面3、單擊“修改”菜單“頁(yè)面屬性”，在彈出的對(duì)話框中設(shè)置背景顏色在新建的頁(yè)面中設(shè)置頁(yè)面的背景顏色為藍(lán)色，將頁(yè)邊距各項(xiàng)設(shè)置為0，如圖3-22所示。案例3-1創(chuàng)建基本頁(yè)面4、在“頁(yè)面屬性”對(duì)話框中單擊“鏈接”打開鏈接選項(xiàng)卡，并設(shè)置頁(yè)面的鏈接顏色如圖3-23所示，下劃線樣式設(shè)置為“僅在變換圖像時(shí)顯示”，鏈接顏色為白色，變換圖像及活動(dòng)鏈接為紅色，已訪問鏈接為淺灰色。案例3-1創(chuàng)建基本頁(yè)面5、單擊“插入”菜單下的“HTML”選項(xiàng)，在“文件頭標(biāo)簽”的下拉菜單中的“關(guān)鍵字”，在彈出的對(duì)話框中設(shè)置頁(yè)面的搜索的關(guān)鍵字為“美得爾公司”，如圖3-24所示。案例3-1創(chuàng)建基本頁(yè)面6. 輸入公司的簡(jiǎn)介內(nèi)容7. 單擊文件菜單下的保存命令，將文件保存為“company.html”。本章小結(jié)本章學(xué)習(xí)了如何在Dreamweaver8.0中創(chuàng)建一個(gè)空白頁(yè)面，如何利用網(wǎng)頁(yè)模板創(chuàng)建所需要的網(wǎng)頁(yè)，并對(duì)打開的網(wǎng)頁(yè)進(jìn)行編輯及操作。對(duì)網(wǎng)頁(yè)中頭文件的編輯可以達(dá)到特殊的作用，在這其中使用了一些HTML代碼。第4章格式化文本本章學(xué)習(xí)目標(biāo)插入文本對(duì)象4.1設(shè)置文本屬性4.2創(chuàng)建項(xiàng)目列表4.3案例4-1格式化頁(yè)面4.4格式化文本MacromediaDreamweaver8提供了多種向文檔中添加文本和設(shè)置文本格式的方法。您可以插入文本、設(shè)置字體類型、大小、顏色和對(duì)齊屬性，以及使用層疊樣式表(CSS)創(chuàng)建和應(yīng)用您自己的自定義樣式。本章要點(diǎn)：1. 插入文本對(duì)象2. 設(shè)置文本屬性，如文本的字體、樣式、顏色和對(duì)齊方式3. 創(chuàng)建與使用項(xiàng)目列表4. 檢查拼寫和查找替換4.1插入文本對(duì)象插入文本對(duì)象用戶可以使用Dreamweaver8.0中的可視化工具向Web頁(yè)添加各種內(nèi)容。Dreamweaver8.0允許您通過以下方式向Web頁(yè)面添加文本：直接將文本鍵入頁(yè)面，從其他文檔復(fù)制和粘貼文本，或從其他應(yīng)用程序拖放文本。Web專業(yè)人員接收的、包含需要合并到Web頁(yè)面的文本內(nèi)容的典型文檔類型有ASCII文本文件、RTF文件和MicrosoftOffice文檔。Dreamweaver使您可以從這些文檔類型中的任何一種取出文本，然后將文本并入Web頁(yè)面中。4.1.1插入文本Dreamweaver8.0使您可以通過直接鍵入、復(fù)制和粘貼或?qū)敕绞捷p松地將文本插入文檔中。導(dǎo)入Word或Excel文檔時(shí)，Dreamweaver接收已轉(zhuǎn)換的HTML并將它插入到您的Web頁(yè)面上。注意：在Dreamweaver8.0中可以在文本的字符與行之間插入額外的空格。Dreamweaver接收已轉(zhuǎn)換的HTML后，文件大小必須小于300K。4.1.2插入日期在Dreamweaver8.0中可以很方便的插入日期。在“文檔”窗口中，將插入點(diǎn)放在要插入日期的位置，單擊“插入”菜單中的“日期”，在彈出的對(duì)話框中選擇相應(yīng)的日期格式，確定即可，如圖4-1所示。4.1.2插入日期注意：如果希望在每次保存文檔時(shí)都更新插入的日期，請(qǐng)選擇“儲(chǔ)存時(shí)自動(dòng)更新”。如果希望日期在插入后變成純文本并永遠(yuǎn)不自動(dòng)更新，請(qǐng)取消選擇該選項(xiàng)。設(shè)置好日期后，單擊此時(shí)間，在屬性面板中出現(xiàn)了時(shí)間設(shè)置屬性，可以通過單擊“編輯日期格式”按鈕，再?gòu)棾鰣D4-1的對(duì)話框來編輯日期。4.1.3插入水平線在插入水平線時(shí)可以使用“插入”菜單，也可以使用工具欄上的快捷鍵。選擇“插入”>“HTML”>“水平線”，即可以插入一根水平線?；蛘呤褂肏TML工具欄，選擇第一個(gè)圖標(biāo)，插入水平線，如圖4-2所示。4.1.4插入特殊字符選擇“插入”>“HTML”>“特殊字符”，在其中選擇需要插入的字符，即可插入字符。如圖4-3所示第4章格式化文本4.2設(shè)置文本屬性4.2.1設(shè)置字體格式文本格式應(yīng)用于一個(gè)字母或整個(gè)站點(diǎn)段落和文本塊。使用“文本”菜單中的相關(guān)選項(xiàng)可以設(shè)置字體格式，也可以使用屬性欄中的相關(guān)選項(xiàng)進(jìn)行設(shè)置，如字體、樣式、大小、顏色、傾斜、加粗、對(duì)齊方式等，如下圖4-4所示。當(dāng)您使用Dreamweaver8.0的設(shè)置文本格式和對(duì)齊文本時(shí)，CSS規(guī)則將嵌入到當(dāng)前文檔中。4.2.1設(shè)置字體格式1. 更改字體使用屬性面板（如圖4-4）中或者“文本”菜單（如圖4-5）下字體選項(xiàng)均可對(duì)字體進(jìn)行設(shè)置。4.2.1設(shè)置字體格式若要更改字體，請(qǐng)從“屬性”檢查器或“文本”>“字體”子菜單中選擇字體組合。選擇“默認(rèn)”刪除先前應(yīng)用的字體；選擇“文本”菜單下的“字體”中的“編輯字體列表”。從對(duì)話框頂部的列表中選擇字體組合。所選組合中的字體在對(duì)話框左下角的“選擇的字體”列表中列出。右側(cè)是系統(tǒng)上安裝的所有可用字體的列表，如圖4-6所示。4.2.1設(shè)置字體格式若要更改字體樣式，請(qǐng)單擊“屬性”檢查器中的“粗體”或“斜體”，或者從“文本”>“樣式”子菜單中選擇字體樣式（“粗體”、“斜體”、“下劃線”等）。當(dāng)然也可以使用“屬性”檢查器單擊相應(yīng)的按鈕、，應(yīng)用粗體或斜體樣式。4.2.1設(shè)置字體格式2. 設(shè)置字體大小若要更改字體大小，請(qǐng)從“屬性”檢查器或“文本”>“大小”子菜單中選擇大小，如圖4-7所示。HTML字體大小是相對(duì)而不是特定的點(diǎn)數(shù)。用戶為他們的瀏覽器設(shè)置默認(rèn)字體的點(diǎn)數(shù)；這是用戶在“屬性”檢查器或“文本”>“大小”子菜單中選擇“默認(rèn)”或“3”時(shí)所看到的字體大小。大小1和2顯得比默認(rèn)字體??；大小4到7顯得比默認(rèn)字體大。4.2.1設(shè)置字體格式3. 設(shè)置顏色對(duì)文本的顏色進(jìn)行設(shè)置時(shí)，單擊“屬性”檢查器中的顏色選擇器，從調(diào)色板中選擇一種顏色即可，如圖4-8所示。4.2.1設(shè)置字體格式用戶也可以選擇菜單“文本”>“顏色”，出現(xiàn)系統(tǒng)顏色選擇器對(duì)話框，如圖4-9所示。選擇一種顏色，然后單擊“確定”。也可以直接在“屬性”檢查器字段中輸入顏色名稱或十六進(jìn)制數(shù)字。若要定義默認(rèn)文本顏色，請(qǐng)使用“修改”中“頁(yè)面屬性”命令。4.2.2使用段落和標(biāo)題使用“屬性”檢查器中的“格式”彈出式菜單或“文本”>“段落格式”子菜單可以應(yīng)用標(biāo)準(zhǔn)段落和標(biāo)題標(biāo)簽。其具體步驟如下：1. 將插入點(diǎn)放在段落中，或者選擇段落中的一些文本。2. 單擊“文本”>“段落格式”子菜單或“屬性”檢查器中的“格式”彈出式菜單，選擇一個(gè)選項(xiàng)。3. 選擇段落格式（例如，“標(biāo)題1”、“標(biāo)題2”、“已編排格式”等）。與所選樣式關(guān)聯(lián)的HTML標(biāo)簽（例如，表示“標(biāo)題1”的h1、表示“標(biāo)題2”的h2、表示“已編排格式”文本的pre等）即應(yīng)用于整個(gè)段落。4.2.2使用段落和標(biāo)題4. 選擇“無”刪除段落格式。5. 對(duì)段落應(yīng)用標(biāo)題標(biāo)簽時(shí)，Dreamweaver自動(dòng)添加下一行文本作為標(biāo)準(zhǔn)段落。若要更改此設(shè)置，請(qǐng)選擇“編輯”>“首選參數(shù)”，然后在“常規(guī)”類別中的“編輯選項(xiàng)”下確保取消選擇“標(biāo)題后切換到普通段落”。注意：在Dreamweaver8.0按Enter鍵可以創(chuàng)建一個(gè)新段落。Web瀏覽器在段落之間自動(dòng)插入一個(gè)空白空格行。通過插入一個(gè)換行符，可以在段落之間添加一個(gè)空格行。6. 直接回車將給添加段落換行，若只是添加換行符，可以使用Shift+Enter。4.2.3文本對(duì)齊方式單擊“文本”菜單中的“對(duì)齊”中的下拉選項(xiàng)，可設(shè)置文本的對(duì)齊方式，步驟如下：1. 選擇要對(duì)齊的文本，或者只需將指針插入到文本開頭。2. 單擊“屬性”檢查器中的對(duì)齊選項(xiàng)（“左對(duì)齊”、“右對(duì)齊”、“居中對(duì)齊”或“兩端對(duì)齊”），如圖4-11所示。第4章格式化文本4.3創(chuàng)建項(xiàng)目列表

4.3創(chuàng)建項(xiàng)目列表在“文檔”窗口中鍵入時(shí)，可以用現(xiàn)有文本或新文本創(chuàng)建編號(hào)（排序）列表、項(xiàng)目符號(hào)（不排序）列表和定義列表。定義列表不使用項(xiàng)目符號(hào)點(diǎn)或數(shù)字這樣的前導(dǎo)字符，通常用在詞匯表或說明中。列表還可以嵌套。嵌套列表是包含其他列表的列表。例如，您可能希望編號(hào)或項(xiàng)目列表嵌套在其他編號(hào)列表中。有關(guān)如何為整個(gè)列表或特定列表項(xiàng)設(shè)置特定列表類型和其他列表選項(xiàng)（例如，重置編號(hào)或在編號(hào)列表中使用羅馬數(shù)字，或設(shè)置方形項(xiàng)目符號(hào)）的信息，請(qǐng)參見設(shè)置“列表屬性”對(duì)話框選項(xiàng)。4.3.1創(chuàng)建列表在Dreamweaver文檔中，可創(chuàng)建編號(hào)列表、項(xiàng)目列表、自定義列表三類。如要插入列表，步驟如下：將插入點(diǎn)放在要添加列表的位置；在單擊“屬性”檢查器中的“項(xiàng)目列表”或“編號(hào)列表”按鈕；或者單擊“文本”菜單中“列表”。4.3.1創(chuàng)建列表3. 指定列表項(xiàng)目的前導(dǎo)字符出現(xiàn)在“文檔”窗口中。4. 鍵入列表項(xiàng)目文本，回車后創(chuàng)建其他列表項(xiàng)目，如圖4-13所示。4.3.2創(chuàng)建嵌套列表要?jiǎng)?chuàng)建嵌套的列表項(xiàng)目，其步驟如下：1. 將光標(biāo)定位在要編輯的列表中；2. 單擊“屬性”檢查器中的“縮進(jìn)”按鈕，或選擇菜單“文本”>“縮進(jìn)”；3. Dreamweaver8.0縮進(jìn)文本并創(chuàng)建一個(gè)單獨(dú)的列表，該列表具有原始列表的HTML屬性；4. 按照上面使用的同一過程，對(duì)縮進(jìn)的文本應(yīng)用新的列表類型或樣式；結(jié)果如圖4-14所示。4.3.3設(shè)置列表屬性使用“列表屬性”對(duì)話框，可以設(shè)置整個(gè)列表或個(gè)別列表項(xiàng)的外觀可以設(shè)置編號(hào)樣式，重置計(jì)數(shù)或設(shè)置個(gè)別列表項(xiàng)目或整個(gè)列表的項(xiàng)目符號(hào)樣式選項(xiàng)，如圖4-15所示。4.3.3設(shè)置列表屬性設(shè)置列表屬性的步驟如下：1. 選中要編輯的列表；2. 選擇“文本”菜單中“列表”子菜單的“屬性”選項(xiàng)，彈出圖4-15所示的“列表屬性”對(duì)話框；3. 在列表類型下拉列表中選擇列表類型：項(xiàng)目列表、編號(hào)列表、目錄列表、菜單列表；4. 將插入點(diǎn)放到列表項(xiàng)目的文本中，然后選擇“文本”>“列表”>“屬性”打開“列表屬性”對(duì)話框。5. 在樣式的下拉菜單中選擇所需要的樣式，如圖4-16所示。在確定了用于編號(hào)列表或項(xiàng)目列表的編號(hào)或項(xiàng)目符號(hào)的樣式后，所有列表項(xiàng)目都將具有該樣式，除非重新為列表項(xiàng)目指定新樣式。4.3.3設(shè)置列表屬性6. 對(duì)于編號(hào)列表，在下方的“開始計(jì)數(shù)”文本框中輸入開始計(jì)數(shù)的數(shù)字即可。默認(rèn)情況下為序列的首字母或者數(shù)字“1”。7. 單擊“確定”設(shè)置所做的選擇并關(guān)閉對(duì)話框第4章格式化文本案例4-1格式化頁(yè)面案例4-1格式化頁(yè)面案例效果：如圖4-17所示。案例4-1格式化頁(yè)面知識(shí)目標(biāo)：利用Dreamweaver8.0來對(duì)文本進(jìn)行編輯。操作步驟：1. 打開在第3章中制作好的頁(yè)面company.htm2. 輸入標(biāo)題文字“美得爾公司簡(jiǎn)介”，并設(shè)置字體大小為“23”，顏色為白色，字體為宋體。3. 插入一條水平線案例4-1格式化頁(yè)面3、在水平線下輸入公司簡(jiǎn)介：“美得爾公司是集設(shè)計(jì)、制作、安裝為一體的大型廣告公司，代理發(fā)布國(guó)內(nèi)及外商來華廣告。專業(yè)從事戶外大型鋼架廣告牌、壓克力吸塑燈箱、內(nèi)發(fā)光大字、LED燈、金屬字、各式金屬宣傳欄、立體發(fā)光字、企業(yè)Logo、標(biāo)識(shí)標(biāo)牌及品牌專柜制作。公司成立以來為各行各業(yè)設(shè)計(jì)、制作了大量的戶外廣告工程，企業(yè)贏得了眾多的客戶一致好評(píng)，同時(shí)，公司在不斷發(fā)展、壯大中擁有了一批具有專業(yè)技能的設(shè)計(jì)及工程技術(shù)人員，吸取了廣告業(yè)的經(jīng)營(yíng)和管理。為您提供全面、優(yōu)質(zhì)服務(wù)?！弊痔?hào)為12，顏色為白色，字體為宋體。案例4-1格式化頁(yè)面5. 輸入主營(yíng)業(yè)務(wù)的相關(guān)內(nèi)容：鋼結(jié)構(gòu)工程、大型樓頂燈箱槽型發(fā)光字、不銹鋼字外打燈看板、霓虹燈鈦金字、各式金屬宣傳欄LED燈、企業(yè)形象墻LOGO字冷陰極燈、企業(yè)品牌專柜制作壓克力吸塑、各種標(biāo)識(shí)標(biāo)牌不銹鋼旗桿、精雕水晶字本章小結(jié)本章所介紹的文本屬性設(shè)置的方法與WORD中的方法相類似。使用屬性面板中的相應(yīng)按鈕可以對(duì)文本進(jìn)行基本的設(shè)置。在網(wǎng)頁(yè)制作過程，在學(xué)習(xí)了樣式后，熟練使用HTML樣式和CSS樣式格式化文本，可以大大提高網(wǎng)頁(yè)制作效率，達(dá)到事倍功半的效果。第5章

圖像的使用

本章學(xué)習(xí)目標(biāo)

Web圖像格式簡(jiǎn)介5.1插入圖像5.2設(shè)置圖像屬性5.3外部圖像編輯器5.5動(dòng)態(tài)圖像5.45.1Web圖像格式簡(jiǎn)介圖像通常用來添加圖形界面、具有視覺感染力的內(nèi)容或交互式設(shè)計(jì)元素，Web頁(yè)中通常使用的只有三種，即GIF、JPEG和PNG。返回5.2插入圖像在“文檔”窗口中，將插入點(diǎn)放置在您要顯示圖像的地方。在插入面板中的常用面板單擊圖標(biāo)，或在單擊“插入”→“圖像”菜單彈出如圖5-1所示“選擇圖像源”對(duì)話框。

圖5-1“選擇圖像源”對(duì)話框在“選擇圖像源”對(duì)話框中選擇要插入的圖像，或直接在URL：文本框中輸入文件的鏈接地址。選擇好圖像后，單擊“確定”按鈕。圖像插入在網(wǎng)頁(yè)文檔的相應(yīng)位置中。

返回5.3設(shè)置圖像屬性選中圖片，屬性面板轉(zhuǎn)為如圖5-4所示圖像面板。圖5-4圖像屬性面板單擊面板右下角的按鈕圖像屬性面板轉(zhuǎn)為如圖5-5所示圖像屬性面板。圖5-5圖像屬性面板設(shè)置圖像的相應(yīng)的屬性。返回5.4動(dòng)態(tài)圖像在Dreamweaver8中，可以利用系統(tǒng)自帶的圖片設(shè)置工具創(chuàng)建簡(jiǎn)單的動(dòng)態(tài)圖像。使鼠標(biāo)經(jīng)過圖片時(shí)，可以產(chǎn)生一些類似按鈕的動(dòng)態(tài)效果來豐富網(wǎng)頁(yè)，而不用過分地追求Flash的動(dòng)態(tài)按鈕或是JavaScript特效。5.4.1圖像熱點(diǎn)創(chuàng)建圖像熱點(diǎn)的步驟如下用鼠標(biāo)在文檔窗口中選中要?jiǎng)?chuàng)建圖片熱點(diǎn)的圖片。選擇圖片熱點(diǎn)工具欄的任一熱點(diǎn)工具。在圖像上任意位置拖動(dòng)鼠標(biāo)，創(chuàng)建熱點(diǎn)。在熱點(diǎn)工具欄中，矩形熱點(diǎn)，創(chuàng)建效果如圖5-25所示；圓形熱點(diǎn)，創(chuàng)建效果如圖5-26所示；多邊形熱點(diǎn)，創(chuàng)建效果如圖5-27所示。

圖5-25矩形熱點(diǎn)圖5-26圓形熱點(diǎn)圖5-27多邊形熱點(diǎn)創(chuàng)建圖片熱點(diǎn)后，在屬性面板中出現(xiàn)如圖5-28所示熱點(diǎn)屬性設(shè)置面板?？梢詫?duì)熱點(diǎn)的鏈接等方面進(jìn)行設(shè)置。5.4.2輪替圖像具體步驟如下：在文檔窗口選擇要輪替的主圖像。在菜單欄中選擇選擇“插入”→“交互式圖像”→“鼠標(biāo)經(jīng)過圖像”選項(xiàng)；或在“插入”面板中選擇“常用”面板中的“鼠標(biāo)經(jīng)過圖像”圖標(biāo)，彈出如圖5-34所示對(duì)話框。圖5-34鼠標(biāo)經(jīng)過圖像設(shè)定好各項(xiàng)參數(shù)之后，單擊“確定”按鈕完成替換圖像的設(shè)置。5.4.3占位圖像圖像占位符是在準(zhǔn)備好將最終圖形添加到Web頁(yè)之前使用的圖形，使用圖像占位還可以更方便地布局網(wǎng)頁(yè)結(jié)構(gòu)。下面，來介紹一下如何使用圖像占位符。5.4.3占位圖像插入圖像占位符在文檔編輯窗口中，將鼠標(biāo)放置到插入占位符圖像的位置。選擇“插入”→“圖像對(duì)象”→“圖像占位符”選項(xiàng)；或在“插入”面板中選擇“常用”面板中的占位符圖標(biāo)。彈出如圖5-35所示圖像占位符“對(duì)話框。設(shè)置圖像占位符各屬性（例名稱、高度、寬度）后，單擊按鈕完成替換圖像的設(shè)置。當(dāng)在瀏覽器窗口中查看時(shí)，不顯示標(biāo)簽文字和大小文本。5.4.3占位圖像設(shè)置占位符屬性選中圖像占位符，屬性面板變?yōu)檎嘉环麑傩?，如圖5-37所示。圖5-37占位符屬性設(shè)置在點(diǎn)位符屬性面板白色文本框中設(shè)置或修改占位符屬性（如地圖文本框等灰色文本框表示屬性不可設(shè)置）5.4.3占位圖像替換占位符在Dreamweaver8的文檔編輯窗口中雙擊圖像占位符，或選中圖像占位符，在占位符屬性面板中，單擊“源文件”文本框旁的圖標(biāo)。出現(xiàn)如圖5-38所示的選擇圖像源窗口。選擇要替換圖像占位符的圖像，單擊“確定”按鈕即可。返回5.5外部圖像編輯器用戶可以使用外部圖像編輯器（Fireworks、photoshop等）來編輯Dreamweaver8文檔窗口中的圖像，當(dāng)在圖像編輯器中編輯圖像后保存并返回Dreamweaver8時(shí)，文檔編輯區(qū)中的圖像也會(huì)隨著

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論