第一篇：網(wǎng)頁(yè)效果圖的制作公開(kāi)課教案

網(wǎng)頁(yè)效果圖的制作

——制作網(wǎng)頁(yè)標(biāo)志橫幅

課程：電子商務(wù)網(wǎng)頁(yè)制作

班

級(jí)：09電商3+2 時(shí)間：12月16日第三節(jié)

授課教師：李曉琳

教學(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、掌握f(shuō)ireworks工具屬性的設(shè)置方法

情感目標(biāo)：對(duì)操作過(guò)程中遇到的問(wèn)題能主動(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)入

提問(wèn)：同學(xué)們平時(shí)的休閑方式有哪些呢？——影視文化通常是我們茶余飯后的談資，平時(shí)也會(huì)去電影院看電影是吧？特別是大片，往往去了電影院要排長(zhǎng)隊(duì)，而且還不一定買(mǎi)的到票，在電子商務(wù)迅速發(fā)展的推動(dòng)下，網(wǎng)上訂票為我們消除了排隊(duì)買(mǎi)票的煩惱。那網(wǎng)上訂票是基于什么樣的平臺(tái)呢？下面我們來(lá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)容。

提問(wèn)：看了這個(gè)頁(yè)面，請(qǐng)你說(shuō)出一個(gè)網(wǎng)頁(yè)包含哪些元素呢？

（學(xué)生回答，教師補(bǔ)充）——引出網(wǎng)頁(yè)橫幅的重要性

2、為什么要制作網(wǎng)頁(yè)橫幅？

在一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)中，上方的橫幅是最重要的視覺(jué)元素。在很多博客網(wǎng)頁(yè)中，它甚至是唯一的視覺(jué)元素。所以它的作用可以說(shuō)是相當(dāng)大的。它必須能夠與網(wǎng)站的風(fēng)格配合，并能傳達(dá)視覺(jué)上的信息。它必須讓人看上一眼就讓人知道這個(gè)網(wǎng)站是屬于什么類型，風(fēng)格是什么。（展示不同網(wǎng)站的不同網(wǎng)頁(yè)橫幅效果圖，說(shuō)明網(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è)橫幅、女生做淘寶門(mén)戶網(wǎng)的網(wǎng)頁(yè)橫幅）

操作步驟:（1）新建一個(gè)文檔：新建一個(gè)文檔：寬1200像素，高為600像素。

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

5、教師巡回指導(dǎo)，發(fā)現(xiàn)問(wè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āi)“庫(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í)FIREWORKS中矩形工具、圓角 矩形工具、文字工具、直線工具及庫(kù)命令的操作，重點(diǎn)掌握元件轉(zhuǎn)換為按鈕的操作及庫(kù)命令的使用。

五、作業(yè)：完成實(shí)驗(yàn)指導(dǎo)練習(xí)的操作練習(xí)和實(shí)驗(yàn)報(bào)告

第二篇：FrontPage制作簡(jiǎn)單網(wǎng)頁(yè)(高二公開(kāi)課教案)（本站推薦）

FrontPage制作簡(jiǎn)單網(wǎng)頁(yè)

（高二信息技術(shù)公開(kāi)課教學(xué)教案）

［ 教學(xué)目的 ］

了解網(wǎng)站的基本結(jié)構(gòu)、構(gòu)建網(wǎng)站的步驟，掌握用FrontPage制作簡(jiǎn)單網(wǎng)頁(yè) ［ 教學(xué)重點(diǎn) ］

網(wǎng)站規(guī)劃、在網(wǎng)頁(yè)中輸入文字，插入圖片和表格 ［ 教學(xué)難點(diǎn) ］

在網(wǎng)頁(yè)中輸入文字，插入圖片和表格 ［ 教學(xué)形式 ］ 演示與練習(xí)穿插進(jìn)行 ［ 教學(xué)過(guò)程 ］ ［導(dǎo)入新課］

大家都很喜歡上網(wǎng)，因?yàn)榫W(wǎng)上有許多東西（學(xué)習(xí)資料、游戲、軟件、音樂(lè)……）可供我們選擇，而且許多都是免費(fèi)的。這就是網(wǎng)絡(luò)的一個(gè)很重要的特點(diǎn)――資源共享。這些資源都是放在一個(gè)一個(gè)網(wǎng)站中的。我們也可以構(gòu)建一個(gè)網(wǎng)站，把你的珍藏整理好放上去。這樣別人就可以分享你的東西。目前，在網(wǎng)上就有許多有名的個(gè)人網(wǎng)站，像華軍軟件、電腦之家、驅(qū)動(dòng)之家、九天音樂(lè)等。［講授新課］

要想在網(wǎng)上安家落戶，大體上有以下三步：網(wǎng)站規(guī)劃、網(wǎng)頁(yè)制作和上傳以布。今天我們就先來(lái)學(xué)習(xí)網(wǎng)站規(guī)劃和簡(jiǎn)單網(wǎng)頁(yè)的制作。

一、網(wǎng)站規(guī)劃

（在制作網(wǎng)頁(yè)之前要先建站，如果沒(méi)有事先的準(zhǔn)備及策劃，只盲目的開(kāi)始編輯網(wǎng)頁(yè)，將要花更多的時(shí)間和精力在網(wǎng)站的整合上。所以要養(yǎng)成先建站再織網(wǎng)的好習(xí)慣）

1． 確定網(wǎng)站的主題

2． 網(wǎng)站要包含哪些咨訓(xùn)與服務(wù) 3． 構(gòu)思每個(gè)網(wǎng)頁(yè)的草圖 4． 確定網(wǎng)頁(yè)與網(wǎng)頁(yè)之間的鏈接

演示：

1、用FrontPage中的導(dǎo)航來(lái)更直觀地了解網(wǎng)站結(jié)構(gòu)；

2、用FrontPage新建一個(gè)站點(diǎn)；

（1）打開(kāi)FrontPage，選擇“文件”－＞“新建”－＞“站點(diǎn)”；（2）單擊“只有一個(gè)網(wǎng)頁(yè)的站點(diǎn)”

注：在“文件夾列表”中顯示該站點(diǎn)中所有的文件夾和文件。（一般新建站點(diǎn)后就有兩個(gè)文件夾，我們一般將網(wǎng)站所需的圖片放在“image”文件夾中，當(dāng)然你也可以根據(jù)需要新建一些文件夾，但必須在一個(gè)站點(diǎn)中）練習(xí)：

1． 自己構(gòu)建一個(gè)個(gè)人網(wǎng)站；

2． 新建個(gè)人網(wǎng)站（當(dāng)然此時(shí)的個(gè)人網(wǎng)站還只是和個(gè)空白網(wǎng)頁(yè)）二．制作網(wǎng)頁(yè)“自我簡(jiǎn)介”（先展示一下做好的“自我簡(jiǎn)介”）

（一）在網(wǎng)頁(yè)中輸入文字和插入表格

1． 在網(wǎng)頁(yè)中編輯工作區(qū)輸入文字“自我簡(jiǎn)介”，居中；

2． 選中文字“自我簡(jiǎn)介”，選擇“楷體＿GB2312”，字號(hào)為“6（24）磅”，粉紅色）； 3． 選擇“插入”－＞“換行符”，在彈出的“換行符屬性”對(duì)話框中選擇“普通換行符”，單擊“確定”，光標(biāo)移到下一行； 4． 單擊“常用”工具欄上的“插入文件中的圖片”按鈕，彈出“圖片”對(duì)話框； 5． 單擊“剪貼畫(huà)”按鈕，在“比喻”類別中選擇一幅圖片，將此圖片插入網(wǎng)頁(yè)中； 6． 調(diào)整圖片的大小，居中放置；

7． 選擇“格式”－＞“背景”命令在網(wǎng)頁(yè)中加入背景圖片； 8． 單擊“網(wǎng)頁(yè)編輯區(qū)”下方的“預(yù)覽”標(biāo)簽，可以預(yù)覽網(wǎng)頁(yè)的效果。

（二）制作“自我簡(jiǎn)歷表”

網(wǎng)頁(yè)中僅有一個(gè)標(biāo)題和一幅圖片，內(nèi)容太少，下面插入一個(gè)表格 1． 單擊“常用”工具欄上的“插入表格”按鈕，制作一個(gè)6行2列的表格； 2． 在第一行第二列中，將單元格拆分成3列； 3． 輸入“自我簡(jiǎn)歷表”中的文字；

4． 選中第一、三列，將字體設(shè)為“黑體”，字號(hào)為“4（14）磅”，字型為“粗體”，選中第二、四列，將字體設(shè)為“楷體”，字號(hào)為“4（14）磅”，選中這個(gè)表格，單擊“居中”按鈕，選中第二、四、六行，設(shè)置顏色為“淺綠色”；選中這個(gè)表格，單擊右鍵，選擇“表格屬性”命令，選擇邊框顏色為“粉紅色”，粗細(xì)為1；單擊確定。注：

1、格的邊框粗細(xì)設(shè)為0，則表格不顯示邊框。（我們可以利用這一特點(diǎn)來(lái)合理安排網(wǎng)頁(yè)的版面設(shè)置，書(shū)上163頁(yè)圖7.14的混合排版效果就是一例

2、“文件夾列表”中，雙擊某一網(wǎng)頁(yè)，該網(wǎng)頁(yè)就會(huì)顯示在網(wǎng)頁(yè)編輯區(qū)中，練習(xí)：

1． 在剛剛新建的站點(diǎn)上新建幾個(gè)網(wǎng)頁(yè)；

2． 在編輯網(wǎng)頁(yè)時(shí)，學(xué)會(huì)使用表格來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行排版。三．小結(jié)

展示和評(píng)講學(xué)生作品

第三篇：電腦效果圖制作教案

電腦效果圖制作教案 第1-4課時(shí):

一、課題：初識(shí)3dsmax

二、教學(xué)目的：了解3ds max 及其應(yīng)用領(lǐng)域、掌握3ds max 的工作流程、掌握3ds max 的安裝方法、認(rèn)識(shí)3ds max的工作界面、掌握3dsmax視圖特點(diǎn)

三、教學(xué)重點(diǎn)：界面設(shè)置、基本操作方法

四、教學(xué)過(guò)程：理論講述+上機(jī)操作

五、板書(shū)設(shè)計(jì)：

第一部分：初識(shí)

3dsmax

一、3ds max 及其應(yīng)用領(lǐng)域

3ds max是當(dāng)今世界上銷售量最大的集三維建模、動(dòng)畫(huà)及渲染為一體的應(yīng)用軟件。隨著該軟件的不斷升級(jí)換代，其功能日趨完善和強(qiáng)大，被廣泛應(yīng)用于工業(yè)產(chǎn)品設(shè)計(jì)、室內(nèi)效果圖、建筑效果圖制作、產(chǎn)品造型及影視廣告制作等行業(yè)。如圖所示為利用3ds max制作的室內(nèi)外效果圖。3ds max是目前世界上應(yīng)用最廣泛的三維建模.動(dòng)畫(huà).渲染軟件，本課程側(cè)重室內(nèi)外設(shè)計(jì)，建筑設(shè)計(jì)方面內(nèi)容的講解，通過(guò)室內(nèi)外模型元素創(chuàng)建的講解系統(tǒng)學(xué)習(xí)3D的功能。

二、3ds max 的工作流程

3ds max 9的工作流程大體分為設(shè)置場(chǎng)景、建立對(duì)象模型、使用材質(zhì)、放置燈光和攝像機(jī)、設(shè)置場(chǎng)景動(dòng)畫(huà)和渲染場(chǎng)景等6部分。

設(shè)置場(chǎng)景 建立對(duì)象模型 使用材質(zhì) 放置燈光和攝影機(jī) 設(shè)置場(chǎng)景動(dòng)畫(huà) 渲染場(chǎng)景

三、了解3DS MAX操作界面

從總界面了解3DS MAX.它分為菜單欄,工作視窗,命令面板,動(dòng)畫(huà)面板,窗口控制板,工具圖標(biāo)欄,輔助信息欄等幾個(gè)部份,先來(lái)了解下它各部份的簡(jiǎn)介.1、菜單欄 主菜單位于屏幕最上方,提供了命令選擇.它的形狀和Windows菜單相似。主菜單上共有十一個(gè)菜單項(xiàng)： File(文件)Edit(編輯)Tools(工具）Group(組）Views(視圖)Rendering(渲染)通過(guò)某種算法，體現(xiàn)場(chǎng)景的燈光，材質(zhì)和貼圖等效果。Trsck View(軌跡視圖)控制有關(guān)物體運(yùn)動(dòng)方向和它的軌跡操作

2、工具欄

幫助圖標(biāo)

左邊的按鈕為撤銷上次操作，右邊按鈕為恢復(fù)上次操作

左邊按鈕為選擇對(duì)象，使之和其它的對(duì)象鏈接，建立父子關(guān)系，右邊按鈕為撤消鏈接。結(jié)合到空間扭曲，使物體產(chǎn)生空間扭曲效果。

選擇對(duì)象組按鈕：選擇物體、矩形區(qū)域選擇工具、選擇過(guò)濾器、根據(jù)名字選擇物體、選擇并移動(dòng)物體、選擇并旋轉(zhuǎn)物體、選擇并縮放物體、縮放工具：正比例縮放，非比例縮放

按下X就是說(shuō)物體只能在X軸移動(dòng)或變換，按下Y就是只能在Y軸進(jìn)行操作，按下Z就是只能在Z軸操作。

反向動(dòng)力開(kāi)關(guān)。用來(lái)打開(kāi)或關(guān)閉反向動(dòng)力學(xué)。鏡像操作、環(huán)形陣列操作、對(duì)齊工具

第一個(gè)是打開(kāi)軌跡視窗。第二個(gè)是打開(kāi)關(guān)聯(lián)物體的子父關(guān)系.材質(zhì)編輯器，按M鍵彈出一個(gè)材質(zhì)編輯窗，從而進(jìn)行對(duì)物體的材質(zhì)進(jìn)行貼圖處理

渲染場(chǎng)景，打開(kāi)后彈出一個(gè)渲染窗，在那兒設(shè)置動(dòng)畫(huà)的輸出時(shí)間，輸出動(dòng)畫(huà)大小，圖質(zhì)等設(shè)置?？焖黉秩荆龊昧藙?dòng)畫(huà)之后想看下后果，就按它看一下。第四個(gè)是選擇渲染的條件，第五個(gè)是接上次渲染。

3、命令面板

命令面板是3DS MAX的核心部分，包括場(chǎng)景中建模和編輯物體的常用工具及命令

Create(創(chuàng)建)：創(chuàng)建基本的物體

Modify(修改)，它是用于修改和編輯被選擇的物體。Hierarchy(層級(jí))，用來(lái)控制有關(guān)物體的層次連接。

Motion(運(yùn)動(dòng)),好像車輪那個(gè)圖標(biāo)，它是用來(lái)控制動(dòng)畫(huà)的變換，比如位移、縮放、軌跡等運(yùn)動(dòng)的狀態(tài)。

Display(顯示)，作用于控制并影響物體在視圖中的顯示狀態(tài)，比如隱藏物體或恢復(fù)被隱藏的物體。它在有很多物體的時(shí)候而將一些物體隱藏起來(lái)，對(duì)工作很好用。

4、視圖控制器

:這個(gè)功能同上面的一樣，但它同時(shí)影響著四個(gè)視窗。

：點(diǎn)擊上面這個(gè)圖標(biāo)是當(dāng)前激活視窗以最大的方式顯示物體，而下面的圖標(biāo)是最大顯示被選中的物體。它只能影響一個(gè)視窗。

：點(diǎn)擊上面的圖標(biāo)是四個(gè)視窗的所有物體以最大的方式全部顯示出來(lái)。而下面的圖標(biāo)是以最大方式在四個(gè)視窗中顯示被選中的物體。

：在正面視窗中出現(xiàn)，比如你現(xiàn)在激活的是左視圖、底視圖、前視圖、頂視圖等，而在激活透視圖是不會(huì)看到這個(gè)圖標(biāo)的，它的功能是，在所有正面視窗內(nèi)用鼠標(biāo)框選物體或物體某一部分在該視窗以最大的方式顯示出來(lái)。

：這個(gè)圖標(biāo)只在透視窗和攝影視窗出現(xiàn)，點(diǎn)擊該命令，在透視圖內(nèi)上下拖動(dòng)，場(chǎng)景中的視角和視景會(huì)發(fā)生變化。

：點(diǎn)擊該圖標(biāo)，就會(huì)在視窗內(nèi)出現(xiàn)一個(gè)小手，任意拖動(dòng)，可以移動(dòng)視窗內(nèi)的場(chǎng)景。

：點(diǎn)擊最上面那個(gè)在視窗內(nèi)就會(huì)出現(xiàn)一個(gè)綠圈，有四個(gè)頂點(diǎn)，只要是用于透視圖的角度調(diào)節(jié)，很常用，但用在其它視窗內(nèi)，就會(huì)變?yōu)橛脩粢晥D了。中間這個(gè)叫[弧形旋轉(zhuǎn)所選物體]的，最下面叫[弧形旋轉(zhuǎn)子目標(biāo)] ：點(diǎn)擊該命令，當(dāng)前的視窗就會(huì)滿屏顯示，再點(diǎn)它，就會(huì)回復(fù)正常，也是很常用的一個(gè)圖標(biāo)。鍵盤(pán)上的快捷鍵是“W”.5、工作視圖的改變

缺省窗口為：Top(頂視圖)Front(前視圖)Left(左視圖)Perspective(透視圖)。T=Top(頂視圖)B=Botton(底視圖）L=Left(左視圖）R=Right(右視圖）

U=User(用戶視圖）F=Front(前視圖）K=Back(后視圖）C=Camera(攝像機(jī)視圖）Shift鍵加$鍵=燈光視圖 W=滿屏視圖

1、選擇方法（Selection）

基本選擇 選擇物體的基本操作方法與技巧，包括加減選擇、全選、反選、全部取消選擇 區(qū)域選擇 區(qū)域選擇的方法，包括Window窗口和Crossing橫跨方式；方框、圓形、多邊形、套索等區(qū)域。

名稱選擇 使用名稱選擇對(duì)話框Name Selection進(jìn)行物體名稱和類別選擇的方法。選擇過(guò)濾 Selection Filter選擇過(guò)濾功能，對(duì)選擇的類別進(jìn)行過(guò)濾的方法。

隔離選擇 在大型場(chǎng)景中使用Isolate Selection隔離選擇方法隔離選擇個(gè)別物體的操作技巧。

2、Transform Type-In(用鍵盤(pán)輸入變換數(shù)值)移動(dòng)變換 Move移動(dòng)工具的使用方法，包括操縱軸的設(shè)置方法。

旋轉(zhuǎn)變換 Rotate旋轉(zhuǎn)工具的使用方法，包括新增旋轉(zhuǎn)操縱軸的詳細(xì)用法。

放縮變換 Scale等比、不等比和擠壓放縮工具的使用方法，包括新增放縮操縱軸的使用方法。

數(shù)值變換

3、復(fù)制工具 變換復(fù)制

Mirror(鏡像)Array(陳列)批量復(fù)制物體并進(jìn)行排列的工具 一維、二維和三維陣列復(fù)制 石膏柱制作與排列練習(xí)

實(shí)踐:

1、熟悉3dsmax軟件工具欄、視圖窗口

第5-6課時(shí):

一、課題： 3dsmax的創(chuàng)建系統(tǒng)

二、教學(xué)目的：學(xué)習(xí)三維模型的創(chuàng)建，建簡(jiǎn)單場(chǎng)景效果

三、教學(xué)重點(diǎn)：模型創(chuàng)建與三維空間的理解

四、教學(xué)過(guò)程：理論講述+上機(jī)操作

五、板書(shū)設(shè)計(jì)：

3dsmax的創(chuàng)建系統(tǒng)一、標(biāo)準(zhǔn)幾何體（Standard Primitives）

一、標(biāo)準(zhǔn)幾何體（Standard Primitives）

1、Box（立方體）段數(shù)

2、Cone（錐體）制作圓錐、圓臺(tái)、棱錐、棱臺(tái)，以及局部

3、Sphere（球體）制作面狀或光滑的球體、局部球體（包括半球體）

4、GeoSphere（幾何球體）制作GeoSphere（幾何球體）、三角面、標(biāo)準(zhǔn)四面體，八面體

5、Cylinder（柱體）通過(guò)Cylinder（柱體）命令可以制作棱柱體、圓柱體、局部圓柱或棱柱體.6、Tube（圓管）通過(guò)Tube（圓管）命令創(chuàng)建各種空心圓管物體，包括圓管、棱管以及局部圓管.7、Torus（圓環(huán)）通過(guò)Torus（圓環(huán)）命令制作立體的圓環(huán)圈，截面為正多邊形。通過(guò)對(duì)正多邊形邊數(shù)、光滑度、旋轉(zhuǎn)等控制來(lái)產(chǎn)生不同的圓環(huán)效果，切片參數(shù)可以制作局部的圓環(huán).8、Pyramid（四棱錐）學(xué)習(xí)通過(guò)Pyramid（四棱錐）命令創(chuàng)建四棱錐模型.9、Teapot（茶壺）通過(guò)Teapot（茶壺）命令創(chuàng)建一只標(biāo)準(zhǔn)的茶壺造型，或者是它的一部分（如壺蓋、壺嘴等）

10、Plane（平面）通過(guò)Plane（平面）命令創(chuàng)建平面物體

二、擴(kuò)展幾何體（Extended Primitives）

在Create（創(chuàng)建）命令面板中，Geometry（幾何體目錄）項(xiàng)下的下拉菜單中選擇Extended Primitives擴(kuò)展圖元選項(xiàng)，這時(shí)幾何體的建立面板上會(huì)出現(xiàn)如圖所示的項(xiàng)目

1、Hedra（異面體）用Hedra（異面體）命令創(chuàng)建各種具備奇特表面組合的多面體，利用它的參數(shù)調(diào)節(jié)，可以制作出種類繁多的奇怪造型。

2、Torus Knot（環(huán)形節(jié)）Torus Knot（環(huán)形節(jié)）命令是擴(kuò)展幾何體中最復(fù)雜的一個(gè)工具，組合產(chǎn)生的效果不勝枚舉，長(zhǎng)于創(chuàng)建管狀、纏繞、帶囊腫類的造型。

3、ChamferBox（倒角立方）通過(guò)ChamferBox（倒角立方）命令直接產(chǎn)生帶倒角的立方體，省去了Bevel制作的過(guò)程。

4、ChamferCyl（倒角柱）通過(guò)ChamferCyl（倒角柱）命令制作帶有圓角的柱體。

5、OilTank（油桶）通過(guò)OilTank（油桶）命令制作帶有球狀凸出頂部的柱體

6、Capsule（膠囊）通過(guò)Capsule（膠囊）命令制作兩端帶有半球的圓柱體，類似膠囊的形狀。

7．Spindle（紡錘體）通過(guò)Spindle（紡錘體）命令制作兩端帶有圓錐尖頂?shù)闹w，象鉆石、筆尖、紡錘等造型。

8、L-Ext（L形墻）通過(guò)L-Ext（L形墻）命令建立L形夾角的立體墻模型，主要用于建筑快速建模。

9、ngon（球棱柱）通過(guò)Gengon（球棱柱）命令制作帶有倒角棱的柱體，直接在柱體的邊棱上產(chǎn)生光滑的倒角。

10、C-Ext（C形墻）通過(guò)C-Ext（C形墻）命令制作C形夾角的立體墻模型，主要用于建筑快速建模。

11、RingWave（環(huán)形波）通過(guò)RingWave（環(huán)形波）命令創(chuàng)建一個(gè)不規(guī)則邊緣的特殊圓環(huán)?？梢酝ㄟ^(guò)設(shè)置動(dòng)畫(huà)控制它的變形，應(yīng)用于不同類型的特效動(dòng)畫(huà)中。

12、ose（軟管）Hose（軟管）軟管是一種可以連接在兩個(gè)物體之間的可變形物體。Prism（三棱柱）通過(guò)Prism（三棱柱）命令制作等腰和不等邊三棱柱體。

實(shí)踐：

1、命令面板中各種幾何體和形狀工具的創(chuàng)建練習(xí)

2、直線工具繪制線條

第7-8課時(shí):

一、課題：二維圖形（Shapes）轉(zhuǎn)化三維圖形

二、教學(xué)目的：學(xué)習(xí)二維圖形的創(chuàng)建方法：line、矩形、圓形、lathe、excude

三、教學(xué)重點(diǎn)：圖形的編輯與修改

四、教學(xué)過(guò)程：理論講述+上機(jī)操作

五、板書(shū)設(shè)計(jì)：

1、line（線）Line（線）命令能夠自由繪制任何形狀的封閉或開(kāi)放型曲線（包括直線），可以直接點(diǎn)取畫(huà)直線，也可以拖動(dòng)鼠標(biāo)繪制曲線，對(duì)曲線的彎曲方式，有Corner（角）、Smooth（光滑）、Bezier（貝茲）三種。

2、ectangle（矩形）通過(guò)Rectangle（矩形）命令創(chuàng)建矩形。

3、Circle（圓）通過(guò)Circle（圓）命令創(chuàng)建圓形。

4、Ellipse（橢圓）通過(guò)Ellipse（橢圓）命令創(chuàng)建橢圓。

5、Donut（同心圓環(huán)）通過(guò)Donut（同心圓環(huán)）命令制作同心的圓環(huán)

6、NGon（多邊形）通過(guò)NGon（多邊形）命令制作任意邊數(shù)的正多邊形。

7、Star（星形）通過(guò)Star（星形）命令創(chuàng)建多角星形

8、Text（文本）通過(guò)Text（文本命令直接產(chǎn)生文字圖形）

9、Helix（螺旋線）通過(guò)Helix（螺旋線）命令制作平面或空間的螺旋線

10．ection（剖面）Section（剖面）命令能夠通過(guò)截取三維造型的剖面而獲

得二維圖形。（演示獲取房屋界面線）。第9-12課時(shí):

二、課題：二維圖形（Shapes）轉(zhuǎn)化三維圖形練習(xí)

二、教學(xué)目的：學(xué)習(xí)二維圖形的創(chuàng)建方法：edit spline 線條建模 line、矩形、圓形、lathe、excude

三、教學(xué)重點(diǎn)：圖形的編輯與修改

四、教學(xué)過(guò)程：理論講述+上機(jī)操作

五、板書(shū)設(shè)計(jì)：

二維圖形（Shapes）轉(zhuǎn)化三維圖形練習(xí)

一、edit spline 線條建模與lathe命令

碗的制作 步驟：

直線工具—點(diǎn)的修改—圓角工具—Lathe命令—參數(shù)修改 蘋(píng)果的制作

步驟：直線工具-點(diǎn)的修改—lathe工具—復(fù)制移動(dòng)—render 臺(tái)燈的制作

直線工具—lathe—編輯樣條線—lathe—對(duì)齊工具

羅馬柱的制作

Star工具—excude擠出—直線工具—車削—復(fù)制工具—對(duì)齊工具—移動(dòng)捕捉—陣列工具

小方桌的制作

矩形工具—復(fù)制工具—extrude擠出—復(fù)制 茶幾的制作

圓形工具（start new shape）—擠出

作業(yè)：

1、p63練習(xí)

2、設(shè)計(jì)一款茶幾

第13-14課時(shí):

三、課題：二維圖形（Shapes）轉(zhuǎn)化三維圖形練習(xí)

二、教學(xué)目的：學(xué)習(xí)二維圖形的創(chuàng)建方法：edit spline 線條建模 line、矩形、圓形、lathe、excude

三、教學(xué)重點(diǎn)：圖形的編輯與修改

四、教學(xué)過(guò)程：理論講述+上機(jī)操作

五、板書(shū)設(shè)計(jì)：

第四篇：ps課程作業(yè)二：制作網(wǎng)頁(yè)效果圖

課程作業(yè)2（圖層的應(yīng)用）：

通過(guò)以下指導(dǎo)步驟，學(xué)會(huì)如何在photoshop中制作網(wǎng)頁(yè)效果圖。

最終效果圖

在photoshop中新建文檔

1在photoshop中新建一個(gè)文檔，尺寸為980px × 830px.如果你在photoshop軟件界面中，沒(méi)有看到在畫(huà)布的周圍看到標(biāo)尺，點(diǎn)擊試圖>標(biāo)尺（Ctrl + R）可以顯示標(biāo)尺。在畫(huà)布的四個(gè)邊，分別拖拽四條標(biāo)尺線。在這四條線中間，我們將繪制我們的頁(yè)面。

創(chuàng)建頁(yè)面背景

-***3141516

你可能注意到，我們剛剛創(chuàng)建的矩形并沒(méi)有圓角。為了糾正這個(gè)小的細(xì)節(jié)，我們應(yīng)用剪輯蒙板（clipping mask）這個(gè)概念。右鍵點(diǎn)擊圖層 “navigation bar” layer, 選擇創(chuàng)建剪切蒙版。

好了，我們接下來(lái)要做的是，創(chuàng)建當(dāng)前頁(yè)的按鈕。選擇矩形工具(U), 設(shè)置顏色為#A6A43F, 創(chuàng)建一個(gè)高為60px的矩形。

設(shè)置透明度為15%，命名該圖層為”current page button“.36 然后向下設(shè)置剪輯蒙板。

選擇剛剛的四個(gè)圖層，點(diǎn)中ctrl然后分別在圖層面板中點(diǎn)擊這四個(gè)圖層，然后點(diǎn)擊 Ctrl + G群組。設(shè)置這個(gè)群組名為 “bg & navigation bar“.38 選擇文字工具(T)，給導(dǎo)航添加一些文字，用顏色#A6A43F.在這次的設(shè)計(jì)中，我用的字體是 Avenir LT 65 Medium。如果你沒(méi)有這個(gè)字體，可以用你喜歡的字體代替。（可以借助標(biāo)準(zhǔn)線來(lái)制作）

五、給“特色項(xiàng)目”部分，自定義一個(gè)圖案

好了，我們要?jiǎng)?chuàng)建一個(gè)圖案。新建一個(gè)文檔，文件>新建(Ctrl + N), 尺寸是 5px * 5px, 透明背景。

設(shè)置前景色為 #2A2009, 在工具欄中選擇鉛筆工具(B)，在你的畫(huà)布中間，畫(huà)一個(gè)1px大小的方框。

點(diǎn)擊編輯>定義圖案。命名這個(gè)圖案，然后點(diǎn)擊ok。好了，你可以關(guān)閉這個(gè)文件了。

六、創(chuàng)建“特色項(xiàng)目”區(qū)域

選擇矩形工具(U),創(chuàng)建一個(gè)高為330px的任何顏色的矩形。

在圖層面板上，雙擊該圖層，打開(kāi)圖層屬性面板。按照下圖進(jìn)行參數(shù)設(shè)定。

命名這個(gè)圖層為 “pattern“.45 選擇圓角矩形工具(U), 設(shè)置圓角半徑8px, 顏色 #A6A43F, 創(chuàng)建一個(gè)寬 940px 高240px的圓角矩形。

設(shè)置圖層透明度為50%，命名該圖層為 “featured project bg“.47 選擇矩形工具(U), 設(shè)置顏色#A6A43F, 創(chuàng)建一個(gè)尺寸為 610px * 220px 的矩形。這個(gè)將會(huì)是“特色項(xiàng)目”的圖片的位置。，命名該圖層為 “image bg.”

導(dǎo)入任何你喜歡的圖片。

把圖片放在你剛剛創(chuàng)建的矩形的上面，在圖層面板上單擊創(chuàng)建圖層剪切蒙版。命名這個(gè)圖層為 “image“.50 選擇文字工具(T)，在右邊添加一些文字。按照下圖進(jìn)行書(shū)寫(xiě)。群組這些文字，命名該群組為 “text“.七、創(chuàng)建按鈕call-to-action

好了，我們要在“特色項(xiàng)目”的底部創(chuàng)建兩個(gè)按鈕。選擇圓角矩形工具(U), 設(shè)置半徑為8px，顏色為#A6A42F, 創(chuàng)建一個(gè)小矩形。命名該圖層為 “button 1“.52我們希望按鈕的上面不是圓角。按照下面的操作進(jìn)行：

A.B.確定圖層”button 1″的蒙版是選中的。

選擇直接選擇工具(A)，在你看到的路徑上單擊。好了，這時(shí)候你將看到在每個(gè)圓角上都有兩個(gè)錨點(diǎn)。

C．選擇轉(zhuǎn)換點(diǎn)工具(默認(rèn)圖標(biāo)是個(gè)小鋼筆頭，在這一組工具中可以找到)，單擊這四個(gè)錨點(diǎn)。

D 再次選擇直接選擇工具(A)，按住shift鍵創(chuàng)建直角邊。

設(shè)置該圖層透明度為30%.54 然后用文字工具l(T)添加一些文字。設(shè)置顏色為 #EAEAB7.55 你也可以添加一些小圖標(biāo)。文件—置入，導(dǎo)入圖片。

群組所有的文字和圖標(biāo)圖層，命名太群組為”button 1“.57 創(chuàng)建另一個(gè)按鈕。（可復(fù)制第一個(gè)button，然后逐層修改）

為了方便管理，群組所有關(guān)于”特色相聚”的圖層和群組層，命名這個(gè)大的群組為”featured project“.七、創(chuàng)建3D絲帶

選擇矩形(U)創(chuàng)建一個(gè)高為130px的顏色為#A6A43F的矩形，如下圖。命名該圖層為 “ribbon background“.60 選擇圓角矩形(U), 設(shè)置半徑為10px，在你剛剛創(chuàng)建的矩形的左邊的位置，拖拽一個(gè)矩形。在這一步，你可以拖拽一些標(biāo)尺線作為輔助。

點(diǎn)擊你之前創(chuàng)建的圓角矩形的矢量蒙版，讓它被選中。然后選擇圓角矩形(U), 在屬性欄中點(diǎn)擊從形狀減去區(qū)的按鈕，創(chuàng)建一個(gè)圓角矩形。按照下面的截圖進(jìn)行操作。

創(chuàng)建一個(gè)新的圖層，右鍵點(diǎn)擊設(shè)置為創(chuàng)建剪貼蒙版。

選擇漸變工具(G)，按照下面的截圖拖拽一個(gè)白色到透明的漸變。

設(shè)置該圖層渲染模式為疊加，透明度為30%，命名為 “highlight“.65 選擇圓角矩形工具(U), 設(shè)置顏色為 #878533，在圖層”ribbon background”上創(chuàng)建一個(gè)圓角矩形。

選擇矩形工具(U), 在屬性欄中點(diǎn)擊從形狀減去區(qū)按鈕要的那部分。，然后創(chuàng)建一個(gè)矩形。如圖。剪切掉我們不

雙擊圖層，打開(kāi)圖層屬性面板。按照下面的截圖進(jìn)行參數(shù)設(shè)置。

重復(fù)以上步驟，不過(guò)這一次是在絲帶的右邊?？梢詮?fù)制“圖層”（注意是圖層）進(jìn)行操作，然后通過(guò)ctrl+t進(jìn)行拖動(dòng)變形等轉(zhuǎn)換。

群組所有關(guān)于絲帶的圖層，命名該群組為”ribbon“.70 在圖層”ribbon background”上創(chuàng)建一個(gè)新圖層。然后按照之前的操作，創(chuàng)建一個(gè)陰影。

選擇圓角矩形工具(U), 設(shè)置半徑為8px，顏色為#E1E0C1，創(chuàng)建四個(gè)圓角矩形，大小為220px * 110px.72 設(shè)置透明度為50%，然后群組他們。命名該群組為”images“.73 在工具欄中選擇文字工具(T)，在你的布局下面添加一些文字。也可以添加一些圖標(biāo)。

應(yīng)用文字工具(T)，顏色為 #E0E0AC。在文檔的頂端，寫(xiě)上整個(gè)站點(diǎn)的名字。

雙擊該圖層，打開(kāi)圖層屬性面板。按照下圖進(jìn)行參數(shù)設(shè)定。

然后寫(xiě)標(biāo)語(yǔ)。

為了讓效果圖更完整，你可以選擇四個(gè)圖片，導(dǎo)入到你的文檔中。放在你的絲帶上。

好了，完成了！

如果你按照該教程進(jìn)行學(xué)習(xí)，你應(yīng)該能得到下面的效果。單擊這里查看完整效果。

546-

第五篇：網(wǎng)頁(yè)制作教案

網(wǎng)頁(yè)制作與設(shè)計(jì)教案

第一講 網(wǎng)頁(yè)設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁(yè)中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁(yè)的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級(jí)鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡(jiǎn)單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................13 3.2 在頁(yè)面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁(yè)中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁(yè)設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語(yǔ)言簡(jiǎn)介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語(yǔ)句、循環(huán)語(yǔ)句和過(guò)程.............................................................20 4.3 VBSCRIPT基本語(yǔ)句.............................................................................................................20

第一講 網(wǎng)頁(yè)設(shè)計(jì)概述

【教學(xué)內(nèi)容】

講解網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)術(shù)語(yǔ)及網(wǎng)站制作的基本流程?！窘虒W(xué)目的】

使學(xué)生對(duì)網(wǎng)站及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣?！窘虒W(xué)重點(diǎn)】

網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)?！窘虒W(xué)難點(diǎn)】

理解網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)。【教學(xué)方式】

講授式、討論式、案例分析式。【教學(xué)參考】

1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。

2、《Internet 網(wǎng)頁(yè)工場(chǎng)》Wittime工作室 重慶出版社。

3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。

4、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社?！拘抡n內(nèi)容】

1.1 WWW和URL 1.1.1 Web的起源

Web是World Wide Web的簡(jiǎn)稱，一般也稱之為WWW或3W 1.1.2 Web的特點(diǎn)和結(jié)構(gòu)

Web最大的特點(diǎn)是使用了超文本（Hypertext）WWW采用C/S（客戶機(jī)/服務(wù)器）工作模式

在瀏覽器和服務(wù)器之間應(yīng)用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式

協(xié)議://主機(jī)名或IP地址：端口號(hào)/路徑名/文件名

1.2 IE5的使用

Web瀏覽器是瀏覽Internet資源的客戶端軟件

在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等

1.2.1 IE5的界面 1.2.2 IE5的使用

列表標(biāo)志的使用?！窘虒W(xué)方式】

討論式、案例分析式、練習(xí)式?！窘虒W(xué)參考】

1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。

2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。

3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社?！拘抡n內(nèi)容】

2.1 HTML文檔的基本結(jié)構(gòu)

2.1.1 HTML語(yǔ)法

1、雙標(biāo)記

語(yǔ)法：

<標(biāo)記>內(nèi)容

2、單標(biāo)記 語(yǔ)法：<標(biāo)記> 最常用的單標(biāo)記是

3、標(biāo)記屬性 語(yǔ)法

<標(biāo)記

屬性1 屬性2 屬性3 … > 例子

4、注釋語(yǔ)句 格式

例子

2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】

通過(guò)本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁(yè)面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無(wú)序列表標(biāo)志及屬性。

第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志

【教學(xué)內(nèi)容】

講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級(jí)鏈接標(biāo)志 【教學(xué)目的】

* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。

< EM>......，強(qiáng)調(diào)文字，通常用斜體。

< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。

......，以等寬體顯示西文字符。

......，使文字大小相對(duì)于前面的文字增大一級(jí)。

......，使文字大小相對(duì)于前面的文字減小一級(jí)。^......，使文字成為前一個(gè)字符的上標(biāo)。_......，使文字成為前一個(gè)字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6

文本修飾 2.2.7

預(yù)格式化文本 使用預(yù)格式化標(biāo)記

不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符

一般轉(zhuǎn)義符都是以“&”開(kāi)始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行

不換行 2.2.10 插入水平線 使用