项目3主页的设计与制作(一布局)

项目 3 主页的设计与制作（一 页面布局）能力目标： 1.会搜集整理网站素材2.会进行网页布局的设计3.会使用 Photoshop 进行网页布局知识目标：1． 知道网页设计的版型2． 知道网页设计的配色方案3． 知道使用 Photoshop 进行网页布局的方法【任务】使用 Photoshop 进行班级网站主页的布局设计。 在进行了网站材料的搜集、整理，网站页面结构及目录结构的规划之后，需进行网站主页效果图的设计与制作。【操作提示】1.采用抓图法（拷屏）进行优秀网页界面的搜索并利用文件夹进行分类整理。经典网站推荐：http://www.1feel.com/ http://www.68design.nethttp://www.citk.net/http://www.boyimei.cn/如将优秀 logo、banner 广告条、导航条、小图标、动画等进行分类整理，从而方便借鉴。2.从平面构成和色彩两方面对要借鉴的页面进行分析。3.根据借鉴的页面进行主页版面布局。 通常版面布局按照如下步骤进行。（1）草案 这属于创作阶段，不讲究细腻工整，不必考虑细节功能，只以精陋的线条画出创意的轮廓即可。尽可能多画几张，最后选定满意的作为继续创作的样板。（2）粗略布局在草案的基础上，将确定需要放置的功能模块安排到页面上。根据班级网站的主要栏目确定网站主页的布局草图，可以采用常用的版面布局形式，也可以有自己独特的创意，如图 3- 1 所示。图 3- 1 班级网站布局草图4.采用借鉴与创新相结合的方法进行网站主页效果图设计。（1）启动 PhotoshopCS，新建文档。启动 PhotoshopCS，执行“文件”→“新建”命令，在弹出的“新建”对话框的名称框中输入：班级网站主页效果图，宽度：1003 像素，高度：600 像素，分辨率：72 像素/英寸，颜色模式：RGB 颜色，背景内容：白色，如图 3- 2 所示。图 3- 2 “新建”对话框（2）设计网页 Logo、Banner 和整体效果图。图 3- 3 仅作为参考。但主页中必须包含“公告栏”、“班级新闻”、“管理员登录”“留言板”、“通讯录”、“网络导航”部分，另外，需出现两处图像部分，用来制作图像的轮番切换和无缝滚动效果，版权信息部分填加“加入收藏”和“联系我们”部分，各部分的排版形式不拘泥于一种，可参考各优秀站点，借鉴并自行发挥创新。图 3- 3 班级网站主页效果图（3）文件保存及效果的预览①效果图制作完毕，执行“文件”→“存储为 web 所用格式”命令，单击【存储】按钮，弹出 “存储为 web 所用格式”对话框，如 Error: Reference sourcen...