Dreamweaver網(wǎng)頁設(shè)計(jì)課程的核心知識(shí)點(diǎn).doc

Dreamweaver網(wǎng)頁設(shè)計(jì)課程的核心知識(shí)點(diǎn) 在學(xué)習(xí)的過程中，請(qǐng)同學(xué)們重點(diǎn)關(guān)注以下知識(shí)點(diǎn)。一、建立站點(diǎn) 本地站點(diǎn)和遠(yuǎn)程站點(diǎn)的概念。 搭建站點(diǎn)的兩種方法：使用向?qū)硗瓿桑酶呒?jí)設(shè)定來完成。 練習(xí)：按照下述要求建立站點(diǎn) 1新建本地根文件夾：在指定的文件夾中新建本地根文件夾并命名為root，在該文件夾中新建子文件夾，用于存放圖片等文檔。 2定義站點(diǎn)：u 設(shè)置“站點(diǎn)名稱”：定義Dreamweaver站點(diǎn)，命名為“Myweb。u 設(shè)置本地根文件夾：本地根文件夾指定為root文件夾。u 設(shè)置首頁：設(shè)置首頁為index.htm。 二、有關(guān)HTML文件的基礎(chǔ)知識(shí)（很重要） 1HTML：Hyper Text Markup Language超文本標(biāo)記語言 2. 直接由瀏覽器解釋執(zhí)行，無須編譯。 3語法結(jié)構(gòu)：包括文檔頭部和文檔主體。 下面是HTML代碼的基本結(jié)構(gòu)： 頭部信息 文檔主體，正文部分 4. 標(biāo)簽 1)用包圍起來的代碼2)包括單標(biāo)簽和雙標(biāo)簽u 單標(biāo)簽 表示換行 表示插入一條水平線u 雙標(biāo)簽 內(nèi)容 例如：加粗文字3)標(biāo)簽的屬性 屬性之間沒有順序關(guān)系 屬性值盡量用英文輸入法下的全角引號(hào)包圍。 SIZE：線的粗細(xì) ALIGN：對(duì)齊方式 WIDTH：水平線的長(zhǎng)度 4)重要的標(biāo)簽u 頭部標(biāo)簽u 主體標(biāo)簽u 圖片標(biāo)簽u 文字標(biāo)簽u 字體標(biāo)簽u 列表標(biāo)簽u 表格標(biāo)簽u 表單標(biāo)簽三、基本網(wǎng)頁設(shè)計(jì) 1設(shè)置頁面屬性 2設(shè)置文件頭信息 3網(wǎng)頁中的文字、文字設(shè)置 4網(wǎng)頁中的圖像、圖像設(shè)置 5圖文混排的網(wǎng)頁 6網(wǎng)頁鏈接的設(shè)計(jì) 1)相對(duì)路徑與絕對(duì)路徑 2)制作Email鏈接3)制作錨點(diǎn)鏈接 4)制作圖像映射即熱點(diǎn) 5)制作腳本鏈接 7多媒體網(wǎng)頁的設(shè)計(jì) 1)在網(wǎng)頁中插入Flash動(dòng)畫 2)在網(wǎng)頁中插入Flash按鈕與文字 3)在網(wǎng)頁中插入Flash圖片播放器 4)在網(wǎng)頁中插入Applet 5)在網(wǎng)頁中使用翻轉(zhuǎn)圖片 6)在網(wǎng)頁中使用導(dǎo)航條 7)在網(wǎng)頁中插入音頻 8)插入與控制滾動(dòng)文字9插入水平線8各種對(duì)象的屬性面板 四、表格的使用 1“表格”對(duì)話框中1)表格寬度：?jiǎn)挝挥邢袼睾桶俜直葍煞N；按像素定義的表格大小是固定，按百分比定義的表格，表格隨瀏覽器的大小變化。 2)邊框粗細(xì)：指表格邊框的粗細(xì)；0為無邊框，1為有邊框。 3)單元格邊距：表示單元格中的內(nèi)容和單元格邊框之間的距離。 2表格屬性與單元格屬性的設(shè)置 3了解表格中的HTML 在表格設(shè)計(jì)的HTML中的主要標(biāo)簽包括： 其中的內(nèi)容屑于一個(gè)表格 其中的內(nèi)容屬于一行 其中的內(nèi)容屬于一列 4表格的設(shè)計(jì)與處理 5利用表格進(jìn)行網(wǎng)頁排版6.表格排序 五、表單的使用 1表單的基本概念 1)表單的作用：收集用戶的信息。 2)表單的工作組成：分為前臺(tái)和后臺(tái)兩個(gè)部分，后臺(tái)往往需要一些編程語言輔助完成。 3)表單的工作過程：u 訪問者在瀏覽有表單的網(wǎng)頁時(shí)，可填寫必須的信息，然后單擊“提交”按鈕。u 這些信息通過Internet傳送到服務(wù)器上。u 服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回u 錯(cuò)誤信息，并要求糾正錯(cuò)誤。u 當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個(gè)輸人完成信息。 4)表單的組成：一個(gè)表單域和若干表單元素。 5)表單的提交方法：GET將瀏覽者提供的信息附加在URL地址的后面提交到服務(wù)器；POST表單信息將以文件的形式提交，安全系數(shù)高。 2插入各種表單對(duì)象 1)文本域 2)隱藏域3)按鈕 4)單選按鈕（組） 5)復(fù)選框 6)列表菜單 7)跳轉(zhuǎn)菜單 8)文件域 9)圖像域六、使用CSS樣式表 1樣式表基礎(chǔ) 1)概念：簡(jiǎn)稱CSS，是一系列格式規(guī)則，用于控制網(wǎng)頁內(nèi)容的外觀。 2)作用：控制傳統(tǒng)的文本屬性、特殊的html屬性(對(duì)象位置、圖片效果、鼠標(biāo)指針等)。 3)特點(diǎn)：u 格式與結(jié)構(gòu)分離；u 控制頁面布局；u 減小網(wǎng)頁的“體積”；u 同時(shí)更新網(wǎng)頁。 4)類型：類樣式，標(biāo)簽樣式，高級(jí)樣式。u 類樣式：也稱為自定義樣式表，可以將樣式屬性設(shè)置為任何文本范圍或文本塊中，所有樣式均以開頭，出現(xiàn)“Class”屬性，出現(xiàn)“”標(biāo)簽。u 標(biāo)簽樣式：針對(duì)標(biāo)簽定義的樣式，將對(duì)整個(gè)標(biāo)簽內(nèi)的內(nèi)容有效。u 高級(jí)樣式：使用“ID”屬性，常見的有4種： a：link設(shè)定正常狀態(tài)下鏈接文字的樣式。 a：active設(shè)定鼠標(biāo)單擊時(shí)鏈接文字的外觀。 a：visited設(shè)定訪問過的鏈接文字的外觀。 a：hover設(shè)定鼠標(biāo)放置在鏈接文字之上時(shí)文字的外觀。 5)語法規(guī)則： 由兩個(gè)部分組成：選擇器和聲明，選擇器就是樣式的名稱，包括自定義的類，HTML標(biāo)簽和CSS選擇器樣式。比如“.mycss”為自定義的類，“td”為標(biāo)準(zhǔn)HTML標(biāo)簽，而“a:link”則是CSS選擇器樣式；聲明則是用于定義樣式元素的。聲明又分兩部分：屬性（如font-size）和值（如12px）。對(duì)于一個(gè)選擇器而言，可以有多個(gè)聲明。比如一個(gè)聲明是表示顏色，一個(gè)聲明是表示大小等。 2樣式表的設(shè)置與使用 3鏈接和導(dǎo)入樣式七、框架的使用 1框架的基本概念 1)作用：把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁。 2)組成： 框架集(Frameset)：也是一個(gè)網(wǎng)頁文件，它將一個(gè)窗口通過行和列分割成多個(gè)框架，每個(gè)框架中要顯示的就是不同的網(wǎng)頁文件。 框架(Frame)：瀏覽器窗口中的一個(gè)區(qū)域，可以顯示與瀏覽器窗口中的其余部分中所顯示內(nèi)容無關(guān)的網(wǎng)頁文件。 3)保存方式： 保存框架集文件、多個(gè)框架文件。 2框架的創(chuàng)建與使用八、層的使用 1層的基本概念 1)層：CSS中的定位技術(shù)，在Dreamweaver中可對(duì)其進(jìn)行可視化操作。層體現(xiàn)了網(wǎng)頁技術(shù)從二維空間向三維空間的一種延伸。 2)層的特點(diǎn)：重疊、便于移動(dòng)、可設(shè)為隱藏。 3)利用層與表格進(jìn)行的排版： 不是所有的瀏覽器都支持層。利用層做對(duì)象的定位，然后將層轉(zhuǎn)化為表格。 2層與排版九、時(shí)間軸和行為的使用 1使用時(shí)間軸制作動(dòng)畫 制作動(dòng)畫需要將層和“時(shí)間軸”面板配合起來。利用時(shí)間軸，可以更改層的位置、大小、可見性和層疊順序。 2使用行為制作動(dòng)態(tài)網(wǎng)頁 行為是指能夠簡(jiǎn)單運(yùn)用制作動(dòng)態(tài)網(wǎng)頁的JavaScript的功能，它提高了網(wǎng)站的可交互性。 1)行為的組成：由動(dòng)作和事件組成。 例如，當(dāng)鼠標(biāo)指針指向一張圖片，圖片發(fā)生輪替，此時(shí)鼠標(biāo)移動(dòng)被稱為事件，圖片發(fā)生的變化稱之為動(dòng)作。一般的動(dòng)作是由事件來激活動(dòng)作。 2)動(dòng)作：由預(yù)先寫好的能夠執(zhí)行某種任務(wù)的JavaScript代碼組成， 這些代碼執(zhí)行特定的任務(wù)，例如打開瀏覽器窗口、顯示或隱藏層、播放聲音或停止Shockwave影片。 3)事件：與瀏覽器用戶的操作相關(guān)，如鼠標(biāo)的滾動(dòng)等。onfocus 事件 發(fā)生在窗口得到焦點(diǎn)的時(shí)候。應(yīng)用于：window 對(duì)象onload 事件 發(fā)生在文檔全部下載完畢的時(shí)候。全部下載完畢意味著不但 HTML 文件，而且包含的圖片，插件，控件，小程序等全部?jī)?nèi)容都下載完畢。本事件是window 的事件，但是在 HTML 中指定事件處理程序的時(shí)候，我們是把它寫在標(biāo)記中的。應(yīng)用于：window 對(duì)象onmousedown 事件 發(fā)生在用戶把鼠標(biāo)放在對(duì)象上按下鼠標(biāo)鍵的時(shí)候。參考 onmouseup 事件。應(yīng)用于：Button 對(duì)象；Link 對(duì)象onmouseout 事件 發(fā)生在鼠標(biāo)離開對(duì)象的時(shí)候。參考 onmouseover 事件。應(yīng)用于：Link 對(duì)象onmouseover 事件 發(fā)生在鼠標(biāo)進(jìn)入對(duì)象范圍的時(shí)候。這個(gè)事件和 onmouseout 事件，再加上圖片的預(yù)讀，就可以做到當(dāng)鼠標(biāo)移到圖像連接上，圖像更改的效果了 應(yīng)用于：Link 對(duì)象onmouseup 事件 發(fā)生在用戶把鼠標(biāo)放在對(duì)象上鼠標(biāo)鍵被按下的情況下，放開鼠標(biāo)鍵的時(shí)候。如果按下鼠標(biāo)鍵的時(shí)候，鼠標(biāo)并不在放開鼠標(biāo)的對(duì)象上，則本事件不會(huì)發(fā)生。應(yīng)用于：Button 對(duì)象；Link 對(duì)象。onDblClick 雙擊事件onclick 事件 發(fā)生在對(duì)象被單擊的時(shí)候。單擊是指鼠標(biāo)停留在對(duì)象上，按下鼠標(biāo)鍵，沒有移動(dòng)鼠標(biāo)而放開鼠標(biāo)鍵這一個(gè)完整的過程。一個(gè)普通按鈕對(duì)象（Button）通常會(huì)有 onclick 事件處理程序，因?yàn)檫@種對(duì)象根本不能從用戶那里得到任何信息，沒有 onclick 事件處理程序就等于廢柴。按鈕上添加 onclick 事件處理程序，可以模擬“另一個(gè)提交按鈕”，方法是：在事件處理程序中更改表單的 action, target, encoding, method 等一個(gè)或幾個(gè)屬性，然后調(diào)用表單的 submit() 方法。在 Link 對(duì)象的 onclick 事件處理程序中返回 false 值（return false），能阻止瀏