网站设计与网页制作立体化项目教程（第4版） 课件 2-2-3 课件：英博特网站开发准备-设计网站首页效果图

第二篇：项目实战篇任务2：“英博特智能科技”企业网站开发准备2.3设计网站首页效果图2.3设计网站首页效果图（1）能合理布局使网页内容的分布主次分明，便于操作。（2）能合理运用色彩搭配，满足客户的需求。（3）能熟练使用Photoshop软件创作网页界面。（4）培养艺术欣赏能力。（5）培养权益意识。（6）培养协作能力和交流能力。能力要求学习导览任务概述“英博特智能科技”企业网站的首页包括LOGO、导航、banner、公司优势、关于我们、服务范围、产品展示、案例展示、新闻中心、合作伙伴及版权几个部分。2.3设计网站首页效果图任务思考（1）目前最常见的PC端屏幕分辨率是多少？（2）Photoshop中图像大小和画布大小的区别？（3）Photoshop中如何增加画布的高度？2.3设计网站首页效果图页面大小2.3设计网站首页效果图屏幕分辨率（px）安全宽度范围（px）推荐值宽度（px）高度（px）1024×768980-10029805481280×8001190-120011905801366×7681200-133112005481440×9001200-1405120010801200-1405120016001689-188516891220安全宽度请创建名为“英博特智能科技”网站首页效果图的PSD源文件。规划首页内容根据本篇任务1中完成的策划书，可以得到首页规划的具体内容：LOGO、导航、banner、内容块（公司优势、关于我们、服务范围、产品展示、案例展示、新闻中心、合作伙伴）以及版权等几个部分。2.3设计网站首页效果图Navigation导航Header头部区域、页头BodyPageTitleBreadcrumbNavigationPagingNavigationPageTitle内容主体（包含了下面的常用元素）页面标题面包屑导航分页页面标题Footer底部区域、页脚LogoorIdentity网站标识、网站名称Copyright版权声明、版权信息区域Banner横幅区、由符号、图形、口号、材质等元素组合而成设计首页版式在Photoshop中使用参考线对页面进行划分，分成上部、中部、底部，中部又分成七个内容块，其中服务范围、产品展示、案例展示内容块均分为三列，可设置每列“382像素”，列间距“17像素”。在设计页面草稿图时应该同时考虑每个模块打算放什么内容，占多大比例等，比例可以参考三分之一法则（简化的黄金比例）来分配每个模块2.3设计网站首页效果图确定配色方案“英博特智能科技”网站采用的是暖色调黄色（#FEC502），配合灰白辅助色。2.3设计网站首页效果图单色调相近色调互补色调三重色调经典的配色方案任务实施01.设计制作首页上部具体要求见任务书2.3设计网站首页效果图任务实施02.设计制作首页中部具体要求见任务书2.3设计网站首页效果图“公司优势”内容块任务实施02.设计制作首页中部具体要求见任务书2.3设计网站首页效果图“关于我们”内容块任务实施02.设计制作首页中部具体要求见任务书2.3设计网站首页效果图“服务范围”内容块任务实施02.设计制作首页中部具体要求见任务书2.3设计网站首页效果图“产品展示”内容块任务实施02.设计制作首页中部具体要求见任务书2.3设计网站首页效果图“案例展示”内容块任务实施02.设计制作首页中部具体要求见任务书2.3设计网站首页效果图“新闻中心”内容块任务实施02.设计制作首页中部具体要求见任务书2.3设计网站首页效果图“合作伙伴”内容块任务实施03.设计制作首页底部具体要求见任务书2.3设计网站首页效果图讨论区请完成“英博特智能科技”网站首页效果图的设计与制作，并截图上传讨论区。2.3设计网站首页效果图任务实施04.以首页为模板制作子页效果具体要求见任务书2.3设计网站首页效果图讨论区请完成“英博特智能科技”网站子页效果图的设计与制作，并截图上传讨论区。2.3设计网站首页效果图完成5个在线测试题运用本课学习的技术，