《網(wǎng)絡(luò)信息編輯》教案第十一章jc

PAGEPAGE5第十一章網(wǎng)頁(yè)設(shè)計(jì)與制作一、教學(xué)目標(biāo)1.了解網(wǎng)頁(yè)布局和導(dǎo)航設(shè)計(jì)；2．了解HTML的基本結(jié)構(gòu)，掌握常見(jiàn)標(biāo)簽及其屬性設(shè)置方法；3．了解CSS的概念、添加方法、格式、選擇符的類型，及其繼承和優(yōu)先級(jí)；4．理解CSS中字體、段落、顏色和背景、列表及BOX等對(duì)象的樣式控制方法；5.了解網(wǎng)頁(yè)設(shè)計(jì)工具AdobeDreamweaverCS4的基本知識(shí)；6．理解使用AdobeDreamweaverCS4實(shí)現(xiàn)表格布局和div+CSS布局的方法；7．了解網(wǎng)站的測(cè)試與發(fā)布；8．學(xué)會(huì)使用CSS規(guī)則代替HTML元素中定義格式的屬性；9.靈活應(yīng)用HTML元素、CSS樣式等，制作美觀大方的網(wǎng)頁(yè)。二、課時(shí)分配共兩節(jié)，每節(jié)安排2個(gè)課時(shí)三、教學(xué)重點(diǎn)難點(diǎn)1.頁(yè)面導(dǎo)航設(shè)計(jì)應(yīng)遵循的原則2.文字版面的編輯3．層疊樣式表中，如何控制段落的樣式，如何控制顏色和背景的樣式4.Dreamweaver的基礎(chǔ)應(yīng)用四、教學(xué)大綱第一節(jié)頁(yè)面設(shè)計(jì)基礎(chǔ)一、頁(yè)面布局設(shè)計(jì)頁(yè)面布局元素；頁(yè)面布局的方法；頁(yè)面布局的技術(shù)二、頁(yè)面導(dǎo)航設(shè)計(jì)主要導(dǎo)航和次要導(dǎo)航；導(dǎo)航欄的形式；導(dǎo)航設(shè)計(jì)應(yīng)遵循的規(guī)則第二節(jié)HTML語(yǔ)言基礎(chǔ)一、HTML簡(jiǎn)介HTML的概念；HTML的工作方式；HTML編輯工具二、HTML的基本結(jié)構(gòu)三、HTML標(biāo)簽及其屬性四、HTML主體標(biāo)簽及屬性五、文字版面的編輯六、字體屬性設(shè)置七、HTML超鏈接超鏈接簡(jiǎn)介；鏈接路徑種類；八、HTML列表無(wú)序列表標(biāo)簽；有序列表標(biāo)簽；嵌套列表九、HTML圖像十、HTML表格十一、HTML框架第三節(jié)層疊樣式表CSS技術(shù)一、層疊樣式表的概念和特點(diǎn)二、層疊樣式表的添加方法三、層疊樣式表的格式四、層疊樣式表選擇符的分類HTML標(biāo)簽選擇符；類選擇符；偽類選擇符五、層疊樣式表的繼承和優(yōu)先級(jí)六、控制字體的樣式七、控制段落的樣式八、控制顏色和背景的樣式九、控制列表的樣式十、控制BOX的樣式第四節(jié)網(wǎng)頁(yè)設(shè)計(jì)工具AdobeDreamweaverCS4一、初步認(rèn)識(shí)AdobeDreamweaverCS4DreamweaverCS4工作界面概覽；DreamweaverCS4工作流程概述二、AdobeDreamweaverCS4基礎(chǔ)應(yīng)用DreamweaverCS4站點(diǎn)管理；使用表格對(duì)頁(yè)面進(jìn)行布局；使用HTML框架對(duì)頁(yè)面進(jìn)行布局；使用CSS對(duì)頁(yè)面進(jìn)行布局第五節(jié)應(yīng)用開(kāi)發(fā)示例一、規(guī)劃網(wǎng)站二、建立頁(yè)面及素材存放三、創(chuàng)建網(wǎng)頁(yè)框架和內(nèi)容四、定義CSS規(guī)則第六節(jié)網(wǎng)站的測(cè)試與發(fā)布一、網(wǎng)站的測(cè)試檢查瀏覽器的兼容性；檢查HTML標(biāo)簽二、網(wǎng)站的發(fā)布五、主要概念1.頁(yè)面布局2.HTML3.層疊樣式表六、教學(xué)案例（注：不要與教材的案例重復(fù)）導(dǎo)航設(shè)計(jì)的三次點(diǎn)擊規(guī)則是指，讀者通過(guò)導(dǎo)航應(yīng)該點(diǎn)擊不超過(guò)三次就可以找到其所需要的信息。如果過(guò)多點(diǎn)擊才能獲得信息，就會(huì)使瀏覽的讀者迷失方向和失去信心。如，人民網(wǎng)首頁(yè)的頭版要聞“人民網(wǎng)評(píng)