使用Dreamweaver制作個人網(wǎng)站課件

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

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

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

2.保存網(wǎng)頁文檔3.打開網(wǎng)頁文檔4.關(guān)閉網(wǎng)頁文檔2.2.3任務(wù)三：網(wǎng)頁文檔的基本操作2.保存網(wǎng)頁文檔102.2.4任務(wù)四：網(wǎng)頁基本元素的插入

1.插入布局

（1）表格布局表格既可以作為一種元素豐富網(wǎng)頁內(nèi)容也可以作為一種布局工具使網(wǎng)頁的整體更加有條理2.2.4任務(wù)四：網(wǎng)頁基本元素的插入1.插入布局（1）表112.2.4任務(wù)四：網(wǎng)頁基本元素的插入

1.插入布局

（2）框架布局2.2.4任務(wù)四：網(wǎng)頁基本元素的插入1.插入布局（2）框122.2.4任務(wù)四：網(wǎng)頁基本元素的插入

1.插入布局

（2）框架布局框架提供將一個瀏覽器劃分成幾個區(qū)域的方法，在每個區(qū)域里可以顯示不同的頁面，每個frame里的網(wǎng)頁相互獨立?？蚣芗瘎t定義了一組框架的布局、屬性等?？蚣芗旧聿话跒g覽器中顯示的頁面內(nèi)容，它只是向瀏覽器提供如何顯示一組框架以及在這些框架中應(yīng)該顯示哪些文檔的信息。2.2.4任務(wù)四：網(wǎng)頁基本元素的插入1.插入布局（2）框132.2.4任務(wù)四：網(wǎng)頁基本元素的插入

2.插入內(nèi)容

（1）文本元素的插入與編輯1）普通文本可以直接在文檔窗口中鍵入，也可以從其他應(yīng)用程序或窗口中復(fù)制粘貼，例如Word，TXT文件等。2）Dreamweaver也提供了插入特殊文本的菜單，選擇“插入/HTML/特殊字符”菜單命令，可以看到軟件為用戶提供的較為常見的多種特殊字符。3）在Dreamweaver里插入空格的做法是將輸入法切換到中文輸入狀態(tài)，并將全角打開，此時用戶只要在想要插入空格的地方敲擊空格鍵，即可以實現(xiàn)空格的輸入；在HTML代碼中插入

即可以實現(xiàn)空格。2.2.4任務(wù)四：網(wǎng)頁基本元素的插入2.插入內(nèi)容（1）文142.2.4任務(wù)四：網(wǎng)頁基本元素的插入

2.插入內(nèi)容

（2）圖像元素的插入用于網(wǎng)站制作的圖像要求是gif，jpg，png，psd中的一種

2.2.4任務(wù)四：網(wǎng)頁基本元素的插入2.插入內(nèi)容（2）圖152.2.4任務(wù)四：網(wǎng)頁基本元素的插入

2.插入內(nèi)容

（3）其他媒體的插入其他媒體包括音頻、視頻、動畫等選擇“插入/媒體/SWF”菜單命令，或者在插入面板中選擇“媒體/SWF”2.2.4任務(wù)四：網(wǎng)頁基本元素的插入2.插入內(nèi)容（3）其162.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接

1.文本超級鏈接

文本超級鏈接是運用最普遍的一種超級鏈接方式，這里的文本可以是字、詞、短語、句子等。

2.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接1.文本超級鏈接文本超172.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接

2.圖片超級鏈接

（1）單張圖片的超級鏈接選中圖像，在“屬性”面板的“鏈接”文本框中輸入要鏈接的目標，包括網(wǎng)頁、圖像、應(yīng)用程序等（2）熱區(qū)超級鏈接插入圖片，并選中圖片，用展開的屬性面板上的繪圖工具在畫面上繪制熱區(qū)2.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接2.圖片超級鏈接（1）182.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接

3.錨點超級鏈接

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

4.電子郵件超級鏈接

（1）將光標置于要顯示電子郵件超級鏈接的地方，或者選定希望顯示電子郵件超級鏈接的文本、圖片等。（2）選擇“插入/電子郵件超級鏈接”菜單命令，或者在插入面板中單擊“電子郵件超級鏈接”。（3）在“文本”文本框中輸入要顯示超級鏈接的文本，如果事先已經(jīng)選擇了文本，該文本框會自動將文本顯示出來，在“E-mail”文本框中輸入郵箱地址，如service@163.com，如圖2-30所示。（4）單擊確定并進行測試2.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接4.電子郵件超級鏈接（202.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接

5.腳本超級鏈接和空鏈接

（1）腳本超級鏈接在屬性面板的“鏈接”文本框中，鍵入Javascript：Javascript代碼例如：javascript:window.close();（2）空鏈接空鏈接是未指派的鏈接?？真溄又饕糜陧撁嫔系膶ο蠡蛭谋靖郊有袨椤＠?，可向空鏈接附加一個行為，以便在滑過該鏈接時會交換圖像或顯示絕對定位的元素。2.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接5.腳本超級鏈接和空鏈接212.2.6任務(wù)六：使用CSS美化頁面

CSS（CascadingStyleSheets）層疊樣式表，是一種標記語言，它是一系列用來美化和布局網(wǎng)頁的格式設(shè)置規(guī)則。“層疊”指對同一個元素或Web頁面應(yīng)用多個樣式的能力。例如，創(chuàng)建一個CSS規(guī)則來應(yīng)用字體顏色，創(chuàng)建另一個規(guī)則應(yīng)用行距，然后將兩者應(yīng)用于一個頁面的同一段文本。CSS涉及網(wǎng)頁字體、顏色、邊距、高度、寬度、圖像顯示方式、表格顯示等等2.2.6任務(wù)六：使用CSS美化頁面CSS（Cascad222.2.6任務(wù)六：使用CSS美化頁面

1.應(yīng)用CSS的方法

（1）內(nèi)部樣式表網(wǎng)頁文檔應(yīng)用CSS的一種常用方法，是采用HTML元素的style屬性實現(xiàn)的。該樣式添加在<head></head>區(qū)塊之間

2.2.6任務(wù)六：使用CSS美化頁面1.應(yīng)用CSS的方法232.2.6任務(wù)六：使用CSS美化頁面

1.應(yīng)用CSS的方法

（2）外部樣式表外部樣式表是把樣式單獨地寫在一個文件里，并以擴展名為.CSS的文本文件存儲

2.2.6任務(wù)六：使用CSS美化頁面1.應(yīng)用CSS的方法242.2.6任務(wù)六：使用CSS美化頁面

1.應(yīng)用CSS的方法

（3）行內(nèi)樣式在運用樣式之后，可以為單個元素添加特殊的樣式信息。它是使用HTML代碼里的樣式屬性style實現(xiàn)的。例如：<pstyle="font-size:20pt;font-family:黑體;color:red;">特殊字體</p>2.2.6任務(wù)六：使用CSS美化頁面1.應(yīng)用CSS的方法252.2.6任務(wù)六：使用CSS美化頁面

2.創(chuàng)建CSS樣式

（1）選擇“窗口/CSS樣式”菜單命令，在屏幕右側(cè)CSS樣式面板的右上側(cè)點擊“新建”，或者在屬性面板左側(cè)找到“CSS”標簽，點擊編輯規(guī)則。（2）輸入CSS樣式名稱、標記或選擇器。（3）在“CSS規(guī)則定義”對話框中可以對類型、背景、區(qū)塊、方框、邊框、列表、定位及擴展共8項進行設(shè)置。（4）創(chuàng)建好的CSS樣式可以再進行修改和完善。2.2.6任務(wù)六：使用CSS美化頁面2.創(chuàng)建CSS樣式（262.2.7任務(wù)七：使用行為增添網(wǎng)頁特效

Dreamweaver提供了一種稱為“行為”（Behavior）的機制，用來幫助用戶建構(gòu)頁面中的交互行為。行為，顧名思義，就是在網(wǎng)頁中進行的一系列動作，通過這些動作可以實現(xiàn)用戶與頁面的交互。一個行為一般由動作和事件組成，動作是用來完成特定任務(wù)預(yù)先編譯好的Javascript代碼，例如交換圖片、彈出式菜單等，而事件則是動作觸發(fā)的結(jié)果。2.2.7任務(wù)七：使用行為增添網(wǎng)頁特效Dreamweave272.3開發(fā)流程

2.3.1頁面設(shè)計

2.3開發(fā)流程2.3.1頁面設(shè)計282.3開發(fā)流程

2.3.2開發(fā)過程

（1）首頁制作2.3開發(fā)流程2.3.2開發(fā)過程（1）首頁制作292.3開發(fā)流程

2.3.2開發(fā)過程

（2）導(dǎo)航欄制作2.3開發(fā)流程2.3.2開發(fā)過程（2）導(dǎo)航欄制作302.3開發(fā)流程

2.3.2開發(fā)過程

（3）內(nèi)頁的設(shè)計與開發(fā)2.3開發(fā)流程2.3.2開發(fā)過程（3）內(nèi)頁的設(shè)計與開312.4拓展知識

2.4.1HTML的相關(guān)知識

1.文件結(jié)構(gòu)2.4拓展知識2.4.1HTML的相關(guān)知識1.文件結(jié)322.4拓展知識

2.4.1HTML的相關(guān)知識

1.文件結(jié)構(gòu)（1）HTML標簽以<>標志（2）HTML標簽通常是成對出現(xiàn)的，例如文檔的主體<body></body>?！?”就是打開標簽和關(guān)閉標簽的區(qū)別。個別標簽是不需要結(jié)束標志的，例如換行<br>。（3）HTML代碼編寫時要有層次感，<head></head>和<body></body>標簽包括在<html></html>里，在書寫時往內(nèi)推進一個tab鍵，依次類推。這樣書寫的目地是使代碼更加清晰。（4）HTML不區(qū)分大小寫2.4拓展知識2.4.1HTML的相關(guān)知識1.文件結(jié)332.4拓展知識

2.4.1HTML的相關(guān)知識

1.HTML的其他標簽（1）HTML標題:<h1>Hheading</h1>（2）HTML段落：<p>Paragraph.</p>（3）HTML水平線：<hr/>（4）HTML注釋：<!--Thisisacomment-->（5）meta標簽：<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>（6）文字標簽：<font></font>2.4拓展知識2.4.1HTML的相關(guān)知識1.HTM342.4拓展知識

2.4.2使用DIV元素1.插入DIV標簽2.APDIV的插入2.4拓展知識2.4.2使用DIV元素1.插入DIV標352.4拓展知識

2.4.3模板與庫1.模板（1）直接創(chuàng)建模板（2）將網(wǎng)頁轉(zhuǎn)存為模板（3）從新建文件中創(chuàng)建模板2.庫模板用來制作不同網(wǎng)頁的相同部分，庫則是面向網(wǎng)頁局部相同部分的。

2.4拓展知識2.4.3模板與庫1.模板36本章小結(jié)Dreamweaver工作界面部分要求掌握一些常用的菜單、工具以及界面的構(gòu)成。站點建立部分旨在要求讀者掌握管理個人網(wǎng)站的網(wǎng)頁、素材等，為制作網(wǎng)站服務(wù)。網(wǎng)頁文檔的基本操作部分主要掌握新建、保存、打開、關(guān)閉網(wǎng)頁文檔的方法。在網(wǎng)頁基本元素的插入中，需要重點掌握如何插入布局，包括表格布局、框架布局以及CSS布局。對于文本、圖像以及其他媒體的插入是網(wǎng)頁制作的基本常識，并要求重點掌握超級鏈接的創(chuàng)建方法，包括文本超級鏈接、圖像超級鏈接、電子郵件超級鏈接等。本章小結(jié)Dreamweaver工作界面部分要求掌握一些常用的37習(xí)題思考題1．網(wǎng)站制作的基本流程怎樣的？2．網(wǎng)頁布局有哪幾種形式，并闡述其優(yōu)劣？3．用DreamweaverCS4創(chuàng)建站點的流程如何？4．超級鏈接有哪幾種類型？5．創(chuàng)建層的方法有哪些？習(xí)題思考題38習(xí)題操作題：1.創(chuàng)建一個個人網(wǎng)站站點，存放在E盤或F盤，文件夾名為自己的學(xué)號。2.制作個人網(wǎng)站，要求有主頁和內(nèi)頁，內(nèi)頁不少于3個。習(xí)題操作題：39第2章使用Dreamweaver制作個人網(wǎng)站學(xué)習(xí)目標：1)了解Dreamweaver的工作界面，掌握創(chuàng)建及管理一個站點的方法。2)掌握網(wǎng)頁文檔的創(chuàng)建、保存、關(guān)閉等基本操作。3)掌握插入普通文本、特殊文本、圖像、表格等網(wǎng)頁基本元素的方法，能創(chuàng)建文本、圖像、錨點等超級鏈接。4)理解CSS規(guī)則，能創(chuàng)建簡單的CSS樣式表。5)了解常用的增添網(wǎng)頁特效的行為、DIV的基礎(chǔ)常識。第2章使用Dreamweaver制作個人網(wǎng)站學(xué)習(xí)目標：402.1需求分析個人網(wǎng)站的欄目因個人興趣愛好所致各有不同，可根據(jù)主題需要，確定網(wǎng)站欄目和主色調(diào)。本實例需要實現(xiàn)的功能模塊包括個人簡介（用以介紹個人基本信息）、個人相冊（用以呈現(xiàn)家庭、朋友及個人的溫馨照片）、攝影作品（用以呈現(xiàn)個人感興趣的攝影作品）、其他作品（包括網(wǎng)站作品、平面作品、DV作品等）、請您留言（可以讓瀏覽者在此提出一些建議或意見等）和在線聊天（提供給用戶交流的一個平臺）2.1需求分析個人網(wǎng)站的欄目因個人興趣愛好所致各有不同，412.2任務(wù)分解2.2.1網(wǎng)站制作工具DreamweaverCS4的熟練操作2.2.2站點的規(guī)劃與創(chuàng)建2.2.3網(wǎng)頁文檔的基本操作2.2.4網(wǎng)頁基本元素的插入2.2.5創(chuàng)建網(wǎng)頁超鏈接2.2.6使用CSS美化網(wǎng)頁2.2.7使用行為增添網(wǎng)頁特效2.2任務(wù)分解2.2.1網(wǎng)站制作工具Dreamweave422.2.1任務(wù)一：DreamweaverCS4簡介菜單欄工具欄文檔編輯區(qū)屬性面板狀態(tài)欄插入面板2.2.1任務(wù)一：DreamweaverCS4簡介菜單欄432.2.2任務(wù)二：站點的規(guī)劃與創(chuàng)建1.站點規(guī)劃2.2.2任務(wù)二：站點的規(guī)劃與創(chuàng)建1.站點規(guī)劃442.2.2任務(wù)二：站點的規(guī)劃與創(chuàng)建2.站點創(chuàng)建2.2.2任務(wù)二：站點的規(guī)劃與創(chuàng)建2.站點創(chuàng)建452.2.2任務(wù)二：站點的規(guī)劃與創(chuàng)建2.站點創(chuàng)建2.2.2任務(wù)二：站點的規(guī)劃與創(chuàng)建2.站點創(chuàng)建462.2.2任務(wù)二：站點的規(guī)劃與創(chuàng)建2.站點創(chuàng)建2.2.2任務(wù)二：站點的規(guī)劃與創(chuàng)建2.站點創(chuàng)建472.2.3任務(wù)三：網(wǎng)頁文檔的基本操作

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

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

2.保存網(wǎng)頁文檔3.打開網(wǎng)頁文檔4.關(guān)閉網(wǎng)頁文檔2.2.3任務(wù)三：網(wǎng)頁文檔的基本操作2.保存網(wǎng)頁文檔492.2.4任務(wù)四：網(wǎng)頁基本元素的插入

1.插入布局

（1）表格布局表格既可以作為一種元素豐富網(wǎng)頁內(nèi)容也可以作為一種布局工具使網(wǎng)頁的整體更加有條理2.2.4任務(wù)四：網(wǎng)頁基本元素的插入1.插入布局（1）表502.2.4任務(wù)四：網(wǎng)頁基本元素的插入

1.插入布局

（2）框架布局2.2.4任務(wù)四：網(wǎng)頁基本元素的插入1.插入布局（2）框512.2.4任務(wù)四：網(wǎng)頁基本元素的插入

1.插入布局

（2）框架布局框架提供將一個瀏覽器劃分成幾個區(qū)域的方法，在每個區(qū)域里可以顯示不同的頁面，每個frame里的網(wǎng)頁相互獨立?？蚣芗瘎t定義了一組框架的布局、屬性等。框架集本身不包含要在瀏覽器中顯示的頁面內(nèi)容，它只是向瀏覽器提供如何顯示一組框架以及在這些框架中應(yīng)該顯示哪些文檔的信息。2.2.4任務(wù)四：網(wǎng)頁基本元素的插入1.插入布局（2）框522.2.4任務(wù)四：網(wǎng)頁基本元素的插入

2.插入內(nèi)容

（1）文本元素的插入與編輯1）普通文本可以直接在文檔窗口中鍵入，也可以從其他應(yīng)用程序或窗口中復(fù)制粘貼，例如Word，TXT文件等。2）Dreamweaver也提供了插入特殊文本的菜單，選擇“插入/HTML/特殊字符”菜單命令，可以看到軟件為用戶提供的較為常見的多種特殊字符。3）在Dreamweaver里插入空格的做法是將輸入法切換到中文輸入狀態(tài)，并將全角打開，此時用戶只要在想要插入空格的地方敲擊空格鍵，即可以實現(xiàn)空格的輸入；在HTML代碼中插入

即可以實現(xiàn)空格。2.2.4任務(wù)四：網(wǎng)頁基本元素的插入2.插入內(nèi)容（1）文532.2.4任務(wù)四：網(wǎng)頁基本元素的插入

2.插入內(nèi)容

（2）圖像元素的插入用于網(wǎng)站制作的圖像要求是gif，jpg，png，psd中的一種

2.2.4任務(wù)四：網(wǎng)頁基本元素的插入2.插入內(nèi)容（2）圖542.2.4任務(wù)四：網(wǎng)頁基本元素的插入

2.插入內(nèi)容

（3）其他媒體的插入其他媒體包括音頻、視頻、動畫等選擇“插入/媒體/SWF”菜單命令，或者在插入面板中選擇“媒體/SWF”2.2.4任務(wù)四：網(wǎng)頁基本元素的插入2.插入內(nèi)容（3）其552.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接

1.文本超級鏈接

文本超級鏈接是運用最普遍的一種超級鏈接方式，這里的文本可以是字、詞、短語、句子等。

2.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接1.文本超級鏈接文本超562.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接

2.圖片超級鏈接

（1）單張圖片的超級鏈接選中圖像，在“屬性”面板的“鏈接”文本框中輸入要鏈接的目標，包括網(wǎng)頁、圖像、應(yīng)用程序等（2）熱區(qū)超級鏈接插入圖片，并選中圖片，用展開的屬性面板上的繪圖工具在畫面上繪制熱區(qū)2.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接2.圖片超級鏈接（1）572.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接

3.錨點超級鏈接

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

4.電子郵件超級鏈接

（1）將光標置于要顯示電子郵件超級鏈接的地方，或者選定希望顯示電子郵件超級鏈接的文本、圖片等。（2）選擇“插入/電子郵件超級鏈接”菜單命令，或者在插入面板中單擊“電子郵件超級鏈接”。（3）在“文本”文本框中輸入要顯示超級鏈接的文本，如果事先已經(jīng)選擇了文本，該文本框會自動將文本顯示出來，在“E-mail”文本框中輸入郵箱地址，如service@163.com，如圖2-30所示。（4）單擊確定并進行測試2.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接4.電子郵件超級鏈接（592.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接

5.腳本超級鏈接和空鏈接

（1）腳本超級鏈接在屬性面板的“鏈接”文本框中，鍵入Javascript：Javascript代碼例如：javascript:window.close();（2）空鏈接空鏈接是未指派的鏈接?？真溄又饕糜陧撁嫔系膶ο蠡蛭谋靖郊有袨椤＠?，可向空鏈接附加一個行為，以便在滑過該鏈接時會交換圖像或顯示絕對定位的元素。2.2.5任務(wù)五：創(chuàng)建網(wǎng)頁超級鏈接5.腳本超級鏈接和空鏈接602.2.6任務(wù)六：使用CSS美化頁面

CSS（CascadingStyleSheets）層疊樣式表，是一種標記語言，它是一系列用來美化和布局網(wǎng)頁的格式設(shè)置規(guī)則?！皩盈B”指對同一個元素或Web頁面應(yīng)用多個樣式的能力。例如，創(chuàng)建一個CSS規(guī)則來應(yīng)用字體顏色，創(chuàng)建另一個規(guī)則應(yīng)用行距，然后將兩者應(yīng)用于一個頁面的同一段文本。CSS涉及網(wǎng)頁字體、顏色、邊距、高度、寬度、圖像顯示方式、表格顯示等等2.2.6任務(wù)六：使用CSS美化頁面CSS（Cascad612.2.6任務(wù)六：使用CSS美化頁面

1.應(yīng)用CSS的方法

（1）內(nèi)部樣式表網(wǎng)頁文檔應(yīng)用CSS的一種常用方法，是采用HTML元素的style屬性實現(xiàn)的。該樣式添加在<head></head>區(qū)塊之間

2.2.6任務(wù)六：使用CSS美化頁面1.應(yīng)用CSS的方法622.2.6任務(wù)六：使用CSS美化頁面

1.應(yīng)用CSS的方法

（2）外部樣式表外部樣式表是把樣式單獨地寫在一個文件里，并以擴展名為.CSS的文本文件存儲

2.2.6任務(wù)六：使用CSS美化頁面1.應(yīng)用CSS的方法632.2.6任務(wù)六：使用CSS美化頁面

1.應(yīng)用CSS的方法

（3）行內(nèi)樣式在運用樣式之后，可以為單個元素添加特殊的樣式信息。它是使用HTML代碼里的樣式屬性style實現(xiàn)的。例如：<pstyle="font-size:20pt;font-family:黑體;color:red;">特殊字體</p>2.2.6任務(wù)六：使用CSS美化頁面1.應(yīng)用CSS的方法642.2.6任務(wù)六：使用CSS美化頁面

2.創(chuàng)建CSS樣式

（1）選擇“窗口/CSS樣式”菜單命令，在屏幕右側(cè)CSS樣式面板的右上側(cè)點擊“新建”，或者在屬性面板左側(cè)找到“CSS”標簽，點擊編輯規(guī)則。（2）輸入CSS樣式名稱、標記或選擇器。（3）在“CSS規(guī)則定義”對話框中可以對類型、背景、區(qū)塊、方框、邊框、列表、定位及擴展共8項進行設(shè)置。（4）創(chuàng)建好的CSS樣式可以再進行修改和完善。2.2.6任務(wù)六：使用CSS美化頁面2.創(chuàng)建CSS樣式（652.2.7任務(wù)七：使用行為增添網(wǎng)頁特效

Dreamweaver提供了一種稱為“行為”（Behavior）的機制，用來幫助用戶建構(gòu)頁面中的交互行為。行為，顧名思義，就是在網(wǎng)頁中進行的一系列動作，通過這些動作可以實現(xiàn)用戶與頁面的交互。一個行為一般由動作和事件組成，動作是用來完成特定任務(wù)預(yù)先編譯好的Javascript代碼，例如交換圖片、彈出式菜單等，而事件則是動作觸發(fā)的結(jié)果。2.2.7任務(wù)七：使用行為增添網(wǎng)頁特效Dreamweave662.3開發(fā)流程

2.3.1頁面設(shè)計

2.3開發(fā)流程2.3.1頁面設(shè)計672.3開發(fā)流程

2.3.2開發(fā)過程

（1）首頁制作2.3開發(fā)流程2.3.2開發(fā)過程（1）首頁制作682.3開發(fā)流程

2.3.2開發(fā)過程

（2）導(dǎo)航欄制作2.3開發(fā)流程2.3.2開發(fā)過程（2）導(dǎo)航欄制作692.3開發(fā)流程

2.3.2開發(fā)過程

（3）內(nèi)頁的設(shè)計與開發(fā)2.3開發(fā)流程2.3.2開發(fā)過程（3）內(nèi)頁的設(shè)計與開702.4拓展知識

2.4.1HTML的相關(guān)知識

1.文件結(jié)構(gòu)2.4拓展知識2.4.1HTML的相關(guān)知識1.文件結(jié)712.4拓展知識

2.4.1HTML的相關(guān)知識

1.文件結(jié)構(gòu)（1）HTML標簽以<>標志（2）HTML標簽通常