商务网站建设的前台设计

《商务网站建设的前台设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、前台开发——意杨1商务网站前台开发跟踪项目环节一【教学目标】终极目标：能熟练设计商务网页页面效果图促成目标：l能熟练操作Photoshop软件并了解其它相关软件的使用l能进行合理的页面设计规划l能初步掌握商务沟通的方法与技巧【项目概述】小张在完成了朗声科贸商务网页策划后，接下来应该依据策划结果，设计该网站首页和子页，为后续网页制作工作做好准备。【项目分析】1、通过网站策划可得到哪些有价值的信息？完成了朗声科贸商务网站策划书后，我们得到这样一些有价值的内容，一是对朗声科贸的所属行业，网页的风格、色调、布局等作了分析及规划，生成了

2、朗声科贸商务网页设计与制作指导文案，二是勾画出了该网站的首页及子页设计草图，三是建立了网页设计与制作所需的项目资料库，这些都为项目二的工作做好了铺垫准备。2、设计商务网站页面效果图需要什么工具？一般企业电子商务应用服务商的技术人员在设计商务网站页面效果图时大都使用Photoshop图像处理软件设计，需要熟练灵活地使用Photoshop软件中的各个设计工具对设计效果进行准确把握，此外，还有许多其它的图形图像处理软件作为辅助，希望大家能多了解、多接触、灵活使用。3、首页设计和子页设计有何异同？83前台开发——意杨一般的商务网站各个

3、页面之间都保持着统一性，整体性，和谐型。首页的风格、色调、布局等确定后，子页也会和其保持和谐统一。因此一般在对首页进行良好设计后，可复制首页设计源文件,再根据子页的策划思想对子页页面进行局部重新设计以形成新的子页设计效果，这种思路要细细地体会和学习。【任务分解】为了完成这一项目，可以把它分解为以下几个任务和子任务。任务1：朗声科贸网站首页设计子任务1：确定首页风格、色调、布局子任务2：设计首页页头区子任务3：设计首页主内容区子任务4：设计首页页尾区补充标准区子任务5：生成网页首页效果图任务2：客户沟通、优化、定案子任务1：给客

4、户演示首页效果图子任务2：整理沟通客户建议子任务3：优化并定案首页面效果图任务3：子页设计子任务1：子页设计规划子任务2：设计子页页头区子任务3：设计子页主内容区子任务4：设计子页页尾区子任务5：生成子页效果图下面，将分别对这些任务的目标进行确认，并对任务的实施给予理论与实际操作的指导。【学习目标】★在完成任务的过程中思考、体会、学习本书中的“注”、“提示”、“隐性知识”、“提问”、“知识点”83前台开发——意杨★在本书的指导下能独自完成其他子页面的设计★学会自己分析问题，充分学会举一反三83前台开发——意杨目录任务1：朗声科

5、贸网站首页设计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：设计并制作

6、子页页尾区91子任务5：生成子页效果图9183前台开发——意杨任务1首页设计〖任务完成〗为完成本任务，需要做一下几项工作。子任务1：确定首页风格、色调、布局步骤1：打开光盘“流程图片/项目二流程图片”文件夹中的2-1.jpg，如图2-1所示。图2-1（提示:图2-1即是我们最后首页设计的效果图，同时结合在项目一对首页的策划分析，我们可从首页页头区，内容区，页尾区逐步完成设计，如图2-2所示。）（注：有些个性网页页头区，内容区，页尾区是在一起相互融合的，并不能完全清楚的独立开设计，这要视其情况而定。）83前台开发——意杨图2-2

7、步骤2：依据项目一中网页策划及所生成的指导文案可确定首页风格、色调、布局。首页风格即精细、简洁、大气、实用、有现代企业化气息、简体中文版，主要适应1024*768分辨率。主色调为蓝、灰、红，辅色调为白。（提示：在勾画中的设计草图中确定了首页的布局,在设计的时候注意应用。）子任务2：设计首页页头区A、标志区，导航区步骤1：从【开始】/【程序】中打开Photoshop软件，如图2-3所示。图2-3步骤2：关闭如图2-4所示欢迎窗口。83前台开发——意杨图2-4步骤3：新建文档（快捷键：Ctrl+N），设置完属性后单击【好】按钮，属

8、性设置如图2-5所示。（提示：本书中首次提及的快捷键会注明，后面则直接使用。）（注：像素英文缩写为px，后面直接用px。）（隐性知识：如果在以后的设计中画布大小不合适，可以从菜单栏的【图像】/【画布大小】进行调节。）（知识要点：像素分辨率）图2-5步骤4：实际像素查看文档（快