使用Dreamweaver制作個人網站

1、第2章 使用 Dreamweaver 制作個人網站學習目標：1) 了解Dreamweaver的工作界面，掌握創(chuàng)建及管理一個站點的方法。2) 掌握網頁文檔的創(chuàng)建、保存、關閉等基本操作。3) 掌握插入普通文本、特殊文本、圖像、表格等網頁基本元素的方法，能創(chuàng)建文本、圖像、錨點等超級鏈接。4) 理解CSS規(guī)則，能創(chuàng)建簡單的CSS樣式表。5) 了解常用的增添網頁特效的行為、DIV的基礎常識。2.1需求分析析個人網站站的欄目目因個人人興趣愛愛好所致致各有不不同，可可根據(jù)主主題需要要，確定定網站欄欄目和主主色調。本實例需需要實現(xiàn)現(xiàn)的功能能模塊包包括個人人簡介（用以介介紹個人人基本信信息）、個人相相冊（用用以

2、呈現(xiàn)現(xiàn)家庭、朋友及及個人的的溫馨照照片）、攝影作作品（用用以呈現(xiàn)現(xiàn)個人感感興趣的的攝影作作品）、其他作作品（包包括網站站作品、平面作作品、DV作品等）、請您您留言（可以讓讓瀏覽者者在此提提出一些些建議或或意見等等）和在在線聊天天（提供供給用戶戶交流的的一個平平臺）2.2任務分解解2.2.1網站制作作工具DreamweaverCS4的熟練操操作2.2.2站點的規(guī)規(guī)劃與創(chuàng)創(chuàng)建2.2.3網頁文檔檔的基本本操作2.2.4網頁基本本元素的的插入2.2.5創(chuàng)建網頁頁超鏈接接2.2.6使用CSS美化網頁頁2.2.7使用行為為增添網網頁特效效2.2.1任務一：DreamweaverCS4簡介菜單欄工具欄文檔編

3、輯輯區(qū)屬性面板板狀態(tài)欄插入面板板2.2.2任務二：站點的的規(guī)劃與與創(chuàng)建1.站點規(guī)劃劃2.2.2任務二：站點的的規(guī)劃與與創(chuàng)建2.站點創(chuàng)建建2.2.2任務二：站點的的規(guī)劃與與創(chuàng)建2.站點創(chuàng)建建2.2.2任務二：站點的的規(guī)劃與與創(chuàng)建2.站點創(chuàng)建建2.2.3任務三：網頁文文檔的基基本操作作1.新建個人人網站網網頁文檔檔（1）在“頁頁面類型型”一欄欄的選項項里，靜靜態(tài)網頁頁選擇“HTML”，動態(tài)網網頁則選選擇相應應的頁面面類型。（2）如果希希望網頁頁文檔不不包含任任務CSS布局，選選擇“無無”；否否則，從從“布局局”列表表中選擇擇預設的的CSS布局。（3）如果在在“布局局”列表表中選擇擇了一個個布局，則

4、在“布局CSS位置”中中需要為為其選擇擇一個位位置。（4）“首選選參數(shù)”項可以以設置文文檔的默默認首選選參數(shù)，例如文文檔類型型、編碼碼類型和和文件擴擴展名等等。2.2.3任務三：網頁文文檔的基基本操作作2.保存網頁頁文檔3.打開網頁頁文檔4.關閉網頁頁文檔2.2.4任務四：網頁基基本元素素的插入入1.插入布局局（1）表格布布局表格既可可以作為為一種元素豐富富網頁內內容也可以作為為一種布布局工具使網頁頁的整體體更加有條理2.2.4任務四：網頁基基本元素素的插入入1.插入布局局（2）框架布布局2.2.4任務四：網頁基基本元素素的插入入1.插入布局局（2）框架布布局框架提供供將一個個瀏覽器器劃分成成

5、幾個區(qū)區(qū)域的方方法，在在每個區(qū)區(qū)域里可可以顯示示不同的的頁面，每個frame里的網頁頁相互獨獨立?？蚩蚣芗瘎t則定義了了一組框框架的布布局、屬屬性等?？蚣芗旧聿徊话跒g覽覽器中顯顯示的頁頁面內容容，它只只是向瀏瀏覽器提提供如何何顯示一一組框架架以及在在這些框框架中應應該顯示示哪些文文檔的信信息。2.2.4任務四：網頁基基本元素素的插入入2.插入內容容（1）文本元元素的插插入與編編輯1）普通文文本可以以直接在在文檔窗窗口中鍵鍵入，也也可以從從其他應應用程序序或窗口口中復制制粘貼，例如Word，TXT文件等。2）Dreamweaver也提供了了插入特特殊文本本的菜單單，選擇擇“插入入/HT

6、ML/特殊字符符”菜單單命令，可以看看到軟件件為用戶戶提供的的較為常常見的多多種特殊殊字符。3）在Dreamweaver里插入空空格的做做法是將將輸入法法切換到到中文輸輸入狀態(tài)態(tài)，并將將全角打打開，此此時用戶戶只要在在想要插插入空格格的地方方敲擊空空格鍵，即可以以實現(xiàn)空空格的輸輸入；在在HTML代碼中插插入即可以實實現(xiàn)空格格。2.2.4任務四：網頁基基本元素素的插入入2.插入內容容（2）圖像元元素的插插入用于網站站制作的的圖像要要求是gif，jpg，png，psd中的一種種2.2.4任務四：網頁基基本元素素的插入入2.插入內容容（3）其他媒媒體的插插入其他媒體體包括音音頻、視視頻、動動畫等選擇

7、“插插入/媒體/SWF”菜單命令令，或者者在插入入面板中選選擇“媒媒體/SWF”2.2.5任務五：創(chuàng)建網網頁超級級鏈接1.文本超級級鏈接文本超級級鏈接是是運用最最普遍的的一種超超級鏈接接方式，這里的的文本可可以是字字、詞、短語、句子等等。2.2.5任務五：創(chuàng)建網網頁超級級鏈接2.圖片超級級鏈接（1）單張圖圖片的超超級鏈接接選中圖像像，在“屬性”面板的的“鏈接接”文本本框中輸輸入要鏈鏈接的目目標，包包括網頁頁、圖像像、應用用程序等等（2）熱區(qū)超超級鏈接接插入圖片片，并選選中圖片片，用展展開的屬屬性面板板上的繪繪圖工具具在畫面面上繪制制熱區(qū)2.2.5任務五：創(chuàng)建網網頁超級級鏈接3.錨點超級級鏈接（

8、1）將光標標置于文文檔窗口口想要設設置錨點點的地方方；（2）選擇“插入/命名錨記記”菜單單命令，或者在在插入面面板中單單擊“命命名錨記記”，并并輸入錨錨記名稱稱，注意意錨點區(qū)區(qū)分大小小寫；（3）在文檔檔窗口中中，選擇擇要建立立超級鏈鏈接的文文本或圖圖像，在在屬性面面板中的的鏈接文文本框中中，輸入入#和錨點名名，例如如#top。（4）保存預預覽或按按F12預覽并進進行修改改。2.2.5任務五：創(chuàng)建網網頁超級級鏈接4.電子郵件件超級鏈鏈接（1）將光標標置于要要顯示電電子郵件件超級鏈鏈接的地地方，或或者選定定希望顯顯示電子子郵件超超級鏈接接的文本本、圖片片等。（2）選擇“插入/電子郵件件超級鏈鏈接”

9、菜菜單命令令，或者者在插入入面板中中單擊“電子郵郵件超級級鏈接”。（3）在“文文本”文文本框中中輸入要要顯示超超級鏈接接的文本本，如果果事先已已經選擇擇了文本本，該文文本框會會自動將將文本顯顯示出來來，在“E-mail”文本框中中輸入郵郵箱地址址，如，如圖2-30所示。（4）單擊確確定并進進行測試試2.2.5任務五：創(chuàng)建網網頁超級級鏈接5.腳本超級級鏈接和和空鏈接接（1）腳本超超級鏈接接在屬性面面板的“鏈接”文本框框中，鍵鍵入Javascript：Javascript代碼例如：javascript:window.close();（2）空鏈接接空鏈接是是未指派派的鏈接接?？真滄溄又饕糜陧擁撁?/p>

10、上的的對象或或文本附附加行為為。例如，可可向空鏈鏈接附加加一個行行為，以以便在滑滑過該鏈鏈接時會會交換圖圖像或顯顯示絕對對定位的的元素。2.2.6任務六：使用CSS美化頁面面CSS（CascadingStyleSheets）層疊樣樣式表，是一種種標記語語言，它它是一系系列用來來美化和和布局網網頁的格格式設置置規(guī)則?！皩盈B”指對同同一個元元素或Web頁面應用用多個樣樣式的能能力。例例如，創(chuàng)創(chuàng)建一個個CSS規(guī)則來應應用字體體顏色，創(chuàng)建另另一個規(guī)規(guī)則應用用行距，然后將將兩者應應用于一一個頁面面的同一一段文本本。CSS涉及網頁頁字體、顏色、邊距、高度、寬度、圖像顯顯示方式式、表格格顯示等等等2.2.6

11、任務六：使用CSS美化頁面面1.應用CSS的方法（1）內部樣樣式表網頁文檔檔應用CSS的一種常常用方法法，是采采用HTML元素的style屬性實現(xiàn)現(xiàn)的。該該樣式添添加在區(qū)塊之間間2.2.6任務六：使用CSS美化頁面面1.應用CSS的方法（2）外部樣樣式表外部樣式式表是把把樣式單單獨地寫寫在一個個文件里里，并以以擴展名名為.CSS的文本文文件存儲儲2.2.6任務六：使用CSS美化頁面面1.應用CSS的方法（3）行內樣樣式在運用樣樣式之后后，可以以為單個個元素添添加特殊殊的樣式式信息。它是使使用HTML代碼里的的樣式屬屬性style實現(xiàn)的。例如：特殊字體體2.2.6任務六：使用CSS美化頁面面2.

12、創(chuàng)建CSS樣式（1）選擇“窗口/CSS樣式”菜菜單命令令，在屏屏幕右側側CSS樣式面板板的右上上側點擊擊“新建建”，或或者在屬屬性面板板左側找找到“CSS”標簽，點點擊編輯輯規(guī)則。（2）輸入CSS樣式名稱稱、標記記或選擇擇器。（3）在“CSS規(guī)則定義義”對話話框中可可以對類類型、背背景、區(qū)區(qū)塊、方方框、邊邊框、列列表、定定位及擴擴展共8項進行設設置。（4）創(chuàng)建好好的CSS樣式可以以再進行行修改和和完善。2.2.7任務七：使用行行為增添添網頁特特效Dreamweaver提供了一一種稱為為“行為為”（Behavior）的機制制，用來來幫助用用戶建構構頁面中中的交互互行為。行為，顧顧名思義義，就是是

13、在網頁頁中進行行的一系系列動作作，通過過這些動動作可以以實現(xiàn)用用戶與頁頁面的交交互。一個行為為一般由由動作和和事件組組成，動動作是用用來完成成特定任任務預先先編譯好好的Javascript代碼，例例如交換換圖片、彈出式式菜單等等，而事事件則是是動作觸觸發(fā)的結結果。2.3開發(fā)流程程2.3.1頁面設計計2.3開發(fā)流程程2.3.2開發(fā)過程程（1）首頁制制作2.3開發(fā)流程程2.3.2開發(fā)過程程（2）導航欄欄制作2.3開發(fā)流程程2.3.2開發(fā)過程程（3）內頁的的設計與與開發(fā)2.4拓展知識識2.4.1HTML的相關知知識1.文件結構構2.4拓展知識識2.4.1HTML的相關知知識1.文件結構構（1）HTM

14、L標簽以標志（2）HTML標簽通常常是成對對出現(xiàn)的的，例如如文檔的的主體?！?”就是打開開標簽和和關閉標標簽的區(qū)區(qū)別。個個別標簽簽是不需需要結束束標志的的，例如如換行。（3）HTML代碼編寫寫時要有有層次感感，和標簽包括括在里，在書書寫時往往內推進進一個tab鍵，依次次類推。這樣書書寫的目目地是使使代碼更更加清晰晰。（4）HTML不區(qū)分大大小寫2.4拓展知識識2.4.1HTML的相關知知識1.HTML的其他標標簽（1）HTML標題:Hheading（2）HTML段落：Paragraph.（3）HTML水平線：（4）HTML注釋：（5）meta標簽：（6）文字標標簽：2.4拓展知識識2.4.2使

15、用DIV元素1.插入DIV標簽2.AP DIV的插入2.4拓展知識識2.4.3模板與庫庫1.模板（1）直接創(chuàng)創(chuàng)建模板板（2）將網頁頁轉存為為模板（3）從新建建文件中中創(chuàng)建模模板2.庫模板用來來制作不不同網頁頁的相同同部分，庫則是是面向網網頁局部部相同部部分的。本章小結結Dreamweaver工作界面面部分要要求掌握握一些常常用的菜菜單、工工具以及及界面的的構成。站點建立立部分旨旨在要求求讀者掌掌握管理理個人網網站的網網頁、素素材等，為制作作網站服服務。網頁文檔檔的基本本操作部部分主要要掌握新新建、保保存、打打開、關關閉網頁頁文檔的的方法。在網頁基基本元素素的插入入中，需需要重點點掌握如如何插入入布局，包括表表格布局局、框架架布局以以及CSS布局。對對于文本本、圖像像以及其其他媒體體的插入入是網頁頁制作的的基本常