網(wǎng)站建設(shè)與管理 教案

網(wǎng)站建設(shè)與管理授課方案（教案）

課程：網(wǎng)站設(shè)計開發(fā)教師：

班級：編寫時間：

課題：中小型網(wǎng)站創(chuàng)建概述

教學(xué)目的及要求：

了解網(wǎng)站建設(shè)的目的，了解本學(xué)期本課程考核要求：掌握建設(shè)流程和網(wǎng)站的策劃。

教學(xué)重點(diǎn)：網(wǎng)站的規(guī)劃

教學(xué)難點(diǎn)：網(wǎng)站的有效規(guī)劃

教學(xué)步驟及內(nèi)容：

一、回顧自己了解的網(wǎng)站類型

二、學(xué)習(xí)新課

1.1網(wǎng)站建設(shè)的目的

企業(yè)的主頁是企業(yè)在Internet上展示形象的門戶，是企業(yè)開展電子交易的

基地，是企業(yè)網(wǎng)上的“家"，設(shè)計制作一個優(yōu)秀的網(wǎng)站是建站企業(yè)成功邁向

互聯(lián)網(wǎng)的重要步驟。

1.2有效的網(wǎng)站規(guī)劃

知道了網(wǎng)站的用途后，我們即可進(jìn)行網(wǎng)站內(nèi)容的規(guī)劃，在規(guī)劃之前有一個

概念很重要，為誰而戰(zhàn)，為何而戰(zhàn)，很多網(wǎng)站這一點(diǎn)都做的不是很好，以

下便舉一個例子作為介紹。

我們下面將以一個銷售音響的公司作為介紹。

大部分的網(wǎng)站，在首頁的主要鏈接項目如下：

公司簡介最新消息經(jīng)營理念產(chǎn)品介紹聯(lián)絡(luò)我們回首頁

1.3網(wǎng)站建設(shè)的方案

1、自己公司建設(shè)

一般非網(wǎng)站建設(shè)公司想要建設(shè)一套可發(fā)揮網(wǎng)絡(luò)行銷效果的網(wǎng)站，其實成本

是相當(dāng)高的。

2、購買套餐軟件建設(shè)

3、外包專業(yè)網(wǎng)絡(luò)公司建設(shè)

1.4關(guān)于動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的區(qū)別

所謂靜態(tài)網(wǎng)頁就是指沒有后臺數(shù)據(jù)庫、不含程序和不可交互的網(wǎng)頁。你編

的是什么它顯示的就是什么、不會有任何改變。靜態(tài)網(wǎng)頁相對更新起來比

較麻煩,適用于一般更新較少的展示型網(wǎng)站。反之不符合靜態(tài)網(wǎng)頁概念的就

屬于動態(tài)網(wǎng)頁。

靜態(tài)網(wǎng)頁使用語言（超文本標(biāo)記語言）在網(wǎng)站設(shè)計中，一般的靜

態(tài)網(wǎng)頁網(wǎng)址都是以.htm、.html、.shtml、.xml等為后后綴的，但是，并不

是說靜態(tài)網(wǎng)頁就沒有動態(tài)的效果,有的靜態(tài)網(wǎng)頁也會有動態(tài)效果,如.GIF格

式的動畫、FLASH,滾動字母等,動態(tài)網(wǎng)頁使用語言:HTML+ASP或HTML+PHP

或HTML+JSP等。

區(qū)別靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁最重要的一點(diǎn)一一程序是否在服務(wù)器端運(yùn)

行。這是最重要標(biāo)志。

1.5網(wǎng)站的策劃書的編寫

根據(jù)每個網(wǎng)站的情況不同，網(wǎng)站策劃書也是不同的，但是最終都不要

離開主的框架，那么在網(wǎng)站建設(shè)前期，我們要進(jìn)行市場分析，然后總結(jié)一

下，形成書面報告，對網(wǎng)站建設(shè)和運(yùn)營進(jìn)行有計劃的指導(dǎo)和階段性總結(jié)都

有很好的效果。

網(wǎng)站策劃一般可以按照下面的思路來進(jìn)行整理，當(dāng)然特殊情況要特殊

對待：我們按照門戶網(wǎng)站、企業(yè)網(wǎng)站、個人網(wǎng)站的建設(shè)來分別進(jìn)行框架定

位。

網(wǎng)站策劃的大體思路如下：

1.5.1網(wǎng)站建設(shè)市場分析及網(wǎng)站的定位

我們把市場分析和網(wǎng)站的定位聯(lián)系起來放在第一章，是因為它們

之間有所聯(lián)系，我們要根據(jù)市場分析得來的情況對網(wǎng)站進(jìn)行定位和目標(biāo)調(diào)

整。與此同時，我們還要進(jìn)行網(wǎng)站服務(wù)對象分析。

1.5.2網(wǎng)站服務(wù)對象分析

第一梯隊服務(wù)對象：對我們網(wǎng)站具有很高依賴性，或者是我們網(wǎng)

站服務(wù)內(nèi)容主要面向的對象。比如汽車配件網(wǎng)站，它的第一梯隊服務(wù)對象

就是汽車配件供應(yīng)商，汽車配件采購商以及汽車配件貿(mào)易公司等等。

第二梯隊服務(wù)對象：對我們網(wǎng)站有興趣，或者是第一梯隊服務(wù)對

象替補(bǔ)（所以第一梯隊服務(wù)對象替補(bǔ)就是一些本來應(yīng)該是第一梯隊服務(wù)對旁批欄:

象的，但對網(wǎng)站不了解，對互聯(lián)網(wǎng)不認(rèn)同的一些企業(yè)或個人。它們隨時都

有可能成為第一梯隊服務(wù)對象），或者是和本行業(yè)互補(bǔ)的一些企業(yè)和個人。

第三梯隊服務(wù)對象：包括行業(yè)的研究者、學(xué)者、新聞媒體等等。

1.5.3網(wǎng)站的內(nèi)容建設(shè)

在對網(wǎng)站進(jìn)行市場分析調(diào)研和定位之后，我們要做的就是網(wǎng)站的

基礎(chǔ)設(shè)施建設(shè)了，它包括網(wǎng)站的前臺頁面設(shè)計制作和網(wǎng)站的后臺編程，在

網(wǎng)站全部做完之后還要進(jìn)行網(wǎng)站測試和上傳等工作。

1.網(wǎng)站設(shè)計

2.網(wǎng)站編程

1.5.4網(wǎng)站測試和上傳

網(wǎng)站的設(shè)計和編程全部做完之后，我們要對網(wǎng)站進(jìn)行測試和上傳。

首先我們應(yīng)該將網(wǎng)站上傳到網(wǎng)站空間，然后對網(wǎng)站進(jìn)行測試，同時也是對

網(wǎng)站空間進(jìn)行測試。一般來說，網(wǎng)站測試需要進(jìn)行的就是網(wǎng)站頁面的完整

程度，網(wǎng)站編程代碼的繁簡程度和完整性，網(wǎng)站空間的鏈接速度和網(wǎng)站空

間的加壓測試承受度。

1.5.5網(wǎng)站內(nèi)容添加

1.5.6網(wǎng)站的推廣

網(wǎng)站的推廣可是說是網(wǎng)站建設(shè)中尤為重要的一部分，推廣做的好

可以說網(wǎng)站建設(shè)就成功了一大半，那么怎么樣進(jìn)行推廣呢？推廣的方式有

哪些呢？讓我們來看一下：

1.免費(fèi)推廣方式

2.付費(fèi)推廣方式

三、小結(jié)重點(diǎn)我們介紹了網(wǎng)站策劃書的編寫

四、作業(yè)

自己做一個網(wǎng)站策劃書

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師:

班級:編寫時間:

課題:網(wǎng)站策劃書的寫法及應(yīng)用

教學(xué)目的及要求：

掌握網(wǎng)站策劃書的寫法

教學(xué)重點(diǎn)：

網(wǎng)站策劃書的寫法

教學(xué)難點(diǎn)：

網(wǎng)站策劃書的寫法及應(yīng)用

一、復(fù)習(xí)網(wǎng)站建立中用到的一些技術(shù)

二、學(xué)習(xí)新課網(wǎng)站的建設(shè)策劃

網(wǎng)站策劃的內(nèi)容

一、建設(shè)網(wǎng)站前的市場分析

1、相關(guān)行業(yè)的市場是怎樣的，市場有什么樣的特點(diǎn)，是否能夠在互聯(lián)

網(wǎng)上開展公司業(yè)務(wù)。

2、市場主要競爭者分析，競爭對手上網(wǎng)情況及其網(wǎng)站策劃、功能作用。

3、公司自身條件分析、公司概況、市場優(yōu)勢，可以利用網(wǎng)站提升哪些

競爭力，建設(shè)網(wǎng)站的能力（費(fèi)用、技術(shù)、人力等）。

二、建設(shè)網(wǎng)站目的及功能定位

1、為什么要建立網(wǎng)站，是為了樹立企業(yè)形象，宣傳產(chǎn)品，進(jìn)行電子商

務(wù)，還是建立行業(yè)性網(wǎng)站?是企業(yè)的基本需要還是市場開拓的延伸？

2、整合公司資源，確定網(wǎng)站功能。根據(jù)公司的需要和計劃，確定網(wǎng)站

的功能類型：

企業(yè)型網(wǎng)站、應(yīng)用型網(wǎng)站、商業(yè)型網(wǎng)站（行業(yè)型網(wǎng)站）、電子商務(wù)型網(wǎng)站；

企業(yè)網(wǎng)站又分為企業(yè)形象型、產(chǎn)品宣傳型、網(wǎng)上營銷型、客戶服務(wù)型、電子商務(wù)

型等。

3、根據(jù)網(wǎng)站功能，確定網(wǎng)站應(yīng)達(dá)到的目的作用。

4、企業(yè)內(nèi)部網(wǎng)（Intranet）的建設(shè)情況和網(wǎng)站的可擴(kuò)展性。

三、網(wǎng)站技術(shù)解決方案（與專業(yè)公司商議）

根據(jù)網(wǎng)站的功能確定網(wǎng)站技術(shù)解決方案。

1、采用自建服務(wù)器，還是租用虛擬主機(jī)。

2、選擇操作系統(tǒng)，用Window2003/NT還是Unix、Linux?分析投入成

本、功能、開發(fā)、穩(wěn)定性和安全性等。

3、采用模板自助建站、建站套餐還是個性化開發(fā)。

4、網(wǎng)站安全性措施，防黑、防病毒方案（如果采用虛擬主機(jī)，則該項由

專業(yè)公司代勞）。

5、選擇什么樣的動態(tài)程序及相應(yīng)數(shù)據(jù)庫。如程序ASP、JSP、PHP;數(shù)

據(jù)庫SQL、ACCESS、ORACLE等。

四、網(wǎng)站內(nèi)容及實現(xiàn)方式（與專業(yè)公司商議）

1、根據(jù)網(wǎng)站的目的確定網(wǎng)站的結(jié)構(gòu)導(dǎo)航。

一般企業(yè)型網(wǎng)站應(yīng)包括：公司簡介、企業(yè)動態(tài)、產(chǎn)品介紹、客戶服務(wù)、

聯(lián)系方式、在線留言等基本內(nèi)容。更多內(nèi)容如：常見問題、營銷網(wǎng)絡(luò)、招賢納士、

在線論壇、英文版等等。

2、根據(jù)網(wǎng)站的目的及內(nèi)容確定網(wǎng)站整合功能。

如FLASH引導(dǎo)頁、會員系統(tǒng)、網(wǎng)上購物系統(tǒng)、在線支付、問卷調(diào)查系

統(tǒng)、在線支付、信息搜索查詢系統(tǒng)、流量統(tǒng)計系統(tǒng)等。

3、確定網(wǎng)站的結(jié)構(gòu)導(dǎo)航中的每個頻道的子欄目。

如公司簡介中可以包括：總裁致詞、發(fā)展歷程、企業(yè)文化、核心優(yōu)勢、

生產(chǎn)基地、科技研發(fā)、合作伙伴、主要客戶、客戶評價等;客戶服務(wù)可以包括：

服務(wù)熱線、服務(wù)宗旨、服務(wù)項目等。

4、確定網(wǎng)站內(nèi)容的實現(xiàn)方式。

如產(chǎn)品中心使用動態(tài)程序數(shù)據(jù)庫還是靜態(tài)頁面;營銷網(wǎng)絡(luò)是采用列表方

式還是地圖展示。

五、網(wǎng)頁設(shè)計

1、網(wǎng)頁美術(shù)設(shè)計要求，網(wǎng)頁美術(shù)設(shè)計一般要與企業(yè)整體形象一致，要

符合企業(yè)CI規(guī)范。要注意網(wǎng)頁色彩、圖片的應(yīng)用及版面策劃，保持網(wǎng)頁的整體

一致性。

2、在新技術(shù)的采用上要考慮主要目標(biāo)訪問群體的分布地域、年齡階層、

網(wǎng)絡(luò)速度、閱讀習(xí)慣等。

3、制定網(wǎng)頁改版計劃，如半年到一年時間進(jìn)行較大規(guī)模改版等。

六、費(fèi)用預(yù)算

1、企業(yè)建站費(fèi)用的初步預(yù)算

一般根據(jù)企業(yè)的規(guī)模、建站的目的、上級的批準(zhǔn)而定。

2、專業(yè)建站公司提供詳細(xì)的功能描述及報價，企業(yè)進(jìn)行性價比研究。

3、網(wǎng)站的價格從幾千元到十幾萬元不等。網(wǎng)站建設(shè)的費(fèi)用一般與功能

要求是成正比的。

七、網(wǎng)站維護(hù)

1、服務(wù)器及相關(guān)軟硬件的維護(hù)，對可能出現(xiàn)的問題進(jìn)行評估，制定響

應(yīng)時間。

2、數(shù)據(jù)庫維護(hù)，有效地利用數(shù)據(jù)是網(wǎng)站維護(hù)的重要內(nèi)容，因此數(shù)據(jù)庫

的維護(hù)要受到重視。

3、內(nèi)容的更新、調(diào)整等。

4、制定相關(guān)網(wǎng)站維護(hù)的規(guī)定，將網(wǎng)站維護(hù)制度化、規(guī)范化。

5、說明：動態(tài)信息的維護(hù)通常由企業(yè)安排相應(yīng)人員進(jìn)行在線的更新管

理;靜態(tài)信息（即沒用動態(tài)程序數(shù)據(jù)庫支持）可由專業(yè)公司進(jìn)行維護(hù)。

八、網(wǎng)站測試

網(wǎng)站發(fā)布前要進(jìn)行細(xì)致周密的測試，以保證正常瀏覽和使用。主要測試

內(nèi)容：

1、文字、圖片是否有錯誤。

2、程序及數(shù)據(jù)庫測試。

3、鏈接是否有錯誤。

九、網(wǎng)站發(fā)布與推廣

以上為網(wǎng)站策劃中的主要內(nèi)容，根據(jù)不同的需求和建站目的，內(nèi)容也會

在增加或減少。在建設(shè)網(wǎng)站之初一定要進(jìn)行細(xì)致的策劃，才能達(dá)到預(yù)期建站目的。

老師講解并舉例分析：見上課的補(bǔ)充材料

1.紹興團(tuán)購網(wǎng)商業(yè)計劃書

2.網(wǎng)站策劃書參考模板

3.購物網(wǎng)站規(guī)劃書

三、學(xué)生練習(xí)，學(xué)生課后根據(jù)自己選擇的主題進(jìn)行網(wǎng)站策劃

四、作業(yè)。完成網(wǎng)站策劃

網(wǎng)站建設(shè)與管理授課方案(教案)

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：編寫時間：

課題:1.6-1.8節(jié)網(wǎng)站設(shè)計原則、色彩、布局

教學(xué)目的及要求：

掌握網(wǎng)站布局的設(shè)計方法

教學(xué)重點(diǎn)：

網(wǎng)站布局

教學(xué)難點(diǎn)：

網(wǎng)站布局

一、復(fù)習(xí)網(wǎng)站策劃

二、學(xué)習(xí)新課

1網(wǎng)站設(shè)計原則

1.明確建立網(wǎng)站的目標(biāo)和用戶需求。根據(jù)消費(fèi)者的需求、市場的狀況、企

業(yè)自身的情況等進(jìn)行綜合分析，以“消費(fèi)者(customer)”為中心，而不是以“美

術(shù)”為中心進(jìn)行設(shè)計規(guī)劃。明確設(shè)計站點(diǎn)的目的和用戶需求，從而做出切實可行

的設(shè)計計劃。

2.網(wǎng)頁設(shè)計主題鮮明。在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總

體設(shè)計方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。

3.版式設(shè)計之整體性。即設(shè)計作品各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和表

現(xiàn)形式上的相互呼應(yīng).并注意整個頁面設(shè)計風(fēng)格統(tǒng)一、色彩統(tǒng)一、布局統(tǒng)一，即

形成網(wǎng)站高度的形象統(tǒng)一。使整個頁面設(shè)計的各個部分極為融洽。

4.版式設(shè)計之分割性。即按照內(nèi)容、主題和信息的分類要求，將頁面分

成若干板塊、欄目，使瀏覽者一目了然。吸引瀏覽者的眼球，還能通過網(wǎng)頁達(dá)到

信息宣傳的目的，顯示出鮮明的信息傳達(dá)效果。

5.版式設(shè)計之對比性。在設(shè)計過程中，通過多與少、主與次、黑與白、

動與靜、聚與散等對比手法的運(yùn)用，使網(wǎng)頁主題更加突出鮮明而富有生氣.

6.網(wǎng)頁設(shè)計的和諧性。網(wǎng)頁布局應(yīng)該符合人類審美的基本原則，渾然一

體。如果僅僅是色彩、形狀、線條等的隨意混合，那么設(shè)計出來的作品不但沒有

生氣、靈感，甚至連最基本的視覺設(shè)計和信息傳達(dá)功能也無法實現(xiàn)。如果選擇了

與主頁內(nèi)容不和諧的色調(diào)，就會傳遞錯誤的信息，造成混亂。

7.導(dǎo)向清晰。網(wǎng)頁設(shè)計中導(dǎo)航使用超文本鏈接或圖片鏈接，使人們能夠

在您的網(wǎng)站上自由前進(jìn)或后退，而不會讓他們使用瀏覽器上的前進(jìn)或后退。我們

在所有的圖片上使用“ALT”標(biāo)識符注明圖片名稱或解釋，以便那些不愿意自動

加載圖片的觀眾能夠了解圖片的含義。

8.非圖形的內(nèi)容。由于在互聯(lián)網(wǎng)瀏覽的大多是一些尋找信息的人們，我

們?nèi)匀唤ㄗh您要確定您的網(wǎng)站將為他們提供的是有價值的內(nèi)容，而不是過度的裝

飾。

1.7網(wǎng)站頁面色彩的規(guī)劃

一般情況下要注意以下幾點(diǎn)，1、忌諱使用強(qiáng)烈對比的顏色搭配做主色;2、

配色簡潔，主色要盡量控制在三種以內(nèi);3、背景和內(nèi)容的對比要明顯，少用花紋

復(fù)雜的背景圖片，以便突出顯示文字內(nèi)容。

1.8合理的網(wǎng)站欄目結(jié)構(gòu)布局

合理的網(wǎng)站欄目結(jié)構(gòu)主要表現(xiàn)在下面幾個方面：

?通過主頁可以到達(dá)任何一個一級欄目首頁、二級欄目首頁以及最終內(nèi)

容頁面；

?通過任何一個網(wǎng)頁可以返回上一級欄目頁面并逐級返回主頁；

?主欄目清晰并且全站統(tǒng)一；

?通過任何一個網(wǎng)頁可以進(jìn)入任何一個一級欄目首頁。

不同主題的網(wǎng)站對網(wǎng)頁內(nèi)容的安排會有所不同，但大多數(shù)網(wǎng)站首頁的頁

面結(jié)構(gòu)都會包括頁面標(biāo)題、網(wǎng)站LOGO、導(dǎo)航欄、登錄區(qū)、搜索區(qū)、熱點(diǎn)推薦

區(qū)、主內(nèi)容區(qū)和頁腳區(qū)，其他頁面不需要設(shè)置如此復(fù)雜了，一般由頁面標(biāo)題、網(wǎng)

站LOGO、導(dǎo)航欄、主內(nèi)容區(qū)和頁腳區(qū)等構(gòu)成。

網(wǎng)頁布局方法介紹

1.紙上布局法

2.軟件布局法

1.8.3網(wǎng)頁布局的技術(shù)

1.層疊樣式表的應(yīng)用

2.表格布局

3.框架布局

1.8.4網(wǎng)頁布局的基本類型

網(wǎng)頁布局只能在左右對稱結(jié)構(gòu)布局、“同”字型結(jié)構(gòu)布局、"回”字型結(jié)構(gòu)

布局、"匡”字型結(jié)構(gòu)布局、“廠”字型結(jié)構(gòu)布局、自由式結(jié)構(gòu)布局、“另類”結(jié)構(gòu)布

局等幾種布局的基本結(jié)構(gòu)中選擇。

圖片參見教材。

1.8.5網(wǎng)站首頁布局設(shè)計

網(wǎng)站首頁是網(wǎng)站給用戶的第一印象，首頁頁面布局需從主題、導(dǎo)航、內(nèi)

容等方面入手，下面以百度百科的頁面為例進(jìn)行首頁頁面布局分析。

1.首頁主題

2.首頁導(dǎo)航

3.首頁內(nèi)容

1.8.6內(nèi)頁與主頁風(fēng)格保持一致

1.內(nèi)頁與主頁的結(jié)構(gòu)要一致

2.內(nèi)頁與主頁色彩要一致

3.內(nèi)頁與主頁導(dǎo)航統(tǒng)一性

4.個別具有特色的元素貫穿全部網(wǎng)頁

1.8.7網(wǎng)站內(nèi)頁如何布局

網(wǎng)站內(nèi)頁布局合理的方法，也就是難的方法：

1.內(nèi)頁的頭部

網(wǎng)站的內(nèi)頁的頭部應(yīng)該都要一樣，而且要獨(dú)立的寫出來，然后采取調(diào)用的方

法,這樣就精簡了網(wǎng)站的代碼，給網(wǎng)站減肥，對網(wǎng)站有很大的好處。

2.網(wǎng)站的內(nèi)頁導(dǎo)航

3.網(wǎng)站內(nèi)頁鏈接的布局

4.還有一點(diǎn)就是上一頁和下一頁的布局

三、學(xué)生練習(xí)，學(xué)生根據(jù)上一課策劃的網(wǎng)站，進(jìn)行布局選擇和設(shè)計

四、作業(yè)。完成網(wǎng)站布局

網(wǎng)站建設(shè)與管理授課方案(教案)

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：編寫時間：

課題節(jié)網(wǎng)站的風(fēng)格設(shè)計到網(wǎng)站發(fā)布

教學(xué)目的及要求：

掌握網(wǎng)站建設(shè)流程

教學(xué)重點(diǎn)：

網(wǎng)站建設(shè)的全過程介紹

教學(xué)難點(diǎn)：

網(wǎng)站建設(shè)的全過程介紹

一、復(fù)習(xí)網(wǎng)站布局

二、學(xué)習(xí)新課

1網(wǎng)站風(fēng)格設(shè)計

網(wǎng)站的設(shè)計必須要形成自己的風(fēng)格特色，特色就是優(yōu)勢。

所謂網(wǎng)站風(fēng)格是指，網(wǎng)站頁面設(shè)計上的視覺元素組合在一起的整體形象，展

現(xiàn)給人的直觀感受。這個整體形象包括網(wǎng)站的配色、字體、頁面布局、頁面內(nèi)容、

交互性、海報、宣傳語等因素。

可以從顏色、線條和形狀、版式等方面來進(jìn)行設(shè)計.

2.網(wǎng)站建設(shè)的基本條件

網(wǎng)站設(shè)計基本條件是：

1.硬件條件

(1)域名：

(2)網(wǎng)站空間：

2.軟件條件

1.11網(wǎng)站建設(shè)的常用方法

網(wǎng)站設(shè)計的方法很多，但常用的一般有以下幾種：

1.靜態(tài)網(wǎng)頁組成的網(wǎng)站

2.動態(tài)網(wǎng)頁組成的網(wǎng)站

3.動態(tài)網(wǎng)頁數(shù)據(jù)庫

4.WEB應(yīng)用程序組成的動態(tài)網(wǎng)站

1.12網(wǎng)站建設(shè)的常用技術(shù)

本書我們介紹的是ASP技術(shù)，我們在此基礎(chǔ)上在學(xué)習(xí)ASP.NET,PHP,JSP技

術(shù)。

1.13常用網(wǎng)站模塊功能及說明

1.14中小型網(wǎng)站建設(shè)的基本流程

中小型網(wǎng)站的建設(shè)流程如下：

1.聯(lián)系網(wǎng)站建設(shè)公司并提交要求

(1)向網(wǎng)站建設(shè)公司提出網(wǎng)站建設(shè)基本要求；

(2)提供相關(guān)文本及圖片資料。

公司介紹

項目描述

網(wǎng)站基本功能需求

基本設(shè)計要求

2.制定網(wǎng)站建設(shè)方案

(1)雙方就網(wǎng)站建設(shè)內(nèi)容進(jìn)行協(xié)商，修改、補(bǔ)充，以達(dá)成共識；

(2)網(wǎng)站建設(shè)方制定《網(wǎng)站建設(shè)方案》；

(3)雙方確定建設(shè)方案具體細(xì)節(jié)及價格。

3.簽署協(xié)議，并支付預(yù)付款

(1)雙方簽訂《網(wǎng)站建設(shè)協(xié)議》；

(2)客戶支付預(yù)付款；

(3)客戶提供網(wǎng)站相關(guān)內(nèi)容資料

4.完成初稿，經(jīng)客戶確認(rèn)后進(jìn)行建設(shè)

(1)根據(jù)《網(wǎng)站建設(shè)方案》)完成初稿設(shè)計：

首頁風(fēng)格

頻道首頁風(fēng)格

網(wǎng)站架構(gòu)圖

(2)客戶審核確認(rèn)初稿設(shè)計；

(3)網(wǎng)站建設(shè)方完成整體網(wǎng)站制作。

5.網(wǎng)站開通，客戶瀏覽驗收

(1)客戶根據(jù)協(xié)議內(nèi)容進(jìn)行驗收工作；

(2)驗收合格，由客戶簽發(fā)"網(wǎng)站建設(shè)驗收合格確認(rèn)書"；

(3)戶支付余款，網(wǎng)站開通；

(4)為客戶注冊域名、開通網(wǎng)站空間、上傳制作文件、設(shè)置電子郵箱。

6網(wǎng).站交付使用

(1)驗收通過后，網(wǎng)站正式交付使用。向客戶移交所有的管理和登陸權(quán)限，

以便以后的網(wǎng)站更新和維護(hù)。

(2)網(wǎng)站建設(shè)公司提供免費(fèi)的電話技術(shù)支持。

1.15網(wǎng)站內(nèi)容制作的流程

網(wǎng)站創(chuàng)建流程如下：

(1)網(wǎng)站策劃

網(wǎng)站策劃包括主題策劃、內(nèi)容策劃、風(fēng)格策劃、網(wǎng)站創(chuàng)意、目錄設(shè)計、布

局策劃等。

(2)明確網(wǎng)站開放對象

明確網(wǎng)站開放對象：當(dāng)一個網(wǎng)站主題確定后，我們所要考慮的就是確定網(wǎng)站

服務(wù)對象，我們網(wǎng)站的真正瀏覽者是那些群體。只有正確的定位了網(wǎng)站瀏覽群體

后，才能真正體現(xiàn)網(wǎng)站的可觀性。

(3)繪制網(wǎng)站草圖

繪制網(wǎng)站草圖，就是把網(wǎng)頁的平面效果圖畫在一張紙上，便于以后的設(shè)計和

排版。說起來很容易，但實際上較為復(fù)雜，這往往是一個網(wǎng)站成功的關(guān)鍵因素。

當(dāng)人瀏覽網(wǎng)站時。網(wǎng)頁的精彩度是把握也是吸引瀏覽者的關(guān)鍵。

在做網(wǎng)站前，一定要先設(shè)計好平面效果圖。把所有欄目擺放的具體位置和將

用到的一些什么圖片一定要計劃好。這樣便于收集和制作。

(4)建立網(wǎng)站文件夾

(5)收集建站資源

收集網(wǎng)絡(luò)資料、針對網(wǎng)站平面效果圖及版塊內(nèi)容準(zhǔn)備好所要用到的資料，然

后存放在對應(yīng)的文件夾，以便在建站時調(diào)用。

(6)設(shè)計網(wǎng)站頁面內(nèi)容

(7)網(wǎng)上安家及域名申請

(8)網(wǎng)站發(fā)布

(9)網(wǎng)站宣傳維護(hù)及管理

1.16網(wǎng)站內(nèi)容制作的詳細(xì)步驟

1.16.1網(wǎng)站主題策劃

1.16.2網(wǎng)站風(fēng)格和網(wǎng)站創(chuàng)意

1.16.3網(wǎng)站內(nèi)容規(guī)劃

在確定了網(wǎng)站主題和網(wǎng)站風(fēng)格后，還需要考慮規(guī)劃網(wǎng)站的內(nèi)容。

1.16.4網(wǎng)站設(shè)計的技術(shù)路線

網(wǎng)站設(shè)計采用什么技術(shù)路線是網(wǎng)站策劃的一部分。在動手制作網(wǎng)頁之前，應(yīng)

該首先明確網(wǎng)站的定位，從而選擇適當(dāng)?shù)募夹g(shù)路線?；ヂ?lián)網(wǎng)上的網(wǎng)站，按照功能

和性質(zhì)大致可以分為個人網(wǎng)站、商業(yè)網(wǎng)站、學(xué)術(shù)機(jī)構(gòu)和政府團(tuán)體網(wǎng)站。

1.16.5網(wǎng)站欄目規(guī)劃及布局目錄設(shè)計

1.欄目與版塊的劃分

2.網(wǎng)站的目錄結(jié)構(gòu)策劃

網(wǎng)站的目錄是指在建立網(wǎng)站時所創(chuàng)建的目錄。網(wǎng)站的目錄設(shè)計與網(wǎng)站的欄目

版塊設(shè)計密切相聯(lián)，規(guī)劃網(wǎng)站的目錄結(jié)構(gòu)要根據(jù)網(wǎng)站的主題和內(nèi)容來進(jìn)行分類規(guī)

戈U，不同的欄目對應(yīng)不同的目錄。

1.16.6導(dǎo)航設(shè)計

1.16.7鏈接設(shè)計

1.16.8網(wǎng)站資料搜集

1.16.9網(wǎng)頁設(shè)計

在網(wǎng)站規(guī)劃工作完成后，即可以開始網(wǎng)頁設(shè)計。網(wǎng)頁設(shè)計首先需要進(jìn)行首頁

設(shè)計。首頁是網(wǎng)站的靈魂，一定要在首頁設(shè)計上多下功夫，然后再設(shè)計一級頁面、

二級頁面，將一級頁面、二級頁面做成模板或者庫進(jìn)行保存，然后在設(shè)計其他一

級、二級頁面時即可從模板新建網(wǎng)頁或者插入庫項目，這樣維護(hù)起來更較為方便，

設(shè)計網(wǎng)頁的速度也較快。

設(shè)計網(wǎng)頁時要注意版面的規(guī)劃。版面規(guī)劃主要是如何突出主題內(nèi)容，如何提

高網(wǎng)頁下載打開的速度。

在本書后面章節(jié)將以一個企業(yè)網(wǎng)站“房產(chǎn)信息網(wǎng)”的建立來講解網(wǎng)頁設(shè)計的

基本技巧。

1.16.10網(wǎng)上安家

1.16.11域名申請

在申請網(wǎng)站空間后，接下來要考慮的問題是選擇域名。域名被視為企業(yè)的網(wǎng)

上商標(biāo)，其重要性不言而喻。

域名的申請知識及方法參見本書第7章相關(guān)內(nèi)容。

1.16.12網(wǎng)站發(fā)布

網(wǎng)站在空間申請及域名申請好以后，則可以進(jìn)行站點(diǎn)發(fā)布，將網(wǎng)站上傳到服

務(wù)器上。發(fā)布站點(diǎn)的方法很多，可以采用Dreamweaver8/CS3/CS4/CS5/CS6

自帶的發(fā)布站點(diǎn)功能或者采用專門的FTP發(fā)布工具進(jìn)行網(wǎng)站發(fā)布。以上兩種發(fā)

布網(wǎng)站的方法將在網(wǎng)站項目工程建設(shè)過程中進(jìn)行詳細(xì)講解。

1.16.13網(wǎng)站宣傳維護(hù)管理

三、學(xué)生練習(xí)，學(xué)生自己選擇策劃的網(wǎng)站進(jìn)行網(wǎng)站的內(nèi)容、風(fēng)格設(shè)計

四、作業(yè)。了解網(wǎng)站建設(shè)全過程，并完成網(wǎng)站的主題、內(nèi)容策劃

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：編寫時間：

課題:練習(xí)網(wǎng)站的策劃

教學(xué)目的及要求：

掌握網(wǎng)站的策劃

教學(xué)重點(diǎn)：

策劃書的編寫、網(wǎng)站的主題、內(nèi)容、布局規(guī)劃

教學(xué)難點(diǎn)：

策劃書的編寫、網(wǎng)站的主題、內(nèi)容、布局規(guī)劃

一、復(fù)習(xí)網(wǎng)站建設(shè)流程

二、學(xué)習(xí)新課

完成網(wǎng)站全過程的策劃的與初步設(shè)計

1.策劃書的編寫

2.策劃網(wǎng)站的主題

3.策劃網(wǎng)站的內(nèi)容

4.策劃網(wǎng)站的布局

5.策劃網(wǎng)站的風(fēng)格和色彩等

6.空間和域名的策劃

三、學(xué)生練習(xí)，完成網(wǎng)站的策劃

四、作業(yè)。完成網(wǎng)站策劃，編制完成的策劃書

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：網(wǎng)絡(luò)18011802編寫時間：

課題：HTML結(jié)構(gòu)及字體

教學(xué)目的及要求：

了解HTNL的結(jié)構(gòu)及字體

教學(xué)重點(diǎn)：

了解HTML的概念及結(jié)構(gòu)，字體的屬性

教學(xué)難點(diǎn)：

HTML結(jié)構(gòu)及字體屬性

教學(xué)步驟及內(nèi)容：

導(dǎo)入新課

1.了解學(xué)生的學(xué)習(xí)情況

2.介紹本門課的任務(wù)、教學(xué)目標(biāo)、教學(xué)內(nèi)容、教學(xué)方法、考評方法和教學(xué)

要求。

考評方法：平時成績50%,考試50%,考查。

教學(xué)要求：每個同學(xué)完成一個簡單的網(wǎng)站系統(tǒng)。

教學(xué)方法：理實一體化

一、介紹WEB客戶端程序設(shè)計這門課程

學(xué)習(xí)這門課程的目的：讓學(xué)生掌握HTMLCSSDW制作動態(tài)網(wǎng)站

的方法。

二、新課學(xué)習(xí)

1.HTML的概念

Html是英文HyperTextMarkupLanguage的縮寫，中文意思是“超文

本標(biāo)志語言”，用它編寫的文件（文檔）的擴(kuò)展名是.html或.htm,它們是可供

瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或Frontpage

Editor等編輯工具來編寫Html文件。Html語言使用標(biāo)志對的方法編寫文

件，既簡單又方便，它通常使用〈標(biāo)志名＞＜/標(biāo)志名＞來表示標(biāo)志的開始和結(jié)

束（例如＜html＞＜/html＞標(biāo)志對），因此在Html文檔中這樣的標(biāo)志對都必須是

成對使用的。

當(dāng)我們暢游Internet時，我們透過瀏覽器所看到的網(wǎng)站，是由HTML

（HyperTextMarkupLanguage）語言所構(gòu)成。HTML（超文件標(biāo)記語言）是

一種建立網(wǎng)頁文件的語言，透過標(biāo)記式的指令（Tag）,將影像、聲音、圖片'

文字等連結(jié)顯示出來。

HTML標(biāo)記是由<和>所括住的指令，主要分為：單標(biāo)記指令、雙標(biāo)記

指令(由<起始標(biāo)記>.</結(jié)束標(biāo)記〉所構(gòu)成)。HTML網(wǎng)頁文件可

由任何文本編輯器或網(wǎng)頁專用編輯器編輯，完成后(以.htm或.html為

文件后綴保存)將HTML網(wǎng)頁文件由瀏覽器打開顯示，若測試沒有問題則

可以放到服務(wù)器(Server)上，對外發(fā)布信息。

2.HTML的結(jié)構(gòu)

HTML文件基本架構(gòu)

<HTML>文件開始

<HEAD>標(biāo)頭區(qū)開始

<TITLE>...</TITLE>標(biāo)題區(qū)

</HEAD>標(biāo)頭區(qū)結(jié)束

<BODY>本文區(qū)開始

旁批欄:

本文區(qū)內(nèi)容

</BODY>本文區(qū)結(jié)束

</HTML>文件結(jié)束

<HTML>網(wǎng)頁文件格式。

<HEAD>標(biāo)頭區(qū)：記錄文件基本資料，如作者、編寫時間。

<TITLE>標(biāo)題區(qū)：文件標(biāo)題須使用在標(biāo)頭區(qū)內(nèi)，可以在瀏覽器最上面看到

標(biāo)題。

<BODY>本文區(qū)：文件資料?，即在瀏覽器上看到的網(wǎng)站內(nèi)容。

注意事項

通常一份HTML網(wǎng)頁文件包含二個部份：<HEAD>...</HEAD>標(biāo)頭

區(qū)、<BODY>...</BODY>本文區(qū)。而<HTML>和</HTML>代表網(wǎng)頁

文件格式。

習(xí)慣上一個網(wǎng)站的首頁名稱通常訂為index.htm或index.html這樣

只要瀏覽網(wǎng)站，瀏覽器便會自動的找出index.htm文件。

3.HTML的字體

(1)文字樣式設(shè)置的基本標(biāo)簽一<font>

設(shè)置字體樣式的基本標(biāo)簽是<font></font>,被其包含的文本為樣式作用區(qū)。

1.2.2設(shè)置文字的顏色

color是<font></font>標(biāo)簽的屬性之一，用于設(shè)置文字顏色。在D:\web\目錄

下創(chuàng)建網(wǎng)頁文件，命名為font_color.htm,編寫代碼如代碼1.7所示。

代碼1.7字體顏色的設(shè)置：font_color.htm

<html>

<head>

<title>字體顏色的設(shè)置</title>

</head>

<body>

淺紅色文字：<fontcolor="#ddOO（X）">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</fonl><br/>

深紅色文字：〈fontcolor="#660000">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

淺綠色文字：<fontcolor="#00dd00">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

深綠色文字：<fontcolor="#006600">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

淺藍(lán)色文字：〈fontcolor="#0000dd">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</fonl"br/>

深藍(lán)色文字：〈fontcolor="#000066">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

淺黃色文字：（fontcolor="#ddddOO">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</fonl><br/>

深黃色文字：〈fontcolor="#666600">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

淺青色文字：<fontcolor="#00dddd">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

深青色文字：〈fontcolor="#006666">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

淺紫色文字：〈fontcolor="#dd00dd">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

深紫色文字：<fontcolor="#660066">HTML學(xué)習(xí)的本質(zhì)就是該是什么就用什么</font><br/>

</body>

</html>

在瀏覽器地址欄輸入http://localhost/font_color.htm,瀏覽效果如圖1.7所示。

1.2.3設(shè)置文字的尺寸

size也是vfont></fom>標(biāo)簽的屬性，用于設(shè)置文字大小。size的值為1-7,默認(rèn)為3。我們可以size

屬性值之前加上“+”、“一”字符，來指定相對于字號初始值的增量或減量。在D:\web\目錄下創(chuàng)建

網(wǎng)頁文件，命名為font_size.hlm,編寫代碼如代碼1.8所示。

代碼1.8字體尺寸的設(shè)置：font_size.htm

<html>

<head>

字體尺寸的設(shè)置</title,

</head>

<body>

size為1:<fontsize="1">HTML學(xué)習(xí)</font><br/>

size為2：vfonlsize="2n>HTML學(xué)習(xí)</font>vbr/>

size為3:<fontsize=,'3,,>HTML學(xué)習(xí)</font><br/>

size為4：<fontsize="4">HTML學(xué)習(xí)</fonl>vbr/>

size為5：<fontsize=,,5,'>HTML學(xué)習(xí)</font><br/>

size為6：<fontsize="6">HTML學(xué)習(xí)v/font>vbr/>

size為7：<fontsize="7">HTML學(xué)習(xí)v/font><br/>

</body>

</html>

1.2.4設(shè)置文字的字體

face也是vfont></font>標(biāo)簽的屬性，用于設(shè)置文字字體（字型）。HTML網(wǎng)頁中顯示的字型從瀏覽

端的系統(tǒng)中調(diào)用，所以為了保持字型一致，建議采用宋體，HTML頁面也是默認(rèn)采用宋體。在

D:\web\目錄下創(chuàng)建網(wǎng)頁文件，命名為fontface.htm,編寫代碼如代碼1.9所示。

代碼1.9字體字型的設(shè)置：font_face.htm

<html>

<head>

字體字型的設(shè)置</出招>

</head>

<body>

字型為宋體：<fontface""宋體">沁園春?長沙?毛澤東v/fontxbr/>

字型為楷體：<fonlface="楷體",沁園春?長沙-毛澤東</font><br/>

字型為黑體：<fbntface="黑體”>沁園春?長沙.毛澤東</font><br/>

字型為隸書：〈fontface二“黑體”,沁園春?長沙-毛澤東<仟0113

</body>

</html>

3.文字效果

vi>這是斜體文字v/i>

<em>這也是斜體文字</em>

用雙標(biāo)簽<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的標(biāo)題部分.<strong></strong>

被稱為特別強(qiáng)調(diào)標(biāo)簽，也是文字加粗

1.2.7給文字加下劃線

用雙標(biāo)簽<u></u>可添加下劃線到被作用文字。

練習(xí)

<html>

<head>

字體修飾的設(shè)置

</head>

<body>

<fontsize="5">斜體：園春?長沙?毛澤東</em><br/>

加粗體：〈strong〉沁園春?長沙-毛澤東v/strongxbr/>

下劃線：<u>沁園春?長沙-毛澤東</u><br/>

斜體+加粗體+下劃線：vem>vslrong><u>沁園春?長沙-毛澤東v/u></strong>v/em></font>

</body>

</html>

總結(jié)本次我們介紹了HTML的基本結(jié)構(gòu)及字體屬性，要求大家能上機(jī)操作掌握

作業(yè)：上機(jī)

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：網(wǎng)絡(luò)18011802編寫時間：

課題：HTML的表格及標(biāo)示標(biāo)記

教學(xué)目的及要求：

本次課使學(xué)生了解HTML的表格及標(biāo)示標(biāo)記，并能夠上機(jī)操作，制作帶表格的網(wǎng)頁。

教學(xué)重點(diǎn)：

HTML表格屬性

教學(xué)難點(diǎn)：

不同表格的設(shè)計

教學(xué)步驟及內(nèi)容：

一、復(fù)習(xí)并導(dǎo)入新課

二、學(xué)習(xí)HTML表格

表格是html的一項非常重要功能，利用其多種屬性能夠設(shè)計出多樣化的

表格。使用表格可以使你的頁面有很多意想不到的效果，使頁面更加整齊旁批欄:

美觀。

常用表格標(biāo)記

<table>...</table>表格指令。

相關(guān)屬性：

,align調(diào)整

,bgcolor背景顏色

?border邊框

,height高度

,width寬度

<caption>...</caption>表格標(biāo)題。

相關(guān)屬性：

,align調(diào)整

<tr>...</tr>表格列（</tr>可省略）。

相關(guān)屬性：

,align調(diào)整

<th>...</th>表格欄標(biāo)題（表頭）粗體字（</th>可省略）。

相關(guān)屬性：

,align調(diào)整

,colspan欄寬

,rowspan欄高

<td>...</td>表格欄資料（儲存格）（</td>可省略）.

相關(guān)屬性：

,align調(diào)整

,bgcolor背景顏色

,height高度

,width寬度

,colspan欄寬

,rowspan欄高

舉例

如：（基礎(chǔ)型）

<tableborder=lalign=center>

vt?<td>太平洋網(wǎng)絡(luò)學(xué)院vtd>太平洋網(wǎng)絡(luò)學(xué)院

<tr><td>太平洋網(wǎng)絡(luò)學(xué)院<td>太平洋網(wǎng)絡(luò)學(xué)院

</table>

太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院

太平洋網(wǎng)絡(luò)學(xué)院太平洋網(wǎng)絡(luò)學(xué)院

如：（加強(qiáng)型）增加背景顏色、表格標(biāo)題、欄標(biāo)題、跨欄寬、跨欄高。

<tableborder=lalign=centerbgcolor=#ccccff>

<caption>表格標(biāo)題（/caption〉

<tr>

<td>

<thcolspan=2>行標(biāo)題1

<thcolspan=2>行標(biāo)題2

<tr>

<throwspan=2>歹ij標(biāo)題1

<td>a<td>a<td>a<td>a

<tr><td>b<td>b<td>b<td>b

<tr>

<throwspan=2>列標(biāo)題2

<td>c<td>c<td>c<td>c

<tr><td>d<td>d<td>d<td>d

</table>

表格標(biāo)題

行標(biāo)題1行標(biāo)題2

aaaa

列標(biāo)題1

bbbb

cccc

列標(biāo)題2

|dd|dd

三、學(xué)習(xí)標(biāo)示標(biāo)記

標(biāo)示

html提供許多種類的標(biāo)示標(biāo)記，作項目標(biāo)示，而且可以作巢狀式標(biāo)示!

常用標(biāo)示標(biāo)記

<li>標(biāo)示項目o

如：

<ol>

vli>第一項

<li>第二項

</ol>

第一項

第二項

<01>...</01>編號標(biāo)示，可標(biāo)示數(shù)字或英文、羅馬字母。

如：

<oltype=i>

<li>第一項

<li>第二項

</ol>

第一項

第二項

<ul>...</ul>符號標(biāo)示，可標(biāo)示數(shù)字或英文、羅馬字母。

如：

<ul>

<li>第一項

<li>第二項

</ul>

第一項

第二項

<dt>定義項目。

<dd>定義資料。

<dl>...</dl>定義標(biāo)示。

如：

<dl>

<dt>十進(jìn)制：<dd>0、1、2、3、4、5、6、7、8、9

<dt>十六進(jìn)制：<dd>0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

</dl>

十進(jìn)制：

0、1、2、3、4、5、6、7、8、9

十六進(jìn)制：

0、1>2、3、4、5、6、7、8、9、a、b^c、d>e^f

巢狀式標(biāo)示

巢狀式標(biāo)示如：

第一章

<oltype=i>

<li>第一節(jié)

<ul>

<li>第一段

<li>第二段

</ul>

<li>第二節(jié)

</ol><li>第二章

<li>第三章

</ol>

第一章

第一節(jié)

第一段

第二段

第二節(jié)

第二章

第三章

其他標(biāo)示標(biāo)記

<dir>...</dir>目錄式標(biāo)示（自動加圓點(diǎn)）。

如：

網(wǎng)絡(luò)學(xué)院：

<dir>

<li>新手上路

<li>軟件教室

<li>設(shè)計教室

<li>開發(fā)教室

</dir>

網(wǎng)絡(luò)學(xué)院：

新手上路

軟件教室

設(shè)計教室

開發(fā)教室

注意事項

標(biāo)示項目符號也可以用<font>...</font>標(biāo)記，以符號字元（。、?、

◎、★、■…等）標(biāo)示。

如:<fontcolor=#ff（X）OO>?</font>

四.學(xué)生上機(jī)操作

要求手寫代碼，不能直接復(fù)制。

五.總結(jié)

六.作業(yè)。完成表格和標(biāo)示標(biāo)記的練習(xí)

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：網(wǎng)絡(luò)18011802編寫時間:

課題：鏈接圖片

教學(xué)目的及要求：

學(xué)習(xí)鏈接圖片的標(biāo)記和代碼

教學(xué)重點(diǎn)：

掌握鏈接圖片代碼

教學(xué)難點(diǎn)：

HTML鏈接及圖片添加方法。

回顧表格、文字和基本的HTML標(biāo)記

學(xué)習(xí)鏈接及圖片標(biāo)記

鏈接可說是html中最重要的功能！因為html擁有鏈接的功能，使你能接

上internet、www享受多姿多彩的網(wǎng)絡(luò)世界。<a>...</a>鏈接指令。

相關(guān)屬性：

?href鏈接的url位址或文件

,name名稱

target指定鏈接到的url位址或文件顯示于那一個視窗（可和<frame>視

窗標(biāo)記配合使用或開新的視窗）

如：

外部鏈接

<ahref="http:"/">?</a>

<ahref="http:///"target=frame1>■</a>

內(nèi)部鏈接

,chl.htm文件

<ahref=#a>H</a>（欲鏈接至html文件a點(diǎn)）

<aname=a>?</a>（html文件a點(diǎn)）

,ch2.htm文件

<ahref=chl.htm#a>?</a>（欲鏈接至chl.htm文件a點(diǎn)

"■"表示鏈接點(diǎn)，可以是文字或圖案。（即游標(biāo)移到時，會變成手指形

狀的地方）

<link>鏈接指令（用于head區(qū)，設(shè)定css文件）。

<meta>儲存應(yīng)用資訊，可設(shè)定時間載入網(wǎng)頁（用于head區(qū)）..

相關(guān)屬性：

,charset設(shè)定

?content回應(yīng)表頭資料內(nèi)容，若是數(shù)字表示秒數(shù)

,http-equiv回應(yīng)表頭，若設(shè)定為refresh載入url設(shè)定

,urlhtml位置

如：

設(shè)定中文自動跳行。

<metahttp-equiv="content-type"content="text/html;charset=gb2312">

?設(shè)定十秒回到首頁。（若不設(shè)定html文件位置則再載入原h(huán)tml文件）

<metahttp-equiv="refresh"content=10url=index.htm>

設(shè)定鏈接、未鏈接部份顏色

設(shè)定鏈接、未鏈接部份顏色，用vbody>...v/body>標(biāo)記。

相關(guān)屬性：

?alink按下鏈接部份未放開時顏色

,link未看過的鏈接部份顏色

?vlink已看過的鏈接部份顏色

如:<bodylink=#0000ffalink=#ffOOOOvlink=#OOffOO>

圖片添加方法

設(shè)定圖片。<img>標(biāo)記。

設(shè)定地圖。vmap>...</map>標(biāo)記。

常用圖片標(biāo)記

<img>指令

相關(guān)屬性：

?align調(diào)整

?alt提示字

?border邊框

,height高度

,src文件或url位址

?usemap地圖名稱

?width寬度

如：可插入圖片（gif、jpg格式）、avi電影

<center>

<img51第”../../../血&8?$僅?<111」0g「"11二"太平洋網(wǎng)絡(luò)學(xué)院”@電11二功border=l>

</center>

<map>...</map>地圖

相關(guān)屬性：

,name名稱

<area>設(shè)定地圖動作區(qū)域

相關(guān)屬性：

?coords設(shè)定動作區(qū)域座標(biāo)（左上角座標(biāo)：xl,yl;右下角座標(biāo)：x2,y2）

?href動作區(qū)域連結(jié)點(diǎn)（可載入位址或文件）

?nohref動作區(qū)域連結(jié)點(diǎn)不動作

,shape外型

舉例

設(shè)定地圖

<imgborder=0src=a.gifusemap=#a>

<mapname=a>

<areashape=rectcoords=0,0,200,100href=l.htm>

<areashape=rectcoords=0,100,200,200nohreft>

<areashape=rectcoords=0,200,200,300href=3.htm>

</map>

四、上機(jī)練習(xí)并總結(jié)

五.作業(yè)學(xué)生自己配置環(huán)境演示新聞發(fā)布系統(tǒng)網(wǎng)站

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：網(wǎng)絡(luò)18011802編寫時間：

課題：聲音和滾動條

教學(xué)目的及要求:

學(xué)習(xí)HTML的聲音和滾動條的代碼。

教學(xué)重點(diǎn)：

掌握掌握聲音加入和滾動條跑馬燈加入的方法

教學(xué)難點(diǎn)：

掌握掌握聲音加入和滾動條跑馬燈加入的方法。

一、復(fù)習(xí)

二、學(xué)習(xí)新課

1.聲音

html不僅能插入圖片，也可以載入midi音樂、wav音效喔！

常用音樂標(biāo)記

<bgsound>背景音樂、音效。

相關(guān)屬性：

?loop循環(huán)，背景音樂播放次數(shù)

,src文件或url位址（可為wav、midi格式）

如：

<bgsoundsrc=m-1.midloop=true>

內(nèi)嵌音樂插件

<embed>...</embed>內(nèi)嵌插件。

相關(guān)屬性：

,height高度

?width寬度（可設(shè)百分比％）

,src設(shè)定內(nèi)嵌物件的url位址

?loop循環(huán)，背景音樂播放次數(shù)

,autostart自動播放

如：

<embedsrc=m-l.midwidth=145height=60autostart=trueloop=true></embed>

【文字卷動標(biāo)記】

<marquee>...</marquee>文字卷動（滾動條）。

【相關(guān)屬性】

,behavior=設(shè)定卷動方式

—alternate交替來回卷動

-scroll卷動（預(yù)設(shè)）

-slide滑動

?bgcolor=color背景顏色

?direction=設(shè)定卷動方向

,height=n高度

?loop=n循環(huán)，卷動次數(shù)（預(yù)設(shè)循環(huán)）

,scrollamount=n設(shè)定卷動距離

?scrolldelay=milliseconds設(shè)定卷動時間

,truespeed=milliseconds設(shè)定卷動速度

?width=n寬度（可設(shè)百分比%）

【舉例】

如：〈marqueebgcoloi-redbehavior=altematedirection=leftscrollamout=10

scrolldelay=100><fontcolor二white〉太平洋網(wǎng)絡(luò)學(xué)院<開0①></01@嗎11??>

如：<marqueebgcolor=greenheight=5Obehavior=scrolldirection=up

scrollamout=10scrolldelay=300><fontcolor=white>〈center>太平洋網(wǎng)絡(luò)學(xué)院

</center></fbntx/marquee>

復(fù)習(xí)HTML代碼

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：網(wǎng)絡(luò)18011802編寫時間：

-課題：提供一個網(wǎng)頁的圖片，完成網(wǎng)頁的首頁制作

教學(xué)目的及要求：

DreamweaverCS6與HTML結(jié)合，實現(xiàn)首頁的制作

教學(xué)重點(diǎn)：

HTML的標(biāo)記的綜合應(yīng)用

教學(xué)難點(diǎn)：

HTML的標(biāo)記的綜合應(yīng)用

一、復(fù)習(xí)

二學(xué)習(xí)新課

提供一個圖片，然后提供一些切片圖片，學(xué)生通過HTML和DW完成首頁的制作

旁

批

欄:

會員登隘［公司新問〉雇務(wù)項目

快遑遞送公司.主要業(yè)務(wù)是援供西安市內(nèi)、GB內(nèi).田際，文

用丹

件、包裹和貨物配送服務(wù)的專業(yè)公司?訓(xùn)姓有案的遑通人員；

S網(wǎng)：|機(jī)動靈活的車隊；電周雌提調(diào)度指揮系統(tǒng).先進(jìn)的全噴

餐錄|清除|叫中心系斑充分慍保證客戶的快怦及物融遞安全睢確通送

就用戶汪田

復(fù)卬打字翻譯

聯(lián)系我們

便利服務(wù)裝訂、塑封名片制

名稱：西安古班快詢津公司

辦公用尉日售金色數(shù)嗎沖印吉利/鮮花禮品

峨：西到i長安中的斕

電g/p>

傳X/p>

電即?x&l11858126.con

酸實名：酸螃

法律聲明Insoff?聯(lián)系物n|

三、學(xué)生上機(jī)操作，通過DW做一個框架，然后修改HTML代碼完成網(wǎng)頁

四、作業(yè)。

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：網(wǎng)絡(luò)18011802編寫時間：

課題：建立數(shù)據(jù)庫

教學(xué)目的及要求：

建立ACCESS數(shù)據(jù)庫

教學(xué)重點(diǎn)：

操作數(shù)據(jù)庫

教學(xué)難點(diǎn)：

掌握ACCESS數(shù)據(jù)庫的操作方法

一、復(fù)習(xí)復(fù)習(xí)HTML

二、學(xué)習(xí)新課

1.安裝ACCESS

2.建立ACCESS數(shù)據(jù)庫并保存

3.建立ACCESS數(shù)據(jù)表并保存

注意字段名稱、字段類型，舉例說明：如用戶表、新聞表的創(chuàng)建。

自動

本

文

本

文

本

文

本

文

期

日

字

額

黨

最

4.輸入字段和編輯字段內(nèi)容：操作數(shù)據(jù)表，如增加、刪除等。

三、學(xué)生上機(jī)操作，完成數(shù)據(jù)庫及表的設(shè)計

四、作業(yè)。

網(wǎng)站建設(shè)與管理授課方案（教案）

課名：網(wǎng)站設(shè)計開發(fā)教師：

班級：網(wǎng)絡(luò)18011802編寫時間：

課題：構(gòu)建動態(tài)網(wǎng)站開發(fā)環(huán)境

教學(xué)目的及要求:

掌握開發(fā)環(huán)境是哪些？掌握配置方法

教學(xué)重點(diǎn)：

開發(fā)環(huán)境的配置方法

教學(xué)難點(diǎn)：

開發(fā)環(huán)境的配置方法

一、復(fù)習(xí)復(fù)習(xí)HTML

二、學(xué)習(xí)新課

從今天開始我們學(xué)習(xí)動態(tài)網(wǎng)站

1.動態(tài)網(wǎng)站的概念

所謂“動態(tài)”，并不是指GIF動態(tài)圖片、FLASH,滾動字幕等，我們?yōu)閯討B(tài)頁面的概

念制定了以下幾條規(guī)則：

(1)、“交互性”：即網(wǎng)頁會根據(jù)用戶的要求和選擇而動態(tài)改變和響應(yīng)，將瀏覽器作為客

戶端界面，這將是今后WEB發(fā)展的大事所趨。

(2)、“自動更新”：即無須手動地更新HTML文檔，便會自動生成新的頁面，可以大大

節(jié)省工作量。

(3)、“因時因人而變”：即當(dāng)不同的時間、不同的人訪問同一網(wǎng)址時會產(chǎn)生不同的頁面,

是不是很酷？

2.動態(tài)網(wǎng)站的種類：ASPASP.NETPHPJSP

3.動態(tài)網(wǎng)站的發(fā)展趨勢：.NETJSPPHP發(fā)展，ASP是基礎(chǔ)

4.ASP動態(tài)網(wǎng)站的開發(fā)環(huán)境包含哪些？

?安裝并配置IIS的方法。

?默認(rèn)網(wǎng)站的配置方法。

?新建網(wǎng)站的配置方法。

?虛擬主機(jī)網(wǎng)站的配置方法。

?本地站點(diǎn)的定義的方法。

5.ASP動態(tài)網(wǎng)站的相關(guān)知識

ASP文件

ASP文件由文本、HTML標(biāo)記、ASP腳本命令等幾部分組成。

ASP程序工作原理

數(shù)據(jù)傳送

客戶端服務(wù)器數(shù)據(jù)庫

數(shù)據(jù)反饋

(1)客戶端輸入網(wǎng)頁地址(URL),通過網(wǎng)絡(luò)向服務(wù)器發(fā)送一個ASP的文件請求。

(2)服務(wù)器開始運(yùn)行asp文件代碼，從數(shù)據(jù)庫中取需要的數(shù)據(jù)或?qū)憯?shù)據(jù)。

(3)服務(wù)器把數(shù)據(jù)庫反饋的數(shù)據(jù)發(fā)送到客戶端上顯示。

?配置ASP運(yùn)行環(huán)境簡介

要使用ASP創(chuàng)建動態(tài)網(wǎng)頁，首先要從硬件和軟件方面配置好A