版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第01周—第1/25頁(yè)
《HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局》課程教案
授課教師：授課班級(jí)：地點(diǎn)：周課時(shí)：5課時(shí)
網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)
章節(jié)
Dreamweaver軟件介紹及其基礎(chǔ)操作
內(nèi)容
HTML基礎(chǔ)知識(shí)及常用標(biāo)記
教學(xué)1)使學(xué)生了解網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)基礎(chǔ)知識(shí)；
目標(biāo)2)使學(xué)生熟悉Dreamweaver軟件界面的基本操作方法。
重點(diǎn)1)了解網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念和網(wǎng)頁(yè)的類型；
難點(diǎn)2)熟練掌握Dreamweaver軟件創(chuàng)建和管理站點(diǎn)的方法。
教學(xué)
課堂講授、案例講解與指導(dǎo)
方法
教學(xué)
計(jì)算機(jī)機(jī)房
環(huán)境
時(shí)間
教學(xué)過(guò)程及內(nèi)容提要備注
分配
一、引入
1、相互認(rèn)識(shí)，提出與本學(xué)科相關(guān)的知識(shí)，介紹本門課程情況、教學(xué)內(nèi)約15分鐘
容及總學(xué)時(shí)數(shù)進(jìn)度安排，宣講本課程教學(xué)紀(jì)律，鼓勵(lì)學(xué)生營(yíng)造一種
學(xué)習(xí)氛圍，尊重同學(xué)，互幫互學(xué)，真正達(dá)到學(xué)以致用；
2、提出問(wèn)題：上過(guò)網(wǎng)吧？有誰(shuí)自學(xué)過(guò)網(wǎng)頁(yè)設(shè)計(jì)？聽(tīng)說(shuō)過(guò)HTML或者CSS
這兩個(gè)概念嗎？
教二、告知學(xué)生課堂任務(wù)
本次課所學(xué)習(xí)的主要內(nèi)容是HTML相關(guān)基礎(chǔ)知識(shí)和Dreamweaver軟
學(xué)件基礎(chǔ)操作；
過(guò)三、逐步演示講解分析教學(xué)內(nèi)容
1、網(wǎng)站和網(wǎng)頁(yè)的區(qū)別：約35分鐘學(xué)生理解
程（1）網(wǎng)頁(yè)是Internet基本元素；
（2）網(wǎng)站由網(wǎng)頁(yè)組成；
設(shè)2、靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)：
靜態(tài)網(wǎng)頁(yè)：純粹HTML語(yǔ)言格式的網(wǎng)頁(yè)通常被稱為靜態(tài)網(wǎng)頁(yè)，靜態(tài)
計(jì)網(wǎng)頁(yè)的后綴名通常為.htm、.html、.shtml、.xml。
動(dòng)態(tài)網(wǎng)頁(yè)：許多人認(rèn)為網(wǎng)頁(yè)會(huì)動(dòng)就是動(dòng)態(tài)網(wǎng)頁(yè)，這是個(gè)錯(cuò)誤的觀點(diǎn)，
在靜態(tài)的網(wǎng)頁(yè)中也可以含有動(dòng)態(tài)的圖片，這僅僅是視覺(jué)上的動(dòng)態(tài)罷
了。真正的動(dòng)態(tài)網(wǎng)頁(yè)是指實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)
文件，只有當(dāng)用戶請(qǐng)求時(shí)服務(wù)器才返回一個(gè)完整的網(wǎng)頁(yè)。也就是說(shuō)，
它是返回到了客戶端上的網(wǎng)頁(yè)。例如網(wǎng)頁(yè)文件是以ASP、PHP、JSP、
ASPX為結(jié)尾就是動(dòng)態(tài)的網(wǎng)頁(yè)了。
靜態(tài)網(wǎng)頁(yè)的特點(diǎn)：
（1）內(nèi)容相對(duì)穩(wěn)定，容易被搜索引擎檢索到；
第01周—第2/25頁(yè)
（2）沒(méi)有數(shù)據(jù)庫(kù)支持，在網(wǎng)站制作和維護(hù)方面工作量大；
（3）交互性差，在功能方面有很大的限制。
動(dòng)態(tài)網(wǎng)頁(yè)的特點(diǎn)：
（1）以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可大大降低網(wǎng)站維護(hù)的工作量；
（2）可實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、新聞發(fā)布、在線留言等；
（3）不利于使用搜索引擎進(jìn)行網(wǎng)站推廣。
3、常見(jiàn)網(wǎng)頁(yè)類型：形象頁(yè)、主頁(yè)、欄目頁(yè)、內(nèi)頁(yè)、新聞詳細(xì)頁(yè)等；
4、網(wǎng)頁(yè)設(shè)計(jì)原則：
（1）了解客戶需求
（2）遵循Web標(biāo)準(zhǔn)
（3）運(yùn)用形式美法則
5、網(wǎng)頁(yè)設(shè)計(jì)流程：
（1）手繪效果圖：確定網(wǎng)頁(yè)主題內(nèi)容和風(fēng)格
（2）設(shè)計(jì)效果圖：搜集、整合設(shè)計(jì)所需素材
（3）版面編輯：網(wǎng)頁(yè)的制作與實(shí)現(xiàn)
（4）網(wǎng)頁(yè)美化：動(dòng)畫(huà)設(shè)計(jì)，網(wǎng)頁(yè)測(cè)試和發(fā)布
6、網(wǎng)頁(yè)設(shè)計(jì)的主要軟件：
（1）Photoshop
（2）Dweamveawer
（3）Flash
（4）Firworks
7、HTML基礎(chǔ)知識(shí)：約20分鐘學(xué)生熟記
（1）HTML概念：HyperTextMarkupLanguage超文本標(biāo)識(shí)語(yǔ)言；
（2）HTML文檔的編寫(xiě)方法：用記事本手工直接編寫(xiě)、使用可視化
HTML編輯器Dreamweaver、由Web服務(wù)器動(dòng)態(tài)生成；
（3）網(wǎng)頁(yè)文件命名：首頁(yè)文件名默認(rèn)為：index.htm或
index.html；
（4）HTML文件結(jié)構(gòu)：
<HTML>
<HEAD>
<title></title>
</HEAD>
<BODY>
HTML文件的正文
</BODY>
</HTML>
（5）用編輯器手工編寫(xiě)第一張網(wǎng)頁(yè)；
8、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約30分鐘學(xué)生實(shí)踐
9、Dreamweaver軟件界面介紹：約20分鐘
（1）軟件面板組成及基本操作方法
（2）軟件首選參數(shù)設(shè)置
10、Dreamweaver站點(diǎn)創(chuàng)建：
站點(diǎn)->新建站點(diǎn)->設(shè)置站點(diǎn)名稱->設(shè)置站點(diǎn)默認(rèn)圖像文件夾。
11、學(xué)生實(shí)訓(xùn)操作：Dreamweaver站點(diǎn)創(chuàng)建與設(shè)置；約20分鐘學(xué)生實(shí)踐
12、Dreamweaver創(chuàng)建第一個(gè)網(wǎng)頁(yè)：約20分鐘
（1)名稱：index.html
第01周—第3/25頁(yè)
（2)設(shè)置標(biāo)題、輸入文本、輸入特殊字符
（3）頁(yè)面屬性設(shè)置
（4）預(yù)覽網(wǎng)頁(yè)
13、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約30分鐘學(xué)生實(shí)踐
14、HTML常用標(biāo)記：約20分鐘
（1）標(biāo)題標(biāo)記：<h#>主題文字</h#>
（2）段落標(biāo)記：<p>這里表示段落</p>
（3）換行與注釋：<br>、<!--這里放注釋-->
（4）粗體與斜體：<b>粗體</b>、<i>斜體</i>
（5）刪除線與下劃線：<s>刪除線</s>、<u>下劃線</u>
（6）上標(biāo)與下標(biāo)：<sup>上標(biāo)</sup><sub>下標(biāo)</sub>
15、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約30分鐘學(xué)生實(shí)踐
16、字體標(biāo)記：約20分鐘
（1）字體大?。?lt;fontsize="1">字體大小</font>
（2）字體顏色：<fontcolor="">字體顏色</font>
（3）設(shè)置標(biāo)題字體：<h#>主題文字</h#>
（4）物理字體：
<B>…</B>，將字符設(shè)置成粗體。
<I>…</I>，將字符設(shè)置成斜體。
<U>…</U>，給字符增加下劃線。
<S>…</S>，給字符增加刪除線。
<TT>…</TT>，將字符設(shè)置成打字機(jī)字體。
<SUP>…</SUP>，將字符設(shè)置成上標(biāo)字體。
<SUB>…</SUB>，將字符設(shè)置成下標(biāo)字體。
（5）邏輯字體：
<EM>…</EM>強(qiáng)調(diào)文字。
<STRONG>…</STRONG>字體加重。
<CODE>…</CODE>顯示編程代碼。
<SAMP>…</SAMP>顯示示例文字。
<KBD>…</KBD>顯示鍵盤按鍵文字。
<SMALL>…</SMALL>縮小文字。
<BIG>…</BIG>放大文字。
17、字體標(biāo)記實(shí)例講解；約20分鐘
18、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約40分鐘學(xué)生實(shí)踐
四、課外作業(yè)
第3章上機(jī)實(shí)踐。
五、課堂小結(jié)總結(jié)
本次課主要內(nèi)容：
1、網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)；
2、Dreamweaver基本使用方法；
3、HTML基礎(chǔ)知識(shí)及常用標(biāo)記；
后
第01周—第4/25頁(yè)
記
第01周—第5/25頁(yè)
《HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局》課程教案
授課教師：授課班級(jí)：地點(diǎn)：周課時(shí)：5課時(shí)
文字布局
章節(jié)
插入圖像
內(nèi)容
超級(jí)鏈接
教學(xué)3)使學(xué)生熟練掌握HTML常用標(biāo)記的基本使用方法；
目標(biāo)4)使學(xué)生掌握HTML常用標(biāo)記各種屬性的含義和設(shè)置方法。
重點(diǎn)3)掌握各種HTML常用標(biāo)記的基本使用方法；
難點(diǎn)4)熟記各種HTML常用標(biāo)記的含義。
教學(xué)
課堂講授、案例講解與指導(dǎo)
方法
教學(xué)
計(jì)算機(jī)機(jī)房
環(huán)境
時(shí)間
教學(xué)過(guò)程及內(nèi)容提要備注
分配
六、引入
3、回顧上周所學(xué)內(nèi)容：上周主要介紹了網(wǎng)頁(yè)設(shè)計(jì)和HTML相關(guān)基礎(chǔ)知約10分鐘
識(shí)及Dreamweaver軟件基礎(chǔ)操作，重點(diǎn)介紹了HTML基礎(chǔ)知識(shí)及
常用標(biāo)記；
4、提出問(wèn)題：網(wǎng)頁(yè)中文字如何布局？如何在網(wǎng)頁(yè)中插入圖像？如何運(yùn)
用超級(jí)鏈接？
教七、告知學(xué)生課堂任務(wù)
本次課所學(xué)習(xí)的主要內(nèi)容是HTML文字布局和插入圖像、超級(jí)鏈接
學(xué)的標(biāo)記應(yīng)用。
過(guò)八、逐步演示講解分析教學(xué)內(nèi)容
19、換行控制：文字一<p>、文字二<br/>約30分鐘學(xué)生理解
程20、不換行控制：<nobr></nobr>
21、文字對(duì)齊：align="#"、<center>居中</center>
設(shè)22、設(shè)置段落：<p>段落一</p>、<p>段落二</p>
23、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約30分鐘
計(jì)24、上周課外作業(yè)點(diǎn)評(píng)；約40分鐘
25、無(wú)序列表：約20分鐘
<ul>
<li>表項(xiàng)一</li>
<li>表項(xiàng)…</li>
</ul>
26、有序列表：
<ol>
<li>表項(xiàng)一</li>
第01周—第6/25頁(yè)
<li>表項(xiàng)…</li>
</ol>
27、欲格式化文本：<pre>文字</pre>、<xmp>文本</xmp>
28、計(jì)算機(jī)輸出格式：
<code>代碼樣式小型固定寬度字體顯示的文本</code>
<kbd>代碼樣式固定寬度字體渲染</kbd>
<tt>代碼樣式固定寬度字體渲染文本</tt>
<var>代碼樣式斜體字渲染</var>
29、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約20分鐘學(xué)生實(shí)踐
30、在網(wǎng)頁(yè)中插入圖像：<imgsrc="cn.jpg">約30分鐘
31、圖像無(wú)法顯示時(shí)的提示信息：<imgsrc="cn.jpg"alt="風(fēng)景">
32、控制圖像的大小：
<imgsrc="cn.jpg"alt="風(fēng)景"width="400px"height="300px">
33、設(shè)置邊框：
<imgsrc="cn.jpg"alt="風(fēng)景"border="0px">
34、圖像的鏈接：
<ahref=""><imgsrc="cn.jpg"></a>
35、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約30分鐘學(xué)生實(shí)踐
36、圖像映射圖：<map></map>約20分鐘
37、文本與圖像對(duì)齊：<imgsrc="cn.jpg"align="middle">
38、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約30分鐘學(xué)生實(shí)踐
39、最簡(jiǎn)單的文字超鏈：<ahref="">文字鏈接</a>約30分鐘
40、超鏈網(wǎng)頁(yè)的打開(kāi)方式：_blank、_parent、_self、_top
41、鏈接的注釋：
<ahref=""title="網(wǎng)易網(wǎng)站">163網(wǎng)站</a>
42、設(shè)置圖片鏈接：<ahref=""><imgsrc=""></a>
43、設(shè)置錨點(diǎn)：<aname="錨點(diǎn)名">文章中的文字</a>
44、郵箱地址鏈接：
<ahref="mailto:">作者的郵箱</a>
45、相對(duì)路徑：
相對(duì)路徑是指這個(gè)文件在所在的位置與其他文件或文件夾的關(guān)系；
46、絕對(duì)路徑：
HTML絕對(duì)路徑（absolutepath）指帶域名的文件的完整路徑。
47、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約30分鐘學(xué)生實(shí)踐
九、課外作業(yè)
第6章上機(jī)實(shí)踐。
十、課堂小結(jié)總結(jié)
本次課主要內(nèi)容：
1、HTML文字布局；
2、HTML插入圖像；
3、HTML超級(jí)鏈接。
后
第01周—第7/25頁(yè)
記
第01周—第8/25頁(yè)
《HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局》課程教案
授課教師：授課班級(jí)：地點(diǎn)：周課時(shí)：5課時(shí)
章節(jié)表單的使用
內(nèi)容插入表格
教學(xué)5)使學(xué)生熟練掌握HTML常用標(biāo)記的基本使用方法；
目標(biāo)6)使學(xué)生掌握HTML常用標(biāo)記各種屬性的含義和設(shè)置方法。
重點(diǎn)5)掌握各種HTML常用標(biāo)記的基本使用方法；
難點(diǎn)6)熟記各種HTML常用標(biāo)記的含義。
教學(xué)
課堂講授、案例講解與指導(dǎo)
方法
教學(xué)
計(jì)算機(jī)機(jī)房
環(huán)境
時(shí)間
教學(xué)過(guò)程及內(nèi)容提要備注
分配
十一、引入
5、回顧上周所學(xué)內(nèi)容：上周主要介紹了HTML文字布局和插入圖像的約10分鐘
基本方法，重點(diǎn)介紹了超級(jí)鏈接的標(biāo)記應(yīng)用；
6、提出問(wèn)題：什么是表單？常見(jiàn)的表單有哪些？如何在網(wǎng)頁(yè)中使用表
格？
十二、告知學(xué)生課堂任務(wù)
教本次課所學(xué)習(xí)的主要內(nèi)容是HTML表單和表格的標(biāo)記應(yīng)用。
學(xué)十三、逐步演示講解分析教學(xué)內(nèi)容
48、表單基本語(yǔ)法：<form></form>、屬性action和method約30分鐘學(xué)生理解
過(guò)49、文本框：<inputtype="text">
50、密碼框：<inputtype="password">
程51、單選框：<inputtype="radio">
52、復(fù)選框：<inputtype="checkbox">
設(shè)53、按鈕設(shè)置：<inputtype="submit"value="按鈕提交">
54、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約40分鐘學(xué)生實(shí)踐
計(jì)55、上周課外作業(yè)點(diǎn)評(píng)；約30分鐘
56、下拉表：約20分鐘
<select>
<!—設(shè)置下拉表選項(xiàng)-->
<option>選項(xiàng)一</option>
<option>選項(xiàng)二</option>
<optionselected>選項(xiàng)三</option>
</select>絕對(duì)路徑
57、文本域：<textarea><!—文本域內(nèi)容--></textarea>
第01周—第9/25頁(yè)
58、表單應(yīng)用實(shí)例講解；約20分鐘
59、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約40分鐘學(xué)生實(shí)踐
60、表格基本語(yǔ)法：約30分鐘
<table></table>
<tr>標(biāo)簽對(duì)表示表行
<th>標(biāo)簽對(duì)表示表頭
<td>標(biāo)簽對(duì)表示表元
61、跨多行表元：Rowspan
62、跨多列表元：colspan
63、表格內(nèi)設(shè)置文字對(duì)齊：
對(duì)齊語(yǔ)法用align表示，后面接的值是left、center和right，
分別代表向左、居中和向右對(duì)齊復(fù)選框
64、表格在網(wǎng)頁(yè)中對(duì)齊：<tablealign=#></table>；
65、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約40分鐘學(xué)生實(shí)踐
66、表格應(yīng)用實(shí)例講解；約20分鐘
67、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約40分鐘學(xué)生實(shí)踐
十四、課外作業(yè)
第8章上機(jī)實(shí)踐。
十五、課堂小結(jié)
本次課主要內(nèi)容：總結(jié)
1、表單的使用；
2、插入表格；
3、表格應(yīng)用實(shí)例；
后
第01周—第10/25頁(yè)
記
第01周—第11/25頁(yè)
《HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局》課程教案
授課教師：授課班級(jí)：地點(diǎn)：周課時(shí)：5課時(shí)
網(wǎng)頁(yè)框架
章節(jié)
對(duì)象移動(dòng)屬性
內(nèi)容
多媒體對(duì)象應(yīng)用
教學(xué)7)使學(xué)生熟練掌握HTML常用標(biāo)記的基本使用方法；
目標(biāo)8)使學(xué)生掌握HTML常用標(biāo)記各種屬性的含義和設(shè)置方法。
重點(diǎn)7)掌握各種HTML常用標(biāo)記的基本使用方法；
難點(diǎn)8)熟記各種HTML常用標(biāo)記的含義。
教學(xué)
課堂講授、案例講解與指導(dǎo)
方法
教學(xué)
計(jì)算機(jī)機(jī)房
環(huán)境
時(shí)間
教學(xué)過(guò)程及內(nèi)容提要備注
分配
十六、引入
7、回顧上周所學(xué)內(nèi)容：上周主要介紹了HTML表單和表格的標(biāo)記應(yīng)用約10分鐘
方法，重點(diǎn)介紹了表單的應(yīng)用實(shí)例；
8、提出問(wèn)題：框架網(wǎng)頁(yè)如何創(chuàng)建？如何使網(wǎng)頁(yè)中的對(duì)象移動(dòng)？如何在
網(wǎng)頁(yè)中插入Flash、影片、聲音？
十七、告知學(xué)生課堂任務(wù)
教本次課所學(xué)習(xí)的主要內(nèi)容是HTML網(wǎng)頁(yè)框架和對(duì)象移動(dòng)屬性、多媒
體對(duì)象的標(biāo)記應(yīng)用。
學(xué)
十八、逐步演示講解分析教學(xué)內(nèi)容
過(guò)68、框架的基本語(yǔ)法：約20分鐘學(xué)生理解
<frameset></frameset>
程<frame></frame>
<framesetcols="25%,50%,25%">
設(shè)<framesrc="/">
<framesrc="/">
計(jì)<framesrc="/">
</frameset>
69、框架垂直分欄：
垂直分欄是在<frameset>中用cols表示跨多列表元，colspan
70、框架水平分欄：
水平分欄的語(yǔ)法用rows表示
71、設(shè)置不可調(diào)節(jié)框架大?。簄oresize
72、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約30分鐘學(xué)生實(shí)踐
73、上周課外作業(yè)點(diǎn)評(píng)；約30分鐘
第01周—第12/25頁(yè)
74、瀏覽器不支持框架：<noframes></noframes>約10分鐘
75、設(shè)置框架邊框：<framesetframeborder=#>
76、設(shè)置滾動(dòng)條：
設(shè)置滾動(dòng)條在是<frame>里面，用scrolling屬性
77、導(dǎo)航框架：
導(dǎo)航框架是在網(wǎng)頁(yè)框架的<frame>中加入name屬性，表示該
<frame>的名稱，然后通過(guò)用<a>標(biāo)記的鏈接，并用target的屬性
值等于<frame>的名稱；
78、內(nèi)聯(lián)框架：
內(nèi)聯(lián)框架存在<body></body>的單個(gè)HTML文件中，可以鏈接其他網(wǎng)
頁(yè)并顯示它，即在一個(gè)頁(yè)面中嵌入一個(gè)框架窗口來(lái)顯示另一個(gè)頁(yè)面
的內(nèi)容，叫做浮動(dòng)框架也稱內(nèi)聯(lián)框架；
79、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約20分鐘學(xué)生實(shí)踐
80、框架應(yīng)用實(shí)例講解；約20分鐘
81、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約40分鐘學(xué)生實(shí)踐
82、移動(dòng)屬性基本語(yǔ)法：<marquee>要移動(dòng)的對(duì)象</marquee>約20分鐘
83、文字的移動(dòng)設(shè)置：<marqueedirection=#>文字</marquee>
84、圖片移動(dòng)的設(shè)置：<marquee><imgsrc="仙境.gif"></marquee>
85、文本移動(dòng)的方向：<marqueedirection=up>向上移動(dòng)</marquee>
86、文本的滾動(dòng)循環(huán)；
87、文本的移動(dòng)速度：scrollamount設(shè)置移動(dòng)的速度
88、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約20分鐘學(xué)生實(shí)踐
89、網(wǎng)頁(yè)多媒體的基本語(yǔ)法：<embedsrc=urlloop="true|false">約10分鐘
90、隱藏面板的設(shè)置；
91、對(duì)齊方式：
align=top、bottom、center、baseline、left、right、texttop、
middle、absmiddle、absbottom
92、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約20分鐘學(xué)生實(shí)踐
93、移動(dòng)對(duì)象應(yīng)用實(shí)例講解；約30分鐘
94、多媒體對(duì)象應(yīng)用實(shí)例講解；
95、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約40分鐘學(xué)生實(shí)踐
十九、課外作業(yè)
第11章上機(jī)實(shí)踐。
二十、課堂小結(jié)總結(jié)
本次課主要內(nèi)容：
1、網(wǎng)頁(yè)框架；
2、對(duì)象移動(dòng)屬性；
3、多媒體對(duì)象應(yīng)用。
后
第01周—第13/25頁(yè)
記
第01周—第14/25頁(yè)
《HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局》課程教案
授課教師：授課班級(jí)：地點(diǎn)：周課時(shí)：5課時(shí)
章節(jié)CSS基礎(chǔ)知識(shí)
內(nèi)容CSS字體設(shè)置
教學(xué)9)使學(xué)生熟練掌握CSS常用樣式的創(chuàng)建方法；
目標(biāo)10)使學(xué)生掌握CSS常用樣式各種屬性的含義和設(shè)置方法。
重點(diǎn)9)掌握各種CSS常用樣式的基本使用方法；
難點(diǎn)10)熟記各種CSS常用樣式的含義。
教學(xué)
課堂講授、案例講解與指導(dǎo)
方法
教學(xué)
計(jì)算機(jī)機(jī)房
環(huán)境
時(shí)間
教學(xué)過(guò)程及內(nèi)容提要備注
分配
二十一、引入
9、回顧上周所學(xué)內(nèi)容：上周主要介紹了HTML網(wǎng)頁(yè)框架和多媒體對(duì)象標(biāo)記，約10分鐘
重點(diǎn)介紹了HTML對(duì)象移動(dòng)屬性設(shè)置方法；
10、提出問(wèn)題：什么是CSS？CSS有什么用？如何創(chuàng)建和使用CSS？
二十二、告知學(xué)生課堂任務(wù)
本次課所學(xué)習(xí)的主要內(nèi)容是CSS基礎(chǔ)知識(shí)和CSS字體樣式設(shè)置方法和
教技巧。
學(xué)二十三、逐步演示講解分析教學(xué)內(nèi)容
96、CSS相關(guān)基礎(chǔ)知識(shí)；約40分鐘
過(guò)97、CSS文件鏈接方式：學(xué)生理解
（1）內(nèi)聯(lián)定義：內(nèi)聯(lián)定義即是在對(duì)象的標(biāo)記內(nèi)，使用對(duì)象的style屬性
程定義適用其的樣式表屬性。
鏈入內(nèi)部CSS：<styletype="text/css">/*這里寫(xiě)CSS內(nèi)容*/</style>
設(shè)（2）鏈接外部CSS：
<linktype="text/css"rel="stylesheet"src="style.css">
計(jì)98、CSS在瀏覽器兼容性：
現(xiàn)在瀏覽器市場(chǎng)的主流瀏覽器主要是InternetExplorer（簡(jiǎn)稱IE）和
MozillaFirefox（簡(jiǎn)稱FF），網(wǎng)頁(yè)中的CSS因兩個(gè)瀏覽器支持不同，所
以對(duì)同一代碼會(huì)顯示不同的效果，那么為了達(dá)到網(wǎng)頁(yè)的風(fēng)格，有時(shí)要注
意哪個(gè)瀏覽器要寫(xiě)的CSS屬性支持如何。如果某一屬性只有一個(gè)瀏覽器
支持，那么另一瀏覽器對(duì)這屬性代碼就不起作用。
99、CSS選擇符：
CSS選擇符就是CSS樣式的名字，選擇符的命名規(guī)則可以使用英文字母
的大寫(xiě)與小寫(xiě)、數(shù)字、連字號(hào)、下劃線、冒號(hào)、句號(hào)，CSS選擇符只能
第01周—第15/25頁(yè)
以字母開(kāi)頭，選擇符在CSS中可分成多種，在本小節(jié)中只介紹常用的CSS
選擇符：HTML標(biāo)簽選擇符、ID選擇符和CLASS（類選擇符）選擇符。
100、CSS偽類和偽元素：偽類：偽類選擇符是基于一組預(yù)定義性質(zhì)的選擇
符，HTML元素可以占有這些預(yù)定義性質(zhì)。實(shí)際上這些性質(zhì)與class屬性
的功能是相同的，因此在CSS術(shù)語(yǔ)中，它們被稱作偽類。在對(duì)應(yīng)這些偽
類的標(biāo)記中，不存在真正的class屬性，相反，它們代表應(yīng)用到這些元
素的某些方面，或者是相對(duì)于該元素的瀏覽器用戶界面的狀態(tài)。
101、CSS常用單位：
em：（em，元素的字體的高度）。
ex：（x-height，字母"x"的高度）。
px：（像素，相對(duì)于屏幕的分辨率）。
絕對(duì)長(zhǎng)度單位：
in：（英寸，1英寸=2.54厘米）。
cm：（厘米，1厘米=10毫米）。
mm：（毫米，1米=1000毫米）。
pt：（點(diǎn)，1點(diǎn)=1/72英寸）。
pc：（帕，1帕=12點(diǎn)）。
102、上周課外作業(yè)點(diǎn)評(píng)；約40分鐘
103、學(xué)生實(shí)訓(xùn)及輔導(dǎo)；約60分鐘學(xué)生實(shí)踐
104、字體和字體顏色：font:font-style||font-variant||約50分鐘
font-weight||font-size||line-height||font-family
105、字體大?。篎ont-size，后面可接的參數(shù)值有：
xx-small|x-small|small|medium|large|x-large|xx-large|larger|sm
aller|length
106、字體重量：
Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600
|700|800|900
107、行距：line-height:#；
108、字體類型：Font-family:fontname；
109、行距：line-height:#；
110、間距與間隔：
word-spacing：normal|長(zhǎng)度單位、letter-spacing:normal|length
111、字體應(yīng)用實(shí)例講解；約40分鐘
112、學(xué)生實(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026寧夏寧東贏創(chuàng)供應(yīng)鏈有限公司招聘2人參考考試試題及答案解析
- 2026上半年安徽事業(yè)單位聯(lián)考蕪湖市招聘287人備考考試題庫(kù)及答案解析
- 2026年安徽礦業(yè)職業(yè)技術(shù)學(xué)院高職單招職業(yè)適應(yīng)性測(cè)試模擬試題及答案詳細(xì)解析
- 2026年甘肅衛(wèi)生職業(yè)學(xué)院?jiǎn)握芯C合素質(zhì)筆試參考題庫(kù)含詳細(xì)答案解析
- 2026年湖南高爾夫旅游職業(yè)學(xué)院?jiǎn)握芯C合素質(zhì)考試備考題庫(kù)含詳細(xì)答案解析
- 2026年保山中醫(yī)藥高等?？茖W(xué)校單招綜合素質(zhì)考試備考題庫(kù)含詳細(xì)答案解析
- 2026福建莆田市秀嶼區(qū)新任教師招聘16人考試重點(diǎn)題庫(kù)及答案解析
- 2026年安徽職業(yè)技術(shù)學(xué)院?jiǎn)握芯C合素質(zhì)筆試備考題庫(kù)含詳細(xì)答案解析
- 2026年貴州航天職業(yè)技術(shù)學(xué)院?jiǎn)握芯C合素質(zhì)筆試備考試題含詳細(xì)答案解析
- 2026年河南應(yīng)用技術(shù)職業(yè)學(xué)院?jiǎn)握芯C合素質(zhì)筆試備考試題含詳細(xì)答案解析
- 大采高綜采工作面操作規(guī)程
- 保密車間出入管理制度
- 肯德基副經(jīng)理養(yǎng)成課程
- 鐵路勞動(dòng)安全 課件 第四章 機(jī)務(wù)勞動(dòng)安全
- 智慧人社大數(shù)據(jù)綜合分析平臺(tái)整體解決方案智慧社保大數(shù)據(jù)綜合分析平臺(tái)整體解決方案
- 脊柱與四肢檢查課件
- 2024年河北省供銷合作總社招聘筆試參考題庫(kù)附帶答案詳解
- 宅基地及地上房屋確權(quán)登記申請(qǐng)審批表
- 醫(yī)療衛(wèi)生輿情課件
- 2024年甘肅省安全員A證考試題庫(kù)及答案
- 數(shù)據(jù)安全保護(hù)與隱私保護(hù)
評(píng)論
0/150
提交評(píng)論