PHP+CMS+Dreamweaver网站设计实课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,3,章,美工设计网站,页面,（,Photoshop,）,PHP+CMS+Dreamweaver,网站设计实例教程,网站页面的整体设计，包括网站页面平面效果图设计、网页图像元素制作、网站按钮、,LOGO,、导航条等的制作是网站开发流程网站中的一个重要环节。而现今网站开发过程中常用的平面图形处理软件为,Adobe Photoshop,，它是当今世界上最为流行的图像处理软件，其强大的功能和友好的界面深受广大用户的喜爱。,本章主要讲解使用,Adobe Photoshop CS5,工具软件完成“平顶山韩创教育咨询公司”网站页面平面效果图、网页图像元素制作、网站按钮、,LOGO,、导航条等的制作步骤。,第3章美工设计网站页面（Photoshop）PHP+CMS,3.1,任务一 制作,首页,3.1.1,任务描述,3.1.2,相关知识,3.1.3,任务实施,3.1.4,任务评价,3.1.5,任务小结,3.1 任务一 制作首页3.1.1 任务描述,网站首页设计是整个网站设计的重中之重，因为她直观的向浏览者传递公司的形象等信息，所以对它的要求要很高。网站首页在,Dreamweaver,制作以前，需要由网页设计师在,Photoshop,或,Fireworks,等平面处理软件先制作出网站首页的平面效果图。网站开发人员在通过切片技术把平面图转换成网页。,本任务主要使用,Photoshop CS5,完成“平顶山韩创教育咨询有限公司”网站网页平面效果图制作。“平顶山韩创教育咨询有限公司”首页设计将采用教育行业特征的图文版形式，突出网站商业化、专业化、榜样化、规模化等感觉。配之以形象、精致的,LOGO,徽标以及特有的图案塑造网站整体专业、规模之形象。在整体形象上要表现出主题突出，内容精干，形式严肃简洁，整体大方，让人有耳目一新之感。网站整体风格统一，以文字为主体，同时配以精巧静态或动态图片以吸引访问者的注意力，表达创新精神、以及上升动力。在网站的整体设计上，强调人性化和参与意识，为访问者尽可能的提供多的在线服务和沟通渠道，充分利用互联网的交互功能，呈现整体友好的界面结构。,3.1.1,任务,描述,网站首页设计是整个网站设计的重中之重，因为她直观的向浏览者传,完整的网站设计大体可以分两大部分，静态（界面）部分和动态（互动功能）部分。静态页面设计的流程，如图,3-1,所示。,一、,网站页面效果图设计,3.1.2,相关,知识,完整的网站设计大体可以分两大部分，静态（界面）部分和动态（互,（,1,）“国”字型,“国”字型也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。如图,3-2,所示。,二、,网页版面布局,3.1.2,相关,知识,（1）“国”字型二、网页版面布局3.1.2 相关知识,（,1,）“国”字型,二、,网页版面布局,3.1.2,相关,知识,（1）“国”字型二、网页版面布局3.1.2 相关知识,（,2,）标题正文型,标题正文型最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。如图,3-3,所示。,二、,网页版面布局,3.1.2,相关,知识,（2）标题正文型二、网页版面布局3.1.2 相关知识,（,3,）“,T”,结构布局,所谓“,T”,结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“,T”,结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。如图,3-4,所示。,二、,网页版面布局,3.1.2,相关,知识,（3）“T”结构布局二、网页版面布局3.1.2 相关知识,（,3,）“,T”,结构布局,二、,网页版面布局,3.1.2,相关,知识,（3）“T”结构布局二、网页版面布局3.1.2 相关知识,（,4,）“口”型布局,“口”型布局指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。如图,3-5,所示。,二、,网页版面布局,3.1.2,相关,知识,（4）“口”型布局二、网页版面布局3.1.2 相关知识,（,4,）“口”型布局,二、,网页版面布局,3.1.2,相关,知识,（4）“口”型布局二、网页版面布局3.1.2 相关知识,（,5,）“三”型布局,这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为,4,个部分，色块中大多放广告条。如图,3-6,所示。,二、,网页版面布局,3.1.2,相关,知识,（5）“三”型布局二、网页版面布局3.1.2 相关知识,（,6,）对称对比布局,顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。如图,3-7,所示。,二、,网页版面布局,3.1.2,相关,知识,（6）对称对比布局二、网页版面布局3.1.2 相关知识,（,7,）封面型,封面型有时候也叫“,POP”,型这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。如图,3-8,所示。,二、,网页版面布局,3.1.2,相关,知识,（7）封面型二、网页版面布局3.1.2 相关知识,（,7,）封面型,二、,网页版面布局,3.1.2,相关,知识,（7）封面型二、网页版面布局3.1.2 相关知识,（,1,）网页的宽度。以目前我国的网络用户采用的,1024*768,分辨率为主，制作网页时一般按照,1024*768,分辨率来设计，页面宽度不要超过,1,屏。,（,2,）网页长度。从理论上上说网页长度可以无限长，但是页面长度原则上不超过,3,屏，最佳长度为,1.82.5,屏，因为屏数过多的网页会影响访问者的心情和耐心。,（,3,）网页文件大小。一般地，网站的首页大小（包括所有图像、文本、多媒体对象）不宜超过,30KB,，网站的二级页面的文件（包括所有图像、文本、多媒体对象）不宜超过,45KB,，如果网页太大，网页下载的速度会变慢，影响浏览速度。,三、,网站版面的尺寸规范,3.1.2,相关,知识,（1）网页的宽度。以目前我国的网络用户采用的1024*768,四、,Adobe Photoshop CS5,工作界面,3.1.2,相关,知识,四、Adobe Photoshop CS5工作界面3.1.2,（,1,）标题栏,标题栏位于主窗口顶端，最左边是,Adobe Photoshop CS5,标记，右边分别是最小化、最大化,/,还原和关闭按钮。,（,2,）工具选项栏,选中某个工具后，属性栏就会改变成相应工具的属性设置选项，可更改相应的选项。如图,3-10,所示。,（,3,）菜单栏,菜单栏为整个环境下所有窗口提供菜单控制，包括,:,文件、编辑、图像、图层、选择、滤镜、分析、,3D,、视图、窗口和帮助等,11,项。如图,3-11,所示。通过菜单栏可以完成,Adobe Photoshop CS5,所执行的所有命令。,四、,Adobe Photoshop CS5,工作界面,3.1.2,相关,知识,（1）标题栏四、Adobe Photoshop CS5工作界,（,4,）图像编辑窗口,图像编辑窗口，如图,3-9,所示。它是,Adobe Photoshop CS5,的主要工作区，用于显示图像文件。图像窗口带有自己的标题栏，提供了打开文件的基本信息，如文件名、缩放比例、颜色模式等。,提示：如同时打开两副图像，可通过单击图像窗口进行切换或图像窗口切换可使用,【Ctrl+Tab】,快捷键。,（,5,）工具栏,工具栏中的工具可用来选择、绘画、编辑以及查看图像。如图,3-12,所示。通过拖动工具箱的标题栏，可移动工具箱。单击可选中工具，属性栏会显示该工具的属性。有些工具的右下角有一个“ ”符号，这表示在工具位置上存在一个工具组，其中包括若干个相关工具。,四、,Adobe Photoshop CS5,工作界面,3.1.2,相关,知识,（4）图像编辑窗口四、Adobe Photoshop CS5,（,6,）浮动面板,Adobe Photoshop CS5,的浮动面板可以通过执行,【,窗口,】,菜单来控制。如图,3-13,所示。共有,14,个面板，可通过,【,窗口,】|【,显示,】,来显示面板。,四、,Adobe Photoshop CS5,工作界面,3.1.2,相关,知识,（6）浮动面板四、Adobe Photoshop CS5工作,1,、打开,Adobe Photoshop CS5,，选择,【,文件,】|【,新建,】,菜单命令。打开,【,新建,】,对话框，如图,3-14,所示。将,【,名称,】,设置为：“,index”,，,【,宽度,】,设置为“,1000,像素”，,【,高度,】,设置为“,1306,像素”，“,【,分辨率,】,设置为“,72dpi”,，,【,背景内容,】,设置为“白色”。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,1、打开Adobe Photoshop CS5，选择【文件】,2,、打开,【,视图,】|【,标尺,】,菜单命令。在,Adobe Photoshop CS5,工作界面上调出标尺。如图,3-15,所示。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,2、打开【视图】|【标尺】菜单命令。在Adobe Photo,3,、在,【,图层面板,】,上单击 新建图层按钮，在该图层添加已经编辑好的网站,LOGO,和网站标题图形元素。选择,【,工具栏,】|【,移动工具,】,调整图形元素位置。如图,3-16,所示。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,3、在【图层面板】上单击 新建图层按钮，在该图层添加已经编辑,4,、在,【,图层面板,】,上单击 新建图层按钮，在该图层添加已经编辑好的网站“设为首页,|,加入收藏,|,在线留言”、 “咨询热线（,24,小时服务）：,0375-58122857”,和网页按钮等图形元素。并选择,【,工具栏,】|【,移动工具,】,调整图形元素位置。最终效果如图,3-17,所示。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,4、在【图层面板】上单击 新建图层按钮，在该图层添加已经编辑,5,、在,【,图层面板,】,上单击 新建图层按钮，在该图层添加已经编辑好的网站导航栏，如图,3-18,所示。选择,【,工具栏,】|【,移动工具,】,调整导航栏位置。最终效果如图,3-19,所示。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,5、在【图层面板】上单击 新建图层按钮，在该图层添加已经编辑,5,、在,【,图层面板,】,上单击 新建图层按钮，在该图层添加已经编辑好的网站导航栏，如图,3-18,所示。选择,【,工具栏,】|【,移动工具,】,调整导航栏位置。最终效果如图,3-19,所示。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,5、在【图层面板】上单击 新建图层按钮，在该图层添加已经编辑,6,、在,【,图层面板,】,上单击 新建图层按钮，在该图层添加图形。选择,【,工具栏,】|【,移动工具,】,调整图形元素位置。在导航栏下方先放置一个静态图占位。为后期,Flash,动画广告做一个效果展示。如图,3-20,所示。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,6、在【图层面板】上单击 新建图层按钮，在该图层添加图形。选,7,、在,【,图层面板,】,上单击 新建图层按钮，在该图层添加已制作好的栏目版块背景图形。如图,3-21,所示。选择,【,工具栏,】|【,移动工具,】,调整图形元素位置。完成网站首页栏目版块的布局。如图,3-22,所示。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,7、在【图层面板】上单击 新建图层按钮，在该图层添加已制作好,8,、在网站首页中“师资介绍”栏目和“成功案例”栏目为图片轮显效果，如网站中要放置动态内容的部分均可用同等大小的静态图像占位。底部左侧图片为,Flash,动画，右侧为网站友情链接，下方空白区域填写网站版权以及联系地址信息。完成整个网页的规划布局，并在网站首页中所有栏目添加文字效果，完整网站首页最终效果。如图,3-23,所示。,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,8、在网站首页中“师资介绍”栏目和“成功案例”栏目为图片轮显,四、,Adobe Photoshop CS5,工作界面,3.1.3,任务实施,四、Adobe Photoshop CS5工作界面3.1.3,3.1.4,任务评价,3.1.4 任务评价,3.1.5,任务小结,网站首页的设计风格常常代表着公司的整体定位以及给浏览者要传达的信息。在整体形象上要表现出主题突出，内容精干，形式严肃简洁，整体大方，让人有耳目一新之感。教育网站版面设计按照网站首页设计流程进行，网站版面布局方式按照常规网页布局方式进行布局，最终效果图使用,Photoshop CS5,完成。,3.1.5 任务小结 网站首页的设计风格常常代表着公司的整体,3.2,任务二 网页图形元素的制作,3.2.1,任务描述,3.2.2,相关知识,3.2.3,任务实施,3.2.4,任务评价,3.2.5,任务小结,3.2任务二 网页图形元素的制作3.2.1 任务描述,图形是最佳的信息载体，有时候很多的文字可能比不上一张图像更能说明问题。图像和多媒体是美化网页的重要对象，网页中有了图像和多媒体后，将不再是枯燥的文字。本任务使用,Photoshop,制作“平顶山韩创教育咨询有限公司”网站网页中图形元素。如网站广告图、栏目背景图和用来网页占位的静态图像。,3.2.1,任务,描述,图形是最佳的信息载体，有时候很多的文字可能比不上一张图像更能,它是在将最终图标添加到,WEB,页面之前使用的临时图形，它不是现实在浏览器中的图形图像。在发布站点之前，应该用适于,WEB,的图形文件替换所有添加的图像占位符。它的宽度和高度也就是将来插入到占位符中的图像大小，当然如果图像比占位符大或小，则占位符的大小以图像的大小为准，以像素为单位，这是必须要注意的。,一、,网页版面设计中的静态占位图,3.2.2,相关,知识,它是在将最终图标添加到WEB页面之前使用的临时图形，它不是现,网络广告的形式有很多种，包括图片广告、多媒体广告、超文本广告灯，可以针对不同的企业、不同的产品、不同的客户对象采用不同的广告形式。,横幅式广告，一般尺寸较大，位于页面中最显眼的位置。横幅广告又称为旗帜广告、页眉广告等。横幅广告的尺寸一般为,480*60,像素、,729*90,像素、,760*90,像素等。,按钮式广告，在网页中尺寸，在网页中尺寸偏小，表现手法较简单，一般企业,LOGO,的形式出现，可直接连接到企业网站或企业信息的详细介绍上。最常用的按钮广告尺寸有,4,种，分别是,125*12,像素,5,、,120*90,像素、,120*60,像素、,88*31,像素。,邮件列表广告，它是利用电子邮电功能，向网络用户发送广告的一种网络广告形式。邮件列表广告是一种新兴的因特网广告业务，现正在被越来越多的公司所重视。,二、,网络广告的形式,3.2.2,相关,知识,网络广告的形式有很多种，包括图片广告、多媒体广告、超文本广告,弹出窗口式广告，在网站或栏目出现之前插入一个新窗口显示广告。,互动游戏广告，在一段页面游戏开始、中间、结束的时候，随时出现广告。,对联式广告，一般位于网页两侧，也是网络广告中有些的宣传方式。它通常使用,.gif,格式的图像文件，还可以使用其他的多媒体。这种广告集动画、声音、影像与一体，富有表现力、交互性和娱乐性。,浮动广告，在页面左右两侧随滚动条而上下滚动，或在页面上自由滚动，一般尺寸为,100*100,像素或,150*150,像素,。,二、,网络广告的形式,3.2.2,相关,知识,弹出窗口式广告，在网站或栏目出现之前插入一个新窗口显示广告。,网络广告包括多种设计要素，如图像、电脑动画、文字和数字影（音）像等，这些要素可以单独使用，也可以配合使用。,图像：网页中最常用的图像格式是,GIF,和,JPE,，另外还有不常用的,PNG,图像格式。,电脑动画：是一种表现力极强的网络设计手段。电脑动画分为二维动画和三维动画。典型的二维动画制作软件，如,Flash,，他是一个专门的网页动画编辑软件。,文字：在网络广告设计中，标题字和内文的设计、编排都要用到文字。,数字影（音）像：被广泛地应用在网络广告中。但是由于宽度的限制，数字影（音）像像一般都经过高倍的压缩。,三、,网络广告设计要素,3.2.2,相关,知识,网络广告包括多种设计要素，如图像、电脑动画、,（,1,）打开,Adobe Photoshop CS5,，选择【文件】,|,【新建】菜单命令。打开【新建】对话框，如图,3-24,所示。将【名称】设置为：“,wenzi,”，【宽度】设置为“,500,像素”，【高度】设置为“,93,像素”，“【分辨率】设置为“,72dpi,”，【背景内容】设置为“白色”。,1,、网页公司名称文字图像制作,3.2.3,任务实施,（1）打开Adobe Photoshop CS5，,（,2,）单击【工具栏】中,【文字工具】，【图层面板】会自动新建一个文字图层，输入“平顶山韩创教育咨询有限公司”。如图,3-25,所示。,1,、网页公司名称文字图像制作,3.2.3,任务实施,（2）单击【工具栏】中 【文字工具】，【图层面板】会自动,（,3,）在【文字工具】的【工具选项栏】中设置文字属性。如图,3-26,所示。【字体】设置为“黑体加粗”，【颜色】设置为“,#004b61,”，【字号】设置为“,24,号”。,1,、网页公司名称文字图像制作,3.2.3,任务实施,（3）在【文字工具】的【工具选项栏】中设置文字,（,4,）在【图层面板】中选择文字图层，单击右键选择【混合选项】命令，打开【图层样式】对话框，对文字添加效果：描边和投影。其中【描边】和【投影】参数设置如图,3-27,和,3-28,所示。网站公司标题文字最终效果为图,3-29,所示。,1,、网页公司名称文字图像制作,3.2.3,任务实施,（4）在【图层面板】中选择文字图层，单击右键选,1,、网页公司名称文字图像制作,3.2.3,任务实施,1、网页公司名称文字图像制作3.2.3 任务实施,（,1,）首先，打开,Photoshop CS5,工具软件，选择【文件】,|,【新建】菜单命令。打开【新建】对话框，如图,3-30,所示。将【名称】设置为：“,banner,”，【宽度】设置为“,986,像素”，【高度】设置为“,266,像素”，“【分辨率】设置为“,72dpi,”，【背景内容】设置为“白色”。,2,、网页广告占位图制作,3.2.3,任务实施,（1）首先，打开Photoshop CS5工,（,2,）选择【工具栏】,|,【渐变工具】，在选项栏中单击“,”按钮，弹出“渐变编辑器”对话框，在该对话框中设置渐变颜色，如图,3-31,所示。效果如图,3-32,所示。,2,、网页广告占位图制作,3.2.3,任务实施,（2）选择【工具栏】|【渐变工具】，在选项,2,、网页广告占位图制作,3.2.3,任务实施,2、网页广告占位图制作3.2.3 任务实施,（,3,）在【图层面板】上单击,新建图层按钮，新建图层并在在图层上添加以准备好的素材。效果如图,3-33,所示。,2,、网页广告占位图制作,3.2.3,任务实施,（3）在【图层面板】上单击 新建图层按钮，新建图层并在在图,（,4,）在【图层面板】上单击,新建图层按钮，在图层上添加以准备好的文字和人物素材和文字素材。最终效果如图,3-34,2,、网页广告占位图制作,3.2.3,任务实施,（4）在【图层面板】上单击 新建图层按钮，在图层上添加以准备,（,1,）首先，打开,Photoshop CS5,工具软件，选择【文件】,|,【新建】菜单命令。打开【新建】对话框，如图,3-35,所示。将【名称】设置为：“,banner,”，【宽度】设置为“,986,像素”，【高度】设置为“,266,像素”，“【分辨率】设置为“,72dpi,”，【背景内容】设置为“白色”。,3,、网页栏目背景图制作,3.2.3,任务实施,（1）首先，打开Photoshop CS5工具软件，选择【文,（,2,）在【图层面板】上单击,新建图层按钮，新建图层。选择【工具栏】,|,【矩形工具】画一个矩形，在【工具选项栏】填充颜“,#2e434b,”。图层样式描边为“,1px,”。选择【工具栏】,|,【钢笔工具】描出以下图形。如图,3-36,所示。按【,Ctrl+Enter,】键转换为选区，填充为白色，调整图层不透明度。具体操作如图,3-37,所示。最终效果如图,3-38,所示,。,3,、网页栏目背景图制作,3.2.3,任务实施,（2）在【图层面板】上单击 新建图层按钮，新建图层。选择【工,（,3,）浅色按钮的制作方法和深色按钮制作方法一致，只需把矩形图案颜色填充“,#ddedf4,”。最终效果如图,3-39,所示。,3,、网页栏目背景图制作,3.2.3,任务实施,（3）浅色按钮的制作方法和深色按钮制作方法一致，只需把矩形图,（,4,）在【图层面板】上单击,新建图层按钮，新建一个图层。使用【工具栏】,|,【直线工具】绘制画一条直线，颜色填充为“,#026681,”。再用【工具栏】,|,【矩形工具】画一个矩形，设置【图层样式】为描边，描边颜色为“,#ddedf4,”，完成效果图如,3-40,所示。,3,、网页栏目背景图制作,3.2.3,任务实施,（4）在【图层面板】上单击 新建图层按钮，新建一个图层。使用,3.2.4,任务评价,3.2.4 任务评价,通过本任务中了解常见网页图形元素，并能使用,Photoshop,工具软件完成网页图形元素的制作。并能完成后续网页中图形元素的制作。,3.2.5,任务小结,通过本任务中了解常见网页图形元素，并能使用Pho,3.3,任务三,网页按钮、,LOGO,、导航条的,制作,3.3.1,任务描述,3.3.2,相关知识,3.3.3,任务实施,3.3.4,任务评价,3.3.5,任务小结,3.3任务三 网页按钮、LOGO、导航条的制作3.3.1,网站,LOGO,、网页按钮等网页素材一般设计精巧，立体感强，将其应用到网页中，既吸引浏览者的注意，又增加了网页的美观效果。本任务主要完成“平顶山韩创教育咨询有限公司”网站网页按钮、网站,LOGO,、导航条的制作。并通过任务的完成能熟练掌握使用,Photoshop,网页按钮、网站,LOGO,、导航条的制作。,3.3.1,任务,描述,网站LOGO、网页按钮等网页素材一般设计精巧，立体感强，将其,LOGO,的设计要能够充分体现该公司的核心理念，并且设计要求动感、简约、大气、有活力、高品位，色彩搭配要合理、美观。,网站,LOGO,设计有以下标准：,要与企业的,CI,设计一致。,要有良好的造型，,LOGO,的题材和形式可以丰富多彩，如中外文字体、图案、抽象符号、几何图形等。,构图要美观、适当、简练、讲究艺术效果，构思须巧妙、新颖，力求避免雷同或隐私。,充分考虑企业标志理念的表现力、可行性。,色彩最好单纯、强烈、醒目，力求色彩的感性印象与企业的形象风格相符。,标志设计一定要注意其识别性，识别性是网站,LOGO,的基本功能。,一、,网站,LOGO,设计的标准,3.3.2,相关,知识,LOGO的设计要能够充分体现该公司的核心理念，并且设计要求动,在网页设计中，网页广告都有一定的规格要求，如表,3-3,所示。网页广告（,banner,）不超过,14KB,。,二、,标准网页广告尺寸规格,3.3.2,相关,知识,在网页设计中，网页广告都有一定的规格要求，如表3-3所示。网,（,1,）打开,Adobe Photoshop CS5,，选择【文件】,|,【新建】菜单命令。打开【新建】对话框。将【名称】设置为：“,search,”，【宽度】设置为“,66,像素”，【高度】设置为“,22,像素”，“【分辨率】设置为“,72dpi,”，【背景内容】设置为“白色”。,（,2,）首先选择【工具栏】,|,【圆角矩形工具】绘制一个圆角矩形，在【工具栏选择器】设置“圆角半径”为：,3px,，大小为：,66*22,像素，具体设置如图,3-41,和,3-42,所示。,1,、 “,Search,”按钮制作,3.3.3,任务实施,（1）打开Adobe Photoshop CS5，选择【文件,（,3,）在【图层面板】中选择文字图层，单击右键选择【混合选项】命令，打开【图层样式】对话框，对绘制好的圆角矩形设置图层样式【描边】，参数设置如图,3-43,所示。,1,、 “,Search,”按钮制作,3.3.3,任务实施,（3）在【图层面板】中选择文字图层，单击右键选择【混合选项】,（,4,）【工具栏】,|,【文字工具】输入文字“,Search,”。 如图,3-44,所示。,1,、 “,Search,”按钮制作,3.3.3,任务实施,（4）【工具栏】|【文字工具】输入文字“Search”。 如,（,1,）打开,Adobe Photoshop CS5,，选择【文件】,|,【新建】菜单命令。,（,2,）选择【工具栏】,|,【圆角矩形工具】绘制一个圆角矩形，在其【工具选择器】中设置圆角半径设置为“,3px,”。,2,、“,QQ,在线”按钮的制作,3.3.3,任务实施,（1）打开Adobe Photoshop CS5，选择【文件,（,3,）在【图层面板】中选择文字图层，单击右键选择【混合选项】命令，打开【图层样式】对话框，对绘制好的圆角矩形设置图层样式【描边】，参数设置如图,3-45,所示。,2,、“,QQ,在线”按钮的制作,3.3.3,任务实施,（3）在【图层面板】中选择文字图层，单击右键选择【混合选项】,（,4,）在【图层样式】对话框，选择【渐变叠加】选项，并设置参数如图,3-46,所示。,2,、“,QQ,在线”按钮的制作,3.3.3,任务实施,（4）在【图层样式】对话框，选择【渐变叠加】选项，并设置参数,（,5,）在【图层面板】上单击,新建图层按钮，添加“,QQ,企鹅”素材和文字素材，并复制,2,遍。“,QQ,在线”按钮最终效果如图,3-47,所示。,2,、“,QQ,在线”按钮的制作,3.3.3,任务实施,（5）在【图层面板】上单击 新建图层按钮，添加“QQ企鹅”素,（,1,）打开,Adobe Photoshop CS5,，选择【文件】,|,【新建】菜单命令。打开【新建】对话框。将【名称】设置为：“,logo,”，【宽度】设置为“,58,像素”，【高度】设置为“,69,像素”，“【分辨率】设置为“,72dpi,”，【背景内容】设置为“白色”。,（,2,）首先在【工具栏】,|,【前景色】设置为“,#003d6c,”，用【工具栏】,|,【自定形状工具】，如图,3-48,和,3-49,所示。选择“球形画笔”绘制一个地球，如图,3-50,所示。,3,、网站,LOGO,制作,3.3.3,任务实施,（1）打开Adobe Photoshop CS5，选择【文件,（,1,）打开,Adobe Photoshop CS5,，选择【文件】,|,【新建】菜单命令。打开【新建】对话框。将【名称】设置为：“,logo,”，【宽度】设置为“,58,像素”，【高度】设置为“,69,像素”，“【分辨率】设置为“,72dpi,”，【背景内容】设置为“白色”。,（,2,）首先在【工具栏】,|,【前景色】设置为“,#003d6c,”，用【工具栏】,|,【自定形状工具】，如图,3-48,和,3-49,所示。选择“球形画笔”绘制一个地球，如图,3-50,所示。,3,、网站,LOGO,制作,3.3.3,任务实施,（1）打开Adobe Photoshop CS5，选择【文件,3,、网站,LOGO,制作,3.3.3,任务实施,3、网站LOGO制作3.3.3 任务实施,（,3,）用【工具栏】,|,【钢笔工具】如图,3-51,所示。绘制按照图,3-52,所示的轮廓,3,、网站,LOGO,制作,3.3.3,任务实施,（3）用【工具栏】|【钢笔工具】如图3-51所示。绘制按照图,（,4,）选择绘制好的轮廓，按【,Ctrl+Enter,】组合键，将路径转换为选区，【前景色】设置为渐变颜色，颜色分布设置为：,#21629a,到,#175379,。如图,3-53,所示。效果如图,3-54,所示。,3,、网站,LOGO,制作,3.3.3,任务实施,（4）选择绘制好的轮廓，按【Ctrl+Enter】组合键，将,（,5,）最后用【工具栏】,|,【椭圆工具】，按【,Shift,】键的同时，拖拽鼠标绘制大小不同的六个正圆，填充色分别设置为“,#ffffff,”和“,#135276,”。并把正圆放置适当位置，最终效果如图,3-55,所示。,3,、网站,LOGO,制作,3.3.3,任务实施,（5）最后用【工具栏】|【椭圆工具】，按【Shift】键的同,（,1,）打开,Adobe Photoshop CS5,，选择【文件】,|,【新建】菜单命令。打开【新建】对话框。将【名称】设置为：“,menu,”，【宽度】设置为“,987,像素”，【高度】设置为“,37,像素”，“【分辨率】设置为“,72dpi,”，【背景内容】设置为“,#103845,”。 如图,3-56,所示。,4,、导航条的制作,3.3.3,任务实施,（1）打开Adobe Photoshop CS5，选择【文件,（,2,）用【工具栏】,|,【直线工具】，在【工具选择器】中设置填充颜色为“白色”。绘制,6,条和导航条高度一样的线，放置导航条上，如图,3-57,所示。,4,、导航条的制作,3.3.3,任务实施,（2）用【工具栏】|【直线工具】，在【工具选择器】中设置填充,（,3,）选择【工具栏】,|,【文字工具】输入“网站首页,|,公司简介,|,管理咨询,|,在职读研,|,经典教育,|,在线留言,|,联系我们”等文字，设置字体属性为“宋体”、“ 加粗”、“,12,号”，填充颜色为“白色”。 如图,3-58,所示。,4,、导航条的制作,3.3.3,任务实施,（3）选择【工具栏】|【文字工具】输入“网站首页|公司简介|,3.3.4,任务评价,3.3.4 任务评价,通过本任务的学习能使用,Photoshop CS5,完成网站网页中按钮、网站,LOGO,和导航条等“平顶山韩创教育咨询有限公司”网站素材制作。为后续网站图像元素处理的操作方法。,3.3.5,任务小结,通过本任务的学习能使用Photoshop CS5完成网站网页,3.4,任务四,切片与输出,3.4.1,任务描述,3.4.2,相关知识,3.4.3,任务实施,3.4.4,任务评价,3.4.5,任务小结,3.4任务四 切片与输出3.4.1 任务描述,许多网页为了最求更好的视觉效果，往往采用整幅图片来布局网页，但是这样做的结果会使网页浏览速度变慢很多。为了加快浏览和下载速度，就要对网页平面效果图使用切片技术，也就是把一整幅图片切割成若干小块。,本任务主要使用,Photoshop CS5,中【工具栏】,|,【切片工具】对“平顶山韩创教育咨询有限公司”网站首页效果图进行切割。,3.4.1,任务,描述,许多网页为了最求更好的视觉效果，往往采用整幅图片来布局网页，,切片技术，是一种网页制作技术，他是将美工效果图转换为页面效果图的重要技术。,Photoshop,和,Fireworks,都提供了切图技术，,Flash,则直接提供了网页格式输出技术（不需要切图）。,切片，是切图的直接结果，切图实际上就将图切分为一系列的切片。,一、,基本概念,3.4.2,相关,知识,切片技术，是一种网页制作技术，他是将美工效果图转换为页面效果,1,、切片工具。如图,3-59,所示。,二、,切图操作过程。,3.4.2,相关,知识,1、切片工具。如图3-59所示。二、切图操作过程。3.4.2,2,、切图基本操作。,（,1,）划分切片，是使用切片工具，在原图上进行切分的操作。,（,2,）编辑切片，是对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等的修改等,.,二、,切图操作过程。,3.4.2,相关,知识,2、切图基本操作。二、切图操作过程。3.4.2 相关知识,3,、切图输出。,输出图像：完成切图操作后可以使用“切片选择工具”选择需要输出的切片，然后选择“文件”菜单，并选择“存储为,Web,所用格式,(W).,”，然后在弹出的界面中单击存储按钮即可对选择切片进行保存。,输出,HTML,和图像：完成切图操作后，在“文件”菜单中，选择“存储为,Web,所用格式,(W).,”，在弹出的页面中直接选择“存储”，然后在弹出的界面中，填入文件名，保存类型选择“,HTML,和图像”，设置为“默认设置”即可，切片选择“所有切片”。然后点击“保存”按钮就可以了。后面的事情，就是编辑输出的,Html,页面了。,二、,切图操作过程。,3.4.2,相关,知识,3、切图输出。二、切图操作过程。3.4.2 相关知识,1,、在,Photoshop CS5,中，打开“平顶山韩创教育咨询有限公司”网站首页效果图。如图,3-60,所示。,二、,切图操作过程。,3.4.3,任务实施,1、在Photoshop CS5中，打开“平顶山韩创教育咨询,3,、选择【文件】,|,【存储为,web,格式和设备所用格式】菜单命令，如图,3-62,所示。,二、,切图操作过程。,3.4.3,任务实施,3、选择【文件】|【存储为web格式和设备所用格式】菜单命令,4,、打开“【存储为,web,格式和设备所用格式】对话框，在对话框中进行相应得设置。如图,3-63,所示。单击【存储】按钮，打开【将优化结果存储为】对话框，在文件名文本框中输入文本的名称，“格式”选择【,HTML,和图像】，效果如图,3-64,所示。,二、,切图操作过程。,3.4.3,任务实施,4、打开“【存储为web格式和设备所用格式】对话框，在对话框,5,、单击“保存”，即可将图像文件存储为,HTML,文件。在【将优化结果存储为】对话框中选择图像文件和,HTML,文件存储位置。如图,3-65,所示。最终效果如图,3-66,所示。,二、,切图操作过程。,3.4.3,任务实施,5、单击“保存”，即可将图像文件存储为HTML文件。在【将优,3.4.4,任务评价,3.4.4 任务评价,通过本任务的学习，熟练掌握切片技术对网页效果图切割的方法。能完成各类网页效果图的切割。,3.4.5,任务小结,通过本任务的学习，熟练掌握切片技术对网页效果图切割的方法。能,3.5,拓展实训：设计企业网站的页面模板,3.5.1,任务描述,3.5.2,实训目的,3.5.3,实训要求,3.5.4,实训考核,3.5拓展实训：设计企业网站的页面模板3.5.1 任务描述,使用,Photoshop CS5,工具软件，完成“平顶山华通胶辊有限公司”企业网站网页平面效果图设计与制作。,3.5.1,任务,描述,使用Photoshop CS5工具软件，完成“平顶山华通胶辊,掌握,Photoshop CS5,工具软件基本操作；,熟悉,Photoshop CS5,常见快捷键。,完成完成“平顶山华通胶辊有限公司”企业网站网页平面效果图设计与制作。,3.5.2,实训目的,掌握Photoshop CS5工具软件基本操作；3.5.2,按照网页设计流程，通过网页网站规划和网站风格设计，对“平顶山华通胶辊有限公司”企业网站网页平面效果图设计与制作。,能使用,Photoshop CS5,工具软件设计企业网站首页和二级页面平面效果图。,能使用,Photoshop CS5,工具软件制作网页图形元素、网页按钮、网站,LOGO,、导航栏等网页元素。,最终使用切片技术对企业网页效果图进行切割，并生成,.html,网页。,3.5.3,实训要求,按照网页设计流程，通过网页网站规划和网站风格设计，对“平顶山,3.5.4,实训考核,3.5.4 实训考核,