Dreamweaver基礎(chǔ)技巧全面接觸_第1頁
Dreamweaver基礎(chǔ)技巧全面接觸_第2頁
Dreamweaver基礎(chǔ)技巧全面接觸_第3頁
Dreamweaver基礎(chǔ)技巧全面接觸_第4頁
Dreamweaver基礎(chǔ)技巧全面接觸_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、很多朋友使用Dreamweaver一段時(shí)間后，開始熱衷于尋找各式各樣的插件，追求各種各樣的特效，而對(duì)于Dreamweaver中的基本功能反而不去深入研究，其實(shí)在Dreamweaver中有很多有用的技巧，如果你多加運(yùn)用，不僅能提高效率，而且可以實(shí)現(xiàn)很多實(shí)用的效果。今天我把工作中常用的一些技巧介紹給大家，希望對(duì)大家能有些用途，同時(shí)也希望能喚起大家深入研究的愿望。我準(zhǔn)備根據(jù)工作中的不同階段分別介紹各種技巧。一、 規(guī)劃階段站點(diǎn)窗口的技巧。Dreamweavr的站點(diǎn)窗口常常被很多朋友忽視，其實(shí)利用站點(diǎn)窗口我們可以方便的完成很多任務(wù)。下面我介紹幾個(gè)實(shí)用的技巧。1、快速添加站點(diǎn)導(dǎo)航。使用站點(diǎn)窗口中的網(wǎng)站地圖

2、可以快速制作網(wǎng)站雛形，并可以方便的在個(gè)頁面之間加入導(dǎo)航鏈接。首先按如下圖標(biāo) 打開站點(diǎn)地圖窗口；選中index.htm文件；點(diǎn)擊并拖動(dòng)站點(diǎn)導(dǎo)航（Site Navigation）窗口中index.htm文件右上角的小圓圈，將它拖動(dòng)到左邊文件窗口中的某一個(gè)文件上，如下圖所示；Dreamweaver會(huì)自動(dòng)將mydesign.htm的鏈接加入到index.htm文件中，同樣執(zhí)行此操作并分別指向其他相關(guān)鏈接文件后，導(dǎo)航窗口如下圖：此時(shí)打開index.htm文件，可以看到相應(yīng)的連接文字和鏈接都已經(jīng)添加好了，我們可以根據(jù)需要將他們合理的修改和組織。如圖：2、快速修改文件Title。很多時(shí)候我們新建的文件往往忽

3、視設(shè)定文件Title的內(nèi)容，事后需要修改時(shí)，常常得打開每一個(gè)文件分別修改。其實(shí)這個(gè)工作可以在站點(diǎn)窗口中方便的完成。打開站點(diǎn)窗口View菜單下的Show Page Titles，可以使站點(diǎn)窗口中的文件顯示出文件頭，而不是原先的文件名。默認(rèn)的文件頭是Untitled Document我們可以分別兩次點(diǎn)擊，改變默認(rèn)的文字為我們需要的文件頭。如圖：3、快速生成站點(diǎn)地圖。有時(shí)我們需要制作一個(gè)包含當(dāng)前站點(diǎn)所有文件結(jié)構(gòu)的站點(diǎn)地圖而找不到合適的方法。Dreamweaver本身就帶有這個(gè)功能，方法如下：打開FileSave Site Map命令，在彈出對(duì)話框中輸入保存的文件名，Dreamweaver會(huì)在當(dāng)前站點(diǎn)

4、的根目錄下自動(dòng)生成一個(gè).bmp或.png格式的站點(diǎn)圖片。二、 頁面布局階段的技巧。Dreamweaver不僅僅是一個(gè)良好的頁面制作工具，同時(shí)他還可以進(jìn)行精確的頁面排版和布局，這一部分我們介紹幾個(gè)頁面布局方面的技巧。1、打開輔助表格。搞過設(shè)計(jì)的朋友都特別希望能精確的定位網(wǎng)頁元素，他們喜歡每個(gè)元素都能按自己的愿望精確的定位。Dreamweaver自帶的Grid功能可以有助于這種希望的實(shí)現(xiàn)。執(zhí)行命令ViewEdit Grid打開坐標(biāo)輔助，可以選擇網(wǎng)格狀或者是點(diǎn)狀顯示，同時(shí)打開Snap to Grid，以后插入或添加新的元素時(shí)，都會(huì)按你的設(shè)定精確定位。2、利用表格排版頁面技巧。合理利用Dreamwea

5、ver中的表格功能，可以方便的達(dá)到美化頁面的目的，下面我介紹幾個(gè)技巧。1）創(chuàng)建1px邊框。有些朋友抱怨Dreamweaver無法做出單像素的表格邊框，其實(shí)仔細(xì)利用表格的屬性面板即可做出這種單像素表格。首先使用Object面板插入一個(gè)表格，定義表格寬、高及行數(shù)和列數(shù)。此時(shí)Dreamweaver中插入表格的默認(rèn)CellPad和CellSpace、Border都為0。在屬性面板中定義表格的Border為0，CellPad為5（這項(xiàng)可使單元格中的內(nèi)容與單元格邊緣之間保持5個(gè)像素）；CellSpace為1（此項(xiàng)使得單元格之間保持1個(gè)項(xiàng)素的間距）。設(shè)置表格的背景色為深色（如#999999），設(shè)置單元格的背

6、景色為淺色（如#FFFFFF）。在瀏覽其中觀察效果即可。2）導(dǎo)入數(shù)據(jù)表格。有時(shí)我們需要將一些在Execel文件中創(chuàng)建的表格導(dǎo)入Dreamweaver中，我們可以下將原來的Execel文件另存為帶制表符分隔的.txt文本文件。在Dreamweaver中執(zhí)行InsertTabular Date打開如下窗口：添好各個(gè)參數(shù)后即可將其中的數(shù)據(jù)導(dǎo)入Dreamweaver的一個(gè)表格中。3）格式化表格。如果你對(duì)重復(fù)的設(shè)定各個(gè)單元格的參數(shù)感到厭煩的話，使用Format Table命令可以幫你快速格式化表格，此命令在Command菜單下，此命令內(nèi)帶多種表格配色方案，你可以選擇一種，Dreamweaver會(huì)自動(dòng)將色

7、彩方案應(yīng)用到你選定的表格上。如圖：4、表格和層互轉(zhuǎn)。有的朋友喜歡自由自在的安排他的頁面內(nèi)容，總不喜歡表格的工作方式。其實(shí)你完全可以利用靈活的層來安排你的頁面內(nèi)容，當(dāng)你覺得滿意時(shí)再將它轉(zhuǎn)換為表格。選中你需要轉(zhuǎn)換的層，執(zhí)行命令ModifyConvertLayers to Table。如圖：5、同時(shí)更新多個(gè)框架頁面。有是我們需要在點(diǎn)擊一個(gè)鏈接時(shí)同時(shí)更新另外的兩個(gè)或多個(gè)框架頁面內(nèi)容，這可以通過以下步驟使用Dreamweaver的行為來實(shí)現(xiàn)。1） 選擇鏈接的文字或圖片。2） 打開行為面板（Behaviors），點(diǎn)擊加號(hào)添加Go to URL行為。3） 在Go to URL對(duì)話框中顯示了當(dāng)前已有的所有框架

8、窗口，我們分別選定一個(gè)窗口名稱，可以分別單獨(dú)設(shè)定每個(gè)窗口將要更新的文件內(nèi)容。Dreamweaver會(huì)在設(shè)定了目標(biāo)文件的窗口后面加一個(gè)“*”號(hào)，表示此框架窗口已設(shè)定了URL。4） 完成后點(diǎn)確定即可，我們點(diǎn)此鏈接，會(huì)同時(shí)更新多個(gè)窗口的內(nèi)容。三、 內(nèi)容篇，如何更快更方便得對(duì)內(nèi)容進(jìn)行組織，是每個(gè)朋友都想了解的，下面這幾個(gè)技巧也許你知道，也許不知道，但重要的是通過不斷的運(yùn)用，你會(huì)發(fā)現(xiàn)它的優(yōu)越性的。1、快速標(biāo)簽編輯。對(duì)于熟悉手寫代碼的朋友來說，經(jīng)常需要切換到代碼窗口手工添加一些代碼。其實(shí)利用Dreamweaver的Quick Tag Editor可以快速插入各種HTML標(biāo)簽，一個(gè)是點(diǎn)擊屬性面板的圖標(biāo)插入，

9、另一種快捷方式是Ctrl+T，這兩種方法都會(huì)打開快速標(biāo)簽編輯，可以直接從列表中選擇需要的源代碼標(biāo)簽，如下圖：2、快速添加圖片邊框。對(duì)于插入網(wǎng)頁中的許多圖片都是沒有邊框的，有時(shí)我們需對(duì)圖片添加邊框，我們不需要打開圖像處理軟件即可實(shí)現(xiàn)。一種方法是選中圖片后直接在屬性面板定義Border為1px，這會(huì)給圖片添加1像素的邊框；另一種方法是定義一個(gè)樣式，我們可以將img標(biāo)簽直接定義為四邊都為1px的樣式，則網(wǎng)頁中所有插入的圖片都會(huì)帶有相同的邊框。如圖：3、使用拖動(dòng)方式增加鏈接。Dreamweaver支持從文檔內(nèi)直接托動(dòng)鏈接到站點(diǎn)內(nèi)的其他文件，我們可以將站點(diǎn)窗口和文檔窗口并排放置，如圖：然后選中文檔中需要

10、鏈接的文字，打開屬性面版，將鏈接地址欄后的Point to File指向站點(diǎn)窗口中的目標(biāo)文件即可，如下圖：4、如何加入背景聲音。在Dreamweaver中對(duì)于一些多媒體聲音文件的插入，很多朋友都感到有些困惑，其實(shí)很簡單，點(diǎn)擊Dreamweaver 工作窗口最左下角的 <body> 標(biāo)簽，打開Behavior面板，在彈出的behavior窗口點(diǎn)+號(hào)，選擇Play Sound，選擇你需要的聲音文件即可加入。在文檔窗口中選中聲音文件標(biāo)識(shí)，在屬性面板點(diǎn)擊Parameters就可以自行設(shè)定背景音樂的循環(huán)次數(shù)、是否自動(dòng)播放等屬性了，如圖：四、 美化篇。美化各種網(wǎng)頁元素是一件既耗時(shí)又不一定出效果

11、的工作，下面我介紹的幾個(gè)技巧也許能幫你一點(diǎn)忙。1、快速創(chuàng)建配色方案。我們經(jīng)常需要設(shè)定鏈接各個(gè)狀態(tài)的文字顏色，有些朋友感覺自己的色彩感不太好，總?cè)ふ乙恍┡渖謨?cè)。其實(shí)Dreamweaver本身已經(jīng)帶了一些配色方案，打開CommandsSet Color Scheme命令，我們可以看到有許多成套的配色方案，每個(gè)都定義了背景色、文字色、鏈接各個(gè)狀態(tài)的顏色，你只需選擇一種即可，見下圖：2、CSS鏈接樣式技巧。文字鏈接一般有四個(gè)狀態(tài)，link、hover、active、visited，我們通常都會(huì)對(duì)文字鏈接的各個(gè)狀態(tài)定義不同的色彩和樣式，但經(jīng)常有朋友發(fā)現(xiàn)自己定義的樣式在瀏覽時(shí)并未像設(shè)想的那樣。主要原因

12、是在樣式表中對(duì)鏈接的定義順序有一定的要求，正確的順序是：A:linkA:visitedA:hover。對(duì)一般的朋友來說，其實(shí)很多時(shí)候只是想Hover狀態(tài)有變化，有個(gè)小技巧就是不按上面的方法定義鏈接樣式，而只需定義a和a:hover狀態(tài)的樣式即可，這樣只有hover狀態(tài)的樣式與其他狀態(tài)的不同。修改方法如下圖；3、創(chuàng)建不同色彩的連接文字與下劃線。普通的鏈接文字與鏈接下劃線都是相同的色彩，其實(shí)我們也可以利用樣式表中的Border屬性來替代普通鏈接的劃線，由于Border有更多的控制參數(shù)和樣式，因此只要將Border的色彩和文字的色彩定義的不同即可實(shí)現(xiàn)我們的目的。例如我們可以將文字定義為黑色，而在Bo

13、rder選項(xiàng)中定義下劃線為紅色，如下圖；五、 提高效率技巧。Dreamweaver還包含了許多可以極大提高工作效率的命令，包括庫項(xiàng)目的建立、模板的運(yùn)用、歷史面板的功能及查找替換功能。這里我介紹幾個(gè)小的技巧來演示這些命令的強(qiáng)大。1、清理Word文件技巧。我們經(jīng)常需要將一些Word文件轉(zhuǎn)換為HTML文件，但這種轉(zhuǎn)換的結(jié)果是生成的HTML文件非常的大，里面包含了許多重復(fù)代碼，綜合利用Dreamweaver的幾個(gè)功能可以方便的清理掉無用代碼。首先打開Word生成的HTML文件，執(zhí)行Commands菜單下Clean Up Word HTML命令，程序會(huì)自動(dòng)識(shí)別原來Word的版本，并將無用的代碼清除。但此

14、時(shí)的文件仍就有許多重復(fù)代碼，主要是包含了大量的<span>和<p>標(biāo)簽，我們可以再次執(zhí)行Commands菜單下的Clean up HTML命令，在彈出的對(duì)話框中選定Specific Tag(s) 選項(xiàng)，并輸入span 和p標(biāo)簽，中間用空格分開，執(zhí)行命令后，所有的span和p標(biāo)簽都被清除掉。但此時(shí)文件中的每個(gè)圖片屬性中還包含了類似v:shapes="_x0000_i1025"的屬性，我們還需將這些屬性清除。打開查找替換面板，按下圖的設(shè)置設(shè)定替換規(guī)則，執(zhí)行后即可清除所有圖片的這些屬性。如圖；2、快速替換文件標(biāo)題。前面我介紹了可以在站點(diǎn)窗口替換文件標(biāo)題，但

15、是只能一次替換一個(gè)文件的標(biāo)題，我們可以嘗試著利用上一步介紹的查找替換命令一次替換多個(gè)文件的標(biāo)題。通常我們新建的文件標(biāo)題都是Untitled Document，可以打開EditFind And Replace命令，進(jìn)行如下設(shè)置，將當(dāng)前站點(diǎn)所有文件標(biāo)題為Untitled Document的都替換為我們自己的標(biāo)題。3、設(shè)置默認(rèn)文檔格式。上面的方法雖然快捷，但是我們每次新建一個(gè)文件時(shí)，默認(rèn)的文件標(biāo)題仍舊是Untitled Document。因?yàn)樾陆ㄎ臋n時(shí)，Dreamweaver會(huì)調(diào)用一個(gè)默認(rèn)的頁面作為缺省格式，這個(gè)文件是Dreamweaver 4ConfigurationTemplatesDefaul

16、t.html，這樣我們就可以將我們站點(diǎn)中統(tǒng)一的一些格式設(shè)置好，如背景色、字體大小、文件標(biāo)題等，然后將它保存覆蓋上面的Default.html文件。在以后我們新建文件時(shí)，Dreamweaver會(huì)自動(dòng)套用我們?cè)O(shè)定好的格式，這可以提高很大的工作效率。六、 后期維護(hù)篇。好了，經(jīng)過上面這么多的介紹，我們已經(jīng)掌握了一些網(wǎng)頁制作的技巧，但是您作完的頁面是否不再包含錯(cuò)誤？您的鏈接是否都正確的鏈接？您的頁面在各種瀏覽器中是否都表現(xiàn)良好？您的站點(diǎn)中是否還有許多不再需要的文件？很多類似的問題都還存在著，這些都是屬于站點(diǎn)后期檢測(cè)和維護(hù)。這里我們?cè)俳榻B幾個(gè)后期檢測(cè)方面的技巧。1、鏈接檢測(cè)。執(zhí)行菜單FileCheck L

17、inks命令，Dreamweaver會(huì)自動(dòng)檢測(cè)當(dāng)前站點(diǎn)中的所有鏈接，并檢測(cè)出無效的鏈接，如下圖：雙擊檢測(cè)出的一個(gè)結(jié)果，會(huì)自動(dòng)打開相應(yīng)的頁面并直接定位到錯(cuò)誤的鏈接處，很方便我們修改鏈接錯(cuò)誤。2、快速檢測(cè)無用文件。執(zhí)行菜單命令SiteCheck Links Sitewide可以打開鏈接文件檢測(cè)功能，我們也可以利用這個(gè)功能檢查站點(diǎn)中無用的文件，并刪除。只要選擇最上方下拉框中為Orphaned Files，所有站點(diǎn)中無用的文件會(huì)列在下方，將它們?nèi)窟x中，按Delete鍵即可刪除。3、快速生成站點(diǎn)報(bào)告(Reports)。運(yùn)行菜單命令SiteReports可以快速的根據(jù)我們的需要生成符合某種條件的站點(diǎn)報(bào)告或文件報(bào)告，例如可刪除的空標(biāo)簽、未命名的文件標(biāo)題、無Alt屬性的圖片等等。如下圖：我們需要先在最上方的下拉框中選擇需要執(zhí)行檢測(cè)的范圍，例

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論