12、DREAMWEAVER 8.0 網(wǎng)頁(yè)制作教案
（一）一、網(wǎng)站的基本概述
（一）、網(wǎng)頁(yè)：網(wǎng)頁(yè)是計(jì)算機(jī)連接網(wǎng)絡(luò)時(shí)瀏覽器窗口中顯示的一個(gè)頁(yè)面，是計(jì)算機(jī)網(wǎng)絡(luò)最基本的信息單位,它實(shí)際是一個(gè)文件,存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中,當(dāng)我們?cè)跒g覽器輸入網(wǎng)址后,網(wǎng)頁(yè)文件會(huì)被傳送到你的計(jì)算機(jī),這樣就可以利用網(wǎng)頁(yè)來(lái)訪問(wèn)計(jì)算機(jī)了。
網(wǎng)頁(yè)分類：（1）靜態(tài)網(wǎng)頁(yè):網(wǎng)頁(yè)中包含文字、圖片、動(dòng)畫、視音頻。
（2）動(dòng)態(tài)網(wǎng)頁(yè):網(wǎng)頁(yè)中包含文字、圖片、動(dòng)畫、視音頻以及交互功能.?（兩者的主要區(qū)別:是否包含交互功能）
例：《自動(dòng)控制原理》精品課程
網(wǎng)站：是眾多網(wǎng)頁(yè)的集合。
（二）、網(wǎng)頁(yè)的基本構(gòu)成元素：
包含圖片，文字，超級(jí)鏈接，動(dòng)畫，表單，視頻音頻等元素中的一種或多種
（三）、網(wǎng)頁(yè)的頁(yè)面設(shè)計(jì)：（1）、網(wǎng)頁(yè)布局：網(wǎng)頁(yè)布局是根據(jù)你所設(shè)計(jì)網(wǎng)站類型而設(shè)計(jì)的，不同的網(wǎng)站有不同的風(fēng)格，一般包括了標(biāo)題欄，頁(yè)眉區(qū)（通常包含網(wǎng)站標(biāo)志），導(dǎo)航區(qū)，正文區(qū)、頁(yè)腳。
例：Visual Basic 學(xué)習(xí)網(wǎng)站（2）、配色原則：網(wǎng)頁(yè)設(shè)計(jì)要達(dá)到賞心悅目的目的，需要注意色彩的搭配與風(fēng)格的設(shè)計(jì)。例：麥當(dāng)勞（3）、版面編排：例：清華大學(xué)
版面既要有美感又要實(shí)用，美感是令人感覺(jué)舒服的主要因素之一，但美感是要為內(nèi)容服務(wù)的，所以版面的編排要注意各部分內(nèi)容的比例關(guān)系，也就是 “經(jīng)營(yíng)位置”。作為一種版面，既有文字，又有圖片。文字有大有小，還有標(biāo)題和正文之分;圖片也有大小，而且有橫有豎之別。圖片和文字都需要同時(shí)展示，不能簡(jiǎn)單地羅列在一個(gè)頁(yè)面上，這樣往往會(huì)搞得雜亂無(wú)章。必須根據(jù)內(nèi)容的需要，將圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們組成一個(gè)有機(jī)的整體。可以依據(jù)如下幾條來(lái)做：
1.主次分明，中心突出。在一個(gè)頁(yè)面上，必然考慮視覺(jué)的中心，這個(gè)中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個(gè)部位，在視覺(jué)中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁(yè)面上就突出了重點(diǎn)，做到了主次有別。
2.大小搭配，相互呼應(yīng)。較長(zhǎng)的文章或標(biāo)題，不要編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對(duì)待圖片的安排也是這樣，要互相錯(cuò)開，造成大小之間有一定的間隔，這樣可以使頁(yè)面錯(cuò)落有致，避免重心的偏離。
3.圖文并茂，相得益彰。文字和圖片具有一種相互補(bǔ)充的視覺(jué)關(guān)系，頁(yè)面上文字太多，就顯得沉悶，缺乏生氣。頁(yè)面上圖片太多，缺少文字，必然就會(huì)減少頁(yè)面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁(yè)面，又使主頁(yè)有豐富的內(nèi)容。
（四）網(wǎng)站設(shè)計(jì)的原則
（１）網(wǎng)站主題和內(nèi)容明確。（２）網(wǎng)頁(yè)色調(diào)和諧，布局清晰。
（３）網(wǎng)站方便易用，提供有效的導(dǎo)航條，使人很容易從每一頁(yè)上訪問(wèn)到網(wǎng)站的任何部分,最好在每一個(gè)網(wǎng)頁(yè)同樣的位置上都有相同的導(dǎo)航條。
（４）避免長(zhǎng)文本頁(yè)面,每一個(gè)網(wǎng)頁(yè)的高度不能超過(guò)三倍的瀏覽器高度，避免使用過(guò)大的圖像，不要使用橫滾動(dòng)條。
（５）避免錯(cuò)誤鏈接，保證鏈接有效。
二、如何策劃一個(gè)網(wǎng)站（制作網(wǎng)站的目的以及如何實(shí)現(xiàn)）
步驟：
1.給網(wǎng)站定位，確定網(wǎng)站的性質(zhì) 給出網(wǎng)站的主題和名稱(例如求職，聊天，社區(qū)，計(jì)算機(jī)技術(shù)，網(wǎng)站開發(fā)，娛樂(lè)，旅行)2.確定網(wǎng)站的欄目：也就是導(dǎo)航區(qū)的內(nèi)容，欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，所以應(yīng)該將網(wǎng)站的主體明確的顯示出來(lái)，欄目要主體突出。
3.確定網(wǎng)站的目錄和鏈接結(jié)構(gòu)，畫出網(wǎng)站的目錄結(jié)構(gòu)圖。
4.繪制首頁(yè)網(wǎng)頁(yè)的布局：如：圣誕節(jié)網(wǎng)站，見(jiàn)網(wǎng)頁(yè)例子：網(wǎng)頁(yè)表格布局.htm
5、根據(jù)你的網(wǎng)站構(gòu)思準(zhǔn)備素材（文字、圖片、動(dòng)畫、視頻音頻等元素）.在你的文件夾下面分別建立images 和txt、others三個(gè)文件夾存放你的素材。
三、Dreamweaver 軟件的啟動(dòng)
四、Dreamweaver 8.0操作界面
DREAMWEAVER 8.0操作界面
（一）工作區(qū)的組成結(jié)構(gòu)：
（二）、Dreamweaver面板和面板組：
（三）菜單欄中各個(gè)菜單的基本作用： ? 文件：包括對(duì)文件的各種操作。
? 編輯：包含了對(duì)文件的拷貝，粘貼，查找與替換等命令。? 查看：使用查看菜單可以查看文檔的相關(guān)內(nèi)容。
? 插入：用于將對(duì)象插入文檔中。包括圖片![]()
標(biāo)記、flash動(dòng)畫、視頻、表格、超級(jí)鏈接、日期、水平線等：屬性可以在屬性面板中進(jìn)行可視化設(shè)置
? 修改：可以使用修改菜單更改選定頁(yè)面元素的屬性。
? 文本：可以設(shè)置文本的格式，如段落格式、字體、文本環(huán)繞排版及停止文本環(huán)繞等。? 命令：提供各種命令的訪問(wèn)。
? 站點(diǎn)：提供用于管理站點(diǎn)以及上傳和下載文件的菜單項(xiàng)，可以創(chuàng)建站點(diǎn)和對(duì)
已有站點(diǎn)進(jìn)行編輯 ? 窗口：提供對(duì)Dreamweaver中的所有面板，檢查器和窗口的訪問(wèn)。? 幫助：提供了對(duì)Dreamweaver文檔的訪問(wèn)。
五、定義一個(gè)站點(diǎn)
舉例：Dreamweaver學(xué)習(xí)網(wǎng)站
（一）、定義一個(gè)站點(diǎn)
在正式開始制作網(wǎng)頁(yè)之前，最好先定義一個(gè)新網(wǎng)站，這是為了更好地利用站點(diǎn)窗口對(duì)站點(diǎn)文件進(jìn)行管理，也可以盡可能的減少一些錯(cuò)誤的出現(xiàn)，如路徑出錯(cuò)，鏈接出錯(cuò)。我提倡的做法是：建立一個(gè)文件夾用于存放網(wǎng)站的所有文件，再在文件內(nèi)建立幾個(gè)文件夾，將文件分類，如圖片文件放在images文件夾內(nèi)，HTML文件放在站點(diǎn)文件夾內(nèi)。
文件的命名也是非常重要的，不要隨便亂起些名字，最好做到一看文件的名字就知道是什么內(nèi)容的網(wǎng)頁(yè)文件。提倡用英文或者拼音給文件命名，不要使用中文的名字，因?yàn)橛械臑g覽器對(duì)中文支持不太好，有可 能出現(xiàn)鏈接的錯(cuò)誤。
定義站點(diǎn)的步驟： １、啟動(dòng)dreamweaver 8.0中，在菜單欄中選擇站點(diǎn)>管理站點(diǎn)。在彈出的管理站點(diǎn)對(duì)話框中，點(diǎn)擊新建。
接下來(lái)需要給站點(diǎn)起一個(gè)名字，輸入您網(wǎng)站的名字，可以定義中文名。
這里起名為dreamweaver學(xué)習(xí)網(wǎng)站,按下一步
2、按下一步按鈕，選擇是否使用服務(wù)器技術(shù)。因?yàn)閷?shí)例建立的是一個(gè)靜態(tài)站點(diǎn)，就選擇“否，我不想使用服務(wù)器技術(shù)”。
3、按下一步按鈕，因?yàn)橐獋鞯骄W(wǎng)上的虛擬主頁(yè)空間，就要選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后再傳到服務(wù)器上”。
4、按下一步，選擇要定義的本地根文件夾,這里選擇D或E盤中你的文件夾，點(diǎn)“選擇”按鈕，因?yàn)闆](méi)有使用遠(yuǎn)程服務(wù)器，就選擇“無(wú)”。按下一步
5、按完成按鈕，一個(gè)站點(diǎn)就定義好了。
6、打開文件面板（窗口→文件），在您的站點(diǎn)文件中新建三個(gè)文件夾，用于存放與站點(diǎn)有關(guān)的圖片等文件，分別是命名為images、txt、others。
新建五個(gè)網(wǎng)頁(yè)文件，分別命名為：
index.html、kcjs.html、kcxx.html、yxzp.html、sczy.html 打開D盤看看你剛剛建立網(wǎng)站的文件。
? 素材文件名和網(wǎng)頁(yè)文件名必須用英文或英文狀態(tài)下的數(shù)字，不能使用中文
練習(xí)1：在dreamweaver 中定義一個(gè)站點(diǎn)，文件夾放在D 盤的目錄下。
六、常用功能介紹
（一）、表格的使用：
? 制作網(wǎng)頁(yè)數(shù)據(jù)表格：熟悉表格的插入、合并、拆分與嵌套；表格的制作..htm ? 表格的基本構(gòu)成標(biāo)記 ：
（1）創(chuàng)建表格：
第一步：在Dreamweaver 8.0中運(yùn)行“插入→表格”命令，彈出屬性設(shè)置窗口，添入插入表格的行數(shù)、列數(shù)、表格的寬度，根據(jù)自己的需要來(lái)設(shè)置表格的相應(yīng)屬性即可。
小提示：表格的寬度和高度可以通過(guò)瀏覽器窗口百分比或者使用絕對(duì)像素值來(lái)定義，比如設(shè)置寬度為窗口寬度的100％，那么當(dāng)瀏覽器窗口大小變化的時(shí)候表格的寬度也隨之變化；而如果設(shè)置寬度為500像素，那么無(wú)論瀏覽器窗口大小為多少，表格的寬度都不會(huì)變化。
第二步：點(diǎn)擊窗口中的“OK”按鈕之后即可在Dreamweaver 8.0中新建一個(gè)表格，而且通過(guò)窗口下部的屬性面板還可以對(duì)其進(jìn)行諸如表格線條的顏色、表格的背景色、表格的背景圖片（介紹如何插入橫鋪墊、豎鋪墊、不重復(fù)的背景圖片）、色單元格的對(duì)齊方式等參數(shù)進(jìn)行調(diào)整。
用標(biāo)簽選擇器選擇表格，將光標(biāo)定位在表格的第一個(gè)單元格內(nèi)，可以看到狀態(tài)欄左側(cè)的標(biāo)簽選擇器處顯示為 “{body}{table}{tr}{td}”，其中table表示表格，tr表示表格中的行，td表示單元格，現(xiàn)在td被加粗顯示，說(shuō)明光標(biāo)處在單元格內(nèi)。單擊一下{table}，標(biāo)簽選擇器處顯示為“{body}{table}{tr}{td}”（如下圖），再看編輯區(qū)內(nèi)的表格，表格周圍為一圈黑線，表示表格被選中了，四周還有幾個(gè)黑色的小方塊，是表格拖放手柄，可以用來(lái)改變表格的大小。
（2）基本使用（舉例說(shuō)明：表格的制作..htm）
步驟：
第一步：先插入一個(gè)９行３列的表格；
第二步：選中表格中第二行第二列的單元格，接著點(diǎn)擊屬性模板中的“拆分單元格”按鈕，這樣就把選中的單元格拆分為二個(gè)單元格，按照同樣的方法再將表格中其他需要拆分的單元格拆分。
第三步：選中表格中第九行中第二列和第三列的單元格，接著點(diǎn)擊屬性模板中的“合并單元格”按鈕，這樣就把選中的兩個(gè)單元格合并成為一個(gè)單元格，按照同樣的方法再將表格中其他需要合并的單元格合并。
第四步：將表格第九行的三個(gè)單元格全部選中，再將屬性模板中的背景顏色（Bg）一項(xiàng)設(shè)置為“#FFFF00”，這樣表格第一列中的單元格背景全部變?yōu)辄S色。
第五步：在表格中輸入相應(yīng)的文本，為了美觀可以在屬性面板中進(jìn)行居中設(shè)置。
第六步：為了使表格產(chǎn)生立體效果，可以將整個(gè)表格選中，然后在屬性面板中設(shè)定表格邊框的寬度（Border）為7，并且將邊框顏色（Border color）設(shè)置為灰色即可。
小提示：選取整個(gè)表格常用的方法：1．把鼠標(biāo)移動(dòng)到表格右邊界外側(cè)，按下鼠標(biāo)之后往左拖拽，這樣可以快速選取整個(gè)表格。２．在單元格中右擊鼠標(biāo)，并且從彈出菜單中選擇“表格→選擇表格”命令選取整個(gè)表格。３．用鼠標(biāo)點(diǎn)擊任一個(gè)單元格，接著按兩下“Ctrl＋A”組合按鈕選取整個(gè)表格。
完成上述操作之后，我們就可以在Dreamweaver 8.0中定制出頗具專業(yè)水準(zhǔn)的表格了。練習(xí)
2、新建一個(gè)網(wǎng)頁(yè)，在網(wǎng)頁(yè)中插入一個(gè)3行3列的表格，設(shè)置表格屬性（邊框和背景顏色），試著對(duì)目標(biāo)行和列進(jìn)行拆分、合并及新增表格的操作。
（3）利用表格來(lái)定位網(wǎng)頁(yè)
表格在網(wǎng)頁(yè)布局中有著舉足輕重的地位，很多網(wǎng)站的頁(yè)面都是以表格為框架制作的，這是因?yàn)楸砀裨趦?nèi)容的組織、頁(yè)面中文本和圖形的位置控制方面都有很強(qiáng)的功能，靈活、熟練地使用表格，會(huì)使你在網(wǎng)頁(yè)制作中如虎添翼。
表格的網(wǎng)頁(yè)定位主要通過(guò)將網(wǎng)頁(yè)內(nèi)容分成若干個(gè)區(qū)，然后將相應(yīng)的內(nèi)容分別填入不同的表格，從而做成非常規(guī)范與專業(yè)的網(wǎng)頁(yè)，下面就來(lái)看看dreamweaver學(xué)習(xí)網(wǎng)站是如何通過(guò)表格實(shí)現(xiàn)網(wǎng)頁(yè)布局的。表格定位網(wǎng)頁(yè)：如index_wlr.html 是一個(gè)只含表格的網(wǎng)頁(yè)。
為方便網(wǎng)站能在在800×600分辨率下會(huì)顯示正常，無(wú)橫滾動(dòng)條，我們編輯的網(wǎng)頁(yè)寬度就定為750象素，高度可以大些，在瀏覽器中顯示時(shí)會(huì)有豎直滾動(dòng)條。
總體布局：在菜單欄選擇插入命令，下拉的菜單中選擇表格，在彈出的對(duì)話框中選擇一個(gè)，寬為750像素，1行1列的表格，并設(shè)置邊框粗細(xì)、單元格邊距、單元格間距均為0；
頁(yè)眉區(qū)： 觀察到網(wǎng)頁(yè)最上部是頁(yè)眉區(qū)，頁(yè)眉區(qū)可以放嵌套一行一列的表格，用于放置一個(gè)寬為750高的圖片文件或flash文件；
導(dǎo)航區(qū)：嵌套一行五列的表格，用于放置五個(gè)導(dǎo)航；
正文區(qū)：正文區(qū)總得說(shuō)來(lái)是由一個(gè)一行二列的大表格構(gòu)建而成，所以首先插入一個(gè)一行二列的表格，在左邊一列的單元格中插入一個(gè)16行１列的表格，在右邊一列的單元格中插入一個(gè)7行3列的表格。布局頁(yè)腳：網(wǎng)腳是由一個(gè)大的表格組成，可以插入一個(gè)1行１列的表格，表格的寬設(shè)置為750象素。
練習(xí)
3、打開dreamweaver學(xué)習(xí)網(wǎng)站站點(diǎn)的index.html文件，設(shè)置頁(yè)面屬性，并利用表格定位網(wǎng)頁(yè)，保存網(wǎng)頁(yè)。
（二）文字的插入
介紹編輯字體列表。
注意：在網(wǎng)頁(yè)上打入空格的辦法是：把輸入法調(diào)為全角。
在網(wǎng)頁(yè)上換行的辦法是：shift+Enter。只按Enter則為換段。
（三）圖片插入：設(shè)置圖片對(duì)齊方式，使文本產(chǎn)生環(huán)繞效果。
例如：建立文本環(huán)繞右邊：
、停止文本環(huán)繞：
在文字代碼中插入
（四）插入水平線：
它的顏色設(shè)置要通過(guò)代碼設(shè)置，寬和高可以通過(guò)屬性面板
（五）頁(yè)面屬性的設(shè)置：在編輯網(wǎng)頁(yè)之前，先對(duì)頁(yè)面屬性進(jìn)行設(shè)置，便于保證網(wǎng)頁(yè)風(fēng)格的統(tǒng)一，當(dāng)然，頁(yè)面屬性的設(shè)置是隨時(shí)可以進(jìn)行的。舉例：在標(biāo)題上輸入：dreamweaver學(xué)習(xí)網(wǎng)站，在背景，文本，鏈接，訪問(wèn)過(guò)的鏈接，活動(dòng)鏈接幾部分選取顏色。設(shè)置左邊界，頂部邊界，邊界寬度，邊界高度都為0象素，可以使頁(yè)面中的表格與背景沒(méi)有空隙。如果不設(shè)置邊界，頂部邊界，就會(huì)默認(rèn)表格與頂部和邊界有明顯的空隙 用得比較多的還有背景圖像的設(shè)置，選擇一個(gè)已經(jīng)做好的圖像，就可以設(shè)置成頁(yè)面的背景圖像。
頁(yè)面屬性設(shè)置完畢后，我們會(huì)發(fā)現(xiàn)代碼窗口出現(xiàn)了如下代碼（黑色部分）： body { margin-top: 0px;
頁(yè)面頂部邊界為0 background-image: url(images/dt.gif);
頁(yè)面背景圖像
} a:link { text-decoration: none;color: #666666;} a:visited { text-decoration: none;color: #3333CC;} a:hover { text-decoration: underline;color: #660000;} a:active { text-decoration: none;color: #CCFF33;} body,td,th { font-size: 12px;color: #666666;font-family: 宋體;line-height: 20px;
行距（需要在代碼區(qū)設(shè)置，它的大小應(yīng)該比文字大小要大，否則會(huì)吃掉一部分字體。）
}
練習(xí)
4、試在練習(xí)3中建立的網(wǎng)頁(yè)文件index.htm中練習(xí)插入文本、插入水平線、圖片并設(shè)置圖片的垂直邊距和水平邊距、設(shè)置頁(yè)面屬性。
（六）日期的插入：在插入欄選擇日期，在彈出的對(duì)話框中選擇顯示的格式。
（七）E_mail鏈接的插入：在插入欄選擇電子郵件鏈接，在文本中輸入要顯示的文本，在E_mail中輸入需要鏈接的郵件地址。
（八）交換圖象效果的制作：（插入→圖像對(duì)象→鼠標(biāo)經(jīng)過(guò)圖象）
鼠標(biāo)經(jīng)過(guò)圖象的效果是當(dāng)鼠標(biāo)指針經(jīng)過(guò)或者按下按鈕的時(shí)候，圖像或按鈕的形狀或顏色就會(huì)發(fā)生變化，如圖像變換，發(fā)光，或者陰影出現(xiàn)等等。是網(wǎng)頁(yè)變的生動(dòng)活潑起來(lái)。
看dreamweaver學(xué)習(xí)網(wǎng)站導(dǎo)航演示：鼠標(biāo)移動(dòng)到圖片上的時(shí)候，圖片變成了另外一幅，當(dāng)鼠標(biāo)移開后恢復(fù)到原來(lái)的圖象。
制作步驟：
1、光標(biāo)移動(dòng)到欲插入的位置，點(diǎn)擊菜單欄【插入】【圖像對(duì)象】【鼠標(biāo)經(jīng)過(guò)圖像】打開對(duì)話框：
【圖像名稱】鼠標(biāo)經(jīng)過(guò)圖像的名稱，名稱是自定義的，只要不與同頁(yè)面另一個(gè)鼠標(biāo)經(jīng)過(guò)圖像名稱相同即可，也可以不填。
【原始圖像】頁(yè)面開始時(shí)顯示的圖像
【鼠標(biāo)經(jīng)過(guò)圖像】鼠標(biāo)經(jīng)過(guò)的時(shí)候顯示的圖像。
【替換文本】圖像無(wú)法正常顯示的時(shí)候出現(xiàn)的文本注釋，也是圖像正常顯示時(shí)鼠標(biāo)指向鏈接時(shí)的說(shuō)明，也可以不填。
【前往的URL】點(diǎn)擊鼠標(biāo)后鏈接的目標(biāo)。
【預(yù)載鼠標(biāo)經(jīng)過(guò)圖像】瀏覽網(wǎng)頁(yè)時(shí)兩個(gè)圖片都同時(shí)被下載，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)無(wú)需從網(wǎng)上下載，而是調(diào)用預(yù)先下載的圖像，減少延遲，使效果平滑流暢。
（九）flash動(dòng)畫插入、flash按鈕的插入、flash文本的插入，可以來(lái)制作導(dǎo)航欄。
練習(xí)
5、試在練習(xí)3中建立的網(wǎng)頁(yè)文件index.htm中練習(xí)插入插入水平線、flash動(dòng)畫、flash按鈕、日期、交換圖象
（十）了解簡(jiǎn)單的HTML：超文本標(biāo)志語(yǔ)言，簡(jiǎn)要的介紹網(wǎng)頁(yè)中使用的超文本標(biāo)識(shí)語(yǔ)言HTML的基本概念和用途通過(guò)一個(gè)簡(jiǎn)單的html示例（html.html）了解html的基本構(gòu)成，介紹html的基本組成部分.如果深入了解可以參考：http://www.shanxiwindow.net/teaching/htmlbook/
（十一）制作滾動(dòng)的公告文字
在網(wǎng)頁(yè)上可以方便地設(shè)置文字上下左右移動(dòng)，控制文字移動(dòng)的標(biāo)點(diǎn)詞
在瀏覽器中顯示時(shí)，文字在移動(dòng)這幾個(gè)字左右移動(dòng)。
dirrction:控制移動(dòng)方向，可取left,right,up,down四個(gè)值；
behavior:移動(dòng)方向，可取scroll(循環(huán)移動(dòng)),slide(只走一圈),alternate(來(lái)回移動(dòng))；
loop:指定循環(huán)次數(shù)，不輸入或-1表示無(wú)限循環(huán)
height,width:移動(dòng)區(qū)域的高和寬，單位像素
scrollamount:移動(dòng)的快慢，整數(shù)越大則越快
scorlldelay:每移動(dòng)一步之后的延時(shí)，單位毫米
bgcolor:移動(dòng)區(qū)域的背景色
onmouseover=this.stop()鼠標(biāo)覆蓋時(shí)停止?jié)L動(dòng)
onmouseout=this.start()鼠標(biāo)離開時(shí)開始滾動(dòng)
如下面的代碼就上一個(gè)常見(jiàn)的實(shí)現(xiàn)向上滾動(dòng)文字的原代碼；
（十二）創(chuàng)建網(wǎng)站相冊(cè)： 在你站點(diǎn)下建立一個(gè)放置數(shù)張圖片的文件夾,本實(shí)例是將文件夾命名為photo。
練習(xí)
6、試在練習(xí)4中建立的網(wǎng)頁(yè)文件index.html中制作制作滾動(dòng)的公告文字
您的網(wǎng)站初步構(gòu)思
1、網(wǎng)站的主題和名稱：
2、網(wǎng)站的欄目（也就是導(dǎo)航區(qū)的內(nèi)容）：
3、網(wǎng)站的目錄結(jié)構(gòu)圖：
4、網(wǎng)站的鏈接結(jié)構(gòu)結(jié)構(gòu)圖：
5、繪制首頁(yè)網(wǎng)頁(yè)的布局草圖
網(wǎng)頁(yè)制作與設(shè)計(jì)教案
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁(yè)中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁(yè)的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級(jí)鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡(jiǎn)單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................13 3.2 在頁(yè)面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁(yè)中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁(yè)設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語(yǔ)言簡(jiǎn)介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語(yǔ)句、循環(huán)語(yǔ)句和過(guò)程.............................................................20 4.3 VBSCRIPT基本語(yǔ)句.............................................................................................................20
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)術(shù)語(yǔ)及網(wǎng)站制作的基本流程?！窘虒W(xué)目的】
使學(xué)生對(duì)網(wǎng)站及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣?！窘虒W(xué)重點(diǎn)】
網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)。【教學(xué)難點(diǎn)】
理解網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)?！窘虒W(xué)方式】
講授式、討論式、案例分析式。【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁(yè)工場(chǎng)》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社?！拘抡n內(nèi)容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡(jiǎn)稱，一般也稱之為WWW或3W 1.1.2 Web的特點(diǎn)和結(jié)構(gòu)
Web最大的特點(diǎn)是使用了超文本（Hypertext）WWW采用C/S（客戶機(jī)/服務(wù)器）工作模式
在瀏覽器和服務(wù)器之間應(yīng)用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式
協(xié)議://主機(jī)名或IP地址：端口號(hào)/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶端軟件
在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標(biāo)志的使用。【教學(xué)方式】
討論式、案例分析式、練習(xí)式?！窘虒W(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語(yǔ)法
1、雙標(biāo)記
語(yǔ)法：
<標(biāo)記>內(nèi)容
2、單標(biāo)記 語(yǔ)法：<標(biāo)記> 最常用的單標(biāo)記是
3、標(biāo)記屬性 語(yǔ)法
<標(biāo)記
屬性1 屬性2 屬性3 … > 例子
4、注釋語(yǔ)句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過(guò)本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁(yè)面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無(wú)序列表標(biāo)志及屬性。
第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級(jí)鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>......，強(qiáng)調(diào)文字，通常用斜體。
< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對(duì)于前面的文字增大一級(jí)。
......，使文字大小相對(duì)于前面的文字減小一級(jí)。......，使文字成為前一個(gè)字符的上標(biāo)。......，使文字成為前一個(gè)字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行 2.2.10 插入水平線 使用
標(biāo)記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無(wú)序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
2、有序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
3、定義列表
- 列表?xiàng)l目1
- 條目1的說(shuō)明
- 列表?xiàng)l目2
- 條目2的說(shuō)明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁(yè)中加入文本、圖片和超級(jí)鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁(yè)的基礎(chǔ)。超級(jí)鏈接標(biāo)志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學(xué)習(xí)HTML中超級(jí)鏈接標(biāo)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志?！窘虒W(xué)目的】
使學(xué)生掌握簡(jiǎn)單表格、表單與框架的制作?！窘虒W(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性?！窘虒W(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對(duì)應(yīng)標(biāo)志及屬性的含義?！窘虒W(xué)方式】
案例分析式、項(xiàng)目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.5 插入表格
2.5.1 在網(wǎng)頁(yè)中插入表格
表格的基本構(gòu)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口屬性設(shè)置
2.7.4 常見(jiàn)的框架窗口劃分方法（1）標(biāo)題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分
（3）目錄和標(biāo)題，分為左上、左下、右三部分
（4）標(biāo)題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁(yè)
