【正文】 第一篇：1 網(wǎng)頁制作教案1DREAMWEAVER 網(wǎng)頁制作教案（一）一、網(wǎng)站的基本概述（一）、網(wǎng)頁：網(wǎng)頁是計算機(jī)連接網(wǎng)絡(luò)時瀏覽器窗口中顯示的一個頁面，是計算機(jī)網(wǎng)絡(luò)最基本的信息單位,它實際是一個文件,存放在世界某個角落的某一臺計算機(jī)中,當(dāng)我們在瀏覽器輸入網(wǎng)址后,網(wǎng)頁文件會被傳送到你的計算機(jī),這樣就可以利用網(wǎng)頁來訪問計算機(jī)了。網(wǎng)頁分類：（1）靜態(tài)網(wǎng)頁:網(wǎng)頁中包含文字、圖片、動畫、視音頻。（2）動態(tài)網(wǎng)頁:網(wǎng)頁中包含文字、圖片、動畫、（兩者的主要區(qū)別:是否包含交互功能）例：《自動控制原理》精品課程網(wǎng)站：是眾多網(wǎng)頁的集合。（二）、網(wǎng)頁的基本構(gòu)成元素：包含圖片，文字，超級鏈接，動畫，表單，視頻音頻等元素中的一種或多種（三）、網(wǎng)頁的頁面設(shè)計：（1）、網(wǎng)頁布局：網(wǎng)頁布局是根據(jù)你所設(shè)計網(wǎng)站類型而設(shè)計的，不同的網(wǎng)站有不同的風(fēng)格，一般包括了標(biāo)題欄，頁眉區(qū)（通常包含網(wǎng)站標(biāo)志），導(dǎo)航區(qū)，正文區(qū)、頁腳。例：Visual Basic 學(xué)習(xí)網(wǎng)站（2）、配色原則：網(wǎng)頁設(shè)計要達(dá)到賞心悅目的目的，需要注意色彩的搭配與風(fēng)格的設(shè)計。例：麥當(dāng)勞（3）、版面編排：例：清華大學(xué)版面既要有美感又要實用，美感是令人感覺舒服的主要因素之一，但美感是要為內(nèi)容服務(wù)的，所以版面的編排要注意各部分內(nèi)容的比例關(guān)系，也就是 “經(jīng)營位置”。作為一種版面，既有文字，又有圖片。文字有大有小，還有標(biāo)題和正文之分。圖片也有大小，而且有橫有豎之別。圖片和文字都需要同時展示，不能簡單地羅列在一個頁面上，這樣往往會搞得雜亂無章。必須根據(jù)內(nèi)容的需要，將圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們組成一個有機(jī)的整體?？梢砸罁?jù)如下幾條來做：，中心突出。在一個頁面上，必然考慮視覺的中心，這個中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個部位，在視覺中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁面上就突出了重點，做到了主次有別。，相互呼應(yīng)。較長的文章或標(biāo)題，不要編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對待圖片的安排也是這樣，要互相錯開，造成大小之間有一定的間隔，這樣可以使頁面錯落有致，避免重心的偏離。，相得益彰。文字和圖片具有一種相互補(bǔ)充的視覺關(guān)系，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖片太多，缺少文字，必然就會減少頁面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內(nèi)容。（四）網(wǎng)站設(shè)計的原則（１）網(wǎng)站主題和內(nèi)容明確。（２）網(wǎng)頁色調(diào)和諧，布局清晰。（３）網(wǎng)站方便易用，提供有效的導(dǎo)航條，使人很容易從每一頁上訪問到網(wǎng)站的任何部分,最好在每一個網(wǎng)頁同樣的位置上都有相同的導(dǎo)航條。（４）避免長文本頁面,每一個網(wǎng)頁的高度不能超過三倍的瀏覽器高度，避免使用過大的圖像，不要使用橫滾動條。（５）避免錯誤鏈接，保證鏈接有效。二、如何策劃一個網(wǎng)站（制作網(wǎng)站的目的以及如何實現(xiàn)）步驟：，確定網(wǎng)站的性質(zhì) 給出網(wǎng)站的主題和名稱(例如求職，聊天，社區(qū)，計算機(jī)技術(shù)，網(wǎng)站開發(fā)，娛樂，旅行)：也就是導(dǎo)航區(qū)的內(nèi)容，欄目的實質(zhì)是一個網(wǎng)站的大綱索引，所以應(yīng)該將網(wǎng)站的主體明確的顯示出來，欄目要主體突出。，畫出網(wǎng)站的目錄結(jié)構(gòu)圖。：如：圣誕節(jié)網(wǎng)站，見網(wǎng)頁例子：根據(jù)你的網(wǎng)站構(gòu)思準(zhǔn)備素材（文字、圖片、動畫、視頻音頻等元素）.在你的文件夾下面分別建立images 和txt、others三個文件夾存放你的素材。三、Dreamweaver 軟件的啟動四、Dreamweaver DREAMWEAVER （一）工作區(qū)的組成結(jié)構(gòu)：（二）、Dreamweaver面板和面板組：（三）菜單欄中各個菜單的基本作用： u 文件：包括對文件的各種操作。u 編輯：包含了對文件的拷貝，粘貼，查找與替換等命令。u 查看：使用查看菜單可以查看文檔的相關(guān)內(nèi)容。u 插入：用于將對象插入文檔中。包括圖片標(biāo)記、flash動畫、視頻、表格、超級鏈接、日期、水平線等：屬性可以在屬性面板中進(jìn)行可視化設(shè)置u 修改：可以使用修改菜單更改選定頁面元素的屬性。u 文本：可以設(shè)置文本的格式，如段落格式、字體、文本環(huán)繞排版及停止文本環(huán)繞等。u 命令：提供各種命令的訪問。u 站點：提供用于管理站點以及上傳和下載文件的菜單項，可以創(chuàng)建站點和對已有站點進(jìn)行編輯 u 窗口：提供對Dreamweaver中的所有面板，檢查器和窗口的訪問。u 幫助：提供了對Dreamweaver文檔的訪問。五、定義一個站點舉例：Dreamweaver學(xué)習(xí)網(wǎng)站（一）、定義一個站點在正式開始制作網(wǎng)頁之前，最好先定義一個新網(wǎng)站，這是為了更好地利用站點窗口對站點文件進(jìn)行管理，也可以盡可能的減少一些錯誤的出現(xiàn)，如路徑出錯，鏈接出錯。我提倡的做法是：建立一個文件夾用于存放網(wǎng)站的所有文件，再在文件內(nèi)建立幾個文件夾，將文件分類，如圖片文件放在images文件夾內(nèi)，HTML文件放在站點文件夾內(nèi)。文件的命名也是非常重要的，不要隨便亂起些名字，最好做到一看文件的名字就知道是什么內(nèi)容的網(wǎng)頁文件。提倡用英文或者拼音給文件命名，不要使用中文的名字，因為有的瀏覽器對中文支持不太好，有可 能出現(xiàn)鏈接的錯誤。定義站點的步驟： １、啟動dreamweaver ，在菜單欄中選擇站點管理站點。在彈出的管理站點對話框中，點擊新建。接下來需要給站點起一個名字，輸入您網(wǎng)站的名字，可以定義中文名。這里起名為dreamweaver學(xué)習(xí)網(wǎng)站,按下一步按下一步按鈕，選擇是否使用服務(wù)器技術(shù)。因為實例建立的是一個靜態(tài)站點，就選擇“否，我不想使用服務(wù)器技術(shù)”。按下一步按鈕，因為要傳到網(wǎng)上的虛擬主頁空間，就要選擇“編輯我的計算機(jī)上的本地副本，完成后再傳到服務(wù)器上”。按下一步，選擇要定義的本地根文件夾,這里選擇D或E盤中你的文件夾，點“選擇”按鈕，因為沒有使用遠(yuǎn)程服務(wù)器，就選擇“無”。按下一步按完成按鈕，一個站點就