平面设计项目化教程 普星 项目4模块2.pptVIP

项目四：网页布局设计 项目四：网页布局设计 任务一：设计和制作班级网站主页  其具体操作（请老师参照软件讲解样式风格统一即可 ） 模块小结 Photoshop是一个十分常用的版面设计和版面处理的图像处理软件，使用方便、简单、快捷，在网页设计方面也是必不可少的利器之一。一是处理网页中使用的图像，二是进行页面布局。一般专业网页设计人员，就经常使用Photoshop来设计富有个性化的页面。 使用Photoshop设计页面，一般经过以下几个步骤： 按网页大小建立一个新文档。 导入相关的图片。 设计版面布局。 切片输出。 在输出时可选择输出为html文件类型。 在使用较大图像制作网页时，一般要使用切片工具将图像切为若干个小图像，将单一颜色的部分切为单独的块，在网页中使用颜色填充。切片工具，除了可以将大图“化整为零”以外，还可以用于制作轮换图像等效果。提供切片工具的软件，除了Photoshop外，还有三剑客中的Firework等，其使用方法基本相同。 同步实训 实训一 实训主题：设计个人网站主页面 实训目的： 会使用Photoshop设计网站主页。 会将设计好的网站首页进行切片处理，并将切好片后的首页文件保存为网页文件。 实训内容： 利用Photoshop设计自己的个人网站首页。 将设计好的个人网站首页利用Photoshop中的切片工具进行合理切片，并将切好片的网页另存为网页文件形式，主页的文件名取名为index.html，存于MyPersonalSite文件夹下。 同步实训 实训二 实训主题：设计制作健雄职业技术学院工会网站主页面 实训目的： 会使用Photoshop设计网站主页。 会将设计好的网站首页进行切片处理，并将切好片后的首页文件保存为网页文件。 实训内容： 利用Photoshop利用Photoshop设计如图所示的效果。 将设计好的主页利用Photoshop中的切片工具进行合理切片，并将切好片的网页另存为网页文件形式，主页的文件名取名为index.html，存于gh文件夹下。 同步实训 思考与练习 欣赏李宁体育用品公司 ()、海尔集团（）、凤凰古城旅游网（）、中国大众体育网（）等优秀网站的页面，自己归纳总结这些网站在色彩的运用、版式的布局、导航页的运用上的特色与优点。 《平面设计》项目化教程项目四 * * * 中国水利水电出版社 平面设计项目化教程 主 编 普 星 副主编 沈蕴梅 史桂红 周玲余 吴 迪 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 模块 4?2：班级网站主页设计 学习目标： 会使用Photoshop制作班级网站主页 会使用Photoshop中的切片工具对网页进行切片处理 会使用Photoshop导出和图像优化处理 工作情景： 为班级网站设计主页，要求主页中包含班级新闻、站内新闻搜索、管理员登录、网络导航等内容，页面中要求图文并茂，布局合理。 任务一：设计和制作班级网站主页 【任务分析】 根据任务要求，要求使用Photoshop对班级网站的主页进行设计与制作，主要用到的技法和核心知识有：描边路径、变形文字以及“投影”等样式的运用。 制作思路： 在Photoshop 中使用样式面板、图层样式等制作导航条 使用使用切片工具裁切主页 任务一：设计和制作班级网站主页 最终效果图 最终效果图