《網(wǎng)站前端開發(fā)技術(shù)》教學(xué)大綱

1、網(wǎng)站前端開發(fā)技術(shù)教學(xué)大綱第一部分：使用說明一、課程性質(zhì)與特點(diǎn)本課程屬于專業(yè)選修課（考查課）。主要講解網(wǎng)站前端開發(fā)相關(guān)技術(shù)。該課程是一門實(shí)踐性很強(qiáng)的課程，需要大量的上機(jī)實(shí)驗(yàn)加強(qiáng)對課程的理解。二、在專業(yè)教學(xué)計(jì)劃中的地位和作用網(wǎng)站前端開發(fā)技術(shù)是一門非常必要的專業(yè)選修課，是學(xué)生學(xué)習(xí)其他Web類課程的基礎(chǔ)。該課程是計(jì)算機(jī)與信息技術(shù)課程體系中Web應(yīng)用開發(fā)類模塊中的核心課程之一。通過對網(wǎng)站前端開發(fā)技術(shù)的學(xué)習(xí)，使學(xué)生掌握網(wǎng)站開發(fā)與建設(shè)的HTML、CSS及JAVASCRIPT等基礎(chǔ)技術(shù)，熟悉以Bootstrap為代表的框架技術(shù)，為后續(xù)的JAVA WEB編程基礎(chǔ)課程打下良好的知識儲備。三、教學(xué)目的通過該課程的學(xué)

2、習(xí)，學(xué)生應(yīng)掌握構(gòu)建網(wǎng)站所需的HTML、CSS及JAVASCRIPT等靜態(tài)頁面技術(shù)，熟悉Bootstrap框架技術(shù)，最終能夠獨(dú)立設(shè)計(jì)并創(chuàng)建自己的站點(diǎn)。同時為后續(xù)JAVA WEB編程課程做好知識儲備。四、先修課程C語言或Java語言五、學(xué)時與學(xué)分本課程總計(jì)48學(xué)時（講授：32學(xué)時，實(shí)驗(yàn)：16學(xué)時），2.5學(xué)分，每周3學(xué)時。六、教學(xué)方法課堂講授，多媒體演示，上機(jī)實(shí)踐。七、考核方式及成績評定考核方式：考查，主要采用平時成績 期末考試結(jié)合方式考核。成績評定：平時成績占50%，期末考試占60%。八、教材及主要參考書目（一）教材HTML CSS JavaScript Bootstap網(wǎng)站開發(fā)實(shí)用技術(shù)（3版）

3、作者：張大為、劉德山，人民郵電出版社，2020（二）參考資料（1）唐四薪. 基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)與制作. 北京：清華大學(xué)出版社，2014.（2）黑馬程序員.響應(yīng)式Web開發(fā)項(xiàng)目教程（HMTL5 CSS3 Bootstrap）. 北京：人民郵電出版社，2019.（3）陸凌牛. HTML5與CSS3權(quán)威指南. 3版. 北京：機(jī)械工業(yè)出版社，2015.第二部分：課程內(nèi)容第一章 網(wǎng)站開發(fā)基礎(chǔ)知識一、教學(xué)目的與要求學(xué)生應(yīng)了解互聯(lián)網(wǎng)的工作機(jī)制，掌握網(wǎng)站建設(shè)的常用技術(shù)及流程。二、教學(xué)方法課堂講授。三、教學(xué)重點(diǎn)與難點(diǎn)制作網(wǎng)站的標(biāo)準(zhǔn)和常用技術(shù)、網(wǎng)站建設(shè)的流程、Dreamweaver CS6四、教學(xué)時數(shù)：2學(xué)

4、時五、主要教學(xué)內(nèi)容第一節(jié) 互聯(lián)網(wǎng)的訪問過程第二節(jié) 互聯(lián)網(wǎng)的工作機(jī)制第三節(jié) 網(wǎng)站設(shè)計(jì)中的一些基本概念第四節(jié) 制作網(wǎng)站的標(biāo)準(zhǔn)和常用技術(shù)一、 Web標(biāo)準(zhǔn)二、 網(wǎng)站開發(fā)常用技術(shù)第五節(jié) 常用的開發(fā)工具第六節(jié) 網(wǎng)站建設(shè)的流程一、 明確網(wǎng)站的定位二、 確定網(wǎng)站的主題三、 網(wǎng)站的整體規(guī)劃四、 收集資料與素材五、 設(shè)計(jì)制作網(wǎng)頁頁面六、 測試和發(fā)布七、 網(wǎng)站的維護(hù)與推廣第七節(jié) 建立站點(diǎn)一、 Dreamweaver CS6介紹二、 Dreamweaver站點(diǎn)組成三、創(chuàng)建站點(diǎn)四、管理站點(diǎn)第二章 靜態(tài)網(wǎng)頁制作使用HTML技術(shù)一、教學(xué)目的與要求掌握HTML5的新特征及HTML常用標(biāo)記的語法規(guī)則和使用方法，掌握表單和表格的

5、語法規(guī)則及使用方法。二、教學(xué)方法課堂講授。三、教學(xué)重點(diǎn)與難點(diǎn)頁面修飾標(biāo)記、超級鏈接標(biāo)記及表單標(biāo)記，HTML5新增標(biāo)記，表單標(biāo)記、表格標(biāo)記。四、教學(xué)時數(shù)：6學(xué)時五、主要教學(xué)內(nèi)容第一節(jié) HTML概述一、 HTML簡介二、HTML文檔結(jié)構(gòu)與書寫規(guī)范三、建立HTML文件第二節(jié) HTML的基本標(biāo)記一、 標(biāo)題標(biāo)記二、 段落標(biāo)記和換行標(biāo)記三、 塊標(biāo)記和四、 列表標(biāo)記五、 HTML5增加的結(jié)構(gòu)元素第三節(jié) 多媒體一、 圖像標(biāo)記二、 多媒體文件標(biāo)記三、 HTML5中新增的視頻標(biāo)記四、 HTML5中新增音頻標(biāo)記第四節(jié) 超鏈接一、 超級鏈接標(biāo)記二、 超級鏈接類型三、 超級鏈接路徑第五節(jié) 表單一、 表單定義標(biāo)記二、 輸

6、入標(biāo)記三、列表框標(biāo)記四、文本域輸入標(biāo)記五、HTML5表單新增屬性六、HTML5新增input類型第六節(jié) 表格一、 HTML的表格標(biāo)記二、 HTML表格的屬性三、 表格嵌套（*）第七節(jié) 內(nèi)嵌框架（*）第八節(jié) 應(yīng)用案例（選講其中1-2個）一、 多層嵌套列表案例（*）二、 會員注冊表單案例三、 旅游網(wǎng)站首頁案例四、 內(nèi)嵌框架案例（*）五表格布局應(yīng)用綜合案例第三章 美化網(wǎng)頁使用CSS技術(shù)一、教學(xué)目的與要求要求掌握CSS樣式的定義方法和應(yīng)用的四種方式。二、教學(xué)方法課堂講授。三、教學(xué)重點(diǎn)CSS樣式的定義與應(yīng)用。四、教學(xué)時數(shù)：6學(xué)時五、主要教學(xué)內(nèi)容第一節(jié) CSS概述一、 CSS的引入二、 CSS簡介第二節(jié)

7、CSS基本選擇器一、 標(biāo)記選擇器二、 類選擇器三、 ID選擇器第三節(jié) 在HTML中使用CSS的方法一 行內(nèi)樣式二、嵌入樣式三、鏈接樣式四、導(dǎo)入樣式五、樣式的優(yōu)先級第四節(jié) CSS復(fù)合選擇器一、交集選擇器二、并集選擇器三、后代選擇器四、子選擇器五、相鄰選擇器六、屬性選擇器七、偽類選擇器八、偽對象選擇器第五節(jié) 用CSS設(shè)置文本樣式一、字體屬性二、文本屬性第六節(jié)用CSS設(shè)置顏色與背景第七節(jié)用CSS設(shè)置圖像效果一、為圖片添加邊框二、圖片縮放三、圖文混排第八節(jié) 應(yīng)用安全一、 用CSS美化表單案例二、 用CSS設(shè)計(jì)網(wǎng)站頁面案例第四章 規(guī)劃頁面使用CSS實(shí)現(xiàn)精美布局一、教學(xué)目的與要求要求掌握如何運(yùn)用DIV C

8、SS進(jìn)行頁面精美布局。二、教學(xué)方法課堂講授。三、教學(xué)重點(diǎn)與難點(diǎn)DIV標(biāo)記和CSS技術(shù)的結(jié)合運(yùn)用進(jìn)行頁面布局。四、教學(xué)時數(shù)：4學(xué)時五、主要教學(xué)內(nèi)容第一節(jié) CSS盒模型一、內(nèi)容(content)二、邊界(margin)三、填充(padding)四、邊框(border)第二節(jié) CSS布局常用屬性一、定位屬性(position)二、浮動屬性(float)第三節(jié) DIV CSS網(wǎng)頁布局一、單列布局二、兩列布局三、使用CSS3盒布局的三列布局第四節(jié) 應(yīng)用案例一、用DIV CSS實(shí)現(xiàn)圖文混排案例二、二級導(dǎo)航菜單制作案例（*）第五章 讓網(wǎng)頁動起來使用JavaScript技術(shù)一、教學(xué)目的與要求要求掌握J(rèn)avaS

9、cript運(yùn)行機(jī)制和JavaScript在網(wǎng)頁中作用，掌握J(rèn)avaScript基本語法和控制結(jié)構(gòu)。二、教學(xué)方法課堂講授。三、教學(xué)重點(diǎn)與難點(diǎn)JavaScript基本語法和控制結(jié)構(gòu)。四、教學(xué)時數(shù)：4學(xué)時五、主要教學(xué)內(nèi)容第一節(jié)JavaScript概述一、JavaScript特點(diǎn)二、第一個JavaScript程序第二節(jié)JavaScript語言基礎(chǔ)一、JavaScript語法格式二、JavaScript代碼書寫位置三、JavaScript語句四、JavaScript注釋五、數(shù)據(jù)類型六、變量和常量第三節(jié) 表達(dá)式與運(yùn)算符一、表達(dá)式二、運(yùn)算符第四節(jié)JavaScript控制結(jié)構(gòu)與函數(shù)一、JavaScirpt控制

10、結(jié)構(gòu)二、函數(shù)第五節(jié) 應(yīng)用案例第六章 實(shí)現(xiàn)用戶與界面的交互JavaScript的對象與事件 一、教學(xué)目的與要求掌握如何運(yùn)用JavaScript對象進(jìn)行頁面編程，使用事件處理實(shí)現(xiàn)用戶與頁面之間的交互。二、教學(xué)方法課堂講授。三、教學(xué)重點(diǎn)與難點(diǎn)JavaScript內(nèi)置對象、瀏覽器對象及HTML DOM對象，重點(diǎn)掌握J(rèn)avaScript鼠標(biāo)事件、頁面事件、表單事件的使用方法。四、教學(xué)時數(shù)：6學(xué)時五、主要教學(xué)內(nèi)容第一節(jié)JavaScript對象概述一、對象二、 對象的引用三、 對象的操作四、 JavaScript的對象類型第二節(jié) JavaScript內(nèi)置對象一、 String對象二、 Array對象三、 D

11、ate對象四、 Math對象第三節(jié) 瀏覽器對象一、BOM概述二、 Window對象三、 Navigator對象（*）四、Screen對象（*）五、 Location對象（*）六、 History對象（*）七、 文檔（Document）對象第四節(jié) HTML DOM對象一、 DOM概述二、 HTML DOM對象三、 訪問HTML DOM對象第五節(jié) 事件和事件處理一、事件處理的相關(guān)概念二、事件綁定第六節(jié) 常見事件和事件對象一、 常見事件二、 事件對象第七節(jié) 常見事件示例一、 鼠標(biāo)事件二、 鍵盤事件（*）三、 表單事件第八節(jié) 應(yīng)用案例一、表單驗(yàn)證案例二、網(wǎng)絡(luò)相冊案例（*）三、圖片輪播案例第七章 Boo

12、tstrap基礎(chǔ)一、教學(xué)目的與要求掌握Bootstrap框架的特點(diǎn)和結(jié)構(gòu)，能使用框架實(shí)現(xiàn)響應(yīng)式頁面開發(fā)。二、教學(xué)方法課堂講授。三、教學(xué)重點(diǎn)與難點(diǎn)Bootstrap框架的引用四、教學(xué)時數(shù)：4學(xué)時五、主要教學(xué)內(nèi)容第一節(jié) 認(rèn)識Bootstrap一、 Bootstrap框架的內(nèi)容二Bootstrap特點(diǎn)三、Bootstrap版本第二節(jié)Bootstrap框架結(jié)構(gòu)一、Bootstrap框架的下載二、Bootstrap框架的結(jié)構(gòu)三、在項(xiàng)目中引入Bootstrap框架第三節(jié) 應(yīng)用案例第八章 Bootstrap 的全局樣式一、教學(xué)目的與要求學(xué)習(xí)使用Bootstrap 的全局樣式實(shí)現(xiàn)頁面開發(fā)二、教學(xué)方法課堂講授、

13、上機(jī)實(shí)踐。三、教學(xué)重點(diǎn)與難點(diǎn)Bootstrap的柵格系統(tǒng)四、教學(xué)時數(shù)：4學(xué)時五、主要教學(xué)內(nèi)容第一節(jié) 柵格系統(tǒng) 一、柵格系統(tǒng)的工作原理二、柵格系統(tǒng)的類及相關(guān)參數(shù)三、用柵格實(shí)現(xiàn)的響應(yīng)式布局第二節(jié) 頁面版式 一、標(biāo)題二、列表三、表格四、按鈕五、表單六、圖片第三節(jié) 應(yīng)用案例第九章 Bootstrap 的組件和插件 一、教學(xué)目的與要求學(xué)習(xí)使用Bootstrap 的組件和插件實(shí)現(xiàn)頁面開發(fā)二、教學(xué)方法課堂講授、上機(jī)實(shí)踐。三、教學(xué)重點(diǎn)與難點(diǎn)Bootstrap的導(dǎo)航組件，輪播插件的實(shí)現(xiàn)原理四、教學(xué)時數(shù)：4學(xué)時五、主要教學(xué)內(nèi)容第一節(jié) Glyphicons 字體圖標(biāo)第二節(jié) 下拉菜單第三節(jié) 導(dǎo)航和頭部導(dǎo)航第四節(jié) 標(biāo)簽

14、與徽章（*）第五節(jié) 列表組和分頁第六節(jié) 標(biāo)簽頁和提示框（*）第七節(jié) 折疊和輪播 第八節(jié) 應(yīng)用案例本章小結(jié)第十章 用HTML5 CSS3實(shí)現(xiàn)的在線旅游網(wǎng)站 一、教學(xué)目的與要求掌握運(yùn)用HTML5和CSS3技術(shù)來創(chuàng)建一個具有現(xiàn)代風(fēng)格的Web網(wǎng)站，學(xué)習(xí)使用Bootstrap框架構(gòu)建響應(yīng)式網(wǎng)站的頁面。二、教學(xué)方法課程實(shí)踐。三、教學(xué)重點(diǎn)與難點(diǎn)頁面組織、CSS應(yīng)用四、教學(xué)時數(shù)：6學(xué)時五、主要教學(xué)內(nèi)容第一節(jié) 用HTML5 CSS3實(shí)現(xiàn)的在線旅游網(wǎng)站一、 使用HTML5結(jié)構(gòu)元素組織網(wǎng)頁二、 頁頭部分的設(shè)計(jì)三、 側(cè)邊導(dǎo)航和焦點(diǎn)圖的設(shè)計(jì)四、 精品推薦版塊的設(shè)計(jì)（*）五、 頁腳的設(shè)計(jì)（*）第二節(jié) 用Bootstrap

15、實(shí)現(xiàn)的網(wǎng)站后臺管理頁面一、 頁面結(jié)構(gòu)描述二、 導(dǎo)航部分的設(shè)計(jì) 三、 主體部分的設(shè)計(jì)第十一章 網(wǎng)站的發(fā)布與管理一、教學(xué)目的與要求掌握網(wǎng)站測試和web服務(wù)器的構(gòu)建方法。二、教學(xué)方法課堂講授。三、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)掌握web服務(wù)器的構(gòu)建方法。四、教學(xué)時數(shù)：2學(xué)時五、主要教學(xué)內(nèi)容第一節(jié) 網(wǎng)頁中的meta標(biāo)記一、name屬性和content屬性二、 http-equiv屬性和content屬性第二節(jié) 測試網(wǎng)站一、代碼測試二、 驗(yàn)證HTML三、 檢查鏈接四、 檢查屏幕分辨率和顏色五、 可訪問性檢驗(yàn)工具六、檢查頁面在不同瀏覽器中的顯示效果第三節(jié) 構(gòu)建自己的Web服務(wù)器一、 Web服務(wù)器簡介二、 安裝Web服

16、務(wù)器第四節(jié) 在互聯(lián)網(wǎng)上建立Web站點(diǎn)（*）一、 域名注冊二、虛擬空間申請三、發(fā)布網(wǎng)站第五節(jié) 網(wǎng)站維護(hù)（*）一、網(wǎng)站的推廣二、網(wǎng)站的安全注：加（*）為選學(xué)或選講內(nèi)容實(shí)驗(yàn)課程教學(xué)大綱課程名稱網(wǎng)站前端開發(fā)技術(shù)課程所屬實(shí)驗(yàn)室信息技術(shù)實(shí)驗(yàn)室開課學(xué)期第二學(xué)期實(shí)驗(yàn)總學(xué)時16學(xué)分適用專業(yè)計(jì)算機(jī)科學(xué)與技術(shù)課程負(fù)責(zé)人一、課程的目的、任務(wù)通過上機(jī)實(shí)踐，加深對課程內(nèi)容的理解，理論聯(lián)系實(shí)際。使學(xué)生全面、系統(tǒng)地掌握網(wǎng)站的規(guī)劃和建設(shè)技術(shù)，提高學(xué)生軟件工具操作、網(wǎng)頁設(shè)計(jì)和網(wǎng)站開發(fā)能力。二、主要設(shè)備FTP服務(wù)器、微型計(jì)算機(jī)軟、硬件系統(tǒng)。三、課程的教學(xué)要求通過上機(jī)實(shí)踐，加深學(xué)生對網(wǎng)站前端開發(fā)技術(shù)的理解，增強(qiáng)學(xué)生實(shí)踐操作的基本能力

17、和綜合能力，提高調(diào)試程序的水平。要求所設(shè)計(jì)網(wǎng)頁能正確顯示，并提供程序代碼及運(yùn)行結(jié)果備檢。四、教學(xué)方法、教學(xué)形式、教學(xué)手段的特色教學(xué)方法和教學(xué)形式主要采用操作演示、上機(jī)實(shí)驗(yàn)和綜合性實(shí)驗(yàn)設(shè)計(jì)等。課堂講授和學(xué)生實(shí)踐有機(jī)結(jié)合。五、教學(xué)內(nèi)容序號實(shí)驗(yàn)項(xiàng)目名稱學(xué)時實(shí)驗(yàn)類型每組人數(shù)實(shí)驗(yàn)要求備注1HTML頁面常用標(biāo)記、表格、框架2設(shè)計(jì)1必做2CSS樣式表的語法規(guī)則及使用方法2設(shè)計(jì)1必做3DIV CSS實(shí)現(xiàn)頁面精美布局2設(shè)計(jì)1必做4JavaScript語法基礎(chǔ)2設(shè)計(jì)1必做5JavaScript對象與事件處理2設(shè)計(jì)1必做6Bootstrap響應(yīng)式頁面設(shè)計(jì) 2設(shè)計(jì)1必做7網(wǎng)站綜合示例的設(shè)計(jì)與實(shí)現(xiàn)4綜合1必做六、考核方式與評價結(jié)構(gòu)比例根據(jù)上機(jī)實(shí)驗(yàn)完成結(jié)果及實(shí)驗(yàn)報告進(jìn)行實(shí)驗(yàn)成績評定，平時實(shí)驗(yàn)成績占50%，期末考試成績占50%。七、使用教材（講義、指導(dǎo)書）或參考書1. HTML CSS JavaScript Bootstap網(wǎng)站開發(fā)實(shí)用技術(shù)（3版）作者：張大為、劉德山，人民郵電出版社，20202. 唐四薪. 基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)與制作. 北京：清華大學(xué)出版社，2014.3. 黑馬程序員.響應(yīng)式Web開發(fā)項(xiàng)目教程（HMTL5 CSS3 Bootstrap）. 北京：人民