《HTML+CSS網(wǎng)頁設計與布局》教案

上傳人：8*** IP屬地：湖北上傳時間：2022-04-27 格式：DOC 頁數(shù)：25 大?。?67KB 積分：30 舉報 版權申訴

已閱讀5頁，還剩20頁未讀，繼續(xù)免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

1、第01周第25/25頁HTML+CSS網(wǎng)頁設計與布局課程教案授課教師：授課班級：地點：周課時： 5 課時章節(jié)內(nèi)容網(wǎng)頁設計基礎知識Dreamweaver軟件介紹及其基礎操作HTML基礎知識及常用標記教學目標1) 使學生了解網(wǎng)頁設計的相關基礎知識；2) 使學生熟悉Dreamweaver軟件界面的基本操作方法。重點難點1) 了解網(wǎng)頁設計相關概念和網(wǎng)頁的類型；2) 熟練掌握Dreamweaver軟件創(chuàng)建和管理站點的方法。教學方法課堂講授、案例講解與指導教學環(huán)境計算機機房教學過程及內(nèi)容提要時間分配備注教學過程設計一、引入1、相互認識，提出與本學科相關的知識，介紹本門課程情況、教學內(nèi)容及總學時

2、數(shù)進度安排，宣講本課程教學紀律，鼓勵學生營造一種學習氛圍，尊重同學，互幫互學，真正達到學以致用；2、提出問題：上過網(wǎng)吧？有誰自學過網(wǎng)頁設計？聽說過HTML或者CSS這兩個概念嗎？二、告知學生課堂任務本次課所學習的主要內(nèi)容是HTML相關基礎知識和Dreamweaver軟件基礎操作；三、逐步演示講解分析教學內(nèi)容1、網(wǎng)站和網(wǎng)頁的區(qū)別：（1）網(wǎng)頁是Internet基本元素；（2）網(wǎng)站由網(wǎng)頁組成；2、靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁：靜態(tài)網(wǎng)頁：純粹HTML語言格式的網(wǎng)頁通常被稱為靜態(tài)網(wǎng)頁，靜態(tài)網(wǎng)頁的后綴名通常為.htm、.html、.shtml、.xml。動態(tài)網(wǎng)頁：許多人認為網(wǎng)頁會動就是動態(tài)網(wǎng)頁，這是個錯誤

3、的觀點，在靜態(tài)的網(wǎng)頁中也可以含有動態(tài)的圖片，這僅僅是視覺上的動態(tài)罷了。真正的動態(tài)網(wǎng)頁是指實際上并不是獨立存在于服務器上的網(wǎng)頁文件，只有當用戶請求時服務器才返回一個完整的網(wǎng)頁。也就是說，它是返回到了客戶端上的網(wǎng)頁。例如網(wǎng)頁文件是以ASP、PHP、JSP、ASPX為結尾就是動態(tài)的網(wǎng)頁了。靜態(tài)網(wǎng)頁的特點：（1）內(nèi)容相對穩(wěn)定，容易被搜索引擎檢索到；（2）沒有數(shù)據(jù)庫支持，在網(wǎng)站制作和維護方面工作量大；（3）交互性差，在功能方面有很大的限制。動態(tài)網(wǎng)頁的特點：（1）以數(shù)據(jù)庫技術為基礎，可大大降低網(wǎng)站維護的工作量；（2）可實現(xiàn)更多的功能，如用戶注冊、新聞發(fā)布、在線留言等；（3）不利于使用搜索引擎進行網(wǎng)站推廣。

4、3、常見網(wǎng)頁類型：形象頁、主頁、欄目頁、內(nèi)頁、新聞詳細頁等；4、網(wǎng)頁設計原則：（1）了解客戶需求（2）遵循Web標準（3）運用形式美法則5、網(wǎng)頁設計流程：（1）手繪效果圖：確定網(wǎng)頁主題內(nèi)容和風格（2）設計效果圖：搜集、整合設計所需素材（3）版面編輯：網(wǎng)頁的制作與實現(xiàn)（4）網(wǎng)頁美化：動畫設計，網(wǎng)頁測試和發(fā)布6、網(wǎng)頁設計的主要軟件：（1）Photoshop（2）Dweamveawer（3）Flash（4）Firworks7、 HTML基礎知識：（1）HTML概念：Hyper Text Markup Language 超文本標識語言；（2）HTML文檔的編寫方法：用記事本手工直接編寫、使用可

5、視化HTML編輯器Dreamweaver、由Web 服務器動態(tài)生成；（3）網(wǎng)頁文件命名：首頁文件名默認為：index.htm 或 index.html；（4）HTML 文件結構： <HTML> <HEAD> <title></title> </HEAD> <BODY> HTML 文件的正文 </BODY> </HTML>（5）用編輯器手工編寫第一張網(wǎng)頁；8、學生實訓及輔導；9、 Dreamweaver軟件界面介紹：（1）軟件面板組成及基本操作方法（2）軟件首選參數(shù)設置10、 Dreamweaver

6、站點創(chuàng)建：站點->新建站點->設置站點名稱->設置站點默認圖像文件夾。11、學生實訓操作：Dreamweaver站點創(chuàng)建與設置；12、 Dreamweaver創(chuàng)建第一個網(wǎng)頁：（1) 名稱：index.html（2) 設置標題、輸入文本、輸入特殊字符（3）頁面屬性設置（4）預覽網(wǎng)頁13、學生實訓及輔導；14、 HTML常用標記：（1）標題標記：<h#>主題文字</h#>（2）段落標記：<p>這里表示段落</p>（3）換行與注釋：<br>、<!-這里放注釋->（4）粗體與斜體：<b>粗體<

7、;/b>、<i>斜體</i>（5）刪除線與下劃線：<s>刪除線</s>、<u>下劃線</u>（6）上標與下標：<sup>上標</sup> <sub>下標</sub>15、學生實訓及輔導；16、字體標記：（1）字體大小：<font size="1">字體大小</font>（2）字體顏色：<font color="">字體顏色</font>（3）設置標題字體：<h#>主題

8、文字</h#>（4）物理字體： <B></B>，將字符設置成粗體。 <I></I>，將字符設置成斜體。 <U></U>，給字符增加下劃線。 <S></S>，給字符增加刪除線。 <TT></TT>，將字符設置成打字機字體。 <SUP></SUP>，將字符設置成上標字體。 <SUB></SUB>，將字符設置成下標字體。（5）邏輯字體： <EM></EM>強調(diào)文字。 <STRONG>&l

9、t;/STRONG>字體加重。 <CODE></CODE>顯示編程代碼。 <SAMP></SAMP>顯示示例文字。 <KBD></KBD>顯示鍵盤按鍵文字。 <SMALL></SMALL>縮小文字。 <BIG></BIG>放大文字。17、字體標記實例講解；18、學生實訓及輔導；四、課外作業(yè)第3章上機實踐。五、課堂小結本次課主要內(nèi)容：1、網(wǎng)頁設計基礎知識；2、Dreamweaver基本使用方法；3、HTML基礎知識及常用標記；約15分鐘約35分鐘約20分鐘約30分

10、鐘約20分鐘約20分鐘約20分鐘約30分鐘約20分鐘約30分鐘約20分鐘約20分鐘約40分鐘學生理解學生熟記學生實踐學生實踐學生實踐學生實踐學生實踐總結后記HTML+CSS網(wǎng)頁設計與布局課程教案授課教師：授課班級：地點：周課時： 5 課時章節(jié)內(nèi)容文字布局插入圖像超級鏈接教學目標3) 使學生熟練掌握HTML常用標記的基本使用方法；4) 使學生掌握HTML常用標記各種屬性的含義和設置方法。重點難點3) 掌握各種HTML常用標記的基本使用方法；4) 熟記各種HTML常用標記的含義。教學方法課堂講授、案例講解與指導教學環(huán)境計算機機房教學過程及內(nèi)容提要時間分配備注教學過程設計六、引入3、回顧

11、上周所學內(nèi)容：上周主要介紹了網(wǎng)頁設計和HTML相關基礎知識及Dreamweaver軟件基礎操作，重點介紹了HTML基礎知識及常用標記；4、提出問題：網(wǎng)頁中文字如何布局？如何在網(wǎng)頁中插入圖像？如何運用超級鏈接？七、告知學生課堂任務本次課所學習的主要內(nèi)容是HTML文字布局和插入圖像、超級鏈接的標記應用。八、逐步演示講解分析教學內(nèi)容19、換行控制：文字一<p>、文字二<br />20、不換行控制：<nobr></nobr>21、文字對齊：align="#"、<center>居中</center>2

12、2、設置段落：<p>段落一</p>、<p>段落二</p>23、學生實訓及輔導；24、上周課外作業(yè)點評；25、無序列表：<ul> <li>表項一</li><li>表項</li></ul>26、有序列表：<ol><li>表項一</li><li>表項</li></ol>27、欲格式化文本：<pre>文字</pre>、<xmp>文本</xmp>28、計

13、算機輸出格式：<code>代碼樣式小型固定寬度字體顯示的文本</code><kbd>代碼樣式固定寬度字體渲染</kbd><tt>代碼樣式固定寬度字體渲染文本</tt><var>代碼樣式斜體字渲染</var>29、學生實訓及輔導；30、在網(wǎng)頁中插入圖像：<img src="cn.jpg">31、圖像無法顯示時的提示信息：<img src="cn.jpg" alt="風景">32、控制圖像的大?。?lt;img

14、src="cn.jpg" alt="風景" width="400px" height="300px">33、設置邊框：<img src="cn.jpg" alt="風景" border="0px">34、圖像的鏈接：<a href=""><img src="cn.jpg"></a>35、學生實訓及輔導；36、圖像映射圖：<map></ma

15、p> 37、文本與圖像對齊：<img src="cn.jpg" align="middle">38、學生實訓及輔導；39、最簡單的文字超鏈：<a href="">文字鏈接</a>40、超鏈網(wǎng)頁的打開方式：_blank、_parent、_self、_top 41、鏈接的注釋：<a href="" title="網(wǎng)易網(wǎng)站" >163網(wǎng)站</a>42、設置圖片鏈接：<a href=""><

16、;img src=""></a>43、設置錨點：<a name="錨點名">文章中的文字</a>44、郵箱地址鏈接：<a href="mailto:leiningcn">作者的郵箱</a>45、相對路徑：相對路徑是指這個文件在所在的位置與其他文件或文件夾的關系；46、絕對路徑：HTML絕對路徑（absolute path）指帶域名的文件的完整路徑。 47、學生實訓及輔導；九、課外作業(yè)第6章上機實踐。十、課堂小結本次課主要內(nèi)容：1、HTML文字布局；2、HT

17、ML插入圖像；3、HTML超級鏈接。約10分鐘約30分鐘約30分鐘約40分鐘約20分鐘約20分鐘約30分鐘約30分鐘約20分鐘約30分鐘約30分鐘約30分鐘學生理解學生實踐學生實踐學生實踐學生實踐總結后記HTML+CSS網(wǎng)頁設計與布局課程教案授課教師：授課班級：地點：周課時： 5 課時章節(jié)內(nèi)容表單的使用插入表格教學目標5) 使學生熟練掌握HTML常用標記的基本使用方法；6) 使學生掌握HTML常用標記各種屬性的含義和設置方法。重點難點5) 掌握各種HTML常用標記的基本使用方法；6) 熟記各種HTML常用標記的含義。教學方法課堂講授、案例講解與指導教學環(huán)境計算機機房教學過程及內(nèi)容提要時

18、間分配備注教學過程設計十一、引入5、回顧上周所學內(nèi)容：上周主要介紹了HTML文字布局和插入圖像的基本方法，重點介紹了超級鏈接的標記應用；6、提出問題：什么是表單？常見的表單有哪些？如何在網(wǎng)頁中使用表格？十二、告知學生課堂任務本次課所學習的主要內(nèi)容是HTML表單和表格的標記應用。十三、逐步演示講解分析教學內(nèi)容48、表單基本語法：<form></form>、屬性action和method49、文本框：<input type="text">50、密碼框：<input type="password">

19、;51、單選框：<input type="radio">52、復選框：<input type="checkbox" >53、按鈕設置：<input type="submit" value="按鈕提交">54、學生實訓及輔導；55、上周課外作業(yè)點評；56、下拉表：<select><!設置下拉表選項-><option>選項一</option><option>選項二</option><option

20、 selected>選項三</option></select>絕對路徑57、文本域：<textarea><!文本域內(nèi)容-></textarea>58、表單應用實例講解；59、學生實訓及輔導；60、表格基本語法：<table></table><tr>標簽對表示表行<th>標簽對表示表頭<td>標簽對表示表元61、跨多行表元：Rowspan62、跨多列表元：colspan 63、表格內(nèi)設置文字對齊：對齊語法用align表示，后面接的值是left、center和

21、right，分別代表向左、居中和向右對齊復選框 64、表格在網(wǎng)頁中對齊：<table align=#></table>；65、學生實訓及輔導；66、表格應用實例講解；67、學生實訓及輔導；十四、課外作業(yè)第8章上機實踐。十五、課堂小結本次課主要內(nèi)容：1、表單的使用；2、插入表格；3、表格應用實例；約10分鐘約30分鐘約40分鐘約30分鐘約20分鐘約20分鐘約40分鐘約30分鐘約40分鐘約20分鐘約40分鐘學生理解學生實踐學生實踐學生實踐學生實踐總結后記HTML+CSS網(wǎng)頁設計與布局課程教案授課教師：授課班級：地點：周課時： 5 課時章節(jié)內(nèi)容網(wǎng)頁框架對象

22、移動屬性多媒體對象應用教學目標7) 使學生熟練掌握HTML常用標記的基本使用方法；8) 使學生掌握HTML常用標記各種屬性的含義和設置方法。重點難點7) 掌握各種HTML常用標記的基本使用方法；8) 熟記各種HTML常用標記的含義。教學方法課堂講授、案例講解與指導教學環(huán)境計算機機房教學過程及內(nèi)容提要時間分配備注教學過程設計十六、引入7、回顧上周所學內(nèi)容：上周主要介紹了HTML表單和表格的標記應用方法，重點介紹了表單的應用實例；8、提出問題：框架網(wǎng)頁如何創(chuàng)建？如何使網(wǎng)頁中的對象移動？如何在網(wǎng)頁中插入Flash、影片、聲音？十七、告知學生課堂任務本次課所學習的主要內(nèi)容是HTML網(wǎng)頁框架和對

23、象移動屬性、多媒體對象的標記應用。十八、逐步演示講解分析教學內(nèi)容68、框架的基本語法：<frameset></frameset> <frame></frame><frameset cols="25%,50%,25%"> <frame src=" <frame src=" <frame src="</frameset>69、框架垂直分欄：垂直分欄是在<frameset>中用cols表示跨多列表元，colspan70、框架水平分欄：水平分欄

24、的語法用rows表示71、設置不可調(diào)節(jié)框架大小：noresize72、學生實訓及輔導；73、上周課外作業(yè)點評；74、瀏覽器不支持框架：<noframes></noframes> 75、設置框架邊框：<frameset frameborder=#>76、設置滾動條：設置滾動條在是<frame>里面，用scrolling屬性 77、導航框架：導航框架是在網(wǎng)頁框架的<frame>中加入name屬性，表示該<frame>的名稱，然后通過用<a>標記的鏈接，并用target的屬性值等于<frame&g

25、t;的名稱；78、內(nèi)聯(lián)框架：內(nèi)聯(lián)框架存在<body></body>的單個HTML文件中，可以鏈接其他網(wǎng)頁并顯示它，即在一個頁面中嵌入一個框架窗口來顯示另一個頁面的內(nèi)容，叫做浮動框架也稱內(nèi)聯(lián)框架；79、學生實訓及輔導；80、框架應用實例講解；81、學生實訓及輔導；82、移動屬性基本語法：<marquee>要移動的對象</marquee>83、文字的移動設置：<marquee direction=#>文字</marquee>84、圖片移動的設置：<marquee><img src="仙

26、境.gif"></marquee>85、文本移動的方向：<marquee direction=up>向上移動</marquee>86、文本的滾動循環(huán)； 87、文本的移動速度：scrollamount設置移動的速度88、學生實訓及輔導；89、網(wǎng)頁多媒體的基本語法：<embed src=url loop="true|false">90、隱藏面板的設置； 91、對齊方式：align=top、bottom、center、baseline、 left、right、texttop、middle、 absmid

27、dle、absbottom 92、學生實訓及輔導；93、移動對象應用實例講解；94、多媒體對象應用實例講解；95、學生實訓及輔導；十九、課外作業(yè)第11章上機實踐。二十、課堂小結本次課主要內(nèi)容：1、網(wǎng)頁框架；2、對象移動屬性；3、多媒體對象應用。約10分鐘約20分鐘約30分鐘約30分鐘約10分鐘約20分鐘約20分鐘約40分鐘約20分鐘約20分鐘約10分鐘約20分鐘約30分鐘約40分鐘學生理解學生實踐學生實踐學生實踐學生實踐學生實踐學生實踐總結后記HTML+CSS網(wǎng)頁設計與布局課程教案授課教師：授課班級：地點：周課時： 5 課時章節(jié)內(nèi)容CSS基礎知識CSS字體設置教學目標9)

28、使學生熟練掌握CSS常用樣式的創(chuàng)建方法；10) 使學生掌握CSS常用樣式各種屬性的含義和設置方法。重點難點9) 掌握各種CSS常用樣式的基本使用方法；10) 熟記各種CSS常用樣式的含義。教學方法課堂講授、案例講解與指導教學環(huán)境計算機機房教學過程及內(nèi)容提要時間分配備注教學過程設計二十一、引入9、回顧上周所學內(nèi)容：上周主要介紹了HTML網(wǎng)頁框架和多媒體對象標記，重點介紹了HTML對象移動屬性設置方法；10、提出問題：什么是CSS？CSS有什么用？如何創(chuàng)建和使用CSS？二十二、告知學生課堂任務本次課所學習的主要內(nèi)容是CSS基礎知識和CSS字體樣式設置方法和技巧。二十三、逐步演示講解分析教

29、學內(nèi)容96、 CSS相關基礎知識；97、 CSS文件鏈接方式：（1）內(nèi)聯(lián)定義：內(nèi)聯(lián)定義即是在對象的標記內(nèi)，使用對象的style屬性定義適用其的樣式表屬性。鏈入內(nèi)部CSS： <style type="text/css">/*這里寫CSS內(nèi)容*/</style>（2）鏈接外部CSS：<link type="text/css" rel="stylesheet" src="style.css">98、 CSS在瀏覽器兼容性：現(xiàn)在瀏覽器市場的主流瀏覽器主要是Internet Explor

30、er（簡稱IE）和 Mozilla Firefox（簡稱FF），網(wǎng)頁中的CSS因兩個瀏覽器支持不同，所以對同一代碼會顯示不同的效果，那么為了達到網(wǎng)頁的風格，有時要注意哪個瀏覽器要寫的CSS屬性支持如何。如果某一屬性只有一個瀏覽器支持，那么另一瀏覽器對這屬性代碼就不起作用。 99、 CSS選擇符：CSS選擇符就是CSS樣式的名字，選擇符的命名規(guī)則可以使用英文字母的大寫與小寫、數(shù)字、連字號、下劃線、冒號、句號，CSS選擇符只能以字母開頭，選擇符在CSS中可分成多種，在本小節(jié)中只介紹常用的CSS選擇符：HTML標簽選擇符、ID選擇符和CLASS（類選擇符）選擇符。 100、 CSS偽類和偽元素：偽類

31、：偽類選擇符是基于一組預定義性質(zhì)的選擇符，HTML元素可以占有這些預定義性質(zhì)。實際上這些性質(zhì)與class屬性的功能是相同的，因此在CSS術語中，它們被稱作偽類。在對應這些偽類的標記中，不存在真正的class屬性，相反，它們代表應用到這些元素的某些方面，或者是相對于該元素的瀏覽器用戶界面的狀態(tài)。101、 CSS常用單位：em：（em，元素的字體的高度）。ex：（x-height，字母 "x" 的高度）。px：（像素，相對于屏幕的分辨率）。絕對長度單位：in：（英寸，1英寸=2.54厘米）。cm：（厘米，1厘米=10毫米）。mm：（毫米，1米=1000毫米）。pt：（點，1點=

33、|100|200|300|400|500|600|700|800|900107、行距：line-height:#；108、字體類型：Font-family:fontname；109、行距：line-height:#；110、間距與間隔：word-spacing：normal|長度單位、letter-spacing:normal|length111、字體應用實例講解；112、學生實訓及輔導；二十四、課外作業(yè)第16章上機實踐。二十五、課堂小結本次課主要內(nèi)容：1、CSS基礎知識；2、CSS文件鏈接方式；3、CSS字體設置。約10分鐘約40分鐘約40分鐘約60分鐘約50分鐘約40分鐘約

34、80分鐘學生理解學生實踐學生實踐總結后記HTML+CSS網(wǎng)頁設計與布局課程教案授課教師：授課班級：地點：周課時： 5 課時章節(jié)內(nèi)容CSS文本設置CSS背景設置對象尺寸設置教學目標11) 使學生熟練掌握CSS常用樣式的創(chuàng)建方法；12) 使學生掌握CSS常用樣式各種屬性的含義和設置方法。重點難點11) 掌握各種CSS常用樣式的基本使用方法；12) 熟記各種CSS常用樣式的含義。教學方法課堂講授、案例講解與指導教學環(huán)境計算機機房教學過程及內(nèi)容提要時間分配備注教學過程設計二十六、引入11、回顧上周所學內(nèi)容：上周主要介紹了CSS基礎知識和CSS文件鏈接方式，重點介紹了CSS字體樣式設置方法；

35、12、提出問題：如何用CSS進行文本和背景設置？如何控制網(wǎng)頁中的對象尺寸？二十七、告知學生課堂任務本次課所學習的主要內(nèi)容是CSS文本設置和背景設置、對象尺寸設置的方法和技巧。二十八、逐步演示講解分析教學內(nèi)容113、字母大小寫轉(zhuǎn)換：text-transform：capitalize | uppercase | lowercase | nonecapitalize：使每個詞的首字母大寫uppercase：使每個字的所有字母大寫lowercase：使每個字的所有字母小寫none：字母以正常形式顯示114、文字修飾：text-decoration：underline | overline |

36、 line-throungh | blink | noneunderline：給文字加下劃線overline：給文字加上劃線line-through：給文字加刪除線blink：文字在閃爍none：缺省使用無115、文本空格處理方式：white-space : normal | pre | nowrap116、文本水平和垂直對齊：（1）垂直對齊：baseline：使元素和上級元素的基線對齊sub：使對象以下標的形式顯示Super：使對象以上標的形式顯示top：使元素和行中最高的元素向上對齊text-top：使元素和上級元素的字體向上對齊middle：縱向?qū)R元素基線加上上級元素的x-高度字母

37、”x”的高度的的一半的中點bottom：使元素和行中最高的元素向下對齊text-bottom：使元素和上級元素的字體向下對齊（2）水平對齊：left：瀏覽器默認的對齊方式，左對齊Right：右對齊center：居中justify：左右對齊117、文本縮進：text-indent：<長度> | <百分比>118、學生實訓及輔導；119、上周課外作業(yè)點評；120、設置背景顏色：background-color : transparent | color121、設置圖像的滾動：background-attachment : scroll | fixed122、設置

39、給每個層添加一個ID，然后在CSS中對ID名稱進行控制；（4）設置層居中。128、學生實訓及輔導；二十九、課外作業(yè)第19章上機實踐。三十、課堂小結本次課主要內(nèi)容：1、CSS文本設置；2、CSS背景設置；3、對象尺寸設置。約10分鐘約30分鐘約30分鐘約60分鐘約40分鐘約30分鐘約40分鐘約30分鐘約50分鐘學生理解學生實踐學生實踐學生實踐總結后記HTML+CSS網(wǎng)頁設計與布局課程教案授課教師：授課班級：地點：周課時： 5 課時章節(jié)內(nèi)容設置外補丁和內(nèi)補丁對象邊框和定位設置教學目標13) 使學生熟練掌握CSS常用樣式的創(chuàng)建方法；14) 使學生掌握CSS常用樣式各種屬性的含義和設置方

40、法。重點難點13) 掌握各種CSS常用樣式的基本使用方法；14) 熟記各種CSS常用樣式的含義。教學方法課堂講授、案例講解與指導教學環(huán)境計算機機房教學過程及內(nèi)容提要時間分配備注教學過程設計三十一、引入13、回顧上周所學內(nèi)容：上周主要介紹了CSS文本設置和背景設置，重點介紹了對象尺寸設置的方法和技巧；14、提出問題：什么是外補丁和內(nèi)補??？外補丁和內(nèi)補丁如何創(chuàng)建？如何給網(wǎng)頁中的對象進行定位？三十二、告知學生課堂任務本次課所學習的主要內(nèi)容是CSS外補丁和內(nèi)補丁、對象邊框和定位設置的方法和技巧。三十三、逐步演示講解分析教學內(nèi)容129、外補丁：表示具體的精確寬度。margin : auto

41、| length130、外補丁的外延設置：頂端外補丁用法：margin-top:auto|length右端外補丁用法：margin-right:auto|length底端外補丁用法：margin-bottom:auto|length左端外補丁用法：margin-left:auto|length131、外補丁實例；132、上周課外作業(yè)點評；133、學生實訓及輔導；134、層與層的距離效果；135、對層布局；136、設置層的尺寸；137、設置層漂移；138、設置層與層之間的間隔；：139、學生實訓及輔導；140、內(nèi)補?。罕硎緦ο笾械膬?nèi)部填充距離。padding : lengt

42、h141、頂端內(nèi)補丁用法：padding-top:length;142、右端內(nèi)補丁用法：padding-right : length143、底端內(nèi)補丁用法：padding-bottom : length144、左端內(nèi)補丁用法：padding-left : length145、內(nèi)補丁綜合實例；146、學生實訓及輔導；147、邊框的基本語法：border : border-width | border-style | border-color148、邊框顏色：border-color : color149、邊框樣式表示：border-style : none | dotted |

44、示默認寬度。參數(shù)thin：表示小于默認寬度。參數(shù)thick：表示大于默認寬度。參數(shù)length：直接表示邊框?qū)挾鹊闹怠?51、學生實訓及輔導；152、定位的基本語法：position : static | absolute | relative153、對象層疊順序：z-index : auto | number154、相對定位實例；155、學生實訓及輔導；三十四、課外作業(yè)第22章上機實踐。三十五、課堂小結本次課主要內(nèi)容：1、CSS設置外補丁和內(nèi)補丁；2、CSS對象邊框設置；3、CSS定位設置。約10分鐘約20分鐘約10分鐘約30分鐘約30分鐘約30分鐘約30分鐘約30分鐘約15分

45、鐘約30分鐘約10分鐘約40分鐘約15分鐘約30分鐘學生理解學生實踐學生實踐學生實踐學生實踐學生實踐總結后記HTML+CSS網(wǎng)頁設計與布局課程教案授課教師：授課班級：地點：周課時： 5 課時章節(jié)內(nèi)容CSS使用列表的方法CSS表格控制方法教學目標15) 使學生熟練掌握CSS常用樣式的創(chuàng)建方法；16) 使學生掌握CSS常用樣式各種屬性的含義和設置方法。重點難點15) 掌握各種CSS常用樣式的基本使用方法；16) 熟記各種CSS常用樣式的含義。教學方法課堂講授、案例講解與指導教學環(huán)境計算機機房教學過程及內(nèi)容提要時間分配備注教學過程設計三十六、引入15、回顧上周所學內(nèi)容：上周主要介紹了CSS外補丁和內(nèi)補丁，重點介紹了對象邊框和定位設置的方法和技巧；16

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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

《HTML+CSS網(wǎng)頁設計與布局》教案

文檔簡介

溫馨提示

最新文檔

評論

《HTML+CSS網(wǎng)頁設計與布局》教案

文檔簡介

溫馨提示

最新文檔

評論

相關文檔