项目 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...