《网页美工设计》教案-第2节 服饰类网页设计制作案例2 教案

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第三部分综合实训篇第二章综合案例——服饰类网页设计制作标题第二节综合案例——服饰类网页设计制作案例2课时2课时教学目标教学内容与过程打开服饰类网站的用户，第一眼看的一定是图，纤瘦的模特，穿着各异有特色，才能打动用户，激起他们的购物欲。因此此类网站的图片质量和色彩风格、页面布局很大程度决定了网站设计的方向和水平。本节课的知识要点是1、服饰类网站尺寸规范2、网站的框架3、网站的功能区划分。难点在于1、服饰类网站版心概念的理解2、服饰类网站常用排版下面我们来欣赏一个服饰网站的设计案例，通过欣赏效果图来了解服饰网站的基本框架网站上方最醒目的位置是服饰品牌LOGO，接着是导航，BANNER位置，以及页面最多的一部分，叫做内容模块。到页面的底部FOOTER区域。因此，我们总结出服饰网站由五部分构成1、LOGO品牌标志，2、导航栏，3、BANNER位置一般做图片轮播，4、内容模块区域、5页面底部区域。接下来，我们来进行实操练习1、首先，新建一个1002X2100PX的画布，72像素2、通过建立辅助线确立网站页面的版心位置，分别建立三等分的垂直辅助线。3、接下来修改画布大小为1440X2100PX,这样最外侧两条辅助线就确定了网站的版心。这里的版心概念是指放置网站主要内容的位置。版心大小则是指设计的有效使用面积。而页面大小则是指网页的实际尺寸。4、接下来我们按区域进行设计，首先是TOP部分。创建一个1440X700PX的矩形，吸取背景色（1682382228）确定BANNER位置.5、接下来输入LOGO，选择细长字体输入，60PX。LOGO大小为页面当中整个文字最大的参考值，一般贴着版心边缘，左边或者右边。6、拖入人物素材，对人物进行修饰。7、创建大小为380的正圆，利用布尔运算法则，按住ALT键，创建一个210大小的正圆。8、调整圆和人物的前后关系。9、C+J复制空心圆，放置在人物前面，调整大小。10、为了增加几何图形的质感，复制人物分别和两个圆做剪贴蒙版。11、调整图层叠加方式为正片叠底，调节不透明度。12、接下来将导航栏拖拽进来放置在合适的位置，在前面的课程中，我们有关于导航栏及功能图标制作的介绍，这里就不展开讲述了。13、接着我们对BANNER右侧的文案部分进行设计排版。14、打开文档，复制内容，将文字大小调整为44微软雅黑调整行间距4014、复制文字图层，讲中文内容替换上去，并将文字当中首两个字进行加粗15、接下来选择文字工具左键拖拽一个文字框，字体大小12PX，复制文本，行间距22.83当复制的文字内容较多时我们可以使用文字框，使得文字更容易编辑。16、为了不使上下版面太空，我们复制英文，调整大小9，分别放置在上下，进行版面修饰。17、调整完毕将所有文字左对齐，突出文字颜色，进行颜色调整(575757)(767676)18、为了使版面的空间视觉效果更加明确，我们可以将右边背景色进行撞色对比，新建图层，建立右边选区，填充背景色（F9F9F9）19、由于BANNER是轮播效果，我们需要添加一个轮播示意图，方便用户更好的实现人机交互。20创建70X8的矩形，复制两个，水平摆放。我们通过填充深浅色向用户传递选中信息。内容模块内容模块是对服装进行集中展示，设计的重点在于多图的板块设计。常见的有分栏效果和通栏效果最常见的是分栏版式中的双栏版式：双栏是最常见的一种分栏方法，掌握起来也比较简单，易于上手。将页面纵向等分为两部分，图片和文字均整齐划一，整个页面看上去相当规矩、统一、稳健。通栏版式已多图为主，将多个图片从左到右摆放，页面布局呈现三栏、四拦甚至六栏。一般在服装的内容模块的第一个板块往往多是品牌介绍。在文本中输入标题，选择44PX,品牌字体，大小44PX，中文品牌20px,品牌英文介绍10PX行间距46文字居中选中所有图层和大背景，进行水平居中对齐，调整行间距，选中所有文字，紧贴BANNER，按住回车键，向下5像素。钢笔在中文品牌下方绘制1PX修饰线介绍字向下4像素。为了充实品牌介绍页面我们拖入夕颜花背景素材并降低不透明度20%接下来是服装展示介绍区域，我们用分栏＋通栏的方式排版这里介绍分栏的方式，创建400X350矩形，创建400X500矩形，大矩形紧挨着小矩形，回车键向右移动三格为了不使小矩形下面太空，我们创建两个185X120的矩形，上下分别调整30像素的间距，这样即使图片很多，版面却不杂乱。接下来我们将图片素材拖进来分别和左侧三个矩形做剪贴蒙版接下来我们做右边的文字排版，将方块填充为灰色（F9F9F9）拖入第一行文字，大小26品牌字体，复制三个修改第二个文字内容，大小18修改第三个文字内容，大小12修改第四个文字内容，大小14字间距120选中所有文字紧贴方块边缘第一行文字向右移动3次，下5第二行下1第三行下5第四行下10为了修饰页面，我们在