web前端開發(fā)教案

Web前端開發(fā)教案第50頁共52頁《web前端開發(fā)》教案第1單元教案教師教學(xué)單元授課計劃學(xué)時4授課時間安排一、教學(xué)內(nèi)容：知識點：1、網(wǎng)頁設(shè)計的基本概念：www、url、網(wǎng)頁，網(wǎng)站。2、網(wǎng)頁瀏覽原理，網(wǎng)頁中的組成要素。3、網(wǎng)站開發(fā)流程：需求分析、設(shè)計、實現(xiàn)、測試、維護和更新。技能：二、學(xué)生特征分析學(xué)生年齡在20歲-22歲,對網(wǎng)絡(luò)很感興趣。80%以上的學(xué)生曾經(jīng)瀏覽過網(wǎng)頁，知道打開網(wǎng)頁的方法。學(xué)生對訪問的網(wǎng)站已經(jīng)形成了自己的評價方法。三、教學(xué)內(nèi)容和學(xué)習(xí)水平的分析1、技能和知識點的劃分與學(xué)習(xí)水平的確定編號技能和知識點識記理解熟練操作應(yīng)用綜合分析技能鑒賞網(wǎng)站，分析網(wǎng)站的技能知識網(wǎng)頁，網(wǎng)站的概念網(wǎng)站開發(fā)流程√態(tài)度主動分析、積極思考√√√能力具備鑒賞網(wǎng)站的能力√2、教學(xué)的重點和難點教學(xué)重點：1、網(wǎng)站瀏覽原理；2、網(wǎng)站開發(fā)流程解決途徑：通過例子來展示網(wǎng)站瀏覽原理；開發(fā)流程介紹中引入實際開發(fā)的例子。教學(xué)難點：綜合評價網(wǎng)站的的方法。解決途徑：展示網(wǎng)站實例，學(xué)生討論，最終形成評價方案。四、教學(xué)策略基于例子的教學(xué)模式。根據(jù)知識特點，舉出一個典型性的例子，由學(xué)生根據(jù)例子中的場景，分析實際的應(yīng)對措施。如，本節(jié)課中有關(guān)時光網(wǎng)站的鑒賞，學(xué)生課堂上談?wù)勛约旱挠^點，由此總結(jié)出好的網(wǎng)站應(yīng)該具備的特征。五、教學(xué)過程設(shè)計和流程Web前端開發(fā)基礎(chǔ)本章內(nèi)容與學(xué)習(xí)目標網(wǎng)頁設(shè)計的基本概念和知識分析網(wǎng)頁基本組成元素和開發(fā)中使用的軟件網(wǎng)站的開發(fā)流程和制作規(guī)則第1節(jié)Web介紹Web也稱萬維網(wǎng)。Web的英文全稱是“WorldWideWeb”，簡稱WWW。它是基于“超文本”的信息查詢和發(fā)布系統(tǒng)。1.1Web介紹Web起源1.開發(fā)階段1980—1991年，TimBerners-Lee在ENQUIRE項目上應(yīng)用了一個可以處理超文本信息的的在線數(shù)據(jù)編輯庫。1984年他將大型超文本數(shù)據(jù)庫系統(tǒng)命名為WWW。2.發(fā)展階段1992—1995年，隨著支持圖像，多媒體技術(shù)的網(wǎng)絡(luò)瀏覽器的發(fā)布，WWW技術(shù)在互聯(lián)網(wǎng)上應(yīng)用廣泛。3.商業(yè)化階段1996—1998年，越來越多的公司，企業(yè)開始在互聯(lián)網(wǎng)上創(chuàng)建Web站點。4.無所不在的WWW借助WWW，用戶可以在線學(xué)習(xí)，發(fā)布消息，看電影聽音樂。WWW像一張巨大的網(wǎng)，已經(jīng)覆蓋到生活，工作，學(xué)習(xí)，娛樂的方方面面。Web版本W(wǎng)eb1.0采用的是技術(shù)創(chuàng)新主導(dǎo)模式，盈利基于點擊的流量。由網(wǎng)站到用戶是單向的行為。Web1.0時代的代表站點為新浪，搜狐，網(wǎng)易三大門戶。Web2.0注重頁面與用戶的交互。用戶既是網(wǎng)站內(nèi)容瀏覽者，也是網(wǎng)站內(nèi)容的制造者。Web3.0支持不同網(wǎng)站之間信息進行交互，支持借助第三方信息平臺對多家網(wǎng)站的信息進行整合使用。Web開發(fā)Web開發(fā)包括網(wǎng)站的前端開發(fā)和后端開發(fā)。1.2.1前端開發(fā)Web前端開發(fā)包括PC端網(wǎng)頁、移動端網(wǎng)頁、移動APP、游戲、軟件開發(fā)等。前端開發(fā)簡單上手容易，同時是一種熱門技術(shù)，人才緊缺，薪資較高。1.2.2后端開發(fā)后端開發(fā)提供數(shù)據(jù)庫支持，對用戶在頁面的操作給予響應(yīng)。常用的數(shù)據(jù)庫技術(shù)是MySql、SqlServer、Oracle等。1.3Web基本概念1.3.1網(wǎng)站網(wǎng)站是Internet上有內(nèi)在聯(lián)系的若干頁面通過超級鏈接構(gòu)成的網(wǎng)頁的集合。通常把進入網(wǎng)站首先看到的網(wǎng)頁稱為首頁。首頁是網(wǎng)站的門面，是訪問量最大的網(wǎng)頁，默認的文件名是index或default。在服務(wù)器上設(shè)置之后，直接通過網(wǎng)址可以進入網(wǎng)站首頁。1.3.2網(wǎng)頁網(wǎng)頁是由多種媒體，如文字、聲音、動畫等組成的頁面，在頁面上通過超鏈接實現(xiàn)與其他網(wǎng)頁之間的跳轉(zhuǎn)。1.網(wǎng)頁中的媒體元素1）文本文本是網(wǎng)頁的主體組成部分，主要用來傳達網(wǎng)頁中的信息。2）圖像圖像能直觀的表達信息，具有很強的視覺沖擊。通常在網(wǎng)頁中使用的圖像主要是GIF、JPEG、PNG格式。3）音頻音頻是多媒體網(wǎng)頁中的重要組成部分。但盡量不要將聲音文件作為背景音樂，那樣會影響網(wǎng)頁的下載速度。目前，支持網(wǎng)絡(luò)的聲音文件格式有MIDI、WAV、MP3等格式。4）視頻網(wǎng)頁中可以插入視頻文件，使網(wǎng)頁更加精彩。網(wǎng)頁中常見的視頻文件格式有：realplay、mpeg、AVI等。2.網(wǎng)頁組成元素介紹常見的網(wǎng)頁組成元素包括5種，分別是網(wǎng)頁的logo、banner、導(dǎo)航條、主體部分、版尾部分。1）logo標志logo是反映事物特征的記號。它以圖形或者文字符號為載體，除了表示一定的寓意以外還具有表達情感和指令動作等作用。2）banner廣告條在網(wǎng)頁中，廣告條一般是放置在醒目的位置，吸引用戶對于廣告信息的關(guān)注，從而達到網(wǎng)絡(luò)營銷的效果。banner可以是動態(tài)的圖像（如gif動畫或者flash動畫），也可以是靜態(tài)的圖像。banner的尺寸有一定的約定，3）導(dǎo)航條幫助用戶快速訪問網(wǎng)站內(nèi)容的工具。導(dǎo)航條分為橫排導(dǎo)航條、豎排導(dǎo)航條等，復(fù)雜的導(dǎo)航條還有二級級聯(lián)菜單。設(shè)計導(dǎo)航條時應(yīng)該注意，其中的項目分類合理，便于瀏覽者快速找到，同時導(dǎo)航條應(yīng)該置于醒目的位置。4）主體部分 主體部分是網(wǎng)頁中最重要的組成，其中包括網(wǎng)頁中所有的信息，這部分內(nèi)容可以是純文本信息，也可以是由文本、圖像等元素等構(gòu)成的多媒體信息。5）版尾部分版尾部分是整個網(wǎng)頁的結(jié)束部分，通常用來聲明網(wǎng)站的版權(quán)，為用戶提供訪問網(wǎng)站的聯(lián)系方式等信息。1.3.3URLURL（UniformResourceLocator，統(tǒng)一資源定位），是Internet上標準資源的地址，用來描述網(wǎng)頁及其他網(wǎng)絡(luò)資源地址的一種標識方法。URL的一般書寫格式是：訪問協(xié)議：//主機域名或IP地址[：端口號]/路徑/文件名，例如：。1.3.4http協(xié)議全稱HyperTextTransferProtocol，超文本傳輸協(xié)議。http協(xié)議是網(wǎng)絡(luò)上使用最為廣泛的一種協(xié)議。所有Web頁面都必須遵守這個協(xié)議。http協(xié)議主要用于服務(wù)器和瀏覽器之間的請求和響應(yīng)服務(wù)?？蛻舳送ㄟ^建立一個默認端口是80的鏈接初始化一個請求服務(wù)，服務(wù)器端通過監(jiān)聽此80端口響應(yīng)請求。1.3.5Web服務(wù)器也稱為WWW服務(wù)器，主要功能是提供信息服務(wù)。Web服務(wù)器的工作流是：接收用戶請求->動態(tài)響應(yīng)請求->處理請求->反饋結(jié)果。常見的Web服務(wù)器有兩種，微軟的IIS服務(wù)器（互聯(lián)網(wǎng)信息服務(wù)器）和阿帕奇（apache）的Tomcat服務(wù)器。1.3.6Web瀏覽器解析并顯示HTML文件的應(yīng)用軟件。瀏覽器主要通過超文本傳輸協(xié)議（http）與Web服務(wù)器之間進行交互，將服務(wù)器傳回的HTML標記進行解析。常見的瀏覽器有IE、google、Firefox、Opera和Safari。1.4Web頁面瀏覽過程（1）用戶啟動瀏覽器，在地址欄中輸入要訪問的網(wǎng)頁的url，通過http協(xié)議向url所在的服務(wù)器發(fā)起服務(wù)請求。（2）服務(wù)器根據(jù)瀏覽器發(fā)起的請求，把url地址轉(zhuǎn)換成網(wǎng)頁所在服務(wù)器上的實際路徑，找到相應(yīng)的網(wǎng)頁文件。（3）網(wǎng)頁中包括html標記，服務(wù)器直接通過http協(xié)議將文檔發(fā)送到客戶端，網(wǎng)頁中還包括jsp程序，asp程序或者其他動態(tài)網(wǎng)站程序，則通過服務(wù)器執(zhí)行后將運行結(jié)果發(fā)送給客戶端。（4）瀏覽器解釋html文檔，將結(jié)果顯示在客戶端瀏覽器。1.5Web前端開發(fā)技術(shù)1.HTML技術(shù)HTML為超文本標記語言。網(wǎng)頁文件都是由超文本標志語言HTML所創(chuàng)建的。2.CSS技術(shù)CascadingStyleSheet，層疊樣式表，是一種用來表現(xiàn)網(wǎng)頁格式的語言。使用CSS可以將網(wǎng)頁的格式和內(nèi)容相分離，編輯格式時不需要考慮內(nèi)容，便于網(wǎng)頁維護。3.JavaScript技術(shù)JavaScript是一種解釋型、基于對象的腳本語言，用來向HTML頁面添加交互行為，具有跨平臺特性的一種語言。4.jQuery技術(shù)jQuery是繼prototype之后又一個優(yōu)秀的Javascript框架。通過jQuery使用戶能更方便地處理HTMLdocuments、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。1.6主流Web瀏覽器1.IE瀏覽器InternetExplorer，是微軟公司推出的一款網(wǎng)頁瀏覽器。IE有6，7、8、9、10、11等版本。2.GoogleChromeGoogleChrome是一款由Google公司開發(fā)的網(wǎng)頁瀏覽器。GoogleChrome的特點是簡潔、快速。它支持多標簽瀏覽，每個標簽頁面都在獨立的“沙箱”內(nèi)運行，在提高安全性的同時，一個標簽頁面的崩潰也不會導(dǎo)致其他標簽頁面被關(guān)閉。3.Firefox中文俗稱“火狐”，是一個自由及開放源代碼的網(wǎng)頁瀏覽器，使用Gecko排版引擎，支持多種操作系統(tǒng)，如Windows、MacOSX及GNU/Linux等。4.OperaOpera是一款挪威OperaSoftwareASA公司制作的，支持多頁面標簽式瀏覽的網(wǎng)絡(luò)瀏覽器。具有跨平臺性，可以在Windows、Mac和Linux三個操作系統(tǒng)平臺上運行。Opera瀏覽器創(chuàng)始于1995年4月。5.SafariSafari是蘋果計算機的最新操作系統(tǒng)MacOSX中的瀏覽器，也是iPhone手機、iPodTouch、iPad平板電腦中iOS指定默認瀏覽器。它使用了KDE的KHTML作為瀏覽器的運算核心。1.7Web前端開發(fā)流程典型的Web前端開發(fā)包括以下5個階段。（1）制定網(wǎng)站的需求分析：確立建站目標，網(wǎng)站所面向的用戶及網(wǎng)站所要實現(xiàn)的功能。（2）設(shè)計階段：明確網(wǎng)站的欄目組成，頁面的內(nèi)容，網(wǎng)站的鏈接結(jié)構(gòu)。（3）制作階段：使用網(wǎng)頁制作軟件和圖像處理軟件來完成網(wǎng)頁。（4）測試階段：檢查網(wǎng)站的鏈接結(jié)構(gòu)，跨瀏覽器兼容性，檢查頁面是否出現(xiàn)顯示錯誤。（5）維護和更新階段：使用網(wǎng)頁設(shè)計軟件對網(wǎng)站進行更新和維護。1.7.1需求分析明確下面幾個問題：1.建網(wǎng)站的目的是什么？產(chǎn)品、服務(wù)銷售建立一種公益性服務(wù)為一種思想、觀念、事業(yè)作宣傳使自己的業(yè)務(wù)走向世界2.你的主要瀏覽者是哪類群體？按性別分：女性男性按年齡段分：青少年兒童成人按職業(yè)分：學(xué)生白領(lǐng)藍領(lǐng)3.基于明確的受眾定位，你希望網(wǎng)站又怎樣的特色？以內(nèi)容為本，訪問速度快視覺設(shè)計具有特色大量使用圖和動畫，忽略登錄速度打開頁面的速度最重要在通常的用戶群體分析時，我們?nèi)ソy(tǒng)計一些人口特征，如平均年齡，性別比例，平均文化程度，民族習(xí)慣等，根據(jù)這些數(shù)據(jù)去套用普遍的行為和需求，比如年輕人喜歡活潑的顏色和個性的版面結(jié)構(gòu)，老年人喜歡穩(wěn)重的風(fēng)格。采集到用戶需求之后，需要將需求轉(zhuǎn)換成文檔，便于開發(fā)人員使用。需求文檔中應(yīng)該包括網(wǎng)站建立所需要的軟硬件設(shè)備、網(wǎng)站的功能描述等信息。1.7.2網(wǎng)站設(shè)計設(shè)計階段在整個網(wǎng)站開發(fā)過程中也是非常重要的，接下來重點分析設(shè)計、規(guī)劃過程中要考慮哪些方面因素。在建設(shè)網(wǎng)站之前必須對站點進行結(jié)構(gòu)規(guī)劃，確定網(wǎng)頁組成及存放路徑，完成頁面詳細設(shè)計文檔。這個過程做的細致、到位，可以為后期開發(fā)節(jié)省大量的時間。設(shè)計頁面及路徑頁面詳細設(shè)計文檔1.7.3網(wǎng)站制作設(shè)計完成之后進入制作階段。制作網(wǎng)站包括前臺頁面制作、頁面代碼書寫和后臺程序開發(fā)3個步驟。對于靜態(tài)網(wǎng)站只需要完成前面兩個步驟。1.前臺頁面制作通過使用網(wǎng)頁圖像制作軟件來制作網(wǎng)頁元素logo、banner，設(shè)計整個網(wǎng)站的布局。通過dreamweaver或HTML標記對網(wǎng)頁元素進行操作，完成網(wǎng)站的靜態(tài)頁面的制作。2.頁面代碼書寫利用css和javascript技術(shù)對網(wǎng)頁進行美化，為網(wǎng)頁增加一些交互動作，如鼠標指向的動作，滾動圖片效果。3.后臺程序開發(fā)對于動態(tài)網(wǎng)站，需要數(shù)據(jù)庫的支持，所以后臺程序開發(fā)包括設(shè)計數(shù)據(jù)庫和數(shù)據(jù)表，以及編寫操作數(shù)據(jù)庫中表的程序。1.7.4網(wǎng)站測試在發(fā)布網(wǎng)站之前要對網(wǎng)站進行各種嚴格的測試，包括功能測試、性能測試、可用性測試、安全性測試等。測試最好是在一個真實的環(huán)境下進行，也就是在互聯(lián)網(wǎng)上測試。測試的目的是檢查和驗證，發(fā)現(xiàn)問題和錯誤。通過測試檢查網(wǎng)站中的圖像、文字、視頻、表單等元素的大小、位置、版面結(jié)構(gòu)是否發(fā)生了移位。發(fā)現(xiàn)網(wǎng)站中的空鏈接、錯誤鏈接、查看頁面中的的圖像是否能完整顯示、視頻是否能夠正常打開。檢查在不同的瀏覽器中網(wǎng)頁是否都能正常顯示。功能性測試性能測試可用性測試安全性測試1.7.5維護和更新網(wǎng)站建成之后應(yīng)該間隔一定的時間進行更新，向其中增加新的內(nèi)容和功能，給用戶提供新鮮感。維護網(wǎng)站是一項長期的工作，通過維護保障網(wǎng)站更好地運行。1.8Web前端開發(fā)工具1.9Web前端工程師從業(yè)要求Web前端工程師主要工作職責(zé)是協(xié)調(diào)前端設(shè)計師完成頁面的界面美化，協(xié)調(diào)后端程序員實現(xiàn)用戶的交互設(shè)計。前端工程師必須掌握HTML5、CSS、JavaScript、jQuery、Ajax等核心技術(shù)，具備互聯(lián)網(wǎng)交互設(shè)計能力，熟悉后端服務(wù)器運行環(huán)境和數(shù)據(jù)通信協(xié)議。能掌握響應(yīng)式布局框架、Bootstrap、AngularJS等最新JS框架的技術(shù)。1.10網(wǎng)站鑒賞能力培養(yǎng)欣賞時光網(wǎng)，網(wǎng)址:/時光網(wǎng)被譽為國內(nèi)電影社區(qū)類最優(yōu)秀的網(wǎng)站。網(wǎng)站的訪問者為全球電影發(fā)燒友，網(wǎng)站收錄歷年眾多過內(nèi)容各種類型影片，影片信息全面、新穎、并具有群組社區(qū)等內(nèi)容，互動性強。網(wǎng)站首頁分析色調(diào)分析網(wǎng)站結(jié)構(gòu)分析欄目分析網(wǎng)站主要特色如下：（1）主題定位明確。網(wǎng)站主要展示最新、最熱門的電影資訊信息。以這個主題為中心，網(wǎng)站分為購票、商城、新聞、直播等欄目，內(nèi)容豐富，信息量大。（2）網(wǎng)站的風(fēng)格獨特，顏色搭配出彩，布局整齊。（3）資訊更新及時，在網(wǎng)站多處能看到“今日”等文字，時間感強。另外地域也很明確，根據(jù)瀏覽者的IP確定了所在地，網(wǎng)站上顯示的信息都是瀏覽者所在城市的影視信息，服務(wù)很貼切，很到位。（4）提供了交互的平臺，當(dāng)影迷需要發(fā)表影評，可以非?？旖莸耐ㄟ^表單提交言論，也可以在虛擬社區(qū)參加討論。（5）網(wǎng)站的訪問速度快，沒有受到圖片和媒體文件大造成下載速度慢的影響。思考：課后瀏覽雅虎中國，中國工商銀行、當(dāng)當(dāng)網(wǎng)和陜西政務(wù)大廳網(wǎng)站，分析這些網(wǎng)站的組成、功能和站點風(fēng)格。課后反思：《web前端開發(fā)》教案02第二單元教案教師教學(xué)單元HTML-網(wǎng)頁骨架結(jié)構(gòu)授課計劃學(xué)時6授課時間安排一、教學(xué)內(nèi)容：知識點：1、HTML基本結(jié)構(gòu)標簽。2、常用標簽的使用。3、標簽的屬性。技能：學(xué)習(xí)使用HTML語言書寫網(wǎng)頁。二、學(xué)生特征分析三、教學(xué)內(nèi)容和學(xué)習(xí)水平的分析1、技能和知識點的劃分與學(xué)習(xí)水平的確定編號技能和知識點識記理解熟練操作應(yīng)用綜合分析技能使用常見標簽制作網(wǎng)頁√√√知識HTML結(jié)構(gòu)標簽√√態(tài)度主動操作、積極思考，勤于動手√√√能力具備制作網(wǎng)頁的能力√2、教學(xué)的重點和難點教學(xué)重點：1、HTML結(jié)構(gòu)標簽；2、HTML表格標簽，文本標簽的運用。解決途徑：將標簽的書寫代碼和預(yù)覽效果對照，直觀化理解標簽的作用。教學(xué)難點：1、使用表格布局；2、模板和庫；3、行為。解決途徑：先展示具體的操作過程，看到操作結(jié)果之后再來總結(jié)各種不同的布局的特點。四、教學(xué)策略1、類比的教學(xué)策略（對于一個難理解的概念用日常生活中相類似的現(xiàn)象做比較，提出兩者之間的共性方便理解）。2、問題引入策略（提出問題之后，由學(xué)生來思考，引導(dǎo)學(xué)生自我探索尋找答案）。五、教學(xué)過程設(shè)計和流程HTML-網(wǎng)頁骨架結(jié)構(gòu)本章內(nèi)容與學(xué)習(xí)目標熟悉HTML基本語法掌握編輯器的使用方法熟悉常見標簽及屬性的使用方法2.1HTML基礎(chǔ)HTML(HypertextMarkupLanguage，超文本標記語言)，是一種使用文本符號表示，由瀏覽器解釋執(zhí)行的標記語言。使用HTML語言編寫的文件稱為HTML文件，也叫網(wǎng)頁文件，擴展名為.html或.htm。<html> <head> <title>網(wǎng)頁基本結(jié)構(gòu)</title> </head> <body> <palign=”center”>HTML網(wǎng)頁</p> </body></html>說明：標記是由一對尖括號和標記名組成的，大多數(shù)標記都包括開始標記和結(jié)束標記。開始標記和結(jié)束標記之間的內(nèi)容是HTML標記所設(shè)置的內(nèi)容。標記屬性可以設(shè)置文本格式，如對齊方式、字體、大小、顏色。HTML標記和屬性不區(qū)分大小寫，但是為了書寫標準，最好使用小寫形式書寫。文檔的根元素必須是html，并且必須為它指明命名空間。元素必須正確嵌套。標記必須成對使用。標記名和屬性名必須小寫。屬性值必須用引號括起來。2.2HTML頭部標記2.2.1<head>頭部標記<head>元素是所有頭部元素的容器。<head>內(nèi)的元素可包含腳本、樣式、提供元信息等等。以下標簽可以嵌套到head標記中：<meta>（元標記）、<title>（標題標記）、<base>（鏈接默認地址）、<link>（鏈接外部樣式表）、<script>（腳本標記）以及<style>（樣式標記）。2.2.2<meta>元標記<meta>用來描述與網(wǎng)頁相關(guān)的信息，如網(wǎng)頁標題、字符集、關(guān)鍵詞字、文檔的作者等，這部分信息內(nèi)容一般不會顯示在瀏覽器主體窗口中。meta標記的3個屬性：name：設(shè)置屬性名稱，與它對應(yīng)的屬性值為content，content中的內(nèi)容其實就是參數(shù)的變量值。content：設(shè)置屬性值。http-equiv：http的文件頭用于向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與它對應(yīng)的屬性值為content，content中的內(nèi)容是參數(shù)的變量值。1設(shè)定網(wǎng)頁關(guān)鍵字語法：<metaname=”keywords”content=”keywords1,kewords2,…,keywordsn”>說明：keywords表示設(shè)置關(guān)鍵字content中設(shè)置具體的關(guān)鍵字，多個關(guān)鍵字之間用英文逗號分割。2設(shè)置網(wǎng)頁描述信息語法：<metaname=”discription”content=”somecontents”>說明：discription設(shè)置屬性為“描述”。content中設(shè)置具體的描述內(nèi)容。3設(shè)置網(wǎng)頁字符集語法：<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8”>說明：http-equiv表示http傳輸協(xié)議標題頭。content-type表示字符集。content定義文檔的類型和頁面所使用的字符集。4設(shè)定網(wǎng)頁自動刷新時間可以使用meta標記設(shè)置間隔一定的時間刷新網(wǎng)頁內(nèi)容。語法：<metahttp-equiv=”refresh”content=”x”>說明：refresh表示刷新功能。content表示間隔的時間，時間以秒為單位。5網(wǎng)頁自動跳轉(zhuǎn)基本語法：<metahttp-equiv=”refresh”content=”x;url=weburl”>說明：refresh表示刷新功能。content表示間隔的時間和跳轉(zhuǎn)的頁面地址。【例2.1】編寫一個網(wǎng)頁，當(dāng)在頁面停留3秒鐘后自動跳轉(zhuǎn)到咸陽師范學(xué)院()網(wǎng)站上。2.2.3<title>標記<title>標記嵌套在<head>中，用來設(shè)置網(wǎng)頁的標題，這個標題將顯示在瀏覽器標題欄中。在所有HTML文檔中<title>標記都是必需的，同時它可以提供頁面被添加到收藏夾時顯示的標題，也可以提供搜索引擎顯示結(jié)果的頁面標題。寫法：<title>網(wǎng)頁標題</title>2.2.4<base>標記<base>標簽為頁面上的所有鏈接設(shè)置默認地址或默認目標（target）。2.2.5<link>標記<link>標簽定義當(dāng)前文檔與外部資源之間的關(guān)系，最典型的應(yīng)用為連接外部樣式表。2.2.6<script>標記<script>標簽用來定義客戶端腳本，比如JavaScript。2.2.7<style>標記<style>標簽可以對HTML文檔定義樣式（格式）。2.3主體標記<body><body>標簽表示網(wǎng)頁的主體內(nèi)容，其中包含網(wǎng)頁中的所有內(nèi)容，比如文本、超鏈接、多媒體元素、表格和列表等。Bgcolor、background、leftmargin,rightmargin,topmargin,bottommargin、text、link、vlink、alink。2.4文字與分區(qū)標記網(wǎng)頁中的文本形式：(1)普通字符，可以直接錄入。(2)空格，使用“ ”表示一個半角空格。(3)特殊字符，如雙引號，貨幣符號，版權(quán)信息。特殊符號是在鍵盤上沒有的字符，可以通過輸入對應(yīng)的命名實體進行錄入。(4)注釋信息，對源代碼進行說明，瀏覽器解析時忽略注釋。語法：<!--注釋信息-->2.4.1<font>標記用來設(shè)置文字的字體，大小，顏色。語法：<fontsize=”字號”color=”顏色”face=”字體”>文字</font>屬性size、color、face2.4.2<hn>標題標記hn標記中的n可以取1-6之間的值，n值越大，標題文字越小?；菊Z法：<hn>標題文字</hn>屬性：align表示對齊方式，可選left，right，center值，分別表示左對齊，右對齊，居中對齊。2.4.3分區(qū)標記1.段落標記<p>語法：<p>段落文字</p>瀏覽器會自動地在段落的前后添加空行。（<p>是塊級元素）小貼士：段落標記需要成對使用（<p></p>），忘記使用結(jié)束標簽會產(chǎn)生錯誤。段落標記的align屬性，用來設(shè)置對齊方式。缺省此屬性表示段落文字左對齊。用法：<palign=”center”>段落文字</p>段落文字位于瀏覽器窗口水平居中位置。align也可以設(shè)置為right表示右對齊。2.換行標記<br/>語法：<br/>說明：段落標記文字的行距比較大，換行標記的行距較小。連續(xù)使用兩個<br/>，效果等同于一對<p>標記。3.預(yù)格式化標記<pre>瀏覽器在解析源代碼時，自動過濾代碼中的換行符，同時將連續(xù)出現(xiàn)的空格當(dāng)作一個半角的空格處理。如果需要保留源代碼中的格式，可以使用<pre>標記。4.居中標記<center>語法：<center>設(shè)置居中對齊的文字</center>文字將顯示在瀏覽器窗口水平居中的位置。5.縮排標記<blockquote>語法：<blockquote>設(shè)置縮進的文字</blockquote>6.水平線標記<hr>作用：對段落進行分隔，可以使網(wǎng)頁結(jié)構(gòu)更加清晰。使用<hr>標記會在網(wǎng)頁中出現(xiàn)一條寬度占滿整個瀏覽器窗口的水平線。語法：<hr/>屬性size、width、align、noshade、color2.5<a>超鏈接標記語法：<ahref=”target_url”target=”_blank”>超鏈接元素</a>說明：href屬性說明了鏈接目的地址。超鏈接元素可以是文本、圖像、或其他HTML元素。target_url是目標文件的路徑或者網(wǎng)址，此路徑可以用絕對路徑或相對路徑表示。絕對路徑如“D:\work\index.html”，相對路徑如“work\index.html”。補充說明：1.當(dāng)鏈接的目標位置為當(dāng)前文檔內(nèi)部的位置，稱為頁內(nèi)鏈接。語法：<aname=”label”>anchor</a>定義書簽標記（也叫命名錨記）<ahref=”#label”>超鏈接元素</a>鏈向一個書簽2.郵件鏈接，語法：<ahref=”mailto:emailurl@”>鏈接文字</a>3.圖片鏈接，為圖片設(shè)置超級鏈接語法：<ahref=”image_linkurl”><imgsrc=”image_url.jpg”/></a><img>表示圖像標記，image_url.jpg為圖像的源文件名稱。2.6列表標記HTML支持有序列表和無序列表。無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。同樣，有序列表也是一列項目，列表項目使用數(shù)字進行標記。無序列表始于<ul>（unorderlist）標簽，在無序列表中嵌套著多個列表項，每個列表項始于<li>。2.7多媒體標記網(wǎng)頁中可以插入如圖片、聲音、視頻等多媒體元素。2.7.1<img>圖像標記語法：<imgsrc=”img_url.jpg”alt=”image說明”/>說明：src屬性定義了圖像文件的地址。該地址可以是絕對路徑或相對路徑。alt屬性表示替換文字，當(dāng)瀏覽器無法讀取圖像時用來替代圖像的文字。<img>是單標記，不能成對使用。2.7.2background（屬性）background屬性可以用在<body>、<table>、<tr>、<td>、<div>等標記中。用來設(shè)置元素的背景圖像。語法：<bodybackground=”img_url.jpg”/>說明：當(dāng)插入的圖像尺寸小于網(wǎng)頁的大小，圖像默認水平，垂直方向重復(fù)顯示。2.7.3bgcolor（屬性）bgcolor屬性可以用在<body>、<table>、<tr>、<td>、<div>等標記中。用來設(shè)置元素的背景顏色。語法：<bodybgcolor=”color”/>說明：⑴網(wǎng)站常用的背景顏色：白色#ffffff;淺灰色#f0f0f0-#f9f9f9;這種顏色又稱之為萬能色，與各類色系都能和諧融洽搭配。⑵網(wǎng)站常用的背景顏色：接近深藍色（顏色代碼#0000cc），接近天藍色（顏色代碼#2aa8d9）和接近青藍色的顏色（代碼#00dfb9）一般帶有科技風(fēng)采、嚴肅、求實意義等；綠色（代碼：#0fba3b）一般代表綠色、健康、潔凈等意義。2.7.4<bgsound>標記語法：<bgsoundsrc=”sound_url”/>說明：網(wǎng)頁載入之后會自動播放背景音樂。其他屬性：balance，決定揚聲器之間的音量如何分配，該屬性取值在-10000到+10000。loop，設(shè)置音頻被播放的次數(shù)，是一個數(shù)值或者關(guān)鍵字infinite。volume，決定背景音樂的音量大小，屬性值域為-10000到0。2.7.5<embed>標記語法：<embedsrc=”file_url”/>說明：file_url表示多媒體文件名，多媒體文件的格式可以是mp3。alt屬性表示替換文字，當(dāng)瀏覽器無法讀取圖像時用來替代圖像的文字。<embed>標記中還可以使用其他屬性來設(shè)置多媒體元素的效果。2.7.6<object>標記語法：<objectclassid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"id="Slider1"width="100"height="50"><paramname="BorderStyle"value="1"/><paramname="MousePointer"value="0"/><paramname="Enabled"value="1"/><paramname="Min"value="0"/><paramname="Max"value="10"/></object>2.8表格標記網(wǎng)頁中可以使用表格制作數(shù)據(jù)表格，如制作成績表，工資表等。在網(wǎng)頁中表格更重要的用途是排版頁面內(nèi)容?？梢詫⒕W(wǎng)頁元素，如段落文字、圖像、視頻等資源放置在表格的單元格中，使網(wǎng)頁中的各個部分整齊而有條理。2.8.1表格常用標記表格是一種結(jié)構(gòu)性對象，包括行、列、單元格。2.8.2表格常用屬性表格常用的屬性width、height、align、valign、border、bgcolor、background、cellspacingcellpadding。2.8.3表格布局表格標記在項目開發(fā)中經(jīng)常用來對網(wǎng)頁布局，在表格的單元格中插入文字，圖像，音視頻資源，通過表格布局使元素整齊排列。2.9表單標記基礎(chǔ)知識：什么是表單？表單是一種特殊的網(wǎng)頁容器標簽，在這個容器中用戶可以插入各種普通的網(wǎng)頁標簽，如表格，層，也可以插入各種表單交互組件，如文本框，密碼框，單選按鈕，從而獲取用戶輸入的信息。利用表單可以將網(wǎng)頁中的數(shù)據(jù)通過特定的方式進行提交。提交后，由服務(wù)器端腳本對信息進行處理。表單可以與jsp或者asp等編程語言結(jié)合，同時也可以與前臺的javascript合作，通過腳本來控制用戶輸入的信息的合法性。在萬維網(wǎng)中，很多網(wǎng)站都是通過表單進行采集客戶端數(shù)據(jù)。表單可以收集瀏覽者提交的信息或者實現(xiàn)搜索等功能。網(wǎng)站上的在線注冊，登錄等功能都是通過表單實現(xiàn)的。要實現(xiàn)表單功能，必須包含兩部分：1.頁面上的表單元素。2.服務(wù)器端用于處理客戶端填寫信息的程序。2.9.1<form>標記語法：<form>表單元素</form>2.9.2<input>標記<input>標記用來設(shè)置表單中的輸入元素，如文本框，密碼框等。語法：<inputtype=”element_type”name=”element_name”id=”element_id”/>說明：type表示不同的輸入元素，可選擇類型見表2.16。name表示輸入元素的名稱，id表示表單元素的編號，在一個表單域中，編號必須唯一。1.文本框文本框提供用戶輸入單行文本信息的區(qū)域。語法：<inputtype=”text”name=”text_name”id=”text_id”/>文本框元素支持的屬性如下：maxlength：最多可輸入的字符數(shù)size：文本框的長度，單位為像素，默認24像素value：文本框的默認值2.密碼框密碼框提供用戶輸入密碼信息的區(qū)域。語法：<inputtype=”password”name=”pw_name”id=”pwd_id”/>密碼框支持的屬性：maxlength：最多可輸入的字符數(shù)size：密碼框的長度，單位為像素，默認24像素value：密碼框的默認值3.單選按鈕單選按鈕提供用戶在一組選項中進行單項選擇。單選按鈕用一個空心的圓表示。語法：<inputtype=”radio”name=”radiogroup_name”value=”radiovalue”checked=”checked”/>說明：name：設(shè)置單選按鈕所在的按鈕組的名稱，同一個單選按鈕組中的多個按鈕，某一個時刻只能有一項被選中。value：按鈕選中后傳到服務(wù)器的值checked：表示單選按鈕被選中。4.復(fù)選框復(fù)選框用來在一組選項中多選。復(fù)選按鈕使用一個空心的矩形表示。語法：<inputtype=”checkbox”name=”checkgroup_name”value=”checkvalue”checked=”checked”/>說明：name：設(shè)置復(fù)選框所在的按鈕組的名稱，同一個復(fù)選按鈕組中的多個按鈕，某一個時刻可以有多項被選中。value：按鈕選中后傳到服務(wù)器的值checked：表示復(fù)選框被選中。5.提交按鈕提交按鈕用來將表單內(nèi)容提交到服務(wù)器。語法：<inputtype=”submit”name=”submit_name”value=”submittext”/>說明：name：設(shè)置提交按鈕的名稱。value：提交按鈕上顯示的文本。6.重置按鈕重置按鈕用來清除表單中輸入的內(nèi)容，將表單中的內(nèi)容恢復(fù)成默認的值。語法：<inputtype=”reset”name=”reset_name”value=”resettext”/>說明：name：設(shè)置重置按鈕的名稱。value：重置按鈕上顯示的文本。7.普通按鈕按鈕用來觸發(fā)提交表單的動作，經(jīng)常與javascript腳本配合對表單進行驗證操作。語法：<inputtype=”button”name=”button_name”value=”buttontext”onclick=”javascript_function”/>說明：name：設(shè)置普通按鈕的名稱。value：普通按鈕上顯示的文本。onclick：表示處理表單的腳本函數(shù)。8.文件域input標記的type屬性值為file用來創(chuàng)建一個文件域。語法：<inputtype=”file”name=”file_name”/>說明：name：設(shè)置文件域的名稱。9.隱藏域隱藏域是一個隱藏的區(qū)域，瀏覽者無法看到，主要用途是不同頁面之間傳遞數(shù)據(jù)。語法：<inputtype=”hidden”name=”hidden_name”value=”hidden_value”/>說明：name：設(shè)置隱藏域的名稱。value：隱藏域傳遞的值2.9.3<select>下拉列表標記<select>標記提供用戶選擇的選項列表。語法：<selectname=”selectname”><optionvalue=”value1”selected=”selected”>option-1</option><optionvalue=”value2”>option-2</option> </select>說明：name：設(shè)置列表的名稱。value：選項的值。selected：設(shè)置選項?？墒褂玫膶傩裕簊ize：設(shè)置能同時顯示的列表選項個數(shù)。默認為1，表示下拉列表。 multiple：設(shè)置列表中的項目可以多選。2.9.4<textarea>文本域標記文本域標記可以用來接收多行文本信息。語法：<textareaname=”textarea_name”rows=”rows_number”cols=”cols_number”> Text…..</textarea>說明：name屬性表示文本域的名稱。rows屬性設(shè)置文本域的可見行數(shù)。 cols屬性設(shè)置文本域一行的字符數(shù)。課后練習(xí)：書中P1161-8題。教學(xué)反思：《網(wǎng)站前端開發(fā)》教案03第3單元教案教師教學(xué)單元css—網(wǎng)頁美麗的衣裝授課計劃學(xué)時6授課時間安排一、教學(xué)內(nèi)容：知識點：css樣式的3種基本選擇器。css樣式的4種設(shè)置方法position屬性的4種布局屬性技能：使用CSS技術(shù)美化網(wǎng)頁二、學(xué)生特征分析學(xué)生學(xué)習(xí)過C，C++等程序設(shè)計語言，對高級程序語言有一定了解。在這個基礎(chǔ)上學(xué)習(xí)網(wǎng)頁設(shè)計語言，難度應(yīng)該不大。學(xué)習(xí)時盡量能將網(wǎng)頁語言與C等語言作對比，著重強調(diào)兩種語言不同之處。三、教學(xué)內(nèi)容和學(xué)習(xí)水平的分析1、技能和知識點的劃分與學(xué)習(xí)水平的確定編號技能和知識點識記理解熟練操作應(yīng)用綜合分析技能使用CSS樣式美化網(wǎng)頁√√√知識1、CSS的語法要求2、常見的樣式屬性√√態(tài)度主動分析、勤于動手、積極思考√√√能力具備使用DIV+CSS技術(shù)為網(wǎng)頁布局的能力√2、教學(xué)的重點和難點教學(xué)重點：1、CSS的常用屬性；2、position屬性的使用解決途徑：寫代碼同步看預(yù)覽效果，直觀查看屬性的使用方法和使用效果。教學(xué)難點：區(qū)別position的absolute屬性和relative屬性解決途徑：通過大量練習(xí)區(qū)別不同屬性的特點。四、教學(xué)策略基于演示+總結(jié)的教學(xué)模式（通過例子演示，對演示效果有了直觀的認識之后學(xué)習(xí)HTML語法知識）五、教學(xué)過程設(shè)計和流程第三章css—網(wǎng)頁美麗的衣裝本章內(nèi)容與學(xué)習(xí)目標學(xué)習(xí)css語法知識學(xué)習(xí)css的常用屬性學(xué)會使用div+css布局3.1css概念css表示層疊樣式表。通過css可以對網(wǎng)頁的字體、顏色、背景等屬性進行設(shè)置，同樣可以結(jié)合div對網(wǎng)頁進行布局。css的出現(xiàn)引發(fā)了網(wǎng)頁設(shè)計布局技術(shù)的變革。使用css控制網(wǎng)頁格式的方法有行內(nèi)法、內(nèi)嵌式、鏈接式和導(dǎo)入式法。本書以內(nèi)嵌式樣式為主展開介紹。所謂內(nèi)嵌式樣式，是通過<style>標記將樣式定義在HTML文件的頭部。在CSS中，樣式的定義遵循一定的語法要求。3.1.1css基本語法選擇器{屬性1：屬性值1；屬性2：屬性值2；...}說明：選擇器表示樣式的名稱。上例定義的選擇器為p，p在HTML中為段落標記，因此上例重新定義了段落標記的樣式，網(wǎng)頁中所有<p>標記的樣式發(fā)生了變化。屬性是要設(shè)置的元素的格式，如字體，字號，顏色等。3.1.2css的3種基本選擇器在css中，選擇器分為基本選擇器和復(fù)合選擇器?；具x擇器包括HTML標記選擇器、class選擇器和ID選擇器。1.HTML標記選擇器語法：HTML標記{屬性1：屬性值1；屬性2：屬性值2；...}2.class選擇器類選擇器定義語法：.classname{屬性1：屬性值1；屬性2：屬性值2；...}選擇器應(yīng)用語法：<html標記class=”classname”></html標記>如：<divclass=”first”></div><pclass=”first”></p>在<div>和<p>標記中均應(yīng)用first類選擇器，此時div和p擁有first中定義的屬性，邊框為1像素黑色的實線，文字顏色為紅色。class選擇器特點，在網(wǎng)頁中定義了class選擇器樣式之后，只有應(yīng)用這個類選擇器的標記樣式發(fā)生改變。3.ID選擇器語法：#IDname{屬性1：屬性值1；屬性2：屬性值2；...}選擇器應(yīng)用語法：<html標記id=”IDname”></html標記>如：<divid=”title”></div>在<div>標記中應(yīng)用ID選擇器title，此時該div擁有title定義的屬性，文字大小是14像素，粗體顯示。ID選擇器特點，在網(wǎng)頁中定義了class選擇器樣式之后，只有應(yīng)用這個類選擇器的標記樣式發(fā)生改變。與class選擇器不同的是，ID選擇器在網(wǎng)頁中只能應(yīng)用一次。3.1.3css樣式表的4種引入方法使用css控制網(wǎng)頁格式的方法有行內(nèi)法、內(nèi)嵌式、鏈接式和導(dǎo)入式法。1.行內(nèi)法通過style屬性定義在HTML標記內(nèi)部的樣式稱為行內(nèi)樣式，行內(nèi)樣式僅僅影響該標簽內(nèi)的對象，無法影響另一個標簽內(nèi)對象樣式。語法：<html標簽style=”屬性1：屬性值1；屬性2：屬性值2;...”>如：<pstyle=”border:1pxsolidblack;color:red”>說明：行內(nèi)樣式可以應(yīng)用在<body>標記內(nèi)部的所有子標記，包括<body>在內(nèi)。但不能用在<head>、<title>、<meta>等標記中。2.內(nèi)嵌式在HTML文件中使用<style>標記設(shè)置樣式，這種方法稱為內(nèi)嵌式樣式。語法：<styletype=”text/css”>選擇器{屬性1：屬性值1；屬性2：屬性值2；...}</style>說明：<style>標記用來聲明樣式，type屬性表示css的MIME編碼。3.鏈接式鏈接式是指樣式表文件是以外部獨立的文件存放，好處是網(wǎng)站中的所有網(wǎng)頁都可以使用此樣式。做法是，將樣式表文件單獨保存為一個css文件（擴展名為css），在網(wǎng)頁中通過<link>標記鏈接css，這個<link>標記必須放到頁面的<head>標記中。語法：<linkhref=”cssurl.css”rel=”stylesheet”type=”text/css”>說明：href表示外部樣式表文件的路徑。rel表示瀏覽器引用的是css文件。type屬性表示css的MIME編碼。一個外部的樣式表文件可以應(yīng)用于多個網(wǎng)頁，當(dāng)改變外部樣式表文件時，所有的頁面樣式都將隨之改變。4.導(dǎo)入式與<link>標記類似，使用@import也可以引用外部的樣式，但是@import只能在<style>標記中使用，而且必須放在其他css樣式之前。語法：<styletype=”text/css”>@importurl(外部樣式url);</style>3.2css常見樣式3.2.1設(shè)置文字樣式css可以對網(wǎng)頁中的文字進行設(shè)置。文本屬性：font-size、font-family、font-style、color、font-weight、text-decoration、text-indent。例：制作Google公司的LOGO3.2.2設(shè)置圖片樣式可以為圖片設(shè)置邊框位置等樣式，屬性有：border-style、border-color、border-width、border、text-align、vertical-align、float、margin、width、height。例：設(shè)置圖片邊框效果3.2.3設(shè)置背景樣式利用css可以為網(wǎng)頁元素設(shè)置背景顏色和背景圖片。在css中與背景設(shè)置相關(guān)的屬性有：background-color、background-image、background-repeat、background-position、background-attachment。3.2.4設(shè)置項目列表項目列表中應(yīng)用了css后，可以將列表制作成導(dǎo)航條形式。在項目符號中常用的css屬性有：list-style-type（用于ul標記）、list-style-image、float（用于li標記）。3.2.5設(shè)置超鏈接樣式超鏈接有四種偽狀態(tài)：a:link表示超級鏈接的普通樣式；a:visited表示被點擊過的超鏈接樣式；a:hover表示鼠標指針經(jīng)過超鏈接的樣式；a:active表示在超鏈接上單擊時超鏈接的樣式。注：一般激活狀態(tài)（a:active）很少用。在定義時，最好是按照上述順序進行描述（先定義link狀態(tài)，然后visited，最后hover）。3.3div+css布局3.3.1盒子模型1.盒子標記在網(wǎng)站開發(fā)中，經(jīng)常將網(wǎng)頁元素放置在<div>或者<span>盒子中。通過控制盒子的位置從而達到網(wǎng)頁布局的目的。div標記div是區(qū)塊標記，區(qū)塊元素會自動換行。在div中可以容納段落、標題、表格等各種HTML元素。語法：<div></div>在網(wǎng)頁中，塊級元素還有table標記、p標記等元素。span標記span標記表示行內(nèi)元素，在行內(nèi)元素前后不會自動換行，沒有結(jié)構(gòu)意義。span也是一個容器，可以放置段落、標題、表格、圖片等網(wǎng)頁元素。語法：<span></span>例：div和span標記應(yīng)用2.盒子模型在網(wǎng)頁中可以將所有的標記（如<p>標記、<img>標記等）都可以看作盒子，盒子都具有邊框，有一定的尺寸，占據(jù)著頁面的一定的空間。通過調(diào)整盒子的邊框、距離、內(nèi)邊距和外邊距參數(shù)可以來控制盒子的位置盒子模型常用的css屬性有：margin-top、margin-right、margin-bottom、margin-left、border-style、border-width、border-color、padding-top、padding-right、padding-bottom、padding-left。3.盒子元素的定位在css中，可以通過下面兩種方式對網(wǎng)頁中的盒子進行定位：1）float定位設(shè)置元素相對于其他網(wǎng)頁元素的定位方式，可以設(shè)置為left、right或者默認none。在標準流中，一個塊元素（獨占一行的元素，如div、p、table等元素）在水平方向上會自動伸展，在垂直方向上和其他塊級元素依次排列。如果希望塊級元素并排顯示的話，可以通過浮動方式實現(xiàn)。當(dāng)設(shè)置了浮動屬性，此時將脫離標準流，后面盒子將占到脫離標準流的元素位置。當(dāng)float取值為left或者right，元素就會向父元素的左側(cè)或者右側(cè)緊靠。當(dāng)設(shè)置了浮動，盒子的寬度不再延伸，會根據(jù)盒子中的內(nèi)容決定寬度。當(dāng)float設(shè)置為none，表示盒子不浮動。float屬性的參數(shù)：left：對象浮動在父級元素的左邊。right：對象浮動在父級元素的右邊。例：浮動定位應(yīng)用2）position定位用來指定塊的位置，可以取static、absolute、relative和fixed。static：靜態(tài)定位，是position默認的屬性值，表示盒子按照標準流進行布局。absolute：絕對定位，使用標準流的排版方式，盒子的位置以包含它的父盒子為基準進行偏移。relative：相對定位，使用標準流的排版方式，表示盒子相對于它原來的標準位置偏移的位置。fixed：固定定位，和絕對定位相似，但是是以瀏覽器窗口為基準進行定位。當(dāng)點擊瀏覽器窗口的垂直滾動條時固定定位的盒子位置保持不變。在靜態(tài)定位中，元素保持原來位置，沒有發(fā)生位移。3.3.2div+css布局div+css布局是對網(wǎng)頁先整體進行分區(qū)（每個分區(qū)是個div塊），然后對每個分塊進行css定位。通過css排版的頁面，可以通過更新css屬性來重新定位板塊的位置。因此這種排版方式比表格布局要靈活。3.3.3常見布局結(jié)構(gòu)1．寬度固定且居中這種布局結(jié)構(gòu)是網(wǎng)頁開發(fā)中常用的布局方式，頁面容器寬度確定，頁面元素相對于瀏覽器窗口水平居中對齊。2．川字結(jié)構(gòu)川字結(jié)構(gòu)也稱為左中右結(jié)構(gòu)，這種結(jié)構(gòu)也是常見的排版模式。川字結(jié)構(gòu)網(wǎng)頁布局的方法，先確定左邊、右邊塊以及中間塊的大小，使用絕對或相對定位方式定位，在設(shè)置盒子大小時注意左中右盒子的大小之和不能超過頁面的寬度，否則右側(cè)盒子將會換行。例：使用絕對定位方式實現(xiàn)左中右布局實例3．三行兩列式國字型布局國字型結(jié)構(gòu)包括頂部區(qū)域（top），中間的主體部分(container)和下方的版尾(bottom)三個部分，主體部分又可以細化為左側(cè)(left)和右側(cè)(right)。例:通過float方式實現(xiàn)國字型布局實例課后習(xí)題：課后反思：《web前端開發(fā)》教案04第4單元教案教師教學(xué)單元JavaScript-網(wǎng)頁動態(tài)交互語言授課計劃學(xué)時6授課時間安排一、教學(xué)內(nèi)容：知識點：1、JavaScript基本語法2、JavaScrpt常用函數(shù)3、Javascript對象4、JavaScript事件驅(qū)動和事件處理5、JavaScript表單編程6、JavaScript定時器技能：掌握的技巧方法。二、學(xué)生特征分析學(xué)生在大學(xué)一年級學(xué)習(xí)過word軟件，word軟件中也有樣式。通過word中的樣式引入本次課程的學(xué)習(xí)，難度會有一定的降低。學(xué)生對美好的事物比較向往，看到引入樣式之后網(wǎng)頁會更加生動，學(xué)習(xí)的興趣會比較濃。三、教學(xué)內(nèi)容和學(xué)習(xí)水平的分析1、技能和知識點的劃分與學(xué)習(xí)水平的確定編號技能和知識點識記理解熟練操作應(yīng)用綜合分析技能掌握JavaScript對網(wǎng)頁元素操作的方法√√知識1.JavaScript常用函數(shù)的使用2.JavaScript語法√√態(tài)度主動分析、積極思考√√√能力使用JavaScript動態(tài)控制網(wǎng)頁元素√2、教學(xué)的重點和難點教學(xué)重點：1、JavaScript語法規(guī)則；2、JavaScript函數(shù)的使用；3、JavaScript內(nèi)置對象的使用。解決途徑：通過例子來展示網(wǎng)站瀏覽原理；開發(fā)流程介紹中引入實際開發(fā)的例子。教學(xué)難點：1、JavaScript動態(tài)添加元素的方法；2、JavaScript定時器。解決途徑：展示實例，學(xué)生討論，最終形成評價方案。四、教學(xué)策略基于問題情景的教學(xué)模式（提出問題，分析解決問題，在分析時引入討論環(huán)節(jié)，討論之后給出結(jié)論）五、教學(xué)過程設(shè)計和流程第4章JavaScript-網(wǎng)頁動態(tài)交互語言本章內(nèi)容與學(xué)習(xí)目標學(xué)習(xí)JavaScript語法基本操作掌握使用JavaScript動態(tài)設(shè)置網(wǎng)頁元素的樣式學(xué)會使用JavaScript內(nèi)置對象操作網(wǎng)頁元素掌握JavaScript表單編程方法4.1JavaScript基礎(chǔ)JavaScript是一種基于對象的、解釋型的、具有跨平臺特性的程序設(shè)計語言，用來向HTML頁面添加交互行為。4.1.1JavaScript簡介JavaScript語言并非Java語言。JavaScript是一種功能強大的腳本語言，由Netscape公司的LiveScript發(fā)展來的。Java語言是Sun公司開發(fā)的用于編寫跨平臺應(yīng)用程序的面向?qū)ο蟮某绦蛟O(shè)計語言。兩種語言是完全不相關(guān)的。JavaScript在Web瀏覽器中應(yīng)用非常廣泛，將JavaScript腳本嵌入到HTML頁面中，可以實現(xiàn)用戶交互、控制Web瀏覽器、動態(tài)修改文檔內(nèi)容等功能。這種嵌入到HTML頁面中的腳本，稱為客戶端的JavaScript。JavaScript核心語言及內(nèi)建的數(shù)據(jù)類型符合國際標準，兼容性好。但是客戶端的JavaScript一部分是正式標準化的，一部分是事實上的標準，或者特定于某種瀏覽器的擴展。所以，跨瀏覽器的兼容性是客戶端JavaScript程序開發(fā)者要關(guān)心的重要問題。JavaScript由三部分組成：1.ECMAScript：描述該語言的語法和基本對象。2.文檔對象模型：描述處理網(wǎng)頁內(nèi)容的方法和接口。3.瀏覽器對象模型：描述與瀏覽器進行交互的方法和接口。JavaScript的優(yōu)點：解釋型、動態(tài)執(zhí)行、跨平臺性、安全性、基于對象的語言。將JavaScript代碼寫在<scripttype="text/javascript"></script>之間。4.1.2一個簡單的HelloWorld程序引入JavaScript有兩種方法，嵌入到網(wǎng)頁中和獨立寫在外部的js文件中。1.將JavaScript腳本嵌入到HTML中例:JavaScript腳本嵌入HTML2.定義在js文件中js表示JavaScript文件。將JavaScript代碼定義在js文件中，在HTML文件中引入該js文件。例:4.1.3JavaScript編輯和調(diào)試工具JavaScript代碼是純文本，因此使用文本編輯器可以編寫js代碼。常用的編輯工具有EditPlus，sublimeText等。1.EditPlusEditplus是由韓國公司開發(fā)的小巧但功能強大的文本編輯器?？梢允褂盟鼇硖幚砦谋尽TML語言的編輯器，也可以作為C語言，JAVA語言，PHP等語言的一個簡單的IDE編輯環(huán)境?？梢酝ㄟ^/官網(wǎng)下載試用版。2.SublimeTextSublimeText是一款強大的文本代碼編輯器，它具有拼寫檢查，書簽，完整的PythonAPI，Goto功能，即時項目切換，多選擇，多窗口，強大的快捷命令，即時的文件切換和良好的擴展等功能。同時它是一個跨平臺的編輯器，支持Windows、Linux、MacOSX等操作系統(tǒng)。SublimeText是由程序員JonSkinner于2008年1月份所開發(fā)出來，它最初被設(shè)計為一個具有豐富擴展功能的Vim。可以通過/3網(wǎng)站下載SublimeText軟件。SublimeText中不能直接運行JavaScript，可以通過下面兩種方式運行JavaScript腳本：（1）在瀏覽器窗口中運行JavaScript腳本在瀏覽器窗口中打開含JavaScript腳本的網(wǎng)頁，通過瀏覽器解析腳本。（2）利用Node.js添加JavaScript控制臺通過添加BuildSystem的方法來直接運行JavaScript調(diào)試控制臺。操作方法：（1）下載并安裝Node.js，/en/。（2）為SublimeText添加BuildSystem。（3）打開SublimeText，選擇Tools>BuildSystem>NewBuildSystem...，js腳本定義獨立于網(wǎng)頁。（4）刪除文件已有內(nèi)容，粘貼以下內(nèi)容{"cmd":["node","$file"],"selector":"source.js"}（5）保存為Node.sublime-build，保存位置Data\Packages\User文件夾中。（6）在Tools>BuildSystem里選擇剛創(chuàng)建的Node，可以啟動腳本的調(diào)試。方法是在js文件中，按下Ctrl+B按鈕。4.1.4JavaScript數(shù)據(jù)類型1.JavaScript的五種基本數(shù)據(jù)類型1）undefinedundefined表示聲明的變量未被初始化。2）nullnull表示空值，如果引用一個沒有定義的變量，則返回空值。null表示它的值不是有效的對象，數(shù)組，數(shù)字。當(dāng)null用在布爾環(huán)境中，系統(tǒng)自動轉(zhuǎn)換為false，應(yīng)用在數(shù)字類型中，被轉(zhuǎn)換為0。3）booleanboolean表示布爾類型，包含true和false，0可以看作false，1可以看作true。4）stringstring表示文本類型，由單引號和雙引號括起來的字符。JavaScript中沒有字符型(char)數(shù)據(jù)類型，表示單個字符必須使用長度為1的字符串。5）number在JavaScript中不區(qū)別整形數(shù)值和浮點型數(shù)值，所有數(shù)字都是由浮點型表示的。數(shù)據(jù)類型的轉(zhuǎn)換：（1）數(shù)字類型轉(zhuǎn)換為字符串方法1：為數(shù)字數(shù)據(jù)添加一個空的字符串。如：vars=10+””;方法2：使用String()函數(shù)如：vars=String(10);（2）字符串類型轉(zhuǎn)換為數(shù)字轉(zhuǎn)換方法：varn=parseInt(”11”);使用parseInt()和parseFloat()方法可將字符串轉(zhuǎn)換為數(shù)字。2.數(shù)組類型數(shù)組是數(shù)值的集合。數(shù)組元素可以通過數(shù)組名和下標來表示。JavaScript可以通過構(gòu)造函數(shù)Array()來創(chuàng)建數(shù)組。語法：vars=newArray();創(chuàng)建數(shù)組之后就可以為數(shù)組中元素賦值。語法：s[0]=1;可以在構(gòu)造數(shù)組時為元素初始化。語法：vars=newArray(1,”good”);3.常量常量是在程序運行中值不能發(fā)生改變的量。JavaScript有整型常量，實型常量，布爾常量，字符型常量，空值，特殊字符六種類型常量。4.變量在JavaScript中，使用var關(guān)鍵字聲明變量。不同于其他語言，JavaScript在聲明變量時，不指明變量的數(shù)據(jù)類型。例如：varnum;JavaScript根據(jù)所賦值的類型來確定變量的類型。例如：message=”thisisastring”;JavaScript變量命名的規(guī)則：（1）必須以字母、下劃線或美元符號開始，中間可以是數(shù)字，字母或下劃線。（2）變量名中不能包含空格，換行，加號或減號等符號。（3）變量名稱對大小寫敏感。（4）不能使用JavaScript中的關(guān)鍵字。5.運算符和表達式運算符是程序設(shè)計語言的最基本元素。表達式是由常量、變量和運算符等組成。（1）一元運算符：一元運算符包括：算術(shù)運算符、位運算符、關(guān)系運算符、條件運算符、賦值運算符和逗號運算符等基本運算符。（2）算數(shù)運算符：算數(shù)運算符可以實現(xiàn)數(shù)學(xué)運算，包括加、減、乘、除和求余等運算。（3）賦值運算符：賦值運算符的作用是將賦值號右側(cè)的常量或變量的值賦給運算符左側(cè)的變量中。（4）關(guān)系運算符：關(guān)系運算符用于對兩個變量或數(shù)值進行比較，并返回一個布爾值。JavaScript的關(guān)系運算符有==、!=、<、>、<=、>=。（5）位運算符：位運算符可以對整型數(shù)值中按照指定的位進行移位。JavaScript的位運算符有&、|、~、^、<<、>>、>>>。（6）邏輯運算符：JavaScript支持的邏輯運算符有&&、||和！。（7）條件運算符：條件運算符是JavaScript中唯一的三目運算符。連接三個操作數(shù)或者表達式。（8）逗號運算符：逗號運算符可以在一條語句中同時執(zhí)行多個運算。表達式表達式是一個語句集合，它由常量，變量和運算符等組成。表達式包含多種，由運算符連接成的語句是表達式，函數(shù)的調(diào)用語句也是表達式（后面學(xué)習(xí)）。如：varx=dosomething(10);//dosomething()是js中定義的函數(shù)6.流程控制語句1）順序結(jié)構(gòu)順序結(jié)構(gòu)的語句按照從上到下的順序逐行執(zhí)行，完成順序結(jié)構(gòu)的語句有賦值語句、復(fù)合語句、函數(shù)調(diào)用等語句。2）選擇結(jié)構(gòu)if語句是最常用的一種選擇結(jié)構(gòu)語句。if語句的基本語法結(jié)構(gòu)：if（expression）語句塊ifelse語句else語句與if語句配對使用，指定當(dāng)條件不滿足時所執(zhí)行的語句。語法：if（expression）語句塊1else語句塊2elseif語句可以使用elseif語句指定其他滿足的條件。語法：if(expression1)語句塊1elseif(expression2)語句塊2else語句塊nswitch語句使用switch語句，表示根據(jù)不同取值范圍進行選擇處理流程。語法：switch（expression）{casev1：語句塊1break；casev2：語句塊2break；casevn：語句塊nbreak；default：語句塊n+1；}3）循環(huán)結(jié)構(gòu)循環(huán)結(jié)構(gòu)是指當(dāng)一組條件滿足之后循環(huán)執(zhí)行一段代碼。JavaScript語言的循環(huán)語句包括while語句、do..while語句和for語句。while語句語法：while（expression）{循環(huán)語句體}do...while語句do...while語句在執(zhí)行循環(huán)體之后去執(zhí)行expression，值為真時繼續(xù)執(zhí)行循環(huán)體，直到為假跳出循環(huán)體。語法：do{循環(huán)語句體}while（expression）；for語句語法：for（expression1；expression2；expression3）{循環(huán)體}continue語句使用continue語句可以跳過本次循環(huán)后面的代碼，提前進入下次循環(huán)。break語句使用break語句可以結(jié)束循環(huán)。4.2JavaScript函數(shù)函數(shù)是定義一次但可以多次調(diào)用的JavaScript代碼。JavaScript支持很多內(nèi)部函數(shù)，如Array類的eval()、parseInt()。4.2.1alert()函數(shù)語法：alert(message);功能：彈出消息對話框，對話框中包含確定按鈕。說明：message表示要提示的信息，是string類型的變量或字符串。4.2.2confirm()函數(shù)語法：confirm(message,ok,cancel);功能：顯示一個請求確認對話框，其中包含確定按鈕和取消按鈕。在程序中，可以根據(jù)用戶的選擇來決定執(zhí)行的操作。說明：message是string類型的變量或字符串，用來表示提示信息。當(dāng)用戶單擊確定按鈕則函數(shù)返回true，單擊取消按鈕返回false。4.2.3prompt()函數(shù)語法：prompt(message,defaultMessage);功能：彈出要求用戶輸入信息的對話框，對話框中包含確定按鈕、取消按鈕和文本框。說明：message表示提示的信息。defaultMessage為默認的輸入文本信息。當(dāng)用戶單擊確定按鈕，函數(shù)返回文本框中輸入的文本，若用戶選擇取消按鈕，則函數(shù)返回null。4.2.4isNaN()函數(shù)語法：isNaN(param);功能：測試參數(shù)是否為數(shù)值型數(shù)據(jù)。說明：param表示待檢測的參數(shù)。如果參數(shù)是數(shù)值型，則函數(shù)返回false，否則返回true。4.2.5parseInt()函數(shù)語法：parseInt(message);功能：將字符串轉(zhuǎn)化為整型數(shù)值形式。說明：message表示要轉(zhuǎn)換的字符串。若message為可轉(zhuǎn)換為數(shù)值的字符串，則返回的是數(shù)值型數(shù)據(jù)，否則返回一個NaN，表示無法轉(zhuǎn)換為數(shù)字。4.2.6parseFloat()函數(shù)語法：parseFloat(message);功能：將字符串轉(zhuǎn)化成浮點數(shù)字形式。說明：message表示要轉(zhuǎn)換的字符串。若message為可轉(zhuǎn)換為浮點數(shù)字的字符串，則返回的是浮點數(shù)據(jù)，否則返回一個NaN，表示無法轉(zhuǎn)換為浮點數(shù)字。4.2.7自定義函數(shù)JavaScript使用function關(guān)鍵字來定義函數(shù)。語法：function函數(shù)名（paramlist）{函數(shù)體}說明：paramlist表示參數(shù)列表，參數(shù)列表可以為空，也可以包含多個參數(shù)，參數(shù)之間使用逗號分隔。函數(shù)體可以是一條語句，也可以由一組語句組成。4.2.8函數(shù)的調(diào)用1.在JavaScript中直接通過函數(shù)名調(diào)用函數(shù)語法：函數(shù)名(參數(shù)列表);2.在HTML中通過JavaScript方式調(diào)用JavaScript函數(shù)在HTML的<a>標記超鏈接中，使用“JavaScript：”方式調(diào)用JavaScript函數(shù)。語法：<ahref=”JavaScript:函數(shù)名(參數(shù)列表)”>...</a>3.與事件相結(jié)合來調(diào)用JavaScript函數(shù)將JavaScript函數(shù)設(shè)置為JavaScript事件的處理函數(shù)，當(dāng)觸發(fā)事件時會自動調(diào)用指定的JavaScript函數(shù)。比如當(dāng)頁面載入事件發(fā)生時，觸發(fā)計算訪客數(shù)量的函數(shù)執(zhí)行。4.3Javascript對象4.3.1內(nèi)置對象1.String對象JavaScript使用String類表示字符串對象，可以保存字符串。字符串聲明：varobjstr=newString(字符串常量);說明：objstr表示字符串對象，將字符串常量包裝成字符串對象。String對象常用屬性length，表示字符串的長度。String對象常用方法：1）charAt()方法語法：字符串對象.charAt(索引);功能：返回字符串中指定位置的字符。說明：方法的返回值為字符型數(shù)據(jù)。索引是字符串中表示某個位置的數(shù)字，從0開始計數(shù)。例：charAt()方法應(yīng)用2)indexOf()方法語法：字符串對象.indexOf(子字符串，開始的索引位置);功能：返回String對象中第一次出現(xiàn)某個子字符串的位置。說明：開始的索引位置取值范圍為0到字符串長度-1.如果省去該參數(shù)，則將從字符串的首字符開始檢索。例：indexOf()方法應(yīng)用3)lastIndexOf()方法語法：字符串對象.lastIndexOf(子字符串，開始的索引位置);功能：返回String對象中最后一次出現(xiàn)某個子字符串的位置。4)substr()方法語法：字符串對象.substr(開始位置索引，結(jié)束位置索引);功能：返回String對象中指定位置的子字符串。例：substr()方法應(yīng)用5)split()方法語法：字符串對象.split(分割符，返回的數(shù)組的最大長度);功能：將一個字符串對象分割為多個子字符串，將結(jié)果作為子字符串?dāng)?shù)組返回。說明：如果設(shè)置了返回的數(shù)組的最大長度，返回的子字符串不會多于這個數(shù)值。split()方法返回的是字符串對象按照分隔符分割而得到的數(shù)組。例：split()方法應(yīng)用6)replace()方法語法：字符串對象.replace(要替換的子串,替換的子串);功能：在字符串中進行字符替換。例：replace()方法應(yīng)用7)toLowerCase()方法語法：字符串對象.toLowerCase();功能：將字符串轉(zhuǎn)換為小寫形式。例：toLowerCase()方法應(yīng)用8)toUpperCase()方法語法：字符串對象.toUpperCase();功能：將字符串轉(zhuǎn)換為大寫形式。9)toString()方法語法：字符串對象.toString();功能：獲取字符串對象的字符串值。例：toString()的應(yīng)用10）concat()方法語法：字符串對象1.concat(字符串對象2);功能：返回一個字符串對象，該對象包含了兩個字符串的連接。說明：concat()方法返回連接后的字符串，當(dāng)然也可以直接使用“+”連接兩個字符串。2.Math對象Math對象中包含用來進行數(shù)學(xué)計算的屬性和方法。屬性：PI(圓周率)，LN10(10的自然對數(shù))，E(歐拉常數(shù))方法：1）abs()方法語法：abs(number);功能：計算number絕對值，若number<0則返回一個正值。2）ceil()方法語法：ceil(number);功能：返回大于等于number的最小整數(shù)。例：ceil()方法應(yīng)用3）floor()方法語法：floor(number);功能：返回小于等于其數(shù)字參數(shù)的最大整數(shù)。4）max()方法語法：max(exp1,exp2);功能：返回給出的兩個數(shù)值表達式中的較大者。5）min()方法語法：min(exp1,exp2);功能：返回給出的兩個數(shù)值表達式中的較小者。6）pow()方法語法：pow(n1,n2);功能：返回n1的n2次冪。7）sqrt()方法語法：sqrt(number);功能：返回number的平方根。8）radom()方法語法：radom();功能：返回介于0-1的偽隨機數(shù)。9）round()方法語法：round(number);功能：返回與給出的number最接近的整數(shù)。3.Date對象Date對象用于獲取系統(tǒng)的日期和時間。創(chuàng)建Date對象語法：vardate=newDate(日期參數(shù));說明：日期參數(shù)有三種形式，分別為缺省不寫、日期字符串和數(shù)值形式。缺省不寫：vardate=newDate();日期字符串：vardate=newDate("October24,2017");數(shù)值形式：vardate=newDate(2017,10,24);Date對象的常用方法：1）getDate()方法語法：getDate();功能：根據(jù)系統(tǒng)時間計算日期，值可取1到31。2）getDay()方法語法：getDay();功能：根據(jù)系統(tǒng)時間返回在一