第一篇：《網(wǎng)頁設(shè)計(jì)中的表格排版》教案

《網(wǎng)頁設(shè)計(jì)中的表格排版》教案

授課老師：陳清鋒

總1課時(shí)

本周第5課時(shí)

備課時(shí)間:2010年11月30日

授課班級:高一（2）班

授課時(shí)間:2010年12月9日

教學(xué)目標(biāo)

知識與技能

1、掌握網(wǎng)頁設(shè)計(jì)中的格式化操作

2、掌握網(wǎng)頁設(shè)計(jì)中表格底紋設(shè)置

3、掌握表格的屬性設(shè)置

4、掌握網(wǎng)頁設(shè)計(jì)中表格的排版 過程與方法

1、培養(yǎng)學(xué)習(xí)、比較、歸納等思想方法和自覺學(xué)習(xí)的方法。

2、培養(yǎng)學(xué)生動(dòng)手操作的動(dòng)手能力，形成比學(xué)趕幫的學(xué)習(xí)氣氛。

3、培養(yǎng)學(xué)生基本的網(wǎng)頁制作流程，培養(yǎng)學(xué)生任務(wù)驅(qū)動(dòng)方法。情感態(tài)度與價(jià)值觀

1、在操作過程中體會(huì)網(wǎng)頁編輯的整體美感，培養(yǎng)學(xué)生基本審美的觀點(diǎn)。

2、引導(dǎo)學(xué)生形成自主學(xué)習(xí)與合作學(xué)習(xí)等良好的學(xué)習(xí)方式。

3、培養(yǎng)學(xué)生正確的人生觀和道德情感。教學(xué)重點(diǎn)

1、表格中單元格的美感排版

2、掌握表格中的底紋操作 教學(xué)難點(diǎn)

1、網(wǎng)頁設(shè)計(jì)中的表格美感排版

2、網(wǎng)頁設(shè)計(jì)中表格嵌套操作 教學(xué)用時(shí) 1課時(shí) 教學(xué)地點(diǎn) 三樓機(jī)房 教學(xué)過程

一、課堂準(zhǔn)備及引入（2分鐘）

師生問好。清點(diǎn)人數(shù)。安全教育：大家剛才來到機(jī)房是怎么來的？蹦過來的？！不要急沖沖地來，要做一個(gè)文明學(xué)生，有一個(gè)大將風(fēng)范，從容地走進(jìn)機(jī)房，如果你是跑來，容易撞到別人，自己也容易摔倒。

大家都知道，現(xiàn)在每個(gè)公司，每個(gè)學(xué)校，每個(gè)企業(yè)都有了自己的網(wǎng)站，他們的網(wǎng)站都是很漂亮，而且都是非常容易吸引人的，其實(shí)，你們也是有能力達(dá)到那種水平的，關(guān)鍵是看你要不要學(xué)的問題，如果你要學(xué)，你們完全有可能超越他們。那么，在制作網(wǎng)頁之前我們應(yīng)該做一個(gè)什么重要的步驟呢？建立網(wǎng)站站點(diǎn)，下面，讓一個(gè)同學(xué)來建立一個(gè)網(wǎng)站。由學(xué)生上臺操作完成。網(wǎng)站建好以后，我們就可以制作網(wǎng)頁了。今天我們的主要內(nèi)容是如何利用網(wǎng)頁設(shè)計(jì)中的表格對網(wǎng)頁進(jìn)行排版。（展示課題和重難點(diǎn)）

接著，展示本次訓(xùn)練的網(wǎng)頁效果。要求學(xué)生按要求完成本次作業(yè)效果。（發(fā)素材到學(xué)生機(jī)）

二、提出自學(xué)訓(xùn)練題目（5分鐘）

學(xué)生自己建立一個(gè)以自己名字命名的站點(diǎn)，新建一個(gè)主頁頁面，同時(shí)再建3個(gè)頁面作子頁面。

1、建立主頁，同時(shí)建立三個(gè)子頁面，制作主頁網(wǎng)頁背景，字體大小和網(wǎng)頁標(biāo)題。

2、制作LOGO欄（一行3列）。

3、制作導(dǎo)航條（首頁、湄州之旅、三字公約等8個(gè)導(dǎo)航）

4、制作主頁面的排版。（注意各排版的關(guān)系和位置）。

5、制作頁面底部的版權(quán)和與子頁面的鏈接部分。

三、學(xué)生操作，教師巡視（5分鐘）

四、學(xué)生演示操作結(jié)果，檢查學(xué)生的自學(xué)效果（5分鐘）學(xué)生操作結(jié)果。（分別由學(xué)生來完成題目）

五、教師講解，指出學(xué)生的不足（板書）（8分鐘）

1、建立主頁，“文件”→“新建”→“基本頁”→“HTML” →“確定”。保存存“index.html”，用同樣的方法建立三個(gè)子頁面，分別保存。a“屬性”→“頁面屬性”→點(diǎn)擊“背景圖像”右邊的“瀏覽”按鈕，選擇“pic/bggreen.gif”這個(gè)圖像文件，作為網(wǎng)頁的背景。

b在標(biāo)題右邊輸入：歡迎進(jìn)入充滿朝氣蓬勃的高一（2）班級網(wǎng)站。

2、制作LOGO：制作一行三列的表格，分別插入各自的圖像和文件。

3、制作導(dǎo)航：a新建一個(gè)頁面文件，然后在編輯區(qū)域中插入一個(gè) 2 × 1 的表格，并設(shè)置表格的基本屬性參數(shù)。b將光標(biāo)置于第一行的單元格中，再將單元格的背景顏色設(shè)置為 # 69A 538，并應(yīng)用同樣的方法將第二行單元格的背景顏色設(shè)置為 #8FCB 5A。設(shè)置完成后將光標(biāo)至于第一行的單元格中，然后在此單元格中插入一個(gè) 1 × 8 的表格，并設(shè)置表格的基本屬性參數(shù).。c錄入文字并設(shè)置單元格。在新插入的表格的所有單元格中輸入文字，然后選中所有單元格，設(shè)置單元格的相關(guān)屬性。d改變其中一個(gè)單元格的文字顏色和背景顏色，使其突出顯示。e此時(shí)即可得到帶有層次感的表格效果。

4、主頁面的排版：（重點(diǎn)講解，讓學(xué)生明白為什么要這樣操作）

a插入一個(gè)一行三列的表格（重點(diǎn)說明：大的外表格起到排版布局作用）b左邊的一列：插入三行一列的表格，并輸入必要的圖像和文字。c中間的一列：插入三行一列的表格，并輸入必要的圖像和文字。d右邊的一列：插入三行一列的表格，并輸入必要的圖像和文字。（查看結(jié)果與教師的效果有何不一樣）

e左邊的一列：插入三行三列的表格，并輸入必要的圖像和文字。f中間的一列：插入三行一列的表格，并輸入必要的圖像和文字。g右邊的一列：插入三行三列的表格，并輸入必要的圖像和文字。

（整調(diào)排版使用網(wǎng)頁整潔美觀，關(guān)鍵利用網(wǎng)頁設(shè)計(jì)中的空表格作用進(jìn)行排版）

5、制作版權(quán)和子頁面：一行一列表格，輸入版權(quán)。制作部分超鏈接。

六、學(xué)生當(dāng)堂訓(xùn)練（8分鐘）

學(xué)生繼續(xù)完善網(wǎng)頁主頁和子頁面的設(shè)計(jì)及超鏈接制作。

七、學(xué)生提交作業(yè)（2分鐘）

讓學(xué)生把作業(yè)提交上來，檢查學(xué)生的作業(yè)。

八、作業(yè)講評，比較，推優(yōu)（1分鐘）

把學(xué)生作業(yè)進(jìn)行講評，學(xué)生之間對比在學(xué)習(xí)中形成一個(gè)比學(xué)趕幫的氣氛。（做好學(xué)生作業(yè)情況記錄）

九、小結(jié)（1分鐘）

1、網(wǎng)頁中的表格排版一定少用空格。

2、頁面要整齊美觀。

3、網(wǎng)頁中排版要注意空隙的使用。

4、使用擴(kuò)展布局。

5、只設(shè)寬度，不設(shè)高度。

十、作業(yè)（10秒）

制作一個(gè)關(guān)于個(gè)人的網(wǎng)站。

十一、思考題，指導(dǎo)下一節(jié)講課內(nèi)容（30秒）

1、網(wǎng)頁設(shè)計(jì)中有否其他的頁面排版？

2、預(yù)習(xí)層的使用？它與網(wǎng)頁有什么不一樣的地方？

十二、檢查計(jì)算機(jī)硬件配件，師生問好，有秩序下課。（5秒）

十三、教學(xué)反思

第二篇：網(wǎng)頁中表格教案

第三課 在網(wǎng)頁中插入表格

一、教材分析

網(wǎng)頁制作中用表格來規(guī)劃整個(gè)網(wǎng)頁的布局，是我們設(shè)計(jì)制作網(wǎng)頁常用的手法。所以學(xué)會(huì)在網(wǎng)頁中插入表格是網(wǎng)頁制作中的一個(gè)重要的部分。本課的主要內(nèi)容包括在網(wǎng)頁中插入表格，表格的編輯和修飾，在表格中插入文字、圖片等。通過對本課的學(xué)習(xí)，讓學(xué)生了解用表格來規(guī)劃網(wǎng)頁會(huì)使網(wǎng)頁結(jié)構(gòu)顯得清晰明快。在網(wǎng)頁制作中，引導(dǎo)學(xué)生用表格來規(guī)劃網(wǎng)頁，為以后網(wǎng)頁的開發(fā)設(shè)計(jì)打下一個(gè)良好的基礎(chǔ)。

重點(diǎn)：學(xué)會(huì)使用多種方法在FrontPage中插入表格。難點(diǎn)： FrontPage表格的美化。

二、教學(xué)目標(biāo)

知識與技能：學(xué)會(huì)在FrontPage中插入表格及美化表格的方法，培養(yǎng)學(xué)生運(yùn)用表格設(shè)計(jì)來美化網(wǎng)頁的能力。

過程與方法：采用研究體驗(yàn)式和協(xié)作式學(xué)習(xí)方法，培養(yǎng)學(xué)生對計(jì)算機(jī)知識的遷移能力和綜合運(yùn)用知識的能力。

情感態(tài)度、價(jià)值觀：通過網(wǎng)頁制作，培養(yǎng)學(xué)生良好的審美情趣。使學(xué)生逐步形成用表格來規(guī)劃網(wǎng)頁布局的網(wǎng)頁制作習(xí)慣，為今后網(wǎng)頁的開發(fā)設(shè)計(jì)打下一個(gè)良好的基礎(chǔ)。

三、教學(xué)準(zhǔn)備：

硬件環(huán)境：使用多媒體網(wǎng)絡(luò)教室，配備寬帶網(wǎng)絡(luò)。軟件環(huán)境：WinXP操作系統(tǒng)、FrontPage2000以上版本。素材資源：

1、在教師機(jī)或?qū)W生機(jī)上為學(xué)生建立相關(guān)的素材資源文件夾。

2、教師為學(xué)生準(zhǔn)備上課演示用的教師制作的網(wǎng)頁1。

我打算出示一組關(guān)于學(xué)生作文的中學(xué)生作文網(wǎng)。

3、為學(xué)生準(zhǔn)備上課演示用的教師制作的網(wǎng)頁2-----情感小屋網(wǎng)頁，通過在情感小屋的首頁內(nèi)插入表格，通過進(jìn)一步用表格規(guī)劃情感小屋首頁的網(wǎng)頁布局來學(xué)習(xí)網(wǎng)頁中表格的設(shè)計(jì)與制作。

五、教學(xué)流程

出示課前準(zhǔn)備的含有表格的網(wǎng)頁1中學(xué)生作文網(wǎng)，（一）創(chuàng)設(shè)情境，確定問題，布置任務(wù)

師：當(dāng)你漫步在環(huán)境優(yōu)雅的校園時(shí)，是否考慮過校園里的林蔭道和綠化帶的作用？ 生：起著綠化與方便交通的作用

師：其實(shí)還有著非常重要的作用，將行政區(qū)、辦公區(qū)、生活區(qū)、活動(dòng)區(qū)分成各自獨(dú)立的區(qū)域，使整個(gè)校園錯(cuò)落有致，美麗如畫，同樣，如何將網(wǎng)頁布置的美觀整齊，結(jié)構(gòu)清晰呢我們運(yùn)用表格來布局與美化網(wǎng)頁？

任務(wù)一：在FrontPage中有幾種創(chuàng)建表格的方法？它們各有什么優(yōu)點(diǎn)？

方法一：“常用”工具欄“插入表格”命令。

優(yōu)點(diǎn)：操作速度快

方法二：“表格”菜單“插入”→“表格”命令。優(yōu)點(diǎn)：能對表格預(yù)先進(jìn)行設(shè)置。

方法三：“表格”菜單的“繪制表格”命令，手工繪制表格。優(yōu)點(diǎn)：能做出特殊的表格，可以對表格進(jìn)行修改。

任務(wù)二：

如何隱藏表格邊框？-----推出表格屬性的用法 任務(wù)三：

請同學(xué)們嘗試著在FrontPage中制作如下表格：

（二）學(xué)生自主探究學(xué)習(xí)我 就 是 我姓名 年齡 學(xué)校 家庭住址 特長

姓別 QQ1、在FrontPage插入簡單表格這一教學(xué)環(huán)節(jié)，考慮到學(xué)生已有Word知識的基礎(chǔ)，故在此可放手讓學(xué)生自主學(xué)習(xí)。通過讓同學(xué)演示示范，得出插入表格的幾種基本方法。并利用同Word相類似的編輯方法來體會(huì)FrontPage中表格的簡單編輯。完成表格的簡單制作。

2、為完成“表格的調(diào)整”這一教學(xué)任務(wù)，教師可提前演示制作好的表格，帶著如下問題以小組為單位，研究和嘗試對表格進(jìn)一步美化：

（1）怎樣進(jìn)行行高與列寬的調(diào)整（2）怎樣進(jìn)行單元格的合并和拆分（3）怎樣進(jìn)行插入或刪除表格中的行或列，（4）怎樣進(jìn)行平均分布行和列等基本操作（5）怎樣進(jìn)入表格屬性對話框？

（6）表格屬性對話框中相應(yīng)選項(xiàng)的改變會(huì)給網(wǎng)頁的效果帶來哪些變化，起到什么修飾作用？

在此過程中，教師也可深入到各小組的研究討論中去，和同學(xué)們共同尋找答案。然后，請完成表格美化的同學(xué)演示示范，以此突破本課利用表格屬性來美化表格這一教學(xué)難點(diǎn)。

（四）創(chuàng)設(shè)任務(wù)，小組協(xié)作，鞏固新知

在學(xué)生已基本學(xué)會(huì)插入表格和美化表格的基礎(chǔ)上，再次創(chuàng)設(shè)學(xué)習(xí)任務(wù)，以小組為單位，打開站點(diǎn)“情感小屋”，并打開首頁文件index.htm,分別插入四個(gè)表格，依次為：2╳3、2╳2、1╳4、2╳

1、寬度為780像素，水平居中。

最后展示各小組學(xué)生的作品，展開自評與互評。

六、評價(jià)建議：

本課的評價(jià)環(huán)節(jié)貫穿在學(xué)生學(xué)習(xí)活動(dòng)的全過程，在學(xué)生每完成一個(gè)學(xué)習(xí)任務(wù)之后教師都要予以充分肯定，尤其在小組的作品展示階段，教師要注意引導(dǎo)學(xué)生從多方面、多角度評

價(jià)每個(gè)小組的作品，如對各小組的網(wǎng)頁作品，可在網(wǎng)頁內(nèi)容、網(wǎng)頁規(guī)劃及網(wǎng)頁美化等方面進(jìn)行自評和互評。注意培養(yǎng)學(xué)生良好的審美情趣。

第三篇：教學(xué)設(shè)計(jì)(利用表格布局網(wǎng)頁)[推薦]

利用表格布局網(wǎng)頁

教學(xué)設(shè)計(jì)

授課教師：劉春霞

授課班級：計(jì)算機(jī)應(yīng)用1202班

一、課題名稱：利用表格布局網(wǎng)頁

二、授課課時(shí)：1個(gè)課時(shí)

三、教學(xué)內(nèi)容分析

本節(jié)課以利用表格制作一個(gè)簡單主頁為例，要求學(xué)生掌握并靈活運(yùn)用表格及單元格的一些基本屬性設(shè)置，從而設(shè)計(jì)出一個(gè)“匡”字型的主頁。本次課要求學(xué)生具有創(chuàng)建站點(diǎn)的知識，以及Dreamweaver CS3的一些基本操作。

四、學(xué)生特征分析

授課對象是職高高二學(xué)生，學(xué)生已具有熟練操作一些常用軟件的能力，已掌握Dreamweaver CS3的一些基本操作。

五、教學(xué)目標(biāo)（知識與技能、過程與方法、情感態(tài)度與價(jià)值觀）

1、知識與技能目標(biāo)

掌握插入表格、表格基本屬性的理解與設(shè)置、單元格或行的基本屬性的理解與設(shè)置，掌握利用表格布局網(wǎng)頁的方法。

2、過程與方法目標(biāo)

引導(dǎo)學(xué)生分析項(xiàng)目，自主獨(dú)立思考及操作，指導(dǎo)與修正，掌握插入表格、表格基本屬性的理解與設(shè)置、單元格或行的基本屬性的理解與設(shè)置，掌握利用表格布局網(wǎng)頁的方法。

3、情感態(tài)度與價(jià)值觀目標(biāo)

提高學(xué)生的觀察能力及分析能力，調(diào)動(dòng)學(xué)生自主能動(dòng)性，培養(yǎng)學(xué)生較濃的學(xué)習(xí)興趣，使學(xué)生建立正確的人生觀與價(jià)值觀。

六、教學(xué)重點(diǎn)難點(diǎn)

掌握插入表格的方法 掌握表格屬性設(shè)置的基本方法 掌握單元格或行屬性設(shè)置的基本方法 掌握使用表格進(jìn)行頁面布局的基本方法

七、教學(xué)方法

1、講授法

2、演示法

3、任務(wù)驅(qū)動(dòng)法

八、教學(xué)環(huán)境與資源

教師機(jī)，教學(xué)廣播軟件，學(xué)生機(jī)（60臺）

九、教學(xué)過程

1、創(chuàng)設(shè)情境，導(dǎo)入新課

欣賞網(wǎng)頁，分析網(wǎng)頁結(jié)構(gòu)，引入本次課學(xué)習(xí)的項(xiàng)目：利用表格制作一個(gè)簡單的“匡”字型網(wǎng)頁。

2、講解知識，演示操作 講解插入表格的方法，表格屬性設(shè)置的基本方法及單元格屬性設(shè)置的基本方法，（1）插入表格的方法

將光標(biāo)置于頁面中，然后在主菜單中選擇【插入記錄】／【表格】命令或在【插入】／【常用】面板中單擊（表格）按鈕打開【表格】對話框進(jìn)行參數(shù)設(shè)置，最后單擊【確定】按鈕插入表格。（2）表格屬性設(shè)置

首先選中表格，然后通過表格【屬性】面板設(shè)置表格的行數(shù)、列數(shù)、寬度、高度、填充、間距、邊框、對齊方式、背景顏色、背景圖像、邊框顏色等屬性。

▲寬度中的百分比單位一般在制作表格嵌套的時(shí)候用。（3）設(shè)置單元格或行【屬性】的方法

首先選擇單元格或行，然后通過單元格或行【屬性】面板可以設(shè)置單元格的寬度和高度、水平和垂直對齊方式、背景顏色和背景圖像以及邊框顏色等。

（4）展示網(wǎng)頁的最終結(jié)果并引導(dǎo)學(xué)生分析其結(jié)構(gòu)，提示并演示操作的關(guān)鍵步驟，讓學(xué)生獨(dú)立思考完成，培養(yǎng)學(xué)生知識的遷移能力，效果圖如下：

主要操作步驟：

a、新建一個(gè)站點(diǎn)，站點(diǎn)根目錄為自己的文件夾（含有素材），在站點(diǎn)里新建一個(gè)文件index,html。

b、在頁面屬性里設(shè)置字體為“12像素”，頁邊距為“0”

c、制作頁眉部分，插入一個(gè)1行1列的表格，寬度為770像素，其它屬性參考效果圖設(shè)置，然后插入Logo圖片，d、制作主體部分，I、插入一個(gè)1行2列，寬度為770像素的表格，左側(cè)單元格為200像素，設(shè)置間距為2，其它屬性參考效果圖設(shè)置。II、III、在左側(cè)單元格中插入一個(gè)5行1列，寬度為70%的表格，設(shè)置間距為5，其它屬性參考效果圖設(shè)置。（表格嵌套）

在右側(cè)單元格中插入一個(gè)4行2列，寬度為96%的表格，設(shè)置間距為5，表格標(biāo)題為“參考咨詢”，第一列單元格寬度為160像素，其它屬性參考效果圖設(shè)置。（表格嵌套）

e、制作頁腳部分，插入一個(gè)1行1列，寬度為770像素的表格，插入圖像“foot,.jpg”。

3、學(xué)生練習(xí)，巡堂指導(dǎo)

（1）、學(xué)生參考最終效果圖，根據(jù)教師提示的主要步驟，獨(dú)立思考分析，完成主頁。（2）、教師巡堂指導(dǎo)，留意學(xué)生在操作時(shí)出現(xiàn)的細(xì)節(jié)問題，做好作業(yè)點(diǎn)評。

4、上交作業(yè)，點(diǎn)評作業(yè)

（1）、要求學(xué)生把主頁及素材（自己的文件夾）一起交到教師機(jī)“1202班”文件夾中。（2）、抽出兩個(gè)學(xué)生的作業(yè)點(diǎn)評，修正錯(cuò)誤，完善主頁。

5、課堂小結(jié)，宣布下課

本次課主要學(xué)習(xí)插入表格、表格基本屬性的設(shè)置、單元格或行的基本屬性的設(shè)置，利用表格布局網(wǎng)頁的方法。

十、教學(xué)反思（歡迎名位聽課老師提出您寶貴的教學(xué)建議）

第四篇：表格基礎(chǔ)和DIV+CSS網(wǎng)頁布局基礎(chǔ)教案（模版）

? 本部分任務(wù)

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

? 為什么使用表格

? 表格應(yīng)用場合 具體內(nèi)容見ppt ? 表格的基本結(jié)構(gòu)

具體內(nèi)容見ppt

? 表格的基本語法

? Table標(biāo)簽 ? Tr標(biāo)簽 ? Td標(biāo)簽 具體內(nèi)容見ppt 注：表格標(biāo)簽中沒有列標(biāo)簽。

? 如何創(chuàng)建表格

具體內(nèi)容見ppt

? 跨行跨列的表格

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

? 跨多列的表格 具體內(nèi)容見ppt

? 表格的美化修飾

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

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

background屬性用來設(shè)置表格的背景圖片

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

如何設(shè)置對其方式

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

?

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

? 表格的布局

? ? ? 什么是表格布局 使用表格進(jìn)行布局

用表格對網(wǎng)頁的內(nèi)容進(jìn)行整體控制

? DIV+CSS規(guī)劃頁面

? ? ? ? 什么是CSS？

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

DIV+CSS如何規(guī)劃頁面？

? 什么是CSS？

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

? 為什么要使用CSS？

? CSS的特點(diǎn)

便于頁面的修改。便于頁面風(fēng)格的統(tǒng)一。減少網(wǎng)頁的體積。為什么要使用CSS？ 使用CSS布局的優(yōu)點(diǎn) 表現(xiàn)和內(nèi)容相分離 提高頁面瀏覽速度 易于維護(hù)和改版

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

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

由于允許同時(shí)控制多重頁面的樣式和布局。作為網(wǎng)站開發(fā)者，你能夠?yàn)槊總€(gè) HTML 元素定義樣式，并將之應(yīng)用于你希望的任意多的頁面中。如需進(jìn)行全局的更新，只需簡單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。內(nèi)聯(lián)定義

內(nèi)聯(lián)定義即是在對象的標(biāo)記內(nèi)使用對象的style屬性定義適用其的樣式表屬性。?

? 如何使用CSS？

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

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

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

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

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

使用Link標(biāo)簽代替Style標(biāo)簽來導(dǎo)入CSS文件。

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

除了內(nèi)聯(lián)定義是直接作用于標(biāo)簽本身以外，其他CSS使用方式都需要建立標(biāo)簽和樣式之間的映射關(guān)系。主要的映射關(guān)系有： id映射 class映射 標(biāo)簽映射 混合映射 ? CSS樣式和頁面標(biāo)簽元素的對應(yīng)方式

? ? ? ?

? 幾種樣式的優(yōu)先級

? id優(yōu)先級高于class ? 后面的樣式覆蓋前面的 ? 指定的高于繼承 ? 行內(nèi)樣式高于內(nèi)部或外部樣式

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

? DIV+CSS如何規(guī)劃頁面？

請關(guān)注上機(jī)實(shí)驗(yàn)3

By---QQ69848627

第五篇：網(wǎng)頁設(shè)計(jì)教案

課程：

課時(shí)：

教學(xué)對象：教師：

公 開 課 教 案

課題：

時(shí)間：

地點(diǎn)：多媒體教室五

教學(xué)目標(biāo)：

? 嚴(yán)格把握信息產(chǎn)業(yè)部關(guān)于“網(wǎng)頁設(shè)計(jì)師”職業(yè)技能鑒定大綱，使學(xué)生能夠最大程度滿足企業(yè)對網(wǎng)頁設(shè)計(jì)人員的需求，掌握網(wǎng)頁設(shè)計(jì)軟件的高級應(yīng)用。

? 掌握CSS的基本語法與功能。

? 熟悉“CSS樣式”面板與“相關(guān)CSS” 面板的使用。? 學(xué)會(huì)創(chuàng)建、插入樣式表。? 學(xué)會(huì)套用CSS樣式。教學(xué)對象分析：

由于講授對象為高職院校大專生，所講內(nèi)容以實(shí)際操作為主，注重訓(xùn)練學(xué)生動(dòng)手能力，所以本課程以案例教學(xué)的方式講解。教學(xué)重點(diǎn)：

CSS樣式的創(chuàng)建、編輯、導(dǎo)出及應(yīng)用 教學(xué)難點(diǎn)：

應(yīng)用類樣式，設(shè)置CSS樣式屬性 教學(xué)方法和教具準(zhǔn)備：

在帶有大屏幕投影儀和計(jì)算機(jī)相連接的多媒體教室，采用教師講解與學(xué)生實(shí)踐相結(jié)合的授課方式。教學(xué)過程：

一、導(dǎo)入課題

復(fù)習(xí)上一章表單知識，簡要回顧前面幾章的學(xué)習(xí)：設(shè)置文本和網(wǎng)頁屬性、使用圖像、插入表格等，但是僅僅利用以上所學(xué)知識做出來的網(wǎng)頁比較枯燥，頁面并不完美。在網(wǎng)絡(luò)上形形色色的網(wǎng)站中，怎么才能讓自己的頁面獨(dú)樹一幟？

1、CSS樣式功能：能夠使你的頁面保持統(tǒng)一的風(fēng)格，它可以調(diào)整文字間距、行間距、刪除鏈接下劃線、固定背景圖像、制作特殊的邊框、改變鼠標(biāo)指針形狀等，并能夠簡化網(wǎng)站的制作過程。

2、拿css樣式做出來的頁面效果和沒有使用css樣式的頁面做比較，演示css樣式的特效

二、新課講解

1、CSS概述

⑴ 什么是CSS？

CSS（Cascading Style sheets，層疊樣式表）是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁設(shè)計(jì)必不可少的工具之一。CSS定義了控制元素外觀的樣式屬性。

⑵ CSS由來

CSS樣式由全球廣域網(wǎng)協(xié)會(huì)制定，分別是CSS1、CSS2

2、實(shí)例講解

實(shí)例

1、利用css樣式“類型”選項(xiàng)改變文本屬性

分析：Dreamweaver的文本控制功能不足，無論是字體大小，排列方式，還是行間距，等等，它所提供的選擇并不多，為了讓我們的網(wǎng)頁更加美觀，更加規(guī)范，有必要使用CSS。

步驟：

1.單擊“CSS面板”右下角“新建CSS樣式”按鈕，彈出“新建CSS樣式”對話框。設(shè)置完畢后點(diǎn)擊“確定”按鈕。2.在對話框 “類型”選項(xiàng)中，“字體”下拉列表框中選擇“華文新魏”，“大小”選擇“18”，“顏色”中選擇“#003300”，加粗，單擊“確定”按鈕。3.在文檔窗口中選擇文字，從“樣式”下拉列表框中選擇該樣式即可。

小結(jié)：本例中用到css樣式列表中的“類型”屬性。它可以幫助我們輕松地實(shí)現(xiàn)對文本格式的各種設(shè)置。

擴(kuò)展：

1.引入外部樣式表

2.利用“區(qū)塊”選項(xiàng)組設(shè)置字母間距、縮進(jìn)等屬性

實(shí)例

2、作出單張圖像的背景

分析：默認(rèn)狀態(tài)下在“頁面屬性”中選擇圖像，則在網(wǎng)頁文檔的整體背景上重復(fù)出現(xiàn)，在css中可以使背景圖像在指定位置上只顯示一次。

步驟： 1.單擊按鈕，選擇“新建”

2.在“背景圖像”中選擇合適的背景圖像，在“重復(fù)”列表中選擇“不重復(fù)”，在“水平位置”中選擇“右對齊”，在“垂直位置”中選擇“居中”，在“附件”中選擇“固定”，單擊“確定”按鈕。

3.選中標(biāo)簽，在屬性欄的“樣式”中選擇該樣式。

小結(jié)：本例中用到css樣式列表中的“背景”屬性。它可以幫助我們隨意設(shè)置背景圖像。

實(shí)例

3、利用css樣式給表格設(shè)置特殊邊框，用圖像作列表、改變鼠標(biāo)指針。

分析：利用css樣式為表格設(shè)置不同顏色、樣式的邊框，用漂亮的圖標(biāo)作列表也可將鼠標(biāo)指針改成動(dòng)畫。

步驟：如實(shí)例2，但使用不同的新建及應(yīng)用方式。

擴(kuò)展：為標(biāo)簽加雙線邊框、利用“定位”列表項(xiàng)將表格像“層”一樣任意移動(dòng)。

實(shí)例

4、特效文字

說明：在photoshop等圖像制作軟件中經(jīng)常會(huì)聽到濾鏡的概念，濾鏡能作出很多神奇的特效，然而在dreamweaver mx2004中我們可以利用樣式表設(shè)定各種濾鏡效果。

實(shí)例

5、圖像特效

說明：利用“濾鏡”項(xiàng)為圖像設(shè)置不同樣式。

思考題：改變網(wǎng)頁超級鏈接樣式

作業(yè)：

p204頁，課后習(xí)題

上機(jī)練習(xí)：

1.對已經(jīng)編輯的文檔使用新的文本樣式（包括超級鏈接時(shí)樣式改變）2.將單張圖像作背景并且不滾動(dòng)、水平:右對齊，垂直:底部 3.改變鼠標(biāo)指針樣式 4.光暈字

5.對圖像使用濾鏡功能

三、教學(xué)后記