第三單元+第3節(jié)《網(wǎng)站的制作與美化》課件2025-2026學(xué)年廣東教育出版社信息科技學(xué)習(xí)手冊七年級全一冊_第1頁
第三單元+第3節(jié)《網(wǎng)站的制作與美化》課件2025-2026學(xué)年廣東教育出版社信息科技學(xué)習(xí)手冊七年級全一冊_第2頁
第三單元+第3節(jié)《網(wǎng)站的制作與美化》課件2025-2026學(xué)年廣東教育出版社信息科技學(xué)習(xí)手冊七年級全一冊_第3頁
第三單元+第3節(jié)《網(wǎng)站的制作與美化》課件2025-2026學(xué)年廣東教育出版社信息科技學(xué)習(xí)手冊七年級全一冊_第4頁
第三單元+第3節(jié)《網(wǎng)站的制作與美化》課件2025-2026學(xué)年廣東教育出版社信息科技學(xué)習(xí)手冊七年級全一冊_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

網(wǎng)站的制作與美化打造非遺文化視覺盛宴課堂小測1.下列關(guān)于網(wǎng)站制作的步驟，按正確順序排列的是哪一項(xiàng)？（

）

A.設(shè)計(jì)網(wǎng)站結(jié)構(gòu)

→

素材準(zhǔn)備→編寫HTML代碼

→

測試網(wǎng)站

→

發(fā)布網(wǎng)站

→

網(wǎng)站維護(hù)B.素材準(zhǔn)備→編寫HTML代碼

→

設(shè)計(jì)網(wǎng)站結(jié)構(gòu)

→

測試網(wǎng)站

→

發(fā)布網(wǎng)站

→

網(wǎng)站維護(hù)C.設(shè)計(jì)網(wǎng)站結(jié)構(gòu)

→

編寫HTML代碼

→

素材準(zhǔn)備→發(fā)布網(wǎng)站

→

測試網(wǎng)站

→

網(wǎng)站維護(hù)D.素材準(zhǔn)備→編寫HTML代碼

→

測試網(wǎng)站

→

設(shè)計(jì)網(wǎng)站結(jié)構(gòu)

→

發(fā)布網(wǎng)站

→

網(wǎng)站維護(hù)2.以下關(guān)于引用數(shù)據(jù)合法性的說法，正確的是（

）A.只要數(shù)據(jù)看起來真實(shí)，就可以直接引用，無需考慮來源B.引用數(shù)據(jù)時，必須確保數(shù)據(jù)來源可靠，并且經(jīng)過合法授權(quán)C.從網(wǎng)絡(luò)上隨意復(fù)制粘貼的數(shù)據(jù)可以直接用于網(wǎng)站，無需注明引用來源D.只要數(shù)據(jù)是公開的，就可以隨意引用，無需考慮版權(quán)問題課堂小測3.在制作非遺文化網(wǎng)站時，需要收集大量的圖片、文字、音頻和視頻素材。以下關(guān)于素材管理的說法中，哪一項(xiàng)最合理？（

）A.收集到的所有素材可以直接存放在一個文件夾中，便于快速查找。B.不同類型或不同主題的素材分別存放在不同的文件夾中，便于管理和查找。C.素材的命名和存放方式無關(guān)緊要，只要素材內(nèi)容完整即可。D.所有素材都應(yīng)該存放在一個公共云盤中，方便團(tuán)隊(duì)成員隨時訪問，無需分類。4.以下工具中，哪一種最適合用于網(wǎng)頁代碼的編輯？（

）A.AdobePhotoshopB.WPSC.VSCodeD.AdobePremierePro5.以下文件格式中，哪一種是網(wǎng)頁文件的標(biāo)準(zhǔn)格式？（

）

A.PDFB.HTMLC.DOCXD.JPEG

網(wǎng)頁編輯制作不僅是一項(xiàng)技術(shù)，更是一種將數(shù)據(jù)融入傳播工具的藝術(shù)。在完成頂層規(guī)劃和前期準(zhǔn)備后，如何制作并美化非遺文化網(wǎng)站呢?本節(jié)我們將一起創(chuàng)建、編輯和美化網(wǎng)頁，打造非遺文化視覺盛宴!學(xué)習(xí)目標(biāo)1.能夠列舉HTML語言常見標(biāo)簽并描述其作用。2.能夠利用在線網(wǎng)頁編輯工具和HTML語言創(chuàng)建和編輯網(wǎng)頁。3.能夠?qū)W(wǎng)頁進(jìn)行美化。壹

創(chuàng)建網(wǎng)頁一、創(chuàng)建網(wǎng)頁HTML是一種用于創(chuàng)建和設(shè)計(jì)網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。瀏覽網(wǎng)頁時，人們看到的文字、圖片、音頻、視頻等內(nèi)容都是通過HTML語言來設(shè)計(jì)和組織的。HTML語言通過一系列標(biāo)簽來定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。一、創(chuàng)建網(wǎng)頁網(wǎng)站內(nèi)容需求描述<html></html>表示整個HTML文檔的開始和結(jié)束<head></head>表示HTMI文檔頭部的開始和結(jié)束<title></uide>定義文檔的標(biāo)題，顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁上<h1></h1>定義頁面的最高級別標(biāo)題<p></p>定義頁面的最高級別標(biāo)題<body></body>表示文檔的主體內(nèi)容的開始和結(jié)束一、創(chuàng)建網(wǎng)頁HTML標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽兩類。單標(biāo)簽由一個標(biāo)簽構(gòu)成，獨(dú)立完成特定功能，格式為<標(biāo)簽名>，如換行標(biāo)簽<br>和圖片標(biāo)簽<img>。雙標(biāo)簽由開始標(biāo)簽和結(jié)束標(biāo)簽組成，格式為<標(biāo)簽名>內(nèi)容<標(biāo)簽名>，例如標(biāo)題標(biāo)簽<title>標(biāo)題名稱</title>。HTML代碼<html><title>科技節(jié)——人工智能繪畫</title><body><h1>飛馳的火車</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI繪畫作品</a></body></html>一、創(chuàng)建網(wǎng)頁多個雙標(biāo)簽之間存在包含關(guān)系和并列關(guān)系。HTML代碼<html><title>科技節(jié)——人工智能繪畫</title><body><h1>飛馳的火車</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI繪畫作品</a></body></html>一、創(chuàng)建網(wǎng)頁HTML代碼<html><title>科技節(jié)——人工智能繪畫</title><body><h1>飛馳的火車</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI繪畫作品</a></body></html>瀏覽器獲得網(wǎng)頁代碼后，就會按照這些代碼的要求，顯示相應(yīng)的文字、圖像等，進(jìn)而呈現(xiàn)出完整的網(wǎng)頁效果?；顒右唬捍a探秘任務(wù):利用在線網(wǎng)頁編輯器創(chuàng)建網(wǎng)頁1.布局網(wǎng)頁版面(1)按照圖中的操作步驟，通過插入表格進(jìn)行頁面排版，便于固定圖片和文字的位置。任務(wù):利用在線網(wǎng)頁編輯器創(chuàng)建網(wǎng)頁(2)采用相同的方法，在正文部分插入一個1行2列的表格，用于放置圖片和文字。任務(wù):利用在線網(wǎng)頁編輯器創(chuàng)建網(wǎng)頁2.填充內(nèi)容:在表格的對應(yīng)位置添加文字和圖片。任務(wù):利用在線網(wǎng)頁編輯器創(chuàng)建網(wǎng)頁3.保存網(wǎng)頁:將在線網(wǎng)頁編輯工具生成的網(wǎng)頁保存為HTML文件，使用VSCode代碼編輯器打開，查看HTML代碼及標(biāo)簽，嘗試?yán)斫飧鳂?biāo)簽的作用。小貼士HTML表格的基本結(jié)構(gòu)由<table>、<tr>、<th>和<td>標(biāo)簽組成。<table></table>:定義表格的開始和結(jié)束。<tr></tr>:定義表格的一行。<th></th>:定義表格的表頭單元格，通常顯示在表格的第一行或第一列，文字默認(rèn)加粗且居中。<td></td>:定義表格的普通單元格，用于存放數(shù)據(jù)。屬性border用于設(shè)置表格的邊框?qū)挾?，?lt;tableborder="1">表示設(shè)置邊框?qū)挾葹?像素。貳

編輯網(wǎng)頁二、編輯網(wǎng)頁

在HTML中，插入圖片常用的標(biāo)簽是<img>，它是一個空標(biāo)簽(即沒有結(jié)束標(biāo)簽)。圖片標(biāo)簽屬性作用src指定圖片的路徑或URL，告訴測覽器從哪里加載圖片alt提供圖片的替代文本，當(dāng)圖片無法顯示時，瀏覽器會顯示這個文本width設(shè)置圖片的寬度height設(shè)置圖片的高度<imgsrc="image.jpg"alt="示例圖片width="500"height="300">二、編輯網(wǎng)頁

使用VSCode網(wǎng)頁編輯器打開HTML文件，找到<img>標(biāo)簽的語句，將sre的源目標(biāo)改為圖片的地址，可以修改圖片的尺寸。二、編輯網(wǎng)頁

在HTML中，<img>標(biāo)簽的src屬性用于指定圖片的地址，可以使用相對地址或絕對地址。

相對地址是指圖片相對于當(dāng)前HTML文件的路徑。例如，src="./pic/lq1.ipg"表示圖片位于當(dāng)前HTML文件所在目錄下的pic文件夾中。

絕對地址則是完整的網(wǎng)絡(luò)路徑，例如src="/image.jpg"。二、編輯網(wǎng)頁

超鏈接是網(wǎng)頁的重要功能，有助于互聯(lián)網(wǎng)資源相互連接。HTML中的超鏈接由<a>標(biāo)簽實(shí)現(xiàn)，<a>標(biāo)簽用于創(chuàng)建頁面間或頁面內(nèi)位置的跳轉(zhuǎn)。其基本語法為:<ahref="鏈接目標(biāo)">鏈接文本</a>，其中href屬性指定鏈接的目標(biāo)URL,或頁面中的具體位置。HTML代碼<html><title>科技節(jié)——人工智能繪畫</title><body><h1>飛馳的火車</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI繪畫作品</a></body></html>任務(wù):為非遺文化網(wǎng)站的頁面導(dǎo)航設(shè)置超鏈接1.了解非遺文化網(wǎng)站的文件組織結(jié)構(gòu)，獲取文件的路徑，如果homepage是網(wǎng)站的根目錄，那么首頁文件的超鏈接代碼為<ahref="index.html">首頁</a>。任務(wù):為非遺文化網(wǎng)站的頁面導(dǎo)航設(shè)置超鏈接2.在網(wǎng)頁中創(chuàng)建導(dǎo)航欄(如圖3-3-7所示)，使用HTML的<a>標(biāo)簽為導(dǎo)航文字添加超鏈接。例如，“首頁”鏈接到index.html,“傳統(tǒng)民俗”鏈接到festival.html。代碼示例如圖所示。確保所有頁面的導(dǎo)航欄都包含正確的超鏈接，實(shí)現(xiàn)頁面間的互聯(lián)，構(gòu)建完整的網(wǎng)站結(jié)構(gòu)。任務(wù):為非遺文化網(wǎng)站的頁面導(dǎo)航設(shè)置超鏈接3.完成超鏈接設(shè)置后，使用瀏覽器打開網(wǎng)頁，檢查導(dǎo)航欄中的鏈接是否能正常跳轉(zhuǎn)至目標(biāo)頁面。叁

美化網(wǎng)頁三、美化網(wǎng)頁

合理的配色方案能夠提升網(wǎng)頁的吸引力。那么，如何美化非遺文化網(wǎng)頁?三、美化網(wǎng)頁

可以通過為網(wǎng)頁設(shè)置背景顏色、透明度和背景圖片等方式美化網(wǎng)頁。網(wǎng)頁中的顏色可用十六進(jìn)制顏色代碼(如#080)、RGB值(如rgb(240,248,255))或預(yù)定義的顏色名稱(如lighiblue)表示。如果不知道顏色對應(yīng)的值，可以利用在線顏色配色器進(jìn)行查找。三、網(wǎng)頁編輯的工具

在HTML中，可以在<body>標(biāo)簽的<style>樣式中使用background-color屬性設(shè)置背景顏色，background-image屬性設(shè)置背景圖片，opacity屬性設(shè)置透明度。opacily取值范圍為0.0到1.0，0.0表示完全透明，1

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論