关闭

关闭

关闭

封号提示

内容

首页 天津电子信息职业技术学院网页设计与制作教案.doc

天津电子信息职业技术学院网页设计与制作教案.doc

天津电子信息职业技术学院网页设计与制作教案.doc

上传者: 强强女强人 2017-09-02 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《天津电子信息职业技术学院网页设计与制作教案doc》,可适用于高等教育领域,主题内容包含天津电子信息职业技术学院网页设计与制作教案天津电子信息职业技术学院教案《网页设计与制作》教案序号:课题名称:授课班级日期第章绘制和编辑矢量图((()符等。

天津电子信息职业技术学院网页设计与制作教案天津电子信息职业技术学院教案《网页设计与制作》教案序号:课题名称:授课班级日期第章绘制和编辑矢量图((()内容提要与时间分配:内容提要:本章将着重介绍FireworksMX中创建与编辑Fireworks路径对象的操作技巧如对象描边、填充等属性设置以及分离对象的操作并通过创建一个矢量图的实例以便让学员掌握矢量图的绘制方法。时间分配:学时说明:教案按每个授课单元或根据课程按章节进行设计。教学目的与要求:目的(了解Fireworks的绘图原理。(熟练掌握绘制路径对象和编辑路径对象的方法、技巧。要求(了解Fireworks的绘图原理。(掌握创建矢量图的基本方法及相关工具的使用(绘制和编辑路径对象。教学重点与难点:(掌握创建矢量图的基本方法。(组合路径的运用。(效果的运用。(部分相关工具的使用。授课形式与教具:授课形式:讲授实训教具:计算机及大屏幕投影课后小结(包括内容与时间调整):Fireworks的一个很大的优势就在于它将位图处理和矢量处理合二为一换句话说Fireworks既是一个优秀的位图图像处理程序又是一个矢量图像处理程序。它综合了许多图形处理软件的优点。通过本次课程的学习使学生了解Fireworks的绘图原理熟练掌握绘制路径对象的方法、技巧。教研室主任审签:年月日说明:教师备课笔记附后。《网页设计与制作》备课笔记本次课程备课笔记一、Fireworks的绘图原理(Fireworks的对象一般来说计算机图形有两种类型即矢量图形和位图图形。像FreeHand和CorelDRAW之类的图形软件专门用于创建矢量图形而Photoshop之类的图形软件则专门用于处理位图图形。矢量图形采用直线来描述图形直线和曲线也可以称为路径。矢量图形的每一条直线和曲线都有其属性包括直线和曲线的位置信息、颜色信息等。一般矢量图形就是通过记录其所包含的直线和曲线的属性来实现的。编辑矢量图形时用户修改的是描述其形状的线条和曲线的属性。矢量图形与分辨率无关这意味着用户除了可以在分辨率不同的输出设备上显示它以外还可以对其执行移动、调整大小、更改形状或更改颜色等操作而不会改变其外观品质。(路径在Fireworks中可以创建矢量路径对象。路径是一条与很多点有关联的线条表现在图形上就是线条和轮廓。之所以称为矢量路径对象是因为该对象的形状主要是由路径的形状决定的并且用户可对该对象进行自由整形和变形。不论是用铅笔工具画出的简单线条图形还是用其他工具画出的复杂图形都是用路径来描述的。路径实质上就是对象的骨架对象上的其他属性(如描边属性、填充属性和特殊效果等)相当于对象的血和肉。对于单线条图形路径的形状一眼就可以看出如图(a)所示。而对于复杂的粗线条图形而言其路径是不易见的如图(b)所示。但将鼠标指针移到该对象上或者用选择工具选中该对象时对象的路径就会高亮显示如图(c)所示。(a)单线条图形(b)复杂的粗线条图形(c)高亮显示出路径图显示路径形状在Fireworks中创建的路径既可以是开放的路径也可以是闭合的路径。通常称开放的路径为开式路径就是起点和终点没有重合在一起的路径如图(a)所示称闭合《网页设计与制作》备课笔记的路径为闭式路径该路径的起点和终点是重合在一起的如图(b)所示。需要说明的是虽然有的开式路径上的某些部分交迭在一起围成一个闭合区域(如图左图所示)但它实际上仍是一个开式路径只有当路径的两个端点重合在一起时才是一个真正的闭式路径。(a)开式路径(b)闭式路径图开式路径和闭式路径(描边和填充在Fireworks中可以对路径对象进行描边和填充使其更具个性。描边就是对路径对象的路径(线条或轮廓)进行着色突出路径的形状或使对象具有轮廓。填充就是对路径对象的内部进行着色使其为实心对象。要实现填充与描边以前是通过【笔触】和【填充】面板来完成的现在这二者都被集成到了【属性】面板中。【属性】面板中提供了大量的描边选项和填充选项。利用【属性】面板可以创建出五彩缤纷的路径对象。创建的路径对象有种形式:有描边而没有填充的对象(即空心对象)如图(a)所示只有填充没有描边的对象如图(b)所示两者都有如图(c)所示两者都没有则该对象将为不可见当把鼠标指针移到该对象上时才能看到该对象的路径如图(d)所示。(a)无填充对象(b)无描边对象(c)既有填充又有描边(d)既无填充也无描边图描边和填充对象(Fireworks的工作模式如前所述Fireworks既可以创建矢量路径对象又可以编辑像素位图图像而这两项任务往往是在不同的工作模式下进行的。当用户选择了某个对象或某种工具时Fireworks将会自动判断应该使用哪种模式以前的两种模式被智能合成再也无需用户操心可以很方便地在二者之间来回切换了。《网页设计与制作》备课笔记二、绘制路径对象创建路径对象是在对象模式中进行的。在对象模式中构成图形的基本元素是路径和点因而可以用以下几种方式创建路径对象。,拖动绘图工具直接绘制直线、矩形、椭圆和多边形等简单的几何路径对象。,用画笔工具或铅笔工具绘制自由形状的路径。,通过描点方式创建自由形状路径与在FreeHand中使用钢笔工具一样。在绘制图形之前还需要做一些准备工作尤其是对于某些特殊的工具需要事先设置好属性才能进行下面的工作。(绘图前的准备工作()设置绘图工具的描边属性由于绘图工具总是继承刚刚使用过的描边属性和填充属性所以在绘制新图形之前应该重新进行设置使创建出来的对象具有新的描边属性。设置绘图工具描边属性的基本步骤如下:,选择工具箱【矢量】选项组任一工具如矩形工具【属性】面板将显示其相关属性如图所示。图【矩形】工具的【属性】面板,在【属性】面板的【描边】选项组单击【描边颜色】色块按钮在弹出的调色板中选取描边所用的颜色如图所示。,单击【笔尖大小】文本框右侧的下三角按钮然后拖动弹出式滑杆上的滑块设置笔尖的尺寸大小。,从【描边种类】下拉列表中选择一种描边类型如基本、铅笔、喷枪、水彩等。在图中选择的是【基本】|【实线】选项。笔尖大小描边种类描边颜色笔尖预览边缘柔化纹理总量笔尖名称圆角大小图【描边】选项组,单击【笔尖预览】右边的【边缘柔化】文本框右侧的下三角按钮拖动弹出式滑杆上的滑块调整描边边缘的柔化程度调整的结果可在笔尖预览框中看到。《网页设计与制作》备课笔记,从【纹理种类】下拉列表框中选取一种底纹并单击【纹理总量】文本框右侧的下三角按钮通过拖动弹出式滑杆上的滑块来调整纹理应用的深浅程度。,在【矩形圆度】文本框中可以调整圆角大小。提示:描边颜色也可以通过单击工具箱底部的描边色块按钮来设置。该色块显示了当前工具所使用的描边颜色~色块旁的画笔表示该色块是描边色块。()设置绘图工具的填充属性Fireworks中的绘图工具有的只有描边属性如直线工具、铅笔工具、画笔工具等而有的工具既有描边属性又有填充属性如矩形工具、椭圆工具、多边形工具等。设置矩形工具、椭圆工具和多边形工具的填充属性可使绘制的新图形具有所设置的新的填充属性。可以为工具设置单色填充、渐变填充或图案填充属性基本操作步骤如下:,选择工具箱【矢量】选项组中任一工具如矩形工具【属性】面板将显示其相关属性其中【填充】选项组如图所示。,单击【填充类别】下拉列表右侧的下三角按钮在弹出的【填充类别】下拉列表中可以选择所需的填充方式如图所示。可选择实心、网页抖动、图案或任一种位于列表下部渐变填充类别。,根据所选择的填充类别的不同【填充】选项组面板设置略有不同各选项的设置如下:,【边缘】下拉列表框可设置为实边、消除锯齿或羽化种方式。当选择羽化方式时可在其右侧的下拉列表框中设置柔化总量。,【纹理】下拉列表框用于设置填充的底纹图案可在其右侧的下拉列表框中设置纹理总量。图【填充】选项组图【填充类别】下拉列表提示:也可单击工具箱底部的填充色块按钮来调整设置~如图所示。单击【填充选项】按钮~可以打开如图所示的【填充选项】对话框~该对话框的设置与【填充】选项区的设置相类似。《网页设计与制作》备课笔记图填充调色板图【填充选项】对话框注意:使用画笔工具、铅笔工具或钢笔工具绘图时没有填充颜色~只能在创建完路径后~再添加填充颜色。(绘制基本图形利用工具箱中的直线工具、矩形工具、圆角矩形工具、椭圆工具和多边形工具可以很容易地画出直线、矩形、圆角矩形、正方形、椭圆、圆形、三角形、多边形和星形等基本的几何图形。)绘制简单几何图形(绘制直线、矩形或椭圆可按如下方法操作。,单击工具箱中的直线工具、矩形工具或椭圆工具按钮。,在画布上选择路径的起点位置按下鼠标左键不放。,拖动鼠标创建所需的路径对象。,松开鼠标左键完成创建。提示:单击矩形工具或椭圆形工具按钮~并在按住Shift键的同时~在画布上拖动鼠标~即可绘制出正方形或圆形~如图所示。矩形正方形圆形图绘制矩形、正方形和圆形提示:绘制水平、垂直或:角的直线时~需在绘制的同时按住Shift键。绘制指定中心点位置的几何图形时~可以按住Alt键的同时在画布上拖动绘图工具。要绘制指定中心点位置的正方形或圆形时~可以按住Shift键和Alt键的同时在画布上拖动绘图工具。()绘制圆角矩形《网页设计与制作》备课笔记在【属性】面板上设置了矩形的圆角半径后就可以画出圆角矩形具体操作方法如下:,选择矩形工具。,如图所示在其【属性】面板的【矩形圆度】下拉列表框中输入一个~的数值设置矩形圆角半径的图设置矩形圆度大小。这里的圆角半径是按百分比计算的百分比越大圆角就越大。,在画布上拖动鼠标画出一个圆角矩形。如图所示为不同圆角半径的圆角矩形。圆角半径为圆角半径为圆角半径为图圆角矩形提示:不管选择的是矩形工具还是圆角矩形工具~当在画布上拖动鼠标画出一个矩形时~先不要松开鼠标~按下键盘上的左右箭头键就可调整圆角半径的大小~认为合适后~松开鼠标即可。()绘制三角形及其他多边形先在多边形工具的【属性】面板上设置好多边形的边数然后就可以在画布上画出指定边数的多边形了具体操作方法如下:,选择多边形工具。,在【形状】下拉列表框中选择【多边形】选项。,在【边】文本框中设置多边形的边数可以是~的任意一个整数。默认边数为即为五边形如图所示。,在画布上拖动鼠标绘制多边形。提示:角度下拉列表框右侧的复选框是自动锐角调节复选框~选中后~系统会根据多边形的边数自动计算多边形的锐角角度。()绘制星形如果在多边形工具的【属性】面板上将形状设置为星形并进行相应的属性设置就可以画出想要的星形具体操作方法如下:,选择多边形工具。,【形状】下拉列表框中选择【星形】选项如图所示。,在【边】文本框中设置星形的顶点数设置范围为~。滑杆只能调整到要想设置个以上的顶点直接在文本框内输入数字即可。,在【角度】文本框中设置星形尖角的度数角度的设置范围是~角度越小星形就越尖。《网页设计与制作》备课笔记,如果选中【自动锐角调节】复选框则Fireworks会自动根据星形顶点数的多少调整星形尖角的度数顶点数越多尖角的角度就越大。图多边形工具的选项设置图星形的选项设置,在画布上拖动鼠标绘制星形。如图所示为具有不同形状、不同角度的六边形。正六边形自动角度的六角星自定义角度的六角星图多边形注意:多边形工具通常是从中心开始向外绘制的~鼠标一开始在画布上的落点即为多边形的中心点。()绘制自由形状路径利用直线工具、钢笔工具、矢量路径工具和重绘路径工具可以绘制出自由形状的路径。虽然这些工具也具有描边属性但用它们绘制出来的图形却是可编辑的矢量路径对象。直线工具可以绘制出具有描边属性的直线钢笔工具可以绘制出平滑的贝塞尔曲线矢量路径工具可以绘制出自由形状的具有描边属性的线条重绘路径工具可以修改绘制出的路径如图,图所示。图用直线工具绘制具有图用矢量路径工具绘制自由形状的描边属性的直线具有描边属性的线条《网页设计与制作》备课笔记图用钢笔工具绘制平滑的贝塞尔曲线图用重绘路径工具修改图如果没有事先在【属性】面板中设置好这两类工具的描边属性则默认状态下画笔工具绘制出的图形就会是单个像素的单线条路径。使用铅笔工具绘制图形时只有一种描边设置:单像素的硬边缘线条(PixleHard)。提示:绘制路径图形时按住Shift键~可沿水平或垂直方向绘制。()用描点方式绘制自由形状路径路径是由无穷多个点连成的因而只要确定组成路径的一些主要点也就确定了路径的基本形状然后将路径的雏形调整到用户所需要的形状即可这就是所说的用描点方式来构建路径。通常称这些主要点为节点因为用户可以通过调节这些点的位置来控制路径的形状。用描点法创建路径主要是用钢笔工具来完成的。这里的钢笔工具与FreeHand和Illustrator中的钢笔工具用法基本相同。用钢笔工具绘制自由形状路径的基本步骤如下:,在工具箱中选取钢笔工具按钮。,在画布上单击鼠标依次创建出组成路径的主要节点。,结束节点的创建。如果创建的路径是开式路径则在终点位置上当鼠标指针形状时双击即可结束路径的绘制若创建的是闭式路径当鼠标指针变为在路径起点附近显示为形状时单击即可。这样主要节点之间的连线便构成了路径的基本形状。,在创建完路径的雏形后再对路径进行整形使直线部分变成曲线:单击节点并拖动节点上的控制手柄调整该节点两侧的曲度如图所示。如图所示为路径雏形与整形后路径的对比效果。图对路径整形图路径雏形和整形后的路径如果要为一个已有的开式路径创建新的节点可按如下步骤进行:,选取钢笔工具或重绘路径工具。,单击原有路径的终点继续创建路径的节点。《网页设计与制作》备课笔记提示:用钢笔工具绘制一个开式路径时~将只具有描边属性,而在绘制一个闭式路径时~所绘制的对象还具有填充属性~该特点是直线工具所不具有的。三、绘制和编辑矢量图本次实训的内容是:绘制一张星空图案。通过本次实训的学习能够了解Fireworks的绘图原理熟练掌握绘制路径对象的方法、技巧。详见实训八。《网页设计与制作》备课笔记实训八绘制和编辑矢量图(一)实训目的和要求一、实训目的(了解Fireworks的绘图原理。(熟练掌握绘制路径对象和编辑路径对象的方法、技巧。二、实训要求(了解Fireworks的绘图原理。(掌握创建矢量图的基本方法及相关工具的使用。绘制和编辑路径对象。(三、时间分配课时四、环境要求FireworksMX五、内容提要绘制一张星空图案。六、教学重点与难点(掌握创建矢量图的基本方法。(组合路径的运用。(效果的运用。(部分相关工具的使用。实训内容与步骤一、准备工作在C盘或其他盘新建一个文件夹并以“班级学号”命名本次实训的内容将全部保存在该文件夹下。《网页设计与制作》备课笔记二、绘制一张星空图案(新建文件()在Fireworks中选择菜单【文件】|【新建】设置画布的“大小”为“背景颜色”选择“白色”。()选择菜单【视图】|【缩放比例】为,将显示比例调整到,。()单击主要工具栏上的“保存”按钮以“starspng”的文件名保存文件。注意:调整的只是显示比例并没有改变原始图片的大小。(绘图前的准备工作()单击绘图工具栏中的矩形工具右下角的黑色三角形在弹出的子菜单中选择“矩形工具”选择完毕后在【属性】面板设置“填充颜色”为“#”“笔触颜色”设为“无”按照画布大小绘制一个矩形。()设置单击【填充类别】下拉列表右侧的下三角按钮在弹出的【填充类别】下拉列表中可以选择所需的填充方式为“渐变”的“线性”填充类别并调整渐变的调色板。()选取该矩形选择菜单【修改】|【变形】|【任意变形】做进一步调整。(绘制月牙图案()选择矢量工具区的“椭圆”工具画出一个椭圆图案填充色为“#FFFFFF”(白色)。()选择选择工具区的“部分选定”工具将椭圆图案修改为一个月牙。()选择【属性】面板的【填充】效果为“阴影和光晕”的“发光”效果具体设置如右图所示。(绘制星星图案()选择矢量工具区的“星形”工具在月牙旁的不同位置绘制出多个(如:个)星星图案填充色为“#FFFFFF”(白色)。()将其中个星星的属性设置为右图所示的填充效果即:选择【属性】面板的【填充】效果为“阴影和光晕”的“发光”效果。(绘制云彩图案()选择位图工具区的“选取框”工具在月牙和星星的下面绘制出一个矩形选取框。()选择位图工具区的“刷子”工具将“笔触”的颜色设置为为“#”(灰色)将“笔触”的其它属性值设置为如右图所示。(绘制路径文本《网页设计与制作》备课笔记()选择矢量工具区的“钢笔”工具在下方绘制出一条矢量路径将“笔触”的属性值设置为如右图所示。()选择矢量工具区的“文本”工具编制文本内容为“fireworks星空”。()选择选择工具区的“指针”工具按住shift键选取文本和矢量路径。()选择菜单的【文本】|【附加到路径】命令即可。()选择菜单的【文本】|【方向】命令在子菜单中可以选择“沿路径方向”。(完成星空图案()进一步调整、完善各个图案元素完成星空图案()保存文件星空图案如下图所示。《网页设计与制作》备课笔记

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/20
0下载券 下载 加入VIP, 送下载券

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部