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

第1页共19页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第1页共19页项目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所示。第2页共19页第1页共19页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第2页共19页图3-1班级网站布局草图4.采用借鉴与创新相结合的方法进行网站主页效果图设计。（1）启动PhotoshopCS，新建文档。启动PhotoshopCS，执行“文件”→“新建”命令，在弹出的“新建”对话框的名称框中输入：班级网站主页效果图，宽度：1003像素，高度：600像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色，如图3-2所示。图3-2“新建”对话框（2）设计网页Logo、Banner和整体效果图。图3-3仅作为参考。但主页中必须包含“公告栏”、“班级新闻”、“管理员登录”“留言板”、“通讯录”、“网络导航”部分，另外，需出现两处图像部分，用来制作图像的轮番切换和无缝滚动效果，版权信息部分填加“加入收藏”和“联系我们”部分，各部分的排版形式不拘泥于一种，可参考各优秀站点，借鉴并自行发挥创新。第3页共19页第2页共19页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第3页共19页图3-3班级网站主页效果图（3）文件保存及效果的预览①效果图制作完毕，执行“文件”→“存储为web所用格式”命令，单击【存储】按钮，弹出“存储为web所用格式”对话框，如Error:Referencesourcenotfound所示。第4页共19页第3页共19页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第4页共19页图3-4“将优化结果存储为”对话框②在弹出的“将优化结果存储为”对话框中进行各项的设置，存储位置为站点文件夹（C:\ClassWeb），文件名取为“index.html”，“保存类型”下拉列表框选“HTML和图像（*.html）”，选好后，单击【保存】按钮即可保存为网页文件。③启动Dreamweaver8，在Dreamweaver8中打开刚才存储的index.html，使用F12键进行效果预览。若不满意到Photoshop中再次进行修改，直到满意为止。【相关知识点】1.网页布局的原则网页页面布局有以下基本原则，熟悉这些原则将对页面的设计有所帮助。（1）主次分明，中心突出（2）图文并茂，相得益彰（3）简洁一致性一般每页使用的字体不超过3种，一个页面中使用的颜色少于256种。要保持一致性，可以从页面的排版下手，各个页而使用相同的页边距，文本、图形之间保持相同的间距。主要图形、标题或符号旁边留下相同的空白。（4）控制文本和背景的色彩考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜过多，包括图像在内应当控制在256色以内。主题颜色通常只需要2~3种，并采用一种标准色。2.网页布局方法（1）纸上布局法（2）软件布局法若不喜欢用纸来画出布局草图，还可以利用Photoshop、Fireworks等软件来完成这些工作。不像用纸来设计布局，利用软件可以方便地使用颜色，使用...