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

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

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

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

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

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

（五）自定變義樣式（鏈接表格應用了樣式）

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

相關論文


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

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

【收藏】【返回頂部】