商务网站建设的前台设计汇.docVIP

1 商务网站前台开发跟踪项目环节一 【教学目标】 终极目标：能熟练设计商务网页页面效果图 促成目标： 能熟练操作Photoshop软件并了解其它相关软件的使用 能进行合理的页面设计规划 能初步掌握商务沟通的方法与技巧 【项目概述】 小【项目分析】的人员【任务分解】为了完成项目，可以把它分解为以下几个任务。 任务 1：1：确定首页风格、色调、布局 子任务2：设计首页页头区 子任务3：设计首页主内容区 子任务4：设计首页页尾区 补充标准区 子任务5：生成网页首页效果图 任务 2：任务 3：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：生成子页效果图 91  任务1 首页设计 〖任务完成〗）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中对很多动作的确认都可以是回车确认，但是对于文本确认却不能回车，因为文本会默认为换行