網(wǎng)頁(yè)效果圖的制作公開課教案

1、網(wǎng)頁(yè)效果圖的制作 制作網(wǎng)頁(yè)標(biāo)志橫幅課程：電子商務(wù)網(wǎng)頁(yè)制作 教學(xué)目標(biāo)：知識(shí)目標(biāo)：1、能描述創(chuàng)建網(wǎng)站主頁(yè)的目的 2、能列舉網(wǎng)頁(yè)應(yīng)包含的內(nèi)容3、了解網(wǎng)頁(yè)標(biāo)志橫幅的作用技能目標(biāo)：1、能繪制網(wǎng)站主頁(yè)的網(wǎng)頁(yè)標(biāo)志橫幅 2、掌握fireworks工具屬性的設(shè)置方法 情感目標(biāo)：對(duì)操作過程中遇到的問題能主動(dòng)思考具有較強(qiáng)的網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)。教學(xué)重點(diǎn)：1、Firewoks中矩形工具、文字工具、直線工具、庫(kù)命令的使用2、Firewoks中元件轉(zhuǎn)換為按鈕的操作難 點(diǎn)：元件轉(zhuǎn)換為按鈕及庫(kù)命令的使用教學(xué)方法：任務(wù)驅(qū)動(dòng)教學(xué)法一、導(dǎo)入提問：同學(xué)們平時(shí)的休閑方式有哪些呢？影視文化通常是我們茶余飯后的談資，平時(shí)也會(huì)去電

2、影院看電影是吧？特別是大片，往往去了電影院要排長(zhǎng)隊(duì)，而且還不一定買的到票，在電子商務(wù)迅速發(fā)展的推動(dòng)下，網(wǎng)上訂票為我們消除了排隊(duì)買票的煩惱。那網(wǎng)上訂票是基于什么樣的平臺(tái)呢？下面我們來看下我們德清的大地?cái)?shù)字影院的網(wǎng)絡(luò)平臺(tái)“哈票網(wǎng)”。二、 新授任務(wù)一：網(wǎng)頁(yè)橫幅的制作1、“哈票網(wǎng)”網(wǎng)站的展示，分析引出一個(gè)網(wǎng)頁(yè)應(yīng)包含哪些內(nèi)容。提問：看了這個(gè)頁(yè)面，請(qǐng)你說出一個(gè)網(wǎng)頁(yè)包含哪些元素呢？（學(xué)生回答，教師補(bǔ)充）引出網(wǎng)頁(yè)橫幅的重要性2、為什么要制作網(wǎng)頁(yè)橫幅？在一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)中，上方的橫幅是最重要的視覺元素。在很多博客網(wǎng)頁(yè)中，它甚至是唯一的視覺元素。所以它的作用可以說是相當(dāng)大的。它必須能夠與網(wǎng)站的風(fēng)格配合，并能傳達(dá)視覺

3、上的信息。它必須讓人看上一眼就讓人知道這個(gè)網(wǎng)站是屬于什么類型，風(fēng)格是什么。（展示不同網(wǎng)站的不同網(wǎng)頁(yè)橫幅效果圖，說明網(wǎng)頁(yè)橫幅是可以多種形式展現(xiàn)的。）3、提出任務(wù)，教師演示：效果圖展示，操作示范 （1）新建一個(gè)文檔：寬1200像素，高為600像素。（2）矩形工具、圓角矩形工具、橢圓工具、文字工具、直線工具的使用及屬性設(shè)置4、學(xué)生活動(dòng)：按所給效果圖及素材制作網(wǎng)頁(yè)橫幅（根據(jù)男女生興趣偏好不同，男女分組操練：男生做NBA網(wǎng)頁(yè)橫幅、女生做淘寶門戶網(wǎng)的網(wǎng)頁(yè)橫幅）操作步驟: （1）新建一個(gè)文檔：新建一個(gè)文檔：寬1200像素，高為600像素。 （2）用矩形工具繪制兩個(gè)矩形：可與畫布同長(zhǎng)，寬度根據(jù)需要自定，大矩形

4、的顏色設(shè)為“#333333”,小矩形的顏色設(shè)為“#666666”（3）在小矩形右側(cè)添加文字，選擇“文字工具”，添加文字，其屬性設(shè)置為：字體宋體，顏色“#66FF00”，字號(hào)“15”（4）用橢圓矩形工具在畫布的左側(cè)繪制兩個(gè)圓形，一大一小，填充顏色漸變，顏色為“#FFFF00”至“#00CC00”,如圖所示（5）用文字工具，在大圓上添加文字“哈”，文字屬性設(shè)置為：“白色”“隸書”“90”；小圓上添加文字“票”，屬性設(shè)置為“白色”“幼圓”“30”；再用文字工具在“哈票”右側(cè)添加文字“快速訂票 輕松觀影”，屬性設(shè)置為“白色”“幼圓”“24”，緊接著下方添加網(wǎng)址，屬性設(shè)置為“#66FF00”“Centu

5、ry Gothic”“22”5、教師巡回指導(dǎo)，發(fā)現(xiàn)問題，個(gè)別輔導(dǎo)任務(wù)二、美化橫幅添加陰影、元件轉(zhuǎn)換為按鈕 6、提出任務(wù)，教師演示：效果網(wǎng)頁(yè)橫幅展示，操作示范（1）添加陰影（2）元件轉(zhuǎn)換為按鈕的操作（3）“庫(kù)”命令的操作學(xué)生活動(dòng)：按所給效果網(wǎng)頁(yè)制作操作步驟：（1）選中要添加陰影的對(duì)象“哈”，選擇“命令” “創(chuàng)意”“添加陰影”，調(diào)整到所需要的位置 （2）選擇“圓角矩形工具”繪制一個(gè)圓角矩形，顏色填充為“#333333”描邊選擇“鉛筆”，筆尖大小和邊緣都為“3”，顏色為“#66FF00”按，彈出元件屬性對(duì)話框，名稱改為“選擇”，類型為“按鈕”，單擊確定。（3）打開“庫(kù)”面板,將元件拖動(dòng)到網(wǎng)頁(yè)中，排列對(duì)其，選中對(duì)象，選擇文字工具，添加文字“選影院訂票”“選影片訂票”（4）按可以預(yù)覽網(wǎng)頁(yè)，操作完成后，保存為“png”格式的文檔，同時(shí)以網(wǎng)頁(yè)形式導(dǎo)出，保存在桌面以自己姓名命名的文件夾。（在桌面上新建文件夾，以自己的名字命名） 教師巡回指導(dǎo)三、點(diǎn)評(píng)：對(duì)學(xué)生上傳的作品進(jìn)行點(diǎn)評(píng)，學(xué)生互評(píng)。四、課堂小結(jié)：本節(jié)課我們學(xué)習(xí)了網(wǎng)頁(yè)標(biāo)志橫幅的制作，學(xué)習(xí)