商务网站建设的前台设计.doc

前台开发意杨1 商务网站前台开发跟踪项目环节一【教学目标】终极目标：能熟练设计商务网页页面效果图促成目标： l 能熟练操作photoshop软件并了解其它相关软件的使用l 能进行合理的页面设计规划l 能初步掌握商务沟通的方法与技巧【项目概述】 小张在完成了朗声科贸商务网页策划后，接下来应该依据策划结果，设计该网站首页和子页，为后续网页制作工作做好准备。【项目分析】1、通过网站策划可得到哪些有价值的信息？完成了朗声科贸商务网站策划书后，我们得到这样一些有价值的内容，一是对朗声科贸的所属行业，网页的风格、色调、布局等作了分析及规划，生成了朗声科贸商务网页设计与制作指导文案，二是勾画出了该网站的首页及子页设计草图，三是建立了网页设计与制作所需的项目资料库，这些都为项目二的工作做好了铺垫准备。2、设计商务网站页面效果图需要什么工具？一般企业电子商务应用服务商的技术人员在设计商务网站页面效果图时大都使用photoshop图像处理软件设计，需要熟练灵活地使用photoshop软件中的各个设计工具对设计效果进行准确把握，此外，还有许多其它的图形图像处理软件作为辅助，希望大家能多了解、多接触、灵活使用。3、首页设计和子页设计有何异同？一般的商务网站各个页面之间都保持着统一性，整体性，和谐型。首页的风格、色调、布局等确定后，子页也会和其保持和谐统一。因此一般在对首页进行良好设计后，可复制首页设计源文件,再根据子页的策划思想对子页页面进行局部重新设计以形成新的子页设计效果，这种思路要细细地体会和学习。【任务分解】为了完成这一项目，可以把它分解为以下几个任务和子任务。 任务 1：朗声科贸网站首页设计子任务1：确定首页风格、色调、布局子任务2：设计首页页头区子任务3：设计首页主内容区子任务4：设计首页页尾区补充标准区子任务5：生成网页首页效果图任务 2：客户沟通、优化、定案子任务1：给客户演示首页效果图子任务2：整理沟通客户建议子任务3：优化并定案首页面效果图任务 3：子页设计子任务1：子页设计规划子任务2：设计子页页头区子任务3：设计子页主内容区子任务4：设计子页页尾区子任务5：生成子页效果图下面，将分别对这些任务的目标进行确认，并对任务的实施给予理论与实际操作的指导。【学习目标】 在完成任务的过程中思考、体会、学习本书中的“注”、“提示”、“隐性知识”、“提问”、“知识点” 在本书的指导下能独自完成其他子页面的设计 学会自己分析问题，充分学会举一反三目 录任务 1：朗声科贸网站首页设计3子任务1：确定网站的风格、主色调、辅色调4子任务2：设计首页页头区效果4子任务3：设计首页主内容区效果47子任务4：设计首页页尾区效果81补充标志区83子任务5：生成网页首页效果图84任务 2：客户沟通、优化、定案84子任务1：给客户演示首页效果图、讲解网页设计思路；84子任务2：整理、沟通客户所提建议84子任务3：优化、并最终确定首页面效果图84任务3：朗声科贸网站子页设计（产品展示子页面）85子任务1：根据首页设计确定子页的设计85子任务2：设计子页也头区85子任务3：设计子页主内容区85子任务4：设计并制作子页页尾区91子任务5：生成子页效果图9184任务1 首页设计任务完成为完成本任务，需要做一下几项工作。子任务1：确定首页风格、色调、布局步骤1：打开光盘“流程图片/项目二 流程图片”文件夹中的2-1.jpg，如图2-1所示。图2-1（提示:图2-1即是我们最后首页设计的效果图，同时结合在项目一对首页的策划分析，我们可从首页页头区，内容区，页尾区逐步完成设计，如图2-2所示。）（注：有些个性网页页头区，内容区，页尾区是在一起相互融合的，并不能完全清楚的独立开设计，这要视其情况而定。）图2-2步骤2：依据项目一中网页策划及所生成的指导文案可确定首页风格、色调、布局。首页风格即精细、简洁、大气、实用、有现代企业化气息、简体中文版，主要适应1024*768分辨率。主色调为蓝、灰、红，辅色调为白。（提示：在勾画中的设计草图中确定了首页的布局,在设计的时候注意应用。）子任务2：设计首页页头区a、标志区，导航区步骤1：从【开始】/【程序】中打开photoshop软件，如图2-3所示。图2-3步骤2：关闭如图2-4所示欢迎窗口。图2-4步骤3：新建文档（快捷键：ctrl+n），设置完属性后单击【好】按钮，属性设置如图2-5所示。（提示：本书中首次提及的快捷键会注明，后面则直接使用。）（注：像素英文缩写为px，后面直接用px。）（隐性知识：如果在以后的设计中画布大小不合适，可以从菜单栏的【图像】/【画布大小】进行调节。）（知识要点： 像素 分辨率）图2-5步骤4：实际像素查看文档（快捷键：ctrl+alt+0）,在图层面板中新建组，双击默认组名重命名为“top”，如图2-6，2-7所示。（注：双击组名称，可在文字上双击，也可在文字旁边双击，这时会弹出图层组属性窗口，可选择各式颜色，以便区别各组。）（知识要点：实际像素 画布大小 图层 组） 图2-6 图2-7步骤5：新建图层（快捷键：ctrl+alt+shift+n），并重命名为“logo导航背景”，如图2-8所示。（提示：重命名图层时，切记在默认的名称上双击，否则会弹出图层样式窗口。）（注：图层logo导航背景在组top中，即闭合组top前的小箭头，此图层跟随闭合。比喻解释：组就相当于文件夹，组内的图层就相当于文件夹中的文件，分组的优点同分文件夹一样。）（隐性知识：打开图层样式的方法是在图层面板的图层名称旁边双击，或通过菜单栏【图层】/【图层样式】中打开，后面会应用到。）（知识要点：图层样式 ）图2-8步骤6：保存文件（快捷键：ctrl+s），这里保存到文件夹“商务网页设计与制作/源文件”中，如图2-9所示。（注：一般在项目开发时需要将文件包分类建好，源文件单独放在一起，方便以后查找编辑。例如这里存放源文件的文件包“商务网页设计与制作”。）图2-9步骤7：选择工具栏中的【矩形选框工具】，绘制1003*225px的选区，如图2-10，2-11所示。（隐性知识：绘制选区的方法一般有：1、选择选框工具2、选择套索工具3、选择魔棒工具 4、形状工具 5、路径转换为选区等。）（知识要点：选区 矩形选框工具 选框工具 套索工具 魔棒工具 路径）图2-10图2-11步骤8：打开标尺（快捷建：ctrl+r），使用键盘的上下键移动选区到合适位置，即距上1厘米，如图2-12所示。（隐性知识：隐藏或显示标尺的快捷键是ctrl+r。）（知识要点：标尺） 图2-12步骤9：改变前景色为：#f4f4f4，背景色为：#c3c3c3，如图2-13，2-14所示。（注：“#”后为16进制的颜色值，每两位分别代表“r”“g”“b”。）（知识要点：前景色 背景色）图2-13图2-14步骤10：选择工具栏中的【渐变工具】，在属性栏中选择对称渐变，按住shift键，从上至下拖拽，如图2-15，2-16所示，去掉选区（快捷键：ctrl+d）。（提示：这里拖拽的时候注意图示中的起始位置和终止位置，以及属性栏中的“反向”选择。）（注：1、按住shift键，拖拽时只能定位在45度角度倍数的方向上，这里按住shift键方便做垂直方向上的渐变。2、渐变效果与拖拽出的线段起始位置、结束位置、方向以及长短都有关系。）（知识要点：渐变 渐变工具 对称渐变）图2-15图2-16步骤11： 新建图层，重命名为“红线”, 在工具栏中的选择【直线工具】，按住shift键，从最左端拖拽至最右端，如图2-17，2-18，2-19，2-20所示。（提示：新建的图层“红线”依旧属于组“top”)（注：作图时一定要细致，例如这里的细线是和文件的最左右端紧贴的，不容差1px。）（隐性知识：使用直线工具时，如果只想得到选区，切记选择属性面板中的路径图标，如图2-19所示，后面提及的其他绘制路径工具同理。）（知识要点：路径） 图2-17 图2-18图2-19图2-20步骤12：将路径转换为选区（快捷键：ctrl+enter），改前景色为#b90101，填充前景色（快捷键：alt+delete），ctrl+d去掉选区，并使用键盘的上下左右键移动红线至合适位置，最终效果如图2-21所示。（隐性知识：photoshop中除了用油漆桶填充颜色外，可以很简单的先改变前景色或者背景色，然后使用快捷键填充颜色，填充前景色：alt+delete, 填充背景色：ctrl+delete。）图2-21步骤13：在此本应制作标志，但标志是一个重要的设计环节，为了思绪的完整性，可以放在最后边单独重点设计。分别拖拽垂直、水平参考线以帮助设计其他版区。将鼠标移至左、上标尺，往外拖拽然后释放鼠标即可得到参考线，如图2-22，2-23，2-24所示。（注：鼠标放至左标尺上往外拖拽可得垂直参考线，放至上标尺上往外拖拽可得水平参考线。）（知识要点：参考线）图2-22图2-23图2-24步骤14：制作导航，在工具栏中选择【文本工具】，输入文字“首 页 公司简介 产品展示 行业动态 售后服务 分销合作”，然后确认，在字符段落窗口中调节文字属性，如图2-25，2-26，2-27所示，可以使用移动工具将文本移至合如图2-26所示合适位置。（提示：输入文本的方法一般分为两种，1、选择【文本工具】后，在画布上拖拽出区域，然后输入。2、直接在画布中单击然后直接输入文本。本书说的输入文本是指第二种方法。）（注：photoshop中对很多动作的确认都可以是回车确认，但是对于文本确认却不能回车，因为文本会默认为换行，所以一般有两种方法，1、切换到其他工具。2、在属性栏中选择对勾。）（隐性知识：输入导航文字时注意文字是在一个图层中，即是一气呵成输入的，中间的间距是用空格控制的，其他类似情况也是。如果必要才会一个文本项建立一个图层。）（知识要点：字符段落面板） 图2-25图2-26 图2-27步骤15：打开光盘“项目资料库/素材”中的1.jpg（快捷键：ctrl+o），向下还原窗口，以便可以观察到其他正在编辑的窗口，如图2-28，2-29所示。图2-28图2-29步骤16：在工具栏中选择【移动工具】，把1.jpg窗口中的内容拖拽到index的编辑窗口中，如图2-30，2-31所示。（知识要点：移动工具）图2-30图2-31步骤17： 使用在工具栏中的【移动工具】或者键盘的上下左右移动键移动红色条纹紧贴左边和水平线，如图2-32所示。图2-32步骤18：当拖动外部窗口的内容到编辑窗口时，系统会默认新建图层，重命名图层为“红色条纹”， 如图2-33，2-34所示。 图2-33 图2-34步骤19：使用变形复制方法复制多个红色条纹，方法如下：（1）在红色条纹右边缘加垂直参考线，如图2-35所示。按住ctrl键，在图层缩览图窗口上单击左键，这时即选择住了红色条纹图层中的内容，如图2-36，2-37所示。（2）ctrl+alt+t，使用键盘的向右键移动红色条纹至左边紧贴参考线，回车确认变形，如图2-38，2-39，2-40所示。（3）按住ctrl+alt+shift不放开，连续多次按t，如图2-41所示。（4）ctrl+d去掉选区，选择矩形选框工具，如图2-42，做如图2-43所示选区，按delete删除多余的红色条纹，效果如图2-44所示，ctrl+d去掉选区。（提示：变形复制出的红色条纹在一个图层中）（注：变形复制法是设计中很实用方便的方法，在做带有规律性图形变换上很方便，本书后面会多次用到。）（提问：如果去掉第（1）步骤，会是什么结果？）（知识要点：图层缩览图窗口 ） 图2-35 图2-36 图2-37 图2-38 图2-39 图2-40图2-41图2-42图2-43图2-44步骤20：新建图层并重命名为“蓝色渐变条纹”，如图2-45所示，在工具栏中选择【矩形选框工具】，做如图2-46所示选区。图2-45图2-46步骤21：改变前景色为：#ffffff，背景色为：#b9dbeb，在工具栏中选择【渐变工具】，选择线性渐变，按住shift键，从左至右拖拽，如图2-47所示，（方法类似9，10步骤中制作logo导航背景）,ctrl+d去掉选区。（知识要点：线性渐变）图2-47步骤22：在工具栏中选择【圆角矩形工具】，绘制半径为5，紧贴右边垂直参考线的圆角矩形，如图2-48，2-49所示。图2-48图2-49步骤23：ctrl+enter将路径转化为选区，反选（快捷键：ctrl+shift+i），delete删除蓝色渐变条纹多余的角，如图2-50所示。（注：这里读者也许不太了解，删除了什么东西，注意一下，前边我们做的蓝色渐变条纹是直角的，这里用圆角矩形把蓝色渐变条纹的右下角改变成了圆角。）（知识要点：反选）图2-5步骤24：新建“细线1”图层，在菜单栏中选择【编辑】/【描边】，ctrl+d去掉选区，隐藏参考线（快捷键：ctrl+h），观察效果，如图2-51，2-52，2-53，2-54所示。（隐性知识：ctrl+h可再次显示参考线。） 图2-51 图2-52图2-53图2-54步骤25：在工具栏中选择【矩形选框工具】选择需要留下的线条部分，如图2-55所示。然后ctrl+shift+i反选，delete删除多余部分，去掉选区，隐藏参考线，如图2-56所示。图2-55图2-56步骤26：给细线1图层添加蒙版，如图2-57所示，确认前景色背景色为黑白，在工具栏中选择【渐变工具】，确认渐变为黑白的线性渐变，如图2-58所示，按住shift键从下至上拖拽，如图2-59所示，效果如图2-60所示。（隐性知识：做渐变时如果做出的效果如果方向相反，最简单解决方法有两种，1、改变拖拽方向。2、改变属性栏中的“反向”状态。）（知识要点：蒙版 反向） 图2-57 图2-58图2-59图2-60步骤27：新建图层“细线2”，同步骤11方法一样，制作颜色为#afafaf的细线，并放至合适位置，如图2-61，2-62所示。 图2-61图2-62b、 主宣传广告步骤1：单击top组前的灰三角，闭合top组，新建组“主广告”，并新建图层“背景”，如图2-63所示。图2-63步骤2：添加紧贴灰色渐变的水平参考线，如图2-64，在工具栏中选择【矩形选框工具】绘制如图2-65所示选区。（注：选区紧贴参考线，最左边也紧贴边缘。）图2-64图2-65步骤3：做颜色#004b68到#00def3的线性渐变，完成后ctrl+d去掉选区，如图2-66，2-67所示。（提示：水平拖拽做出此渐变。） 图2-66图2-67步骤4：打开素材文件夹中的2.jpg图片，使用钢笔抠图，方法如下：（1）在工具栏中选择【钢笔工具】，并调节好相应属性，如图2-68所示。（2）放大图片（快捷键：ctrl+alt+=）到合适大小，本图放大到300%就可以，按住空格键，按住鼠标左键拖动屏幕到合适位置，如图2-69所示。（3）使用钢笔围绕mp3边缘处点多个锚点，最后一锚点和起始的重合，即建立闭合路径，如图2-70，2-71所示。（4）在工具栏中选择【转换点工具】，在其中一锚点上单击，当锚点变为实心即可，在实心锚点上拖拽出两手柄，拖动调节手柄使路径更贴近mp3边缘，也可调节单个手柄，同样的方法调节需要调节的锚点，如图2-72，2-73所示。（5）ctrl+alt+0实际像素查看图片，ctrl+enter将路径转化为选区，如图2-74，2-75所示。（注：在设计中按住空格键，鼠标就会变成手型，可方便拖动画布到合适位置。）（隐性知识：抠图方法很多，如：魔棒，磁性套索，多边形套索，通道，钢笔，钢笔工具的抠图是photoshop中很重要的技术。）（知识要点：钢笔 抠图 锚点 手柄 闭合路径 转换点工具）图2-68图2-69图2-70图2-71图2-72 图2-73 图2-74 图2-75步骤5：同制作“标志，导航区”中步骤15，16一样，在工具栏中选择【移动工具】将图mp3移动到index中。步骤6：ctrl+t，按住shift，沿对角方向拖拽进行等比例缩放图mp3，回车确认，放置合适位置，如图2-76，2-77所示。（隐性知识：1、等比例缩放的方法:ctrl+t，按住shift键，沿对角线进行拖拽。2、一般图片在缩放的时候都要选择等比例，不然会失去其意义。）（知识要点：自由变换 等比例缩放） 图2-76 图2-77步骤7：重命名为“mp3”，如图2-78所示。图2-78步骤8：新建图层“曲线”，如图2-79所示。图2-79步骤9：在工具栏中选择【钢笔工具】，点击3个锚点成闭合路径，如图2-80，2-81所示。（注：闭合路径即其起始点和结束点重合，例如描点分别为a，b，c，则a和c重合。） 图2-80图2-81步骤10：在工具栏中选择【转换点工具】，在路径上单击，则所有锚点可见，如图2-82，2-83所示。 图2-82图2-83步骤11：在锚点上单击，当锚点成实心时，则可以在锚点上拖拽出手柄，如图2-84，2-85所示。（注：单个手柄也可以拖拽）图2-84图2-85步骤12：调节四个手柄，做出曲线，如图2-86所示。图2-86步骤13：ctrl+enter将路径转化为选区，如图2-87所示。将前景色调节为白色（#ffffff），alt+delete填充前景色，ctrl+d去掉选区，如图2-88所示。图2-87图2-88步骤14：在图层面板中调节图层透明度为54%，并ctrl+j复制曲线图层，如图2-89，2-90所示。（知识要点：图层透明度） 图2-89 图2-90步骤15：ctrl+t给曲线加自由变换框，在框区内单击右键，选择扭曲，点住最右边的中间控制点，往下拖拽，最后回车确认，如图2-91，2-92，2-93，2-94所示。（知识要点：控制点）图2-91图2-92图2-93图2-94步骤16：新建图层“音乐符”，在工具栏中选择【自定义形状工具】，选择音符，如图2-95，2-96，2-97，2-98所示。（注：如果没有音符，可参考图2-98所示选择“全部”。）（知识要点：自定义形状工具） 图2-95 图2-96图2-97图2-98步骤17：按住shift键拖拽出音符路径，ctrl+enter将音符路径转换为选区，并填充颜色#daf418，如图2-99，2-100，2-101所示。图2-99图2-100图2-101步骤18：ctrl+j复制图层，移动音符到合适位置并ctrl+t自由变换，ctrl+u打开【色相/饱和度】窗口，调节色相，如图2-102所示。（知识要点：色相/饱和度）图2-102步骤19：打开素材文件夹中的3.png，4.png，拖拽到index中，并相应重命名，如图2-103所示。图2-103步骤20：复制多个小鱼大鱼，并ctrl+u变换其色相，ctrl+t变换其大小，调节所有鱼到合适位置，如图2-104所示。图2-104步骤21：至此发现主宣传广告稍欠缺立体感，复制“mp3”图层，并让编辑状态处于“mp3”图层，如图2-105所示。图2-105步骤22：ctrl+t，并扭曲mp3，如图2-106，2-107所示。图2-106图2-107步骤23：回车确认，并在图层面板中调节mp3图层透明度为13%，如图2-108，2-109所示。图2-108图2-109步骤24：使编辑状态处于背景图层，按住ctrl，单击“背景”图层前的图层缩览图小窗口，如图2-110，2-111所示。(隐性知识：选中某图层所有内容的方法，按住ctrl，单击此图层前的图层缩览图小窗口。)图2-110图2-111步骤25：在工具栏中选择【矩形选框工具】，在属性栏中选择与选取交叉样式按钮，如图2-112所示。（注：选择工具的属性面板中都有4个按钮，分别是：新选区，添加到选区，从选区中减去，与选区交叉，前面两个很好理解，后面两个和几何中的互补，相交类似，如图2-202所示。）图2-112步骤26：从右下向上拖拽选区选择背景的右半部分，如图2-113，释放鼠标，如图2-114所示。图2-113图2-114步骤27：ctrl+c，ctrl+v复制粘贴，重命名图层为“背景右半立体”，如图2-115所示。图2-115步骤28：打开菜单栏【图层】/【图层样式】/【内阴影】窗口，并设置属性，如图2-116，2-117所示。图2-116图2-117步骤29：ctrl+t上下左方向拖拽放大背景右半立体，如图2-118所示。图2-118步骤30：新建图层，并点击“背景右半立体”图层缩览图窗口前的小窗口，链接刚新建的图层，ctrl+e合并此两个图层，如图2-119，2-120所示。（注：photoshop7.0，photoshop8.0，以及cs2的链接图层都是点击图层缩览图窗口前的小窗口给图层加上锁链，而cs3的链接图层却按住ctrl键选择图层面板中需要链接的图层，然后单击面板左下角的锁链按钮。）（知识要点：链接图层 合并图层） 图2-119 图2-120步骤31：按住ctrl键，单击背景图层前的图层缩览图小窗口，如图2-121所示。图2-121步骤32：ctrl+shift+i反选，delete删除多余区域，ctrl+d去掉选区，如图2-122所示。图2-122步骤33：在工具栏中选择【矩形选框工具】，拖拽选区选择多余的阴影，delete删除，如图2-123所示，ctrl+d去掉选区。图2-123步骤34：输入文字宣传“the natural music”，颜色白色，即#ffffff，（字体：blutter）如图2-124所示。图2-124子任务3：设计首页主内容区a、主背景步骤1：收起“主广告”组，在之上新建组“主背景”，并新建图层“大背景”，如图2-125所示。图2-125步骤2：在工具栏中选择【矩形选框工具】，绘制尺寸：1003*595px的选区，如图2-126，2-127所示。图2-126图2-127步骤3：为选区填充颜色#dadada，如图2-128所示。图2-128步骤4：在工具栏中选择【圆角矩形工具】，圆角半径为5px，绘制如图2-129，2-130所示的路径。（知识要点：圆角矩形工具 圆角半径）图2-129图2-130步骤5：将路径转化为选区，新建图层“中间背景”，填充颜色#ececec，如图2-131所示。图2-131步骤6：先不要去掉选区，新建图层“描边”，从菜单栏中【编辑】/【描边】进行描边，颜色为#afafaf，如图2-132，2-133所示。（知识要点：描边居内、居中、居外 ）图2-132图2-133步骤7：ctrl+j复制“中间背景”图层，但使编辑状态仍处于“中间背景”图层，如图2-134所示。图2-134步骤8：ctrl+u打开【色相/饱和度】窗口，调节亮度到最高值，使中间“背景图层”中的背景变为纯白色，如图2-135所示。（隐性知识：使图片变为纯白的方法就是ctrl+u，调节亮度到最高值。使之纯黑的方法是调节亮度到最低值。）图2-135步骤9：使“中间背景副本”图层处于编辑状态，如图2-136图2-136步骤10：选择此图层中的内容，并选择任一选择工具，在选区内单击右键选择羽化(快捷键为：ctrl+alt+d)，羽化半径6px，如图2-137，2-138，2-139所示。（知识要点：羽化 ，羽化半径）图2-137图2-138图2-139步骤11：ctrl+shift+i反选，并连续4次按delete键，去掉选区，最终效果如图2-140所示。（提问：如果不反选，直接连续按delete键，会是什么效果？）图2-140步骤12：拖拽图层面板中的图层“中间背景副本”到图层“描边”之上，以便遮住最底下的描边，如图2-141所示。图2-141步骤13：新建图层“顶灰条”，按住ctrl键，单击“中间背景 副本”图层前的图层缩览图小窗口，则在图层“顶灰条”中出现“中间背景 副本”图层内容的选区，如图2-142所示。（隐性知识：处于a图层编辑状态，要得到b图层内容的选区，方法是，处于a图层编辑状态，按住ctrl键，单击b图层前的图层缩览图小窗口。但是注意，虽然看似选择图层b中的内容，其实并非如此，操作编辑的只能是图层a中的内容。）图2-142步骤14：在工具栏中选择【矩形选框工具】，选择属性面板中的与选区交叉样式，如图2-143所示。从左上往右下方拖拽出如图2-144所示的选区。图2-143图2-144步骤15：释放鼠标，填充白色，即#ffffff，如图2-145所示。图2-145步骤16：在工具栏中选择【画笔工具】，并选择如图2-146所示的笔头，调节相应的属性。图2-146步骤17：设置前景色为#afafaf，在区域内涂抹出合适效果，如图2-147所示。图2-147步骤18：自由变换调节合适高度，最终效果如图2-148所示。图2-148步骤19：新建图层“中间下方立体感”，如图2-149所示，用步骤13，14中所方法，做出如图2-150所示选区。图2-149图2-150步骤20：同步骤2，3，在工具栏中选择【渐变工具】，上下拖拽，做颜色#ececec到#dedede的线性渐变，制作出立体感，效果如图2-151所示。图2-151b、产品类别，新品推荐步骤1：在组“主背景”之上新建组“产品分类”。打开素材中的7.jpg，放置到合适位置，并重命名图层为“渐变小条”，如图2-152，2-153所示。 图2-152 图2-153步骤2：新建图层“红条”，绘制尺寸59*2px的选区，填充颜色#c4171d，如图2-154所示。图2-154步骤3：同上，新建图层“灰条”，绘制尺寸149*2px的选区，填充颜色# b6b6b6，如图2-155所示。图2-155步骤4：在红灰条上输入文字“产品分类”，颜色为#000000，如图2-156所示。图2-156步骤5：输入点（颜色#b6b6b6）和产品类别文字，其中产品类别名称颜色为#000000，产品品牌颜色为#b6b6b6，文字如下：“mp3 mp4 mp5(oppo、ipod.)耳机(森海塞尔、拜亚动力.)音响(麦博梵高、索尼.)”如图2-157所示。（注：产品类别中文字下方的类似省略号的多个点可利用键盘上的点制作。）图2-157步骤6：打开素材文件夹中的6.png，同“标志区，导航区”中19步骤中的方法一样，做出3个间距相等的箭头，重命名图层为“箭头”，如图2-158所示。（提示：“标志区，导航区”中19步骤中是水平移动的，这里需要垂直移动，做的时候最好把视图放大去做。）图2-158步骤7：收起组“产品分类”，在图层面板的“产品分类”组上单击右键复制组，并重命名为“新品推荐”，如图2-159，2-160所示。 图2-159 图2-160步骤8：按住shift键，在工具栏中选择【移动工具】，在画布上把组内容往下拖拽到合适位置，如图2-161所示。（隐性知识：要同时移动某组的所有内容，可以让编辑状态处于此组，然后在画布上移动。如果要移动某几个图层，可以做链接然后在移动。）（知识要点：画布）图2-161步骤9：展开“新品推荐”组，只留下图层“产品类别”，“灰条”，“红条”，“渐变小条”，在其他图层上单击右键删除图层，结果如图2-162所示。图2-162步骤10：选择【文字工具】，在画布“产品类别”文字上单击，改变“产品类别”为“新品推荐”，如图2-163所示。图2-163步骤11：打开产品文件夹中的苹果ipod nanoiii(8g 红色).jpg，从菜单栏的【图像】/【图像大小】中调节图像大小为：157*157px，如图2-164，2-165所示。(提问：菜单栏中的【图像】/【图像大小】可以调节图像大小，注意弹出的图像大小窗口中，最底下有“约束比例”选择项，如果不选择会是什么效果？) 图2-164 图2-165步骤12：拖拽到index中，放至合适位置，图层重命名为“新品”，如图2-166所示。图2-166步骤13：选择菜单栏中的【图层】/【图层样式】/【描边】，打开描边窗口，给新品描边，颜色#000000，如图2-167,2-168所示。图2-167图2-168步骤14：在新品正下方输入文字“苹果 ipod nanoiii（8g/红色）”，颜色为#c4171d，如图2-169所示。图2-169步骤15：打开素材文件夹中的8.jpg，放至合适位置，并重命名图层为“左右分割条”，如图2-170所示。图2-170c、公司简介步骤1：收起“新品推荐”组，复制此组，并移至合适位置，如图2-171所示。图2-171步骤2：重命名为“公司简介”，展开组，如图2-172所示。图2-172步骤3：删除多余图层，结果如图2-173所示。图2-173步骤4：修改画布中的新品推荐文字为“公司简介”，如图2-174所示。图2-174步骤5：选择编辑“灰条”图层，ctrl+t自由变换灰条，使之加长，如图2-175，2-176所示。（提示：做自由变化时，如果鼠标箭头一直很难达到所要效果，可以放大视图去做。）图2-175图2-176步骤6：打开素材件夹中的5.jpg，拖拽到index中，放至合适位置，并重命名图层为“人物”，如图2-177所示。图2-177步骤7：按住ctrl键，单击“人物”图层前的图层缩览图小窗口，从菜单栏的【选择】/【修改】/【扩展】扩大选区2px，如图2-178，2-179所示。 图2-178 图2-179步骤8：从菜单栏的【编辑】/【描边】给人物描边，颜色# bababa，最后去掉选区，如图2-180，2-181所示。 图2-180 图2-181步骤9：输入项目资料库中 “朗声企业简介.doc”中的文字，颜色为#000000，如图2-182所示。（提示：在首页输入文字时，如果文字过多，可以根据需求删除做省略，因为子页会有详细介绍，没有必要在首页完全介绍，如图所示。）图2-182步骤10：打开素材件夹中的10.jpg放至合适位置，并重命名为“more”，如图2-183所示。图2-183d、站内公告 行业动态步骤1：收起“公司简介”组，新建组“公告”，拖拽垂直参考线紧贴组“公司简介”内容最左边缘，打开素材文件夹中的9.png，放至合适位置，并重命名图层为“栏目背景”，如图2-184所示。图2-184步骤2：在20.8厘米处加垂直参考线，用以上学习绘制细线的方法绘制颜色为#b6b6b6的1px细线，重命名图层为“细线”，如图2-185所示。（注：此细线是和红色的9.png平行的，并不是在它之下。）图2-185步骤3：打开素材件夹中的10.jpg并放至合适位置，重命名图层为“more”，如图2-186所示。（隐性知识：既然公司简介中已经有“more”了，这里也可以直接复制组“公司简介”中的“more”图层，移动其到合适位置。）图2-186步骤4：输入白色（#ffffff）文字“站内公告”，如图2-187所示。图2-187步骤5：同产品分类一样，输入颜色为#b6b6b6的下划线，如图2-188所示。图2-188步骤6：复制组“产品分类”中的“箭头”图层，并拖拽到公告组中，如图2-189，2-190所示。 图2-189 图2-190步骤7：选择工具栏中的【移动工具】移动画布中的箭头到合适位置，如图2-191所示。图2-191步骤8：输入颜色为#000000的黑色文字：“西安耳机批发、厂家、报价西安清华紫光mp3、报价、批发提供款式新颖的mp3,mp4,mp5等”，如图2-192所示。图2-192步骤9：收起组“公告”，复制此组，并重命名为“行业动态”，如图2-193所示。图2-193步骤9：拖拽垂直参考线贴近组“公司简介”内容最右边缘，如图2-194所示。图2-194步骤10：按住shift键，水平移动画布中“行业动态”组内容到如图2-195所示位置。图2-195步骤11：更改画布中的“站内公告”文字为“行业动态”，行业动态条目文字如下：“动感流行前沿 08第三季度.2008-10-10节后大屏mp4新看点 锐舞.2008-10-8上海国际灯光音响展 350.2008-9-24”最终效果如图2-198所示。（注：其中前部文字颜色为#000000；字符面板如图2-196，后部文字颜色为：#b6b6b6；字符面板如图2-197。） 图2-196 图2-197图2-198e、产品展示步骤1：收起组“行业动态”，复制组“公司简介”，并重命名为“产品展示”，如图2-199所示。图2-199步骤2：按住shift键，向下垂直移动画布中组“产品展示”中的内容到如图2-200所示位置。图2-200步骤3：修改“公司简介”文字为“产品展示”，并删除多余的“人物”图层和简介文字，最终效果如图2-201所示。图2-201步骤4：打开产品文件夹中的苹果ipod nano 3(4gb）.jpg，在工具栏中选择【裁剪工具】，并设置其尺寸大小为178*162px，如图2-202所示。拖拽出如图2-203选框，然后回车确定。（隐性知识：当第二次想要正常使用裁剪工具时，即不想要尺寸限制时，需要把宽度和高度里面的值全部删除。）（知识要点：裁剪工具） 图2-202 图2-203步骤5：拖拽产品图片至index中，等比例缩放至合适大小，重命名图层为“产品1”，并给左右两侧加参考线，在距右边缘近1厘米处加垂直参考线，如图2-204所示。（注：在距右边缘近1厘米处加垂直参考线的目的是控制产品图片之间的间距。）图2-204步骤6：按住ctrl键，单击图层面板中图层“产品”前的图层缩览图小窗口，使产品1处于被选择状态,变形复制多个产品1，如图2-205，2-206所示。（注:变形复制具体方法见“标志区，导航区”中的19步骤。）图2-205图2-206步骤7：打开产品文件夹的oppo d33l.jpg，拖拽到index中，并放至产品1的第二个图片处，并重命名图层为“产品2”，如图2-207所示。图2-207步骤8：等比例缩放产品2到略大于下方被遮的产品1，并放置合适位置，如图2-208所示。（隐性知识：和生活常识一样，略大于下方被遮产品1的目的是为了以下方所放图片为样板，裁剪多余的部分，如果小于就达不到效果。）图2-208步骤9：按住ctrl键，单击图层面板中图层“产品1”前的图层缩览图小窗口，ctrl+shift+i反选，delete删除露出区域，如图2-209，2-210所示。图2-209图2-210步骤10：打开产品文件夹中的索尼 srs-zp1000.jpg，edifier 漫步者 k303 头戴式耳机.jpg，使用上述制作产品2的方法做出产品3，产品4，最终效果如图2-211所示。图2-211步骤11：新建图层“描边”，如图2-212所示。图2-212步骤12：按住ctrl键，单击图层面板中图层“产品1”前的图层缩览图小窗口，从菜单栏中的【选择】/【修改】/【扩展】对选区扩展2px，如图2-213所示。图2-213步骤13：从菜单栏中的【编辑】/【描边】对其描边，颜色为#00577c，ctrl+d去掉选区，如图2-214，2-215所示。 图2-214图2-215步骤14：输入产品名称“苹果 ipod nano 3 oppo d33l 索尼 srs-zp1000 漫步者 k303 头戴式耳机”并对应放至产品正下方，如图2-216所示。图2-216子任务4：设计首页页尾区a、底部导航，网站底部信息步骤1：收起组“产品展示”，在组“top”之上新建组“底部背景”，如图2-217所示。（注：为什么要在组“top”之上新建组“底部背景”？因为不能遮住主背景。当然也可以在组“主广告”之上新建。）图2-217步骤2：新建图层“底部背景”，在工具栏中选择【矩形选择工具】，绘制1003*79px的选区，并填充颜色#bfbfbf，如图2-218所示。图2-218步骤3：收起组“底部背景”，在组“行业动态”之上新建组“底部”，如图2-219所示。（注：为什么要在组“行业动态”之上新建组“底部”？因为底部的内容是在所有内容之上，不能被其他内容遮住。当然选择有多种，这里选择在组“行业动态”之上新建。）图2-219步骤4：新建图层“白细线”，绘制1px白色细线，并放至合适位置，如图2-220所示。图2-220步骤5：输入下面底部导航文字，颜色为#006287：“+ 返回首页 + 添加收藏 + 友情链接 + 联系我们”如图2-221所示。图2-221步骤6：输入下面文字，颜色为#5f5f5f：“copyright 版权所有：西安朗声科贸有限公司 电话e-mail： 技术支持：商务网页设计与制作课程开发项目组”字符窗口如图2-222所示，段落窗口如图2-223所示，最终效果如图2-224所示。 图2-222 图2-223图2-224补充标志区当企业没有企业标志的时候，需要根据行业，客户需求等专门设计标志，大型企业还会委托专业人士设计并进行竞标。因为本案例客户已经提供相应logo，则不需要重新设计。闭合组“底部”，展开组“top”，打开素材文件夹中的logo.png，拖拽到index中，并等比例缩放至如图2-225所示合适位置，重命名图层为“logo”。图2-225至此完成首页设计u 子任务5：生成首页效果图步骤1：存储文件为web所用格式，快捷键为: ctrl+alt+shift+s。步骤2：在弹出的对话窗口中选择优化的文件格式为“jpeg”，压缩品质为“最佳”，存储在源文件文件夹中，命名为“index.jpg”。（知识点：jpeg压缩）任务2 客户沟通、优化、定案任务完成为完成本任务，需要做一下几项工作。子任务1：给客户演示首页效果图步骤1：与客户预约沟通的时间与地点。步骤2：给客户演示首页效果图。（知识要点：演示首页）步骤3：给客户演示首页效果图时应分析其整体风格，各版区风格、功能，以及网站的特色，以后会添加的一些效果，其他子页面大体会是什么风格等。子任务2：整理并沟通客户建议步骤1：听取并记录客户的修改意见。步骤2：对于修改意见进行沟通。（注