《项目管理项目报告项目3主页的设计与制作一布局》由会员分享，可在线阅读，更多相关《项目管理项目报告项目3主页的设计与制作一布局（19页珍藏版）》请在金锄头文库上搜索。
1、项目3 主页的设计与制作（一 页面布局）能力目标： 1. 会搜集整理网站素材2. 会进行网页布局的设计3. 会使用Photoshop进行网页布局知识目标：1 知道网页设计的版型2 知道网页设计的配色方案3 知道使用Photoshop进行网页布局的方法【任务】使用Photoshop进行班级网站主页的布局设计。 在进行了网站材料的搜集、整理，网站页面结构及目录结构的规划之后，需进行网站主页效果图的设计与制作。【操作提示】1. 采用抓图法（拷屏）进行优秀网页界面的搜索并利用文件夹进行分类整理。经典网站推荐：http:/ http:/http:/ 从平面构成和色彩两方面对要借鉴的页面进行分析。3. 根
2、据借鉴的页面进行主页版面布局。 通常版面布局按照如下步骤进行。（1） 草案 这属于创作阶段，不讲究细腻工整，不必考虑细节功能，只以精陋的线条画出创意的轮廓即可。尽可能多画几张，最后选定满意的作为继续创作的样板。（2） 粗略布局在草案的基础上，将确定需要放置的功能模块安排到页面上。根据班级网站的主要栏目确定网站主页的布局草图，可以采用常用的版面布局形式，也可以有自己独特的创意，如图3- 1所示。图3- 1 班级网站布局草图4. 采用借鉴与创新相结合的方法进行网站主页效果图设计。（1） 启动PhotoshopCS，新建文档。启动PhotoshopCS，执行“文件”“新建”命令，在弹出的“新建”对话
3、框的名称框中输入：班级网站主页效果图，宽度：1003像素，高度：600像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色，如图3- 2所示。图3- 2 “新建”对话框（2） 设计网页Logo、Banner和整体效果图。图3- 3仅作为参考。但主页中必须包含“公告栏”、“班级新闻”、“管理员登录”、“留言板”、“通讯录”、“网络导航”部分，另外，需出现两处图像部分，用来制作图像的轮番切换和无缝滚动效果，版权信息部分填加“加入收藏”和“联系我们”部分，各部分的排版形式不拘泥于一种，可参考各优秀站点，借鉴并自行发挥创新。图3- 3 班级网站主页效果图（3） 文件保存及效果的预览 效果
4、图制作完毕，执行“文件”“存储为web所用格式”命令，单击【存储】按钮，弹出 “存储为web所用格式”对话框，如Error! Reference source not found.所示。图3- 4 “将优化结果存储为”对话框在弹出的“将优化结果存储为”对话框中进行各项的设置，存储位置为站点文件夹（C:ClassWeb），文件名取为“index.html”，“保存类型”下拉列表框选“HTML和图像（*.html）”，选好后，单击【保存】按钮即可保存为网页文件。启动Dreamweaver8，在Dreamweaver8中打开刚才存储的index.html，使用F12键进行效果预览。若不满意到Phot
5、oshop中再次进行修改，直到满意为止。【相关知识点】1. 网页布局的原则网页页面布局有以下基本原则，熟悉这些原则将对页面的设计有所帮助。（1） 主次分明，中心突出（2） 图文并茂，相得益彰（3） 简洁一致性一般每页使用的字体不超过3种，一个页面中使用的颜色少于256种。要保持一致性，可以从页面的排版下手，各个页而使用相同的页边距，文本、图形之间保持相同的间距。主要图形、标题或符号旁边留下相同的空白。（4） 控制文本和背景的色彩考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜过多，包括图像在内应当控制在256色以内。主题颜色通常只需要23种，并采用一种标准色。2. 网页布局方法（
6、1）纸上布局法（2）软件布局法若不喜欢用纸来画出布局草图，还可以利用Photoshop、Fireworks等软件来完成这些工作。不像用纸来设计布局，利用软件可以方便地使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。3. 常见的版面布局形式常见的网页布局形式有“国”字型、“框架”型、“厂”字型、“封面”型和Flash型布局。（1）“国”字型布局“国”字型布局如图3-5所示，也可以称为“同”字型。是一些大型网站主面常用的类型，在网页最上面是网站的标题以及banner广告条以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下部是网站的一些基本信息、联
7、系方式和版权声明等。这种结构是国内一些大中型网站常见的布局方式。这种布局的优点是充分利用版面，信息量大；缺点是页面拥挤，不够灵活。图3-5 “国”字型布局（2）“框架”型布局“框架”型布局一般分成上下或左右布局，一栏是导航栏目，一栏是正文信息。如图3-6所示为左右布局。左侧一栏放置导航栏，右侧显示正文信息内容。我们见到的大部分的论坛都是这种结构的。这种类型结构非常清晰，一目了然。但是这种结构在使用框架时有个问题，即不容易被搜索引擎找到。图3- 6 “框架”型布局（3）“拐角”型布局“拐角”型布局如图3-7所示。上方为标志及导航栏，下方左侧为链接，右侧显示正文信息。这是网页设计中用得较广泛的一种
8、布局方式，一般用于网站的内页。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。 图3- 7 “拐角”型布局（4）“封面”型布局“封面”型布局都是应用于网站的主页上，一般为精美的图片设计加上简单的文字链接到网页中的主要栏目，或通过ENTER（进入）键链接到下一个页面。一般企业展示型网站和个人网站大多使用这种布局。如图3-8所示为“封面”型主页。图3- 8 “封面”型布局（5）Flash型布局这种布局和封面型的网页布局结构类似，不同的是这种页面采用了Flash技术，页面非常动感，可以大大增强页面的视觉效果。如Error! No bookmark name given.所示为采
9、用Flash型布局的网站。打开可口可乐公司页面就能看到该公司个性化的可乐瓶，网页中还能看到可口可乐公司要带给大家的红色的激情，动感十足。图3-9 Flash型布局4. 网页的色彩设计 在做网页色彩设计时，一般需注意以下两点：（1） 色彩的搭配原理。即色彩具有鲜明性、独特性、适合性、联想性等特性。鲜明性-就是说色彩要鲜明，能够准确传递信息，吸引人们的视线。独特性-就是指色彩要能体现企业的个性，做到与众不同。适合性-就是指色彩要容易让人引发想象的空间，以便让人们产生记忆。（2） 色彩所代表的情感特点。也就是人们所说的色彩感受。 红色-代表激扬向上的色彩。具有刺激效果，易产生冲动、活力、温暖的感觉。
10、 绿色-介于冷暖两种色彩的中间，易产生和谐、宁静、健康、安全的感觉。 橙色-也是一种个性温暖的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。 黄色-充满了快乐、希望和轻快的个性，它的明度最高。蓝色-凉爽、清新的色彩。它和白色混合，能体现柔顺、淡雅、浪漫的后气氛。白色-具有洁白、明快、纯真、清洁的感受。黑色-具有深沉、神秘、寂静、悲哀、压抑的感受。灰色-具有中庸、温和、谦让和高雅的感觉。5. 用Photoshop设计网页布局应注意的几个问题 网页文档尺寸与分辨率。网页文档大小一般为1003600像素（针对屏幕分辨率为1024768像素）和708400像素（针对屏幕分辨率为800600像素），分辨
11、率为72像素，这是屏幕分辨率，太高的分辨率并不能增强效果，反而会降低下载速度。 颜色：网站背景颜色与文件颜色要统一协调，一般不要超过两种，颜色搭配不合理，或者太多，会给人一种不舒服的感觉。 字体，标题。导航字体一般用黑体，正文一般用宋体，其它字体浏览器不兼容，可能造成调试时出错，给工作带来麻烦。 布局格式：虽然效果图是用Photoshop设计的，但一定要兼顾到Dreamweaver对页面布局的要求。 图文搭配：图片大小要合乎美学原则，不能太大，一般用缩略图较好，如果要显示更多的图片细节，不妨给缩略图链接一个大的图片。 科学使用参考线：这里要注意的是网站的Logo和Banner或者导航条等都是事
12、先设计好的，有固定大小，在做这些区域时尺寸一定要按照这些元素尺寸设计，不能有丝毫差错，否则进入DreamWeaver整合时，则可能出现空边或撑开表格的现象。6. 网页LogoLogo的国际标准规范为了便于Internet上信息的传播，关于网站的Logo，目前有三种规格： 8831像素 这是互联网上最普遍的Logo规格，适合在友情链接处显示。 12060像素 这种规格用于一般大小的Logo，适合在网站首页、顶部导航处显示。 12090像素 这种规格用于大型Logo，适合在网站首页、顶部导航处显示。7. 网页Banner（1） 什么是BannerBanner就是网幅广告、旗帜广告、横幅广告。作为网
13、页标识通常被用作横跨整个网页的广告性图片。（2） Banner标准 全尺寸Banner：46860像素 半尺寸BannerR：23460像素 小Banner：8831像素【实例】 Photoshop制作班级网页主页。效果如图所示：【任务分析】根据任务要求，要求使用Photoshop对班级网页的主页进行设计与制作，主要用到的技法和核心知识有：描边路径、变形文字以及“投影”等样式的运用。【操作步骤】1. 启动Photoshop CS，执行【文件】【新建】命令，在弹出的“新建”对话框中设置文件的名称和预设值，如图3-10所示：图 3-10 新建对话框2. 立体导航条的制作。在图层面板上新建图层1，单
14、击（矩形选框）工具，在新建的“班级主页”网页文件上绘制出一个矩形选区，填充颜色为白色，如Error! Reference source not found.所示：图3-11新建“色块”图层3. 单击样式面板上的（雕刻天空（文字）样式，对图层1添加该样式，效果如Error! Reference source not found.所示，在添加该样式的基础上，对图层1添加“投影”样式，参数设置如图3-13所示，得到如Error! Reference source not found.所示的效果图。Error! Reference source not found.添加样式后的效果图Error! Reference source not found.投影参数设置Error! Reference source not found.效果图 4. 将图层1进行复制，得到一个副本图层，运用移动工具将副本图层内容移到网页文件的下方，在图层面板上删除“投影”样式，得到如Error! Reference source not found.所示的效果。Error! Reference source not found. 删除“投影”样式后的效果图5. 新建图层2，单击矩形选框工具，在网页文件的左侧拖出一个矩形选区，填充颜色为白色，然后单击样式面板上的（蓝色按下状态）
