网络设计全套电子教案整套教学教程.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,*,网页设计与制作教程,前言,随着计算机网络的广泛应用，网站技术不断发展完善，网页设计与制作与网站开发技术是目前非常流行的计算机网络技术之一，其中网页设计与制作更是热中之热。社会对网站开发技术人才的需求非常迫切。在目前的网站开发技术中，都需要将网页制作作为基础，目前该课程也是计算机专业甚至非计算机专业必开的课程之一，同时由于该课程能够和实际应用紧密结合，又是一门实践性很强的课程，非常受学生的欢迎。本书编写指导思想是仅完成网站制作技术系列课程的一部分，即静态网页制作技术培养。只作为网站技术课程的基础，而不涉及动态网页内容。,下一页,返回,前言,针对高等职业技术的特点，本书更注重实践操作，同时要和实际的工作相结合，使学生能够在做中学，教师在做中教，为此本教材更加突出如下特点:,1.实践型的教材编写模式:本书编写以大量网页的设计与制作实践为基础，实践经验丰富，在教材素材、实例的选取上能够更加贴近实际需求。,2.项目导向型的教材定位:本书以一个校企合作项目开发网站建设为例，按照项目进程安排章节，每一章节的实例不仅介绍必须的知识，而且每个实例都是项目中的元素，并为后继章节所用，既相互独立，又紧密联系，能,上一页,下一页,返回,前言,够使学生对于项目有一个完整的认识和深刻的体会。,3.实际应用为主体的内容体系:本教材打破了理论介绍和实例教学相分离的传统的课程分配方式，使学生在学习实例之前先了解必须的相关知识点，再通过具体的实例加强实践能力，并且改变以往实例仅仅是为了介绍相关知识，没有一定的内在联系，加强了课程的条理性。,4.立体化的教材服务:为了更好地辅助学生实践，推出了一套多元化的教学服务产品，包括图书正文、素材库、实例源文件、电子教案等。本书根据网页设计制作项目的特点和发展现状与趋势，对网页布局与策划、网页平,上一页,下一页,返回,前言,面效果设计、网页动画技术处理、网页制作等问题做了系统的分析和阐述。全书以一个实际项目为主线，按照项目的进程将其分成网页策划、网页平面制作、网页动画制作、网页测试发布,4个主要部分。,本书定位于职业教育，主要面向高职高专院校，同时也适合于同等学历的职业教育和继续教育。本书可作为高等职业技术院校电子商务专业、计算机信息管理、广告设计专业等专业的教材，也可作为广大网页设计制作人员的参考书和自学读物。本书由刘蓓、孔东阳主编，李静媛、,上一页,下一页,返回,前言,赵海亮、王皑、崔鹏宇副主编，其中学习情境一、学习情境五由李静媛、孔东阳老师编写，学习情境二由吴冰、刘蓓老师编写，学习情境三由李颖、赵海亮老师编写，学习情境四由王茜、王皑老师编写，参加本书编写的还有史振兴、柳忠平、侯广珊、周益卫老师。本书的编写工作得到了北京理工大学出版社的大力支持，在此表示衷心的感谢。,由于编者的水平有限，书中难免有不当之处，敬请广大读者和专家批评指正。,作者E-mail:1iu73419,编者,上一页,返回,目录,第1章 网页策划,第2章 pbotosbop,第3章 flash,第4章 网页制作,第5章 网页测试发布,第1章 网页策划,1.1 实例介绍,1.2 相关知识,1.3 知识拓展,1.1 实例介绍,“康达电器网站”是一个小型家用电器类的网站。网站的建立主要具有介绍公司产品，扩大企业知名度、为广大顾客服务等功能。我们以设计建立一个这样的网站为例来学习，不仅要学习网页设计的工具，更要注重项目的总体开发流程及每个步骤的具体细节。,1.网站的设计流程,图1.1,的开发流程比较好地体现了网站开发的整个环节。从流程图中我们可以看出本流程主要涉及网站开发的前台开发，主要就是网页的设计与制作，这也是本教材的重点。,下一页,返回,1.1 实例介绍,2.网站目录结构,网站的目录结构是指网站组织和存放站内所有文档目录设置的情况。一个良好的网站目录结构对于站点维护、内容扩充和移植有着重要的影响。如大型网站的目录数量多、层次深、关系复杂，在网站设计中更需要合理定义目录结构和组织好所有文档。下面介绍一些在设计中行之有效的做法。,第1种:不要将网站中所有文件都存放在一个目录下。尽可能减少网站根目录下存放文件数，网站根目录只存放index.html或index.asp等首页文件，以及其他必须的系统文件。,上一页,下一页,返回,1.1 实例介绍,第2种:一般按照网站的主菜单栏目结构，给每个栏目建立一个目录。如果这个栏目的内容特别多，又分出很多下级栏目，则可以再增设相应的了目录。例如，根据需要在每个栏目的目录中建立images和media的了目录，独立存放此栏目专有的图片和多媒体文件。,第3种:在网站根目录中常包含的目录有以下几类。Images目录存放网站所有页面都要用到的公共图片；Style目录存放CSS样式表文件;Js目录存放JavaScript脚本文件;Media目录存放flash,avi,rm等多媒体文件;Temp目录存放搜集的各类文字图片等原始资料;Templates目录存放网站模板文件。,上一页,下一页,返回,1.1 实例介绍,第4种:网站如有多个语言版本，每个语言版本应存放于独立的目录中。,3.布局与界面设计,(1)网页布局,本项目所采用的页面布局使用了经典的结构，如,图1.2,所示。,(2)网站的标准色设计,“标准色彩”是指能体现网站形象和延仲内涵的色彩。网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，,上一页,下一页,返回,1.1 实例介绍,并可能影响到访问者的情绪。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。一个网站不可能单一地运用一种颜色，让人感觉单调、乏味，但是也不可能将所有的颜色都运用到网站中，这样会让人感觉轻浮、花哨。一个良好的网站必须有1种或2种主题色，这样不至让客户迷失方向，也不至单调、乏味。所以确定网站的主题色是设计者必须考虑的重要问题之一。一个页面尽量不要超过4种色彩，用太多的色彩会让人没有方向、没有侧重。,上一页,下一页,返回,1.1 实例介绍,当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，以及要体现什么样的效果。另外要考虑哪种因素占主要地位，是明度、纯度，还是色相。对于不同类型的网站主题色的制定还有不同的要求。如果是非商业，企业类型的网站主题色的确定是较灵活和自由的，相反的话就必须考虑到更多的其他因素。如主题色是否考虑到商业机构或企业的标志色、标准色、行业色等特殊因素的影响。,(3)设计网站的标准字体,和标准色彩一样，标准字体是指用于标志、标题和主菜单的特有字体。一般来说，常见网页默认的字体为宋体。,上一页,下一页,返回,1.1 实例介绍,为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别字体。,(4)网页CI设计,所谓CI是企业形象识别系统的总称。CI(corporateidentity)意思是通过视觉来统一企业的形象。作为一个系统，它主要由MI(企业理念)、BI(企业行为)和VI(企业视觉识别)3个部分所组成。我们所熟悉的企业标志(logo、企业标准字、企业专有色都是属于VI的范畴，也是网页美化所主要关注的部分。,上一页,下一页,返回,1.1 实例介绍,(5)设计网站的图像与图标,一个好的站点，不但要有精彩的内容，还需要有一个美观的页面。谈到美观就离不开图片，在页面中适当地用一些精美的图片作为点缀，会使你的网页大放异彩。但是，有些图片如果不加修饰，直接摆放在网页中，效果也许会适得其反。设计图片时首先要选好图片格式。一般情况下选择GIF格式与JPEG格式。其次是采用合理的图片处理技术，如用Photoshop的样式加阴影，用双层错位放置充当阴影、图片加边框、图片渐变等。,上一页,返回,1.2 相关知识,1.网页布局的基本概念,(1)页面尺寸,由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留给你的页面范围就变得越来越小。浏览器的工具栏也是影响页面尺寸的原因。一般来说，目前的浏览器的工具栏都可以取消或者增加，那么当显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是唯一给网页增加更多内容(尺寸)的方法。,下一页,返回,1.2 相关知识,(2)页头,页头又可称之为页眉，其作用是定义页面的主题。,(3)页脚,页脚是放置制作者或者公司信息的地方。,2.网页布局的主要元素,(1)网站标识Logo,(2)广告,(3)导航栏,(4)图标和按钮,上一页,下一页,返回,1.2 相关知识,(5)文字,(6)图像,(7)多媒体,3.网页版面布局,(1)“国”字形,(2)拐角型,(3)标题正文型,(4)左右框架型,(5)上下框架型,上一页,下一页,返回,1.2 相关知识,(6)综合框架型,(7)封面型,(8)Flash型,(9)变化型,4.网站命名规范,第1点:所有文件、目录的命名统一成小写的英文字母、数字和下画线的组合。尽量用最少的字母达到最容易理解的意义。,第2点:文件命名最好用代表其含义的英文单词或缩写，不容易翻译成英文的，用关键字的汉语拼音表示。,上一页,下一页,返回,1.2 相关知识,第3点:图片的命名一般用表示图片性质的英文单词或缩写。,5.网页布局的规律,(1)比例,网页界面的版式设计，其比例关系一般体现在:页面空间长宽比、页面被分割的比例、实体与空白的面积比、图文的关系以及造型元素内部的比例等形式上的数量关系。确立良好的比例关系，能使页面各部分之间易于产生相互联系，使版式设计和谐匀称。页眉部分左边的Logo和右边的banner采用了接近黄金矩形的比例，视觉上极为舒适。,上一页,下一页,返回,1.2 相关知识,(2)重复与渐变,重复是相同或相似的形态连续而有规律地反复出现。重复的特点是以单纯的手法求得整体形象的秩序和统一，具有节奏美，让人产生清晰、连续、和平、安定、无限之感。,渐变是形态有规律地连续变化，它通过类似的形态获得了形式的统一。渐变能让相互对立的两极形成过渡，从而达到统一。渐变体现了形态的发展变化过程，让人感觉含蓄、柔和，具有强烈的时间和空间特征。,上一页,下一页,返回,1.2 相关知识,(3)对称与均衡,对称是指形态以某一点为中心，其左右或者上下因同等、同量、同形而形成的平衡，对称存在于很多自然形态中。对称有以中轴线为轴的左右对称，以水平线为轴的上下对称和以中心点为基准的放射对称。对称的版式设计稳定、庄严、整齐、秩序、安宁、沉静。为避免对称产生的单调和呆板，可以在对称中略带变化。均衡是指版面以某一点为中心，左右或者上下等量不等形的配置。均衡是一种造型上有变化的平衡状态，具有变化的统一性。它揭示了形式内在的、含蓄的秩序和平衡，体现了造型动与静相结合的动态之美。均衡的形式灵活而富于变化，易于产生现代感。,上一页,下一页,返回,1.2 相关知识,对称与均衡都是平衡的，这是一种心理上的平衡，平衡使人产生稳定、平静、安全、信任的心理感受，而不平衡则给人以危机感和不信任感，给统一的整体造成局部的干扰。,(4)节奏与韵律,视觉艺术中的节奏和韵律来自音乐的概念。一般来说，节奏感和韵律感同时存在，但细分起来，节奏较多地强调“节拍”，韵律较多地强调“变化”。节奏是指单体按照一定的条理、秩序，重复连续地排列，形成一种律动形式。在版式设计中同样的形态、同样的色彩变化、同样的明暗对比以重复、渐变的方式出现，使人体会到一种类似,上一页,下一页,返回,1.2 相关知识,音乐中的节奏，从而产生美学体验。韵律是一种规律性的变化，它是节奏更高一级的律动。视觉艺术的韵律，有造型元素的有规律的节奏变化形式。在网页界面中，图形图像、文字、色彩等视觉要素，在组织上合乎某种规律时，在视觉和心理上便产生节奏性的韵律感觉。版面的韵律建立在形象的点线构成、字体或图形图像的组合，靠比例、轻重、缓急、反复、渐变等规律形式来体现。运用节奏与韵律的形式法则，能创造出形象鲜明、形式独特的活力与魅力。变幻的曲线、文字和方形图案的巧妙结合，使页面产生轻快的节奏和韵律。,上一页,下一页,返回,1.2 相关知识,(5)对比与统一,对比是指将性质相异的形态要素直接或间接地配置在一起，相异的特点因比较而更加鲜明，使人产生强烈的紧张感。在网页界面中，文字与文字、图形与图形、实体与空白间处处都存在着对比关系。在一个页面中，通常是多种对比关系同时并存，以产生多姿多彩的表现效果。统一就是指性质相同或类似的形态要素并置在一起，形成一种一致或趋向于一致的感觉。统一并不是设计形式的单一化，而是使用多种多样变化的因素具有条理性和规律性，使各个局部相互联系。为了获得版面的整体效果，我们常用各种乎法来取得统一，如在页面的不同位,上一页,下一页,返回,1.2 相关知识,置运用相同的字体、相同的色调，出现相同特征和形状的造型因素等，使版面各处陇调一致。对比和统一既相互矛盾，又相辅相成，当它们达到“平衡”状态时，人们会在精神上产生一种高层次的审美感，这就是美学中“多样的统一”。,6.网页布局技术,(1)层叠样式表的应用,(2)表格布局,(3)框架布局,上一页,返回,1.3 知识拓展,1.网页色彩设计,(1)色彩的作用,色彩是一种奇怪的东西，它是美丽而丰富的，能唤起人类的心灵感知。一般来说红色是火的颜色，热情、奔放;也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁、和平与安全，如绿色食品。紫色象征高贵，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。色彩的魅力是无限的，它可以让本身很平淡无味的东西，瞬间就能变得漂亮起来。,下一页,返回,1.3 知识拓展,(2)认识色彩,最基本的颜色有3种(红、黄、蓝)，其他的色彩都可以由这3种色彩调和而成。我们称这3种色彩为“三原色”。现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其他的色彩都属于彩色。任何一种彩色都具备3个特征:色相、明度和纯度。其中非彩色只有明度属性。,色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩，调整一下亮度或者纯度，很容易搭配，比如，深绿、暗绿、草绿、亮绿。,上一页,下一页,返回,1.3 知识拓展,明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。,纯度，指色彩的鲜艳程度，纯度高的色彩纯而鲜亮。纯度底的色彩暗淡、含灰色。相近色指色环中相邻的颜色。相近色的搭配给人的视觉效果很舒适、很自然。所以相近色在网站设计中极为常用。,互补色，指色环中相对的两种色彩。,暖色，跟黑色调和可以达到很好的效果。,冷色，一般跟白色调和可以达到一种很好的效果。,色彩均衡，网站让人看上去舒适、协调，除了文字、图,上一页,下一页,返回,1.3 知识拓展,片等内容的合理排版，色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一地运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置、每种色彩所占的比例、面积等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒适、不刺眼。这就是一种均衡的色彩搭配。,(3)色彩的应用,色彩在人们的生活中都是有丰富的感情和含义的。比如红色让人联想到玫瑰，联想到喜庆，联想到兴奋;白色联想到纯洁、十净、简洁;紫色象征着女性化，高雅、浪漫;蓝色象征高科技，稳重、理智;橙色代表了欢快、甜美、,上一页,下一页,返回,1.3 知识拓展,收获;绿色代表充满青春的活力，舒适、希望等。当然不是说某种色彩一定代表了什么含义，而是在特定的场合下，同种色彩可以代表不同的含义。在各种色彩中，黑白灰的应用是很特殊的，这是因为黑白灰又被称为“万能色”，可以跟任意一种色彩搭配。当需要选择用某种色彩来进行搭配却没有较满意的色彩时候，可以尝试黑白灰中的一种。当觉得两种色彩的搭配不陇调，可尝试加入黑色，或者灰色，会有意想不到的效果。深灰色(也可以是含有一定倾向色彩的灰色)或接近于黑色的色彩作为大面积的页面背景使用时能够比其他色彩方案更容易集中浏览者的注意力，但另一方面如果是接近于纯黑色的背,上一页,下一页,返回,1.3 知识拓展,景色则容易影响浏览者的情绪，网页的主题和内容、图片等也会受到一些限制。,白色是网站用得最普遍的一种颜色。很多网站甚至留出大块的白色空间作为网站的一个组成部分，这就是留白艺术。很多设计性网站较多地运用留白艺术。留白，给人一个遐想的空间，让人感觉心情舒适、畅快。恰当的留白对于陇调页面的均衡起到相当大的作用。对一些明度较高的网页，配以黑色，可以适当地降低其明度。纯度较高的颜色应该尽量避免被作为大面积的页面背景来使用，因为纯度较高的颜色浏览时间过长，很容易使人感觉到视觉疲劳。另外纯度较高的颜色作为背景时很难与其他色彩相搭配，搭配起来容易造成凌乱的印象。,上一页,返回,图1.1 开发流程,返回,图1.2 网页布局,返回,第2章 photoshop,2.1 网页标志的制作,2.2 网页素材处理,2.3 网页页面的规划与制作,2.4 其他页面的处理,2.5 图片切割导成网页格式,2.1 网页标志的制作,2.1.1实例介绍,1.新建文件,打开【文件】菜单，单击【新建】命令，弹出如,图2.1,所示的【新建】对话框。,设定文件名“logo”，尺寸:C500300，分辨率:72等信息。一般图像分辨率设定为每英寸72线(约28像素/厘米)。在“模式”中设定为彩色模式类型。在“文档背景”中，设定新建文件的背景颜色。白色即背景为白色;背景色即以“色板”调板中的背景色作为背景的颜色;透明即尤色背景。,下一页,返回,2.1 网页标志的制作,(1)新建图层,打开【窗口】菜单，选择【图层】选项，调出【图层】、【通道】、【路径】和【历史纪录】活动面板。在【图层面板】，创建一个透明图层。如,图2.2,所示。,(2)设定颜色,打开【窗口】菜单调出【工具】活动面板，设置前景色为“RGB红”。如,图2.3,所示。,(3)画矩形并用前景色填充,在【工具】活动面板上选取【矩形选框工具】在透明图层上画出一个矩形选择区。如,图2.4,所示。,上一页,下一页,返回,2.1 网页标志的制作,使用【编辑】菜单中的【填充】命令进行前景色填充(前景色填充快捷键:Alt+Del)。,取消选择区域(快捷键:Ctrl+D)如,图2.5,所示。,3.画一个红色的菱形,(1)新建图层。,(2)使用【工具箱】中的【多边形套索工具】，画出一个菱形(画直线击同时按住Shift键)。如,图2.6,所示。,(3)使用前景色填充，取消选取。如,图2.7,所示。,4.绘制红色字母D,(1)新建一个图层。,上一页,下一页,返回,2.1 网页标志的制作,(2)画一个红色的矩形。,(3)将矩形右侧修整成圆角。在矩形外围画一个椭圆，【选择】菜单【反选】，按Del。如,图2.8,所示。,(4)取消选取，在图形内部画一个小矩形，按Del。如,图2.9,所示。,5.绘制红色飘带,(1)新建图层。,(2)使用钢笔路径工具绘制飘带。,使用【工具箱】中的【钢笔工具】。在绘制飘带起点处单击，以定义第一个锚点。在适当位置单击鼠标左键不,上一页,下一页,返回,2.1 网页标志的制作,放并向右侧拖动以定义第一个锚点;以同样方法定义第二个锚点，单击定义第四个锚点(不需要拖动鼠标)，继续用单击并用拖动的方法定义第五个和第六个锚点，最后在第一个锚点处单击并拖动完成整个飘带路径的绘制。,(3)将路径作为选取载入。,(4)调出路径调板，选择刚才绘制完的工作路径并单击下方的将路径作为选取载入图标。,(5)填充红色。,6.画出红色文字框,(1)画一个矩形，如,图2.13,所示。,上一页,下一页,返回,2.1 网页标志的制作,(2)【编辑】菜单中的描边命令，宽度为10像素。,7.绘制标志右上角的注册标记“R,(1)新建图层。,(2)用椭圆选框工具画一个圆，按住Shift+椭圆选框工具。,(3)【编辑】菜单中的描边命令，宽度为4像素。,(4)用文字命令写一个字母R，并移动放置到圆内。效果如,图2.16,所示。,8.输入红色文字,(1)使用文字工具输入【黑体】字，调整合适字号。,上一页,下一页,返回,2.1 网页标志的制作,(2)【图层】菜单中【文字】中的【消除锯齿强】命令，强化文字边缘。,(3)使用移动工具到合适的位置，效果如,图2.17,所示。,9.图形整理和保存,(1)删除背景图层,(2)合并可见图层,(3)保存文件,2.1.2相关知识,1.Photoshop的基本知识,(1)认识Photoshop,基本界面如,图2.20,所示。,上一页,下一页,返回,2.1 网页标志的制作,(2)本章可以参考使用的快捷键,删除选框中的图案或选取的路径DEL,用背景色填充所选区域或整个图层Ctrl+BackSpace或Ctrl+De1,用前景色填充所选区域或整个图层Alt+BackSpace或Alt+De1,全部选取Ctrl+A,取消选择Ctrl+D,重新选择Ctrl+Shift+D,羽化选择Ctrl+Alt+D,上一页,下一页,返回,2.1 网页标志的制作,反向选择Ctrl+Shift+l,路径变选区数字键盘的Enter,2.1.3知识拓展,1.Photoshop软件版本说明,本例所使用的软件版本为Photoshop CS，本教材编写时的最新版本为Photoshop CS3。,2.常用图像格式介绍,(1)PSD,Photoshop格式(PSD)是默认的文件格式，它允许保存图层等一些信息。,上一页,下一页,返回,2.1 网页标志的制作,(2)BMP,BMP是DOS和Windows兼容计算机上的标准Windows图像格式。,(3)GIF,图形交换格式(GIF是在World Wide Web及其他联机服务上常用的一种文件格式，用于显小超文本标记语言(HTML)文档中的索引颜色图形和图像。,(4)JPEG,联合图像专家组(JPEG)格式是在World Wide Web及其他联机服务上常用的一种格式，用于显小超文本标记语言(HTML)文档中的照片和其他连续色调图像。,上一页,下一页,返回,2.1 网页标志的制作,(5)PDF,便携文档格式(PDF)是一种灵活的、跨平台、跨应用程序的文件格式。基于PostScript成像模型，PDF文件精确地显示并保留字体、页面版式以及矢量和位图图形。,(6)TIFF,标记图像文件格式(TIFF用于在应用程序和计算机平台之间交换文件。TIFF是一种灵活的位图图像格式，所有的绘画、图像编辑和页面排版应用程序都可以支持。,上一页,下一页,返回,2.1 网页标志的制作,(7)PNG,便携网络图形(PNG)格式是作为GIF的尤专利替代品开发的，用于尤损压缩和显小Web上的图像。与GIF不同，PNG支持24位图像并产生尤锯齿状边缘的背景透明度。但是，某些Web浏览器不支持PNG图像。,上一页,返回,2.2 网页素材处理,2.2.1实例介绍,(1)新建一个大小为60090像素的页面，命名为menu的文件。,(2)背景色图层渐变效果的设置。,在前景色上双击，设置【拾色器】中的值为R:219，G:236，B:193。设置背景色为白色。选取工具箱中的渐变工具按住左键，从矩形选区的左侧边缘拖拽到右侧边缘，实现渐变填充效果。完成效果如,图2.24,所示。,下一页,返回,2.2 网页素材处理,(3)文本框制作。,新建textbox图层，使用工具箱中的【矩形选框工具】画出一长条形选区，填充选区为白色。,取消选取后双击textbox图层会弹出【图层样式】窗口，在其样式选项上选择【投影】中的【内阴影】，将两者的距离和大小的像素值都设为1。接着在【外发光】选项上将距离和大小值也都设为“1”。单击【好】按钮。,(4)图片按钮的制作,新建go图层。,使用【工具箱】中的【椭圆选框工具】，在页面画出一个正圆形(需同时按住Shift键)。,上一页,下一页,返回,2.2 网页素材处理,将选区填充色设置为R:120，G:118，B:117，进行填充。,在go图层上双击，将图层样式中的【投影】选项打开，设置距离和扩展选项值均为,1，大小值为2，其他值不变。再将【外发光】选项打开，设置大小值为1，其他值不变。单击【好】。,将前景色设置为白色，使用文字工具输入英文Go，选择合适的字型和字号后防置在相应位置。,(5)菜单项的制作,新建heading图层,用矩形选框工具在参考线交义点位置画出一小段长条形选区，填充25%的灰色。,上一页,下一页,返回,2.2 网页素材处理,选择动作调板下创建新图层后，返回图层调板将刚才绘制的矩形拖拽到创建新图层的图标上,移动新复制出的图层到适当位置,再次返回动作调板，单击停止记录后，再重复单击播放选区，复制出相应数量的图形,用文字工具输入文字(整行输入后按空格键，间隔出词距离)，移动到适当位置。完成效果如,图2.34,所示。,2.banner制作,(1)新建一个大小为585105像素，命名为banner的文件。,(2)新建图层1。,上一页,下一页,返回,2.2 网页素材处理,(3)调整前景色为白色，背景色为:R:248，G:213,(4)使用渐变工具在图层1上从左向右填充透明渐变。,(5)在弹出的渐变编辑器中单击【不透明性色标】滑块，将色标选项中【不透明度】设定为0%，单击【好】，完成编辑。,(6)打开保存在光盘素材中的tree.jpeg文件，将它拖拽到文件上，再将其图层位置移动到透明渐变图层之下。使用【缩放】命令调整到合适的大小，移动到画面的相应位置。,(7)将当前图像的窗口最大化，使用椭圆选框工具在tree层上画出椭圆形选区，执行【选择】【反选】命令，将,上一页,下一页,返回,2.2 网页素材处理,选择区反向选择。再执行【选择】【羽化】命令将羽化值设定为50。按键盘中的Delete键3次。完成后效果如,图2.39,所示。,3.images操作,(1)打开保存在光盘素材中的产品文件SG-208.jpeg，此时的图片整体效果较灰暗，可以执行菜单栏中的【图像】【调整】【曲线】命令适当调节图片整体效果。,(2)使用菜单栏中的【图像】【图像大小】命令调节图片的尺寸。将约束比例关闭，修改像素大小的宽度为600像素，高度为450像素。单击【好】。,上一页,下一页,返回,2.2 网页素材处理,(3)使用文字工具输入相应的文字。,(4)新建一个图层，使用文字工具下的圆角矩形工具在图像上画出一带圆角的矩形，再切换到路径调板，单击将路径作为选区载入。,(5)执行菜单栏中的【选择】【反选】命令。使用浅红橙色作为前景色进行填充。取消选择区，双击图层调板上的当前图层，在弹出的图层样式窗口中选择【斜面和浮雕】选项，将方向修改为“下”，暗调颜色值为R:147，G:91，B:2。再选择【描边】选项，调整颜色为白色，大小为2像素，完成设置。,(6)使用菜单栏中的【图像】【图像大小】命令调节图,上一页,下一页,返回,2.2 网页素材处理,片的尺寸。将约束比例打开，修改像素大小的宽度为190像素，单击【好】。,(7)将文件另存为SL-280G.jpeg。,(8)使用同样方法将其他5个产品的图片修改并保存，以备随后使用。完成效果如,图2.43,所示。,4.middle制作,(1)创建大小为48044像素，文件名为“middle”的文件。,(2)创建相应图层制作文字框和Go搜索按钮(创建方法参照导航栏制作)。,(3)制作下拉菜单标记:,上一页,下一页,返回,2.2 网页素材处理,新建一图层，命名为“square”。,使用【矩形选框工具】配合键盘上的shift键在文字框的右侧画出一矩形选区，用25%的灰色进行填充。,双击“square”图层，在弹出的【图层样式】菜单中点选【斜面和浮雕】选项，将其中【大小】值子选项设置为“1”像素。再选择【颜色叠加】选项，在其拾色器中设置颜色为R:210，G:210，B:210。单击【好】按钮，结束编辑。,使用【矩形选框工具】框选【arrow图形上半部后按键盘上的Delete键删除。,取消选区后将其向下移动到适当位置。,上一页,下一页,返回,2.2 网页素材处理,保存文件为middle.jpeg，以备后面使用。,5.content制作,(1)创建大小为290185像素，文件名为“content”的文件。,(2)打开保存在光盘素材中的产品文件leaf.jpeg，拖拽到content窗口中，移动到适当,位置。,(3)使用工具栏中的【钢笔工具】在图像上画出波浪状封闭路径。,(4)使用【路径选择工具】选择路径，移动到适当位置后将路径作为选区载入。,上一页,下一页,返回,2.2 网页素材处理,(5)使用菜单栏中的【编辑】【拷贝】后再使用【粘贴】命令进行粘贴。,(6)调整图层的不透明度为80%。,(7)单击【路径调板】，单击【从选区生成工作路径】。对路径上的锚点作一些位置的修改，使其与上次编辑的路径有所不同。,(8)修改结束后移动整个路径在图像上的上下位置。使用【路径调板】中的【将路径作为选区载入】，复制并粘贴选区。,(9)将粘贴的新图层移动到适当位置，调整图层的不透明度为40%。,上一页,下一页,返回,2.2 网页素材处理,(10)使用菜单栏中的【编辑】【粘贴】命令进行粘贴，调整图层的不透明度为23%。使用【编辑】【变换】【垂直翻转】命令进行位置调整。,(11)在【路径调板】上单击【工作路径】。使用文字工具在路径的适当位置单击鼠标，输入文字。,(12)文字输入后删除工作路径，移动文字到适当位置。,(13)双击文字图层调出【图层样式】菜单。选择【外发光】选项，调整【扩展】为40%,【大小】为6像素。,(14)打开保存在光盘素材中的fruitl.jpeg文件，将该图像拖拽到编辑画面中，放置到适当位置。如,图2.55,所示。,上一页,下一页,返回,2.2 网页素材处理,(15)合并所有图层后保存文件为content.jpeg，以备后面使用。,6.foot制作,(1)创建大小为80080像素，文件名为“foot”的文件。,(2)设置前景色为55%的灰色，使用文字工具在页脚底部输入企业和网站的相关信息，并选好位置。如,图2.56,所示。,(3)创建一个新图层。使用工具箱上的【单行选框工具】在图像最顶部边缘单击会出现一个高为1个像素的选区，用25%的灰色进行填充。,(4)确保当前选区状态，单击一下键盘的向下移动键。仍然使用25%的灰色进行填充。,上一页,下一页,返回,2.2 网页素材处理,(5)使用【矩形选框工具】从灰色线的左右各选取一部分删除掉。,(6)打开保存在光盘素材中的map.jpeg文件，将该图像拖曳到编辑画面中，缩放适当大小后放置到适当位置。,(7)将前景色设为红色，使用文字工具输入相关文字，调整其在地图上的大小和位置。完成效果如下如,图2.60,所示。,(8)合并所有图层后保存文件为foot.jpeg，以备后面使用。,2.2.2相关知识,1.渐变工具,渐变工具可以创建多种颜色间的逐渐混合，可以从预设,上一页,下一页,返回,2.2 网页素材处理,渐变填充中选取或创建自己的渐变。通过在图像中拖移用渐变填充区域。起点(按下鼠标处)和终点(松开鼠标处)会影响渐变外观，具体取决于所使用的渐变工具。【渐变编辑器】对话框可用于通过修改现有渐变的拷贝来定义新渐变。还可以向渐变添加中间色，在2种以上的颜色间创建混合。,2.钢笔工具,钢笔工具可以创建更为精确的直线和平滑流畅的曲线，钢笔工具提供了最佳的绘图控制和最高的绘图准确度。,3.文字工具,当使用文字工具在图像上输入文字时，可以使用【图层】,上一页,下一页,返回,2.2 网页素材处理,【文字】【消除锯齿方式为无】的命令来使文字边缘清晰，这样可以使图像上的小文字看起来更清晰。,2.2.3知识拓展,1.色彩模式,当新建一个photoshop文档时可以为该文档设定一种色彩模式(默认状态下为RGB颜色);打开一幅图像后也可以通过使用菜单命令中的【图像】【模式】来重新设定一种色彩模式。通常清况下制作网页效果应使用RGB颜色模式，但有些时候根据特殊效果的击要，还可以使用其他的色彩模式。,上一页,下一页,返回,2.2 网页素材处理,2.钢笔工具,“钢笔工具”常被用来从一幅图像中“抠出”主体物，它比【磁性套索工具】和【魔棒工具】抠图效果都要完美。但灵活使用该工具是击要勤加练习的。,上一页,返回,2.3 网页页面的规划与制作,2.3.1实例介绍,1.新建主页文件,打开【文件】菜单，单击【新建】命令。设定文件名index、尺寸:8001020像素、分辨率:72像素等信息。设定新建文件的背景颜色为白色。,2.利用标尺和参考线对首页页面进行版面规划设计,(1)调出标尺，显小参考线,(2)设定参考线,根据页面版面规划需要来设定所需的参考线，以为下一步进行各种页面素材的摆位与制作作准备。将鼠标左键,下一页,返回,2.3 网页页面的规划与制作,放在当前页面窗口的标尺位置向内拖动即可定义一条参考线。,(3)根据页面素材关系创建相应的图层组,图层组的作用是方便对繁多的图层素材进行有序地管理和操作。,3.将相应素材打开，使用拖曳的方法加入到对应的图层组中,完成后效果如,图2.67,所示。,上一页,下一页,返回,2.3 网页页面的规划与制作,2.3.2相关知识,1.使用参考线与网格,参考线是浮在整个图像上但不打印出来的线条，可以移动或删除参考线，也可以锁定参考线，以免不小心移动它。,2.使用【对齐】命令,对齐有助于精确放置选区边缘、裁切选框、切片、形状和路径。,2.3.3知识扩展,1.网格,上一页,下一页,返回,2.3 网页页面的规划与制作,网格对于对称地布置图素很有用。网格在默认情况下显小为不打印出来的线条，但也可以显小为点。,2.参考线和网格的特性相似,拖移选区、选区边框和工具时，如果拖移距离小于8个解幕(不是图像)像素，则它们将与参考线或网格对齐。参考线移动时也与网格对齐，可以打开或关闭此功能。参考线间距、是否能够看到参考线和网格，以及对齐方式均因图像而异。网格间距、参考线和网格的颜色及样式对于所有的图像都是相同的。,3.设置参考线和网格预置,在Windows中，选取【编辑】【预置】【参考线、网,上一页,下一页,返回,2.3 网页页面的规划与制作,格和切片】。【颜色】，是为参考线、网格或两者选取一种颜色。如果选取了【自定】，清单击颜色框，选取一种颜色，然后单击【好】按钮。【样式】，是为参考线、网格或两者选取一个显小选项。【网格线间隔】，输入网格间距的值。【子网格】，是指输入划分网格的值。如果愿意，可更改此选项的单位。【百分比】选项创建均匀划分图像的网格。,上一页,返回,2.4 其他页面的处理,2.4.1实例介绍,1.新建售后服务的子页文件,打开【文件】菜单，单击【新建】命令。设定文件名register，尺寸:8001020像素、分辨率:72像素等信息。设定新建文件的背景颜色为白色。,2.将首页原文件中可用的素材导入到新页面,(1)将做完首页原文件index.psd打开，将其图层调板中的menu，foot和logo图层组拖拽入新页面中，移动到与主页相同的位置。,(2)选择“menu”图层组中的“background”，使用菜单栏中,下一页,返回,2.4 其他页面的处理,的【图像】【调整】【色相/饱和度】命令进行色彩的调整。,(3)选择“menu图层组中的“heading”，同样使用菜单栏中的【图像】【调整】【色相/饱和度】命