《網(wǎng)頁制作》公共課簡(jiǎn)易教案

第一篇：《網(wǎng)頁制作》公共課簡(jiǎn)易教案

網(wǎng)頁和網(wǎng)站

我們將平時(shí)在瀏覽器(IE)上看到的每一個(gè)頁面稱為網(wǎng)頁，而在同一個(gè)域名地址下的網(wǎng)頁的集合稱為網(wǎng)站，網(wǎng)站可以只有一個(gè)簡(jiǎn)單網(wǎng)頁，也可以由一系列網(wǎng)頁文檔互相鏈接而成。網(wǎng)站建設(shè)的一般步驟

網(wǎng)站建設(shè)是一件復(fù)雜的工程，如果不能合理的安排工作流程，可能會(huì)造成許多不必要的麻煩。對(duì)于不同的建站目標(biāo)制作流程會(huì)略有不同，或者在建站過程中有一些交叉，但大體遵循以下的基本流程：

2.1．需求分析

在軟件設(shè)計(jì)中經(jīng)常提及需求分析這樣的概念。網(wǎng)站建設(shè)也是一樣，只有在充分的溝通了解網(wǎng)站建設(shè)的目標(biāo)、意義、用戶群以及更新需求，才能決定網(wǎng)站要使用怎樣的技術(shù)手段，以及如何定位等。

2.2網(wǎng)站定位

根據(jù)需求分析，我們可以給站點(diǎn)一個(gè)較為準(zhǔn)確的定位，即建站的目的、傳達(dá)的主題、內(nèi)容涉及范圍等等。

2.3規(guī)劃整體結(jié)構(gòu)

這個(gè)階段，要把對(duì)站點(diǎn)定位的感性認(rèn)識(shí)轉(zhuǎn)化為站點(diǎn)的網(wǎng)頁結(jié)構(gòu)、配色、層次結(jié)構(gòu)和鏈接等具體內(nèi)容。并且，可能的話列出幾種方案供選擇。網(wǎng)頁制作

站點(diǎn)中的每一個(gè)網(wǎng)頁既互相聯(lián)系呼應(yīng)但又都不盡相同，為了保持整個(gè)站點(diǎn)頁面的一致性，也為了訪問者更方便的瀏覽站點(diǎn)頁面，制作網(wǎng)頁時(shí)要注意一下幾個(gè)問題：

3.1．導(dǎo)航

一個(gè)站點(diǎn)通常包含不止一個(gè)頁面，按照頁面所體現(xiàn)的內(nèi)容，可以把站點(diǎn)的頁面按照不同的欄目來歸類。導(dǎo)航就是用來體現(xiàn)歸類的結(jié)果，并且實(shí)現(xiàn)在技術(shù)上分門別類的顯示相關(guān)網(wǎng)頁。所以網(wǎng)站的導(dǎo)航一般都放置在比較顯眼的位置（上部或左側(cè)），以保證訪問者能隨時(shí)根據(jù)導(dǎo)航在站內(nèi)頁面間跳轉(zhuǎn)。

3.2鏈接

鏈接是對(duì)導(dǎo)航的一個(gè)擴(kuò)充，頁面上的許多元素上都可以做鏈接。鏈接可以在新瀏覽器窗口打開，也可以將原來窗口的內(nèi)容替換掉，所以一般來說要設(shè)置返回上一頁以及返回首頁的鏈接，以方便訪問者調(diào)整自己在站點(diǎn)中的位置，更大范圍的訪問站內(nèi)的信息。

3.3頁面的布局

在制作網(wǎng)頁時(shí)如果只是將頁面元素做無序的堆砌，即便再美好的文字，再華麗的圖片也不容易讓人接受。如何組織頁面上的元素，就是布局要解決的問題。布局就是將頁面有條理的劃分為若干個(gè)部分，分別放置導(dǎo)航欄、主題圖片或者成段的文字等。好的布局會(huì)讓訪問者很容易的在網(wǎng)站上找到所需要的信息。常見的布局形式有：

（1）框型結(jié)構(gòu)：框型結(jié)構(gòu)如圖3.1所示，其頁面頂部為廣告條，下方左側(cè)為導(dǎo)航，右側(cè)顯示主要內(nèi)容，下方為版權(quán)信息。這是網(wǎng)頁設(shè)計(jì)中用的最廣泛的一種布局方式。這種布局的優(yōu)點(diǎn)是頁面主次分明、結(jié)構(gòu)清晰，是初學(xué)者最容易上手的布局方法。

圖3.1框型結(jié)構(gòu)布局

（2）口型結(jié)構(gòu)：這是一個(gè)象形的說法，其結(jié)構(gòu)如圖3.2所示。頁面上方為廣告條，下方為版權(quán)信息，左面是導(dǎo)航，右面放置友情連接等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大；缺點(diǎn)是頁面擁擠。也有將四邊空出，只用中間的窗口型設(shè)計(jì)。

圖3.2 口型結(jié)構(gòu)布局

（3）T型結(jié)構(gòu)：這種結(jié)構(gòu)如圖3.3所示，該布局適合于內(nèi)容比較簡(jiǎn)潔的頁面。頁面上方為導(dǎo)航和廣告條，下方為版權(quán)信息，中間留出大部分的空白突顯主要內(nèi)容。

圖3.3 T型結(jié)構(gòu)布局

4網(wǎng)站測(cè)試

在對(duì)站點(diǎn)內(nèi)每個(gè)網(wǎng)頁設(shè)計(jì)的過程中都要先在瀏覽器上進(jìn)行測(cè)試。最終整個(gè)站點(diǎn)也要測(cè)試，測(cè)試的內(nèi)容包括：鏈接是否正確、頁面在不同瀏覽器和平臺(tái)上顯示的效果、網(wǎng)頁打開速度、文件下載速度等。網(wǎng)站建設(shè)實(shí)例

在Dreamweaver 8中，“站點(diǎn)”一詞既表示W(wǎng)eb站點(diǎn)，又表示屬于Web 站點(diǎn)的文件的本地存儲(chǔ)位置。在開始構(gòu)建Web站點(diǎn)之前，需要建立站點(diǎn)文件的本地存儲(chǔ)位置。

5.1 創(chuàng)建站點(diǎn)

啟動(dòng)Dreamweaver 8，單擊【站點(diǎn)】菜單，選擇【管理站點(diǎn)】，打開“新建站點(diǎn)”對(duì)話框。

在【您打算為您的站點(diǎn)起什么名字】文本框中，輸入任何您喜歡的名字，比如“我的簡(jiǎn)歷”。【您的站點(diǎn)的HTTP地址是什么】文本框可不填。

單擊【下一步】，由于我們這里以靜態(tài)站點(diǎn)為例，所以在【您是否打算使用服務(wù)器技術(shù)】單選按鈕組中選擇“否”，如果是動(dòng)態(tài)站點(diǎn)則選“是”，并且選擇一個(gè)相應(yīng)的服務(wù)器技術(shù)。

單擊【下一步】，在【您把文件夾存儲(chǔ)在計(jì)算機(jī)上什么位置】文本框末尾單擊“瀏覽”按鈕設(shè)置站點(diǎn)目錄。注意：文件夾名字要為英文名。

單擊【下一步】，在【您如何連接到遠(yuǎn)程服務(wù)器】下拉列表中選擇“無”，暫不設(shè)置使用遠(yuǎn)程服務(wù)器。

單擊【下一步】，確認(rèn)站點(diǎn)相關(guān)信息。最后單擊【完成】成功創(chuàng)建站點(diǎn)。此時(shí)，在【文件】面板中即可看見我們創(chuàng)建的站點(diǎn)“我的簡(jiǎn)歷”及其目錄結(jié)構(gòu)。

5.2 頁面屬性

設(shè)置頁面的屬性，有2種方法。一種是“屬性面板”，可以設(shè)置具體的對(duì)象屬性，如：一段文字的格式、圖片的大小、具體的超級(jí)鏈接等。一種是“頁面屬性”，就是設(shè)置頁面的整體屬性，包括字體大小、背景顏色、標(biāo)題等。

方法一：屬性面板

方法二：頁面屬性

在對(duì)話框左側(cè)【分類】列表中選擇【外觀】選項(xiàng)，相應(yīng)的參數(shù)設(shè)置就會(huì)顯示在右側(cè)區(qū)域。在該對(duì)話框中可設(shè)置網(wǎng)頁中的文本字體樣式、文字大小、文字顏色、頁面背景顏色、頁面背景圖像以及邊距等。

在對(duì)話框左側(cè)【分類】列表中選擇【鏈接】選項(xiàng)，相應(yīng)的參數(shù)設(shè)置就會(huì)顯示在右側(cè)區(qū)域。在該對(duì)話框中可以設(shè)置頁面的鏈接字體、大小、鏈接顏色、變換圖像鏈接、已訪問鏈接、活動(dòng)鏈接和下劃線樣式。

在對(duì)話框左側(cè)【分類】列表中選擇【標(biāo)題/編碼】選項(xiàng)，相應(yīng)的參數(shù)設(shè)置就會(huì)顯示在右側(cè)區(qū)域。在該對(duì)話框中可以設(shè)置頁面的文檔標(biāo)題、文檔類型和編碼類型。

5.3布局網(wǎng)頁

在制作網(wǎng)頁之前應(yīng)該用紙筆或者直接在word文檔中設(shè)計(jì)出網(wǎng)頁的布局草圖，在草圖中標(biāo)明網(wǎng)頁中各種元素的位置。這一步不是必須的，但是，設(shè)計(jì)好布局草圖可以避免后續(xù)步驟中調(diào)整網(wǎng)頁布局造成的麻煩。

5.3.1布局模式

布局網(wǎng)頁的方法很多，用表格、層、框架都可以布局網(wǎng)頁。我們這里只介紹最規(guī)范的一種方法，即布局模式。

在“插入”欄的“布局”選項(xiàng)卡中含有“標(biāo)準(zhǔn)”、“擴(kuò)展”和“布局”3種布局模式，如下圖所示。單擊“布局”按鈕可以將文檔窗口切換到布局模式。

布局模式下有“布局表格”和“布局單元格”兩個(gè)布局工具?？梢栽谝粋€(gè)布局表格中使用多個(gè)布局單元格對(duì)網(wǎng)頁進(jìn)行布局，這是進(jìn)行網(wǎng)頁布局最常用的方法。也可以使用多個(gè)單獨(dú)的布局表格進(jìn)行不規(guī)則的、更復(fù)雜的布局。

5.3.2布局步驟與實(shí)例 1.畫布局表格

單擊【布局表格】按鈕，鼠標(biāo)變成十字形，在文檔編輯區(qū)左上方按住鼠標(biāo)不放，先拖開一個(gè)大小隨意的矩形框，然后在編輯區(qū)下方的屬性面板的“寬”和“高”屬性中分別修改數(shù)值為983和700（像素）?？梢酝ㄟ^設(shè)置“背景顏色”，來預(yù)覽一下外觀。

2.畫布局單元格

根據(jù)草圖中所有頁面元素的位置以及占用頁面大小，按照從上到下、從左到右的基本原則，逐一繪制布局單元格。單擊【布局單元格】按鈕，鼠標(biāo)變成十字形，在布局表格左上方按住鼠標(biāo)不放，拖開一個(gè)矩形框，拖動(dòng)到“200×160”時(shí)，放開鼠標(biāo)即可，如下圖所示。雖然布局單元格也可以先隨意繪制，再通過屬性面板調(diào)整，但相鄰的單元格在調(diào)整大小的時(shí)候如果操作不當(dāng)可能會(huì)互相影響，需小心操作。

3.設(shè)置表格邊框

由于在布局視圖下是不能設(shè)置表格邊框的，所以先退出布局視圖，進(jìn)入標(biāo)準(zhǔn)視圖。在文檔編輯區(qū)左下方的【標(biāo)簽選擇器】上單擊

標(biāo)簽即可選中相應(yīng)的表格，然后在【屬性檢查器】中修改【邊框】值為1。4.添加網(wǎng)頁元素（1）添加文本

在頁面上添加文本，只需將光標(biāo)置于需要添加文本的單元格中，然后直接輸入文字。（2）添加水平線

水平線有很多妙用，插入水平線可使文檔結(jié)構(gòu)清晰，層次分明，便于瀏覽。將光標(biāo)置于需要插入水平線的位置。切換到“插入”欄的【HTML】選項(xiàng)卡，單擊【水平線】按鈕，即可插入水平線。根據(jù)需要，在“屬性”檢查器中修改各個(gè)屬性值即可。如果要修改水平線的顏色，只要選中水平線，切換到“拆分窗口”，進(jìn)行如下修改：

只有通過預(yù)覽頁面，才能見到水平線的修改效果。（3）插入圖像 5.4層，行為，特效

5.4.1利用層作下拉菜單 1.層介紹

層是一種非常靈活的頁面元素，大小和位置可以隨意設(shè)置，可在層上面插入文本和圖像等。

2.設(shè)置行為

下拉菜單的行為要設(shè)置3種對(duì)象的行為。

第一：菜單“我的日志”的行為。選中“我的日志”這段文字，打開“行為”面板，設(shè)置“顯示－隱藏層”行為。

第二：層的行為。選中層的“井”字形標(biāo)簽，設(shè)置“顯示－隱藏層”行為。效果如以上2圖。

第三：標(biāo)簽。在“標(biāo)簽選擇器”上選中，然后打開“行為”面板，設(shè)置“顯示－隱藏層”行為。5.4.2 特效

在網(wǎng)絡(luò)上搜索“網(wǎng)頁特效”，可以得到許多用腳本語言書寫好的代碼。有些代碼很實(shí)用，可以為頁面增色。比如下面的這段取自特效錦集網(wǎng)站（http://code.helpor.net/time.php）的時(shí)間特效代碼。

可按如下步驟將上述特效代碼插入自己的網(wǎng)頁中：

首先復(fù)制特效代碼，然后將光標(biāo)置于需插入時(shí)間特效的單元格中，單擊“文檔”工具欄上的【代碼】按鈕，這時(shí)在【代碼】視圖中出現(xiàn)的插入點(diǎn)的位置處粘貼特效代碼；最后按F12鍵預(yù)覽網(wǎng)頁就可以看到這個(gè)時(shí)間特效了。效果如下圖：

5.4.3 滾動(dòng)公告欄效果如下圖：

制作方法：

要用到標(biāo)簽，而且必須寫在

內(nèi)部。如下圖：

在中間寫入文字后，形成類似效果歡迎光臨！后，在屬性面板上設(shè)置一下文字屬性后，把鼠標(biāo)定位在上，調(diào)出“標(biāo)簽檢查器”面板，設(shè)置的屬性，如下圖：
按F12預(yù)覽，就可見效果。
5.5使用CSS樣式表
CSS也叫層疊樣式表，使用 CSS 能夠以 HTML 無法提供的方式來設(shè)置文本格式和定位文本，從而能更加靈活自如地控制頁面的外觀。單擊【窗口】菜單，選擇【CSS樣式】可以在Dreamwaver 8右側(cè)面板組的最上方展開【CSS樣式面板】。對(duì)CSS樣式的新建、編輯以及刪除等操作都可以在這個(gè)面板中進(jìn)行。
1．創(chuàng)建自定義CSS規(guī)則
新建自定義CSS規(guī)則的方法如下：
（1）在站點(diǎn)目錄下新建一個(gè)文件夾（如：CSS），用以存放本章中所創(chuàng)建的CSS文件。（2）單擊【CSS樣式面板】右下方的按鈕，打開如圖5.5.1所示的“新建CSS規(guī)則”對(duì)話框。
（3）選擇【類（可應(yīng)用于任何標(biāo)簽）】，在【名稱】文本框中為新定義的CSS規(guī)則命名，命名必須以字符“.”開頭，如“.style1”。
（4）如果希望該CSS規(guī)則只應(yīng)用于當(dāng)前的網(wǎng)頁，則選擇【僅對(duì)該文檔】；如果希望該CSS規(guī)則可以在其他頁面中被引用，則在下拉列表中選取一個(gè)已經(jīng)存在的外部CSS文件，如果之前沒有定義任何外部CSS文件，則選擇【新建樣式表文件】。
圖5.5.1 “新建CSS規(guī)則”對(duì)話框
（5）選擇了【新建樣式表文件】后，單擊【確定】按鈕將CSS文件以“border”為文件名保存在前面新建的CSS文件夾中。
（6）單擊【保存】按扭后，將打開如圖5.5.2所示的“CSS規(guī)則定義”對(duì)話框，這里先不做任何設(shè)置，單擊【確定】按鈕關(guān)閉對(duì)話框。此時(shí)，在【CSS樣式面板】中將會(huì)顯示新創(chuàng)建的CSS文件“border.css”以及文件中包含的CSS規(guī)則“.style1”。
圖5.5.2 “CSS規(guī)則定義”對(duì)話框
2．設(shè)置CSS樣式格式
從圖5.5.2可以看出CSS樣式的屬性可分為8大類：類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展。下面介紹幾個(gè)常用屬性的設(shè)置。
（1）類型：該屬性定義網(wǎng)頁中文本字體、顏色以及字體風(fēng)格等樣式。
（2）背景：該屬性定義背景元素的高級(jí)設(shè)置，包括背景圖像及其水平或垂直方向的位置等。
（3）區(qū)塊：該屬性定義文本的高級(jí)設(shè)置，包括單詞間距、字母間距、文本縮進(jìn)和空格等。
（4）方框：該屬性定義塊元素的高級(jí)設(shè)置，包括填充和邊界。在設(shè)置填充時(shí)，如果選中【全部相同】，則只需設(shè)置【上】的數(shù)值和單位即可。
（5）邊框：該屬性定義表格邊框的高級(jí)設(shè)置，包括設(shè)置邊框線樣式、邊框線的粗細(xì)程度和顏色等。
（6）列表：該屬性定義列表項(xiàng)目符號(hào)的高級(jí)設(shè)置，包括項(xiàng)目符號(hào)的類型、項(xiàng)目符號(hào)圖像和位置等。
（7）定位：該屬性定義元素大小、位置和形狀的高級(jí)設(shè)置。
（8）擴(kuò)展：該屬性定義鼠標(biāo)指針在對(duì)象上移動(dòng)時(shí)采用何種光標(biāo)形狀和對(duì)象上所應(yīng)用的濾鏡效果等。
3．CSS應(yīng)用
上一節(jié)遺留了兩個(gè)問題，即表格邊框設(shè)置和長(zhǎng)文本行距調(diào)整。我們就以它們?yōu)槔?，介紹一下CSS的設(shè)置、修改和應(yīng)用。
（1）表格邊框的設(shè)置
利用CSS來設(shè)置表格邊框的過程如下：
① 雙擊【CSS樣式面板】中未完成的CSS規(guī)則“.style1”，重新打開“CSS規(guī)則定義”對(duì)話框。在左側(cè)的【分類】列表框中選擇【邊框】，如圖5.5.3所示。
② 分別設(shè)置左右邊框線為“實(shí)線”、下邊框線為“虛線”，粗細(xì)均為1像素，顏色均為“#999999”的灰色。最后單擊【確定】關(guān)閉對(duì)話框。
③ 將光標(biāo)置于“1.程序員”單元格中，單擊【標(biāo)簽選擇器】上的

標(biāo)簽，選中該單元格。

④ 鼠標(biāo)移動(dòng)到【CSS樣式面板】上，右擊“.style1”規(guī)則，在彈出的快捷菜單中選擇【套用】。⑤ 重復(fù)③和④中的操作，逐一將“.style1”規(guī)則應(yīng)用到接下來的幾個(gè)單元格中去。⑥ 保存并預(yù)覽，其效果如圖5.5.4所示。

圖5.5.3 表格邊框設(shè)置

圖5.5.4效果預(yù)覽

注意：在Dreamwaver 8中，上一個(gè)單元格的下邊框和下一個(gè)單元格的上邊框的屬性值效果是可以疊加的。對(duì)于相鄰的兩個(gè)單元格，在設(shè)置邊框的時(shí)候需要考慮到這點(diǎn)。

（2）長(zhǎng)文本行距、縮進(jìn)調(diào)整的設(shè)置步驟如下：

① 在【CSS樣式面板】右擊“border.css”，選擇【新建】創(chuàng)建一個(gè)新的CSS規(guī)則，命名為“.style5”。

② 雙擊“.style5”，打開“CSS規(guī)則定義”對(duì)話框。③ 分別設(shè)置以下參數(shù)：

·在【分類】列表框中選擇【類型】，設(shè)置【行高】為25像素； ·在【分類】列表框中選擇【區(qū)塊】，設(shè)置【文字縮進(jìn)】為30像素； ·在【分類】列表框中選擇【方框】，設(shè)置【邊界】左、右各10像素。④ 單擊【確定】關(guān)閉“CSS規(guī)則定義”對(duì)話框。

⑤ 選中圖11.21中的“自薦信”下方單元格中的兩段長(zhǎng)文本。

⑥ 鼠標(biāo)移動(dòng)到【CSS樣式面板】上，右擊“.style5”規(guī)則，在打開的快捷菜單中選擇【套用】。

⑦ 保存并預(yù)覽，其效果如圖5.5.5所示。

圖5.5.5 長(zhǎng)文本行距調(diào)整效果預(yù)覽

5.6使用模板

模板，它能幫助我們快速定制網(wǎng)頁的風(fēng)格，并由模板生成其他頁面，從而避免了許多重復(fù)性的工作。制作模板與制作其他頁面基本相同，只是模板不需要把頁面的所有內(nèi)容都完成，而只要把導(dǎo)航條、標(biāo)題欄等各個(gè)頁面相同的部分制作出來就可以了，其他部分則由模板生成具體頁面時(shí)再設(shè)置。

1．創(chuàng)建模板

模板的后綴名是.dwt，保存模板時(shí)Dreamwaver 8會(huì)在站點(diǎn)目錄下自動(dòng)生成一個(gè)名為“Templates”的文件夾，用以保存模板文件。生成模板的步驟如下：

（1）按照制作普通網(wǎng)頁的方法，制作一個(gè)頁面。（2）將該頁面另存為模板，如果彈出警示對(duì)話框詢問【要更新鏈接嗎？】時(shí)，單擊“是”。這時(shí)在站點(diǎn)目錄下將出現(xiàn)一個(gè)名為Templates的文件夾，且包含了一個(gè)名為“filemod.dwt”的模板文件。

2．創(chuàng)建可編輯區(qū)

模板創(chuàng)建后還不能夠直接使用，要先進(jìn)行模板的編輯，主要是創(chuàng)建可編輯區(qū)。通過模板生成的新網(wǎng)頁，只能更改可編輯區(qū)的內(nèi)容，其余部分總是與模板中的相應(yīng)部分完全一樣。

創(chuàng)建可編輯區(qū)的步驟如下：

（1）打開模板文件，選擇一個(gè)希望在生成頁面中可被編輯的元素。

（2）切換到“插入”欄的【常用】選項(xiàng)卡，單擊【模板】按鈕，選擇【可編輯區(qū)域】，如圖5.6.1所示。

圖5.6.1 【可編輯區(qū)域】按鈕

（3）在打開的如圖5.6.2所示的“新建可編輯區(qū)域”對(duì)話框中輸入可編輯區(qū)域的名稱，最后單擊【確定】按鈕。

圖5.6.2 命名可編輯區(qū)

（4）重復(fù)上述過程逐一創(chuàng)建并命名模板中的可編輯區(qū)域，最后保存并關(guān)閉模板文件。最終生成的模板文件如圖5.6.3所示，圖中的“Edit Region1”、“Edit Region2”等就是可編輯區(qū)。

圖5.6.3 生成的模板文件及可編輯區(qū)

3．應(yīng)用模板創(chuàng)建網(wǎng)頁

基于模板創(chuàng)建網(wǎng)頁的操作步驟如下：（1）單擊【文件】菜單，選擇【新建】，打開如圖5.6.4所示的“新建文檔”對(duì)話框。（2）切換到【模板】選項(xiàng)卡，在【模板用于】列表中選擇“我的簡(jiǎn)歷”站點(diǎn)，并選擇站點(diǎn)模板“filemod”。

圖5.6.4 “從模板新建”對(duì)話框

（3）單擊【創(chuàng)建】按鈕即可生成一個(gè)新頁面。

通過模板創(chuàng)建的頁面在文檔編輯區(qū)的四周為淡黃色，且其右上角顯示“模板：filemod”字樣。鼠標(biāo)移動(dòng)至非可編輯區(qū)域時(shí)呈鎖定狀態(tài)，既不可選取也不可單擊。

4．更新模板

不管從模板生成多少網(wǎng)頁，這些網(wǎng)頁在可編輯區(qū)域中可隨意添加、編輯、刪除頁面元素。但是它們的共同部分——不可編輯區(qū)域，卻嚴(yán)格遵守模板的統(tǒng)一設(shè)計(jì)。反過來，如果模板改變了，那么通過模板創(chuàng)建的各個(gè)頁面也可以實(shí)現(xiàn)同步更新。

對(duì)模板的修改，只需打開模板文件，按照普通頁面那樣隨意修改。修改后保存模板時(shí)Dreamwaver 8自動(dòng)打開如圖5.6.5所示的“更新模板文件”對(duì)話框，提示是否更新站點(diǎn)中所有基于此模板的頁面。選擇“更新”將更新所示基于此模板的頁面；選擇“不更新”則所有頁面仍將基于原始模板。

圖5.6.5 “更新模板文件”對(duì)話框

第二篇：《網(wǎng)頁制作》教學(xué)大綱簡(jiǎn)易教案

《網(wǎng)頁制作》教學(xué)大綱簡(jiǎn)易教案

網(wǎng)站開發(fā)流程

?規(guī)劃確定建設(shè)網(wǎng)站的目標(biāo)；分析目標(biāo)用戶及潛在用戶對(duì)站點(diǎn)的需求； 3 確定網(wǎng)站風(fēng)格； 4 考慮網(wǎng)絡(luò)的技術(shù)問題。

?設(shè)計(jì) 頁面布局； 2 網(wǎng)頁中的顏色；文字、圖像、動(dòng)畫以及多媒體的使用。

?制作測(cè)試與發(fā)布維護(hù) ??

第一章站點(diǎn)管理

站點(diǎn)：一系列文件的組合，通過各種鏈接關(guān)聯(lián)起來，實(shí)現(xiàn)對(duì)整個(gè)站點(diǎn)的瀏覽。

設(shè)置站點(diǎn)信息

一，基本思路：

1，對(duì)站點(diǎn)進(jìn)行規(guī)劃 2，創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)

站點(diǎn)結(jié)構(gòu)的顯示方式：目錄結(jié)構(gòu)和站點(diǎn)地圖 3，組織文件和資料開始制作二，定義站點(diǎn)：

步驟：站點(diǎn)－新建站點(diǎn)－對(duì)站點(diǎn)進(jìn)行定義

三，新建網(wǎng)頁（站點(diǎn)中所包含的所有網(wǎng)頁文件）和文件夾（用來存放網(wǎng)頁中的圖片、聲音、Flash等）

四，設(shè)置站點(diǎn)地圖布局

第二章文字、圖片和超鏈接

網(wǎng)頁中最多的就是文字，并伴有精美的圖片來美化網(wǎng)頁，本章主要闡述如何使用菜單、插入面板在文檔中插入這些對(duì)象以及使用屬性面板編輯這些對(duì)象的屬性。

一，設(shè)置頁面屬性（Ctrl+J，也可在屬性面板中找到）：

在頁面屬性中分別對(duì)外觀、鏈接和標(biāo)題進(jìn)行設(shè)置二，文字

可在屬性面板中對(duì)文字的樣式、大小等進(jìn)行設(shè)置。三，插入圖像

方法1，插入－圖像；方法2，常用－圖像；方法3，Ctrl+Alt+I。四，設(shè)置超鏈接

1，頁面鏈接

2，郵件鏈接（mailto:）

3，書簽鏈接（對(duì)同一網(wǎng)頁的不同部分進(jìn)行鏈接）4，空鏈接（＃）

第三章表格和層的應(yīng)用

一，設(shè)置網(wǎng)頁布局和處理表格

網(wǎng)頁布局：給將要出現(xiàn)在網(wǎng)頁中的所有元素進(jìn)行定位。繪制布局表格和布局單元格：

方法：布局－切換到布局視圖－點(diǎn)擊布局表格or布局單元格按鈕－拖動(dòng)創(chuàng)建－在屬性面板設(shè)置屬性。

注意：布局表格和布局單元格之間不能相互重疊。

表格：表格是在網(wǎng)頁中放置行列數(shù)據(jù)和圖像的最佳工具。插入表格：常用－表格－設(shè)置行，列數(shù)－插入

拆分，合并單元格：選中要拆分或要合并單元格－屬性面板中進(jìn)行操作設(shè)置表格和單元格的屬性：屬性面板中進(jìn)行操作。

二，添加層

層是一種頁面元素定位技術(shù)，它能夠?qū)又械膬?nèi)容在瀏覽器窗口中任意定位。層是一個(gè)載體，在層中可以添加文本，圖像和表格等元素。方法：布局－點(diǎn)擊層按鈕－拖動(dòng)創(chuàng)建－在屬性面板設(shè)置層屬性。

第四章模板

所謂“模板”是指具有一定共性的文檔樣板。

模板用于創(chuàng)建多個(gè)具有一致風(fēng)格的網(wǎng)頁，用戶可根據(jù)模板生成大量相同的頁面。新建網(wǎng)頁模板（.dwt）

1,將已有文檔另存為模板：步驟：打開已有文檔；

文件－另存為模板；

在出現(xiàn)的對(duì)話框中選擇站點(diǎn)，給模板命名；保存。

2，新建空白模板

步驟：窗口－資源（F11）；

模板－新建模板；輸入模板名－編輯。

定義模板的可編輯區(qū)域

模板包括：1，可編輯區(qū)域（具有可變內(nèi)容）

2，鎖定區(qū)域（具有靜態(tài)不變內(nèi)容）默認(rèn) 1，將已有內(nèi)容定義為可編輯區(qū)域：

步驟：選擇要定義為可編輯區(qū)域的文本或內(nèi)容；

插入－模板對(duì)象－可編輯區(qū)域；輸入?yún)^(qū)域名；確定。

2，定義新的可編輯區(qū)域：步驟：定位光標(biāo)；

同上。

取消區(qū)域標(biāo)記：

步驟：打開已有模板；

選中已有可編輯區(qū)域，修改－模板－刪除模板標(biāo)記。

注意：刪除模板標(biāo)記之后的區(qū)域?qū)⒈绘i定。

基于模板生成新網(wǎng)頁

方法1：文件－新建，選擇模板標(biāo)簽，選一個(gè)模板－創(chuàng)建。方法2：新建一個(gè)文檔，修改－模板－應(yīng)用模板到頁。

方法3：新建一個(gè)文檔，窗口－資源－模板，將所需模板直接拖動(dòng)到新文檔中。

第三篇：網(wǎng)頁制作教案

網(wǎng)頁制作與設(shè)計(jì)教案

第一講網(wǎng)頁設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁的基本方法............................................................................................................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)頁設(shè)計(jì).............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(tài)網(wǎng)頁設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語言簡(jiǎn)介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環(huán)語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20

第一講網(wǎng)頁設(shè)計(jì)概述

【教學(xué)內(nèi)容】

講解網(wǎng)頁設(shè)計(jì)的相關(guān)術(shù)語及網(wǎng)站制作的基本流程。【教學(xué)目的】

使學(xué)生對(duì)網(wǎng)站及網(wǎng)頁有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的興趣?！窘虒W(xué)重點(diǎn)】

網(wǎng)頁設(shè)計(jì)中的若干術(shù)語?！窘虒W(xué)難點(diǎn)】

理解網(wǎng)頁設(shè)計(jì)中的若干術(shù)語?！窘虒W(xué)方式】

講授式、討論式、案例分析式?！窘虒W(xué)參考】

1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森曲宏山賈文峰等著電子工業(yè)出版社。

2、《Internet 網(wǎng)頁工場(chǎng)》Wittime工作室重慶出版社。

3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著高等教育出版社。

4、《HTML網(wǎng)頁制作教程》材義語編著鐵道出版社?！拘抡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)志的使用?！窘虒W(xué)方式】

討論式、案例分析式、練習(xí)式?！窘虒W(xué)參考】

1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森曲宏山賈文峰等著電子工業(yè)出版社。

2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著高等教育出版社。

3、《HTML網(wǎng)頁制作教程》材義語編著鐵道出版社?！拘抡n內(nèi)容】

2.1 HTML文檔的基本結(jié)構(gòu)

2.1.1 HTML語法

1、雙標(biāo)記

語法：

<標(biāo)記>內(nèi)容

2、單標(biāo)記語法：<標(biāo)記> 最常用的單標(biāo)記是

3、標(biāo)記屬性語法

<標(biāo)記

屬性1 屬性2 屬性3 … > 例子

4、注釋語句格式

例子

2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】

通過本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用列表,有序列表,無序列表標(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、無序列表

列表?xiàng)l目1
列表?xiàng)l目2......

2、有序列表

列表?xiàng)l目1
列表?xiàng)l目2......

3、定義列表

列表?xiàng)l目1: 條目1的說明
列表?xiàng)l目2: 條目2的說明 ……

...... 2.4.4 圖像地圖【課后小結(jié)】

本節(jié)介紹了在網(wǎng)頁中加入文本、圖片和超級(jí)鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁的基礎(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)頁設(shè)計(jì)與制作》楊尚森曲宏山賈文峰等著電子工業(yè)出版社。

2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著高等教育出版社。

3、《HTML網(wǎng)頁制作教程》材義語編著鐵道出版社?！拘抡n內(nèi)容】

2.5 插入表格

2.5.1 在網(wǎng)頁中插入表格

表格的基本構(gòu)成元素：表頭，單元格，列，行

FrameSpacing=“2“

BorderColor=”#008000“ >

2.7.3 子窗口屬性設(shè)置

2.7.4 常見的框架窗口劃分方法（1）標(biāo)題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分

（3）目錄和標(biāo)題，分為左上、左下、右三部分

（4）標(biāo)題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁


第一行第一列	第一行第二列
第二行第一列	第二行第二列

欧美色欧美亚洲高清在线观看,国产特黄特色a级在线视频,国产一区视频一区欧美,亚洲成a 人在线观看中文

《網(wǎng)頁制作》公共課簡(jiǎn)易教案

第一篇：《網(wǎng)頁制作》公共課簡(jiǎn)易教案

第二篇：《網(wǎng)頁制作》教學(xué)大綱簡(jiǎn)易教案

第三篇：網(wǎng)頁制作教案