一體化課程教學(xué)案-基本型網(wǎng)站開發(fā)

一體化課程教案（首頁）

課程網(wǎng)頁制作授課教師

課題（項目）

基本型開發(fā)審批

名稱

學(xué)習(xí)任務(wù)基本型開發(fā)授課課時24

授課日期年月日至年月日授課班級

小剛剛通過應(yīng)聘進(jìn)入了一家旅游公司，公司讓他負(fù)責(zé)的維護(hù)與更新工作。公司為了能在

金秋旅游節(jié)活動中迅速搶占商機(jī)，推出了“七彩”精品線路，希望通過制作專題達(dá)到增

項目（任務(wù)）

強(qiáng)宣傳和服務(wù)客戶的效果。由于時間緊迫，現(xiàn)要求小與策劃部進(jìn)行快速溝通和需求分析，

描述

完成資料的整理和素材的簡單加工，設(shè)計出基本框架，再通過網(wǎng)頁編輯工具完成網(wǎng)頁版

面的制作和容元素的編輯，最后通過公司服務(wù)器發(fā)布到互聯(lián)網(wǎng)上。

通過完成本次任務(wù)，學(xué)生能夠

?通過多方調(diào)研明確客戶需求，撰寫需求確認(rèn)分析說明書；

?通過組討論，做好開發(fā)詳細(xì)計劃，撰寫項目工作計劃表；

?通過小組分工合作，自主探究學(xué)習(xí)，設(shè)計有特色的；

教學(xué)目標(biāo)

?通過測試，發(fā)現(xiàn)存在問題并提出解決方案；

?能夠展示小組作品的優(yōu)勢和特色，并能客觀評價他人；

?通過基于工作情境的角色扮演，熟悉開發(fā)的工作流程，并從中獲得溝通表達(dá)，解決

問題的經(jīng)驗，體驗團(tuán)隊合作與信息共享的樂趣。

分析客戶需求；設(shè)計規(guī)劃書；創(chuàng)建站點(diǎn)；設(shè)計網(wǎng)頁版面布局；素材編輯與修辭；容頁制

作與超。

化解方法：

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

1）獲取信息。向?qū)W生提供參考書籍、資料。

2）組織討論。組織學(xué)生以小組工作的形式，認(rèn)真分析、討論客戶要求，制定規(guī)劃書。

3）個別指導(dǎo)。認(rèn)真觀察網(wǎng)頁版面布局，準(zhǔn)備素材。

4）教師演示。在是大部分學(xué)生遇到類同的操作技術(shù)問題時進(jìn)行示教學(xué)。

使用Dreamweaver進(jìn)行網(wǎng)頁布局；容頁制作；頁面間的超。

教學(xué)難點(diǎn)化解方法：

1）小組討論。組織小組討論，使學(xué)生的規(guī)劃方案逐步清楚，逐步合理。

2）反復(fù)修改。組織學(xué)生在討論的過程中，在容頁的制作中，發(fā)現(xiàn)問題時作出合理的修改。

如，引導(dǎo)學(xué)生修改不合理的工序劃分、容頁的制作等。

3）教師指導(dǎo)。指導(dǎo)學(xué)生分析各組版面布局的利弊。在制作階段，針對個別基礎(chǔ)較差的學(xué)

生，在版面的布局和頁面間的超中給予指導(dǎo)。

4）總結(jié)點(diǎn)評。在學(xué)生完成任務(wù)后反饋時，組織學(xué)生對各小組的進(jìn)行功能和頁面布局的點(diǎn)

評。

該班的學(xué)生是一年級下學(xué)期的學(xué)生，剛職業(yè)認(rèn)知階段的前半階段的課程，有計算機(jī)的基

礎(chǔ)知識，學(xué)生是沒有學(xué)過DW軟件的，做為新學(xué)習(xí)者，現(xiàn)根據(jù)客戶需求，開發(fā)一個“七彩”

旅游專題，進(jìn)行宣傳推廣旅游線路。該以信息發(fā)布、產(chǎn)品介紹、在線銷售、顧客服務(wù)、

提升品牌形象為主要功能和目的。學(xué)生在學(xué)習(xí)任務(wù)中首先要進(jìn)行客戶需求分析，制定設(shè)

計書，并進(jìn)行創(chuàng)建站點(diǎn)和管理站點(diǎn)，然后在已創(chuàng)建的站點(diǎn)上進(jìn)行主頁、頁設(shè)計完善功能，

并使用多種工具進(jìn)行網(wǎng)頁美工，最后發(fā)布與管理已建好的，根據(jù)公司的要求，更新和維

護(hù)。

?課程地位分析

職業(yè)認(rèn)知職業(yè)培養(yǎng)職業(yè)實踐

計算機(jī)應(yīng)用圖像處理頂崗實習(xí)

常用軟件應(yīng)用電子支付畢業(yè)設(shè)計

學(xué)情分析

網(wǎng)絡(luò)客戶管理

辦公自動化網(wǎng)上開店實務(wù)

網(wǎng)絡(luò)銷售談判網(wǎng)店裝修實務(wù)

廣告攝影與后期如1EXCEL商務(wù)應(yīng)用

電子商務(wù)網(wǎng)頁制作現(xiàn)代物流技術(shù)

電子商務(wù)師實訓(xùn)

依據(jù)工學(xué)結(jié)合一體化課程體系的開發(fā)方法，召開實踐專家訪談會、人才

培養(yǎng)方案論證會，確定如上圖所示的課程結(jié)構(gòu)。經(jīng)分析可知，《電子商務(wù)網(wǎng)

頁制作》課程是電子商務(wù)專業(yè)的一門職業(yè)認(rèn)知課程，是在學(xué)生具備計算機(jī)應(yīng)

用基礎(chǔ)知識的基礎(chǔ)上，采取項目教學(xué)法，使學(xué)生掌握制作電子商務(wù)基本網(wǎng)頁

的能力，同時訓(xùn)練學(xué)生運(yùn)用DW軟件制作網(wǎng)頁的工作能力，為學(xué)生下一步的網(wǎng)

上開店實務(wù)和網(wǎng)店裝修實務(wù)等課程的學(xué)習(xí)奠定一個扎實的操作技能的關(guān)鍵課

程。因此，本課程對實現(xiàn)電子商務(wù)專業(yè)的人才培養(yǎng)目標(biāo)的實現(xiàn)，起重要的支

撐和促進(jìn)作用。

?學(xué)習(xí)容分析

本門課程是在企業(yè)調(diào)研基礎(chǔ)上，堅持工作過程系統(tǒng)化原則，反復(fù)討論設(shè)

計而成，由基本型開發(fā)、標(biāo)準(zhǔn)型開發(fā)、創(chuàng)意型開發(fā)、商業(yè)型開發(fā)，共4個學(xué)

習(xí)任務(wù)組成。這些學(xué)習(xí)任務(wù)以“電子商務(wù)網(wǎng)頁制作”為主線，項目由簡單到

復(fù)雜，由封閉到開放，層層推進(jìn)。本項目是由7個子任務(wù)構(gòu)成的（如上圖所

示），通過完成這7個任務(wù)可以完成一個基本的完整，是后面幾個的項目完

成的基礎(chǔ)。就其設(shè)計意圖及所具備的功能來看，讓學(xué)生在學(xué)習(xí)該門課程容前

期，起到總體基本認(rèn)知作用。

L引導(dǎo)文教學(xué)法

在課堂教學(xué)實施過程中，教師通過設(shè)置一系列與學(xué)習(xí)目標(biāo)相關(guān)聯(lián)的引導(dǎo)

問題，引導(dǎo)學(xué)生獨(dú)立思考和自主學(xué)習(xí)，從而掌握新知識、新技術(shù)，并促使學(xué)

生把學(xué)到的理論知識自覺地應(yīng)用于實踐，達(dá)成學(xué)習(xí)目標(biāo)。這種方法既培養(yǎng)了

學(xué)生獨(dú)立學(xué)習(xí)、計劃、實施和檢查的能力，又培養(yǎng)了學(xué)生分析和解決問題的

教學(xué)策略能力。

2.小組合作學(xué)習(xí)法

學(xué)生以小組為單位，進(jìn)行合作學(xué)習(xí)與討論，充分激發(fā)個體潛能，融合集

體智慧，促進(jìn)解決項目需求分析、設(shè)計規(guī)劃書等相關(guān)問題，從而提高學(xué)習(xí)和

工作的效率，達(dá)到較好地完成學(xué)習(xí)任務(wù)的目的。這種方法有助于培養(yǎng)學(xué)生的

合作精神、組織協(xié)調(diào)能力和溝通能力。

3.演示教學(xué)法

當(dāng)學(xué)生在遇到問題，且難于解釋時，進(jìn)行操作演示，方便學(xué)生理解與學(xué)

習(xí)。如站點(diǎn)的建立與管理，網(wǎng)頁版面的布局、圖片的設(shè)置、超的設(shè)置等問題，

均可能需要示教學(xué)。

4.任務(wù)驅(qū)動法

教師通過布置課前作業(yè)來下達(dá)學(xué)習(xí)任務(wù)一一“七彩”的制作。學(xué)生根據(jù)

任務(wù)要求，借助學(xué)習(xí)材料，進(jìn)行自主探索和互動協(xié)作的學(xué)習(xí)實踐活動；在課

堂上，學(xué)生在教師的指引下，根據(jù)學(xué)習(xí)任務(wù)要求，結(jié)合工作過程要求，一步

步地完成任務(wù)，從而達(dá)成既定的學(xué)習(xí)目標(biāo)。這種方法改變了以往“教師講，

學(xué)生聽”、以教定學(xué)的被動教學(xué)模式，有利于激發(fā)學(xué)生的學(xué)習(xí)興趣，培養(yǎng)學(xué)

生分析問題、解決問題的能力，提高學(xué)生自主學(xué)習(xí)及與人協(xié)作的能力。

5.案例分析法

在教學(xué)活動“檢查”環(huán)節(jié)中，以學(xué)生的作品“七彩”為案例進(jìn)行優(yōu)劣分析，

總結(jié)得失，分析改進(jìn)方向。例如，經(jīng)過對自身制作的工作過程的分析，學(xué)生

可歸納出的優(yōu)劣點(diǎn)，養(yǎng)成分析問題、歸納現(xiàn)象的習(xí)慣。

場地教學(xué)樓409電子商務(wù)實驗室

教學(xué)工具多媒體計算機(jī)、白板、幻燈機(jī)、資料柜、因特網(wǎng)

資源

準(zhǔn)備耗材設(shè)計圖紙、彩色畫筆

其他

課前學(xué)習(xí)

瀏覽各類的電子商務(wù)

任務(wù)

一體化課程教案（頁）

教學(xué)活動1：資訊（80分鐘）

學(xué)習(xí)容學(xué)生活動教師活動設(shè)計意圖和資源準(zhǔn)備

1.任務(wù)描述（10分鐘）1.學(xué)生進(jìn)行分組組1.幫助學(xué)生理解任1.通過發(fā)布任務(wù)，

【任務(wù)描述】小剛剛通過應(yīng)聘進(jìn)入了一家旅游公司，公司讓他負(fù)責(zé)的維護(hù)與更新工作。隊（每5~6人一組），務(wù)要求、分析任務(wù)讓學(xué)生了解任務(wù)，進(jìn)

公司為了能在金秋旅游節(jié)活動中迅速搶占商機(jī)，推出了“七彩”精品線路，希望通過制組成這個任務(wù)的合作2.介紹創(chuàng)建站點(diǎn)、而讓學(xué)生圍繞任務(wù)進(jìn)

作專題達(dá)到增強(qiáng)宣傳和服務(wù)客戶的效果。由于時間緊迫，現(xiàn)要求小與策劃部進(jìn)行快速溝伙伴繪制草圖、表格在頁行任務(wù)相關(guān)資料的收

通和需求分析，完成資料的整理和素材的簡單加工，設(shè)計出基本框架，再通過網(wǎng)頁編輯2.根據(jù)老師的提示面布局中的作用，同集。

工具完成網(wǎng)頁版面的制作和容元素的編輯，最后通過公司服務(wù)器發(fā)布到互聯(lián)網(wǎng)上。及任務(wù)，尋找完成任時提供獲取資訊的方2.提供“七彩”旅

2.尋找任務(wù)所需資料（70分鐘）務(wù)所需的相關(guān)資料法和途徑等信息游專題的相關(guān)資料，

瀏覽相關(guān)產(chǎn)品宣傳，參考網(wǎng)頁布局結(jié)構(gòu)3.學(xué)生通過上網(wǎng)瀏公司需求。提供因特

制作總體設(shè)計說明書覽相關(guān)，參考網(wǎng)頁布網(wǎng)查找資料

收集網(wǎng)頁素材資源，包括旅游景點(diǎn)圖片的拍攝與收集，文字說明及參數(shù)局，搜集相關(guān)素材

（教學(xué)評價）

教學(xué)活動2：決策（160分鐘）

學(xué)習(xí)容學(xué)生活動教師活動設(shè)計意圖和資源準(zhǔn)備

引導(dǎo)問題1.學(xué)生經(jīng)過討論以小組方式擬定工1.聽取學(xué)生的決策1.學(xué)生在確定方案

為旅游公司設(shè)計旅游，在開始構(gòu)思的時候需要充分地了解客戶需求，要

達(dá)到什么目的、效果？產(chǎn)品有什么特點(diǎn)？主要的客戶群體是什么？以什作過程，確定主頁要呈現(xiàn)的容與方式、意見，提出可行性方的過程中，培養(yǎng)團(tuán)隊

么樣的容服務(wù)形式出現(xiàn)？明確所采用的語言、明確頁面的寬度面的質(zhì)疑，提供指導(dǎo)合作能力。

1.用戶訪談，收集需求（40分鐘）

和色彩風(fēng)格、明確導(dǎo)航項目和子頁容意見，幫助形成方案2.在模塊功能分析

學(xué)生經(jīng)過分組后，進(jìn)行探究式學(xué)習(xí)，學(xué)生經(jīng)過討論以小組方式擬定

呈現(xiàn)方式、明確開發(fā)時間和后期維護(hù)并指導(dǎo)學(xué)生進(jìn)行方案階段，能通過自學(xué)、

工作過程，在工作過程過角色扮演，小組與策劃部門充分溝通，了解專

要求等優(yōu)化，最終做出決策，討論、提問等方式自

題的基本要求，瀏覽策劃部門提供的資料，收集各種需求填寫需求訪談

2.學(xué)生小組討論，利用黑板，每個形成團(tuán)隊實施方案主學(xué)習(xí)

記錄表。（主要表格見工作頁）

小組展示需求要點(diǎn)2.指導(dǎo)學(xué)生討論，3.在資料準(zhǔn)備階段

網(wǎng)站名稱一“七彩云南”專題旅游網(wǎng)站Q腳本支持一純HTT.1LP

對學(xué)生的展示結(jié)果指主要是培養(yǎng)學(xué)生的團(tuán)

所用域名一L/數(shù)據(jù)庫支持2否2

負(fù)責(zé)部門2策劃部。聯(lián)系人“

導(dǎo)學(xué)生進(jìn)行優(yōu)化隊、協(xié)助、自省能力。

需求訪談記錄一

3.指導(dǎo)學(xué)生尋找合

適的風(fēng)格

2.引導(dǎo)需求要點(diǎn)（40分鐘）

通過分析填寫的需求訪談記錄，引導(dǎo)學(xué)生在需求分析時重點(diǎn)分析的

容需求

1）通過與用戶溝通，引導(dǎo)用戶提出具體需求

2）指導(dǎo)用戶選擇與主題相關(guān)的域名，要便于訪問者使用

3）根據(jù)所能提供的條件，明確建設(shè)的規(guī)模

4）根據(jù)用戶的實際情況確定主頁要呈現(xiàn)的容和方式

5）明確所采用的語言

6）明確頁面的寬度和色彩風(fēng)格

7）明確導(dǎo)航項目和子頁容呈現(xiàn)方式

8）明確開發(fā)時間和后期維護(hù)要求

3.需求說明確認(rèn)（80分鐘）

引導(dǎo)小組根據(jù)需求要點(diǎn)分析，填寫需求說明確認(rèn)表。（主要表格見工

作頁）

網(wǎng)站名稱。腳本支持。

所用域名。數(shù)據(jù)庫支持。

負(fù)責(zé)部門3聯(lián)系人23

需求要點(diǎn)Q

客戶意見和確認(rèn)。

簽字。

（教學(xué)評價）

教學(xué)活動3：計劃（80分鐘）

學(xué)習(xí)容學(xué)生活動教師活動設(shè)計意圖和資源準(zhǔn)備

1.在需求分析的基礎(chǔ)上，建設(shè)負(fù)責(zé)人根據(jù)實際情況，明確實施目標(biāo)，確定實施方案，1、學(xué)生分組討論分析指導(dǎo)學(xué)生優(yōu)化方案設(shè)要學(xué)生在這個階段學(xué)

并將其遞交客戶，由其負(fù)責(zé)人簽字確定。在設(shè)計方案中主要闡述以下幾點(diǎn)(主要表需求分析表后制定相計，審定工作方案，習(xí)遇到一個項目任

格見工作頁)應(yīng)的設(shè)計方案制定重要節(jié)點(diǎn)的項目務(wù)，根據(jù)任務(wù)制定出

(1)背景2、制作詳細(xì)的工作計進(jìn)度檢查計劃完整的方案、計劃，

(2)開發(fā)環(huán)境劃表以便下一步方案的實

(3)版面要求施

(4)支持語言

(5)結(jié)構(gòu)(以草圖的方式畫出的結(jié)構(gòu)，分為多少個欄目)

(6)分塊說明(每個欄目的具體容)

(7)測試與維護(hù)

(8)進(jìn)度安排

(9)費(fèi)用說明

2.在完成設(shè)計方案的基礎(chǔ)上，小組設(shè)定工作計劃表，工作計劃具體到個人和時間要填

寫清楚。(主要表格見工作頁)

(教學(xué)評價)

教學(xué)活動4：實施（480分鐘）

學(xué)習(xí)容學(xué)生活動教師活動設(shè)計意圖和資源準(zhǔn)備

任務(wù)1.準(zhǔn)備工作(80分鐘)1.以客戶為主要服務(wù)對象，根據(jù)市1.與學(xué)生分享設(shè)計通過讓學(xué)生了解客戶

引導(dǎo)問題

場的狀況、公司經(jīng)營產(chǎn)品自身的情況商業(yè)的原則，指導(dǎo)小需求、設(shè)計規(guī)劃書、

在建設(shè)的時候需要準(zhǔn)備什么素材？有哪些素材是應(yīng)該由客戶提供的

等進(jìn)行綜合分析，完成以下三個方面組完成需求分析調(diào)查認(rèn)識網(wǎng)頁及其設(shè)計軟

呢？放置素材的文件夾該如何設(shè)置？

的具體設(shè)計表，指導(dǎo)學(xué)生根據(jù)調(diào)件，來讓學(xué)生完成產(chǎn)

1.整理提供的資料和素材

(1)首頁設(shè)計查表獲取客戶需求信品宣傳的站點(diǎn)和頁面

客戶提供的資料和素材往往隨機(jī)存放，顯得比較混亂。為了便于認(rèn)識需求

(2)整體結(jié)構(gòu)設(shè)計息設(shè)計，最終上傳文件

和后續(xù)的制作，需要將其整理、歸類。在此過程中，利用資源管理器運(yùn)行

(3)發(fā)布2.分析校園網(wǎng)的布并進(jìn)行發(fā)布

文件夾整理，熟悉文件夾和文件的建立、復(fù)制、移動、刪除等操作，從而

2.小組討論設(shè)計“七彩”主題旅游局圖，引導(dǎo)學(xué)生小組

增強(qiáng)對客戶業(yè)務(wù)流程的認(rèn)識，拓展后續(xù)制作的思路

的布局圖設(shè)計“七彩”主題旅

2.認(rèn)真瀏覽圖1—3所示的主頁效果圖和圖1—4所示的子頁效果圖。

3.填寫容規(guī)劃表游布局圖

根據(jù)的效果圖決定需要哪些素材，對客戶提供的素材進(jìn)行重設(shè)計，使其頁

4.學(xué)生通過輔助教材和上網(wǎng)查找3.根據(jù)客戶需求分

面的要求。

資料，分組討論，討論后展示討論成析調(diào)查表填寫規(guī)劃表

練習(xí)：

果4.對學(xué)生的討論展

將客戶提供的資料包，按預(yù)想的思路整理成整齊的資料包。

5.通過模仿教師的操作學(xué)生獨(dú)立示進(jìn)行引導(dǎo)

完成站點(diǎn)的建立，小組完成整個小組5.展示站點(diǎn)建立的

任務(wù)2.站點(diǎn)建立與管理(40分鐘)

引導(dǎo)問題的站點(diǎn)建立方法

在建設(shè)的時候，為什么要建立站點(diǎn)？如何進(jìn)行站點(diǎn)管理？6.通過模仿教師的操作和查找資6.展示網(wǎng)頁布局的

學(xué)生作為網(wǎng)頁制作的初學(xué)者，需要先熟悉網(wǎng)頁制作的工具DW。料，小組完成主頁和各個分頁的制作方法

1.認(rèn)識網(wǎng)頁編輯工具及各頁面之間的7.展示圖像、文字

Dreamweaver是Macromedia公司的一款“所見即所得"的網(wǎng)頁編輯編輯的基本方法

工具，其啟動界面如圖1—6所示。Dreamweave采用的是Mac機(jī)浮動面板8.對各小組完成的

的設(shè)計風(fēng)格，對于初學(xué)者來說可能會感到不適應(yīng)。Dreamweave對于DHTML作品進(jìn)行點(diǎn)評，指導(dǎo)

的支持特別好，可以輕松實現(xiàn)炫目的頁面特效。各小組進(jìn)行優(yōu)化

本項目默認(rèn)以Dreamweave網(wǎng)頁編輯工具為例展開學(xué)習(xí)。打開DW,熟

悉DW的界面，把DW界面的各組成部分填寫在工作頁的相應(yīng)的標(biāo)記框中。

2.站點(diǎn)創(chuàng)建與管理

(1)新建站點(diǎn)

什么是站點(diǎn)：站點(diǎn)不同于網(wǎng)頁，一個站點(diǎn)不僅包含大量的網(wǎng)頁文件，

還包括圖片、動畫八視頻、音頻等文件，并且這些文件是相互關(guān)聯(lián)的，

需要通過創(chuàng)建一個站點(diǎn)來對各類元素進(jìn)行集中管理。

建立站點(diǎn)方法：在起始界面中選擇“創(chuàng)建新項目"》''dreamweaver站

點(diǎn)”，定義站點(diǎn)名字，輸入站點(diǎn)名稱，并選擇各相應(yīng)的設(shè)置。

(2)站點(diǎn)管理

可以通過在站點(diǎn)中創(chuàng)建、復(fù)制、刪除文件夾和文件對象來構(gòu)建文件

系統(tǒng)。一個編輯工具可以創(chuàng)建許多站點(diǎn)，可以對它們進(jìn)行統(tǒng)一管理，包括

站點(diǎn)信息的修改、站點(diǎn)的復(fù)制與刪除、站點(diǎn)的導(dǎo)出與導(dǎo)入等操作。

①目錄結(jié)構(gòu)規(guī)劃

在所創(chuàng)建的站點(diǎn)中規(guī)劃目標(biāo)結(jié)構(gòu)。

②多站點(diǎn)管理

選擇“站點(diǎn)”f“管理站點(diǎn)”菜單命令，打開“管理站點(diǎn)”對話框，

進(jìn)行站點(diǎn)的導(dǎo)入和導(dǎo)出。

練習(xí)：

1.嘗試用dreamweaver新建一個站點(diǎn)。

2.為“七彩”創(chuàng)建站點(diǎn)文件夾并使用Dreamweaver進(jìn)行站點(diǎn)管理操作并

寫出詳細(xì)步驟。

任務(wù)3.網(wǎng)頁版面布局(40分鐘)

引導(dǎo)問題

網(wǎng)頁布局的方法有哪些？常用的網(wǎng)頁布局是如何的？

(2)常見版面布局

設(shè)計網(wǎng)頁時，不僅要合理安排容，也要使頁面美觀精致，僅僅通過對

文本和圖片的堆積排列是不夠的。Dreamweaver提供了表格、層和框架等

工具，可以制作出復(fù)雜的頁面結(jié)構(gòu)，再配合文字和圖片，就可以制作優(yōu)秀

的網(wǎng)頁。

幾種常見的網(wǎng)頁布局風(fēng)格。

(1)“廠”字形布局

頁面頂部為標(biāo)志和廣告條，下方左面為主菜單，右面顯示正文信息。

這是一種廣泛采用的布局方式。雨點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明；缺點(diǎn)是

規(guī)矩呆板，如果色彩搭配不當(dāng)，容易令人厭煩。

(2)“國”字形布局

也稱“同”字形布局，是一些大型所采用的類型，即最上面是的標(biāo)題

以及橫幅廣告條，接下來是的一些基本信息。聯(lián)系方式、聲明等。

(3)"三"字形布局

者是一種簡潔明快的網(wǎng)頁布局，在國外用的比較多，國比較少見。這

種布局的特點(diǎn)是在頁面上由橫向兩條色塊將網(wǎng)頁整個分割為三部分，色塊

多放置廣告條或更新和提示信息。

(4)“川”字形布局

整個網(wǎng)頁在垂直方向分為三列，的容按欄目分布在這三列中，最大限

度地突出主頁的索引功能。

(5)Flash布局

這種布局是指整個網(wǎng)頁就是一個Flash動畫，畫面一般比較絢麗、有

趣，是一種比較新潮的布局方式。其實這種布局與封面型結(jié)構(gòu)是類似的，

不同的是由于Flash強(qiáng)大的功能，頁面所表達(dá)的信息更豐富。其視覺效果

及聽覺效果如果處理得當(dāng)，會是一種非常有魅力的布局。

完成工作頁中不同網(wǎng)頁布局的分析(具體容見工作附件)

2.實施版面布局

(1)頁面設(shè)置

根據(jù)用戶需求和效果合理設(shè)置頁面屬性，包括標(biāo)題、頁面邊距、背景,

方法如下

方法一：單擊“修改”菜單，選擇“頁面屬性”菜單項。

方法二：在下方屬性面板中單擊“頁面屬性

（2）使用布局表格進(jìn)行布局

使用布局表格和布局單元格技術(shù)來實現(xiàn)網(wǎng)頁版面定位。（具體方法見

工作頁附件）

練習(xí)：

分析結(jié)構(gòu)

任務(wù)4.圖片編輯與修辭（80分鐘）

引導(dǎo)問題

觀察淘寶網(wǎng)，分析一下該哪些位置使用了圖片，這些圖片進(jìn)行了什么處理

技巧？

通過瀏覽整理后的資料包，找到合適的圖片，插入網(wǎng)頁相應(yīng)的位置，

如果圖片大小與頁要求不符，不要在網(wǎng)頁編輯軟件中對圖片進(jìn)行大圍，

拉伸或縮小，要借助其他圖像處理軟件進(jìn)行處理后再插入，圖片插入

網(wǎng)頁后會彈出‘保存'對話框此時保存的文件名不要使用中文，瀏覽器對

中文文件名不能很好的支持。

第一種情況：圖片直接插入（七彩log。圖）

將光標(biāo)定位在要插入圖像的位置上，執(zhí)行“插入”f“圖像”命令，在

彈出的“選擇圖像源文件”對話框中，選擇圖像文件或直接輸入圖像路徑

即可。

第二種情況；圖片作為單元格背景。

為了能夠在圖片上方輸入文字等對象，有時需要將圖片作背景。選中要操

作的單元格，在屬性面板中尋找操作選項

第三種情況，圖片處理后插入。

如果圖片的大小等不適合網(wǎng)頁放置的時候，可以通過圖像處理軟件進(jìn)行圖

片大小處理。圖像處理軟件很多，現(xiàn)在選擇最簡單也最常見的圖片瀏覽工

具ACDSee來完成處理。

練習(xí)：

根據(jù)前面三種圖片操作方法，將“風(fēng)光美景”區(qū)域的圖片排列整理

任務(wù)5.文字編輯與修辭（80分鐘）

引導(dǎo)問題

在網(wǎng)頁中如何輸入空格？如何進(jìn)行換行、換段？在網(wǎng)頁中如何輸入特殊字

符？在網(wǎng)頁中如何輸入水平線？

1.制作網(wǎng)頁中的文字

1）確定文字輸入位置。用鼠標(biāo)單擊網(wǎng)頁編輯窗口中的空白區(qū)域，窗

口中隨即出現(xiàn)閃動的光標(biāo)，標(biāo)識輸入文字的起始位置

2）輸入文本。選擇適當(dāng)?shù)妮斎敕ǎ⒃谶m當(dāng)?shù)奈恢幂斎胍恍形淖郑?/p>

按［ENTER］鍵可換段

3）按[ENTER]鍵，換行的行距較大，換行會形成不同的段落，而按

[SHIFT]+[ENTER]組合鍵，換行的行距較小，仍為同一個段落。

4）輸入空格。按[CTRL]+[SHIFT]+[SPACE]組合鍵可輸入空格

5）插入水平線。按回車鍵換行，執(zhí)行''插入記錄/HTML/水平線”命

令，為網(wǎng)頁添加橫向分隔線

6）插入特殊字符。單擊“插入”一“HTML”一“特殊字符”一選

擇字符

2.文本區(qū)域的排版

概況欄目有一塊文本區(qū)域，需要錄入文字并排版?？梢酝ㄟ^錄入文字

或通過復(fù)制操作將文字粘貼到此區(qū)域，注意：如果要復(fù)制的文本帶有大量

的格式，請先通過記事本去除格式后復(fù)制。若不做任何設(shè)置，文本區(qū)域會

顯得密集、混亂，不便于閱讀，也不美觀。對段落的設(shè)置需要用到CSS,

以使整個的文字風(fēng)格統(tǒng)一。（具體方法見工作頁）

練習(xí)：

對照效果圖，完成其余容的輸入和編輯，完成主頁的制作。

任務(wù)6.容頁制作與超（80分鐘）

引導(dǎo)問題

在網(wǎng)頁中怎樣把頁面與頁面之間起來？

1..超

超是萬維網(wǎng)的魅力所在。超簡稱，是指從一個網(wǎng)頁到另一個網(wǎng)頁對象

的關(guān)系。超是文檔與文檔之間的，當(dāng)單擊它時，超可指向另外一個頁面文

件。目標(biāo)可以是另外一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以

是圖片、電子地址、文件，甚至是一個應(yīng)用程序。以主頁導(dǎo)航“介紹”

為例，進(jìn)行超操作。選定“美食”文字標(biāo)題，在文本屬性面板中，單擊“”

項右側(cè)的“文件瀏覽”按鈕，通過“選擇文件”對話框，選擇所要的網(wǎng)頁

ms.htm,設(shè)置的“目標(biāo)”，即網(wǎng)頁的打開方式。

練習(xí)：

1.建立主頁與其他容之間的關(guān)系，并通過預(yù)覽進(jìn)行測試。

2.填寫主頁尾部電子，并做好電子的。

3.填寫主頁尾部QQ,并做好對應(yīng)QQ用戶的應(yīng)用程序的。

任務(wù)7.發(fā)布(80分鐘)

引導(dǎo)問題

設(shè)計好企業(yè)的后，在沒有空間的情況下，如何才能對進(jìn)行測試呢？ns有

什么功能？

1.認(rèn)識FTP和FTP操作方式

FTP(FileTransferProtoeol)是文件傳輸協(xié)議，是網(wǎng)絡(luò)上兩臺計

算機(jī)之間傳送文件的協(xié)議，F(xiàn)TP是在Internet上最早使用的協(xié)議之一，

它屬于網(wǎng)絡(luò)協(xié)議組的應(yīng)用層。TFP客戶機(jī)可以給服務(wù)器發(fā)出命令完成下載

文件，上傳文件，創(chuàng)建或改變服務(wù)器上的目錄。FTP文件傳輸有三種使用

方式，分別是命令方式、Web方式和FTP客戶端軟件方式。

(1)命令方式

運(yùn)行fip218.75.2L4命令，開始連接FTP服務(wù)器，輸入用戶名和密

碼進(jìn)入FTP服務(wù)器，通過1s命令顯示出文件清單。

(2)Web方式

在瀏覽器地址欄中輸ftp：//218.75.2.14,回車，在彈出的“登錄身

份”對話框中輸入自己的用戶名與密碼，認(rèn)證通過后，即可進(jìn)入FTP服務(wù)

器。

圖1-48FTPWeb方式

進(jìn)入FTP空間后，可以通過文件操作，完成文件的上傳和下載，如工作

頁圖1-49所示。

(3)FTP客戶端軟件方式

FTP客戶端軟件有很多，常用的FTP客戶端軟件有CuteFTP、Leapftp、

FlashFXP,其功能與操作方式小異，只要掌握了其中一種軟件，其他軟件

的使用便很容易掌握。

2.通過FTP進(jìn)行發(fā)布和管理

運(yùn)用上面介紹的幾種FTP操作方式進(jìn)行的發(fā)布和管理，現(xiàn)以LeapFTP

客戶端軟件和Dreamweaver自帶的FTP聯(lián)動工具為例進(jìn)行介紹。(1)

LeapFTP

如果僅進(jìn)行單次或臨時性連接操作，可以直接在LeapFTP操作界面上

進(jìn)行連接。LeapFTP有4個窗口，左上方為本地目錄窗口(A),右上方為

遠(yuǎn)程目錄窗口(B),左下方為隊列窗口(C),右下方為狀態(tài)窗口(D)。通

過在A窗口打開本地存放的目錄，將要上傳的文件選定后拖拉到B窗口，

在C窗口中顯示上傳的文件隊列，所有的操作狀態(tài)顯示在D窗口。若要進(jìn)

行永久性、固定站點(diǎn)操作，可以在站點(diǎn)管理器中進(jìn)行設(shè)置并連接。

建立“七彩”站點(diǎn)，輸入地址、用戶名、密碼、下次連接時不需要重

復(fù)填寫，只要單擊""按鈕即可。

(2)Dreamweaver自帶的FPT聯(lián)動工具

單擊“站點(diǎn)”菜單，選擇“站點(diǎn)管理器”菜單項，選擇相應(yīng)的站點(diǎn)，單

擊“編輯”按鈕，在彈出：“站點(diǎn)設(shè)置”對話框中單擊“高級”選項，進(jìn)

行“遠(yuǎn)程信息”項的設(shè)置，設(shè)置好站點(diǎn)信息，在本地保存文件時，會自動

將文件上傳至服務(wù)器，實現(xiàn)聯(lián)動，使本地站點(diǎn)文件服務(wù)器站點(diǎn)文件保持一

致。

練習(xí)：

1.將制好的通過leapFTP工具上傳至指定的FTP服務(wù)器。

2.寫出測試的步驟和條件。

網(wǎng)站測試步驟」網(wǎng)條件

P

P*

A

*

<3

（教學(xué)評價）

教學(xué)活動5：檢查（80分鐘）

學(xué)習(xí)容學(xué)生活動教師活動設(shè)計意圖和資源準(zhǔn)備

1.提交作品（10分鐘）1.學(xué)生自我檢查評對網(wǎng)頁進(jìn)行測試，重通過展示成果，讓學(xué)

學(xué)生自我檢查評價自己的作品。分析不足之處，提出改進(jìn)措施等，完成個人工作日志填價自己的作品點(diǎn)對做得不理想的地生了解自己的學(xué)習(xí)成

寫。2.提交作品方進(jìn)行分析，針對學(xué)果，激起學(xué)生的興趣，

2.展示成果（40分鐘）3.展示成果：小組生在完成任務(wù)過程中交流總結(jié)經(jīng)驗主要是

小組成員相互展示自己的工作成果，評估作品完成質(zhì)量，關(guān)注團(tuán)隊合作，敬業(yè)勤業(yè)等職之間相互展示自己的遇到的普遍問題進(jìn)行讓學(xué)生認(rèn)識到自己的

業(yè)素養(yǎng)的評估，各小組相互并提出修改建議。工作成果，評估作品點(diǎn)評，并將技術(shù)文件不足，以便繼續(xù)努力。

3.交流總結(jié)經(jīng)驗（10分鐘）完成質(zhì)量歸檔，提供規(guī)化技術(shù)修改完善作品為以后

教師對網(wǎng)頁進(jìn)行分析測試，重點(diǎn)對做得不理想的地方進(jìn)行分析，針對學(xué)生在完成任務(wù)過4.小組間相互檢查文檔供學(xué)生參考。的課程做鋪墊。

程中遇到的普遍問題進(jìn)行點(diǎn)評，并將技術(shù)文件歸檔，提供規(guī)化技術(shù)文檔供學(xué)生參考。同作品，并提出修改意

時教師指引學(xué)生歸納總結(jié)，引導(dǎo)學(xué)生獨(dú)立構(gòu)建自己的經(jīng)驗和知識體系。見交流并總結(jié)經(jīng)驗

4.修改完善作品（30分鐘）

繼續(xù)修改作品，提交作品，展示成果。

（教學(xué)評價）

教學(xué)活動6：評價（80分鐘）

學(xué)習(xí)容學(xué)生活動教師活動設(shè)計意圖和資源準(zhǔn)備

1.教師評價小組作品1.聽取教師的評價1.指導(dǎo)學(xué)生對自己通過自評和互評，讓

2.完成作品檢查表填寫（檢查表見工作頁附件）意見的作品進(jìn)行評價，包學(xué)生了解自己的長處

2.填寫作品檢查表括學(xué)生的自評和學(xué)生和短處，繼續(xù)進(jìn)行改

互評進(jìn)。

2.指導(dǎo)學(xué)生對其它

同學(xué)的作品進(jìn)行評價

3.對學(xué)生的作品進(jìn)

行評價

4.指導(dǎo)學(xué)生填寫作

品檢查表

（教學(xué)評價）

課后任務(wù)布置

］、優(yōu)化

2：對進(jìn)行維護(hù)管理

教學(xué)反思

基本型開發(fā)一一“七彩”主題旅游

學(xué)習(xí)任務(wù)：“七彩”主題旅游

學(xué)習(xí)目標(biāo)

通過完成本次任務(wù)，學(xué)生能夠

?通過多方調(diào)研明確客戶需求，撰寫需求確認(rèn)分析說明書；

?通過組討論，做好開發(fā)詳細(xì)計劃，撰寫項目工作計劃表；

?通過小組分工合作，自主探究學(xué)習(xí)，設(shè)計有特色的；

?通過測試，發(fā)現(xiàn)存在問題并提出解決方案；

?能夠展示小組作品的優(yōu)勢和特色，并能客觀評價他人；

?通過基于工作情境的角色扮演，熟悉開發(fā)的工作流程，并從中獲得溝通表達(dá)，解決問題的經(jīng)驗，體驗

團(tuán)隊合作與信息共享的樂趣。

建議課時:24課時

資訊

【任務(wù)描述】小剛剛通過應(yīng)聘進(jìn)入了一家旅游公司，公司讓他負(fù)責(zé)的維護(hù)與更新工作。公司為了能在金秋

旅游節(jié)活動中迅速搶占商機(jī)，推出了“七彩”精品線路，希望通過制作專題達(dá)到增強(qiáng)宣傳和服務(wù)客戶的效

果。由于時間緊迫，現(xiàn)要求小與策劃部進(jìn)行快速溝通和需求分析，完成資料的整理和素材的簡單加工，設(shè)

計出基本框架，再通過網(wǎng)頁編輯工具完成網(wǎng)頁版面的制作和容元素的編輯，最后通過公司服務(wù)器發(fā)布到互

聯(lián)網(wǎng)上。

明確任務(wù)后，教師幫助學(xué)生理解任務(wù)要求、分析任務(wù)，并介紹創(chuàng)建站點(diǎn)、繪制草圖、表格在頁面布局

中的作用，同時提供獲取資訊的方法和途徑等信息。學(xué)生根據(jù)老師的提示及任務(wù)，尋找完成任務(wù)所需要的

資料。例如：

1、瀏覽相關(guān)產(chǎn)品宣傳，參考網(wǎng)頁布局結(jié)構(gòu)

2、制作總體設(shè)計說明書

3.收集網(wǎng)頁素材資源，包括景點(diǎn)圖片的拍攝與收集，旅游線路、景點(diǎn)介紹文字說明等。

決策

學(xué)習(xí)準(zhǔn)備

1.在教師協(xié)調(diào)下學(xué)生自愿分組

2.廣播教學(xué)區(qū)：多媒體廣播教學(xué)設(shè)備；

3.分組實操區(qū)：配備8組工作臺，每組工作臺有6臺電腦;

4.實物資料查詢區(qū)：《DreamweaverMX2004》、導(dǎo)學(xué)課件

5.電子資料查詢區(qū)：連接Internet提供上網(wǎng)搜索資料；

6.作品演示區(qū)：配備投影儀及展示板；

廣

播

教

學(xué)

區(qū)

引導(dǎo)問題

為旅游公司設(shè)計旅游，在開始構(gòu)思的時候需要充分地了解客戶需求，要達(dá)到什么目的、效果？產(chǎn)品有什么

特點(diǎn)？主要的客戶群體是什么？以什么樣的容服務(wù)形式出現(xiàn)？

在教師協(xié)調(diào)下學(xué)生自愿分組，進(jìn)行探究式學(xué)習(xí)，學(xué)生經(jīng)過討論以小組方式擬定工作過程，確定網(wǎng)頁素材，

網(wǎng)頁表格的添加方式，輔助的選用，美化設(shè)計等，教師聽取學(xué)生的決策意見，提出可行性方面的質(zhì)疑，提

供指導(dǎo)意見，幫助形成方案并指導(dǎo)學(xué)生進(jìn)行方案優(yōu)化，最終做出決策，形成團(tuán)隊實施方案。

1、用戶訪談，收集需求

通過“策劃部門充分溝通，了解專題的基本要求，瀏覽策劃部門提供的資料，收集各種需求

名稱“七彩”專題旅游腳本支持純HTML

所用域名Lyj.yunnan.數(shù)據(jù)庫支持否

負(fù)責(zé)部門策劃部聯(lián)系人

需求訪談記錄

2、引導(dǎo)需求要點(diǎn)

9）通過與用戶溝通，引導(dǎo)用戶提出具體需求

10）指導(dǎo)用戶選擇與主題相關(guān)的域名，要便于訪問者使用

11）根據(jù)所能提供的條件，明確建設(shè)的規(guī)模

12）根據(jù)用戶的實際情況確定主頁要呈現(xiàn)的容和方式

13）明確所采用的語言

14）明確頁面的寬度和色彩風(fēng)格

15）明確導(dǎo)航項目和子頁容呈現(xiàn)方式

16）明確開發(fā)時間和后期維護(hù)要求

3、需求說明確認(rèn)

名稱腳本支持

所用域名數(shù)據(jù)庫支持

負(fù)責(zé)部門聯(lián)系人

需求要點(diǎn)

客戶意見和確認(rèn)

簽字________

計劃

在需求分析的基礎(chǔ)上，建設(shè)負(fù)責(zé)人根據(jù)實際情況，明確實施目標(biāo)，確定實施方案，并將其遞交給客戶,

由其負(fù)責(zé)人簽字確認(rèn)

XXXXX公司建設(shè)方案書

一、背景

著重述建站的意義和目的

二、系統(tǒng)分析

1、開發(fā)環(huán)境

明確所采用的網(wǎng)頁腳本語言，靜態(tài)網(wǎng)頁這一部分要求比較簡單

2、版面要求

述版面的寬度、長度、色彩搭配、總體風(fēng)格等情況

3、支持語言

明確選擇簡體中文，還是采用多語言

三、設(shè)計方案

1、結(jié)構(gòu)

建議以列表的方式將各欄目分層呈現(xiàn)出來

2、分塊說明

對每一欄目進(jìn)行詳細(xì)說明，也可以配合簡圖

四、測試與維護(hù)

述測試驗收的環(huán)節(jié)，明確后期的維護(hù)工作如何開展以及雙方的職責(zé)

五、進(jìn)度安排

述開發(fā)各階段時間和總工期

六、費(fèi)用說明

建議以列表的方式羅列域名、服務(wù)器配置、開發(fā)、更新維護(hù)、推廣等各環(huán)節(jié)的費(fèi)用

客戶意見：

簽字：_____________

工作計劃表:

計劃計劃容計劃完成時間負(fù)責(zé)人

設(shè)計規(guī)劃書

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

繪制首頁的頁面布局草

圖，規(guī)劃頁面布局結(jié)構(gòu)

制作首頁

制作分頁

發(fā)布

實施

學(xué)生根據(jù)計劃方案完成設(shè)計和模擬，做好相關(guān)資料的記錄，教師監(jiān)督學(xué)生的學(xué)習(xí)過程，通過【引導(dǎo)問

題】和【學(xué)習(xí)思考】培養(yǎng)學(xué)生分析問題、解決問題的能力，糾正學(xué)習(xí)偏差。

教師下發(fā)學(xué)習(xí)任務(wù)，學(xué)生根據(jù)學(xué)習(xí)任務(wù)做好完成任務(wù)的計劃，教師對任務(wù)重點(diǎn)難點(diǎn)進(jìn)行講解和分析，

學(xué)生認(rèn)真做好知識點(diǎn)記錄，并安排好完成計劃的時間和步驟，重點(diǎn)掌握重要知識點(diǎn)，使學(xué)習(xí)計劃能夠按時

完成，根據(jù)計劃方案操作完成設(shè)計任務(wù)，并做好相關(guān)記錄。

由于剛開始接觸網(wǎng)頁制作，學(xué)生對軟件的使用都還沒有基礎(chǔ)，因此，本任務(wù)應(yīng)先由教師分模塊演示并

講解一些重要操作，學(xué)生同步進(jìn)行模仿訓(xùn)練。而對知識掌握得相對比較熟練、操作比較快的學(xué)生，在操作

過程中如果遇到問題，教師可引導(dǎo)學(xué)生查找相關(guān)的教材、教學(xué)參考書中的相關(guān)容或通過網(wǎng)絡(luò)獲取相關(guān)容，

引導(dǎo)他們解決問題。而那些對知識把握得較慢的學(xué)生，則可詳細(xì)講解或建議學(xué)生反復(fù)學(xué)習(xí)相關(guān)章節(jié)的容。

鼓勵小組成員在工作過程中互相幫助，解決在完成任務(wù)中所遇到的問題。

任務(wù)一：準(zhǔn)備工作

引導(dǎo)問題

在建設(shè)的時候需要準(zhǔn)備什么素材？有哪些素材是應(yīng)該由客戶提供的呢？放置素材的文件夾該如何設(shè)

置？

一、任務(wù)目標(biāo)

能夠瀏覽并整理客戶提供的資料和素材。能夠通過網(wǎng)絡(luò)搜索獲得素材。

二、任務(wù)實現(xiàn)

1.整理提供的資料和素材

客戶提供的資料和素材往往隨機(jī)存放，顯得比較混亂。為了便于認(rèn)識需求和后續(xù)的制作，需要將其整

理、歸類。在此過程中，利用資源管理器運(yùn)行文件夾整理，熟悉文件夾和文件的建立、復(fù)制、移動、刪除

等操作，從而增強(qiáng)對客戶業(yè)務(wù)流程的認(rèn)識，拓展后續(xù)制作的思路。

練一練：

將客戶提供的資料包，如圖1—1所示，按預(yù)想的思路整理成整齊的資料包，如圖1—2所示。

文件g編輯（E）查看w）收藏@）工具（X）幫助⑻

。后退，，。?多搜索文件夾11nb

地址①）,-JF八新建文件夾vi鼠轉(zhuǎn)到鏈接》