HTMLCSSJavaScript網(wǎng)頁制作案例教程教學(xué)大綱

1、學(xué)習(xí)好資料歡迎下載課程編號： 學(xué) 分: 學(xué) 時(shí): 先修課程: 后續(xù)課程: 適用專業(yè): 開課部門:HTML、 CSSHTML+CSS+JavaScri pt網(wǎng)頁制作案例教程課程教學(xué)大綱（課程英文名稱）2015092100115學(xué)分64學(xué)時(shí) （其中：講課學(xué)時(shí)：45 上機(jī)學(xué)時(shí)：19） 計(jì)算機(jī)基礎(chǔ)、計(jì)算機(jī)網(wǎng)絡(luò)、計(jì)算機(jī)應(yīng)用UI設(shè)計(jì)、JavaScript網(wǎng)頁特效信息及其計(jì)算機(jī)相關(guān)專業(yè)計(jì)算機(jī)系、課程的性質(zhì)與目標(biāo)HTML+CSS+JavaScript網(wǎng)頁制作案例教程）是面向計(jì)算機(jī)相關(guān)專業(yè)的一門專業(yè)基礎(chǔ)課，涉及網(wǎng)頁基礎(chǔ)、HTML標(biāo)記、CSS樣式、網(wǎng)頁布局、JavaScript編程基礎(chǔ)與事件處理等內(nèi)容。通過本課程

2、的學(xué)習(xí)，學(xué)生能夠了解及JavaScript語言的發(fā)展歷史及未來方向，熟悉網(wǎng)頁制作流程、掌握常見的網(wǎng)頁布局效果、學(xué)會制作各種企業(yè)、門戶、電商類網(wǎng)站。、課程的主要內(nèi)容及基本要求第一章 網(wǎng)頁那點(diǎn)事（2學(xué)時(shí)）知識點(diǎn)認(rèn)識網(wǎng)頁常見的互聯(lián)網(wǎng)專業(yè)術(shù)語WebWeb標(biāo)準(zhǔn)HTMLHTML簡介學(xué)習(xí)好資料歡迎下載CSSCSS簡介JavaScriJavaScri ptpt 簡介學(xué)習(xí)好資料歡迎下載I I3ij*fTn3ij*fTn jfcx.jfcx.I I傳習(xí)播客ia計(jì)學(xué)院惱智（&甞設(shè)計(jì)學(xué)烷戍立于2OLQ2OLQ年.專注于平方設(shè)計(jì)環(huán)、屈頁iSiS計(jì)師、E設(shè)計(jì)師的啟 ft*我inin擁有專業(yè)的I I帀資團(tuán)臥S6HS6H合餐

3、的康程架梅，4 4亍月的宇習(xí)訴帛軒進(jìn)、充義誼爲(wèi) AFAF S S碉的設(shè)計(jì)較件血t t皿hophop和mustmust ratrat oror開始學(xué)起.通迥S S碉羌術(shù)？習(xí)遺視和光關(guān) 系，S S徨中結(jié)呂光S S的薬IWIW和買戰(zhàn)頃目 4 4牛月的學(xué)習(xí)指當(dāng)于兩年工作經(jīng)驗(yàn)。急惱智（喜設(shè)計(jì)學(xué)烷軸箱你的遠(yuǎn)運(yùn)不止如御作囹，在這里你捋宇到真正的設(shè)計(jì)薪養(yǎng)和連 卑業(yè)Z Z后-平面、網(wǎng)頁、UIUI說計(jì)抑IffIff通的全龍說計(jì)師。時(shí),迄鈾止節(jié)智（&甞設(shè)計(jì)學(xué)烷已經(jīng)倍養(yǎng)出了上萬呂設(shè)計(jì)師，亙布于!丸中型企lblb冋 川越SSSS客走出去的宇員也得到了各十企業(yè)的一敦認(rèn)5151和好評*常用瀏覽器介紹DreamweaverD

4、reamweaver工具的使用使用DreamweaverDreamweaver創(chuàng)建第一個(gè)頁面重 點(diǎn)WebWeb標(biāo)準(zhǔn)DreamweaverDreamweaver工具的使用難 點(diǎn)WebWeb標(biāo)準(zhǔn)DreamweaverDreamweaver工具創(chuàng)建第一個(gè)頁面基本要求了解 WebWeb標(biāo)準(zhǔn)，明確 HTMLHTML CSSCSS及JavaScriptJavaScript 在其中的作用。熟悉DreamweaverDreamweaver工具的基本操作，能使用DreamweaverDreamweaver創(chuàng)建簡單的網(wǎng)頁。第二章 從零開始構(gòu)建HTMI頁面（4學(xué)時(shí)）相關(guān)案例【案例1 1】簡單的網(wǎng)頁:HTMLHTML

5、是什么肛孔是一種超文本標(biāo)記語言，也是目前網(wǎng)絡(luò)上應(yīng)用最為廣眨的語言，它王要 通過肛亂標(biāo)記對網(wǎng)貝中的文本、圖片、聲音等內(nèi)容進(jìn)行描述.是構(gòu)成網(wǎng)頁文 檔的基礎(chǔ).【案例2 2】新聞頁面:中國好畢設(shè).找傳皆播客更新旳詞：20152015年DdDd月1601416014時(shí)朋idid來丘：傳智無菩中國好畢設(shè)第一季活動震堰開啟中國好畢設(shè)，找傳智措客活動是由傳智播客教肓集團(tuán)專門面向 劉15屆畢業(yè)生err方向）畢業(yè)設(shè)計(jì)而開展的活動.旨在通過畢設(shè)技術(shù)大牛的指導(dǎo).幫助應(yīng)屆畢業(yè)生 順利完成畢設(shè)論文.合格畢業(yè)，并在夫?qū)W生就業(yè)方面握供幫助.【案例3 3】圖文混排:學(xué)習(xí)好資料歡迎下載HTMLHTML文檔基本格式單標(biāo)記與雙標(biāo)記標(biāo)

6、題與段落標(biāo)記HTMLHTML文檔頭部相關(guān)標(biāo)記fontfont標(biāo)記標(biāo)記的屬性文本格式化標(biāo)記圖像標(biāo)記相對路徑與絕對路徑 常用圖像格式特殊字符標(biāo)記HTMLHTML文檔基本格式 標(biāo)記的屬性 圖像標(biāo)記相對路徑與絕對路徑相對路徑與絕對路徑學(xué)習(xí)目標(biāo)掌握HTMLHTML文檔基本格式，能夠書寫規(guī)范的HTMLHTML網(wǎng)頁。掌握標(biāo)題、段落及文字標(biāo)記，可以合理地使用它們定義網(wǎng)頁元素。 掌握圖像標(biāo)記，學(xué)會制作圖文混排頁面。第三章 使用CSS技術(shù)美化網(wǎng)頁（8學(xué)時(shí)）相關(guān)案例【案例4 4】文字LogoLogo :GoL gle【案例5 5】專題欄目:學(xué)習(xí)好資料歡迎下載CSSCSS樣式代碼。導(dǎo)詹：新年伊始.娜櫓季洶清而來”大企

7、業(yè)OfOf小侖司,”程序員路 在何方“ ? 23 傳智特刊切血業(yè)flEflE頭兵大企業(yè)螺絲釘！他們 倆迪患想雌”會逬境出怎樣”劍捱琶張”的火花呃f f萍清磁：月薪1800018000元【案例6 6】搜索頁面：什么是什么是CSS?CSS?C5SC5S教程教程握子提示可以通過簡單的更改C55C55文件，改變網(wǎng)頁的整休表現(xiàn)形式可趙少我們的工作量 所以她是每ff網(wǎng)丙設(shè)計(jì)人員的必修課知道什么是C5SC5S了耳莊就開始學(xué)習(xí)C C話吧www.drewww.dre amduxoir/camduxoir/c ss/whss/wh .百團(tuán)夬慝 8 8 5 5 冊好評識點(diǎn)CSSCSS樣式規(guī)則引入CSSCSS樣式表C

8、SSCSS基礎(chǔ)選擇器CSSCSS字體樣式屬性CSSCSS文本外觀屬性CSSCSS復(fù)合選擇器CSSCSS層疊性與繼承性CSSCSS優(yōu)先級CSSCSS樣式規(guī)則 引入CSSCSS樣式表CSSCSS復(fù)合選擇器CSSCSS層疊性與繼承性CSSCSS優(yōu)先級點(diǎn)CSSCSS復(fù)合選擇器CSSCSS優(yōu)先級基本要求掌握CSSCSS樣式規(guī)則，能夠書寫規(guī)范的掌握CSSCSS字體樣式及文本外觀屬性，能夠控制頁面中的文本樣式。半上t t學(xué)習(xí)好資料歡迎下載掌握理解【案例 7 7】音樂盒:【案例 8 8】用戶中心:【案例 9 9】咖啡店bannerbanner：CSSCSS復(fù)合選擇器，可以快捷選擇頁面中的元素。CSSCSS疊性

9、、繼承性與優(yōu)先級，學(xué)會高效控制網(wǎng)頁元素。相關(guān)案例第四章CSS盒子模型（8學(xué)時(shí)）學(xué)習(xí)好資料歡迎下載【案例1010】圖標(biāo)導(dǎo)航欄:1313認(rèn)識盒子模型divdiv標(biāo)記 邊框?qū)傩?內(nèi)邊距屬性 外邊距屬性 背景屬性 元素的類型 spanspan標(biāo)記 元素的轉(zhuǎn)換 divdiv標(biāo)記邊框?qū)傩?內(nèi)邊距屬性 外邊距屬性 背景屬性 元素的轉(zhuǎn)換背景屬性 元素的類型 元素的轉(zhuǎn)換基本要求掌握盒子模型相關(guān)屬性，能夠使用它們熟練地控制網(wǎng)頁元素。 理解塊元素與行內(nèi)元素的區(qū)別，能夠?qū)λ鼈冞M(jìn)行轉(zhuǎn)換。WITAMYWASWITAMYWASWSWIECIEKAWYWSWIECIEKAWYifcrn|rifcrn|rrJwrJw JOHC

10、FJOHCF押柑r rwvriEYixwvriEYixLivHTLivHT曲IEIE z z H H ?p?p nunu w w rzntinrzntin學(xué)習(xí)好資料歡迎下載第五章列表與超鏈接（6學(xué)時(shí)）相關(guān)案例李剛傳晉暦耳 g g級：網(wǎng)員匹麗 梟例：4141 T T經(jīng)驗(yàn)：4 4牟【案例 1111】精美電商懸浮框:返回頂部【案例 1212】二維碼名片:PjPj【案例 1313】電商團(tuán)購懸浮框:學(xué)習(xí)好資料歡迎下載學(xué)習(xí)好資料歡迎下載7月30日0:00開團(tuán)新品團(tuán)嘗鮮團(tuán)秒殺團(tuán)a倉團(tuán)返回頂部【案例1414】唱吧導(dǎo)航欄:隹B木頁 MUSICMUSIC選驗(yàn)單 RadioRadio音樂這人 頂聽聽AA SongS

11、ong最新單曲:-|Oi|Oi AlbumAlbum音樂izAizA音樂專冷“ MVMV音竝A A MUSICMUSIC_ _選歌單唱吧導(dǎo)航欄默認(rèn)效果在IBIB木頁 RadioRadio音樂達(dá)扎 SongSong音樂達(dá)人晨新單曲AAIOIO AlbumAlbum音樂專輜 MVMV音樂達(dá)兒鼠標(biāo)移上歌曲分類時(shí)無序列表有序列表定義列表定義列表實(shí)現(xiàn)圖文混排列表嵌套list-stylelist-style復(fù)合屬性背景圖像定義列表項(xiàng)目符號 超鏈接標(biāo)記清除超鏈接圖像的邊框鏈接偽類錨點(diǎn)鏈接學(xué)習(xí)好資料歡迎下載能夠使用超鏈接定義網(wǎng)頁元素。CSSCSS偽類實(shí)現(xiàn)超鏈接特效。無序列表定義列表背景圖像定義列表項(xiàng)目符號 超

12、鏈接標(biāo)記鏈接偽類背景圖像定義列表項(xiàng)目符號 鏈接偽類基本要求掌握無序、有序及定義列表的使用，可以制作常見的網(wǎng)頁列表模塊。 掌握超鏈接標(biāo)記的使用， 掌握CSSCSS偽類，會使用相關(guān)案例【案例1515】用戶登錄界面:【案例1616】趣味選擇題:第六章 HTML表單（6學(xué)時(shí)）登學(xué)習(xí)好資料歡迎下載【案例1717】空間日志:1 1 XIM AI-IJ 1111 1-1- . . I I - - J J I I I Ii-Aj-i-Aj-樂i*ni*n v v【案例1818】學(xué)員檔案:4H4H J1J1夫建到V美人魚巴它放了”遠(yuǎn)是劃十么（）？（舸）廣違反蠶主動：to保護(hù)法儘在華客道上”關(guān)羽為卄么沒有殺曹操（

13、J ?（埶丨廠艾列不環(huán)K K璉raueyrauey卄去:I I亍g 二1 1楓眼:險(xiǎn)開 耳學(xué)習(xí)好資料歡迎下載1識點(diǎn)認(rèn)識表單 創(chuàng)建表單inputinput控件 textareatextarea 控件 selectselect控件CSSCSS控制表單樣式點(diǎn)inputinput控件 textareatextarea 控件 selectselect控件CSSCSS控制表單樣式點(diǎn)inputinput控件CSSCSS控制表單樣式傳智幡客學(xué)員檔案學(xué)習(xí)好資料歡迎下載基本要求理解表單的構(gòu)成，可以快速創(chuàng)建表單。掌握表單相關(guān)標(biāo)記，能夠創(chuàng)建具有相應(yīng)功能的表單控件。 掌握表單樣式的控制，能夠美化表單界面。第七章浮動與定

14、位（6學(xué)時(shí)）學(xué)習(xí)好資料歡迎下載1的傳舸帶寬町以達(dá)到毗跳頻式非壓縮數(shù)據(jù)傳喻和數(shù)據(jù)打包及拼接協(xié)訟相關(guān)案例【案例1919】世界杯夢幻陣容:FIfAFIfA WORLDWORLD匚UPUP【案例2020】商品專欄:藍(lán)牙無線耳機(jī):煒障無損傳輸?shù)难捎诶装豀IDOHIDO痕用的麗無線音頻解決方素的傳輸 帶寬可収達(dá)到2 2血跳頻式非壓縮數(shù)據(jù)傳輸和數(shù)搖打赳及拼接協(xié)議.I I超級筆記本電腦:保障無禎傳輸?shù)膇aia由于雷柏HLCHHHLCHH）使用的HFHF無線音頻娜決方案的傳 輸帶寬可以達(dá)到2 2兒跳頻式非壓編數(shù)扌居傳輸和數(shù)據(jù)打包及.拼接協(xié)議，I I復(fù)古磁帶藍(lán)牙音箱:保障無損傳輸?shù)年?由于雷柏HlOOOjHl

15、OOOj用的昭無線音頻解決方案【案例2121】移動端電商界面:F F V.TV.T KLKL ININ .- y riri - 口巧巴學(xué)習(xí)好資料歡迎下載【案例2222】違停查詢:靜過、“違停查詢界面”默認(rèn)效果著侈品*牛護(hù)般時(shí)面女裝BDI潼行劈精品酬全部商品分類侖5 52:302:30學(xué)習(xí)好資料歡迎下載學(xué)習(xí)好資料歡迎下載鼠標(biāo)經(jīng)過第一個(gè)“違停坐標(biāo)”效果識點(diǎn)元素的浮動屬性floatfloat clearclear屬性清除浮動overflowoverflow屬性清除浮動afterafter偽對象清除浮動overflowoverflow 屬性元素的定位屬性靜態(tài)定位相對定位絕對定位固定定位z-indexz

16、-index層疊等級屬性元素的浮動屬性floatfloat clearclear屬性清除浮動 overflowoverflow屬性清除浮動 相對定位絕對定位overflowoverflow屬性清除浮動相對定位絕對定位基本要求理解元素的浮動，能夠使用浮動對網(wǎng)頁進(jìn)行布局。 熟悉清除浮動的方法，能夠清除浮動的影響。掌握常見的幾種定位模式，能夠?qū)υ剡M(jìn)行精確定位。第八章 JavaScript編程基礎(chǔ)（8學(xué)時(shí)）相關(guān)案例【案例2323】動態(tài)獲取用戶密碼:學(xué)習(xí)好資料歡迎下載【案例2424】傳智商城下拉菜單:請輸皿的注碼!取消I I購韌車0傳智商城傳智商城r php.php. Itcaat.Itcaat. C

17、DCD“傳智商城”效果展示按索合員中己去購物車潔S S0傳智商城傳智商城.F.F ptv-ptv- itcAtt.itcAtt. a a我的商堀購物豐匝貝樹題我的1 1新商雌A.A.祈歡臺員中心去購韌車皓算【案例2525】計(jì)算器:“下拉菜單”效果展示學(xué)習(xí)好資料歡迎下載知識點(diǎn)JavaScriptJavaScript 的引入關(guān)鍵字變量prompt()prompt()函數(shù) alert()alert()函數(shù) console.log()console.log()函數(shù) 函數(shù)ArrayArray數(shù)組對象 DOMDOM節(jié)點(diǎn)樹 節(jié)點(diǎn)的訪問元素對象常用操作 元素屬性與內(nèi)容操作 元素樣式操作 數(shù)據(jù)類型運(yùn)算符學(xué)習(xí)好資

18、料歡迎下載語句，能夠靈活運(yùn)用條件控制語句。第九章 JavaScri pt事件處理(10學(xué)時(shí))運(yùn)算符優(yōu)先級表達(dá)式 條件語句eval()eval()函數(shù)變量 函數(shù)ArrayArray數(shù)組對象DOMDOM節(jié)點(diǎn)樹節(jié)點(diǎn)的訪問 元素對象常用操作 元素屬性與內(nèi)容操作 元素樣式操作條件語句DOMDOM節(jié)點(diǎn)樹節(jié)點(diǎn)的訪問元素對象常用操作 元素屬性與內(nèi)容操作 元素樣式操作基本要求掌握J(rèn)avaScriptJavaScript語法規(guī)則，能夠書寫規(guī)范的JavaScriptJavaScript代碼。掌握數(shù)組的概念，能夠熟練使用數(shù)組的常用屬性和方法。掌握節(jié)點(diǎn)的訪問，能夠準(zhǔn)確訪問指定元素和相關(guān)元素。掌握ifif語句及switc

19、hswitch相關(guān)案例【案例2626】電商網(wǎng)站限時(shí)秒殺:卻11華* TTTT舉列MrAwfe.MrAwfe.官好= E3 IS CO秒殺已結(jié)束限時(shí)秒殺秒殺結(jié)束【案例2727】TabTab欄切換效果:學(xué)習(xí)好資料歡迎下載ft人淚下;公司動態(tài)幵學(xué)典禮學(xué)員感言學(xué)員故事 網(wǎng)絡(luò)膏肖課程柜惠北(X)(X)元，只剩最后1010天莖傳智特刊開年任性大改版，第戈2 2期隅上線 2 2血4 4版?zhèn)髦遣タ蚉HPPHP學(xué)習(xí)路線圖霸氣上線TTTT教師的福音,專教技術(shù)干貨的大學(xué)教村霍撼首發(fā)TabTab欄切換前公司動態(tài)開學(xué)典禮學(xué)員感言學(xué)員故事用汗水證明這是傳智播容的時(shí)代 瓦工的程序員夢 iOSiOS學(xué)習(xí)之路，撐起我的成長夢想

20、個(gè)電力工人轉(zhuǎn)身口的經(jīng)歷TabTab欄鼠標(biāo)懸浮狀態(tài)【案例2828】臺球移動游戲:【案例2929】用戶登陸驗(yàn)證:臺球移動后的位置臺球初始位置學(xué)習(xí)好資料歡迎下載未輸入密碼提示密碼輸入不一致提示JavaScriJavaScri ptpt 事件事件處理程序的調(diào)用BOMBOM操作DateDate對象數(shù)據(jù)類型轉(zhuǎn)換 循環(huán)控制語句 跳轉(zhuǎn)語句 鼠標(biāo)事件 鍵盤事件 頁面事件 事件對象 表單事件StriStri ngng對象用戶名：(ft入密碼：用戶登陸驗(yàn)證用戶各:眶輜入密碼：證碼不能再空!學(xué)習(xí)好資料歡迎下載JavaScriptJavaScript常用事件，如鼠標(biāo)事件、表單事件、鍵盤事件以及頁面事件等。BOMBOM操

21、作，能夠使用 BOMBOM與瀏覽器窗口進(jìn)行交互。DataData對象的常用方法，能夠應(yīng)用DataData對象獲取當(dāng)前區(qū)域的日期時(shí)間字符第十章實(shí)戰(zhàn)開發(fā)一傳智播客設(shè)計(jì)學(xué)院首頁面（6學(xué)時(shí)）BOMBOM操作 DateDate對象 循環(huán)控制語句 跳轉(zhuǎn)語句鼠標(biāo)事件 鍵盤事件 頁面事件 事件對象 表單事件鼠標(biāo)事件 鍵盤事件 頁面事件 事件對象 表單事件基本要求了解什么是JavaScriptJavaScript事件，能夠?qū)κ录幚沓绦蜻M(jìn)行調(diào)用。 掌握 掌握 掌握 串。案例展示學(xué)習(xí)好資料歡迎下載庵苕H菩殳計(jì)？瞬蓼 I Ltji Mi ;d*VB*VB MgCKIMgCKIafc-afc-BTHifcBTHifc

22、 護(hù)n n匸a a、罔商：!？!仙罟活斗；7 7晞EE弒-：2 2H H刃i i趕34Kv+v+ lIlLlIlL耳 fTIDfTID K.J=iFK.J=iFI = =3_f3_f T.SBHFGKlillT.SBHFGKlill -凹1 1/KFP.b&/KFP.b&；_BntfRjca_BntfRjca 炯上餌増砂艮息3 3 :*:*匚魚Jl-忻I I“叫沁軋,H . JmiiiigAnJmiiiigAn g gI I:站卜可HrStATMHrStATM- f f -.-. r-Cr-C-,|云-J :口- 亠u u ntnt I I 和 QiMQiMI I pu&npu&n I I r*r*建立站點(diǎn)站點(diǎn)初始化設(shè)置切片效果圖分析頁面布局定義公共樣式制作頭部和導(dǎo)航制作bannerbanner和通告制作主體內(nèi)容