第一篇：用表格進行頁面布局教案

省淳中信息技術深度研課教學設計

【課題】

用表格進行頁面布局

【課程標準】

1.理解WWW、網頁、主頁、網站的基本概念及其相互關系。2.理解動態網頁的概念，了解其工作過程。

3.能夠使用常用的網頁制作軟件進行動態網頁的制作與發布。

4.通過開發實踐，學會簡單網站的規劃、設計、制作、發布與管理的基本方法。5.能夠根據網站主題要求設計評價指標并對常見網站的建設質量與運行狀況進行評價。

【學業水平測試內容和要求】

1.了解WWW、網頁、主頁、網站的概念及區別。2.了解什么是靜態網頁和動態網頁。

3.了解動態HTML技術和服務器端動態網頁技術的基本知識。4.了解網站開發的一般過程。

5.知道網站規劃主要包含的內容，學會根據需求規劃網站。

6.學會使用一種常用的網頁制作軟件制作網站，包括建立站點、新建網頁、利用表格布局網頁、修飾文字、插入多媒體信息、建立超級鏈接、制作簡單的網頁動態效果等。

7.了解如何在局域網或因特網上申請網站空間，發布網站。8.了解簡單維護網站的方法。

9.了解網站評價的幾個主要方面，能使用評價量表進行網站評價。

【學情分析】

網絡技術應用是普通高中信息技術選修模塊。計算機網絡的出現改變了人們的生活方式，對人類產生了深遠的影響，網絡技術的學習將幫助學生更好地合理地去使用它。課時安排為7課時，本節教學設計為第1課時。

大部分學生小學或初中有了一定的計算機基礎，掌握了計算機的基本操作技能，能夠使用一些常用軟件，并且對網絡有一定的了解，但是也有個別零起點學生。因此，在教學中要兼顧到不同層次的學生。這一章在學業水平測試中要求較高，要求學生理解并能獨立操作、遷移應用與熟練操作。所以，在課時安排上有所側重，在教學設計中也要著重鍛煉學生的操作能力。

【學習目標】

1． 通過學生網頁與示例網頁的對比，引導學生發現及歸納其差異：文字與圖片位置合理，確定問題，即需要對網頁進行頁面布局。

2． 通過閱讀材料和自主探究，歸納和總結網頁布局的形式和方法。

3． 通過分析示例網頁，找出解決上一問題的方法之一，即用表格進行頁面布局。4． 通過學生自主探究，掌握表格的建立、邊框粗細的設置、寬度高度的設置、單元格的合并與拆分。

5． 通過網頁、表格、單元格的背景色設置，讓學生在操作中發現并總結出網頁、表格、單元格的應用范圍不同，優先級為單元格>表格>網頁。6． 通過完成學習任務：“圣誕節”首頁面的制作，學會自主設計頁面布局并理解表格在頁面布局中所起的重要作用。

【學習重點】

表格的使用

【學習難點】

自主設計網頁的布局并利用表格實現

【學習過程】

一、導入

學生對比觀察兩張網頁：上節課的學生作品、示例作品，說說其差異？哪個網頁更好？好在哪里？

->引出頁面布局的概念

二、新授

【自主探究活動1】如何進行頁面布局？

觀察班級主頁的頁面布局，分析其布局特點：

網頁布局常用方法有三種:純表格布局、DIV+CSS布局、框架布局;->引出FrontPage中頁面布局的工具——表格

->表格的作用：在網頁制作中網頁表格功能不僅僅是組織數據，更多地被用來進行頁面布局

->表格布局的形式（部分示例）

【活動小結】

頁面布局的形式：

頁面布局的方法：

【自主探究活動2】如何使用表格？（1）表格的建立：

通過“表格”菜單、常用工具欄中的“插入表格”按鈕在頁面中建立表格（2）單元格的合并與拆分：（3）表格屬性的設置：

表格大?。罕砀竦母叨?、寬度（注意區分像素、百分比）對齊方式：左對齊、右對齊、水平居中、兩端對齊 背景：背景圖片、背景顏色 邊框：粗細、顏色（4）單元格屬性的設置：

單元格大?。簡卧竦母叨?、寬度（注意區分像素、百分比）對齊方式：分為水平對齊、垂直對齊 背景：背景圖片、背景顏色 邊框：顏色

【活動小結】：表格的相關操作

【自主活動3】網頁、表格、單元格的優先級？

通過網頁、表格、單元格的背景色設置，發現并總結出網頁、表格、單元格的應用范圍不同，優先級為：單元格>表格>網頁。

【活動小結】優先級為：單元格>表格>網頁

三、【活動任務】

（1）利用表格自主設計“圣誕節”網站首頁面。（自建站點）

（2）在網頁相應位置添加文字及圖片素材（素材不要求全部使用，自選素材）。（3）保存網頁。

參考樣張（不要求與樣張一致）：

四、作品展示

自評：

1、簡述設計的想法；

2、優缺點 他評：優缺點，以及改進意見

教師評價：

1、優缺點；

2、針對優缺點給建議

五、總結

頁面布局的常用方法：表格 布局方式

時間有剩余的話讓學生修改自己的網頁并提交。

【教學反思】

第二篇：學生用空白表格教案

執教者

于欣

授課時間

2012-4-22 授課班級

四年一班

教學內容

三角形三條邊的關系（四年級下冊第82頁的內容）

教學 內容分析

教育不只是一種簡單的“告訴”。學生擁有自己的獨立思考水平和認知系統。當他們遇到一個新的待解決的問題情境時，他們會自覺而主動地從自己已有的知識架構和認知經驗中摸索、收集、調動處理問題的方法和策略。三角形邊的關系這一內容是新教材新增加的內容，并安排在第二學段。通過這一內容的學習，使學生在已經建立三角形概念的基礎上，進一步深化理解三角形的組成特征，加深學生對三角形的認識，同時，也為以后學習三角形與四邊形及其他多邊形的聯系與區別打下基礎。

根據新課標的精神，要改變學生學習的方式，讓學生經歷“數學化”、“做數學”等過程，并注重與生活實際緊密聯系，學有價值的數學。根據這一教學內容在教材中所處的地位與作用，以及新課標的要求，我認為設計這節課的理念是：活動參與、自主建構，聯系生活、應用數學。

教 學 目 標

知識目標

知道和理解“三角形任意兩邊的和大于第三邊”，能用它解釋一些生活現象，解決一些簡單的生活問題。

能力目標

通過動手操作、小組驗證，體驗探索三角形邊的關系的過程，培養猜測意識和自主探索、合作交流的能力。

情感目標

經歷探究、發現、驗證“三角形任意兩邊的和大于第三邊”的過程，體驗合作學習和數學學習的快樂。

教學重點

三角形三邊關系的實驗與探究

教學難點

三角形三邊關系的探究過程。

教學關鍵

使學生理解三角形邊的關系

教學準備

課件、三根小棒、三邊關系試驗報告單每組四根小棒

教學方法

自主探究小組討論

課程類型

學科課程

教 學 過 程

活動的組織與實施（含教師活動和學生活動）

設計意圖

時間分配

一、復習舊知，導入新課

我手上拿的是什么？（三角板）它是什么圖形呢？（三角形）誰來說說什么是三角形？怎樣理解這個“圍”字（端點首尾相連）。同學們還知道三角形的哪些知識？關于三角形的知識還有很多，我們繼續往下看。

復習舊的知識，使新舊知識之間有很好的連接

2分鐘

二、動手操作，發現問題

師：老師這里有三根小棒，分別長3、5、10厘米，這3根小棒能圍成一個什么圖形? 生：三角形。

師：誰愿意上來圍一圍？圍的時候要注意小棒首尾相連。師：這三根小棒為什么圍不成三角形呢？三角形的三條邊之間到底有什么關系呢？今天，我們就一起來研究三角形的三邊關系（板書課題）

三、猜想驗證，發現規律

師：我們發現這三根小棒不能圍成三角形，怎樣做才能圍成三角形呢？ 生：換一根小棒

師：怎樣換？同學們說的都是你們的猜想（課件演示猜想1）

1、學法指導 師：你們的這些猜想是否正確，三角形的三條邊到底有什么關系？我們可以通過做實驗來驗證一下，現在老師給同學們準備了一些材料：3厘米、5厘米、8厘米、10厘米小棒各一根一起試著圍一圍三角形。同學們親自動手擺一擺，拼一拼，看看有什么結果。先看要求（大屏幕）操作要求：（1）、2人一組合作完成四種拼法（2）、圍三角形時要注意首尾相連。（3）、完成后，填寫好活動記錄表準備交流

2、動手操作，尋找規律（師巡視，并指導）

3、交流匯報，探究規律。師：哪個小組愿意來匯報。小組上臺展示，3厘米、8厘米、10厘米能

3厘米、5厘米、10厘米不能 3厘米、5厘米、8厘米不能 5厘米、8厘米、10厘米能 師：其它組有不同意見嗎？

師：仔細觀察四種結果，有的圍不成，而有的卻能圍成。這是為什么呢？先看不能圍成三角形的每組小棒的長度之間有什么關系?說說你能發現些什么？同桌討論一下。能圍成三角形的這幾組小棒長度之間又有什么聯系？

三根小棒要圍成三角形，必須滿足什么條件？

通過剛才的實驗和分析，你發現三角形三條邊長度之間有什么關系嗎？ 先看不能圍成三角形的這組情況，誰愿意說說3、5、10這三根小棒為什么不能圍成三角形？ 生：

師：其他同學贊同嗎？誰再來說一說。

師：我明白了，3厘米的邊是不能和5厘米、10厘米的邊圍成三角形的，因為這兩條邊之和小于第三條邊。（板書3+4〈8）你很會觀察。（課件演示）師：再說3、5、8這三根，同學們有些爭議，到底它們能不能圍成三角形呢？不能，為什么？有誰愿意談談？

生：3+5=8 重合了不能

師：是這樣嗎？（課件演示）請看大屏幕。

師：真的是這樣，通過演示現在明白這個同學的意思了嗎？誰愿意再來說一說。

師：通過以上的動手操作和探究分析，我們發現了當兩邊之和小于、等于第三條邊時，這3條邊是圍不成三角形的。

師：那么怎樣才能圍成三角形呢？

生：兩條邊加起來要大于第三邊就行了。師（板書）：兩邊之和大于第三邊

師：我們來看看能圍成三角形的這兩組是不是這樣的呢，3+8＞10、8+5＞10 看起來是這樣的。

3）師：回頭看不能圍成的情況，也有3+8＞4、4+8＞3、3+8＞5、5+8＞3（兩邊之和大于第三邊）的情況，怎么就不能圍成三角形呢？ 生：有一種不符合就不行了

師：看來只是其中的兩條邊之和大于第3條邊是不完整的，生1：加“任何”、“任意”

生2：其他兩邊之和都大于第三條邊。生3：無論哪兩條邊之和都要大于第三邊。

4、歸納小結

師：看來只是其中的兩條邊之和大于第3條邊是不完整的，師：這句話概括說就是：任意兩邊之和大于第三邊（板書：任意）師：是這樣嗎？再挑選一組能圍成三角形的三條邊，來驗證： 生：3+4＞5、3+5＞4、4+5＞3，師：這個例子證明了你的想法是對的，這兩個三角形的三邊關系都是：任意兩邊之和大于第三邊（齊讀）

四、運用結論，加深理解

師：我們已經知道三角形的三邊關系，下面讓我們來判斷幾道題目

1、快速判斷。

3cm

4cm

5cm

（）4cm

7cm

4cm

（）2cm

6cm

3cm

（）1cm

2cm

3cm

（）

師：為什么圍不成？你是怎么判斷的？

1、出示P82例3圖

這是小明上學的路線圖，同學們仔細看一看，他可以怎樣走？

2、這幾條路中，哪條最近？這是為什么呢？ 老師在生活中還看到了這么一種現象：（課件演示）公園里有一條這樣的路，路的兩旁是草坪，為什么很多人都往草坪中間走？ 師：今天你有什么收獲？

其實數學就在我們身邊，只要你平時多觀察、多動腦，你一定能成為數學的好朋友。

開發學生的動手能力和觀察能力，在實踐中發現問題并嘗試找出問題的原因 反復試驗，加深同學的理解，猜想驗證，發現其內在規律 增強小組合作意識以及動手操作能力 鍛煉同學發言及表達能力

通過小組討論，發現問題，嘗試找出原因，激發學生自主學習的精神 在教學過程中不斷引導，自主發現問題，加深對知識的理解和鞏固 運用練習，鞏固學習的知識，加深印象

3分鐘 5分鐘 7分鐘 3分鐘 5分鐘 10分鐘 5分鐘

板書設計

三角形邊的關系 兩邊之和大于第三邊

教學反思

本節課鞏固應用部分的三個環節，是從學生的學習認知規律出發，遵循從易到難的原則，分鞏固性練習、應用性練習、拓展性練習三個層次。并與學生身邊的生活例子相結合，既能體現數學教學生活化的新理念，又能有效地激發學生的學習興趣，拓展學生的思維，提高學生的數學學習能力。

以上教學設計，以學生的學習心理為基礎，通過簡單的動手操作，創設有效的“數學問題情境”，激發學生強烈的探究欲望。通過引導學生大膽的猜想，積極的驗證和合理的歸納，使學生學到新知識的同時，經歷數學知識的形成過程，這樣的教學將會有效地激活了學生的數學思維，使學生在知識、能力，以及情感態度等方面都將得到較好的發展。又通過擺圖形，尋找數據間的關系；又通過數據的整理和分析，確定圖形的存在性和圖形具有的性質，使數形緊密結合，滲透了數形結合的思想方法；同時對不同類型三角形都具有的共性歸納總結，滲透了數學的歸納思想。教學中始終以這一核心的思想為教學靈魂，時時滲透，處處體現。

第三篇：《用表格為網頁布局》教學設計說課稿

《用表格為網頁布局》教學設計

《用表格為網頁布局》是浙江教育出版社信息技術教材八年級上冊第三單元第十五課的內容。本課是在學生學習建立網站站點后，開始嘗試做第一張網頁。通過本課的學習，是對表格知識的鞏固和深入，更重要的是為后面的網頁制作打下基礎，所以本課是本單元的重點，起到承上啟下的作用。前階段學生已經學習了文本編輯、圖片插入、網絡基本知識、文件操作等內容，很多知識都可以遷移到本課來。八年級學生對電腦基本操作已經不再陌生，已經能夠獨立完成一定要求的學習任務，但是學生對于特定任務進行分析，整體規劃能力相對還是比較欠缺的。本節課教學的作業設計中，我將注重培養學生這個方面的能力。根據課程標準和教材內容，我將本課的教學目標設計成三個方面：

知識與技能目標：

1、了解主頁布局的常見布局圖，并明確主頁設計的基本要素；

2、理解用表格排版主頁的作用；

3、掌握在網頁中插入表格進行排版的技能；

4、學會設置表格屬性，對表格進行編輯修改。過程與方法目標：

通過欣賞、借鑒他人的主頁布局，取長補短，為自己的主頁布局做鋪墊。情感、態度與價值觀目標：

1、通過作品欣賞，讓學生意識到取長補短的可貴性，及在借鑒基礎上的創新的重要性；

2、用表格排版網頁解決網頁版面雜亂問題，培養在遇到困難時靈活運用各種方法解決，強化建站信心。

為了實現這個教學目標，我將教學重點確定尾插入表格進行排版和更改表格屬性。根據學生的思維障礙和學習情況的分析，我將難點定位于靈活掌握排列表格和設置表格屬性。只有正確設置了表格的屬性，才能美化和完善網頁的布局。為了更好的突出教學重點，突破教學難點，圓滿的完成教學任務，我在課前截取了典型的旅游網頁圖片素材并設置成框架形式讓學生一目了然地看到表格所起的作用，并設置了幾個學生需要突破的任務。

信息技術課是培養學生對信息技術的興趣和意識，使學生養成良好的信息素養為宗旨，強調學生的自主學習和研究學習。上新課前，我要求學生兩兩合作，通過傳統手工繪制草圖的學習方式，設計你需要建立網頁的框架布局，同時學會和與他人合作。為了讓學生主動的參與學習，我在設計教學流程時，準備以學生“任務驅動”為主線，以教師為主導，以學生為主體，通過學生自主探究，合作交流完成教學任務。根據教學內容和學情的分析，本課我采用的教學方法有：講解、練習、任務驅動、小組合作，學生可以通過小組合作、給定的任務等將本課學習用于實際操作。我將結合教學過程來具體分析。整個教學過程我分為以下四個部分來完成：

一、通過旅游網站的解析，直接引入新知，通過刪除網頁的背景、文字、圖片后，呈現出一張網頁的背后其實是表格起到重大的作用。所以學生心中就有個概念，原來做網頁的前提是用表格固定框架。并結合書本p58頁，了解網頁常見的布局圖。直覺、興趣成為學生產生學習動力最直接的因素。

二、本節課的任務是讓學生設計有關龍泉旅游的網頁布局，我先讓學生利用草圖形式設計宣傳龍泉旅游網頁的框架，做這個的目的是為了學生能更順暢、不會盲目的在電腦上操作，這為學生完成任務2提供基礎。

三、鞏固舊知，學習新知，解決問題。建立網頁的前提是建站，學生對站點的認識已經不會陌生，根據教師提供的站點，再將網頁布局呈現在主頁上（學習新知）。通過例子的演示，學生將草圖轉移到網頁上來。在操作過程中學生可能會遇到一些解決不了的問題，我會引導學生勇敢地提出問題，并告訴學生解決問題的方法：（1）自己思考（2）向同學和老師尋求幫助。（3）通過教材操作步驟P59，進行知識遷移。針對學生中普遍存在的問題，我將利用廣播講解演示，解決問題（學生應該會碰到在單元格內插入過大的圖片后，影響相鄰單元格位置變化，這里所要涉及的是表格的嵌套）；針對個別學生的問題，我將個別指導。設計意圖：這個環節充分體現了學生的自主性，讓學生不斷嘗試中發現問題，師生合作解決問題。體現了學生是學習的主體，學生把教材、同學、教師、電腦都作為 學習的幫助者。

四、作品展示及評價。根據課前設定好評價量化表，抽取部分學生作品展示給同學們，通過學生對自己作品的評價打分（自評），再讓別的同學進行評價打分（他評）。但是課堂時間畢竟有限，讓每位學生對自己設計的作品進行評價，然后同組之間進行互評，取長補短，學生可以從中找到自己的缺點和不足之處，也能學習到別人的長處。相互評價，也是獲得最佳學習效果的重要途徑之一。（問題補充：參考諸多網頁，一般網頁的邊框是不顯示的，如何將表格的邊框線從頁面中趕走，這里需要利用表格的屬性進行隱藏邊線，從而使網頁頁面更加美化。）

五、課堂小結。強調頁面布局在網頁設計中的重要性，肯定同學操作過程中好的方面，并及時鼓勵學生。要求同學課后多瀏覽有關網頁，設計出更好的作品。

六、作業布置：同學思考以下問題（1）今天這節課我學會了什么？并寫下本節課的收獲。（2）課后再思考并繪制個人主頁的頁面布局。通過學生自己歸類總結，既能提高學生的語言組織能力和寫作能力、辨別力，又能提高學生的信息素養，這正是我們信息技術課所致力要求的目標。在整個教學設計中，我感覺本節課學生的學習任務和目標很明確，要讓學生主動思考、獲取。體現了學生的自主探究學習。

第四篇：《應用表格布局網頁結構》教案

《應用表格布局網頁結構》教案

一、教學目標

1、知識與技能：

（1）了解表格網頁的作用；

（2）掌握網頁中表格的制作方法，表格屬性的屬性設置方法；（3）能根據網頁設計內容，正確布局表格的結構；（4）嘗試根據內容需要設計表格布局網頁頁面。

2、過程與方法：

（1）利用對比，加深學生對表格布局網頁的認識；

（2）通過用表格結構設計網頁，使學生進一步理解表格的作用、功能及網頁設計方法；（3）通過自主探究，使學生掌握軟件的使用規則，培養學生自主學習的能力。

3、情感態度與價值觀：

（1）通過實踐創作的過程，形成主動學習和利用信息技術、參與信息作品創作的態度；（2）培養學生注重吸取成功的經驗，提高本身的信息素養。

二、教學重點

1、表格的制作及設置方法；

2、根據實際情況設計并應用表格布局網頁。

三、教學難點

1、應用表格布局網頁頁面的意識；

2、合理制作表格，實現頁面布局。

四、教學方法

教師講解、演示、與學生任務驅動、合作學習相結合。

五、教學過程 教學過程

教師活動

學生活動

課前準備

將“學習素材”文件夾發送到學生機桌面；

打開并預習本課內容。

一、對比，引入新課

1、明確表格在網頁制作時的作用：頁面規劃

（1）展示兩個頁面（1.htm和2.htm）并進行比較： 提問：①這2個網頁，你喜歡哪個？為什么？ ②網頁中的文字、圖像對象如何插入？

③在Frontpage中打開2張網頁，觀察有什么不一樣。

總結：這些線就是表格線，在做網頁時，可以利用表格布局網頁結構。（2）引出本課內容：探索用表格來布局網頁的頁面。（3）明確本課的任務：使用表格制作網頁。

學生小組交流、討論，對比加深印象，感受表格布局網頁的作用 發現表格可以布局頁面 明確本課內容

二、小組合作，體會用表格布局網頁

2、模仿用表格布局網頁頁面結構（1）引導學生回憶Word中學過的表格內容，提示學生表格操作跟Word中具有很大的相通之處；

提問：還記得哪些表格的編輯方法？

（2）展示效果頁，引導學生分析頁面的結構，探索需要制作表格的結構；（3）講解演示表格的制作及調整；（4）布置學生完成任務一：“心憩空間”網頁

（5）展示成功學生的作品，引出表格屬性的設置；

如：行列的插入、刪除、單元格的合并、拆分、調整大小等。

根據網頁內容來規劃所需表格結構，了解網頁中表格制作及設置的方法。學生小組合作，完成網頁“chushi.htm”

三、小組合作，嘗試用表格布局網頁

3、小組交流并獨立制作表格布局網頁

（1）剛才我們一起體會用表格布局網頁的網面結構：先分析確定所需表格的結構，然后根據實際制作設置表格布局網頁頁面結構。接下來我們就來嘗試用表格布局我們的網頁了；引入用表格布局“多彩的生物”網頁；

（2）引導學生分析確定網頁的表格結構；

（3）布置學生完成任務二：制作“多彩的生物”網頁；可以根據自己的設計對網頁進行適當的調整；

掌握根據網頁確定所需表格的結構 能根據網頁規劃表格

小組合作討論，根據學案提供的參考表格確定“多彩的生物”網頁的表格結構，再獨立完成圖片、文字的插入。

四、作品展示交流與課堂總結

1、展示成功學生的作品并點評；

2、總結本課內容：為了制作的網頁內容工整、美觀，所以我們選擇使用表格布局。本課我們嘗試并使用了表格來規劃布局網頁，嘗試設計個人網站的首頁，自主設計版面，靈活使用表格進行網頁制作。

掌握表格布局網頁的常見技巧，加強表格布局網頁的意識。

第五篇：表格基礎和DIV+CSS網頁布局基礎教案（模版）

? 本部分任務

制作“寶貝分類”頁面 制作“公告欄”頁面

? 為什么使用表格

? 表格應用場合 具體內容見ppt ? 表格的基本結構

具體內容見ppt

? 表格的基本語法

? Table標簽 ? Tr標簽 ? Td標簽 具體內容見ppt 注：表格標簽中沒有列標簽。

? 如何創建表格

具體內容見ppt

? 跨行跨列的表格

? 什么是跨行跨列的表格 ? 跨多行的表格

? 跨多列的表格 具體內容見ppt

? 表格的美化修飾

? ? 什么是表格的美化修飾 如何設置表格的尺寸和邊框 width用來設置表格的寬度 height用來設置表格的高度

border用來設置表格邊框尺寸大小 bordercolor用來設置表格邊框顏色 如何設置背景

background屬性用來設置表格的背景圖片

bgcolor屬性用來設置表格、行、列的背景色。HTML中顏色的表示方式：“#EBEFFF”是用RGB表示的一種顏色值，RGB指的是紅綠藍。

如何設置對其方式

align屬性用來設置表格、行、列的對齊方式 為什么要使用填充屬性 具體內容見ppt 什么是填充屬性和間距屬性 ?

?

? ? border(邊框的厚度)cellpadding(單元格填充)cellspacing(單元格間距)如何使用填充、間距屬性 border(邊框的厚度)cellpadding(單元格填充)cellspacing(單元格間距)

? 表格的布局

? ? ? 什么是表格布局 使用表格進行布局

用表格對網頁的內容進行整體控制

? DIV+CSS規劃頁面

? ? ? ? 什么是CSS？

為什么要使用CSS？ 如何使用CSS？

DIV+CSS如何規劃頁面？

? 什么是CSS？

CSS（Cascading Style Sheet）可譯為“層疊樣式表”或“級聯樣式表”，它定義如何顯示 HTML 元素，用于控制Web頁面的外觀。

? 為什么要使用CSS？

? CSS的特點

便于頁面的修改。便于頁面風格的統一。減少網頁的體積。為什么要使用CSS？ 使用CSS布局的優點 表現和內容相分離 提高頁面瀏覽速度 易于維護和改版

CSS樣式表極大地提高了工作效率

樣式通常保存在外部的.css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。

由于允許同時控制多重頁面的樣式和布局。作為網站開發者，你能夠為每個 HTML 元素定義樣式，并將之應用于你希望的任意多的頁面中。如需進行全局的更新，只需簡單地改變樣式，然后網站中的所有元素均會自動地更新。內聯定義

內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。?

? 如何使用CSS？

? 只針對標簽內的元素有效，因其沒有和內容相分離，所以不建議使用。? 定義內部樣式塊對象

你可以在你的HTML文檔的和標記之間插入一個塊對象。定義方式請參閱樣式表語法。

這樣的樣式表只能針對本頁有效。不能作用于其它頁面。? 導入樣式——Style導入

與鏈入外部樣式的功能基本相同，只是語法和實現方式上有差別。

它一般常用在另一個樣式表內部。如layout.css為主頁所用樣式，那么我們可以把全局都需要用的公共樣式放到一個global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式鏈接全局樣式，這樣就使代碼達到很好的重用性。? 導入樣式——Link標簽導入

使用Link標簽代替Style標簽來導入CSS文件。

它的好處是不但本頁可以調用，其它頁面也可以調用，是最常用的一種形式。

除了內聯定義是直接作用于標簽本身以外，其他CSS使用方式都需要建立標簽和樣式之間的映射關系。主要的映射關系有： id映射 class映射 標簽映射 混合映射 ? CSS樣式和頁面標簽元素的對應方式

? ? ? ?

? 幾種樣式的優先級

? id優先級高于class ? 后面的樣式覆蓋前面的 ? 指定的高于繼承 ? 行內樣式高于內部或外部樣式

總結原則：單一的(id)高于共用的(class)，有指定的用指定的，無指定則繼承離它最近的。

? DIV+CSS如何規劃頁面？

請關注上機實驗3

By---QQ69848627