项目3 主页的设计跟制作(一 布局)资料.docVIP

项目3主页的设计与制作 PAGE 19 项目3 主页的设计与制作（一 页面布局） 能力目标： 会搜集整理网站素材 会进行网页布局的设计 会使用Photoshop进行网页布局 知识目标： 知道网页设计的版型 知道网页设计的配色方案 知道使用Photoshop进行网页布局的方法 【任务】使用Photoshop进行班级网站主页的布局设计。 在进行了网站材料的搜集、整理，网站页面结构及目录结构的规划之后，需进行网站主页效果图的设计与制作。 【操作提示】 采用抓图法（拷屏）进行优秀网页界面的搜索并利用文件夹进行分类整理。 经典网站推荐： / / / 如将优秀logo、banner广告条、导航条、小图标、动画等进行分类整理，从而方便借鉴。 从平面构成和色彩两方面对要借鉴的页面进行分析。 根据借鉴的页面进行主页版面布局。 通常版面布局按照如下步骤进行。 草案 这属于创作阶段，不讲究细腻工整，不必考虑细节功能，只以精陋的线条画出创意的轮廓即可。尽可能多画几张，最后选定满意的作为继续创作的样板。 粗略布局 在草案的基础上，将确定需要放置的功能模块安排到页面上。 根据班级网站的主要栏目确定网站主页的布局草图，可以采用常用的版面布局形式，也可以有自己独特的创意，如 REF 班级网站布局草图 \h 图3- 1所示。 图3- SEQ 图3- \* ARABIC 1 班级网站布局草图 采用借鉴与创新相结合的方法进行网站主页效果图设计。 启动PhotoshopCS，新建文档。 启动PhotoshopCS，执行“文件”→“新建”命令，在弹出的“新建”对话框的名称框中输入：班级网站主页效果图，宽度：1003像素，高度：600像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色，如 REF 新建对话框 \h 图3- 2所示。 图3- SEQ 图3- \* ARABIC 2 “新建”对话框 设计网页Logo、Banner和整体效果图。 REF 班级网站主页效果图 \h 图3- 3仅作为参考。但主页中必须包含“公告栏”、“班级新闻”、“管理员登录”、“留言板”、“通讯录”、“网络导航”部分，另外，需出现两处图像部分，用来制作图像的轮番切换和无缝滚动效果，版权信息部分填加“加入收藏”和“联系我们”部分，各部分的排版形式不拘泥于一种，可参考各优秀站点，借鉴并自行发挥创新。 图3- SEQ 图3- \* ARABIC 3 班级网站主页效果图 文件保存及效果的预览 效果图制作完毕，执行“文件”→“存储为web所用格式”命令，单击【存储】按钮，弹出 “存储为web所用格式”对话框，如 REF 将优化结果存储为对话框 \h 图3- 3所示。 图3- SEQ 图3- \* ARABIC 4 “将优化结果存储为”对话框 ②在弹出的“将优化结果存储为”对话框中进行各项的设置，存储位置为站点文件夹（C:\ClassWeb），文件名取为“index.html”，“保存类型”下拉列表框选“HTML和图像（*.html）”，选好后，单击【保存】按钮即可保存为网页文件。 ③启动Dreamweaver8，在Dreamweaver8中打开刚才存储的index.html，使用F12键进行效果预览。若不满意到Photoshop中再次进行修改，直到满意为止。 【相关知识点】 网页布局的原则 网页页面布局有以下基本原则，熟悉这些原则将对页面的设计有所帮助。 主次分明，中心突出 图文并茂，相得益彰 简洁一致性 一般每页使用的字体不超过3种，一个页面中使用的颜色少于256种。 要保持一致性，可以从页面的排版下手，各个页而使用相同的页边距，文本、图形之间保持相同的间距。主要图形、标题或符号旁边留下相同的空白。 控制文本和背景的色彩 考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜过多，包括图像在内应当控制在256色以内。主题颜色通常只需要2~3种，并采用一种标准色。 网页布局方法 （1）纸上布局法 （2）软件布局法 若不喜欢用纸来画出布局草图，还可以利用Photoshop、Fireworks等软件来完成这些工作。不像用纸来设计布局，利用软件可以方便地使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。 常见的版面布局形式 常见的网页布局形式有“国”字型、“框架”型、“厂”字型、“封面”型和Flash型布局。 （1）“国”字型布局 “国”字型布局如图3-5所示，也可以称为“同”字型。是一些大型网站主面常用的类型，在网页最上面是网站的标题以及banner广告条以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下部是网站的一些基本信息、联系方式和版权声明等。这种结构是国内一些大中型网站常见的布局方式