第3章 初識(shí)Dreamweaver.ppt

《第3章 初識(shí)Dreamweaver.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第3章初識(shí)Dreamweaver3.1Dreamweaver8簡介Dreamweaver是由Macromedia公司開發(fā)的一款所見即所得的設(shè)計(jì)軟件FIREWORKS，并稱為“網(wǎng)頁三劍客”。3.2Dreamweaver8的工作界面Dreamweaver8軟件有兩種布局方式：設(shè)計(jì)器編碼器。在首次啟動(dòng)Dreamweaver8時(shí)會(huì)出現(xiàn)一個(gè)“工作區(qū)設(shè)置”對(duì)話框。選擇“窗口”

2、“工作區(qū)布局”

3、“設(shè)計(jì)器/編碼器”可以在兩者間切換。3.2Dreamweaver8的工作界面每次運(yùn)行Dreamweaver8,首先打開起

4、始頁,起始頁將常用的任務(wù)都集中在一個(gè)頁面中,包括“打開最近項(xiàng)目”、“創(chuàng)建新項(xiàng)目”、“從范例創(chuàng)建”等。隱藏“起始頁”，可以選中“不再顯示此對(duì)話框”復(fù)選框，再單擊“確定”。再次顯示起始頁，選擇“編輯”

5、“首選參數(shù)”命令，打開“首選參數(shù)”對(duì)話框，在“常規(guī)”類別中設(shè)置“文檔選項(xiàng)”為“顯示起始頁”即可。3.2Dreamweaver8的工作界面Dreamweaver8標(biāo)準(zhǔn)工作界面大致分為以下幾個(gè)區(qū)域：標(biāo)題欄、菜單欄、“插入”工具欄、“文檔”工具欄、“標(biāo)準(zhǔn)”工具欄、文檔窗口、狀態(tài)欄、屬性面板、浮動(dòng)面板組。3.2D

6、reamweaver8的工作界面1．標(biāo)題欄顯示軟件版本信息和正在編輯文檔的名字、路徑等信息。2.菜單欄Dreamweaver菜單欄共有10個(gè)選項(xiàng)。3.“文檔”工具欄“文檔”工具欄包含各種按鈕，標(biāo)題文本框顯示網(wǎng)頁標(biāo)題。提供三種視圖方式按鈕（“設(shè)計(jì)”視圖、“拆分”視圖、“代碼”視圖）、各種查看選項(xiàng)和一些常用操作（如在瀏覽器中預(yù)覽）。3.2Dreamweaver8的工作界面4．“插入”工具欄“插入”工具欄集成了所有可以在網(wǎng)頁中應(yīng)用的對(duì)象?！安迦搿惫ぞ邫诎ǔＳ?、布局、表單、文本、HTML、應(yīng)用程序、Fla

7、sh元素、收藏夾等八個(gè)類別。5．“標(biāo)準(zhǔn)”工具欄“標(biāo)準(zhǔn)”工具欄包含來自“文件”和“編輯”菜單中的一般操作的按鈕：“新建”、“打開”、“保存”、“保存全部”、“剪切”、“復(fù)制”、“粘貼”、“撤消”和“重做”。6．“文檔”窗口“文檔“窗口顯示當(dāng)前文檔?？梢赃x擇下列任一視圖：“設(shè)計(jì)”、“代碼”、“拆分”。3.2Dreamweaver8的工作界面7．屬性面板屬性面板又稱屬性檢查器，屬性面板可以檢查和編輯當(dāng)前選定頁面元素（如文本和插入的對(duì)象）的最常用屬性。屬性檢查器中的內(nèi)容根據(jù)選定的元素會(huì)有所不同。8．狀態(tài)欄“

8、文檔”窗口的底部的狀態(tài)欄提供了與正在創(chuàng)建的文檔有關(guān)的其他信息。單擊標(biāo)簽以選擇該標(biāo)簽及該層次結(jié)構(gòu)中的全部內(nèi)容。單擊可以選擇文檔的整個(gè)正文。9．面板面板分別位于“文檔”窗口的下方和右側(cè)。位于“文檔”窗口的下方的是屬性面板，位于“文檔”窗口右側(cè)的是浮動(dòng)面板組。3.3Dreamweaver8頁面的總體設(shè)置3.3.1設(shè)置頁面的相關(guān)信息網(wǎng)頁的頭部信息在瀏覽器中是不可見的，但是卻攜帶著網(wǎng)頁的重要信息，如關(guān)鍵字、描述文字等，還可以實(shí)現(xiàn)一些非常重要的功能，如自動(dòng)刷新功能。（1）設(shè)置標(biāo)題：網(wǎng)頁標(biāo)題可以是中文

9、、英文或符號(hào)，顯示在瀏覽器的標(biāo)題欄中。直接在設(shè)計(jì)窗口上方的標(biāo)題欄內(nèi)輸入或更改，就可以完成網(wǎng)頁標(biāo)題的編輯。（2）設(shè)置文件頭：“插入”工具欄

10、“HTML”項(xiàng)

11、“文件頭”3.3Dreamweaver8頁面的總體設(shè)置3.3.2設(shè)置頁面屬性單擊“屬性”面板中的“頁面屬性”按鈕，或執(zhí)行“修改”菜單的“頁面屬性”命令，打開的“頁面屬性”對(duì)話框。3.4網(wǎng)頁實(shí)例制作3.4.1新建站點(diǎn)1、規(guī)劃站點(diǎn)結(jié)構(gòu)網(wǎng)站是多個(gè)網(wǎng)頁的集合，其包括一個(gè)首頁和若干個(gè)分頁，這種集合不是簡單的集合。為了達(dá)到最佳效果，在創(chuàng)建任何Web站點(diǎn)頁面之前

12、，要對(duì)站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。決定要?jiǎng)?chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及各頁是如何互相連接起來的。通過把文件分門別類的放置在各自的文件夾里，使網(wǎng)站的結(jié)構(gòu)清晰明了，便于管理和查找。3.4網(wǎng)頁實(shí)例制作2、創(chuàng)建站點(diǎn)在Dreamweaver8中可以有效的建立并管理多個(gè)站點(diǎn)。創(chuàng)建站點(diǎn)可以有兩種方法：利用向?qū)瓿衫酶呒?jí)設(shè)定來完成。（1）建立站點(diǎn)文件夾在搭建站點(diǎn)前，首先在電腦硬盤上建一個(gè)以英文或數(shù)字命名的空文件夾，稱為網(wǎng)站的根文件夾。（2）建立站點(diǎn)3.4網(wǎng)頁實(shí)例制作3.4.2網(wǎng)頁制作（1）素材準(zhǔn)

13、備準(zhǔn)備好兩幅圖片bg.gif和gu35.jpg，分別用于頁面背景和網(wǎng)頁中的插圖。（2）新建站點(diǎn)和網(wǎng)頁①新建站點(diǎn)根文件夾，如E:mysite,再啟動(dòng)Dreamweaver，單擊菜單“站點(diǎn)”

14、“新建站點(diǎn)”，創(chuàng)建一個(gè)站點(diǎn)。②單擊“文件”

15、“新建”命令，新建一個(gè)空白的網(wǎng)頁。（3）設(shè)置頁面屬性（4）插入網(wǎng)頁元素（5）編輯網(wǎng)頁元素（6）保存和預(yù)覽網(wǎng)頁注意：插入的圖像并不是存儲(chǔ)在網(wǎng)頁文件里，網(wǎng)頁文件中顯示的圖像來自站點(diǎn)中的圖像文件，因此，圖像在網(wǎng)頁中如果要正常顯示的話，該圖像文件