第一篇：網頁效果圖的制作公開課教案
網頁效果圖的制作
——制作網頁標志橫幅
課程：電子商務網頁制作
班
級：09電商3+2 時間：12月16日第三節
授課教師：李曉琳
教學目標：知識目標：
1、能描述創建網站主頁的目的
2、能列舉網頁應包含的內容
3、了解網頁標志橫幅的作用
技能目標：
1、能繪制網站主頁的網頁標志橫幅
2、掌握fireworks工具屬性的設置方法
情感目標：對操作過程中遇到的問題能主動思考具有較強的網頁設計
創意思維、藝術設計素質。
教學重點：
1、Firewoks中矩形工具、文字工具、直線工具、庫命令的使用
2、Firewoks中元件轉換為按鈕的操作
難 點： 元件轉換為按鈕及庫命令的使用 教學方法： 任務驅動教學法
一、導入
提問：同學們平時的休閑方式有哪些呢？——影視文化通常是我們茶余飯后的談資，平時也會去電影院看電影是吧？特別是大片，往往去了電影院要排長隊，而且還不一定買的到票，在電子商務迅速發展的推動下，網上訂票為我們消除了排隊買票的煩惱。那網上訂票是基于什么樣的平臺呢？下面我們來看下我們德清的大地數字影院的網絡平臺——“哈票網”。
二、新授
任務一：網頁橫幅的制作——
1、“哈票網”網站的展示，分析引出一個網頁應包含哪些內容。
提問：看了這個頁面，請你說出一個網頁包含哪些元素呢？
（學生回答，教師補充）——引出網頁橫幅的重要性
2、為什么要制作網頁橫幅？
在一個簡單的網頁中，上方的橫幅是最重要的視覺元素。在很多博客網頁中，它甚至是唯一的視覺元素。所以它的作用可以說是相當大的。它必須能夠與網站的風格配合，并能傳達視覺上的信息。它必須讓人看上一眼就讓人知道這個網站是屬于什么類型，風格是什么。（展示不同網站的不同網頁橫幅效果圖，說明網頁橫幅是可以多種形式展現的。）
3、提出任務，教師演示：效果圖展示，操作示范
（1）新建一個文檔：寬1200像素，高為600像素。
（2）矩形工具、圓角矩形工具、橢圓工具、文字工具、直線工具的使用及屬性設置
4、學生活動：按所給效果圖及素材制作網頁橫幅（根據男女生興趣偏好不同，男女分組操練：男生做NBA網頁橫幅、女生做淘寶門戶網的網頁橫幅）
操作步驟:（1）新建一個文檔：新建一個文檔：寬1200像素，高為600像素。
（2）用矩形工具繪制兩個矩形：可與畫布同長，寬度根據需要自定，大矩形的顏色設為“#333333”,小矩形的顏色設為“#666666”（3）在小矩形右側添加文字，選擇“文字工具”，添加文字，其屬性設置為：字體——宋體，顏色——“#66FF00”，字號——“15”（4）用橢圓矩形工具在畫布的左側繪制兩個圓形，一大一小，填充顏色漸變，顏色為“#FFFF00”至“#00CC00”,如圖所示（5）用文字工具，在大圓上添加文字“哈”，文字屬性設置為：“白色”“隸書”“90”；小圓上添加文字“票”，屬性設置為“白色”“幼圓”“30”；再用文字工具在“哈票”右側添加文字“快速訂票 輕松觀影”，屬性設置為“白色”“幼圓”“24”，緊接著下方添加網址，屬性設置為“#66FF00”“Century Gothic”“22”
5、教師巡回指導，發現問題，個別輔導
任務
二、美化橫幅——添加陰影、元件轉換為按鈕
6、提出任務，教師演示：效果網頁橫幅展示，操作示范
（1）添加陰影
（2）元件轉換為按鈕的操作（3）“庫”命令的操作 學生活動：按所給效果網頁制作
操作步驟：（1）選中要添加陰影的對象“哈”，選擇“命令” ——“創意”——“添加陰影”，調整到所需要的位置
（2）選擇“圓角矩形工具”繪制一個圓角矩形，顏色填充為“#333333”描邊選擇“鉛筆”，筆尖大小和邊緣都為“3”，顏色為“#66FF00” 按
（3）打開“庫”面板,將元件拖動到網頁中，排列對其，選中對象，選擇文字工具，添加文字“選影院訂票”“選影片訂票”（4）按
教師巡回指導
三、點評：對學生上傳的作品進行點評，學生互評。
四、課堂小結：
本節課我們學習了網頁標志橫幅的制作，學習FIREWORKS中矩形工具、圓角 矩形工具、文字工具、直線工具及庫命令的操作，重點掌握元件轉換為按鈕的操作及庫命令的使用。
五、作業：完成實驗指導練習的操作練習和實驗報告
第二篇：FrontPage制作簡單網頁(高二公開課教案)（本站推薦）
FrontPage制作簡單網頁
（高二信息技術公開課教學教案）
［ 教學目的 ］
了解網站的基本結構、構建網站的步驟，掌握用FrontPage制作簡單網頁 ［ 教學重點 ］
網站規劃、在網頁中輸入文字，插入圖片和表格 ［ 教學難點 ］
在網頁中輸入文字，插入圖片和表格 ［ 教學形式 ］ 演示與練習穿插進行 ［ 教學過程 ］ ［導入新課］
大家都很喜歡上網，因為網上有許多東西（學習資料、游戲、軟件、音樂……）可供我們選擇，而且許多都是免費的。這就是網絡的一個很重要的特點――資源共享。這些資源都是放在一個一個網站中的。我們也可以構建一個網站，把你的珍藏整理好放上去。這樣別人就可以分享你的東西。目前，在網上就有許多有名的個人網站，像華軍軟件、電腦之家、驅動之家、九天音樂等。［講授新課］
要想在網上安家落戶，大體上有以下三步：網站規劃、網頁制作和上傳以布。今天我們就先來學習網站規劃和簡單網頁的制作。
一、網站規劃
（在制作網頁之前要先建站，如果沒有事先的準備及策劃，只盲目的開始編輯網頁，將要花更多的時間和精力在網站的整合上。所以要養成先建站再織網的好習慣）
1． 確定網站的主題
2． 網站要包含哪些咨訓與服務 3． 構思每個網頁的草圖 4． 確定網頁與網頁之間的鏈接
演示：
1、用FrontPage中的導航來更直觀地了解網站結構；
2、用FrontPage新建一個站點；
（1）打開FrontPage，選擇“文件”－＞“新建”－＞“站點”；（2）單擊“只有一個網頁的站點”
注：在“文件夾列表”中顯示該站點中所有的文件夾和文件。（一般新建站點后就有兩個文件夾，我們一般將網站所需的圖片放在“image”文件夾中，當然你也可以根據需要新建一些文件夾，但必須在一個站點中）練習：
1． 自己構建一個個人網站；
2． 新建個人網站（當然此時的個人網站還只是和個空白網頁）二．制作網頁“自我簡介”（先展示一下做好的“自我簡介”）
（一）在網頁中輸入文字和插入表格
1． 在網頁中編輯工作區輸入文字“自我簡介”，居中；
2． 選中文字“自我簡介”，選擇“楷體＿GB2312”，字號為“6（24）磅”，粉紅色）； 3． 選擇“插入”－＞“換行符”，在彈出的“換行符屬性”對話框中選擇“普通換行符”，單擊“確定”，光標移到下一行； 4． 單擊“常用”工具欄上的“插入文件中的圖片”按鈕，彈出“圖片”對話框； 5． 單擊“剪貼畫”按鈕，在“比喻”類別中選擇一幅圖片，將此圖片插入網頁中； 6． 調整圖片的大小，居中放置；
7． 選擇“格式”－＞“背景”命令在網頁中加入背景圖片； 8． 單擊“網頁編輯區”下方的“預覽”標簽，可以預覽網頁的效果。
（二）制作“自我簡歷表”
網頁中僅有一個標題和一幅圖片，內容太少，下面插入一個表格 1． 單擊“常用”工具欄上的“插入表格”按鈕，制作一個6行2列的表格； 2． 在第一行第二列中，將單元格拆分成3列； 3． 輸入“自我簡歷表”中的文字；
4． 選中第一、三列，將字體設為“黑體”，字號為“4（14）磅”，字型為“粗體”，選中第二、四列，將字體設為“楷體”，字號為“4（14）磅”，選中這個表格，單擊“居中”按鈕，選中第二、四、六行，設置顏色為“淺綠色”；選中這個表格，單擊右鍵，選擇“表格屬性”命令，選擇邊框顏色為“粉紅色”，粗細為1；單擊確定。注：
1、格的邊框粗細設為0，則表格不顯示邊框。（我們可以利用這一特點來合理安排網頁的版面設置，書上163頁圖7.14的混合排版效果就是一例
2、“文件夾列表”中，雙擊某一網頁，該網頁就會顯示在網頁編輯區中，練習：
1． 在剛剛新建的站點上新建幾個網頁；
2． 在編輯網頁時，學會使用表格來對網頁進行排版。三．小結
展示和評講學生作品
第三篇：電腦效果圖制作教案
電腦效果圖制作教案 第1-4課時:
一、課題：初識3dsmax
二、教學目的：了解3ds max 及其應用領域、掌握3ds max 的工作流程、掌握3ds max 的安裝方法、認識3ds max的工作界面、掌握3dsmax視圖特點
三、教學重點：界面設置、基本操作方法
四、教學過程：理論講述+上機操作
五、板書設計：
第一部分：初識
3dsmax
一、3ds max 及其應用領域
3ds max是當今世界上銷售量最大的集三維建模、動畫及渲染為一體的應用軟件。隨著該軟件的不斷升級換代，其功能日趨完善和強大，被廣泛應用于工業產品設計、室內效果圖、建筑效果圖制作、產品造型及影視廣告制作等行業。如圖所示為利用3ds max制作的室內外效果圖。3ds max是目前世界上應用最廣泛的三維建模.動畫.渲染軟件，本課程側重室內外設計，建筑設計方面內容的講解，通過室內外模型元素創建的講解系統學習3D的功能。
二、3ds max 的工作流程
3ds max 9的工作流程大體分為設置場景、建立對象模型、使用材質、放置燈光和攝像機、設置場景動畫和渲染場景等6部分。
設置場景 建立對象模型 使用材質 放置燈光和攝影機 設置場景動畫 渲染場景
三、了解3DS MAX操作界面
從總界面了解3DS MAX.它分為菜單欄,工作視窗,命令面板,動畫面板,窗口控制板,工具圖標欄,輔助信息欄等幾個部份,先來了解下它各部份的簡介.1、菜單欄 主菜單位于屏幕最上方,提供了命令選擇.它的形狀和Windows菜單相似。主菜單上共有十一個菜單項： File(文件)Edit(編輯)Tools(工具）Group(組）Views(視圖)Rendering(渲染)通過某種算法，體現場景的燈光，材質和貼圖等效果。Trsck View(軌跡視圖)控制有關物體運動方向和它的軌跡操作
2、工具欄
幫助圖標
左邊的按鈕為撤銷上次操作，右邊按鈕為恢復上次操作
左邊按鈕為選擇對象，使之和其它的對象鏈接，建立父子關系，右邊按鈕為撤消鏈接。結合到空間扭曲，使物體產生空間扭曲效果。
選擇對象組按鈕：選擇物體、矩形區域選擇工具、選擇過濾器、根據名字選擇物體、選擇并移動物體、選擇并旋轉物體、選擇并縮放物體、縮放工具：正比例縮放，非比例縮放
按下X就是說物體只能在X軸移動或變換，按下Y就是只能在Y軸進行操作，按下Z就是只能在Z軸操作。
反向動力開關。用來打開或關閉反向動力學。鏡像操作、環形陣列操作、對齊工具
第一個是打開軌跡視窗。第二個是打開關聯物體的子父關系.材質編輯器，按M鍵彈出一個材質編輯窗，從而進行對物體的材質進行貼圖處理
渲染場景，打開后彈出一個渲染窗，在那兒設置動畫的輸出時間，輸出動畫大小，圖質等設置。快速渲染，做好了動畫之后想看下后果，就按它看一下。第四個是選擇渲染的條件，第五個是接上次渲染。
3、命令面板
命令面板是3DS MAX的核心部分，包括場景中建模和編輯物體的常用工具及命令
Create(創建)：創建基本的物體
Modify(修改)，它是用于修改和編輯被選擇的物體。Hierarchy(層級)，用來控制有關物體的層次連接。
Motion(運動),好像車輪那個圖標，它是用來控制動畫的變換，比如位移、縮放、軌跡等運動的狀態。
Display(顯示)，作用于控制并影響物體在視圖中的顯示狀態，比如隱藏物體或恢復被隱藏的物體。它在有很多物體的時候而將一些物體隱藏起來，對工作很好用。
4、視圖控制器
:這個功能同上面的一樣，但它同時影響著四個視窗。
：點擊上面這個圖標是當前激活視窗以最大的方式顯示物體，而下面的圖標是最大顯示被選中的物體。它只能影響一個視窗。
：點擊上面的圖標是四個視窗的所有物體以最大的方式全部顯示出來。而下面的圖標是以最大方式在四個視窗中顯示被選中的物體。
：在正面視窗中出現，比如你現在激活的是左視圖、底視圖、前視圖、頂視圖等，而在激活透視圖是不會看到這個圖標的，它的功能是，在所有正面視窗內用鼠標框選物體或物體某一部分在該視窗以最大的方式顯示出來。
：這個圖標只在透視窗和攝影視窗出現，點擊該命令，在透視圖內上下拖動，場景中的視角和視景會發生變化。
：點擊該圖標，就會在視窗內出現一個小手，任意拖動，可以移動視窗內的場景。
：點擊最上面那個在視窗內就會出現一個綠圈，有四個頂點，只要是用于透視圖的角度調節，很常用，但用在其它視窗內，就會變為用戶視圖了。中間這個叫[弧形旋轉所選物體]的，最下面叫[弧形旋轉子目標] ：點擊該命令，當前的視窗就會滿屏顯示，再點它，就會回復正常，也是很常用的一個圖標。鍵盤上的快捷鍵是“W”.5、工作視圖的改變
缺省窗口為：Top(頂視圖)Front(前視圖)Left(左視圖)Perspective(透視圖)。T=Top(頂視圖)B=Botton(底視圖）L=Left(左視圖）R=Right(右視圖）
U=User(用戶視圖）F=Front(前視圖）K=Back(后視圖）C=Camera(攝像機視圖）Shift鍵加$鍵=燈光視圖 W=滿屏視圖
1、選擇方法（Selection）
基本選擇 選擇物體的基本操作方法與技巧，包括加減選擇、全選、反選、全部取消選擇 區域選擇 區域選擇的方法，包括Window窗口和Crossing橫跨方式；方框、圓形、多邊形、套索等區域。
名稱選擇 使用名稱選擇對話框Name Selection進行物體名稱和類別選擇的方法。選擇過濾 Selection Filter選擇過濾功能，對選擇的類別進行過濾的方法。
隔離選擇 在大型場景中使用Isolate Selection隔離選擇方法隔離選擇個別物體的操作技巧。
2、Transform Type-In(用鍵盤輸入變換數值)移動變換 Move移動工具的使用方法，包括操縱軸的設置方法。
旋轉變換 Rotate旋轉工具的使用方法，包括新增旋轉操縱軸的詳細用法。
放縮變換 Scale等比、不等比和擠壓放縮工具的使用方法，包括新增放縮操縱軸的使用方法。
數值變換
3、復制工具 變換復制
Mirror(鏡像)Array(陳列)批量復制物體并進行排列的工具 一維、二維和三維陣列復制 石膏柱制作與排列練習
實踐:
1、熟悉3dsmax軟件工具欄、視圖窗口
第5-6課時:
一、課題： 3dsmax的創建系統
二、教學目的：學習三維模型的創建，建簡單場景效果
三、教學重點：模型創建與三維空間的理解
四、教學過程：理論講述+上機操作
五、板書設計：
3dsmax的創建系統一、標準幾何體（Standard Primitives）
一、標準幾何體（Standard Primitives）
1、Box（立方體）段數
2、Cone（錐體）制作圓錐、圓臺、棱錐、棱臺，以及局部
3、Sphere（球體）制作面狀或光滑的球體、局部球體（包括半球體）
4、GeoSphere（幾何球體）制作GeoSphere（幾何球體）、三角面、標準四面體，八面體
5、Cylinder（柱體）通過Cylinder（柱體）命令可以制作棱柱體、圓柱體、局部圓柱或棱柱體.6、Tube（圓管）通過Tube（圓管）命令創建各種空心圓管物體，包括圓管、棱管以及局部圓管.7、Torus（圓環）通過Torus（圓環）命令制作立體的圓環圈，截面為正多邊形。通過對正多邊形邊數、光滑度、旋轉等控制來產生不同的圓環效果，切片參數可以制作局部的圓環.8、Pyramid（四棱錐）學習通過Pyramid（四棱錐）命令創建四棱錐模型.9、Teapot（茶壺）通過Teapot（茶壺）命令創建一只標準的茶壺造型，或者是它的一部分（如壺蓋、壺嘴等）
10、Plane（平面）通過Plane（平面）命令創建平面物體
二、擴展幾何體（Extended Primitives）
在Create（創建）命令面板中，Geometry（幾何體目錄）項下的下拉菜單中選擇Extended Primitives擴展圖元選項，這時幾何體的建立面板上會出現如圖所示的項目
1、Hedra（異面體）用Hedra（異面體）命令創建各種具備奇特表面組合的多面體，利用它的參數調節，可以制作出種類繁多的奇怪造型。
2、Torus Knot（環形節）Torus Knot（環形節）命令是擴展幾何體中最復雜的一個工具，組合產生的效果不勝枚舉，長于創建管狀、纏繞、帶囊腫類的造型。
3、ChamferBox（倒角立方）通過ChamferBox（倒角立方）命令直接產生帶倒角的立方體，省去了Bevel制作的過程。
4、ChamferCyl（倒角柱）通過ChamferCyl（倒角柱）命令制作帶有圓角的柱體。
5、OilTank（油桶）通過OilTank（油桶）命令制作帶有球狀凸出頂部的柱體
6、Capsule（膠囊）通過Capsule（膠囊）命令制作兩端帶有半球的圓柱體，類似膠囊的形狀。
7．Spindle（紡錘體）通過Spindle（紡錘體）命令制作兩端帶有圓錐尖頂的柱體，象鉆石、筆尖、紡錘等造型。
8、L-Ext（L形墻）通過L-Ext（L形墻）命令建立L形夾角的立體墻模型，主要用于建筑快速建模。
9、ngon（球棱柱）通過Gengon（球棱柱）命令制作帶有倒角棱的柱體，直接在柱體的邊棱上產生光滑的倒角。
10、C-Ext（C形墻）通過C-Ext（C形墻）命令制作C形夾角的立體墻模型，主要用于建筑快速建模。
11、RingWave（環形波）通過RingWave（環形波）命令創建一個不規則邊緣的特殊圓環。可以通過設置動畫控制它的變形，應用于不同類型的特效動畫中。
12、ose（軟管）Hose（軟管）軟管是一種可以連接在兩個物體之間的可變形物體。Prism（三棱柱）通過Prism（三棱柱）命令制作等腰和不等邊三棱柱體。
實踐：
1、命令面板中各種幾何體和形狀工具的創建練習
2、直線工具繪制線條
第7-8課時:
一、課題：二維圖形（Shapes）轉化三維圖形
二、教學目的：學習二維圖形的創建方法：line、矩形、圓形、lathe、excude
三、教學重點：圖形的編輯與修改
四、教學過程：理論講述+上機操作
五、板書設計：
1、line（線）Line（線）命令能夠自由繪制任何形狀的封閉或開放型曲線（包括直線），可以直接點取畫直線，也可以拖動鼠標繪制曲線，對曲線的彎曲方式，有Corner（角）、Smooth（光滑）、Bezier（貝茲）三種。
2、ectangle（矩形）通過Rectangle（矩形）命令創建矩形。
3、Circle（圓）通過Circle（圓）命令創建圓形。
4、Ellipse（橢圓）通過Ellipse（橢圓）命令創建橢圓。
5、Donut（同心圓環）通過Donut（同心圓環）命令制作同心的圓環
6、NGon（多邊形）通過NGon（多邊形）命令制作任意邊數的正多邊形。
7、Star（星形）通過Star（星形）命令創建多角星形
8、Text（文本）通過Text（文本命令直接產生文字圖形）
9、Helix（螺旋線）通過Helix（螺旋線）命令制作平面或空間的螺旋線
10．ection（剖面）Section（剖面）命令能夠通過截取三維造型的剖面而獲
得二維圖形。（演示獲取房屋界面線）。第9-12課時:
二、課題：二維圖形（Shapes）轉化三維圖形練習
二、教學目的：學習二維圖形的創建方法：edit spline 線條建模 line、矩形、圓形、lathe、excude
三、教學重點：圖形的編輯與修改
四、教學過程：理論講述+上機操作
五、板書設計：
二維圖形（Shapes）轉化三維圖形練習
一、edit spline 線條建模與lathe命令
碗的制作 步驟：
直線工具—點的修改—圓角工具—Lathe命令—參數修改 蘋果的制作
步驟：直線工具-點的修改—lathe工具—復制移動—render 臺燈的制作
直線工具—lathe—編輯樣條線—lathe—對齊工具
羅馬柱的制作
Star工具—excude擠出—直線工具—車削—復制工具—對齊工具—移動捕捉—陣列工具
小方桌的制作
矩形工具—復制工具—extrude擠出—復制 茶幾的制作
圓形工具（start new shape）—擠出
作業：
1、p63練習
2、設計一款茶幾
第13-14課時:
三、課題：二維圖形（Shapes）轉化三維圖形練習
二、教學目的：學習二維圖形的創建方法：edit spline 線條建模 line、矩形、圓形、lathe、excude
三、教學重點：圖形的編輯與修改
四、教學過程：理論講述+上機操作
五、板書設計：
第四篇：ps課程作業二：制作網頁效果圖
課程作業2（圖層的應用）：
通過以下指導步驟，學會如何在photoshop中制作網頁效果圖。
最終效果圖
在photoshop中新建文檔
1在photoshop中新建一個文檔，尺寸為980px × 830px.如果你在photoshop軟件界面中，沒有看到在畫布的周圍看到標尺，點擊試圖>標尺（Ctrl + R）可以顯示標尺。在畫布的四個邊，分別拖拽四條標尺線。在這四條線中間，我們將繪制我們的頁面。
創建頁面背景
-***3141516
你可能注意到，我們剛剛創建的矩形并沒有圓角。為了糾正這個小的細節，我們應用剪輯蒙板（clipping mask）這個概念。右鍵點擊圖層 “navigation bar” layer, 選擇創建剪切蒙版。
好了，我們接下來要做的是，創建當前頁的按鈕。選擇矩形工具(U), 設置顏色為#A6A43F, 創建一個高為60px的矩形。
設置透明度為15%，命名該圖層為”current page button“.36 然后向下設置剪輯蒙板。
選擇剛剛的四個圖層，點中ctrl然后分別在圖層面板中點擊這四個圖層，然后點擊 Ctrl + G群組。設置這個群組名為 “bg & navigation bar“.38 選擇文字工具(T)，給導航添加一些文字，用顏色#A6A43F.在這次的設計中，我用的字體是 Avenir LT 65 Medium。如果你沒有這個字體，可以用你喜歡的字體代替。（可以借助標準線來制作）
五、給“特色項目”部分，自定義一個圖案
好了，我們要創建一個圖案。新建一個文檔，文件>新建(Ctrl + N), 尺寸是 5px * 5px, 透明背景。
設置前景色為 #2A2009, 在工具欄中選擇鉛筆工具(B)，在你的畫布中間，畫一個1px大小的方框。
點擊編輯>定義圖案。命名這個圖案，然后點擊ok。好了，你可以關閉這個文件了。
六、創建“特色項目”區域
選擇矩形工具(U),創建一個高為330px的任何顏色的矩形。
在圖層面板上，雙擊該圖層，打開圖層屬性面板。按照下圖進行參數設定。
命名這個圖層為 “pattern“.45 選擇圓角矩形工具(U), 設置圓角半徑8px, 顏色 #A6A43F, 創建一個寬 940px 高240px的圓角矩形。
設置圖層透明度為50%，命名該圖層為 “featured project bg“.47 選擇矩形工具(U), 設置顏色#A6A43F, 創建一個尺寸為 610px * 220px 的矩形。這個將會是“特色項目”的圖片的位置。，命名該圖層為 “image bg.”
導入任何你喜歡的圖片。
把圖片放在你剛剛創建的矩形的上面，在圖層面板上單擊創建圖層剪切蒙版。命名這個圖層為 “image“.50 選擇文字工具(T)，在右邊添加一些文字。按照下圖進行書寫。群組這些文字，命名該群組為 “text“.七、創建按鈕call-to-action
好了，我們要在“特色項目”的底部創建兩個按鈕。選擇圓角矩形工具(U), 設置半徑為8px，顏色為#A6A42F, 創建一個小矩形。命名該圖層為 “button 1“.52我們希望按鈕的上面不是圓角。按照下面的操作進行：
A.B.確定圖層”button 1″的蒙版是選中的。
選擇直接選擇工具(A)，在你看到的路徑上單擊。好了，這時候你將看到在每個圓角上都有兩個錨點。
C．選擇轉換點工具(默認圖標是個小鋼筆頭，在這一組工具中可以找到)，單擊這四個錨點。
D 再次選擇直接選擇工具(A)，按住shift鍵創建直角邊。
設置該圖層透明度為30%.54 然后用文字工具l(T)添加一些文字。設置顏色為 #EAEAB7.55 你也可以添加一些小圖標。文件—置入，導入圖片。
群組所有的文字和圖標圖層，命名太群組為”button 1“.57 創建另一個按鈕。（可復制第一個button，然后逐層修改）
為了方便管理，群組所有關于”特色相聚”的圖層和群組層，命名這個大的群組為”featured project“.七、創建3D絲帶
選擇矩形(U)創建一個高為130px的顏色為#A6A43F的矩形，如下圖。命名該圖層為 “ribbon background“.60 選擇圓角矩形(U), 設置半徑為10px，在你剛剛創建的矩形的左邊的位置，拖拽一個矩形。在這一步，你可以拖拽一些標尺線作為輔助。
點擊你之前創建的圓角矩形的矢量蒙版，讓它被選中。然后選擇圓角矩形(U), 在屬性欄中點擊從形狀減去區的按鈕，創建一個圓角矩形。按照下面的截圖進行操作。
創建一個新的圖層，右鍵點擊設置為創建剪貼蒙版。
選擇漸變工具(G)，按照下面的截圖拖拽一個白色到透明的漸變。
設置該圖層渲染模式為疊加，透明度為30%，命名為 “highlight“.65 選擇圓角矩形工具(U), 設置顏色為 #878533，在圖層”ribbon background”上創建一個圓角矩形。
選擇矩形工具(U), 在屬性欄中點擊從形狀減去區按鈕要的那部分。，然后創建一個矩形。如圖。剪切掉我們不
雙擊圖層，打開圖層屬性面板。按照下面的截圖進行參數設置。
重復以上步驟，不過這一次是在絲帶的右邊。可以復制“圖層”（注意是圖層）進行操作，然后通過ctrl+t進行拖動變形等轉換。
群組所有關于絲帶的圖層，命名該群組為”ribbon“.70 在圖層”ribbon background”上創建一個新圖層。然后按照之前的操作，創建一個陰影。
選擇圓角矩形工具(U), 設置半徑為8px，顏色為#E1E0C1，創建四個圓角矩形，大小為220px * 110px.72 設置透明度為50%，然后群組他們。命名該群組為”images“.73 在工具欄中選擇文字工具(T)，在你的布局下面添加一些文字。也可以添加一些圖標。
應用文字工具(T)，顏色為 #E0E0AC。在文檔的頂端，寫上整個站點的名字。
雙擊該圖層，打開圖層屬性面板。按照下圖進行參數設定。
然后寫標語。
為了讓效果圖更完整，你可以選擇四個圖片，導入到你的文檔中。放在你的絲帶上。
好了，完成了！
如果你按照該教程進行學習，你應該能得到下面的效果。單擊這里查看完整效果。
546-
第五篇：網頁制作教案
網頁制作與設計教案
第一講 網頁設計概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網頁中所使用的技術............................................................................................................4 1.4 制作網頁的基本方法............................................................................................................4 第二講 HTML的基本標志與格式標志.......................................................................................4 2.1 HTML文檔的基本結構.........................................................................................................5 第三講 HTML的文本、圖片與超級鏈接標志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標志綜合運用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態網頁設計.............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級鏈接的運用..................................................................................................................14 3.4.表格的應用.........................................................................................................................14 3.5.在網頁中創建表單.............................................................................................................15 第八講 DREAMWEAVER中動態網頁設計.............................................................................15 第九講 DREAMWEAVER綜合性網頁設計案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語言簡介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數據類型.......................................................................................................................18 4.2.表達式和運算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20
第一講 網頁設計概述
【教學內容】
講解網頁設計的相關術語及網站制作的基本流程。【教學目的】
使學生對網站及網頁有一定的認識，激發學生學習網頁設計的興趣。【教學重點】
網頁設計中的若干術語。【教學難點】
理解網頁設計中的若干術語。【教學方式】
講授式、討論式、案例分析式。【教學參考】
1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。
2、《Internet 網頁工場》Wittime工作室 重慶出版社。
3、《WEB網站設計》Joel Sklar著 高等教育出版社。
4、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡稱，一般也稱之為WWW或3W 1.1.2 Web的特點和結構
Web最大的特點是使用了超文本（Hypertext）WWW采用C/S（客戶機/服務器）工作模式
在瀏覽器和服務器之間應用HTTP（Hyper Text Transfer Protocol，超文本傳輸協議）作為網絡應用層通信協議 1.1.3 URL URL的完整格式
協議://主機名或IP地址：端口號/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶端軟件
在Windows環境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標志的使用。【教學方式】
討論式、案例分析式、練習式。【教學參考】
1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。
2、《WEB網站設計》Joel Sklar著 高等教育出版社。
3、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】
2.1 HTML文檔的基本結構
2.1.1 HTML語法
1、雙標記
語法：
<標記>內容
2、單標記 語法：<標記> 最常用的單標記是
3、標記屬性 語法
<標記
屬性1 屬性2 屬性3 … > 例子
4、注釋語句 格式
例子
2.1.2 HTML文檔的基本結構 【課后小結】
通過本次課的學習,要求能熟練掌握網頁面的基本標志與格式標志,并能靈活運用 列表,有序列表,無序列表標志及屬性。
第三講 HTML的文本、圖片與超級鏈接標志
【教學內容】
講解HTML標準中的文本、圖片與超級鏈接標志 【教學目的】
* 使學生了解標題元素,掌握字體,上下標,及特殊字符的標志。
< EM>......，強調文字，通常用斜體。
< STRONG>......，特別強調的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對于前面的文字增大一級。
......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個字符的上標。......，使文字成為前一個字符的下標。
文本修飾 2.2.7
預格式化文本 使用預格式化標記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉義字符與特殊字符
一般轉義符都是以“&”開始，以“；”結束，一個轉義符之間不能有空格 2.2.9 文本強制換行和不換行 文本強制換行
不換行
標記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無序列表
- 列表條目1
- 列表條目2......
2、有序列表
- 列表條目1
- 列表條目2......
3、定義列表
- 列表條目1
- 條目1的說明
- 列表條目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結】
本節介紹了在網頁中加入文本、圖片和超級鏈接的標志與相應屬性，熟練運用這些標志是制作多媒體網頁的基礎。超級鏈接標志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學習HTML中超級鏈接標志的難點。
第四講 HTML表格、表單與框架標志
【教學內容】
講解HTML中制作表格、表單與框架的標志。【教學目的】
使學生掌握簡單表格、表單與框架的制作。【教學重點】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標志與屬性。【教學難點】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實現的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應元素對應標志及屬性的含義。【教學方式】
案例分析式、項目教學 【教學參考】
1、《網頁設計與制作》楊尚森 曲宏山 賈文峰等著 電子工業出版社。
2、《WEB網站設計》Joel Sklar著 高等教育出版社。
3、《HTML網頁制作教程》材義語編著 鐵道出版社。【新課內容】
2.5 插入表格
2.5.1 在網頁中插入表格
表格的基本構成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |