使用Dreamweaver制作個(gè)人網(wǎng)站

第2章使用Dreamweaver制作個(gè)人網(wǎng)站學(xué)習(xí)目標(biāo)：1)了解Dreamweaver的工作界面，掌握創(chuàng)建及管理一個(gè)站點(diǎn)的方法。2)掌握網(wǎng)頁(yè)文檔的創(chuàng)建、保存、關(guān)閉等基本操作。3)掌握插入普通文本、特殊文本、圖像、表格等網(wǎng)頁(yè)基本元素的方法，能創(chuàng)建文本、圖像、錨點(diǎn)等超級(jí)鏈接。4)理解CSS規(guī)則，能創(chuàng)建簡(jiǎn)單的CSS樣式表。5)了解常用的增添網(wǎng)頁(yè)特效的行為、DIV的基礎(chǔ)常識(shí)。2.1需求分析個(gè)人網(wǎng)站的欄目因個(gè)人興趣愛(ài)好所致各有不同，可根據(jù)主題需要，確定網(wǎng)站欄目和主色調(diào)。本實(shí)例需要實(shí)現(xiàn)的功能模塊包括個(gè)人簡(jiǎn)介（用以介紹個(gè)人基本信息）、個(gè)人相冊(cè)（用以呈現(xiàn)家庭、朋友及個(gè)人的溫馨照片）、攝影作品（用以呈現(xiàn)個(gè)人感興趣的攝影作品）、其他作品（包括網(wǎng)站作品、平面作品、DV作品等）、請(qǐng)您留言（可以讓瀏覽者在此提出一些建議或意見(jiàn)等）和在線聊天（提供給用戶交流的一個(gè)平臺(tái)）2.2任務(wù)分解2.2.1網(wǎng)站制作工具DreamweaverCS4的熟練操作2.2.2站點(diǎn)的規(guī)劃與創(chuàng)建2.2.3網(wǎng)頁(yè)文檔的基本操作2.2.4網(wǎng)頁(yè)基本元素的插入2.2.5創(chuàng)建網(wǎng)頁(yè)超鏈接2.2.6使用CSS美化網(wǎng)頁(yè)2.2.7使用行為增添網(wǎng)頁(yè)特效2.2.1任務(wù)一：DreamweaverCS4簡(jiǎn)介菜單欄工具欄文檔編輯區(qū)屬性面板狀態(tài)欄插入面板2.2.2任務(wù)二：站點(diǎn)的規(guī)劃與創(chuàng)建1.站點(diǎn)規(guī)劃2.2.2任務(wù)二：站點(diǎn)的規(guī)劃與創(chuàng)建2.站點(diǎn)創(chuàng)建2.2.2任務(wù)二：站點(diǎn)的規(guī)劃與創(chuàng)建2.站點(diǎn)創(chuàng)建2.2.2任務(wù)二：站點(diǎn)的規(guī)劃與創(chuàng)建2.站點(diǎn)創(chuàng)建任務(wù)三：網(wǎng)頁(yè)文檔的基本操作

1.新建個(gè)人網(wǎng)站網(wǎng)頁(yè)文檔

（1）在“頁(yè)面類型”一欄的選項(xiàng)里，靜態(tài)網(wǎng)頁(yè)選擇“HTML”，動(dòng)態(tài)網(wǎng)頁(yè)則選擇相應(yīng)的頁(yè)面類型。（2）如果希望網(wǎng)頁(yè)文檔不包含任務(wù)CSS布局，選擇“無(wú)”；否則，從“布局”列表中選擇預(yù)設(shè)的CSS布局。（3）如果在“布局”列表中選擇了一個(gè)布局，則在“布局CSS位置”中需要為其選擇一個(gè)位置。（4）“首選參數(shù)”項(xiàng)可以設(shè)置文檔的默認(rèn)首選參數(shù)，例如文檔類型、編碼類型和文件擴(kuò)展名等。任務(wù)三：網(wǎng)頁(yè)文檔的基本操作

2.保存網(wǎng)頁(yè)文檔3.打開網(wǎng)頁(yè)文檔4.關(guān)閉網(wǎng)頁(yè)文檔任務(wù)務(wù)四四：：網(wǎng)網(wǎng)頁(yè)頁(yè)基基本本元元素素的的插插入入1.插入入布布局局（1）表表格格布布局局表格格既既可可以以作作為為一一種種元素素豐豐富富網(wǎng)網(wǎng)頁(yè)頁(yè)內(nèi)內(nèi)容容也也可以以作作為為一一種種布布局局工工具使使網(wǎng)網(wǎng)頁(yè)頁(yè)的的整整體體更更加加有條條理理任務(wù)務(wù)四四：：網(wǎng)網(wǎng)頁(yè)頁(yè)基基本本元元素素的的插插入入1.插入入布布局局（2）框框架架布布局局任務(wù)務(wù)四四：：網(wǎng)網(wǎng)頁(yè)頁(yè)基基本本元元素素的的插插入入1.插入入布布局局（2）框框架架布布局局框架架提提供供將將一一個(gè)個(gè)瀏瀏覽覽器器劃劃分分成成幾幾個(gè)個(gè)區(qū)區(qū)域域的的方方法法，，在在每每個(gè)個(gè)區(qū)區(qū)域域里里可可以以顯顯示示不不同同的的頁(yè)頁(yè)面面，，每每個(gè)個(gè)frame里的的網(wǎng)網(wǎng)頁(yè)頁(yè)相相互互獨(dú)獨(dú)立立。。框框架架集集則則定定義義了了一一組組框框架架的的布布局局、、屬屬性性等等。。框框架架集集本本身身不不包包含含要要在在瀏瀏覽覽器器中中顯顯示示的的頁(yè)頁(yè)面面內(nèi)內(nèi)容容，，它它只只是是向向?yàn)g瀏覽覽器器提提供供如如何何顯顯示示一一組組框框架架以以及及在在這這些些框框架架中中應(yīng)應(yīng)該該顯顯示示哪哪些些文文檔檔的的信信息息。。任務(wù)務(wù)四四：：網(wǎng)網(wǎng)頁(yè)頁(yè)基基本本元元素素的的插插入入2.插入入內(nèi)內(nèi)容容（1）文文本本元元素素的的插插入入與與編編輯輯1）普普通通文文本本可可以以直直接接在在文文檔檔窗窗口口中中鍵鍵入入，，也也可可以以從從其其他他應(yīng)應(yīng)用用程程序序或或窗窗口口中中復(fù)復(fù)制制粘粘貼貼，，例例如如Word，TXT文件件等等。。2）Dreamweaver也提提供供了了插插入入特特殊殊文文本本的的菜菜單單，，選選擇擇““插插入入/HTML/特殊殊字字符符””菜菜單單命命令令，，可可以以看看到到軟軟件件為為用用戶戶提提供供的的較較為為常常見(jiàn)見(jiàn)的的多多種種特特殊殊字字符符。。3）在在Dreamweaver里插插入入空空格格的的做做法法是是將將輸輸入入法法切切換換到到中中文文輸輸入入狀狀態(tài)態(tài)，，并并將將全全角角打打開開，，此此時(shí)時(shí)用用戶戶只只要要在在想想要要插插入入空空格格的的地地方方敲敲擊擊空空格格鍵鍵，，即即可可以以實(shí)實(shí)現(xiàn)現(xiàn)空空格格的的輸輸入入；；在在HTML代碼碼中中插插入入

即可可以以實(shí)實(shí)現(xiàn)現(xiàn)空空格格。。任務(wù)務(wù)四四：：網(wǎng)網(wǎng)頁(yè)頁(yè)基基本本元元素素的的插插入入2.插入入內(nèi)內(nèi)容容（2）圖圖像像元元素素的的插插入入用于于網(wǎng)網(wǎng)站站制制作作的的圖圖像像要要求求是是gif，jpg，png，psd中的的一一種種任務(wù)務(wù)四四：：網(wǎng)網(wǎng)頁(yè)頁(yè)基基本本元元素素的的插插入入2.插入入內(nèi)內(nèi)容容（3）其其他他媒媒體體的的插插入入其他他媒媒體體包包括括音音頻頻、、視視頻頻、、動(dòng)動(dòng)畫畫等等選擇擇““插插入入/媒體體/SWF””菜單單命命令令，，或或者者在在插插入入面板板中中選選擇擇““媒媒體體/SWF””任務(wù)務(wù)五五：：創(chuàng)創(chuàng)建建網(wǎng)網(wǎng)頁(yè)頁(yè)超超級(jí)級(jí)鏈鏈接接1.文本本超超級(jí)級(jí)鏈鏈接接文本本超超級(jí)級(jí)鏈鏈接接是是運(yùn)運(yùn)用用最最普普遍遍的的一一種種超超級(jí)級(jí)鏈鏈接接方方式式，，這這里里的的文文本本可可以以是是字字、、詞詞、、短短語(yǔ)語(yǔ)、、句句子子等等。。任務(wù)務(wù)五五：：創(chuàng)創(chuàng)建建網(wǎng)網(wǎng)頁(yè)頁(yè)超超級(jí)級(jí)鏈鏈接接2.圖片片超超級(jí)級(jí)鏈鏈接接（1）單單張張圖圖片片的的超超級(jí)級(jí)鏈鏈接接選中中圖圖像像，，在在““屬屬性性””面面板板的的““鏈鏈接接””文文本本框框中中輸輸入入要要鏈鏈接接的的目目標(biāo)標(biāo)，，包包括括網(wǎng)網(wǎng)頁(yè)頁(yè)、、圖圖像像、、應(yīng)應(yīng)用用程程序序等等（2）熱熱區(qū)區(qū)超超級(jí)級(jí)鏈鏈接接插入入圖圖片片，，并并選選中中圖圖片片，，用用展展開開的的屬屬性性面面板板上上的的繪繪圖圖工工具具在在畫畫面面上上繪繪制制熱熱區(qū)區(qū)任務(wù)務(wù)五五：：創(chuàng)創(chuàng)建建網(wǎng)網(wǎng)頁(yè)頁(yè)超超級(jí)級(jí)鏈鏈接接3.錨點(diǎn)點(diǎn)超超級(jí)級(jí)鏈鏈接接（1）將將光光標(biāo)標(biāo)置置于于文文檔檔窗窗口口想想要要設(shè)設(shè)置置錨錨點(diǎn)點(diǎn)的的地地方方；；（2）選選擇擇““插插入入/命名名錨錨記記””菜菜單單命命令令，，或或者者在在插插入入面面板板中中單單擊擊““命命名名錨錨記記””，，并并輸輸入入錨錨記記名名稱稱，，注注意意錨錨點(diǎn)點(diǎn)區(qū)區(qū)分分大大小小寫寫；；（3）在在文文檔檔窗窗口口中中，，選選擇擇要要建建立立超超級(jí)級(jí)鏈鏈接接的的文文本本或或圖圖像像，，在在屬屬性性面面板板中中的的鏈鏈接接文文本本框框中中，，輸輸入入#和錨錨點(diǎn)點(diǎn)名名，，例例如如#top。（4）保保存存預(yù)預(yù)覽覽或或按按F12預(yù)覽覽并并進(jìn)進(jìn)行行修修改改。。任務(wù)務(wù)五五：：創(chuàng)創(chuàng)建建網(wǎng)網(wǎng)頁(yè)頁(yè)超超級(jí)級(jí)鏈鏈接接4.電子子郵郵件件超超級(jí)級(jí)鏈鏈接接（1）將將光光標(biāo)標(biāo)置置于于要要顯顯示示電電子子郵郵件件超超級(jí)級(jí)鏈鏈接接的的地地方方，，或或者者選選定定希希望望顯顯示示電電子子郵郵件件超超級(jí)級(jí)鏈鏈接接的的文文本本、、圖圖片片等等。。（2）選擇““插入/電子郵件件超級(jí)鏈鏈接”菜菜單命令令，或者者在插入入面板中中單擊““電子郵郵件超級(jí)級(jí)鏈接””。（3）在“文文本”文文本框中中輸入要要顯示超超級(jí)鏈接接的文本本，如果果事先已已經(jīng)選擇擇了文本本，該文文本框會(huì)會(huì)自動(dòng)將將文本顯顯示出來(lái)來(lái)，在““E-mail””文本框中中輸入郵郵箱地址址，如，如圖2-30所示。（4）單擊確確定并進(jìn)進(jìn)行測(cè)試試任務(wù)五：：創(chuàng)建網(wǎng)網(wǎng)頁(yè)超級(jí)級(jí)鏈接5.腳本超級(jí)級(jí)鏈接和和空鏈接接（1）腳本超超級(jí)鏈接接在屬性面面板的““鏈接””文本框框中，鍵鍵入Javascript：Javascript代碼例如：javascript:window.close();（2）空鏈接接空鏈接是是未指派派的鏈接接?？真滄溄又饕糜陧?yè)頁(yè)面上的的對(duì)象或或文本附附加行為為。例如，可可向空鏈鏈接附加加一個(gè)行行為，以以便在滑滑過(guò)該鏈鏈接時(shí)會(huì)會(huì)交換圖圖像或顯顯示絕對(duì)對(duì)定位的的元素。。任務(wù)六：：使用CSS美化頁(yè)面面CSS（CascadingStyleSheets）層疊樣樣式表，，是一種種標(biāo)記語(yǔ)語(yǔ)言，它它是一系系列用來(lái)來(lái)美化和和布局網(wǎng)網(wǎng)頁(yè)的格格式設(shè)置置規(guī)則。。“層疊””指對(duì)同同一個(gè)元元素或Web頁(yè)面應(yīng)用用多個(gè)樣樣式的能能力。例例如，創(chuàng)創(chuàng)建一個(gè)個(gè)CSS規(guī)則來(lái)應(yīng)應(yīng)用字體體顏色，，創(chuàng)建另另一個(gè)規(guī)規(guī)則應(yīng)用用行距，，然后將將兩者應(yīng)應(yīng)用于一一個(gè)頁(yè)面面的同一一段文本本。CSS涉及網(wǎng)頁(yè)頁(yè)字體、、顏色、、邊距、、高度、、寬度、、圖像顯顯示方式式、表格格顯示等等等任務(wù)六：：使用CSS美化頁(yè)面面1.應(yīng)用CSS的方法（1）內(nèi)部樣樣式表網(wǎng)頁(yè)文檔檔應(yīng)用CSS的一種常常用方法法，是采采用HTML元素的style屬性實(shí)現(xiàn)的。。該樣式添加加在<head></head>區(qū)塊之間任務(wù)六：使用用CSS美化頁(yè)面1.應(yīng)用CSS的方法（2）外部樣式表表外部樣式表是是把樣式單獨(dú)獨(dú)地寫在一個(gè)個(gè)文件里，并并以擴(kuò)展名為為.CSS的文本文件存存儲(chǔ)任務(wù)六：使用用CSS美化頁(yè)面1.應(yīng)用CSS的方法（3）行內(nèi)樣式在運(yùn)用樣式之之后，可以為為單個(gè)元素添添加特殊的樣樣式信息。它它是使用HTML代碼里的樣式式屬性style實(shí)現(xiàn)的。例如：<pstyle="font-size:20pt;font-family:黑體;color:red;">特殊字體</p>任務(wù)六：使用用CSS美化頁(yè)面2.創(chuàng)建CSS樣式（1）選擇“窗口口/CSS樣式”菜單命命令，在屏幕幕右側(cè)CSS樣式面板的右右上側(cè)點(diǎn)擊““新建”，或或者在屬性面面板左側(cè)找到到“CSS”標(biāo)簽，點(diǎn)擊編編輯規(guī)則。（2）輸入CSS樣式名稱、標(biāo)標(biāo)記或選擇器器。（3）在“CSS規(guī)則定義”對(duì)對(duì)話框中可以以對(duì)類型、背背景、區(qū)塊、、方框、邊框框、列表、定定位及擴(kuò)展共共8項(xiàng)進(jìn)行設(shè)置。。（4）創(chuàng)建好的CSS樣式可以再進(jìn)進(jìn)行修改和完完善。任務(wù)七：使用用行為增添網(wǎng)網(wǎng)頁(yè)特效Dreamweaver提供了一種稱稱為“行為””（Behavior）的機(jī)制，用用來(lái)幫助用戶戶建構(gòu)頁(yè)面中中的交互行為為。行為，顧名思思義，就是在在網(wǎng)頁(yè)中進(jìn)行行的一系列動(dòng)動(dòng)作，通過(guò)這這些動(dòng)作可以以實(shí)現(xiàn)用戶與與頁(yè)面的交互互。一個(gè)行為一般般由動(dòng)作和事事件組成，動(dòng)動(dòng)作是用來(lái)完完成特定任務(wù)務(wù)預(yù)先編譯好好的Javascript代碼，例如交交換圖片、彈彈出式菜單等等，而事件則則是動(dòng)作觸發(fā)發(fā)的結(jié)果。2.3開發(fā)流程頁(yè)面設(shè)計(jì)2.3開發(fā)流程開發(fā)過(guò)程（1）首頁(yè)制作2.3開發(fā)流程開發(fā)過(guò)程（2）導(dǎo)航欄制作作2.3開發(fā)流程開發(fā)過(guò)程（3）內(nèi)頁(yè)的設(shè)計(jì)計(jì)與開發(fā)2.4拓展知識(shí)的相關(guān)知識(shí)1.文件結(jié)構(gòu)2.4拓展知識(shí)的相關(guān)知識(shí)1.文件結(jié)構(gòu)（1）HTML標(biāo)簽以<>標(biāo)志（2）HTML標(biāo)簽通常是成成對(duì)出現(xiàn)的，，例如文檔的的主體<body></body>。“/”就是打開標(biāo)簽簽和關(guān)閉標(biāo)簽簽的區(qū)別。個(gè)個(gè)別標(biāo)簽是不不需要結(jié)束標(biāo)標(biāo)志的，例如如換行<br>。（3）HTML代碼編寫時(shí)要要有層次感，，<head></head>和<body></body>標(biāo)簽包括在<html></html>里，在書寫時(shí)時(shí)往內(nèi)推進(jìn)一一個(gè)tab鍵，依次類推推。這樣書寫寫的目地是使使代碼更加清清晰。（4）HTML不區(qū)分大小寫寫2.4拓展知識(shí)的相關(guān)知識(shí)1.HTML的其他標(biāo)簽（1）HTML標(biāo)題:<h1>Hheading</h1>（2）HTML段落：<p>Paragraph.</p>（3）HTML水平線：<hr/>（4）HTML注釋：<!--Thisisacomment-->（5）meta標(biāo)簽：<metahttp-equiv="Content-Type"content="text/html;char