資源簡介

中小學(xué)教育資源及組卷應(yīng)用平臺
第8.2課《網(wǎng)頁頁面美化》教學(xué)設(shè)計
課題 網(wǎng)頁頁面美化 單元 第八單元 學(xué)科 信息技術(shù) 年級 七年級上
核心素養(yǎng)目標(biāo) 1、信息意識：了解網(wǎng)站建設(shè)的重要性和基本流程，意識到合理規(guī)劃和設(shè)計網(wǎng)站對于信息傳播和交流的重要性。2、計算思維：掌握基本的HTML和CSS知識，能夠使用這些技能進(jìn)行簡單的網(wǎng)頁設(shè)計和布局，培養(yǎng)解決問題的能力。3、數(shù)字化學(xué)習(xí)與創(chuàng)新：學(xué)會利用互聯(lián)網(wǎng)資源和工具進(jìn)行網(wǎng)站的制作與發(fā)布，提升數(shù)字化學(xué)習(xí)能力，激發(fā)創(chuàng)新思維和創(chuàng)造力。4、信息社會責(zé)任：認(rèn)識遵守網(wǎng)絡(luò)道德和法律的重要性，了解在網(wǎng)站建設(shè)過程中應(yīng)注意版權(quán)和隱私保護(hù)，培養(yǎng)社會責(zé)任感。
教學(xué)重點 了解網(wǎng)站建設(shè)步驟認(rèn)識規(guī)劃的重要性
教學(xué)難點 掌握基礎(chǔ)設(shè)計技能理解申請域名空間
教學(xué)過程
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計意圖
導(dǎo)入新課 視頻導(dǎo)入：《域名和虛擬主機(jī)有什么區(qū)別》 觀看視頻，了解域名和虛擬主機(jī)的區(qū)別。 培養(yǎng)學(xué)生的觀察力和創(chuàng)造力。
講授新課 一、想一想網(wǎng)站建設(shè)1、網(wǎng)站建設(shè)經(jīng)過前面的學(xué)習(xí)，同學(xué)們已經(jīng)能夠初步使用記事本進(jìn)行網(wǎng)頁的設(shè)計，下面我們將來學(xué)習(xí)網(wǎng)站建設(shè)的基本流程。2、網(wǎng)站規(guī)劃在網(wǎng)站開始制作前，我們必須對網(wǎng)站的功能和界面風(fēng)格進(jìn)行定位。依據(jù)需求來確定網(wǎng)站要實現(xiàn)的功能，網(wǎng)站的界面包括網(wǎng)頁的配色和網(wǎng)頁的版式設(shè)計等。不同的網(wǎng)站應(yīng)該具備不同的特色，例如百度網(wǎng)主要提供強(qiáng)大的搜索功能，所以百度網(wǎng)站簡化了界面而突出搜索功能。央視網(wǎng)提供各種新聞視頻服務(wù)的功能，用很大的圖片模塊來突出新聞，吸引游客點擊瀏覽。那么，如果建設(shè)班級網(wǎng)站，應(yīng)該以方便班級成員的溝通交流以及學(xué)習(xí)發(fā)展為主要目標(biāo)，所以班級網(wǎng)站應(yīng)該具備“動態(tài)”“風(fēng)采”“學(xué)習(xí)”“資源”“聯(lián)系”“交流”等內(nèi)容模塊。并且在色調(diào)上，可以用一些比較青春活力的顏色，如綠色等。二、議一議1、班級網(wǎng)站需要實現(xiàn)哪些功能？（1）動態(tài)：發(fā)布最新的班級活動新聞和通知，使同學(xué)們及時了解重要事項。（2）風(fēng)采：展示班級成員的照片和介紹，并分享活動照片和視頻。（3）學(xué)習(xí)：提供下載學(xué)習(xí)資料和在線作業(yè)提交平臺，支持同學(xué)們的學(xué)習(xí)需要。（4）資源：集合并分享各類學(xué)習(xí)資源和應(yīng)用工具鏈接，方便同學(xué)們使用。（5）聯(lián)系：顯示班級和老師的聯(lián)系方式，為同學(xué)們提供便捷的聯(lián)系渠道。（6）交流：設(shè)立留言板和在線聊天功能，促進(jìn)同學(xué)間的討論和溝通。2、班級網(wǎng)站的主色調(diào)應(yīng)該選擇什么顏色，為什么？（1）綠色：班級網(wǎng)站的主色調(diào)可以選擇綠色，因為綠色象征著青春和活力，有助于營造積極向上的氛圍。（2）藍(lán)色：藍(lán)色能給人一種冷靜和理性的感覺，適合作為學(xué)習(xí)網(wǎng)站的主色調(diào)，促進(jìn)學(xué)生冷靜思考。（3）黃色：黃色通常代表陽光和快樂，作為主色調(diào)可以讓網(wǎng)站顯得更加明亮和愉快，吸引同學(xué)們的注意。（4）橙色：橙色充滿活力和溫暖，適合作為班級網(wǎng)站的主色調(diào)，能夠激發(fā)同學(xué)們的熱情和動力。三、想一想網(wǎng)站建設(shè)3、網(wǎng)頁制作網(wǎng)站制作一般有兩種方式，一種是自己建設(shè)，另一種是請專業(yè)網(wǎng)站公司制作。在網(wǎng)站制作前，還需要根據(jù)網(wǎng)站的規(guī)劃設(shè)計，提前準(zhǔn)備好相關(guān)素材，一般素材可以是圖片、視頻音頻、文字材料等。網(wǎng)站制作的專業(yè)軟件有很多，功能各有千秋，大家可以選擇任意一款軟件進(jìn)行練習(xí)。四、議一議1、自己建設(shè)網(wǎng)站和請專業(yè)網(wǎng)站公司制作各有什么優(yōu)缺點？（1）成本：自己建設(shè)網(wǎng)站成本較低；請專業(yè)公司制作費(fèi)用較高。（2）技術(shù)要求：自己建設(shè)需要技術(shù)知識；請專業(yè)公司無需具備這些技術(shù)。（3）時間：自己建設(shè)網(wǎng)站可能需要較長時間；專業(yè)公司通常能更快完成。（4）定制化：自己建設(shè)網(wǎng)站可以完全按自己想法和需求定制；請專業(yè)公司需要更詳細(xì)的溝通。（5）維護(hù)：自己建設(shè)網(wǎng)站需要自己進(jìn)行維護(hù)和更新；請專業(yè)公司通常提供維護(hù)和支持服務(wù)。2、網(wǎng)站需要哪些類型的素材，如何收集和整理？（1）圖片：需要清晰且吸引人的圖片。可以拍照、網(wǎng)上搜索或用同學(xué)的圖片，按主題整理。（2）文字內(nèi)容：需要簡潔準(zhǔn)確的文字說明。課本、筆記或網(wǎng)上資料，整理成段落和標(biāo)題。（3）視頻：需要有趣和清晰的視頻。用手機(jī)錄制班級活動或從網(wǎng)上下載。（4）音頻：需要背景音樂或聲音文件。可錄制歌曲或從網(wǎng)上下載。（5）圖標(biāo)和按鈕：需要多彩的圖標(biāo)和按鈕。免費(fèi)圖標(biāo)網(wǎng)站下載，按用途整理存檔。五、想一想網(wǎng)站建設(shè)4、申請空間和域名在網(wǎng)站做好之后，要使別人能在自己的計算機(jī)上通過網(wǎng)絡(luò)訪問你做的網(wǎng)站，需要將其上傳到服務(wù)器上，并且有一個專屬于你的網(wǎng)站域名。所以需要申請?zhí)摂M空間和域名。擴(kuò)展閱讀虛擬空間模式虛擬空間模式有三種：主機(jī)托管、主機(jī)租用和虛擬主機(jī)。大多數(shù)網(wǎng)站使用虛擬主機(jī)，不僅能節(jié)省購買主機(jī)和租用專線的費(fèi)用，而且還省去了處理在使用和維護(hù)服務(wù)器中產(chǎn)生的技術(shù)問題。網(wǎng)站建設(shè)5、申請?zhí)摂M空間要申請?zhí)摂M空間，需要登錄提供虛擬空間服務(wù)的網(wǎng)站進(jìn)行操作，有一些網(wǎng)站是收費(fèi)的也有一些網(wǎng)站是免費(fèi)的。在申請空間時，要記住自己的用戶名、密碼和FTP上傳地址。六、議一議1、什么是虛擬主機(jī)，為什么多數(shù)網(wǎng)站選擇它？（1）虛擬主機(jī)定義：虛擬主機(jī)是在一臺服務(wù)器上分出多個小部分，每個部分都可以放一個網(wǎng)站。（2）成本低：使用虛擬主機(jī)比自己買服務(wù)器便宜很多。（3）操作簡便：虛擬主機(jī)已經(jīng)配置好基礎(chǔ)設(shè)施，用戶只需上傳網(wǎng)站內(nèi)容即可，使用方便。（4）維護(hù)省心：虛擬主機(jī)服務(wù)商會負(fù)責(zé)維護(hù)服務(wù)器，無需擔(dān)心技術(shù)問題。（5）資源共享：虛擬主機(jī)共享服務(wù)器資源，但每個網(wǎng)站都有獨(dú)立的空間，不會影響彼此的運(yùn)行。2、為什么有時候網(wǎng)站訪問會很慢？（1）網(wǎng)絡(luò)擁堵：當(dāng)有很多人同時訪問網(wǎng)站時，服務(wù)器會變得很忙，處理請求的速度就會變慢，導(dǎo)致訪問速度變慢。（2）服務(wù)器問題：如果網(wǎng)站服務(wù)器出現(xiàn)故障或者正在維護(hù)，處理能力會下降，這時候訪問網(wǎng)站的速度就會變慢或者無法訪問。（3）網(wǎng)絡(luò)連接：如果你的網(wǎng)絡(luò)連接不穩(wěn)定，如Wi-Fi信號弱或數(shù)據(jù)流量不足，會導(dǎo)致數(shù)據(jù)傳輸緩慢，從而影響網(wǎng)站的訪問速度。（4）網(wǎng)站內(nèi)容過多：網(wǎng)站上的圖片、視頻和動畫等多媒體內(nèi)容太多，會增加網(wǎng)頁加載時間，尤其是在網(wǎng)絡(luò)速度不快的情況下更加明顯。七、想一想網(wǎng)站建設(shè)6、申請域名申請好虛擬空間后，申請域名也就簡單了，一般提供虛擬空間服務(wù)的網(wǎng)站，同時也提供申請域名服務(wù)，根據(jù)提示輸入各項信息提交顯示，申請成功后，網(wǎng)頁上會顯示你的域名和密碼。域名分為頂級域名(一級域名)、二級域名、三級域名等。頂級域名由一個合法字符串加后綴名組成，如；二級域名是在頂級域名前再加一個主機(jī)名，如moe.；三級域名是在二級域名前再加字符串，如zwfw.moe.。除了頂級域名外，其他域名一般可以免費(fèi)申請到。空間和域名申請成功后，要將兩者進(jìn)行綁定，這樣在網(wǎng)站上傳之后，別人才能通過域名訪問你的網(wǎng)站。擴(kuò)展閱讀域名的相關(guān)知識點補(bǔ)充以 com、net、gov、edu為后綴名的域名表示國際域名的不同機(jī)構(gòu)，com表示商業(yè)機(jī)構(gòu)、net表示網(wǎng)絡(luò)服務(wù)機(jī)構(gòu)、gov表示政府機(jī)構(gòu)、edu表示教育機(jī)構(gòu)。域名可以分為頂級域名、二級域名、三級域名、四級域名，每個等級的域名表現(xiàn)形式和適用范圍都各有不同。八、議一議1、申請域名過程中的常見問題有哪些？（1）名被占用：你想注冊的域名已經(jīng)被別人使用了，需要重新選一個新的域名。（2）輸入信息錯誤：申請時填寫的名字、郵箱或其他信息有誤，導(dǎo)致申請失敗。（3）忘記密碼：你設(shè)置的域名賬號密碼忘記了，需要通過郵箱或其它方式找回。（4）后綴選擇不當(dāng)：選擇了不合適的域名后綴（如.等），可能不符合網(wǎng)站類型。2、為什么申請域名后需要與虛擬空間綁定？（1）讓網(wǎng)站上線：綁定域名和虛擬空間后，才能讓別人通過域名訪問你的網(wǎng)站，否則網(wǎng)站無法被看見。（2）統(tǒng)一訪問地址：綁定域名后，網(wǎng)站有一個固定的網(wǎng)址，方便別人記住和訪問，不需要記憶復(fù)雜的IP地址。（3）提高信任度：一個獨(dú)立的域名讓網(wǎng)站看起來更專業(yè)和可信，特別是對新的訪問者。（4）便于管理：綁定后，域名和網(wǎng)站內(nèi)容可以更方便地管理，同時也可以使用域名提供的郵箱服務(wù)等額外功能。九、想一想網(wǎng)站建設(shè)7、網(wǎng)站的測試與發(fā)布在網(wǎng)站頁面制作好、申請好空間和域名后，建站的最后一步就是發(fā)布站點。但是，為確保網(wǎng)頁在瀏覽器上不出問題，在網(wǎng)站上傳前，還需要對網(wǎng)站進(jìn)行本地測試，主要是對內(nèi)容、形式以及網(wǎng)頁鏈接的檢查與修改等。在網(wǎng)頁數(shù)量較多，使用較多的超鏈接時，可采用網(wǎng)站制作軟件檢查超鏈接功能。完成站點測試后，就可以將其上傳到虛擬空間了，上傳網(wǎng)站一般使用FTP協(xié)議，用文件遠(yuǎn)程方式上傳。上傳也可以用專門的FTP軟件，使用專業(yè)網(wǎng)站制作軟件直接上傳。十、議一議1、為什么需要在本地測試網(wǎng)站？（1）發(fā)現(xiàn)錯誤：在本地測試可以提前發(fā)現(xiàn)網(wǎng)站中的錯誤和問題，比如圖片無法顯示或鏈接失效。（2）節(jié)省時間：本地測試可以快速修改問題，而不需要每次都重新上傳網(wǎng)頁到服務(wù)器，大大節(jié)省時間。（3）確保兼容性：可以在不同瀏覽器上測試，確保網(wǎng)站在不同瀏覽器上都能正常顯示和使用。（4）驗證功能：測試所有按鈕、表單和互動功能是否正常工作，確保用戶體驗良好。2、本地測試時應(yīng)該檢查哪些內(nèi)容？（1）頁面顯示：確認(rèn)所有網(wǎng)頁正常打開，文字、圖片、視頻正常顯示。（2）鏈接有效性：檢查所有鏈接是否能跳轉(zhuǎn)到正確的頁面。（3）瀏覽器兼容性：在不同瀏覽器上測試，確保正常顯示。（4）功能測試：測試所有按鈕、表單等功能是否正常工作。（5）排版和布局：確認(rèn)網(wǎng)頁排版美觀一致，沒有錯位問題。（6）加載速度：測試網(wǎng)頁加載速度是否合理。十一、想一想網(wǎng)站建設(shè)8、網(wǎng)站推廣與維護(hù)網(wǎng)站發(fā)布后，為了避免網(wǎng)站被淹沒在網(wǎng)絡(luò)的海洋世界，我們還需要對網(wǎng)站進(jìn)行推廣，推廣方式可以是交換廣告條、網(wǎng)絡(luò)廣告、注冊搜索引擎等。為了維持網(wǎng)站不被他人遺忘，我們還需要保持對網(wǎng)站的內(nèi)容的更新，經(jīng)常更新網(wǎng)站內(nèi)容和添加新內(nèi)容。十二、議一議1、哪些推廣方式最適合初學(xué)者使用？（1）社交媒體分享：在社交媒體平臺（如微信、微博）上分享網(wǎng)站鏈接，邀請朋友和同學(xué)訪問。（2）口口相傳：向家人、朋友和同學(xué)介紹你的網(wǎng)站，請他們幫忙傳播。（3）郵件邀請：給熟悉的人發(fā)送電子郵件，介紹你的網(wǎng)站并邀請訪問。（4）論壇和社區(qū)：在你感興趣的論壇和社區(qū)發(fā)帖，分享你的網(wǎng)站，并參與討論，吸引更多人訪問。（4）搜索引擎注冊：將你的網(wǎng)站提交給搜索引擎（如百度、搜狗），讓更多人通過搜索找到你的網(wǎng)站。2、為什么要將網(wǎng)站注冊到搜索引擎上？（1）增加曝光：注冊到搜索引擎后，人們在網(wǎng)上搜索時更容易找到你的網(wǎng)站，增加網(wǎng)站的曝光度。（2）吸引訪問者：通過搜索引擎，更多的訪問者可以發(fā)現(xiàn)你的網(wǎng)站，從而提高訪問量和人氣。（3）便捷搜索：注冊后，別人只需在搜索引擎輸入關(guān)鍵詞，就能輕松找到你的網(wǎng)站，而不用記住復(fù)雜的地址。（4）提高可信度：出現(xiàn)在搜索引擎結(jié)果中的網(wǎng)站通常更有可信度，能讓更多人信任你的網(wǎng)站內(nèi)容。十三、做一做1、對CSS的基本操作進(jìn)行體驗，在瀏覽器中查看效果，并與同學(xué)們交流哪種網(wǎng)頁好看。

紅色字體

下劃線字體

2、使用繪制工具，與同學(xué)們一起對班級主頁網(wǎng)站進(jìn)行設(shè)計。3、使用網(wǎng)站制作相關(guān)軟件，與同學(xué)們合作制作出班級的主頁并發(fā)布。十四、知識拓展在我們學(xué)習(xí)了基本的網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)之后，讓我們來快速了解一下現(xiàn)代網(wǎng)頁設(shè)計中非常重要的技術(shù)：DIV+CSS。1、什么是DIV：DIV是HTML中的一種容器標(biāo)簽，用來把網(wǎng)頁內(nèi)容分成不同的塊，便于布局管理。2、什么是CSS：CSS（層疊樣式表）是用來控制網(wǎng)頁樣式和布局的工具，可以定義字體、顏色、邊距等。3、分離內(nèi)容與樣式：通過DIV和CSS，內(nèi)容和樣式可以分開管理，使得代碼更加清晰和整潔。4、靈活布局：使用DIV+CSS，可以輕松實現(xiàn)復(fù)雜的網(wǎng)頁布局，而不用依賴傳統(tǒng)的表格布局。5、提高頁面加載速度：由于CSS樣式表可以被外部引用，網(wǎng)頁加載速度會更快，因為同一個樣式表可以被多個頁面共享。6、響應(yīng)式設(shè)計：結(jié)合使用DIV和CSS，還可以創(chuàng)建適應(yīng)不同設(shè)備屏幕大小的響應(yīng)式網(wǎng)頁，提升用戶體驗。總的來說，DIV+CSS讓我們能夠更方便地設(shè)計和管理網(wǎng)頁的布局和樣式，使網(wǎng)站既好看又實用。十五、議一議1、什么是響應(yīng)式設(shè)計，如何用DIV和CSS實現(xiàn)？（1）響應(yīng)式設(shè)計定義：響應(yīng)式設(shè)計是一種網(wǎng)頁設(shè)計方法，使網(wǎng)頁可以自動適應(yīng)不同設(shè)備的屏幕大小，如手機(jī)、平板、電腦等。（2）靈活的版面布局：通過使用DIV和CSS，可以設(shè)置不同設(shè)備上顯示的內(nèi)容和布局，比如在小屏設(shè)備上隱藏某些內(nèi)容或調(diào)整排列順序。（3）使用百分比寬度：在CSS中使用百分比而不是固定像素作為寬度，可以讓網(wǎng)頁元素根據(jù)屏幕大小自動調(diào)整。（4）調(diào)整圖像大小：用CSS設(shè)置圖片寬度為100%，讓圖片在不同設(shè)備上都能按比例縮放，不會超出屏幕邊界。2、在實際做網(wǎng)頁的過程中，DIV和CSS的應(yīng)用難點在哪里？（1）復(fù)雜布局管理：創(chuàng)建復(fù)雜頁面布局時，使用多個DIV和CSS樣式可能會混淆，管理和維護(hù)較困難。（2）樣式?jīng)_突和定位問題：CSS樣式可能會沖突，導(dǎo)致顯示錯誤；使用定位時也可能出現(xiàn)位置問題，需要調(diào)試。（3）瀏覽器兼容性：不同瀏覽器對CSS支持不一致，可能顯示效果不同。（4）響應(yīng)式設(shè)計和嵌套：設(shè)計響應(yīng)式網(wǎng)頁需要編寫復(fù)雜CSS；DIV標(biāo)簽嵌套過多會使代碼難閱讀和維護(hù)。 學(xué)生進(jìn)行班級網(wǎng)站規(guī)劃，定位網(wǎng)站功能和界面風(fēng)格。確定班級網(wǎng)站要實現(xiàn)的功能模塊，如“動態(tài)”“風(fēng)采”“學(xué)習(xí)”“資源”“聯(lián)系”“交流”等，并選擇青春活力的顏色（如綠色）作為網(wǎng)站的主色調(diào)。完成后，各組分享他們的規(guī)劃方案。學(xué)生分組討論并回答“班級網(wǎng)站需要實現(xiàn)哪些功能？為什么？”，從動態(tài)、風(fēng)采、學(xué)習(xí)、資源、聯(lián)系、交流等方面進(jìn)行分析。每組選出代表在全班分享討論結(jié)果。學(xué)生以小組為單位，為班級網(wǎng)站選擇主色調(diào)（如綠色、藍(lán)色、黃色或橙色），并編寫CSS代碼應(yīng)用。完成后，在瀏覽器中查看效果。學(xué)生根據(jù)網(wǎng)站規(guī)劃設(shè)計，提前準(zhǔn)備好相關(guān)素材，如圖片、視頻、音頻和文字材料。學(xué)生總結(jié)討論結(jié)果，分享對兩種網(wǎng)站制作方式的理解和見解。學(xué)生從課本、筆記或網(wǎng)上資料中獲取簡潔準(zhǔn)確的文字說明，并整理成段落和標(biāo)題。學(xué)生根據(jù)教師提供的步驟登錄虛擬空間服務(wù)網(wǎng)站進(jìn)行操作，申請?zhí)摂M空間和域名。記住并記錄下用戶名、密碼和FTP上傳地址。學(xué)生可以選擇免費(fèi)的虛擬空間完成練習(xí)。學(xué)生討論“什么是虛擬主機(jī)？為什么多數(shù)網(wǎng)站選擇它？”學(xué)生討論“為什么當(dāng)有很多人同時訪問網(wǎng)站時，網(wǎng)站訪問速度會變慢？”學(xué)生閱讀并討論以com、net、gov和edu為后綴的域名分別表示什么機(jī)構(gòu)。學(xué)生討論“如果你想注冊的域名已經(jīng)被別人使用了，你該怎么辦？”并提議替代方案。學(xué)生模擬管理控制面板，進(jìn)行域名和網(wǎng)站內(nèi)容的基本設(shè)置。學(xué)生使用網(wǎng)站制作軟件進(jìn)行超鏈接檢查，確保所有鏈接正常。學(xué)生討論“為什么本地測試可以節(jié)省時間，不需要每次都上傳網(wǎng)頁到服務(wù)器？”學(xué)生檢查網(wǎng)頁的排版和布局，確保其美觀一致，沒有錯位。學(xué)生模擬將網(wǎng)站注冊到百度、360搜索等搜索引擎。學(xué)生討論并實踐“如何在微信、微博等社交媒體平臺上分享網(wǎng)站鏈接，邀請朋友和同學(xué)訪問？”學(xué)生討論“為什么出現(xiàn)在搜索引擎結(jié)果中的網(wǎng)站通常更有可信度？”學(xué)生修改字體大小、顏色等CSS屬性，然后在瀏覽器中查看效果。學(xué)生使用繪制工具設(shè)計班級主頁頁面布局，與同學(xué)們分享討論。學(xué)生嘗試將樣式從HTML標(biāo)簽中分離出來，使用外部CSS文件管理樣式。學(xué)生討論“什么是響應(yīng)式設(shè)計？為什么在現(xiàn)代網(wǎng)頁設(shè)計中響應(yīng)式設(shè)計非常重要？”學(xué)生逐步創(chuàng)建一個復(fù)雜布局，每個步驟只添加幾個DIV和CSS樣式。 通過實際操作，幫助學(xué)生掌握網(wǎng)站規(guī)劃的基本步驟和方法，培養(yǎng)規(guī)劃和設(shè)計能力。通過討論，幫助學(xué)生理解班級網(wǎng)站需要實現(xiàn)的具體功能及其重要性，培養(yǎng)分析和表達(dá)能力。幫助學(xué)生掌握選擇和應(yīng)用主色調(diào)的方法，培養(yǎng)實際設(shè)計和操作能力。通過實際操作，幫助學(xué)生了解網(wǎng)站制作前的準(zhǔn)備工作，培養(yǎng)規(guī)劃和組織能力。通過總結(jié)，學(xué)生能夠鞏固所學(xué)知識，提升表達(dá)和自我總結(jié)能力，同時互相學(xué)習(xí)和交流心得。通過實際操作，幫助學(xué)生掌握文字內(nèi)容的收集和整理方法，培養(yǎng)書寫和組織能力。通過實際操作，幫助學(xué)生掌握申請?zhí)摂M空間和域名的具體步驟，培養(yǎng)實際操作和規(guī)劃能力。幫助學(xué)生理解虛擬主機(jī)的定義及其優(yōu)勢，培養(yǎng)分析和表達(dá)能力。幫助學(xué)生理解網(wǎng)絡(luò)擁堵如何影響網(wǎng)站訪問速度，培養(yǎng)分析能力。幫助學(xué)生了解不同域名后綴的含義及其適用范圍，培養(yǎng)閱讀和理解能力。幫助學(xué)生理解域名被占用時的應(yīng)對方法，培養(yǎng)他們的解決問題能力。幫助學(xué)生掌握域名和虛擬空間成功綁定后的管理和設(shè)置方法，培養(yǎng)實際操作和管理能力。通過實際操作，使學(xué)生掌握如何在本地測試網(wǎng)站的超鏈接，確保所有鏈接正常工作，培養(yǎng)實際操作能力。通過討論讓學(xué)生理解本地測試如何節(jié)省時間，避免頻繁上傳網(wǎng)站到服務(wù)器，培養(yǎng)高效工作意識。幫助學(xué)生確保網(wǎng)頁的排版美觀一致，沒有錯位問題，培養(yǎng)美學(xué)意識和細(xì)致的檢查能力。通過實際操作，幫助學(xué)生了解如何將網(wǎng)站注冊到搜索引擎中，提升網(wǎng)站的可見性。幫助學(xué)生理解利用社交媒體平臺推廣網(wǎng)站的低成本和高效率，培養(yǎng)社交媒體運(yùn)營能力。幫助學(xué)生理解在搜索引擎中出現(xiàn)的網(wǎng)站更有可信度，培養(yǎng)可信度的重要性。幫助學(xué)生實際體驗修改CSS屬性對網(wǎng)頁外觀的影響。培養(yǎng)學(xué)生的頁面設(shè)計能力和創(chuàng)意表達(dá)能力。幫助學(xué)生理解通過DIV和CSS實現(xiàn)內(nèi)容與樣式分離的重要性，使代碼更加清晰。幫助學(xué)生理解響應(yīng)式設(shè)計的概念及其重要性。幫助學(xué)生理解分步創(chuàng)建復(fù)雜頁面布局的重要性，避免混淆。
課堂小結(jié) 網(wǎng)頁頁面美化1、了解網(wǎng)站建設(shè)步驟2、認(rèn)識規(guī)劃的重要性3、掌握基礎(chǔ)設(shè)計技能4、理解申請域名空間 總結(jié)回顧 對本節(jié)課內(nèi)容進(jìn)行總結(jié)概括。
課后作業(yè) 班級網(wǎng)站需要哪些主要功能？請列舉至少三個。 布置作業(yè) 拓展學(xué)生的學(xué)習(xí)能力
板書 觀看板書 強(qiáng)調(diào)教學(xué)重點內(nèi)容
21世紀(jì)教育網(wǎng) www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）
HYPERLINK "http://www.21cnjy.com/" 21世紀(jì)教育網(wǎng)(www.21cnjy.com)(共59張PPT)
第8課
網(wǎng)頁頁面美化
第2課時
（贛科技版）七年級
上
01
學(xué)習(xí)目標(biāo)
內(nèi)容總覽
02
新知導(dǎo)入
03
探究新知
04
課堂練習(xí)
05
課堂總結(jié)
課后作業(yè)
06
教學(xué)目標(biāo)
了解網(wǎng)站建設(shè)的重要性和基本流程，意識到合理規(guī)劃和設(shè)計網(wǎng)站對于信息傳播和交流的重要性。
01
02
03
04
計算思維
信息社會責(zé)任
數(shù)字化學(xué)習(xí)與創(chuàng)新
信息意識
掌握基本的HTML和CSS知識，能夠使用這些技能進(jìn)行簡單的網(wǎng)頁設(shè)計和布局，培養(yǎng)解決問題的能力。
學(xué)會利用互聯(lián)網(wǎng)資源和工具進(jìn)行網(wǎng)站的制作與發(fā)布，提升數(shù)字化學(xué)習(xí)能力，激發(fā)創(chuàng)新思維和創(chuàng)造力。
認(rèn)識遵守網(wǎng)絡(luò)道德和法律的重要性，了解在網(wǎng)站建設(shè)過程中應(yīng)注意版權(quán)和隱私保護(hù)，培養(yǎng)社會責(zé)任感。
新知導(dǎo)入
新知講解
想一想
網(wǎng)站建設(shè)
1、網(wǎng)站建設(shè)
經(jīng)過前面的學(xué)習(xí)，同學(xué)們已經(jīng)能夠初步使用記事本進(jìn)行網(wǎng)頁的設(shè)計，下面我們將來學(xué)習(xí)網(wǎng)站建設(shè)的基本流程。
新知講解
想一想
網(wǎng)站建設(shè)
2、網(wǎng)站規(guī)劃
在網(wǎng)站開始制作前，我們必須對網(wǎng)站的功能和界面風(fēng)格進(jìn)行定位。
新知講解
想一想
網(wǎng)站建設(shè)
2、網(wǎng)站規(guī)劃
依據(jù)需求來確定網(wǎng)站要實現(xiàn)的功能，網(wǎng)站的界面包括網(wǎng)頁的配色和網(wǎng)頁的版式設(shè)計等。
新知講解
想一想
網(wǎng)站建設(shè)
2、網(wǎng)站規(guī)劃
不同的網(wǎng)站應(yīng)該具備不同的特色，例如百度網(wǎng)主要提供強(qiáng)大的搜索功能，所以百度網(wǎng)站簡化了界面而突出搜索功能。
新知講解
想一想
網(wǎng)站建設(shè)
2、網(wǎng)站規(guī)劃
央視網(wǎng)提供各種新聞視頻服務(wù)的功能，用很大的圖片模塊來突出新聞，吸引游客點擊瀏覽。
新知講解
想一想
網(wǎng)站建設(shè)
2、網(wǎng)站規(guī)劃
那么，如果建設(shè)班級網(wǎng)站，應(yīng)該以方便班級成員的溝通交流以及學(xué)習(xí)發(fā)展為主要目標(biāo)，所以班級網(wǎng)站應(yīng)該具備“動態(tài)”“風(fēng)采”“學(xué)習(xí)”“資源”“聯(lián)系”“交流”等內(nèi)容模塊。并且在色調(diào)上，可以用一些比較青春活力的顏色，如綠色等。
新知講解
議一議
1、班級網(wǎng)站需要實現(xiàn)哪些功能？
（1）動態(tài)：發(fā)布最新的班級活動新聞和通知，使同學(xué)們及時了解重要事項。
（2）風(fēng)采：展示班級成員的照片和介紹，并分享活動照片和視頻。
（3）學(xué)習(xí)：提供下載學(xué)習(xí)資料和在線作業(yè)提交平臺，支持同學(xué)們的學(xué)習(xí)需要。
（4）資源：集合并分享各類學(xué)習(xí)資源和應(yīng)用工具鏈接，方便同學(xué)們使用。
（5）聯(lián)系：顯示班級和老師的聯(lián)系方式，為同學(xué)們提供便捷的聯(lián)系渠道。
（6）交流：設(shè)立留言板和在線聊天功能，促進(jìn)同學(xué)間的討論和溝通。
新知講解
議一議
2、班級網(wǎng)站的主色調(diào)應(yīng)該選擇什么顏色，為什么？
（1）綠色：班級網(wǎng)站的主色調(diào)可以選擇綠色，因為綠色象征著青春和活力，有助于營造積極向上的氛圍。
（2）藍(lán)色：藍(lán)色能給人一種冷靜和理性的感覺，適合作為學(xué)習(xí)網(wǎng)站的主色調(diào)，促進(jìn)學(xué)生冷靜思考。
（3）黃色：黃色通常代表陽光和快樂，作為主色調(diào)可以讓網(wǎng)站顯得更加明亮和愉快，吸引同學(xué)們的注意。
（4）橙色：橙色充滿活力和溫暖，適合作為班級網(wǎng)站的主色調(diào)，能夠激發(fā)同學(xué)們的熱情和動力。
新知講解
想一想
網(wǎng)站建設(shè)
3、網(wǎng)頁制作
網(wǎng)站制作一般有兩種方式，一種是自己建設(shè)，另一種是請專業(yè)網(wǎng)站公司制作。
新知講解
想一想
網(wǎng)站建設(shè)
3、網(wǎng)頁制作
在網(wǎng)站制作前，還需要根據(jù)網(wǎng)站的規(guī)劃設(shè)計，提前準(zhǔn)備好相關(guān)素材，一般素材可以是圖片、視頻音頻、文字材料等。
新知講解
想一想
網(wǎng)站建設(shè)
3、網(wǎng)頁制作
網(wǎng)站制作的專業(yè)軟件有很多，功能各有千秋，大家可以選擇任意一款軟件進(jìn)行練習(xí)。
新知講解
議一議
1、自己建設(shè)網(wǎng)站和請專業(yè)網(wǎng)站公司制作各有什么優(yōu)缺點？
（1）成本：自己建設(shè)網(wǎng)站成本較低；請專業(yè)公司制作費(fèi)用較高。
（2）技術(shù)要求：自己建設(shè)需要技術(shù)知識；請專業(yè)公司無需具備這些技術(shù)。
（3）時間：自己建設(shè)網(wǎng)站可能需要較長時間；專業(yè)公司通常能更快完成。
（4）定制化：自己建設(shè)網(wǎng)站可以完全按自己想法和需求定制；請專業(yè)公司需要更詳細(xì)的溝通。
（5）維護(hù)：自己建設(shè)網(wǎng)站需要自己進(jìn)行維護(hù)和更新；請專業(yè)公司通常提供維護(hù)和支持服務(wù)。
新知講解
議一議
2、網(wǎng)站需要哪些類型的素材，如何收集和整理？
（1）圖片：需要清晰且吸引人的圖片。可以拍照、網(wǎng)上搜索或用同學(xué)的圖片，按主題整理。
（2）文字內(nèi)容：需要簡潔準(zhǔn)確的文字說明。課本、筆記或網(wǎng)上資料，整理成段落和標(biāo)題。
（3）視頻：需要有趣和清晰的視頻。用手機(jī)錄制班級活動或從網(wǎng)上下載。
（4）音頻：需要背景音樂或聲音文件。可錄制歌曲或從網(wǎng)上下載。
（5）圖標(biāo)和按鈕：需要多彩的圖標(biāo)和按鈕。免費(fèi)圖標(biāo)網(wǎng)站下載，按用途整理存檔。
新知講解
想一想
網(wǎng)站建設(shè)
4、申請空間和域名
在網(wǎng)站做好之后，要使別人能在自己的計算機(jī)上通過網(wǎng)絡(luò)訪問你做的網(wǎng)站，需要將其上傳到服務(wù)器上，并且有一個專屬于你的網(wǎng)站域名。所以需要申請?zhí)摂M空間和域名。
新知講解
想一想
擴(kuò)展閱讀
虛擬空間模式
虛擬空間模式有三種：主機(jī)托管、主機(jī)租用和虛擬主機(jī)。大多數(shù)網(wǎng)站使用虛擬主機(jī)，不僅能節(jié)省購買主機(jī)和租用專線的費(fèi)用，而且還省去了處理在使用和維護(hù)服務(wù)器中產(chǎn)生的技術(shù)問題。
新知講解
想一想
網(wǎng)站建設(shè)
5、申請?zhí)摂M空間
要申請?zhí)摂M空間，需要登錄提供虛擬空間服務(wù)的網(wǎng)站進(jìn)行操作，有一些網(wǎng)站是收費(fèi)的也有一些網(wǎng)站是免費(fèi)的。在申請空間時，要記住自己的用戶名、密碼和FTP上傳地址。
新知講解
議一議
1、什么是虛擬主機(jī)，為什么多數(shù)網(wǎng)站選擇它？
（1）虛擬主機(jī)定義：虛擬主機(jī)是在一臺服務(wù)器上分出多個小部分，每個部分都可以放一個網(wǎng)站。
（2）成本低：使用虛擬主機(jī)比自己買服務(wù)器便宜很多。
（3）操作簡便：虛擬主機(jī)已經(jīng)配置好基礎(chǔ)設(shè)施，用戶只需上傳網(wǎng)站內(nèi)容即可，使用方便。
（4）維護(hù)省心：虛擬主機(jī)服務(wù)商會負(fù)責(zé)維護(hù)服務(wù)器，無需擔(dān)心技術(shù)問題。
（5）資源共享：虛擬主機(jī)共享服務(wù)器資源，但每個網(wǎng)站都有獨(dú)立的空間，不會影響彼此的運(yùn)行。
新知講解
議一議
2、為什么有時候網(wǎng)站訪問會很慢？
（1）網(wǎng)絡(luò)擁堵：當(dāng)有很多人同時訪問網(wǎng)站時，服務(wù)器會變得很忙，處理請求的速度就會變慢，導(dǎo)致訪問速度變慢。
（2）服務(wù)器問題：如果網(wǎng)站服務(wù)器出現(xiàn)故障或者正在維護(hù)，處理能力會下降，這時候訪問網(wǎng)站的速度就會變慢或者無法訪問。
（3）網(wǎng)絡(luò)連接：如果你的網(wǎng)絡(luò)連接不穩(wěn)定，如Wi-Fi信號弱或數(shù)據(jù)流量不足，會導(dǎo)致數(shù)據(jù)傳輸緩慢，從而影響網(wǎng)站的訪問速度。
（4）網(wǎng)站內(nèi)容過多：網(wǎng)站上的圖片、視頻和動畫等多媒體內(nèi)容太多，會增加網(wǎng)頁加載時間，尤其是在網(wǎng)絡(luò)速度不快的情況下更加明顯。
新知講解
想一想
網(wǎng)站建設(shè)
6、申請域名
申請好虛擬空間后，申請域名也就簡單了，一般提供虛擬空間服務(wù)的網(wǎng)站，同時也提供申請域名服務(wù)，根據(jù)提示輸入各項信息提交顯示，申請成功后，網(wǎng)頁上會顯示你的域名和密碼。
新知講解
想一想
網(wǎng)站建設(shè)
6、申請域名
域名分為頂級域名(一級域名)、二級域名、三級域名等。頂級域名由一個合法字符串加后綴名組成，如；二級域名是在頂級域名前再加一個主機(jī)名，如moe.；三級域名是在二級域名前再加字符串，如zwfw.moe.。除了頂級域名外，其他域名一般可以免費(fèi)申請到。
新知講解
想一想
網(wǎng)站建設(shè)
6、申請域名
空間和域名申請成功后，要將兩者進(jìn)行綁定，這樣在網(wǎng)站上傳之后，別人才能通過域名訪問你的網(wǎng)站。
新知講解
想一想
擴(kuò)展閱讀
域名的相關(guān)知識點補(bǔ)充
以com、net、gov、edu為后綴名的域名表示國際域名的不同機(jī)構(gòu)，com表示商業(yè)機(jī)構(gòu)、net表示網(wǎng)絡(luò)服務(wù)機(jī)構(gòu)、gov表示政府機(jī)構(gòu)、edu表示教育機(jī)構(gòu)。
頂級域名 說明
gov 政府部門
com 商業(yè)部門
edu 教育部門
org 民間團(tuán)體組織
net 網(wǎng)絡(luò)服務(wù)機(jī)構(gòu)
新知講解
想一想
擴(kuò)展閱讀
域名的相關(guān)知識點補(bǔ)充
域名可以分為頂級域名、二級域名、三級域名、四級域名，每個等級的域名表現(xiàn)形式和適用范圍都各有不同。
新知講解
議一議
1、申請域名過程中的常見問題有哪些？
（1）名被占用：你想注冊的域名已經(jīng)被別人使用了，需要重新選一個新的域名。
（2）輸入信息錯誤：申請時填寫的名字、郵箱或其他信息有誤，導(dǎo)致申請失敗。
（3）忘記密碼：你設(shè)置的域名賬號密碼忘記了，需要通過郵箱或其它方式找回。
（4）后綴選擇不當(dāng)：選擇了不合適的域名后綴（如.等），可能不符合網(wǎng)站類型。
新知講解
議一議
2、為什么申請域名后需要與虛擬空間綁定？
（1）讓網(wǎng)站上線：綁定域名和虛擬空間后，才能讓別人通過域名訪問你的網(wǎng)站，否則網(wǎng)站無法被看見。
（2）統(tǒng)一訪問地址：綁定域名后，網(wǎng)站有一個固定的網(wǎng)址，方便別人記住和訪問，不需要記憶復(fù)雜的IP地址。
（3）提高信任度：一個獨(dú)立的域名讓網(wǎng)站看起來更專業(yè)和可信，特別是對新的訪問者。
（4）便于管理：綁定后，域名和網(wǎng)站內(nèi)容可以更方便地管理，同時也可以使用域名提供的郵箱服務(wù)等額外功能。
新知講解
想一想
網(wǎng)站建設(shè)
7、網(wǎng)站的測試與發(fā)布
在網(wǎng)站頁面制作好、申請好空間和域名后，建站的最后一步就是發(fā)布站點。
新知講解
想一想
網(wǎng)站建設(shè)
7、網(wǎng)站的測試與發(fā)布
但是，為確保網(wǎng)頁在瀏覽器上不出問題，在網(wǎng)站上傳前，還需要對網(wǎng)站進(jìn)行本地測試，主要是對內(nèi)容、形式以及網(wǎng)頁鏈接的檢查與修改等。
新知講解
想一想
網(wǎng)站建設(shè)
7、網(wǎng)站的測試與發(fā)布
在網(wǎng)頁數(shù)量較多，使用較多的超鏈接時，可采用網(wǎng)站制作軟件檢查超鏈接功能。
新知講解
想一想
網(wǎng)站建設(shè)
7、網(wǎng)站的測試與發(fā)布
完成站點測試后，就可以將其上傳到虛擬空間了，上傳網(wǎng)站一般使用FTP協(xié)議，用文件遠(yuǎn)程方式上傳。上傳也可以用專門的FTP軟件，使用專業(yè)網(wǎng)站制作軟件直接上傳。
新知講解
議一議
1、為什么需要在本地測試網(wǎng)站？
（1）發(fā)現(xiàn)錯誤：在本地測試可以提前發(fā)現(xiàn)網(wǎng)站中的錯誤和問題，比如圖片無法顯示或鏈接失效。
（2）節(jié)省時間：本地測試可以快速修改問題，而不需要每次都重新上傳網(wǎng)頁到服務(wù)器，大大節(jié)省時間。
（3）確保兼容性：可以在不同瀏覽器上測試，確保網(wǎng)站在不同瀏覽器上都能正常顯示和使用。
（4）驗證功能：測試所有按鈕、表單和互動功能是否正常工作，確保用戶體驗良好。
新知講解
議一議
2、本地測試時應(yīng)該檢查哪些內(nèi)容？
（1）頁面顯示：確認(rèn)所有網(wǎng)頁正常打開，文字、圖片、視頻正常顯示。
（2）鏈接有效性：檢查所有鏈接是否能跳轉(zhuǎn)到正確的頁面。
（3）瀏覽器兼容性：在不同瀏覽器上測試，確保正常顯示。
（4）功能測試：測試所有按鈕、表單等功能是否正常工作。
（5）排版和布局：確認(rèn)網(wǎng)頁排版美觀一致，沒有錯位問題。
（6）加載速度：測試網(wǎng)頁加載速度是否合理。
新知講解
想一想
網(wǎng)站建設(shè)
8、網(wǎng)站推廣與維護(hù)
網(wǎng)站發(fā)布后，為了避免網(wǎng)站被淹沒在網(wǎng)絡(luò)的海洋世界，我們還需要對網(wǎng)站進(jìn)行推廣，推廣方式可以是交換廣告條、網(wǎng)絡(luò)廣告、注冊搜索引擎等。
新知講解
想一想
網(wǎng)站建設(shè)
8、網(wǎng)站推廣與維護(hù)
為了維持網(wǎng)站不被他人遺忘，我們還需要保持對網(wǎng)站的內(nèi)容的更新，經(jīng)常更新網(wǎng)站內(nèi)容和添加新內(nèi)容。
新知講解
議一議
1、哪些推廣方式最適合初學(xué)者使用？
（1）社交媒體分享：在社交媒體平臺（如微信、微博）上分享網(wǎng)站鏈接，邀請朋友和同學(xué)訪問。
（2）口口相傳：向家人、朋友和同學(xué)介紹你的網(wǎng)站，請他們幫忙傳播。
（3）郵件邀請：給熟悉的人發(fā)送電子郵件，介紹你的網(wǎng)站并邀請訪問。
（4）論壇和社區(qū)：在你感興趣的論壇和社區(qū)發(fā)帖，分享你的網(wǎng)站，并參與討論，吸引更多人訪問。
（4）搜索引擎注冊：將你的網(wǎng)站提交給搜索引擎（如百度、搜狗），讓更多人通過搜索找到你的網(wǎng)站。
新知講解
議一議
2、為什么要將網(wǎng)站注冊到搜索引擎上？
（1）增加曝光：注冊到搜索引擎后，人們在網(wǎng)上搜索時更容易找到你的網(wǎng)站，增加網(wǎng)站的曝光度。
（2）吸引訪問者：通過搜索引擎，更多的訪問者可以發(fā)現(xiàn)你的網(wǎng)站，從而提高訪問量和人氣。
（3）便捷搜索：注冊后，別人只需在搜索引擎輸入關(guān)鍵詞，就能輕松找到你的網(wǎng)站，而不用記住復(fù)雜的地址。
（4）提高可信度：出現(xiàn)在搜索引擎結(jié)果中的網(wǎng)站通常更有可信度，能讓更多人信任你的網(wǎng)站內(nèi)容。
新知講解
做一做
1、對CSS的基本操作進(jìn)行體驗，在瀏覽器中查看效果，并與同學(xué)們交流哪種網(wǎng)頁好看。

紅色字體

下劃線字體

新知講解
做一做
2、使用繪制工具，與同學(xué)們一起對班級主頁網(wǎng)站進(jìn)行設(shè)計。
新知講解
做一做
3、使用網(wǎng)站制作相關(guān)軟件，與同學(xué)們合作制作出班級的主頁并發(fā)布。
新知講解
活動評價
單元活動評價
1、單元框架圖，請同學(xué)們對照圖中的內(nèi)容進(jìn)行總結(jié)。
新知講解
活動評價
單元活動評價
2、根據(jù)自己的掌握情況填寫下來。
學(xué)習(xí)內(nèi)容 掌握情況
網(wǎng)絡(luò)資源的類型 □不了解 □了解 □理解
網(wǎng)絡(luò)資源的獲取 □不了解 □了解 □理解
網(wǎng)絡(luò)資源的生成與分享 □不了解 □了解 □理解
云服務(wù)模式 □不了解 □了解 □理解
云服務(wù)應(yīng)用 □不了解 □了解 □理解
在線協(xié)作平臺 □不了解 □了解 □理解
在線學(xué)習(xí)平臺 □不了解 □了解 □理解
HTML 的概念 □不了解 □了解 □理解
HTML 的標(biāo)簽 □不了解 □了解 □理解
HTML 的屬性 □不了解 □了解 □理解
CSS 的屬性 □不了解 □了解 □理解
網(wǎng)站建設(shè)流程 □不了解 □了解 □理解
新知講解
什么是DIV+CSS
知識拓展
在我們學(xué)習(xí)了基本的網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)之后，讓我們來快速了解一下現(xiàn)代網(wǎng)頁設(shè)計中非常重要的技術(shù)：DIV+CSS。
新知講解
什么是DIV+CSS
知識拓展
1、什么是DIV：DIV是HTML中的一種容器標(biāo)簽，用來把網(wǎng)頁內(nèi)容分成不同的塊，便于布局管理。
新知講解
什么是DIV+CSS
知識拓展
2、什么是CSS：CSS（層疊樣式表）是用來控制網(wǎng)頁樣式和布局的工具，可以定義字體、顏色、邊距等。
新知講解
什么是DIV+CSS
知識拓展
3、分離內(nèi)容與樣式：通過DIV和CSS，內(nèi)容和樣式可以分開管理，使得代碼更加清晰和整潔。
新知講解
什么是DIV+CSS
知識拓展
4、靈活布局：使用DIV+CSS，可以輕松實現(xiàn)復(fù)雜的網(wǎng)頁布局，而不用依賴傳統(tǒng)的表格布局。
新知講解
什么是DIV+CSS
知識拓展
5、提高頁面加載速度：由于CSS樣式表可以被外部引用，網(wǎng)頁加載速度會更快，因為同一個樣式表可以被多個頁面共享。
新知講解
什么是DIV+CSS
知識拓展
6、響應(yīng)式設(shè)計：結(jié)合使用DIV和CSS，還可以創(chuàng)建適應(yīng)不同設(shè)備屏幕大小的響應(yīng)式網(wǎng)頁，提升用戶體驗。
新知講解
什么是DIV+CSS
知識拓展
總的來說，DIV+CSS讓我們能夠更方便地設(shè)計和管理網(wǎng)頁的布局和樣式，使網(wǎng)站既好看又實用。
新知講解
議一議
1、什么是響應(yīng)式設(shè)計，如何用DIV和CSS實現(xiàn)？
（1）響應(yīng)式設(shè)計定義：響應(yīng)式設(shè)計是一種網(wǎng)頁設(shè)計方法，使網(wǎng)頁可以自動適應(yīng)不同設(shè)備的屏幕大小，如手機(jī)、平板、電腦等。
（2）靈活的版面布局：通過使用DIV和CSS，可以設(shè)置不同設(shè)備上顯示的內(nèi)容和布局，比如在小屏設(shè)備上隱藏某些內(nèi)容或調(diào)整排列順序。
（3）使用百分比寬度：在CSS中使用百分比而不是固定像素作為寬度，可以讓網(wǎng)頁元素根據(jù)屏幕大小自動調(diào)整。
（4）調(diào)整圖像大小：用CSS設(shè)置圖片寬度為100%，讓圖片在不同設(shè)備上都能按比例縮放，不會超出屏幕邊界。
新知講解
議一議
2、在實際做網(wǎng)頁的過程中，DIV和CSS的應(yīng)用難點在哪里？
（1）復(fù)雜布局管理：創(chuàng)建復(fù)雜頁面布局時，使用多個DIV和CSS樣式可能會混淆，管理和維護(hù)較困難。
（2）樣式?jīng)_突和定位問題：CSS樣式可能會沖突，導(dǎo)致顯示錯誤；使用定位時也可能出現(xiàn)位置問題，需要調(diào)試。
（3）瀏覽器兼容性：不同瀏覽器對CSS支持不一致，可能顯示效果不同。
（4）響應(yīng)式設(shè)計和嵌套：設(shè)計響應(yīng)式網(wǎng)頁需要編寫復(fù)雜CSS；DIV標(biāo)簽嵌套過多會使代碼難閱讀和維護(hù)。
課堂總結(jié)
1
了解網(wǎng)站建設(shè)步驟
網(wǎng)頁頁面美化
2
認(rèn)識規(guī)劃的重要性
3
掌握基礎(chǔ)設(shè)計技能
4
理解申請域名空間
板書設(shè)計
開展問卷調(diào)查活動
開展問卷調(diào)查活動
了解敬老愛老美德
認(rèn)識需要幫助的老人
熟悉問卷調(diào)查的方法
勞動之識——設(shè)計問卷需注意問題
勞動之行——能合作完善問卷設(shè)計
網(wǎng)頁頁面美化
1、了解網(wǎng)站建設(shè)步驟
2、認(rèn)識規(guī)劃的重要性
3、掌握基礎(chǔ)設(shè)計技能
4、理解申請域名空間
課后作業(yè)：
1、班級網(wǎng)站需要哪些主要功能？請列舉至少三個。
課后作業(yè)
1、班級網(wǎng)站需要哪些主要功能？請列舉至少三個。
動態(tài)發(fā)布：發(fā)布最新的班級活動新聞和通知，確保同學(xué)們及時了解重要事項。
風(fēng)采展示：展示班級成員的照片和介紹，分享班級活動的照片和視頻，記錄班級精彩時刻。
學(xué)習(xí)資源：提供學(xué)習(xí)資料的下載和在線作業(yè)提交平臺，幫助同學(xué)們獲取必要的學(xué)習(xí)資源并便捷提交作業(yè)。
交流平臺：設(shè)置留言板和在線聊天功能，促進(jìn)同學(xué)間互動交流事。
聯(lián)系方式：顯示班級和老師的聯(lián)系方式，提供便捷的聯(lián)系渠道。
資源分享：集合并分享各類學(xué)習(xí)資源和應(yīng)用工具的鏈接，方便同學(xué)們查找和使用，提高學(xué)習(xí)效率。
58
https://www.21cnjy.com/help/help_extract.php
讓備課更有效
www.21cnjy.com
Thanks!

展開更多......

收起↑