项目管理项目3 主页的设计与制作一 布局 精品.docx

1、项目管理项目3 主页的设计与制作一 布局 精品项目3 主页的设计与制作（一 页面布局）能力目标： 1.会搜集整理网站素材2.会进行网页布局的设计3.会使用Photoshop进行网页布局知识目标：1知道网页设计的版型2知道网页设计的配色方案3知道使用Photoshop进行网页布局的方法【任务】使用Photoshop进行班级网站主页的布局设计。 在进行了网站材料的搜集、整理，网站页面结构及目录结构的规划之后，需进行网站主页效果图的设计与制作。【操作提示】1.采用抓图法（拷屏）进行优秀网页界面的搜索并利用文件夹进行分类整理。经典网站推荐：http:/.1feel./ http:/.boyimei./

2、如将优秀logo、banner广告条、导航条、小图标、动画等进行分类整理，从而方便借鉴。2.从平面构成和色彩两方面对要借鉴的页面进行分析。3.根据借鉴的页面进行主页版面布局。 通常版面布局按照如下步骤进行。（1）草案 这属于创作阶段，不讲究细腻工整，不必考虑细节功能，只以精陋的线条画出创意的轮廓即可。尽可能多画几张，最后选定满意的作为继续创作的样板。（2）粗略布局在草案的基础上，将确定需要放置的功能模块安排到页面上。根据班级网站的主要栏目确定网站主页的布局草图，可以采用常用的版面布局形式，也可以有自己独特的创意，如图3- 1所示。图3- 1 班级网站布局草图4.采用借鉴与创新相结合的方法进行网

3、站主页效果图设计。（1）启动PhotoshopCS，新建文档。启动PhotoshopCS，执行“文件”“新建”命令，在弹出的“新建”对话框的名称框中输入：班级网站主页效果图，宽度：1003像素，高度：600像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色，如图3- 2所示。图3- 2 “新建”对话框（2）设计网页Logo、Banner和整体效果图。图3- 3仅作为参考。但主页中必须包含“公告栏”、“班级新闻”、“管理员登录”、“留言板”、“通讯录”、“网络导航”部分，另外，需出现两处图像部分，用来制作图像的轮番切换和无缝滚动效果，版权信息部分填加“加入收藏”和“联系我们”部分

4、，各部分的排版形式不拘泥于一种，可参考各优秀站点，借鉴并自行发挥创新。图3- 3 班级网站主页效果图（3）文件保存及效果的预览1效果图制作完毕，执行“文件”“存储为web所用格式”命令，单击【存储】按钮，弹出 “存储为web所用格式”对话框，如图3- 3所示。图3- 4 “将优化结果存储为”对话框在弹出的“将优化结果存储为”对话框中进行各项的设置，存储位置为站点文件夹（C:ClassWeb），文件名取为“index.html”，“保存类型”下拉列表框选“HTML和图像（*.html）”，选好后，单击【保存】按钮即可保存为网页文件。启动Dreamweaver8，在Dreamweaver8中打开刚

5、才存储的index.html，使用F12键进行效果预览。若不满意到Photoshop中再次进行修改，直到满意为止。【相关知识点】1.网页布局的原则网页页面布局有以下基本原则，熟悉这些原则将对页面的设计有所帮助。（1）主次分明，中心突出（2）图文并茂，相得益彰（3）简洁一致性一般每页使用的字体不超过3种，一个页面中使用的颜色少于256种。要保持一致性，可以从页面的排版下手，各个页而使用相同的页边距，文本、图形之间保持相同的间距。主要图形、标题或符号旁边留下相同的空白。（4）控制文本和背景的色彩考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜过多，包括图像在内应当控制在256色以内。

6、主题颜色通常只需要23种，并采用一种标准色。2.网页布局方法（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技术，页面非常动感，可以大大增强页面的视觉效果。如图3-9

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、工具，在新建的“班级主页”网页文件上绘制出一个矩形选区，填充颜色为白色，如图3-11 所示：图3-11新建“色块”图层3.单击样式面板上的（雕刻天空（文字）样式，对图层1添加该样式，效果如图3-12 所示，在添加该样式的基础上，对图层1添加“投影”样式，参数设置如图3-13所示，得到如图3-14 所示的效果图。图3-12 添加样式后的效果图图3-13投影参数设置图3-14 效果图 4.将图层1进行复制，得到一个副本图层，运用移动工具将副本图层内容移到网页文件的下方，在图层面板上删除“投影”样式，得到如图 3-15所示的效果。图3-15 删除“投影”样式后的效果图5.新建图层2，单击矩形选框工具

15、，在网页文件的左侧拖出一个矩形选区，填充颜色为白色，然后单击样式面板上的（蓝色按下状态）（说明：若该样式没有出现，通过单击样式面板右侧的“”按钮，在弹出的菜单中选取“翻转按钮”命令，然后在弹出的对话框中选“追加”按钮），效果如图3-16 所示。图3-16 加入样式后的效果图6.按住Shift+Alt键，并配合移动工具，向右拖动图层2，复制并移动该矩形到网页文件的相应位置，并改变其大小，效果如图3-17所示。图 3-17图层2复制移动后效果图 7.导航栏上分隔线的制作：新建图层3，利用（直线工具）在导航栏上绘制直线路径，将路径转换成选区，选择【编辑】【描边】命令，为其描1像素的白边，并降低白边所

16、在图层的不透明度为60%；再新建一个图层4，为直线选区再描1像素稍深一点的蓝色边，并为蓝色边所在的图层设置“浮面与浮雕”图层样式，参数取默认值；选中描白色边所在的图层为当前图层，使用移动工具将白边与深蓝色边错开一点位置，达到立体效果，效果如图3-18所示。（将白边稍向右下移动一点点的距离即可）图3-18 导航栏上分隔线制作 8.将图层3和图层4合并为图层3，复制该图层多次，使其能均分导航栏即可。效果如图3-19 所示。图3-19 导航栏分隔线制作效果图 9.利用工具栏上的（圆角矩形工具），在页面的左侧绘制一个圆角矩形，将该矩形路径变换成选成，新建图层4，填充白色，应用样式面板中的“球”样式（也

17、可选用其它样式进行设置），效果如图3-20所示。图3-20 加入样式后的效果图 10.应用直排文字工具在制作的样式条上输入文字“我的班集体”，文字大小和颜色根据自己制作的页面自行调整。效果如图3-21所示。图3-21加入文字后的效果图 11.打开自己准备好的班级集体合影文件，调整好图像大小，将其放置在我的班集体框中的上方，并使用横排文字工具在图像的下方输入有关班集体介绍的文字，效果如图3-22 所示。图 3-22 加入图像文字后的效果图 12.打开“news.jpg”、“search.jpg”、“login.jpg”和“navigate.jpg”文件，调整其大小，将其放于合适位置。效果如图3-

18、23所示。图 3-23 加入图像后的效果图 13.打开“1.jpg”和“2.jpg”文件（视自己的页面大小，也可以加入多个文件），将文件进行大小处理后移动到网页页面中，并将其移到网页的适合位置，在校园风光图片的左侧填加一个矩形框，并为矩形框加阴影效果，并使用直排文字工具输入“美丽的校园”，文字大小和颜色视页面效果而定；在导航栏中依次输入“首页”、“班级新闻”、“班级相册”等内容；在页面下方输入文字“Copyright20XX.版式权所有健雄职业技术学院计应0911 all right reserved”（班级处依据自己的班级名称来定）版权信息，效果如图3-24所示。图3-24 加入图像后的效果

19、图14.新建一个图层，单击钢笔工具，在网页文件中绘制路径，然后右击路径面板上的工作路径，在下拉选项中选择“描边路径”，描边画笔的大小为3像素，描边颜色为（R：79；G：158；B：213）；单击横排文字工具，在网页文件中输入标题字，设置文字的样式为华文彩云，大小、颜色和字间距视自己的页面自行进行调整；双击标题字图层，在弹出的“图层样式”对话框中勾选“投影”复选框，参数设置如图3-25 所示，得到如图3-26 所示的效果图。图 3-25 投影参数设置图3-26设置路径、填加文字后的效果图15.打开“4.jpg”和“5.jpg”文件，将图片的大小和效果进行处理后放置在导航栏的上方，效果如图3-27所示。图3-27 最终效果图