【網(wǎng)頁設(shè)計(jì)和制作】課程教學(xué)實(shí)施大綱

1、網(wǎng)頁設(shè)計(jì)與制作課程實(shí)施性教學(xué)大綱課程性質(zhì)和任務(wù)本課程的目的是通過對HTML、VBScript編程技術(shù)、Dreamweaver 8、ASP動(dòng)態(tài)頁面設(shè)計(jì)的學(xué)習(xí)，掌握綜合應(yīng)用網(wǎng)頁設(shè)計(jì)的各種技能，培養(yǎng)學(xué)生的自我學(xué)習(xí)和動(dòng)手能力，真正能使用所學(xué)的知識進(jìn)行建設(shè)。課程培養(yǎng)目標(biāo)【教學(xué)目標(biāo)】熟練掌握Web站點(diǎn)的基本概念；熟練掌握HTML文檔結(jié)構(gòu)和各種標(biāo)記的使用；掌握VBScript 編程技術(shù)和ASP技術(shù)；掌握Dreamweaver 8頁面設(shè)計(jì)方法和常用的表單對象?！灸芰δ繕?biāo)】熟練掌握利用HTML標(biāo)記進(jìn)行頁面設(shè)計(jì)的方法和技巧；熟練掌握利用VBScript、ASP進(jìn)行動(dòng)態(tài)頁面設(shè)計(jì)的方法和技巧；熟練掌握利用Dreamw

2、eaver 8進(jìn)行頁面設(shè)計(jì)與布局的方法和技巧。養(yǎng)成良好的網(wǎng)頁設(shè)計(jì)與制作習(xí)慣。養(yǎng)成良好的自主自學(xué)能力。【思想教育目標(biāo)】培養(yǎng)學(xué)生科學(xué)、嚴(yán)謹(jǐn)?shù)膽B(tài)度。培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的學(xué)習(xí)能力。培養(yǎng)學(xué)生全面發(fā)展的學(xué)習(xí)能力。培養(yǎng)學(xué)生的社會(huì)責(zé)任感。培養(yǎng)學(xué)生的良好的職業(yè)道德和敬業(yè)精神。課程教學(xué)要求在接受大學(xué)計(jì)算機(jī)基礎(chǔ)知識教育的基礎(chǔ)上，從使用角度進(jìn)一步掌握計(jì)算機(jī)的基本知識，并了解當(dāng)前有關(guān)計(jì)算機(jī)的新知識和新熱點(diǎn)，以及當(dāng)前的流行軟件。掌握制作網(wǎng)頁的基礎(chǔ)知識。掌握網(wǎng)頁的核心技術(shù)HTML語言，涉及了HTML語言文檔的基本結(jié)構(gòu)，逐一介紹了HTML語言中的格式、表格、框架結(jié)構(gòu)、表單、圖象標(biāo)記處理以及移動(dòng)文字等容。了解支持實(shí)現(xiàn)客戶端動(dòng)

3、態(tài)頁面(DHTML)的DOM(文檔對象模型)、CSS(層疊樣式表)和SCRIPT(腳本程序語言)技術(shù)及DHTML頁面的設(shè)計(jì)。掌握專業(yè)網(wǎng)頁設(shè)計(jì)工具Dreameweaver軟件的使用及用它進(jìn)行頁面制作。熟悉綜合開發(fā)的全過程。在教學(xué)過程中，應(yīng)特別重視培養(yǎng)學(xué)生利用計(jì)算機(jī)知識進(jìn)行自學(xué)的能力和探索、創(chuàng)新的精神。課程重點(diǎn)與難點(diǎn)網(wǎng)頁設(shè)計(jì)與制作課程的重點(diǎn)有網(wǎng)頁的布局、網(wǎng)頁中文本和圖像的處理、超級與導(dǎo)航欄、HTML語言、使用CSS樣式美化網(wǎng)頁、網(wǎng)頁設(shè)計(jì)。本課程的難點(diǎn)有網(wǎng)頁中圖像的處理、動(dòng)畫的制作、VBScript技術(shù)的應(yīng)用、的規(guī)劃與組織、網(wǎng)頁中特效制作。課程的重點(diǎn)、難點(diǎn)及解決方法的具體說明如下表所示：類別知識點(diǎn)解

4、決辦法重點(diǎn)網(wǎng)頁的布局 網(wǎng)頁中文本和圖像的處理 經(jīng)典網(wǎng)頁賞析，形成深刻印象 分析多種網(wǎng)頁布局的特點(diǎn)、導(dǎo)航欄的特點(diǎn) 真實(shí)案例教學(xué)與實(shí)踐 HTML語言 使用CSS樣式美化網(wǎng)頁 通過真實(shí)案例分析HTML和CSS，先進(jìn)行操作，然后分析代碼 任務(wù)型教學(xué)，先提出問題，然后分析解決方法，觀察其實(shí)際效果，最后分析HTML代碼的變化 網(wǎng)頁設(shè)計(jì) 先分析具體實(shí)例，形成感性認(rèn)識，然后總結(jié)一般規(guī)律，運(yùn)用一般規(guī)律指導(dǎo)網(wǎng)頁設(shè)計(jì)。 難點(diǎn)網(wǎng)頁中圖像的處理 動(dòng)畫的制作 開設(shè)選修課程圖形圖像處理與動(dòng)畫制作技術(shù)，為學(xué)習(xí)網(wǎng)頁設(shè)計(jì)提供保障。 VBScript技術(shù)的應(yīng)用 網(wǎng)頁中特效制作 通過分析目前中常用的特效，了解特效的制作技術(shù)。 通過觀

5、察常見特效的效果及制作方法，了解JavaScript技術(shù)的應(yīng)用，激發(fā)學(xué)生對JavaScript技術(shù)的興趣。 的規(guī)劃與組織 以實(shí)例分析的規(guī)劃與組織方法。 讓學(xué)生自己動(dòng)手進(jìn)行的規(guī)劃與組織。 教學(xué)方法任務(wù)驅(qū)動(dòng)教學(xué)方法：讓學(xué)生在一個(gè)個(gè)典型“任務(wù)”驅(qū)動(dòng)下，引導(dǎo)幫助學(xué)生完成一系列“任務(wù)”，把知識的學(xué)習(xí)和知識的應(yīng)用有機(jī)地融合在一起，讓學(xué)生達(dá)到融會(huì)貫通、以點(diǎn)帶面的效果。項(xiàng)目教學(xué)法：在課堂教學(xué)中把理論與實(shí)踐有機(jī)地結(jié)合起來，使學(xué)生積極參與到教學(xué)過程中變被動(dòng)為主動(dòng)，有效地調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性。實(shí)踐教學(xué)法：本課程實(shí)踐很強(qiáng)，學(xué)生只聽不練根本達(dá)不到學(xué)習(xí)該課程的目的，根據(jù)課時(shí)安排以及要掌握基本知識，設(shè)置實(shí)驗(yàn)項(xiàng)目，培養(yǎng)學(xué)生動(dòng)

6、手能力。問題討論與小組協(xié)作：要求學(xué)生以35人為小組單位，在課外完成需要落實(shí)的理論與實(shí)踐知識，通過問題討論與小組協(xié)作學(xué)習(xí)，使每位同學(xué)都能達(dá)到應(yīng)達(dá)到的能力目標(biāo)。教學(xué)參考書目京文等編著.網(wǎng)頁設(shè)計(jì)與制作.高等教育（）：2007京文.網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)與考試指導(dǎo).高等教育（）：2007明日科技編著.ASP開發(fā)技術(shù)大全.人民郵電（）：2007梁芳、莉莉主編.網(wǎng)頁設(shè)計(jì)與制作（第2版）. 清華大學(xué)（）：2011樺、利娟主編.網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程. 清華大學(xué)（）：2011國慶主編.網(wǎng)頁設(shè)計(jì)與制作. 清華大學(xué)（）：2013教學(xué)基本容網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識【教學(xué)目標(biāo)】了解：的有關(guān)名詞，如：WWW服務(wù)器、Web節(jié)點(diǎn)、網(wǎng)頁

7、、主頁（Homepage）、瀏覽器(Browser)、超級、http（hypertext transmission protocol）、URL(Uniform Resource Locator)、html（hypertext markup language）語言等；常用的網(wǎng)頁設(shè)計(jì)工具。掌握：設(shè)計(jì)的基本思路；【教學(xué)重點(diǎn)與難點(diǎn)】常用的網(wǎng)頁編輯器【教學(xué)容】Internet基礎(chǔ) Internet概述 WWW與網(wǎng)頁 設(shè)計(jì)的基本思路 網(wǎng)頁設(shè)計(jì)常用工具 網(wǎng)頁制作工具 網(wǎng)頁美化工具 【思考與實(shí)踐】簡述WWW的工作原理。什么是網(wǎng)頁與？簡述建設(shè)的基本思路。HTML語言【教學(xué)目標(biāo)】了解：HTML語言的發(fā)展情況；掌握

8、：HTML的基本概念、文檔的基本結(jié)構(gòu)，以及HTML文檔結(jié)構(gòu)標(biāo)記、段落標(biāo)記、字符標(biāo)記、標(biāo)記、圖像標(biāo)記、列表標(biāo)記、表格標(biāo)記等HTML的常用標(biāo)記及相關(guān)屬性；熟練應(yīng)用HTML標(biāo)記語言對利用網(wǎng)頁設(shè)計(jì)工具軟件設(shè)計(jì)出的網(wǎng)頁進(jìn)行修改和優(yōu)化，從而實(shí)現(xiàn)對網(wǎng)頁精確的控制。【教學(xué)重點(diǎn)與難點(diǎn)】表格、表單、框架和CCS樣式【教學(xué)容】HTML基礎(chǔ) 基本概念 HTML文檔的基本結(jié)構(gòu) 文本格式標(biāo)記 標(biāo)題標(biāo)記 換行標(biāo)記 段落標(biāo)記 字體標(biāo)記 字形標(biāo)記 字符樣式標(biāo)記 水平線標(biāo)記預(yù)定義標(biāo)記 特殊字符的插入 列表標(biāo)記 有序列表標(biāo)記 無序列表標(biāo)記 多媒體元素標(biāo)記 插入圖像標(biāo)記 插入多媒體文件標(biāo)記 插入背景音樂標(biāo)記 插入滾動(dòng)字幕標(biāo)記 超標(biāo)記

9、 創(chuàng)建站點(diǎn) 創(chuàng)建站點(diǎn)間 創(chuàng)建錨 創(chuàng)建等其他 表格標(biāo)記 常用屬性 常用屬性 常用屬性 常用屬性 常用屬性 表單標(biāo)記 創(chuàng)建表單 輸入型表單控件 文本域表單控件 下拉列表框表單控件 框架標(biāo)記 框架集 框架 CSS樣式 認(rèn)識CSS CSS語法 CSS的使用 案例解析 設(shè)計(jì)思路 案例結(jié)構(gòu) 頁面解析 【思考與實(shí)踐】試按照要求編寫program.htm文件，實(shí)現(xiàn)下面的表格。頁面功能要求：“課程表”采用3號標(biāo)題，居中顯示；表格的寬度為345，高度為139，邊框?qū)挾葹?；“課號”、“課程名”、“學(xué)分”采用5號標(biāo)題，居中顯示；“網(wǎng)絡(luò)原理”和“網(wǎng)頁設(shè)計(jì)與制作”課程的詳細(xì)說明文件分別為該網(wǎng)頁所在目錄的net.htm和

10、web.htm，需要為表中的課程名設(shè)置相應(yīng)的超，單擊后以一個(gè)新窗口打開相應(yīng)的說明頁；其他屬性自行定義。按下圖所示完成考生文件夾下的program.htm，設(shè)計(jì)一個(gè)用戶注冊信息表。頁面功能要求：“用戶注冊”采用3號標(biāo)題，居中顯示；整個(gè)表單采用一個(gè)兩列的表格進(jìn)行布局，其中第一列占窗口的20%；輸入的密碼和密碼驗(yàn)證不能以明文顯示；性別默認(rèn)是“男”；用戶名和電子文本框文字大小是40；學(xué)歷可從下拉列表“碩士以上”、“大學(xué)本科”、“大專以下”三者中選擇其一，默認(rèn)值為“碩士以上”；最后的兩個(gè)命令按鈕分別實(shí)現(xiàn)“登錄”和“全部重寫”的功能；表單采用“post”方式向服務(wù)器當(dāng)前目的“userlogin.asp”提

11、交數(shù)據(jù)；表單各域的名稱可以自己定義。Dreamweaver 8網(wǎng)頁設(shè)計(jì)【教學(xué)目標(biāo)】了解：Dreamweaver 8基本概念，WWW服務(wù)器的設(shè)置，Dreamweaver 8的幾種視圖方式及切換方法，會(huì)預(yù)覽網(wǎng)頁；Dreamweaver 8時(shí)間軸的概念、時(shí)間軸中各元素的功能及時(shí)間軸的常用操作方法等。掌握：網(wǎng)頁文檔中添加文本和文本的格式化方法、插入日期和時(shí)間、插入水平線、設(shè)置網(wǎng)頁的屬性、插入圖像、為頁面背景添加圖像、圖像屬性的設(shè)置、圖像與文本的混合排版、設(shè)置圖像的位置和邊框、添加導(dǎo)航條等方法；表格和單元格的屬性設(shè)置，會(huì)用表格組織網(wǎng)頁的總體布局；使用布局視圖規(guī)劃頁面的總體布局；超和超路徑的基本概念；建立

12、超的操作方法，學(xué)會(huì)建立文本超；插入表單以及表單元素的方法；CSS樣式表的基本概念，會(huì)使用CSS樣式面板；【教學(xué)重點(diǎn)與難點(diǎn)】頁面布局與設(shè)計(jì)【教學(xué)容】Dreamweaver 8簡介 Dreamweaver 8操作界面 標(biāo)題欄 菜單欄 工具欄 網(wǎng)頁編輯窗口 狀態(tài)欄 面板工具 站點(diǎn)的建立與管理 建立站點(diǎn) 管理站點(diǎn) 頁面設(shè)計(jì) 頁面屬性設(shè)置 文本編輯 圖像操作及應(yīng)用 表格的使用 超 使用多媒體 層的使用 框架 樣式表的創(chuàng)建與使用 庫與模板 表單及其應(yīng)用 行為與時(shí)間軸 案例解析 設(shè)計(jì)思路 案例結(jié)構(gòu) 頁面解析 【思考與實(shí)踐】閱讀以下代碼，說明該頁面文件的運(yùn)行結(jié)果。課程表課程表星期一星期二星期三語文數(shù)學(xué)英語化學(xué)

13、物理邏輯閱讀以下代碼該，說明該頁面文件的功能?？忌?，你好！歡迎光臨本！建立本地站點(diǎn)，頁面要求有導(dǎo)航欄、文字、圖像以及站點(diǎn)的廣告圖像等（用鼠標(biāo)經(jīng)過圖像來制作）在Dreamweaver建立表格，然后輸入相關(guān)數(shù)據(jù)，使數(shù)據(jù)能夠正常導(dǎo)出并且能夠把其他數(shù)據(jù)導(dǎo)入到此表格中。VBScript腳本語言【教學(xué)目標(biāo)】熟練掌握VBScript的語法規(guī)則、函數(shù)和三種基本結(jié)構(gòu)；熟練掌握使用VBScript編寫頁面的方法；熟練掌握VBScript程序的事件處理；掌握文檔對象的使用?！窘虒W(xué)重點(diǎn)與難點(diǎn)】VBScript的數(shù)據(jù)類型，過程與函數(shù)及編程【教學(xué)容】VBScript概述 VBScript基本概念 在HTML網(wǎng)頁中使用 V

14、BScript VBScript的數(shù)據(jù)類型 常量、變量與表達(dá)式 常量的定義 變量的聲明與賦值 數(shù)組的定義 運(yùn)算符與表達(dá)式 VBScript常用函數(shù) 數(shù)學(xué)函數(shù) 字符串處理函數(shù) 轉(zhuǎn)換函數(shù) 日期時(shí)間函數(shù) 對話框函數(shù) VBScript語句 條件語句 循環(huán)語句 VBScript過程與函數(shù) Sub過程 Function函數(shù) VBScript編程 Window對象 Document對象 案例實(shí)現(xiàn) 設(shè)計(jì)思路 案例結(jié)構(gòu) 頁面解析 【思考與實(shí)踐】設(shè)計(jì)一個(gè)頁面，提示輸入N值，然后計(jì)算123N的值并顯示。使用VBScript中的事件：頁面中只顯示一個(gè)“點(diǎn)擊試一下”的按鈕；當(dāng)用戶單擊“點(diǎn)擊試一下”的按鈕后，彈出對話框，

15、顯示“你成功了！”。編寫一個(gè)頁面，在狀態(tài)欄中顯示系統(tǒng)當(dāng)前時(shí)間。編寫一個(gè)求最大值的HTML頁面，輸入兩個(gè)整數(shù)并求出較大者。利用Window對象的有關(guān)方法實(shí)現(xiàn)在狀態(tài)欄顯示滾動(dòng)文本“歡迎光臨！”。ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)【教學(xué)目標(biāo)】理解ASP運(yùn)行機(jī)制；熟練掌握ASP運(yùn)行環(huán)境的搭建方式；熟練掌握ASP建對象的應(yīng)用；熟練掌握利用ADO實(shí)現(xiàn)頁面與數(shù)據(jù)庫的連接；能夠設(shè)計(jì)ASP動(dòng)態(tài)頁面?！窘虒W(xué)重點(diǎn)與難點(diǎn)】利用ADO實(shí)現(xiàn)頁面與數(shù)據(jù)庫的連接及常用的ASP組件【教學(xué)容】ASP簡介 ASP概述 ASP運(yùn)行環(huán)境及工作原理 ASP文件的組成 ASP建對象 Request對象 Response對象 Server對象 Sessio

16、n對象 Application對象利用ADO訪問數(shù)據(jù)庫 SQL簡介 ADO基本編程模型 Connection對象 Recordset對象 ASP組件技術(shù) ASP置組件簡介 常用第三方組件簡介 案例解析 設(shè)計(jì)思路 案例結(jié)構(gòu) 頁面解析 【思考與實(shí)踐】下面程序段執(zhí)行完畢，頁面上顯示的容是什么？%Response.Write”Response.Write”Response.Write”%show.asp頁面容包含如下腳本：如果在瀏覽器地址欄里輸入這樣的地址：show.asp?name=王麗&sex=女，則頁面上會(huì)顯示怎樣的容？設(shè)計(jì)一個(gè)表單處理頁面，文件名為test.asp。表單頁面為exam1.htm

17、，運(yùn)行該頁面輸入容并提交該網(wǎng)頁后，會(huì)執(zhí)行test.asp處理程序。test.asp的處理后，按如下格式輸出信息：我的：性別：職業(yè)：exam1.htm網(wǎng)頁代碼如下：請?zhí)顚憘€(gè)人信息：性別：男女職業(yè)：公務(wù)員教師金融從業(yè)者商人其他 設(shè)計(jì)一個(gè)頁面，當(dāng)用戶第一次訪問時(shí)，需要在線注冊、性別等信息，然后把信息保存到Cookies中。當(dāng)該用戶再次訪問時(shí)，則顯示“某某，您好，您是第幾次光臨本”的歡迎信息。制作實(shí)例【教學(xué)目標(biāo)】熟悉設(shè)計(jì)前期所需的準(zhǔn)備工作；熟練掌握根據(jù)主題的需要來創(chuàng)建數(shù)據(jù)庫；能夠把握頁面設(shè)計(jì)的主題要求，并了解制作完成后的測試與上傳?！窘虒W(xué)重點(diǎn)與難點(diǎn)】規(guī)劃設(shè)計(jì)【教學(xué)容】規(guī)劃設(shè)計(jì) 確定的主題和名稱

18、 確定的CI形象 確定的欄目 確定的目錄結(jié)構(gòu) 確定的結(jié)構(gòu) 的整體風(fēng)格創(chuàng)意設(shè)計(jì) 首頁的設(shè)計(jì) 在Dreamweaver中創(chuàng)建站點(diǎn) 計(jì)算機(jī)系設(shè)計(jì)實(shí)例 的規(guī)劃設(shè)計(jì) 靜態(tài)部分的實(shí)現(xiàn) 動(dòng)態(tài)部分（留言板） 的實(shí)現(xiàn)的發(fā)布和維護(hù) 【思考與實(shí)踐】建立一個(gè)db.mdb文件，其中有2個(gè)表employee和salary，分別存放員工信息和員工的薪水信息。Employee表至少包含EmployeeID（自動(dòng)編號）、EmployeeName（文本）、EmployeeCation（文本）字段，salary表至少包含EmployeeID（數(shù)字）、CurrentSalary（數(shù)字）字段。兩個(gè)表通過EmployeeID建立關(guān)系，并分別在兩個(gè)表中輸入一些數(shù)據(jù)。寫兩個(gè)頁面，要求在第一個(gè)頁面輸入職工的編號，在第二個(gè)頁面顯示出該職工的編號、職稱和薪水，并能通過頁面上的返回第一個(gè)頁面重新輸入職工的編號進(jìn)行查詢。教學(xué)時(shí)數(shù)分配教學(xué)容學(xué)時(shí)分配合計(jì)講課實(shí)驗(yàn)上機(jī)討論/習(xí)題網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識224HTML語言224Dreamweaver 8網(wǎng)頁設(shè)計(jì)246VBScript腳本語言