网页效果图的制作公开课教案

第一篇：网页效果图的制作公开课教案

网页效果图的制作

——制作网页标志横幅

课程：电子商务网页制作

班

级：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）按可以预览网页，操作完成后，保存为“png”格式的文档，同时以网页形式导出，保存在桌面以自己姓名命名的文件夹。（在桌面上新建文件夹，以自己的名字命名）

教师巡回指导

三、点评：对学生上传的作品进行点评，学生互评。

四、课堂小结：

本节课我们学习了网页标志横幅的制作，学习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.6

文本修饰 2.2.7

预格式化文本 使用预格式化标记

不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符

一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行

不换行 2.2.10 插入水平线 使用