網(wǎng)頁(yè)制作基礎(chǔ)教程 （Dreamweaver CC）（第3版）課件 第1章 網(wǎng)站的建立

職業(yè)教育教學(xué)用書(shū)網(wǎng)頁(yè)制作基礎(chǔ)教程（DreamweaverCC）網(wǎng)站制作前的準(zhǔn)備1網(wǎng)頁(yè)布局與規(guī)劃2網(wǎng)頁(yè)的編輯3網(wǎng)頁(yè)的多媒體效果4網(wǎng)站的管理與上傳5模塊目錄網(wǎng)頁(yè)制作前的準(zhǔn)備：第1章網(wǎng)站的建立；網(wǎng)頁(yè)布局與規(guī)劃：第2章編輯網(wǎng)頁(yè)中的內(nèi)容；第3章網(wǎng)頁(yè)布局；網(wǎng)頁(yè)的編輯：第4章使用超鏈接；第5章CSS樣式；網(wǎng)頁(yè)的多媒體效果：第6章作多媒體網(wǎng)頁(yè)；第7章使用表單；第8章使用行為；網(wǎng)站的管理與上傳：第9章網(wǎng)站的管理與上傳模塊簡(jiǎn)介網(wǎng)站的建立網(wǎng)頁(yè)、超鏈接與網(wǎng)站HTML靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)頁(yè)制作工具項(xiàng)目一網(wǎng)頁(yè)、超鏈接與網(wǎng)站網(wǎng)頁(yè)、超鏈接與網(wǎng)站網(wǎng)頁(yè)網(wǎng)頁(yè)就是把文字、圖形、圖像、聲音、動(dòng)畫(huà)、視頻等多種媒體形式的信息，以及分布在互聯(lián)網(wǎng)上的各種相關(guān)信息相互鏈接起來(lái)而構(gòu)成的一種信息表達(dá)方式。主頁(yè)在瀏覽器中輸入網(wǎng)址后，看到的第1個(gè)網(wǎng)頁(yè)被稱為“主頁(yè)”網(wǎng)站網(wǎng)頁(yè)、制作網(wǎng)頁(yè)各種效果的程序文件和數(shù)據(jù)文件，以及說(shuō)明文檔的集合，組成了網(wǎng)站。網(wǎng)頁(yè)、超鏈接與網(wǎng)站非線性閱讀方式網(wǎng)頁(yè)就是把文字、圖形、圖像、聲音、動(dòng)畫(huà)、視頻等多種媒體形式的信息，以及分布在互聯(lián)網(wǎng)上的各種相關(guān)信息相互鏈接起來(lái)而構(gòu)成的一種信息表達(dá)方式。超鏈接互聯(lián)網(wǎng)采用復(fù)雜的網(wǎng)狀結(jié)構(gòu)，人們可以根據(jù)自己的喜好隨時(shí)改變閱讀順序，甚至可以從一篇文章跳轉(zhuǎn)到另一篇文章，幾乎可以無(wú)限制地跳轉(zhuǎn)。這種形式就是超文本表達(dá)信息的方式，能夠改變閱讀順序的就是超鏈接。超文本標(biāo)記語(yǔ)言HTMLHTMLHTML（超文本標(biāo)記語(yǔ)言）用于描述某個(gè)事物應(yīng)該如何合理地顯示在計(jì)算機(jī)屏幕上。<center><b><fontface="黑體"><fontsize=18>歡迎參觀我的主頁(yè)</font></font></b></center>句首的<center>表示居中，句尾的</center>表示居中結(jié)束；<b>表示加粗，</b>表示加粗結(jié)束；<fontface="黑體">表示文字為黑體；<fontsize=18>表示字號(hào)為18；句尾的兩個(gè)</font>表示設(shè)置結(jié)束。HTML靜態(tài)網(wǎng)頁(yè)是在網(wǎng)站所在服務(wù)器上真實(shí)存在的。在瀏覽器中輸入網(wǎng)頁(yè)的網(wǎng)址時(shí)，網(wǎng)站服務(wù)器就會(huì)將該網(wǎng)頁(yè)下載到瀏覽器中并打開(kāi)，供瀏覽者瀏覽。靜態(tài)網(wǎng)頁(yè)上可以有一些動(dòng)態(tài)的效果。動(dòng)態(tài)網(wǎng)頁(yè)可能并不是真實(shí)存在的，或者不是完整存在的，而僅僅是一個(gè)模板。網(wǎng)頁(yè)中的一些內(nèi)容來(lái)自數(shù)據(jù)庫(kù)等信息源，由相關(guān)的網(wǎng)頁(yè)程序來(lái)控制信息顯示在模板的什么位置。VS靜態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)客戶端動(dòng)態(tài)技術(shù)服務(wù)器動(dòng)態(tài)技術(shù)12靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)體積龐大、冗余代碼較多、網(wǎng)站管理繁瑣的網(wǎng)頁(yè)制作工具正逐漸被淘汰。Dreamweaver是一款專業(yè)的網(wǎng)頁(yè)制作軟件，擁有廣泛的網(wǎng)頁(yè)制作群體，是最受歡迎的網(wǎng)頁(yè)制作軟件之一。網(wǎng)頁(yè)制作軟件可以實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)者與HTML之間的分離，而設(shè)計(jì)者只需在編輯器中輸入文本或圖片，網(wǎng)頁(yè)制作軟件就將這些文本或圖片轉(zhuǎn)換為相應(yīng)的HTML代碼，而且設(shè)計(jì)者在編輯器中見(jiàn)到的網(wǎng)頁(yè)效果，與在瀏覽器中見(jiàn)到的網(wǎng)頁(yè)效果基本相同。網(wǎng)頁(yè)制作工具了解Dreamweaver的操作環(huán)境建立網(wǎng)站前的準(zhǔn)備工作建立站點(diǎn)新建網(wǎng)頁(yè)與文件夾項(xiàng)目二了解Dreamweaver的操作環(huán)境更改文件名與刪除文件了解Dreamweaver的操作環(huán)境標(biāo)題菜單欄2.文檔工具欄3.文檔編輯區(qū)4.狀態(tài)欄5.屬性檢查器6.面板組01確定網(wǎng)站的主題02確定網(wǎng)站由多少個(gè)網(wǎng)頁(yè)組成，以及這些網(wǎng)頁(yè)之間的關(guān)聯(lián)關(guān)系03繪制網(wǎng)站結(jié)構(gòu)圖04準(zhǔn)備網(wǎng)站素材建立網(wǎng)站前的準(zhǔn)備工作選擇“站點(diǎn)”→“新建站點(diǎn)”命令方法一在面板組中打開(kāi)“文件”面板，單擊“管理站點(diǎn)”按鈕，在彈出的“管理站點(diǎn)”對(duì)話框中來(lái)新建站點(diǎn)方法二二建立站點(diǎn)在“文件”面板中，將鼠標(biāo)指針移動(dòng)到站點(diǎn)名稱上并右擊，在彈出的快捷菜單中選擇“新建文件”命令，同時(shí)站點(diǎn)文件夾被展開(kāi)，自動(dòng)建立“untitled.html”網(wǎng)頁(yè)。建立文件夾的方法與之相同。新建網(wǎng)頁(yè)與文件夾在面板組中單擊兩次該文件的文件名，文件名就會(huì)立刻變?yōu)榫庉嫚顟B(tài)，此時(shí)刪除舊名稱，輸入新名稱即可。更改文件名與刪除文件以在面板組的“文件”面板中，選擇要更改名稱的文件并右擊，在彈出的快捷菜單中，選擇“編輯”→“重命名”命令，此時(shí)文件名就會(huì)立刻變?yōu)榫庉嫚顟B(tài)，刪除舊名稱，輸入新名稱即可。刪除網(wǎng)頁(yè)文件，則只需選中該文件，按Delete鍵即可。打開(kāi)網(wǎng)頁(yè)文件更改網(wǎng)頁(yè)標(biāo)題保存網(wǎng)頁(yè)文件預(yù)覽網(wǎng)頁(yè)項(xiàng)目三打開(kāi)與保存網(wǎng)頁(yè)退出Dreamweaver在彈出的開(kāi)始頁(yè)面中單擊“打開(kāi)”按鈕，找到要編輯的文件，將其打開(kāi)。方法一打開(kāi)面板組中的“文件”面板，然后在“本地文件”選項(xiàng)區(qū)中雙擊網(wǎng)頁(yè)文件，將其打開(kāi)。方法二二打開(kāi)網(wǎng)頁(yè)文件選擇菜單欄中的“文件”→“打開(kāi)”命令，找到網(wǎng)頁(yè)文件將其打開(kāi)。方法三網(wǎng)頁(yè)標(biāo)題是指瀏覽該網(wǎng)頁(yè)時(shí)顯示在瀏覽器標(biāo)題欄中的文字，是網(wǎng)頁(yè)內(nèi)容的高度概括，一看到網(wǎng)頁(yè)標(biāo)題人們就能知道這個(gè)網(wǎng)頁(yè)的主要內(nèi)容是什么。更改網(wǎng)頁(yè)標(biāo)題網(wǎng)站主頁(yè)的標(biāo)題就是網(wǎng)站的名稱；網(wǎng)站中內(nèi)容頁(yè)面的標(biāo)題就是內(nèi)容文章的題目。在屬性檢查器下方的“文檔標(biāo)題”文本框中可以修改網(wǎng)頁(yè)標(biāo)題。選擇菜單欄中的“文件”→“保存”命令，可以保存當(dāng)前打開(kāi)的網(wǎng)頁(yè)文件。保存網(wǎng)頁(yè)文件選擇菜單欄中的“文件”→“保存全部”命令，可以對(duì)所有更改過(guò)的網(wǎng)頁(yè)文件進(jìn)行保存。選擇菜單欄中的“文件”→“實(shí)時(shí)預(yù)覽”→“MicrosoftEdge”命令，網(wǎng)頁(yè)的內(nèi)容顯示在瀏覽器中。預(yù)覽網(wǎng)頁(yè)退出Dreamweaver選擇菜單欄中的“文件”→“關(guān)閉”命令。或者單擊網(wǎng)頁(yè)編輯窗口右上角的按鈕，都可以關(guān)閉這些網(wǎng)頁(yè)的編輯窗口。方法一選擇菜單欄中的“文件”→“全部關(guān)閉”命令，可以關(guān)