網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)

1、1.1 HTML基礎(chǔ)基礎(chǔ)1.2 初識(shí)初識(shí)Dreamweaver CS31.3 在代碼視圖中創(chuàng)建在代碼視圖中創(chuàng)建HTML1.1.1 HTML簡(jiǎn)介簡(jiǎn)介HTML（Hypertext Marked Language，超文本標(biāo)記語言）是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如UNIX、Windows等）。自1990年以來HTML就一直被用作WWW（World Wide Web）的信息表示語言，用于描述網(wǎng)頁的格式設(shè)計(jì)和它與WWW上其他網(wǎng)頁的鏈接信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示出效果。所謂超文本，是指用HTML

2、創(chuàng)建的文檔可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容，并且可以實(shí)現(xiàn)從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接。1.1 HTML基礎(chǔ)1.1.2 課堂實(shí)例課堂實(shí)例創(chuàng)建和測(cè)試第一個(gè)網(wǎng)頁創(chuàng)建和測(cè)試第一個(gè)網(wǎng)頁 歡迎光臨我的第一個(gè)網(wǎng)頁這是第一個(gè)簡(jiǎn)單網(wǎng)頁!在“記事本”窗口中輸入以下內(nèi)容：1.1 HTML基礎(chǔ)在“文件名”文本框中輸入文件名時(shí)，一定要輸入文件的擴(kuò)展名.html（或者.htm），這樣保存的文件才是HTML網(wǎng)頁文檔。如果這里不輸入.html（或者.htm）擴(kuò)展名，那么系統(tǒng)默認(rèn)會(huì)將文件保存為文本文件（TXT文件）。1.1.3 HTML標(biāo)簽標(biāo)簽HTML文檔是在普通文件中的文本上加上標(biāo)簽（或者叫標(biāo)記）

3、，使其達(dá)到預(yù)期的顯示效果。當(dāng)瀏覽器打開一個(gè)HTML文檔時(shí)，會(huì)根據(jù)標(biāo)簽的含義顯示HTML文檔中的文本。其中標(biāo)簽由“”來表示。1.1 HTML基礎(chǔ)1HTML標(biāo)簽的結(jié)構(gòu)形態(tài)1） 元素 2） 元素 3）2對(duì)實(shí)例中標(biāo)簽的解釋1）和2）和3）和4）和1.1.4 HTML文檔的基本結(jié)構(gòu)文檔的基本結(jié)構(gòu)HTML文檔分“文件頭”和“文件體”兩部分，在文件頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文件體中才是要顯示的各種文檔信息，HTML文檔的結(jié)構(gòu)如下所示。1.1 HTML基礎(chǔ)頭部信息，如標(biāo)題 在這里放置網(wǎng)頁的內(nèi)容，包括文本、超鏈接、圖像、動(dòng)畫等1.1.5 了解了解XHTML通過把HTML和XML各自的長(zhǎng)處加以結(jié)合，得

4、到了在現(xiàn)在和未來都能派上用場(chǎng)的標(biāo)記語言XHTML（eXtensible HyperText Markup Language，可擴(kuò)展超文本標(biāo)記語言）。XHTML可以說是由HTML技術(shù)向XML技術(shù)轉(zhuǎn)變的過渡技術(shù)。XHTML和HTML并沒有太大的區(qū)別，只是在語法上更加嚴(yán)格。下面介紹一下它們的主要不同之處。1）標(biāo)簽名和屬性名必須用小寫字母2）XHTML標(biāo)簽必須被關(guān)閉3）XHTML元素必須被正確地嵌套4）XHTML文檔必須擁有根元素1.1 HTML基礎(chǔ)1.2.1 Dreamweaver工作環(huán)境工作環(huán)境1.2 初識(shí)Dreamweaver CS31開始頁1.2.1 Dreamweaver工作環(huán)境工作環(huán)境1.

5、2 初識(shí)Dreamweaver CS32工作窗口1.2.1 Dreamweaver工作環(huán)境工作環(huán)境1.2 初識(shí)Dreamweaver CS33自定義界面1.2.1 Dreamweaver工作環(huán)境工作環(huán)境1.2 初識(shí)Dreamweaver CS34Dreamweaver的視圖模式 1.2.2 建立本地站點(diǎn)建立本地站點(diǎn)1.2 初識(shí)Dreamweaver CS31創(chuàng)建站點(diǎn)目錄l不要將所有的文件都存放在根目錄下，這樣不容易混淆，易于管理和上傳。l按照文件的類型建立不同的子目錄。l目錄的層次不能太深。l目錄命令要得當(dāng)，不能使用中文或者過長(zhǎng)的目錄名。1.2.2 建立本地站點(diǎn)建立本地站點(diǎn)1.2 初識(shí)Dreamweaver CS32在Dreamweaver中定義站點(diǎn)選擇“站點(diǎn)”|“新建站點(diǎn)”命令，在彈出的向?qū)?duì)話框中一步步完成站點(diǎn)的建立。1.2.3 課堂實(shí)例課堂實(shí)例 用用Dreamweaver制作一個(gè)簡(jiǎn)單網(wǎng)頁制作一個(gè)簡(jiǎn)單網(wǎng)頁1.2 初識(shí)Dreamweaver CS31新建網(wǎng)頁2編輯網(wǎng)頁保存網(wǎng)頁3預(yù)覽網(wǎng)頁4繼續(xù)編輯網(wǎng)頁詳細(xì)制作步驟請(qǐng)查看教材相關(guān)內(nèi)容1.3.1 標(biāo)簽選擇器標(biāo)簽選擇器1.3 在代碼視圖中創(chuàng)建HTML選擇“插入記錄”|“標(biāo)簽”命令（快捷鍵為Ctrl+E），彈出“標(biāo)簽選擇器”對(duì)話框。1.3.2 代碼提示工具代碼提示工具1.3