動態(tài)網(wǎng)頁制作(三)

本論文在其他論文欄目，由論文格式網(wǎng)整理,轉(zhuǎn)載請注明來源m.donglienglish.cn,更多論文,請點(diǎn)論文格式范文查看
任務(wù)二：觀察一下java script代碼有什么明顯特征
生：代碼在<scsrip>與</scsrip>標(biāo)簽中間
思考：如果多個(gè)頁面要應(yīng)用同一個(gè)效果，如成品中展示的“歡迎您的光臨”效果，我們?nèi)绾螌?shí)現(xiàn)？
生：每個(gè)頁面分別加上“歡迎您的光臨”的scsrip代碼
師：同學(xué)們說得能實(shí)現(xiàn)，只是每個(gè)頁面分別加那么一串代碼不但麻煩而且增大了文件，影響網(wǎng)速。大家學(xué)數(shù)學(xué)時(shí)對于式子中共同的部分，有個(gè)操作叫提取公因式，這兒我們也可以借鑒一下，把共同的代碼除了<scsrip>標(biāo)簽，提取放到一個(gè)文本文件中，以js為擴(kuò)展名保存。
生：那<scsrip>標(biāo)簽中什么也沒有還能行？
師：當(dāng)然不行，要加調(diào)用語句，但不是在標(biāo)簽內(nèi)部，而是<scsrip>標(biāo)簽內(nèi)，作為屬性，如src=”x.js”，這里js文件與目標(biāo)文件在同文件夾中，否則還有加上路徑。
任務(wù)三：為站點(diǎn)的每個(gè)頁面應(yīng)用“歡迎您的光臨”效果，用js文件
師：這節(jié)課我們學(xué)習(xí)了script相關(guān)知識及其應(yīng)用方式，下面我們總結(jié)一下
java script是一面向?yàn)g覽器的網(wǎng)頁腳本語言，無需經(jīng)過編譯即可在瀏覽器中運(yùn)行。Javascritpt是為了控制html頁面中的對象，因此必須與html集合起來。
實(shí)現(xiàn)多個(gè)頁面調(diào)用相同java script功能代碼的方法是：把相應(yīng)代碼存放在一個(gè)擴(kuò)展名為js的文本文件中，在需要時(shí)調(diào)用。
常見的客戶端腳本語言還有vbscript.
（三）樣式表的學(xué)習(xí)☆（本部分曾獲獎并發(fā)表，考慮的到整章教學(xué)設(shè)計(jì)的完整性，附上精簡后的教案）
[課前準(zhǔn)備]
利用電子教室軟件把半成品站點(diǎn)文件夾分發(fā)到學(xué)生的桌面上，文件夾內(nèi)包括如下內(nèi)容
[教學(xué)過程]
師：大家對“換膚”這個(gè)詞不陌生吧，能否舉幾個(gè)例子呢？
生：博客、論壇、qq空間、qq，一些播放器……
師：知道的不少，看來“換膚”很時(shí)興呀。大家想不想知道博客是如何“換膚”呢？
生：想！
[廣播]打開教師博客，進(jìn)入后臺，展示換膚過程。
師：換膚的過程很簡單吧，大家一下就學(xué)會了（不要急嘗試喲）。現(xiàn)成的皮膚畢竟缺乏個(gè)性，要想獨(dú)特點(diǎn)，行不行？
生：疑惑中……
師：這是難不到我們的，我們可是學(xué)過網(wǎng)頁設(shè)計(jì)的人喲。但要想實(shí)現(xiàn)個(gè)性換膚，前提是得破解換膚秘訣，也就是換膚的機(jī)理是什么？我們先來做初步分析。
[廣播]展示相關(guān)皮膚文件（下載），主模板、分模板文本文件、相關(guān)圖，還有一個(gè)Css文件。
師：大家知道這Css文件有什么用？
生：不知道！
師：博客后臺，教師進(jìn)入主模板（剪下鏈接代碼）更新，首頁立刻變了型。然后教師把剛才剪下的代碼粘上，更新一下，就又恢復(fù)了正常。
學(xué)生：驚嘆不已！
師：簡單分析外聯(lián)代碼。
神奇的代碼！神奇的Css！為了我們的個(gè)性，讓我們開始進(jìn)一步的探秘旅程！
新課
師：Html，大家已熟悉，制作靜態(tài)網(wǎng)頁就是基于它。它與Css的關(guān)系，用一個(gè)比方來說明， Html是“菜”，Css是“大廚師”。Css根據(jù)其應(yīng)用方式的不同分為外聯(lián)、內(nèi)聯(lián)、嵌入，自定義。由于博客站點(diǎn)文件是動態(tài)網(wǎng)頁，分析起來諸多不便。本節(jié)課，我們以“百年恩來”主題站點(diǎn)為載體，來近距離地體驗(yàn)樣式表的神奇魔力。
[廣播]瀏覽“百年恩來”半成品站（應(yīng)用了外聯(lián)樣式），部分截圖如（圖一）。

（圖一）（圖二）（圖三）
用記事本打開其中名為q.css的文件，把代碼中bg1.jpg改為bg.jpg，刷新站點(diǎn)，得圖（二）。
師：q.css文件就是外聯(lián)樣式文件，網(wǎng)頁應(yīng)用了外聯(lián)樣式文件，我們就可以通過修改次文件而達(dá)到控制全站的目的。
體驗(yàn)外聯(lián)樣式的應(yīng)用
[準(zhǔn)備工作]分發(fā)素材——“百年恩來”站點(diǎn)（沒有應(yīng)用樣式，截圖如圖三），包括現(xiàn)成的Css文件，四個(gè)網(wǎng)頁文件，及image和其它（四個(gè)以文本形式存放的代碼與應(yīng)用提示）。
操作步驟提示如下：
瀏覽站點(diǎn)文件。
復(fù)制“外聯(lián)樣式代碼”文件中的鏈接代碼，分別粘貼到四個(gè)網(wǎng)頁文件的head區(qū)。
看效果。
[學(xué)生操作]
幫助文件教學(xué)平臺上有、相關(guān)代碼文件中也有，在投影上也同步顯示。
討論環(huán)節(jié)（發(fā)現(xiàn)問題）
師：大家來挑一挑本站的不足。[先討論，后提問，教師有針對地選擇記錄]
結(jié)果如下：
1、字太大，顏色不協(xié)調(diào)
2、鏈接不好看，圖去框。
3、周總理圖要更突出。
4、單調(diào)，效果少。
解決第一個(gè)問題
師：第一個(gè)問題我?guī)Т蠹曳治鲆幌拢蠹易约壕湍芙鉀Q。
[廣播]簡單分析Css文件中的代碼（對body字號大小、顏色控制的代碼有所側(cè)重）。[通過分析降低難度，讓學(xué)生體驗(yàn)“我能行”。]
師：最后一句有些特別，它是什么意思呢？這是一個(gè)迷，我將在合適時(shí)間為大家揭開謎底。
體驗(yàn)對Css樣式表代碼的簡單修改
[學(xué)生操作]
大屏幕轉(zhuǎn)播某個(gè)學(xué)生屏幕（不用電子教室，部分學(xué)生可能沒做好），請他展示改動的代碼及效果。教師補(bǔ)充與拓展。
解決第二個(gè)問題
師：修改了Css文件相關(guān)參數(shù)就可以帶來全站的改變，換膚的秘密已基本破解。但全篇一律，又失去了個(gè)性，如何讓某個(gè)頁面與眾不同？如“百年恩來”網(wǎng)站的主頁。
生：思考……
師：內(nèi)聯(lián)樣式表可以解決我們的難題。把樣式內(nèi)容放到某個(gè)應(yīng)用的頁面內(nèi)，就可以實(shí)現(xiàn)。
[廣播]復(fù)制 “內(nèi)聯(lián)樣式代碼”放入index的head區(qū)域，瀏覽。
生：沒有起作用！
師：什么地方出了問題？原來是html不能識別這段代碼是Css樣式，要在這段代碼前后加上<style></style>才行。效果究竟如何?這個(gè)蓋頭留給大家來揭！
體驗(yàn)內(nèi)聯(lián)樣式的應(yīng)用
[學(xué)生操作]學(xué)生復(fù)制相應(yīng)文件中的內(nèi)聯(lián)系代碼，粘到首頁head區(qū)，并嘗試<style>標(biāo)簽的輸入。
[大屏幕]轉(zhuǎn)播操作熟練的學(xué)生屏幕。
跳一跳，摘“優(yōu)先級”這個(gè)蘋果
師：大家有沒有發(fā)現(xiàn)外聯(lián)與內(nèi)聯(lián)代碼中有些問題？（提醒，有沒對一個(gè)標(biāo)簽，重復(fù)定義的）
學(xué)生：對于img，內(nèi)外全定義了。
師：應(yīng)用時(shí)起作用的是哪個(gè)？
生：從現(xiàn)象看是內(nèi)聯(lián)起來作用。
師：對。在應(yīng)用樣式時(shí)有個(gè)規(guī)則，就是“就近”。對于一個(gè)標(biāo)簽，外聯(lián)與內(nèi)聯(lián)哪個(gè)近？當(dāng)然是內(nèi)聯(lián)了。
解決第三個(gè)問題，學(xué)習(xí)嵌入樣式的應(yīng)用
師：對于同樣的標(biāo)簽，要想效果不同，我們這么辦？我們?nèi)绾巫尶偫砟欠鶊D與眾不同？這就涉及到標(biāo)簽的個(gè)性設(shè)置了，嵌入式樣式能解決這個(gè)問題。
[廣播]打開名為“嵌入式樣式代碼”的文本文件，分析一下代碼(作了那些控制)，然后把它復(fù)制到，首頁的周總理照片的img標(biāo)簽后，瀏覽效果。（這部分暫不安排學(xué)生操作，以便與自定義作比較）
解決第四個(gè)問題，自定義樣式的學(xué)習(xí)
師：大家剛才也看到了，設(shè)計(jì)一個(gè)合適的效果要考慮很多方面，如這用一次，是不是有浪費(fèi)之嫌疑？設(shè)想是不是可以像設(shè)計(jì)一頂漂亮的帽子一樣，不為特定的對象（老人、年青人、小孩子），而是誰想用都可以。
生：……
師：大家是否還記得，在分析外聯(lián)樣式表時(shí)，老師有一句沒有分析，說這是一個(gè)迷，呵，現(xiàn)在我就要為大家揭開謎底了，那就是一個(gè)自定義樣式。我們現(xiàn)在再來看這句話。
[廣播]分析自定義樣式格式與特性。
師：下面我們就要戴這頂帽子了。
[廣播]教師根據(jù)學(xué)生的提議，應(yīng)用自定義樣式。（在相應(yīng)的標(biāo)答后輸入class=xg1，明顯的火火焰濾鏡效果）
嵌入樣式及自定義樣式的應(yīng)用體驗(yàn)
[學(xué)生操作]（迫不及待）
問：如果這帽子只有某一頁才能用，怎么辦？
學(xué)生：把這代碼放到某一頁的內(nèi)聯(lián)樣式中。
師：對，不錯(cuò)。好，在給大家的素材中還有各種各樣漂亮的帽子，大家試著用它給你的網(wǎng)頁作進(jìn)一步的裝扮，到時(shí)我們要“曬一曬”各自的成果。
[學(xué)生操作]加樣式、改參數(shù)……
[作品評點(diǎn)]利用共享發(fā)布（網(wǎng)站的發(fā)布，必修已學(xué)過）。
[評價(jià)量規(guī)]樣式應(yīng)用的靈活度、頁面整體效果
[連連看環(huán)節(jié)]
不同插入方式的控制范圍、插入代碼、插入位置連線。[學(xué)生對知識的自我梳理]
[教師總結(jié)]
CSS樣式表的特點(diǎn)、優(yōu)先級、功能總結(jié)
列表比較
插入方式插入位置控制范圍應(yīng)用代碼優(yōu)點(diǎn)
外聯(lián)式樣式表 <head> 所有鏈接樣式表文件的網(wǎng)頁（全站） <link > 可以復(fù)用、便于修改、提高網(wǎng)頁顯示的速度
內(nèi)聯(lián)式樣式表 <head> 本頁面 <style> 實(shí)現(xiàn)單個(gè)頁面的個(gè)性
嵌入樣式表標(biāo)簽內(nèi) 本標(biāo)記 Style 實(shí)現(xiàn)單個(gè)標(biāo)簽的個(gè)性
自定義標(biāo)簽內(nèi) 本標(biāo)記 Class 一次設(shè)置，多次使用

附：下面以首頁為例圖示，展示每一次應(yīng)用的落差。

（一）沒有應(yīng)用樣式                         二）應(yīng)用外聯(lián)樣式（圖片有雙線邊框及背景變化）

（三）應(yīng)用內(nèi)聯(lián)樣式圖片無邊框及鏈接處理）     （四）嵌入樣式（總理圖）

（五）自定變義樣式（鏈接表格應(yīng)用了樣式）

首頁上一頁 1 2 3 下一頁尾頁 3/3/3

相關(guān)論文


上一篇：美麗家鄉(xiāng)——電子小報(bào)的分析與制作	下一篇：IP地址及其管理

Tags：動態(tài) 網(wǎng)頁制作

【收藏】【返回頂部】

日韩一区国产在线观看_亚洲999一在线观看www_久久欧美在线电影_97人人做人人人难人人做_欧美黄色成人网_91超碰在线免费观看_欧美在线xxx_国产有码在线一区二区视频_精品国产一区二区三_久久久久久久久久久av

動態(tài)網(wǎng)頁制作(三)