網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版）-教案 模塊5、6 使用JavaScript添加動(dòng)態(tài)效果、綜合案例_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版）-教案 模塊5、6 使用JavaScript添加動(dòng)態(tài)效果、綜合案例_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版）-教案 模塊5、6 使用JavaScript添加動(dòng)態(tài)效果、綜合案例_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版）-教案 模塊5、6 使用JavaScript添加動(dòng)態(tài)效果、綜合案例_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版）-教案 模塊5、6 使用JavaScript添加動(dòng)態(tài)效果、綜合案例_第5頁(yè)
已閱讀5頁(yè)，還剩44頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

模塊五使用JavaScript添加動(dòng)態(tài)效果本模塊通過(guò)5個(gè)案例的實(shí)現(xiàn)，介紹使用JavaScript添加網(wǎng)頁(yè)動(dòng)態(tài)效果的方法。這5個(gè)案例包括輸出信息、表單驗(yàn)證、簡(jiǎn)單計(jì)算器、限時(shí)促銷(xiāo)和輪播圖等，通過(guò)這些案例的實(shí)現(xiàn)掌握使用JavaScript的基本使用方法。知識(shí)目標(biāo)：掌握將JavaScript引入網(wǎng)頁(yè)的方式；掌握J(rèn)avaScript的基本語(yǔ)法；掌握J(rèn)avaScript的事件與事件調(diào)用；掌握BOM對(duì)象的常用方法和屬性；掌握DOM對(duì)象的常用方法和屬性。能力目標(biāo)：會(huì)編寫(xiě)簡(jiǎn)單的JavaScript程序；能閱讀并理解簡(jiǎn)單的JavaScript程序；使用

JavaScript

編寫(xiě)代碼添加網(wǎng)頁(yè)動(dòng)態(tài)效果。素質(zhì)目標(biāo)：在編寫(xiě)代碼中提升邏輯思維能力；在編寫(xiě)代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神。教案20案例20輸出信息計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)了解JavaScript的常見(jiàn)應(yīng)用熟悉JavaScript的語(yǔ)法規(guī)則掌握J(rèn)avaScript的引入方式掌握J(rèn)avaScript的常用的輸入輸出方法能力目標(biāo)能說(shuō)出JavaScript的常見(jiàn)應(yīng)用會(huì)使用JavaScript編寫(xiě)簡(jiǎn)單的腳本程序素質(zhì)目標(biāo)在編寫(xiě)代碼中遵循正確的編寫(xiě)代碼規(guī)范在編寫(xiě)代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的引入方式prompt、alert、write方法的使用教學(xué)難點(diǎn)prompt、alert、write方法的靈活使用教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建JavaScript程序，運(yùn)行效果如圖20-1~圖20-3所示。具體要求如下。（1）彈出輸入對(duì)話框，輸入姓名，單擊“確定”按鈕后，彈出顯示信息對(duì)話框，顯示××您好！。（2）單擊顯示信息對(duì)話框中的“確定”按鈕后，在網(wǎng)頁(yè)上顯示信息“歡迎學(xué)習(xí)JavaScript！”。（3）“歡迎學(xué)習(xí)JavaScript！”為一級(jí)標(biāo)題、紅色，在瀏覽器中水平居中顯示。圖20-1輸入對(duì)話框圖20-2顯示信息對(duì)話框圖20-3在網(wǎng)頁(yè)上輸出信息案例分析圖20-1所示的用于輸入姓名的輸入框需要使用prompt()方法定義，圖20-2所示的顯示信息對(duì)話框需要使用alert()方法定義，圖20-3所示的在網(wǎng)頁(yè)上輸出的信息需要使用document對(duì)象的write()方法定義?！皻g迎學(xué)習(xí)JavaScript！”文字需要使用CSS定義標(biāo)題的樣式。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8"

/>

<title>顯示信息</title>

<style

type="text/css">

h1{

color:#F00;

text-align:center;

}

</style>

</head>

<body>

<script

type="text/javascript">

var

name=prompt("請(qǐng)輸入您的姓名");

//彈出輸入對(duì)話框，輸入姓名,存入變量name

alert(name+"您好！");

//彈出顯示信息對(duì)話框

document.write("<h1>歡迎學(xué)習(xí)JavaScript!</h1>");

//在網(wǎng)頁(yè)上輸出信息

</script>

</body></html>第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、JavaScript的常見(jiàn)應(yīng)用（5分鐘）1．動(dòng)態(tài)交互效果2．?dāng)?shù)據(jù)驗(yàn)證3．結(jié)合流行框架開(kāi)發(fā)移動(dòng)應(yīng)用二、JavaScript的語(yǔ)法規(guī)則（5分鐘）（1）JavaScript嚴(yán)格區(qū)分大小寫(xiě)，在編寫(xiě)代碼時(shí)一定注意大小寫(xiě)的正確性。（2）一般在每條語(yǔ)句結(jié)束后加分號(hào)。（3）JavaScript的注釋符號(hào)是//（單行注釋?zhuān)┖?*

……

*/（多行注釋?zhuān)?。三、JavaScript的引入方式（20分鐘）1．直接將JavaScript代碼嵌入HTML中（內(nèi)嵌式）<script

type="text/javascript">

JavaScript語(yǔ)句</script>例20-1<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8"

/>

<title>嵌入式</title>

</head>

<body>

<script

type="text/javascript">

alert("李華，歡迎來(lái)到JavaScript的世界！");

//在彈出的對(duì)話框中顯示信息

</script>

</body></html>

2．鏈接外部的JavaScript代碼（外鏈?zhǔn)剑├?0-2<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8">

<title>外鏈?zhǔn)?lt;/title>

<script

src="js/01.js"

type="text/javascript"></script>

</head>

<body>

</body></html>3．直接在HTML標(biāo)記中使用（行內(nèi)式）（1）使用“javascript:”調(diào)用。<a

href="javascript:alert('希望你成為前端開(kāi)發(fā)的高手')">

歡迎來(lái)到JavaScript世界！</a>（2）結(jié)合事件調(diào)用。<input

type="button"

value="顯示信息"

onclick="alert('Hello,

Welcome!');"

/>四、輸入/輸出方法（10分鐘）1．prompt()方法2．a(chǎn)lert()方法3．write()方法五=2\*ROMAN、小結(jié)（5分鐘）重點(diǎn)掌握J(rèn)avaScript腳本代碼引入的三種方式（內(nèi)嵌式、外鏈?zhǔn)?、行?nèi)式）和輸入輸出的方法。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例21中的微課，自學(xué)表單驗(yàn)證在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中遵循正確的代碼編寫(xiě)規(guī)范。教案21案例21表單驗(yàn)證計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握J(rèn)avaScript中變量命名、聲明和賦值熟悉JavaScript中常用的數(shù)據(jù)類(lèi)型掌握J(rèn)avaScript的運(yùn)算符和函數(shù)使用方法了解JavaScript的DOM(文檔對(duì)象模型)能力目標(biāo)能使用JavaScript編寫(xiě)代碼進(jìn)行表單驗(yàn)證會(huì)使用開(kāi)發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫(xiě)代碼中遵循正確的編寫(xiě)代碼規(guī)范在編寫(xiě)代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的基本語(yǔ)法表單驗(yàn)證的方法教學(xué)難點(diǎn)使用JavaScript獲取元素教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建注冊(cè)表單，編寫(xiě)JavaScript代碼，在表單提交時(shí)進(jìn)行數(shù)據(jù)驗(yàn)證，運(yùn)行效果如圖21-1和圖21-2所示。具體要求如下。（1）在注冊(cè)表單中添加一個(gè)文本輸入框、兩個(gè)密碼輸入框和一個(gè)命令按鈕。（2）表單樣式如圖21-1所示。（3）如果小米ID和密碼輸入不符合要求或者密碼輸入和確認(rèn)密碼輸入不一致，則在單擊“注冊(cè)”按鈕時(shí)會(huì)彈出警示對(duì)話框，如圖21-2所示。圖21-1注冊(cè)表單圖21-2單擊“注冊(cè)”按鈕時(shí)對(duì)表單進(jìn)行驗(yàn)證案例分析創(chuàng)建注冊(cè)表單，使用<form>標(biāo)記定義表單，在表單中添加3個(gè)<input>標(biāo)記用于輸入小米ID和密碼，添加一個(gè)“注冊(cè)”按鈕，定義表單和控件的樣式。創(chuàng)建腳本文件，編寫(xiě)JavaScript代碼，使用document對(duì)象的getElementById()方法獲取輸入框中的數(shù)據(jù)，判斷是否滿足要求。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．創(chuàng)建表單：<form

action=""

method="get"

class="register"

onsubmit="validate()">

<h1>小米用戶注冊(cè)</h1>

"required"

/>

<p><input

type="password"

id="txtPwd1"

class="pwd"

placeholder="密碼"

required="required"/></p>

<p

required="required"/></p>

<p><input

type="submit"

class="sub"

value="注冊(cè)"

/></p></form>2．定義表單的CSS樣式3．創(chuàng)建JavaScript腳本文件function

validate()

{var

userID

=

document.getElementById('txtID').value; //獲取輸入的小米IDif

(userID.length

<

6

||

userID.length

>

20)

{

//判斷小米ID的長(zhǎng)度

alert("小米ID必須為6～20個(gè)字符，請(qǐng)重新輸入！");

//在警示對(duì)話框中顯示提示信息

return

false;

}

var

password1

=

document.getElementById('txtPwd1').value;

//獲取輸入的密碼

if

(password1.length

<

6

||

password1.length

>

10)

{

alert("密碼必須為6～10個(gè)字符，請(qǐng)重新輸入！");

//在警示對(duì)話框中顯示提示信息

return

false;

}

var

password2

=

document.getElementById('txtPwd2').value;

//獲取輸入的確認(rèn)密碼

if(password1!==password2){

alert("兩次輸入密碼不一致！");

return

false;

}}第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、變量1．變量的命名?必須以字母或下畫(huà)線開(kāi)頭，中間可以是數(shù)字、字母或下畫(huà)線。?變量名不能包含空格、加號(hào)、減號(hào)等字符。?不能使用JavaScript的關(guān)鍵字，如var、int等。?JavaScript的變量名是嚴(yán)格區(qū)分大小寫(xiě)的2．變量的聲明和賦值var

name;

//一次聲明一個(gè)變量var

name,gender,age;

//一次聲明多個(gè)變量var

name="李華";

//在聲明的同時(shí)初始化變量var

name="李華",gender="男",age;

//在聲明的同時(shí)初始化全部或者部分變量二、數(shù)據(jù)類(lèi)型分類(lèi)類(lèi)型說(shuō)明基本數(shù)據(jù)類(lèi)型數(shù)值型整型，用十進(jìn)制數(shù)、八進(jìn)制數(shù)和十六進(jìn)制數(shù)來(lái)表示浮點(diǎn)型，使用普通形式和指數(shù)形式字符串型表示文本數(shù)據(jù)，主要由字母、數(shù)字、漢字和其他特殊字符組成，字符串型數(shù)據(jù)必須用單引號(hào)或者雙引號(hào)引起來(lái)布爾型邏輯型，布爾型數(shù)據(jù)只有兩個(gè)值，即邏輯真和邏輯假引用數(shù)據(jù)類(lèi)型支持對(duì)象編程的類(lèi)型對(duì)象、函數(shù)等特殊數(shù)據(jù)類(lèi)型null表示空類(lèi)型，當(dāng)前為空值undefined未定義類(lèi)型的變量，表示這個(gè)變量還沒(méi)有被賦值NaNJavaScript特有的特殊數(shù)據(jù)類(lèi)型，表示“非數(shù)值”，是指程序運(yùn)行時(shí)由于某種原因發(fā)生計(jì)算錯(cuò)誤，產(chǎn)生沒(méi)有意義的數(shù)值轉(zhuǎn)義字符控制字符，它是以“\”開(kāi)頭、不可顯示的特殊字符，利用轉(zhuǎn)義字符可以在字符串中添加不可顯示的特殊字符或者避免引號(hào)匹配問(wèn)題例21-1：

<script

type="text/javascript">

var

a,

type_a;

a

=

100;

type_a

=

typeof

a;

document.write(a

+

"的類(lèi)型是："

+

type_a

+

"<br

/>");

a

=

true;

type_a

=

typeof

a;

document.write(a

+

"的類(lèi)型是："

+

type_a

+

"<br

/>");

a

=

"hello";

type_a

=

typeof

a;

document.write(a

+

"的類(lèi)型是："

+

type_a

+

"<br

/>");

a

=

null;

type_a

=

typeof

a;

document.write(a

+

"的類(lèi)型是："

+

type_a

+

"<br

/>");

a

=

2023

+

"明天會(huì)更好";

type_a

=

typeof(a);

document.write(a

+

"的類(lèi)型是："

+

type_a

+

"<br

/>");

</script>三、運(yùn)算符例21-2：判斷輸入的年份是否是閏年<script>

var

year

=

mpt("請(qǐng)輸入要判斷的年份");

year

=

parseInt(year);

var

str

=

year

%

4

==

0

&&

year

%

100

!=

0

||

year

%

400

==

0;

var

result

=

str

?

"是閏年"

:

"不是閏年";

document.write(year

+

"年"

+

result);</script>四、函數(shù)1．定義函數(shù)function函數(shù)名（[參數(shù)1,參數(shù)2…]）{

函數(shù)體；

[return表達(dá)式]}2．調(diào)用函數(shù)函數(shù)名（[參數(shù)1,參數(shù)2…]）；例<script

type="text/javascript">

function

printStr()

{

//定義函數(shù)

alert("茍日新，日日新。");

}

printStr();

//調(diào)用函數(shù)

</script>五、DOM簡(jiǎn)介1．DOM文檔對(duì)象模型（DocumentObjectModel，DOM）是JavaScript操作網(wǎng)頁(yè)的接口，它的作用是將網(wǎng)頁(yè)轉(zhuǎn)換為JavaScript對(duì)象，從而可以使用JavaScript對(duì)網(wǎng)頁(yè)進(jìn)行各種操作。2．獲取元素表21-2獲取元素和集合的方法分類(lèi)方法說(shuō)明獲取元素document.getElementById(id)獲取指定id的頁(yè)面元素對(duì)象document.querySelector(selector);獲取指定選擇器的頁(yè)面元素對(duì)象獲取元素集合documnet.getElementsByName(name)獲取指定name屬性值的頁(yè)面元素對(duì)象集合documnet.getElementsByTagName(tag)獲取指定標(biāo)記的頁(yè)面元素對(duì)象集合documnet.getElementsByClassName(class)獲取指定類(lèi)的頁(yè)面元素對(duì)象集合document.querySelectorAll(selector);獲取指定選擇器的頁(yè)面元素對(duì)象集合六=2\*ROMAN、小結(jié)重點(diǎn)掌握J(rèn)avaScript的基本語(yǔ)法。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例22中的微課，自學(xué)簡(jiǎn)單計(jì)算器的內(nèi)容。在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中引導(dǎo)學(xué)生遵循正確的代碼編寫(xiě)規(guī)范。教案22案例22簡(jiǎn)單計(jì)算器計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握J(rèn)avaScript的分支語(yǔ)句的使用語(yǔ)法掌握J(rèn)avaScript中數(shù)據(jù)類(lèi)型轉(zhuǎn)換的方法熟悉JavaScript的事件及事件調(diào)用方法能力目標(biāo)能使用JavaScript編寫(xiě)代碼實(shí)現(xiàn)簡(jiǎn)單計(jì)算器會(huì)使用開(kāi)發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫(xiě)代碼中遵循正確的編寫(xiě)代碼規(guī)范在編寫(xiě)代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的分支語(yǔ)句數(shù)據(jù)類(lèi)型轉(zhuǎn)換教學(xué)難點(diǎn)事件及事件調(diào)用教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建簡(jiǎn)單計(jì)算器，編寫(xiě)JavaScript代碼，實(shí)現(xiàn)四則運(yùn)算，當(dāng)輸入數(shù)據(jù)不合法時(shí)（輸入非數(shù)值型數(shù)據(jù)或除數(shù)為0）進(jìn)行提示，運(yùn)行效果如圖22-1所示。具體要求如下。（1）添加3個(gè)文本框，用于輸入兩個(gè)數(shù)和顯示計(jì)算結(jié)果。（2）添加下拉列表框，用于選擇運(yùn)算符。（3）添加“計(jì)算”按鈕，單擊該按鈕時(shí)進(jìn)行計(jì)算，將結(jié)果顯示到“結(jié)果”文本框中。（4）輸入非數(shù)值型數(shù)據(jù)或者除數(shù)為0時(shí)，出現(xiàn)警示對(duì)話框，給予操作提示。圖22-1簡(jiǎn)單計(jì)算器案例分析在頁(yè)面上添加盒子，在盒子中添加標(biāo)題<h2>標(biāo)記和四對(duì)<p>標(biāo)記，在<p>標(biāo)記中放入提示信息和相應(yīng)控件，輸入數(shù)據(jù)和顯示結(jié)果的控件使用<input>標(biāo)記定義，下拉列表框使用<select>標(biāo)記定義，“計(jì)算”按鈕使用<input>標(biāo)記定義，定義盒子和控件的樣式。創(chuàng)建腳本文件，編寫(xiě)JavaScript代碼，使用document對(duì)象的getElementById()方法獲取輸入的數(shù)據(jù)和運(yùn)算符，通過(guò)多分支語(yǔ)句完成運(yùn)算。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．創(chuàng)建表單：<div

id="box">

<h2>簡(jiǎn)單計(jì)算器</h2>

<p>請(qǐng)輸入第一個(gè)數(shù)：<input

id="num1"

type="text"></p>

<p>請(qǐng)輸入第二個(gè)數(shù)：<input

id="num2"

type="text"></p>

<p>運(yùn)算符：

<select

id="opt">

<option

value="+"

selected>+</option>

<option

value="-">-</option>

<option

value="*">*</option>

<option

value="/">/</option>

</select>

<input

type="button"

value="計(jì)算"

onclick="calc()">

</p>

<p>結(jié)果：<input

id="result"

type="text"></p>

</div>2．定義表單的CSS樣式3．創(chuàng)建JavaScript腳本文件<script

type="text/javascript">

function

calc()

{

//定義函數(shù)

var

num1

=

document.getElementById('num1').value; //獲取第一個(gè)數(shù)

var

num2

=

document.getElementById('num2').value;

//獲取第二個(gè)數(shù)

num1

=

parseFloat(num1)

&&

Number(num1);

//

num2

=

parseFloat(num2)

&&

Number(num2);

//

var

result;

//定義存放結(jié)果的變量

if

(isNaN(num1)

||

isNaN(num2))

{

//如果輸入數(shù)據(jù)不是數(shù)值型

alert('請(qǐng)輸入數(shù)字');

//顯示提示信息

return

false;

//返回

}

else

{

var

opt

=

document.getElementById('opt').value

//獲取運(yùn)算符

switch

(opt)

{

//根據(jù)運(yùn)算符選擇不同的分支進(jìn)行計(jì)算

case

'+':

result

=

num1

+

num2;

break;

case

'-':

result

=

num1

-

num2;

break;

case

'*':

result

=

num1

*

num2;

break;

case

'/':

if

(num2

==

0)

{

//除數(shù)如果為0，則顯示提示信息，不計(jì)算

alert("除數(shù)不能為0");

return;

}

else

{

result

=

num1

/

num2;

}

break;

}

d

}

}</script>第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、分支語(yǔ)句1．單分支<script

type="text/javascript">

var

score=prompt("請(qǐng)輸入你的考試成績(jī)："); //定義變量接收輸入的數(shù)值

if(score>=90){

//如果條件成立，則彈出“你真棒！”

alert("你真棒！");

}

</script>2.雙分支

<script

type="text/javascript">

var

score=prompt("請(qǐng)輸入你的考試成績(jī)：");

//定義變量接收輸入的數(shù)值

if(score>=60){

alert("恭喜你，順利通過(guò)！");

//條件成立，彈出“恭喜你，順利通過(guò)！”

}

else{

alert("很不幸，你沒(méi)通過(guò)！");

//條件不成立，彈出“很不幸，你沒(méi)通過(guò)！”

}

</script>3．多分支<script

type="text/javascript">

var

score=prompt("請(qǐng)輸入你的考試成績(jī)：");

//定義變量接收輸入的數(shù)值

if(score>=90){

//如果條件成立，則彈出“優(yōu)秀！”

alert("優(yōu)秀！");

}

else

if(score>=80){

alert("良好！");

}

else

if(score>=70){

alert("一般！");

}

else

if(score>=60){

alert("及格！");

}

else{

alert("不及格！");

}</script>4．多分支語(yǔ)句（switch語(yǔ)句）<script

type="text/javascript">

var

score=prompt("請(qǐng)輸入你的考試成績(jī)：");

//定義變量接收輸入的數(shù)值

var

n=

Math.floor(score/10);

//向下取整

switch(n){

case

10:case

9:

alert("優(yōu)秀！");break;

case

8:

alert("良好！");break;

case

7:

alert("一般！");break;

case

6:

alert("及格！");break;

default:

alert("不及格！");

}</script>二、數(shù)據(jù)類(lèi)型轉(zhuǎn)換1．隱式類(lèi)型轉(zhuǎn)換2．顯式類(lèi)型轉(zhuǎn)換方法說(shuō)明示例parseInt()將數(shù)據(jù)轉(zhuǎn)換成整型parseInt("123.567")//返回123parseInt("123abc")//返回123parseInt("abc123")//返回NaNparseFloat()將數(shù)據(jù)轉(zhuǎn)換為浮點(diǎn)型parseFloat("123.567")//返回123.567parseFloat("123abc")//返回123parseFloat("abc123")//返回NaNNumber()將數(shù)據(jù)轉(zhuǎn)換成數(shù)字Number("3.14")

//返回3.14

Number("99a88")

//返回NaNNumber(false)

//返回0

Number(true)

//返回1Boolean()將數(shù)據(jù)轉(zhuǎn)換成布爾型Boolean(undefined)//falseBoolean(1)//trueBoolean(0)//falseBoolean(NaN)//falseString()將數(shù)據(jù)轉(zhuǎn)換成字符串型String(123)

//返回"123"toString()將數(shù)據(jù)轉(zhuǎn)換成字符串型123.toString()//返回"123"例22-5：輸入兩個(gè)數(shù)，計(jì)算兩數(shù)之和。略。三、事件與事件調(diào)用1．事件事件事件觸發(fā)時(shí)機(jī)onclick單擊時(shí)觸發(fā)ondblclick雙擊時(shí)觸發(fā)onmousedown按下任意鼠標(biāo)按鍵時(shí)觸發(fā)onmouseover鼠標(biāo)指針進(jìn)入時(shí)觸發(fā)onmouseup釋放任意鼠標(biāo)按鍵時(shí)觸發(fā)onkeydown鍵盤(pán)按鍵按下時(shí)觸發(fā)onkeyup鍵盤(pán)按鍵彈起時(shí)觸發(fā)onsubmit提交表單時(shí)觸發(fā)onfocus獲得焦點(diǎn)時(shí)觸發(fā)onblur失去焦點(diǎn)時(shí)觸發(fā)onload頁(yè)面載入完畢后觸發(fā)2．事件調(diào)用（1）行內(nèi)綁定（2）動(dòng)態(tài)綁定四=2\*ROMAN、小結(jié)重點(diǎn)掌握J(rèn)avaScript的分支語(yǔ)句的語(yǔ)法、數(shù)據(jù)類(lèi)型轉(zhuǎn)換方法，常用的事件及事件調(diào)用方法。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例23中的微課，自學(xué)限時(shí)促銷(xiāo)的內(nèi)容。在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中引導(dǎo)學(xué)生遵循正確的代碼編寫(xiě)規(guī)范。教案23案例23限時(shí)促銷(xiāo)計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)了解面向?qū)ο蟮母拍钫莆諆?nèi)置對(duì)象Date的使用了解BOM對(duì)象的概念掌握window對(duì)象計(jì)時(shí)器的相關(guān)方法能力目標(biāo)能使用JavaScript編寫(xiě)代碼實(shí)現(xiàn)倒計(jì)時(shí)器會(huì)使用開(kāi)發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫(xiě)代碼中遵循正確的編寫(xiě)代碼規(guī)范在編寫(xiě)代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的Date對(duì)象window對(duì)象的定時(shí)器功能教學(xué)難點(diǎn)window對(duì)象的setInterval方法教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析與實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）案例描述圖23-1小米產(chǎn)品限時(shí)促銷(xiāo)創(chuàng)建小米產(chǎn)品的限時(shí)促銷(xiāo)頁(yè)面，運(yùn)行效果如圖23-1所示。具體要求如下。（1）通過(guò)腳本代碼設(shè)定限時(shí)促銷(xiāo)結(jié)束時(shí)間，將時(shí)間以時(shí)、分、秒的形式顯示到網(wǎng)頁(yè)中。（2）倒計(jì)時(shí)的時(shí)、分、秒都用兩位數(shù)顯示，不足兩位數(shù)時(shí)前面補(bǔ)0。案例分析在頁(yè)面上添加盒子，在盒子中添加四對(duì)<p>標(biāo)記，在<p>標(biāo)記中放入文字、圖像和<span>標(biāo)記等，將時(shí)、分、秒數(shù)值和時(shí)、分、秒之間的分隔符放入<span>標(biāo)記。定義盒子、<p>標(biāo)記和<span>標(biāo)記的樣式。創(chuàng)建腳本文件，編寫(xiě)JavaScript代碼，定義顯示時(shí)、分、秒的函數(shù)，使用window對(duì)象的setInterval()方法使函數(shù)每隔1s執(zhí)行一次。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．搭建結(jié)構(gòu)：<div

class="seckill">

<p>小米促銷(xiāo)專(zhuān)場(chǎng)</p>

<p><img

src="images/shandian.png"

width="49"

alt="圖片"></p>

<p>距離結(jié)束還有</p>

<p></span><span

id="second"></span></p></div>2．定義CSS樣式3．創(chuàng)建JavaScript腳本文件<script

type="text/javascript">

function

fresh()

{

//定義函數(shù)

var

endtime

=

new

Date("2023/01/29,23:59:59"); //促銷(xiāo)結(jié)束時(shí)間

var

nowtime

=

new

Date();

//當(dāng)前時(shí)間

var

leftsecond

=

parseInt((endtime.getTime()

-

nowtime.getTime())

/

1000); //剩余毫秒數(shù)

h

=

parseInt(leftsecond

/

3600);

//剩余小時(shí)數(shù)

m

=

parseInt((leftsecond

/

60)

%

60);

//剩余分鐘數(shù)

s

=

parseInt(leftsecond

%

60);

//剩余秒數(shù)

if

(h

<

10

&&

h

>=

0)

h

=

"0"

+

h;

//剩余如果不足10h，則前面補(bǔ)0

else

if

(h

<

0)

h

=

"00"

//剩余小時(shí)數(shù)為0時(shí)，顯示00

if

(m

<

10

&&

m

>=

0)

m

=

"0"

+

m;

//剩余如果不足10min，則前面補(bǔ)0

else

if

(m

<

0)

m

=

"00"

//剩余分鐘數(shù)為0時(shí)，顯示00

if

(s

<

10

&&

s

>=

0)

s

=

"0"

+

s;

//剩余如果不足10s，則前面補(bǔ)0

else

if

(s

<

0)

s

=

"00"

//剩余秒數(shù)為0時(shí)，顯示00

document.getElementById("hour").innerHTML

=

h;//顯示剩余小時(shí)數(shù)

document.getElementById("minute").innerHTML

=

m; //顯示剩余分鐘數(shù)

document.getElementById("second").innerHTML

=

s; //顯示剩余秒數(shù)

if

(leftsecond

<

0)

{

clearInterval(sh);

//停止倒計(jì)時(shí)

}

}

var

sh

=

setInterval("fresh()",

1000);

//每隔1s執(zhí)行一次fresh()函數(shù)

</script>第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、面向?qū)ο蠛?jiǎn)介1．對(duì)象概述2.內(nèi)置對(duì)象內(nèi)置對(duì)象說(shuō)明Math數(shù)學(xué)對(duì)象，用于實(shí)現(xiàn)數(shù)學(xué)運(yùn)算功能Date日期對(duì)象，用于定義日期對(duì)象String字符串對(duì)象，用于定義字符串對(duì)象和處理字符串Array數(shù)組對(duì)象，用于定義數(shù)組對(duì)象Number原始數(shù)值對(duì)象，可以在原始數(shù)值和對(duì)象之間轉(zhuǎn)換Boolean布爾值對(duì)象，用于將非布爾型的值轉(zhuǎn)換成布爾型的值（true或false）Object基類(lèi)，所有JavaScript內(nèi)置類(lèi)都是從基類(lèi)Object派生（繼承）出來(lái)的RegExp正則表達(dá)式對(duì)象，用于完成有關(guān)正則表達(dá)式的操作和功能Date對(duì)象1．創(chuàng)建Date對(duì)象①創(chuàng)建當(dāng)前時(shí)刻的Date()對(duì)象，例如，下面的代碼。var

now=new

Date();②創(chuàng)建指定日期的Date對(duì)象，例如，下面的代碼。var

date1

=

new

Date("2023-3-1");var

date1

=

new

Date("2023/3/1");var

date1

=

new

Date("2023,3,1");

③創(chuàng)建一個(gè)指定日期和時(shí)間的Date對(duì)象，例如，下面的代碼。var

date1=new

Date(“2023,3,1,10:20:30:50”);var

date1=new

Date(2023,3,1,10,20,30,50);2．Date對(duì)象的方法方法說(shuō)明get方法getDate()返回用本地時(shí)間表示的一個(gè)月中的日期值（1～31）getDay()返回用本地時(shí)間表示的一周中的星期值（0～6）getFullYear()返回用本地時(shí)間表示的4位數(shù)字的年份值（如2024）getHour()返回用本地時(shí)間表示的小時(shí)數(shù)（1～23）getMinutes()返回用本地時(shí)間表示的分鐘數(shù)（0～59）…………例<script

type="text/javascript">

var

now

=

new

Date();

//創(chuàng)建Date對(duì)象

var

week

=

now.getDay();

//獲取數(shù)字形式的星期幾

var

result;

switch

(week)

{

case

1:result

=

"星期一";break;

case

2:result

=

"星期二";break;

case

3:result

=

"星期三";break;

case

4:result

=

"星期四";break;

case

5:result

=

"星期五";break;

case

6:result

=

"星期六";break;

default:result

=

"星期日";break;

}

document.write("今天是"

+

result);

//輸出信息</script>BOM簡(jiǎn)介BOM簡(jiǎn)介瀏覽器對(duì)象模型（BrowserObjectModel，BOM）提供與瀏覽器交互的方法和接口。圖23-5BOM對(duì)象模型1．window對(duì)象方法描述alert()彈出警示對(duì)話框，顯示一條提示信息和一個(gè)“確定”按鈕confirm()彈出確認(rèn)對(duì)話框，顯示一條確認(rèn)信息、一個(gè)“確定”按鈕、一個(gè)“取消”按鈕prompt()彈出提示對(duì)話框，提示用戶輸入信息open()打開(kāi)一個(gè)新的瀏覽器窗口close()關(guān)閉瀏覽器窗口setInterval()按照指定的毫秒數(shù)來(lái)調(diào)用函數(shù)或執(zhí)行一段代碼setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或執(zhí)行一段代碼clearInterval()取消由setInterval()設(shè)置的效果clearTimeout()取消由setTimeout()設(shè)置的效果例23-2：使用confirm()方法彈出確認(rèn)對(duì)話框<script

type="text/javascript">

if(confirm("確定刪除嗎?")){

alert("確定!");

}else{

alert("不確定!");

}</script>2．定時(shí)器setInterval()方法：讓操作每隔一定時(shí)間間隔反復(fù)執(zhí)行setTimeout()方法：執(zhí)行一次后就停止操作，因此該方法可以實(shí)現(xiàn)延時(shí)操作。clearInterval()方法：取消定時(shí)器clearTimeout()方法：取消定時(shí)器例代碼略。四=2\*ROMAN、小結(jié)重點(diǎn)掌握Date對(duì)象的使用和定時(shí)器的setInterval()方法和setTimeout()方法的使用。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例24中的微課，提前學(xué)習(xí)輪播圖的內(nèi)容。在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中引導(dǎo)學(xué)生遵循正確的代碼編寫(xiě)規(guī)范。教案24案例24輪播圖計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握設(shè)置元素樣式的語(yǔ)法格式掌握獲取元素的尺寸和位置的語(yǔ)法格式掌握輪播圖的實(shí)現(xiàn)方法能力目標(biāo)能編寫(xiě)JavaScript代碼實(shí)現(xiàn)輪播圖效果會(huì)使用開(kāi)發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫(xiě)代碼中遵循正確的編寫(xiě)代碼規(guī)范在編寫(xiě)代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)設(shè)置元素樣式獲取或改變?cè)氐某叽绾臀恢媒虒W(xué)難點(diǎn)獲取或改變?cè)氐某叽绾臀恢媒虒W(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建小米產(chǎn)品廣告展示輪播圖，頁(yè)面瀏覽效果如圖24-1所示。具體要求如下。（1）輪流展示5張圖片，每隔2s切換一次。（2）切換圖片時(shí)有過(guò)渡效果。圖24-1輪播圖案例分析在頁(yè)面上添加盒子，在盒子中添加無(wú)序列表標(biāo)記<ul>，在<ul>標(biāo)記中添加6對(duì)<li>標(biāo)記，在每個(gè)<li>標(biāo)記中放入一張圖片，在最后的<li>標(biāo)記中再次放入第一張圖片，使圖片切換時(shí)實(shí)現(xiàn)無(wú)縫銜接。定義盒子、<ul>標(biāo)記、<li>標(biāo)記和<img>標(biāo)記的樣式。創(chuàng)建腳本文件，編寫(xiě)JavaScript代碼，定義切換圖片的函數(shù)，使用window對(duì)象的setInterval()方法使函數(shù)每隔2s執(zhí)行一次。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．搭建輪播圖結(jié)構(gòu)：<div

id="silder">

<ul

id="list">

<li><img

src="images/banner1.jpg"></li>

<li><img

src="images/banner2.jpg"></li>

<li><img

src="images/banner3.jpg"></li>

<li><img

src="images/banner4.jpg"></li>

<li><img

src="images/banner5.jpg"></li>

<

</ul></div>2．定義CSS樣式3．創(chuàng)建JavaScript腳本文件<script>

//第一輪結(jié)束，切換圖片時(shí)有從頭開(kāi)始的效果

var

slider

=

document.querySelector("#slider"); //獲取盒子元素

var

list

=

document.querySelector("#list");

//獲取ul元素

var

img

=

document.querySelector("img");

//獲取圖像集合

var

uli

=

list.children;

//獲取圖片列表

var

index

=

0;

//圖片序號(hào)

setInterval(move,

2000);

//每隔2s執(zhí)行一次move()函數(shù)

function

move()

{

if

(index

<

uli.length

-

1)

{

//如果不是最后一張圖片

index++;//圖片序號(hào)加1

list.style.left

=

-index

*

img.offsetWidth

+

"px";

//

圖片向左移出，offsetWidth是圖像的布局寬度

list.style.transition

=

'left

1s';

//移出圖片時(shí)有過(guò)渡效果,用時(shí)1s

if

(index

==

uli.length

-

1)

{

//如果是最后一張圖片，則切換到第一張圖片

setTimeout(function()

{

index

=

0;

//圖片變?yōu)榈谝粡?/p>

list.style.left

=

-index

*

img.offsetWidth

+

"px";

list.style.transition

=

'left

0s';

},

1000);

}

}

}</script>

第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）設(shè)置元素樣式對(duì)象.style.屬性="屬性值";例24-1通過(guò)腳本代碼設(shè)置盒子的樣式。圖24-3設(shè)置元素樣式<div

id="box1">學(xué)而時(shí)習(xí)之</div>

<script

type="text/javascript">

var

box

=

document.querySelector("#box1"); //獲取元素

box.style.width="200px";

//設(shè)置寬度

box.style.height="200px";

//設(shè)置高度

box.style.backgroundColor="#1D94FC";

//設(shè)置背景顏色

box.style.color

=

"#fff";

//設(shè)置文字的顏色

box.style.fontSize

=

"24px"

//設(shè)置文字大小</script>

獲取元素尺寸和位置屬性說(shuō)明offsetLeft獲取元素相對(duì)父元素左邊框的偏移量offsetTop獲取元素相對(duì)父元素上邊框的偏移量offsetWidth獲取元素自身的寬度，包括邊框和內(nèi)邊距offsetHeight獲取元素自身的高度，包括邊框和內(nèi)邊距例24-2實(shí)現(xiàn)滾動(dòng)文字效果。圖24-4滾動(dòng)文字效果搭建結(jié)構(gòu)：<div

class="box">

<ul>

<li>教育部、中央軍委政治工作部、軍委國(guó)防動(dòng)員部定向培養(yǎng)士官試點(diǎn)院校</li>

<li>電子信息產(chǎn)業(yè)國(guó)家高技能人才培訓(xùn)基地</li>

<li>國(guó)家示范性高職單獨(dú)招生試點(diǎn)院校</li>

<li>“3+2”對(duì)口貫通分段培養(yǎng)本科院校</li>

<li>國(guó)家級(jí)示范性軟件職業(yè)技術(shù)學(xué)院</li>

<li>全國(guó)信息產(chǎn)業(yè)系統(tǒng)先進(jìn)集體</li>

</ul>

</div>2．編寫(xiě)腳本代碼：<script>

//實(shí)現(xiàn)滾動(dòng)文字效果

var

speed

=

-1;

var

list

=

document.getElementsByTagName('ul')[0];

//獲取ul元素

var

item

=

document.getElementsByTagName('li');

//獲取li元素集合

list.innerHTML

=

list.innerHTML

+

list.innerHTML;

list.style.width

=

item[0].offsetWidth

*

item.length

+

'px';

//offsetWidth為元素的寬度（包括元素寬度、內(nèi)邊距和邊框，不包括外邊距）

function

move()

{

if

(list.offsetLeft

<

-list.offsetWidth

/

2)

{

//offsetLeft元素與父元素左邊的距離

list.style.left

=

0

+

"px";

}

list.style.left

=

list.offsetLeft

+

speed

+

'px';

}

setInterval(move,

30);

//每隔30ms移動(dòng)一次</script>三=2\*ROMAN、小結(jié)重點(diǎn)掌握J(rèn)avaScript的基本語(yǔ)法。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例22中的微課，自學(xué)簡(jiǎn)單計(jì)算器的內(nèi)容。在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中引導(dǎo)學(xué)生遵循正確的代碼編寫(xiě)規(guī)范。模塊六綜合案例本模塊通過(guò)小米商城網(wǎng)站和美麗山東網(wǎng)站2個(gè)綜合案例的實(shí)現(xiàn)，介紹網(wǎng)站開(kāi)發(fā)的完整流程。知識(shí)目標(biāo)：掌握網(wǎng)站規(guī)劃的方法；掌握使用HTML5+CSS3布局網(wǎng)頁(yè)方法；掌握使用JavaScript添加網(wǎng)頁(yè)動(dòng)態(tài)效果的方法。能力目標(biāo)：會(huì)對(duì)網(wǎng)站進(jìn)行統(tǒng)籌規(guī)劃，做好網(wǎng)站前期準(zhǔn)備工作；會(huì)熟練使用HTML5編輯網(wǎng)頁(yè)結(jié)構(gòu)代碼；會(huì)熟練使用CSS3編輯網(wǎng)頁(yè)樣式代碼；會(huì)熟練使用JavaScript編輯和調(diào)試腳本代碼。素質(zhì)目標(biāo)：培養(yǎng)整理規(guī)劃能力，具有大局意識(shí)；培養(yǎng)耐心細(xì)致、精益求精的工匠精神；培養(yǎng)文化自信和民族自豪感。教案25案例25小米商城網(wǎng)站（1）計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握HBuilderX軟件的基本操作；掌握浮動(dòng)與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁(yè)布局；掌握盒子的相關(guān)屬性，能夠制作常見(jiàn)的盒子模型效果；掌握J(rèn)avaScript語(yǔ)言的用法，能夠制作網(wǎng)頁(yè)中動(dòng)態(tài)和交互效果。能力目標(biāo)具有根據(jù)企業(yè)的需求進(jìn)行靜態(tài)頁(yè)面的設(shè)計(jì)與制作能力；具有熟練地進(jìn)行網(wǎng)站的制作、管理和維護(hù)的能力。素質(zhì)目標(biāo)樹(shù)立學(xué)生勤于動(dòng)手，獨(dú)立思考的觀念；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實(shí)際問(wèn)題的能力；在編寫(xiě)代碼中養(yǎng)成正確的代碼編寫(xiě)規(guī)范。教學(xué)重點(diǎn)CSS+DIV網(wǎng)頁(yè)布局；HTML5新增頁(yè)面元素應(yīng)用。教學(xué)難點(diǎn)JavaScript動(dòng)態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（前期工作、搭建主頁(yè)結(jié)構(gòu)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述制作小米商城網(wǎng)站，該網(wǎng)站由3個(gè)頁(yè)面構(gòu)成，分別為主頁(yè)、登錄頁(yè)和注冊(cè)頁(yè)，從主頁(yè)可以進(jìn)入登錄頁(yè)和注冊(cè)頁(yè)，從登錄頁(yè)和注冊(cè)頁(yè)可以返回主頁(yè)。主頁(yè)有輪播圖效果和限時(shí)促銷(xiāo)效果。網(wǎng)站瀏覽效果如圖25-1~圖25-3所示。圖25-1小米商城網(wǎng)站主頁(yè)圖25-2小米商城網(wǎng)站登錄頁(yè)圖25-3小米商城網(wǎng)站注冊(cè)頁(yè)二、前期工作1.收集素材2.新建項(xiàng)目3.創(chuàng)建樣式表文件三、制作網(wǎng)站主頁(yè)1.主頁(yè)結(jié)構(gòu)分析主頁(yè)由頭部、導(dǎo)航條、輪播圖、主體部分和版權(quán)信息等構(gòu)成，主體部分從上到下又細(xì)分為圖片展示、產(chǎn)品促銷(xiāo)、廣告圖片、手機(jī)、電視、視頻和售后服務(wù)部分，主頁(yè)結(jié)構(gòu)劃分如圖所示。2.編寫(xiě)主頁(yè)布局代碼學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時(shí)（制作主頁(yè)頭部）一、制作頭部1．案例分析頭部分為左、右兩部分，對(duì)每部分可以使用無(wú)序列表搭建結(jié)構(gòu)。鼠標(biāo)指針劃過(guò)“下載App”時(shí)，顯示二維碼，如圖25-7所示，對(duì)二維碼可以使用<img>標(biāo)記定義，通過(guò)定義樣式使二維碼隱藏，鼠標(biāo)指針劃過(guò)時(shí)再顯示。購(gòu)物車(chē)左側(cè)的圖標(biāo)使用字體庫(kù)中的圖標(biāo)字體。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部結(jié)構(gòu)代碼略。（2）定義頭部CSS樣式代碼略。二、制作導(dǎo)航條部分1．案例分析該部分內(nèi)容分為3部分：左側(cè)是Logo、中間是導(dǎo)航條目、右側(cè)是搜索框。對(duì)Logo使用<img>標(biāo)記定義，并給圖像添加超鏈接，鏈接到主頁(yè)。對(duì)導(dǎo)航條目使用無(wú)序列表來(lái)構(gòu)建。對(duì)右側(cè)的搜索框使用<input>標(biāo)記定義，按鈕使用<button>標(biāo)記定義，按鈕上面的放大鏡圖像使用字體庫(kù)中的圖標(biāo)字體。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建導(dǎo)航條結(jié)構(gòu)代碼略。（2）定義導(dǎo)航條CSS樣式代碼略。三=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站。在制作主頁(yè)時(shí)，按照從上到下的順序，完成頭部、導(dǎo)航條的制作，綜合利用了HTML5的各種標(biāo)記搭建頁(yè)面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁(yè)樣式。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)輪播圖和圖片展示部分以及產(chǎn)品促銷(xiāo)部分的制作。課前小組討論培養(yǎng)學(xué)生共同探討的協(xié)作意識(shí)和良好的溝通能力。通過(guò)小米商城網(wǎng)站的制作，增強(qiáng)國(guó)家認(rèn)同，樹(shù)立民族自信。任務(wù)完成中提高學(xué)生的空間布局能力。在編寫(xiě)代碼中養(yǎng)成正確的代碼編寫(xiě)規(guī)范。教案26案例25小米商城網(wǎng)站（2）計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握HBuilderX軟件的基本操作；掌握浮動(dòng)與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁(yè)布局；掌握盒子的相關(guān)屬性，能夠制作常見(jiàn)的盒子模型效果；掌握J(rèn)avaScript語(yǔ)言的用法，能夠制作網(wǎng)頁(yè)中動(dòng)態(tài)和交互效果。能力目標(biāo)具有根據(jù)企業(yè)的需求進(jìn)行靜態(tài)頁(yè)面的設(shè)計(jì)與制作能力；具有熟練地進(jìn)行網(wǎng)站的制作、管理和維護(hù)的能力。素質(zhì)目標(biāo)樹(shù)立學(xué)生勤于動(dòng)手，獨(dú)立思考的觀念；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實(shí)際問(wèn)題的能力；在編寫(xiě)代碼中養(yǎng)成正確的代碼編寫(xiě)規(guī)范。教學(xué)重點(diǎn)CSS+DIV網(wǎng)頁(yè)布局；HTML5新增頁(yè)面元素應(yīng)用。教學(xué)難點(diǎn)JavaScript動(dòng)態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（制作輪播圖、圖片展示部分）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、制作輪播圖部分1．案例分析將所有內(nèi)容放入一個(gè)大盒子，將兩側(cè)的箭頭分別放入兩個(gè)小盒子，對(duì)下面的圓點(diǎn)和圖像都使用無(wú)序列表標(biāo)記<ul>定義。對(duì)盒子中的內(nèi)容采用絕對(duì)定位，定位到大盒子的指定位置。2．案例實(shí)現(xiàn)（1）搭建輪播圖結(jié)構(gòu)學(xué)生同步操作，做學(xué)教一體（2）鏈接輪播圖部分的樣式表文件css.css和腳本文件index.js學(xué)生已觀看微課，略講二、制作圖片展示部分1．案例分析圖片展示部分分為4個(gè)塊，需要定義一個(gè)大盒子，在大盒子中再定義4個(gè)子盒子。對(duì)第一個(gè)塊使用無(wú)序列表搭建結(jié)構(gòu)，第一個(gè)塊中的小圖標(biāo)使用字體庫(kù)中的相應(yīng)圖標(biāo)字體。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建圖片展示部分結(jié)構(gòu)代碼略。（2）定義圖片展示部分CSS樣式代碼略。第2學(xué)時(shí)（制作產(chǎn)品促銷(xiāo)部分）一、制作產(chǎn)品促銷(xiāo)部分1．案例分析對(duì)該部分需要定義一個(gè)盒子，在盒子中用無(wú)序列表構(gòu)建每個(gè)塊的內(nèi)容。每個(gè)塊中相同的樣式可以同時(shí)定義，不同的樣式分別定義。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建產(chǎn)品促銷(xiāo)部分結(jié)構(gòu)代碼略。（2）定義產(chǎn)品促銷(xiāo)部分CSS樣式代碼略。二=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站輪播圖、圖片展示部分以及產(chǎn)品促銷(xiāo)部分的制作，綜合利用了HTML5的各種標(biāo)記搭建頁(yè)面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁(yè)樣式。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)制作廣告圖片和手機(jī)部分、制作廣告圖片和電視部分、視頻以及售后服務(wù)部分的制作。課前小組討論過(guò)程中，培養(yǎng)學(xué)生共同探討的協(xié)作意識(shí)和良好的溝通能力。在編寫(xiě)代碼中養(yǎng)成正確的代碼編寫(xiě)規(guī)范。面對(duì)復(fù)雜的設(shè)計(jì)，培養(yǎng)學(xué)生不懼困難、迎難而上，解決問(wèn)題的能力。教案27案例25小米商城網(wǎng)站（3）計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握HBuilderX軟件的基本操作；掌握浮動(dòng)與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁(yè)布局；掌握盒子的相關(guān)屬性，能夠制作常見(jiàn)的盒子模型效果；掌握J(rèn)avaScript語(yǔ)言的用法，能夠制作網(wǎng)頁(yè)中動(dòng)態(tài)和交互效果。能力目標(biāo)具有根據(jù)企業(yè)的需求進(jìn)行靜態(tài)頁(yè)面的設(shè)計(jì)與制作能力；具有熟練地進(jìn)行網(wǎng)站的制作、管理和維護(hù)的能力。素質(zhì)目標(biāo)樹(shù)立學(xué)生勤于動(dòng)手，獨(dú)立思考的觀念；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實(shí)際問(wèn)題的能力；在編寫(xiě)代碼中養(yǎng)成正確的代碼編寫(xiě)規(guī)范。教學(xué)重點(diǎn)CSS+DIV網(wǎng)頁(yè)布局；HTML5新增頁(yè)面元素應(yīng)用。教學(xué)難點(diǎn)JavaScript動(dòng)態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（制作廣告圖片和手機(jī)部分）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、制作廣告圖片和手機(jī)部分1．案例分析廣告圖片和手機(jī)部分由兩個(gè)塊構(gòu)成，上面的塊存放廣告圖片；下面的塊又分為左右兩部分，左邊的部分存放一張圖片，右邊的部分存放8張手機(jī)圖片，8張手機(jī)圖片采用無(wú)序列表搭建結(jié)構(gòu)。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建廣告圖片和手機(jī)部分結(jié)構(gòu)代碼略。（2）定義廣告圖片和手機(jī)部分CSS樣式代碼略。二、制作廣告圖片和電視部分1．案例分析廣告圖片和電視部分由兩個(gè)塊構(gòu)成，上面的塊存放廣告圖片；下面的塊又分為左右兩部分，左邊的部分存放一張圖片，右邊的部分存放4張電視圖片，4張電視圖片采用無(wú)序列表搭建結(jié)構(gòu)。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建廣告圖片和電視結(jié)構(gòu)代碼略。（2）定義廣告圖片和電視CSS樣式代碼略。第2學(xué)時(shí)（制作視頻、售后服務(wù)部分）一、制作視頻部分1．案例分析視頻部分其實(shí)也是4張圖片的展示，單擊圖片時(shí)播放視頻。但這里對(duì)圖片創(chuàng)建了空鏈接，不能播放視頻。視頻部分需要定義一個(gè)盒子，盒子中的4個(gè)塊使用無(wú)序列表搭建結(jié)構(gòu)，每個(gè)列表項(xiàng)中包含圖片和文字。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建視頻部分結(jié)構(gòu)代碼略。（2）定義視頻部分CSS樣式代碼略。二、制作售后服務(wù)部分1．案例分析售后服務(wù)部分是主體部分中最下面的部分。售后服務(wù)部分需要定義一個(gè)盒子，盒子中的內(nèi)容使用無(wú)序列表搭建結(jié)構(gòu)，每個(gè)列表項(xiàng)中包含圖標(biāo)和文字。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建售后服務(wù)部分結(jié)構(gòu)代碼略。（2）定義售后服務(wù)部分CSS樣式代碼略。三、制作版權(quán)信息部分1．案例分析版權(quán)信息部分是主頁(yè)最下面的部分。版權(quán)信息部分為通欄顯示，也就是與瀏覽器一樣寬，內(nèi)容占的寬度是1200px。因此需要一個(gè)大盒子，里面再嵌套小盒子。小盒子中包含上、下兩個(gè)塊，上面的塊又分為左、右兩個(gè)塊，左面的塊存放文字內(nèi)容，右面的塊存放小米Logo圖像；下面的塊存放一行文字。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建版權(quán)信息部分結(jié)構(gòu)代碼略。（2）定義版權(quán)信息部分CSS樣式代碼略。四=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站廣告圖片和手機(jī)部分、廣告圖片和電視部分、視頻以及售后服務(wù)、版權(quán)信息部分的制作，綜合利用了HTML5的各種標(biāo)記搭建頁(yè)面結(jié)構(gòu)，使用了CSS3定義網(wǎng)頁(yè)樣式。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例25中的微課，學(xué)習(xí)輪播網(wǎng)站登錄頁(yè)和網(wǎng)站注冊(cè)頁(yè)的制作。課前小組討論培養(yǎng)學(xué)生共同探討的協(xié)作意識(shí)和良好的溝通能力。在編寫(xiě)代碼中培養(yǎng)耐心細(xì)致、精益求精的工匠精神。通過(guò)代碼編寫(xiě)過(guò)程，逐步激發(fā)學(xué)生的求知欲，養(yǎng)成遇到問(wèn)題解決問(wèn)題的能力，提高抗挫折能力。教案28案例25小米商城網(wǎng)站（4）計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握HBuilderX軟件的基本操作；掌握浮動(dòng)與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁(yè)布局；掌握盒子的相關(guān)屬性，能夠制作常見(jiàn)的盒子模型效果；掌握J(rèn)avaScript語(yǔ)言的用法，能夠制作網(wǎng)頁(yè)中動(dòng)態(tài)和交互效果。能力目標(biāo)具有根據(jù)企業(yè)的需求進(jìn)行靜態(tài)頁(yè)面的設(shè)計(jì)與制作能力；具有熟練地進(jìn)行網(wǎng)站的制作、管理和維護(hù)的能力。素質(zhì)目標(biāo)樹(shù)立學(xué)生勤于動(dòng)手，獨(dú)立思考的觀念；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實(shí)際問(wèn)題的能力；在編寫(xiě)代碼中養(yǎng)成正確的代碼編寫(xiě)規(guī)范。教學(xué)重點(diǎn)CSS+DIV網(wǎng)頁(yè)布局；HTML5新增頁(yè)面元素應(yīng)用。教學(xué)難點(diǎn)JavaScript動(dòng)態(tài)交互效果。教學(xué)模式教學(xué)做一體化；線上+線下混合式教學(xué)。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（制作網(wǎng)站登錄頁(yè)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、制作網(wǎng)站登錄頁(yè)1．案例分析網(wǎng)站登錄頁(yè)的頭部和版權(quán)信息同主頁(yè)。內(nèi)容部分分左、右2個(gè)部分，左側(cè)圖片使用<aside>標(biāo)記定義，右側(cè)表單使用<div>、<form>標(biāo)記定義，表單內(nèi)使用<h1>標(biāo)記定義標(biāo)題、使用<p>、<input>標(biāo)記定義各表單項(xiàng)、表單控件。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部結(jié)構(gòu)代碼略。（2）定義頭部CSS樣式代碼略。第2學(xué)時(shí)（制作網(wǎng)站注冊(cè)頁(yè)）一、制作網(wǎng)站注冊(cè)頁(yè)1．案例分析網(wǎng)站注冊(cè)頁(yè)結(jié)構(gòu)和樣式與登錄頁(yè)類(lèi)似，此處略講。2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部結(jié)構(gòu)代碼略。（2）定義頭部CSS樣式代碼略。二=2\*ROMAN、小結(jié)本案例介紹了制作小米商城網(wǎng)站登錄頁(yè)和注冊(cè)頁(yè)2個(gè)子頁(yè)面。在制作過(guò)程中，綜合利用了HTML5標(biāo)記和CSS3樣式完成了對(duì)表單的制作和樣式定義。通過(guò)該案例的學(xué)習(xí)，同學(xué)們可以學(xué)會(huì)時(shí)下流行的電商網(wǎng)站的開(kāi)發(fā)流程和制作技術(shù)。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例26中的微課，學(xué)習(xí)美麗山東網(wǎng)站的設(shè)計(jì)思路。課前小組討論培養(yǎng)學(xué)生共同探討的協(xié)作意識(shí)和良好的溝通能力。在編寫(xiě)代碼中養(yǎng)成正確的代碼編寫(xiě)規(guī)范。登錄和注冊(cè)頁(yè)面的形式是多樣的，鼓勵(lì)學(xué)生獨(dú)立自主，勇于創(chuàng)新。教案29案例26美麗山東網(wǎng)站（1）計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握網(wǎng)站開(kāi)發(fā)的一般流程，了解Web發(fā)展歷史及其未來(lái)方向；掌握浮動(dòng)與定位布局的使用技巧，能夠運(yùn)用CSS+DIV為網(wǎng)頁(yè)布局；掌握CSS3的高級(jí)應(yīng)用，實(shí)現(xiàn)過(guò)渡、變形、翻轉(zhuǎn)效果；掌握CSS3動(dòng)畫(huà)屬性實(shí)現(xiàn)圖片輪播設(shè)計(jì)。能力目標(biāo)具有根據(jù)企業(yè)的需求撰寫(xiě)企業(yè)網(wǎng)站建設(shè)、規(guī)劃的能力；具有運(yùn)用所學(xué)知識(shí)與技能進(jìn)行Web前端開(kāi)發(fā)與制作的能力。素質(zhì)目標(biāo)培養(yǎng)和提高學(xué)生感受美、表現(xiàn)美和創(chuàng)造美的能力；培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，提高分析和解決實(shí)際問(wèn)題的能力；樹(shù)立學(xué)生自主學(xué)習(xí)和終生學(xué)習(xí)的觀念。教學(xué)重點(diǎn)圖片切片工具；CSS3過(guò)渡、變形、翻轉(zhuǎn)及動(dòng)畫(huà)屬性應(yīng)用。教學(xué)難點(diǎn)CSS3屬性高級(jí)應(yīng)用。教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析、網(wǎng)站規(guī)劃）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述設(shè)計(jì)并制作美麗山東網(wǎng)站，該網(wǎng)站由3個(gè)頁(yè)面構(gòu)成，包括主頁(yè)、初識(shí)山東頁(yè)和景點(diǎn)詳情頁(yè)，從主頁(yè)可以進(jìn)入其他頁(yè)面，從其他頁(yè)面可以返回主頁(yè)。其中，主頁(yè)有使用CSS實(shí)現(xiàn)的輪播圖效果，初識(shí)山東頁(yè)有視頻播放效果，網(wǎng)站瀏覽效果如圖26-1～圖26-3所示。圖26-1美麗山東網(wǎng)站主頁(yè)圖26-2初識(shí)山東頁(yè)圖26-3景點(diǎn)詳情頁(yè)二、網(wǎng)站規(guī)劃1．網(wǎng)站需求分析設(shè)計(jì)美麗山東網(wǎng)站，旨在讓任何人在任何時(shí)間、任何地點(diǎn)都能借助網(wǎng)絡(luò)快速了解和品讀山東的歷史文化，同時(shí)為廣大游客提供詳細(xì)、準(zhǔn)確、全面的旅游信息，如文旅資訊、專(zhuān)題推介等。在內(nèi)容組織上要做到條理清晰、簡(jiǎn)單易懂，能夠讓用戶快速查找到相關(guān)信息。2.網(wǎng)站的風(fēng)格定位3.規(guī)劃草圖4.素材準(zhǔn)備學(xué)生同步操作，做學(xué)教一體（1）選擇切片工具（2）繪制切片區(qū)域（3）導(dǎo)出切片（4）存儲(chǔ)圖片三、制作網(wǎng)站主頁(yè)1.新建項(xiàng)目2.創(chuàng)建樣式表文件3.主頁(yè)效果圖分析（1）HTML結(jié)構(gòu)分析（2）CSS樣式分析4.頁(yè)面整體布局主頁(yè)整體結(jié)構(gòu)代碼編寫(xiě)學(xué)生同步操作，做學(xué)教一體5.定義公共樣式學(xué)生同步操作，做學(xué)教一體打開(kāi)樣式文件index.css，編寫(xiě)通用樣式代碼6.鏈接外部樣式表第2學(xué)時(shí)（制作頭部和導(dǎo)航條、輪播圖）一、制作頭部和導(dǎo)航條1．分析效果圖網(wǎng)頁(yè)的頭部分為左（Logo）、右（導(dǎo)航條）2個(gè)部分，可對(duì)導(dǎo)航條的結(jié)構(gòu)使用無(wú)序列表來(lái)搭建。當(dāng)鼠標(biāo)指針懸停于導(dǎo)航條中的各個(gè)導(dǎo)航條目時(shí)，改變文本顏色和邊框。2．代碼實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體（1）搭建頭部和導(dǎo)航條結(jié)構(gòu)代碼略。（2）定義頭部和導(dǎo)航條CSS樣式代碼略。二、制作輪播圖1．分析效果圖觀察效果圖，可以看出只需在該盒子內(nèi)再添加1個(gè)包容所有圖片的盒子。每隔30s的時(shí)間

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論