网站设计与网页制作立体化项目教程（第4版） 课件任务2：“英博特智能科技”企业网站开发准备

第二篇：项目实战篇任务2：“英博特智能科技”企业网站开发准备2.1设计网站LOGO2.1设计网站LOGO（1）学会使用Photoshop工具设计制作网站LOGO。（2）学会对LOGO进行美化处理，如特殊文字效果等。（3）能根据网站的主题自主设计LOGO。（4）会利用文字阐述LOGO设计的思想。能力要求学习导览任务概述制作“英博特智能科技”企业网站LOGO，学会Photoshop软件的基本使用，掌握图层、选区的基本概念，最终完成的企业网站LOGO的设计。2.1设计网站LOGO任务思考（1）使用Photoshop软件如何绘制同心圆？（2）图层之间如何设置水平居中、垂直居中？（3）透明背景的图片应该保存为什么格式？

2.1设计网站LOGOLOGO设计思想与原则设计LOGO的工具LOGO在视觉的品牌传播和传达企业对内对外的精神和文化理念方面均起着举足轻重的作用。2.1设计网站LOGOLOGO设计思想与原则苹果公司LOGO的演变LOGO应具有代表性的寓意2.1设计网站LOGOLOGO设计思想与原则LOGO的用色能表达品牌特性“蓝色巨人”（BigBlue）信任、可靠吉祥、挑战能量、温度三大主要用色2.1设计网站LOGOLOGO设计思想与原则LOGO的字体能反映品牌定位LOGO的字体2.1设计网站LOGOLOGO设计思想与原则LOGO设计常用技巧比例对比复制2.1设计网站LOGO网站常用图片格式GIF格式的特点是压缩比高，磁盘空间占用较少，下载速度快GIF的缺点是不能存储超过256色的图像JPEG可以用最少的磁盘空间得到较好的图像质量，文件尺寸较小，下载速度快。PNG是目前保证最不失真的格式，它存储形式丰富，兼有GIF和JPEG的色彩模式；能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息，显示速度快，支持透明图像的制作JPEGGIFPNG2.1设计网站LOGO任务实施制作LOGO02.保存文档03.01.新建文档具体要求见任务书2.1设计网站LOGO讨论区运用所学知识，完成英博特网站LOGO的制作，截图上传讨论区。2.1设计网站LOGO完成5个在线测试题运用本课学习的技术，根据自选主题的网站项目策划书，设计网站LOGO，并使用Photoshop软件完成LOGO的制作。（详见能力拓展）。2.1设计网站LOGO学习从来无捷径，循序渐进登高峰。Web前端技术基础高永祚第二篇：项目实战篇任务2：“英博特智能科技”企业网站开发准备2.2加工图像素材2.2设计加工图像素材（1）进一步理解Web图像格式（GIF、JPEG、PNG）。（2）学会批量处理图像（如更改图像大小）。（3）学会去除图片上的水印。（4）学会调整图像属性（如亮度/对比度、色相/饱和度、色阶、曲线等）。（5）学会美化加工图像。（6）学会应用特殊文字。能力要求学习导览任务概述为“英博特智能科技”企业网站加工图像素材，熟练掌握Photoshop软件的使用，学会批量更改图像大小，去除图片上的水印，调整图像属性，改变图像的背景颜色，使用图层蒙版合成图像，应用特殊文字等。2.2加工图像素材任务思考（1）Photoshop中如何在不改变原图层的基础上调整图像属性？（2）Photoshop中有哪些方法可以完成抠图？（3）Photoshop中常用的图层样式有哪些？2.2加工图像素材任务实施01.批量处理图像2.2加工图像素材动作具体要求见任务书讨论区请对提供的before文件夹中的图片进行批量裁剪大小的处理，处理的图片放在after文件夹中，并截图上传讨论区：2.2.1批量处理图片。2.2加工图像素材任务实施02.去除图片水印2.2加工图像素材具体要求见任务书去除水印后“内容感知移动工具”讨论区请对提供素材图片进行去除水印处理，并截图上传讨论区：2.2.2去除图片水印。2.2加工图像素材任务实施03.调整图像属性2.2加工图像素材具体要求见任务书调整亮度/对比度“调整亮度/对比度”、“调整色相/饱和度”、“使用“色阶”功能”讨论区请对提供素材图片进行调色处理，并截图上传讨论区：2.2.3调整图像属性。2.2加工图像素材任务实施04.美化加工图像2.2加工图像素材具体要求见任务书改变图像背景“魔棒工具”、“钢笔工具”钢笔工具抠图讨论区请运用“魔棒工具”和“钢笔工具”对提供素材图片美化处理，并截图上传讨论区：2.2.4美化加工图像。2.2加工图像素材任务实施05.应用特殊文字2.2加工图像素材具体要求见任务书方正小标宋简体讨论区请参照效果图进行制作，并截图上传讨论区：2.2.5应用特殊文字。2.2加工图像素材完成5个在线测试题运用本课学习的技术，根据自选的网站主题完成网站图像素材的加工，并将加工前后对比效果粘贴在功能表中。（详见能力拓展）。2.2加工图像素材千教万教教人求真，千学万学学做真人。Web前端技术基础陶行知第二篇：项目实战篇任务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个在线测试题运用本课学习的技术，根据网站项目策划书，完成主题网站首页及子页效果图的设计制作。（详见能力拓展）。2.3设计网站首页效果图只要还有什么东西不知道，就永远应当学习。Web前端技术基础小塞涅卡（古罗马哲学家）第二篇：项目实战篇任务2：“英博特智能科技”企业网站开发准备2.4裁切网站首页效果图2.4裁切网站首页效果图（1）熟练使用Photoshop软件裁切网页效果图。（2）掌握创建和编辑切片的方法。能力要求学习导览任务概述在Photoshop中将“英博特智能科技”企业网站首页设计图进行裁切，获取网页制作的图片素材文件2.4裁切网站首页效果图任务思考（1）Photoshop切片工具的作用？（2）纯色背景需要创建切片吗？（3）切片的原则有哪些？2.4裁切网站首页效果图切片作用2.4裁切网站首页效果图切片可以使整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，能够节约很多时间。切片可以优化图像。对于作为切片的各幅小图片就可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。切片原则2.4裁切网站首页效果图（1）切片是使用HTML+CSS实现网页布局的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。（2）没有使用特殊文字效果的网页正文不需要切，可以直接使用HTML代码来实现。（3）裁切的时候要注意平衡，比如右侧裁切了，那么左侧也要等高地裁切一下。（4）纯色背景和线型边框线不需要切片，可以直接由CSS代码实现。（5）如果某个对象的范围正好是要裁切的大小，可以直接使用“新建基于图层的切片”功能。（6）如果区域面积不大，可以不进行细致划分，只需将其整体裁切即可。（7）如果图片上面不需要添加文字，也就没有必要将其作为背景图案，直接作为图片处理即可。切片种类（1）用户切片：使用切片工具创建的切片。（2）基于图层的切片：从图层创建的切片。（3）自动切片：创建新的用户切片或基于图层的切片时，将生成占据图像其余区域的附加切片