项目5网页制作素材复习过程

1、项目5网页制作素材 网页设计的建站包含：企业网站、集团网站、门户网站、社区论坛、电子商务网站、网站优化技术等网页设计网页设计 要有网站名称、广告条、主菜单、计数器、和邮件列表等组成。 网页设计还要注意网页的版面和布局、颜色、字体等。 要有主题、指南、双向交流的栏目。 网站要有根目录、子目录、在各种目录中要有图象目录。 使用颜色对不同的页面元素类型进行标注是十分有效的方法，比如：绿色代表超级链接绿色代表超级链接橙色代表表单项目橙色代表表单项目紫色代表紫色代表Js Js效果效果网页设计颜色网页设计颜色网页的色彩网页的色彩（一）网页配色基本概念u白纸黑字是永远的主题，谁都说不出不好来。 u网页最常用

2、流行色 ：蓝色 、绿色 、橙色 、暗红 u颜色的忌讳：忌脏 、忌纯 、忌跳 、忌花 、蓝色忌纯、绿色忌黄、红色忌艳。 u几种固定搭配：蓝白橙、绿白蓝、橙白红、暗红黑 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。u色环：我们将色彩按红-黄-绿-蓝-红依次过度渐变，就可以得到一个色彩环 红色红色-是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。热情，活力的感觉。 绿色绿色-介于冷暖两

3、中色彩的中间，显得和睦，宁静，健康，安介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。氛。 橙色橙色-也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。时尚的效果。 黄色黄色-具有快乐，希望，智慧和轻快的个性，它的明度最高。具有快乐，希望，智慧和轻快的个性，它的明度最高。 蓝色蓝色-是最具凉爽，清新，专业的色彩。它和白色混合，能体是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛现柔顺，淡雅，浪漫的气氛( (

4、象天空的色彩象天空的色彩:) :) 黑色黑色-具有深沉，神秘，寂静，悲哀，压抑的感受。具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色灰色-具有中庸，平凡，温和，谦让，中立和高雅的感觉。具有中庸，平凡，温和，谦让，中立和高雅的感觉。网页色彩搭配的原理 色彩的鲜明性：网页的色彩要鲜艳，容易引人注目 色彩的独特性。要有与众不同的色彩，使得大家的印象强烈 色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 色彩的联想性。不同色彩会色彩的联想性。不同色彩会产生不同的联想，蓝色想到产生不同的联想，蓝色想到天空，黑色想到黑夜，红色天空，黑色想到黑夜，红色想到喜事等，选择色彩要和想

5、到喜事等，选择色彩要和你网页的内涵相关联你网页的内涵相关联网页布局基本元素网页布局基本元素网页由文本、图像、动画、超级链 接等基本元素构成 一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小一般使用9磅或12像素左右即可。 丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。 超级链接是Web网页的主要特色，是指从一个网

6、页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状。 导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。 动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的最有效方法之一。但是如果网页动画太多，也会物极必反，使人眼花缭乱，进而产生视觉疲劳 表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。 框

7、架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示。例如在一个框架内放置导航栏，另一个框架中的内容可以随单击导航栏中的链接而改变。 表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。 网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、Java Applet 等元素。网页设计布局 最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。

8、 与与国字型国字型类似、上类似、上面是标题及广告横幅面是标题及广告横幅，接下来的左侧是一，接下来的左侧是一窄列链接等，右列是窄列链接等，右列是很宽的正文，下面也很宽的正文，下面也是一些网站的辅助信是一些网站的辅助信息。在这种类型中，息。在这种类型中，一种很常见的类型是一种很常见的类型是最上面是标题及广告最上面是标题及广告，左侧是导航链接，左侧是导航链接 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做

9、链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式。 这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。 采取左右或上下对称的布局，一半深色、一半浅色，一般用于设计型站点 多用于国外站点，特点页面上横向两条色块，将页面整体分割成四部分，色块中大多放广告条。 POP源自广告术语，指页面布局像一张宣传海报，以一张

10、精美图片作为页面的设计中心。常用于时尚类网站，优点是漂亮吸引人，缺点是速度慢网页版式的基本类型网页版式的基本类型 网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。 页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。 把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对

11、比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。 沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。 图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。 页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。 焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。 自由型的页面具有活泼、轻快的风格。 网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。 对称的页

12、面给人稳定、严谨、庄重、理性的感受。 对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。1.文件新建：400*200px、分辨率：72、RGB模式、2.选用文字工具，并设置文字的颜色为“C:100， M:98，Y:44，K:0”；其中字母的大小为“60 点”，文字的大小为“48 点”、字体为“Rockwell Extra Bold”。3. 选中文档中的文字，单击鼠标右键，从弹出的快捷菜单中选择【仿斜体】命令，将文字设置 为斜体效果。4. 打开随书光盘中的“素材ch26汽车笔触.psd”图片。5. 使用【移动工具】 将“笔触”文件中的图像拖曳到“公司 L

13、ogo”文件中，然后按【Ctrl+T】 组合键，调整笔触的位置、大小和图层的顺序。6. 在工具箱上选择【自定形状工具】 ，然后在首选项单击【点击可打开“自定形状”拾色器】 按钮，打开系统预设的形状列表框，从中选择需要的形状样式。7. 在【图层】调板中单击【新建图层】按钮，新建一个图层，然后在该图层中绘制形状。8.在【图层】调板中选中【形状 1】图层，单击鼠标右键，从弹出的快捷菜单中选择【栅格化 图层】命令，即可将该形状转化换为图层。 9.在【图层】调板中选中文字图层，按【Ctrl】键，单击【形状 1】和【图层 1】图层，选中这 3 个图层，然后单击鼠标右键，从弹出的快捷菜单中选择【合并图层】命

14、令，将这 3 个图层 合并成一个。 10.双击【背景】图层后面的锁图标，弹出【新建图层】对话框，单击【确定】按钮，将【背景】 图层转换成普通图层。然后使用【魔棒工具】 选择白色背景，按【Delete】键删除背景。新建图层5绘制竖线，新建图层6，绘制横线。选择直线工具（填充像素、大小：3）绘制相应直线。1.Ctrl+N新建文件：22.58*2.26厘米、分辨率：72像素/英寸、名称：网页导航栏2.在工具箱中单击【渐变工具】，然后在首选项栏中 单击【渐变编辑器】按钮，打开【渐变编辑器】对话框，从中设置渐变的颜色。3. 选择【网页导航栏】文件的上边缘，按下鼠标左键不放，向下拖动渐变填充文件。4. 选

15、择工具箱中的【横排文字工具】 ，在其中输入文字，并设置文字的颜色为“C:76，M:29， Y:0，K:0”，字体大小为“18 点”，字体为“楷体_GB2312”。5. 双击【网站首页】图层，打开【图层样式】对话框，选择【投影】选项，从中设置相关的参 数。6. 单击【确定】按钮，即可为文字添加投影效果。7. 按照上述方式，输入网页导航栏中的其他文字信息，并同样设置投影效果，不同的是将其他 的文字设置为“黑色” 8. 在工具栏中单击【自定形状工具】 ，再在首选项单击【点击可打开“自定形状”拾色器】 按钮，在弹出的列表框中选择预设的形状，在网页导航栏中绘制相关的形状，并设置形状的 颜色为“C:85，

16、M:50，Y:15，K:0”。9. 使用相同的方法，在导航栏中的其他位置绘制形状。10. 打开随书光盘中的“素材ch26汽车水晶按钮.psd”图像，使用【移动工具】 将该水晶按 钮拖曳至导航栏中，并调整其位置和大小，以及图层的顺序，效果如图所示。1.Ctrl+N新建文件：256*221px ，分辩率：“72 像素/ 英寸”，名称：企业介绍。2. 选择工具箱中的【横排文字工具】 ，在文档中输 入“企业介绍”，并设置文字的字体为“隶书”，字体大小为“18 点”，显示方式为“仿斜体”。3. 在【图层】调板中双击文字所在的图层，打开【图层样式】对话框，选择【投影】选项，并 设置相关的参数。4单击【确定

17、】按钮，为文字添加投影效果。5. 在工具箱中选择【自定形状工具】 ，再在首选项单击【点击可打开“自定形状”拾色器】 按钮，打开系统预设的形状列表框，从中选择需要的形状样式，在文档中绘制一个形状。6. 打开随书光盘中的“素材ch26汽车办公大楼.jpg”图像。7. 使用【移动工具】 将办公大楼拖至“企业介绍.psd”文件中，按【Ctrl+T】组合键，自由 变换“办公大楼”至合适的大小和位置。8. 选择工具箱中的【横排文字工具】 ，在“企业介绍”文件中输入有关该企业的相关介绍性 信息。9. 再次使用【横排文字工具】，在文件中输入“Read more”，并绘制“”图标。10. 参照上述制作“企业介绍

18、”文档的方式，制作“精品展示.psd”、“购车常识.psd”、“汽车维护.psd” 等文档。1.Ctrl+N新建文件：1024*56px、名称：状态栏、分辨率：“72 像素/ 英寸”。2. 单击【确定】按钮，即可创建一个空白文档。3. 选择工具箱中的【渐变工具】 ，然后在首选项栏中单击【渐变编辑器】按钮，打开【渐变编辑器】对话框，设置渐变的颜色。单击【状态栏】文件的下边缘，按下鼠标左键不放， 向上拖动渐变填充文件。4. 选择工具箱中的【横排文字工具】 ，在其中输入“版权信息、地址、电话”等相关文字信 息，并设置文字的字体为“Adobe 黑体 Std”，字号大小为“14”，斜体显示。5. 双击【

19、图层】调板中的文字图层，打开【图层样式】对话框，选择【投影】和【外发光】选 项，并分别设置相关的参数。6. 单击【确定】按钮，应用图层样式。至此，企业网页的状态栏设置完成。（一）新建文件1.Ctrl+N新建：1024*1000px、分辨率：“72 像素/英寸”、RGB 模式2.单击【确定】按钮，创建一个“汽车网页”空白文档。（二）设置辅助线1. 选择【视图】【新建参考线】菜单命令，在弹出的【新建参考线】对话框中进行如图所示 设置。2. 同理，设置水平方向 3.5 厘米处的参考线。3. 同理，设置其他水平方向和垂直方向处的参考线。（三）使用素材1. 选择工具箱中的【渐变工具】 ，然后在首选项栏中

20、单击【渐变编辑器】按钮，打开【渐 变编辑器】对话框，从中设置渐变的颜色。 2. 单击“状态栏”文件的上边缘，按下鼠标左键不放，向下拖至 3.5 厘米处渐变填充文件。3. 打开随书光盘中的“素材ch26汽车公司 Logo.psd”、“素材ch26汽车背景.jpg”、“素材ch26 汽车网页导航栏.jpg”等图片，然后选择【移动工具】 ，将素材拖曳到新建文档中。4. 按【Ctrl+T】组合键调整位置和大小,并调整图层的顺序。5. 打开随书光盘中的“素材ch26汽车精品展示.jpg”、“素材ch26汽车企业介绍.jpg”、“素材 ch26汽车汽车维护.jpg”、“素材ch26汽车购车常识.jpg”等

21、图片，然后选择【移动工具】 ， 然后将素材文字拖曳到新建文档中，并调整位置和顺序。6. 按【Ctrl+T】组合键调整位置和大小,并调整图层的顺序。7. 在【图层】调板中双击【精品展示】所在的图层，打开【图层样式】对话框，选择【描边】 选项，设置描边的样式、大小等参数。 8. 单击【确定】按钮，即可为【精品展示】图层添加描边效果。使用相同的方法，为【企业介 绍】、【汽车维护】、【购车常识】等图层添加相同的描边效果。 9. 打开随书光盘中的“素材ch26汽车汽车 14.jpg”图像，选择【移动工具】 ，将素材拖 曳到“汽车网页”文档中，然后按【Ctrl+T】组合键，调整位置、大小和图层的顺序。10

22、. 打开随书光盘中的“素材ch26汽车状态栏.jpg”图像，选择【移动工具】 ，将素材拖曳 到“汽车网页”文档中，然后按【Ctrl+T】组合键调整位置、大小和图层的顺序。（四）添加横条素材1. 打开随书光盘中的“素材ch26汽车横条.jpg”图像，选择【移动工具】 将素材拖曳到“汽 车网页”文档中，按住【Ctrl+T】组合键调整位置、大小和图层的顺序。2. 在【图层】调板中选中横条所在的图层，单击鼠标左键，将其拖曳至【新建图层】按钮 之 上，复制一个横条图层。3. 选择【移动工具】 ，将复制的横条移至“状态栏”上顶端，按【Ctrl+T】组合键调整位置、 大小和图层的顺序。至此，就完成了“汽车网

23、页”的设计。（五）保存汽车网页1. 选择【文件】【存储为 Web 和设备所用格式】菜单命令。2. 弹出【存储为 Web 和设备所用格式】对话框，根据需要设置相关的选项。3. 单击【存储】按钮，弹出【将优化结果存储为】对话框，设置文件保存的位置，在【格式】 下拉列表中选择【HTML 和图像】选项。4. 单击【保存】按钮，即可将“汽车网页”以 HTML 和图像的格式保存起来。5. 双击其中的“汽车网页.html”文件，即可在 IE 浏览器中打开“汽车网页”。 在设计网页时，应根据网站的类型来决定整体的色调和画面布局以及字体的类型。由 于本网页是一个汽车网页，因此，将网页的基本色调确定为蓝色，其中的

24、文字使用较多的 是比较简单规整的字体样式。1.打开“素材ch26房产背景.psd”图片，然后按【Ctrl+R】组合键添加标尺。2. 选择【视图】【新建参考线】菜单命令，在打开的【新建参考线】对话框中进行如图所示 的设置。3. 同理，设置水平方向 6.5 厘米处的参考线。4. 按照上述设置水平和垂直参考线的方法，添加其他的参考线。1. 打开随书光盘中的“素材ch26房产背景.psd”和“素材ch26房产公司 Logo.psd”两张图片。2. 选择【移动工具】 ，将素材拖曳到“背景”文档中，然后按【Ctrl+T】组合键调整位置和 大小，并调整图层的顺序。3. 打开随书光盘中的“素材ch26房产导航

25、栏背景.psd”和“素材ch26房产广告背景.psd”和 “素材ch26房产背景 2.psd”等 3 张图片。4. 选择【移动工具】 ，将素材拖曳到“背景”文档中，然后按【Ctrl+T】组合键调整位置和 大小。5. 打开随书光盘中的“素材ch26房产上色块.psd”图片。6. 选择【移动工具】 ，将素材拖曳到“背景”文档中，然后按【Ctrl+T】组合键调整位置和 大小，并设置【上色块】图层的【不透明度】为“50%”。7. 打开随书光盘中的“素材ch26房产下色块.psd”图片。8. 选择【移动工具】，将素材拖曳到“背景”文档中，然后按【Ctrl+T】组合键调整位置和大小，并设置【下色块】图层的

26、【不透明度】为“37%”。9.打开随书光盘中的“素材ch26房产公告栏.psd”和“素材ch26房产左下框.psd”两张图片。10.选择【移动工具】 ，将素材拖曳到“背景”文档中，然后按【Ctrl+T】组合键调整位置和 大小。1. 在工具栏上选择【横排文字工具】 ，在“背景.psd”文档中输入导航栏信息，字体为“隶 书”，大小为“18 点”，颜色为“C:71，M:67，Y:100，K:42”。2. 在【图层】调板中双击导航栏文字所在的图层，打开【图层样式】对话框，选择【投影】选 项并设置相关参数，再选择【内发光】选项并设置相关参数。3. 单击【确定】按钮，应用图层样式效果。1. 在工具栏上选择

27、【横排文字工具】 ，在“背景.psd”文档中输入“汇成公告”，字体为“华 文行楷”，大小为“18 点”，颜色为“C:71，M:67，Y:100，K:42”。按照相同的方式，输入“更 多”，并设置文字的大小、字体和颜色。2. 打开随书光盘中的“素材ch26房产公司公告.psd”图片，然后按【Ctrl+T】组合键调整位置 和大小。3. 在工具箱中选择【自定形状工具】 ，再在首选项单击【点击可打开“自定形状”拾色器】 按钮，打开系统预设的形状列表框，从中选择需要的形状样式，在文档中绘制一个形状。4. 在工具栏上选择【横排文字工具】 按钮，在“背景.psd”文档中输入“新闻快讯”，字体为 “宋体”，大

28、小为“14 点”，颜色为“C:92，M:88，Y:88，K:79”。5. 在【图层】调板中选择“更多”文字所在的图层，按鼠标左键不放将该图层拖曳至【新建图层】按钮上，复制图层“更多副本”，然后使用【移动工具】移动该图层至合适的 位置。6. 打开随书光盘中的“素材ch26房产图 03.psd”图片，按【Ctrl+T】组合键调整位置和大小。7. 在工具箱中选择【直线工具】 ，在文档中绘制一个直线，然后复制 4 条直线，并调整它们 的位置。8. 在工具栏中选择【横排文字工具】 ，在“背景.psd”文档中输入新闻快讯的相关文字，字 体为“宋体”，大小为“10 点”，颜色为“C:92，M:88，Y:88

29、，K:79”。9. 打开随书光盘中的“素材ch26房产图 02.psd”图片，按【Ctrl+T】组合键调整位置和大小。 按照上述的方法，制作楼盘介绍的相关内容。1. 复制【形状 1】和【新闻快讯】两个图层，调整其位置，然后修改“新闻快讯”为“楼盘抢 先看”。2. 打开随书光盘中的“素材ch26房产图 01.psd”图片，按【Ctrl+T】组合键调整位置和大小。1. 复制【形状 1】和【新闻快讯】两个图层，调整其位置，修改“新闻快讯”为“楼盘展示-汇成 1 期”。按照相同的方式，制作“楼盘展示-汇成 2 期”、“楼盘展示-汇成 3 期”和“楼盘 展示-汇成 4 期”。2. 打开随书光盘中的“素材

30、ch26房产汇成 1 期.jpg”、“素材ch26房产汇成 2 期.jpg”、“素材ch26房产汇成 3 期.jpg”、“素材ch26房产汇成 4 期.jpg”等 4 张图片，然后按【Ctrl+T】组 合键调整位置和大小。3. 在工具栏中单击【横排文字工具】 ，在“背景.psd”文档中输入楼盘展示的相关文字，字 体为“宋体”，大小为“10 点”，颜色为“C:92，M:88，Y:88，K:79”。1. 在工具栏中选择【横排文字工具】 ，在“背景.psd”文档中输入“拥有汇成，投资生活美 好前程！”文字，字体为“华文行楷”，大小为“18 点”，颜色为“C:72、M:0，Y:100，K:0”， 显示

31、效果为“仿斜体”。2. 选中“拥有汇成，投资生活美好前程！”文字信息，单击属性栏中的【变形文字】按钮 ， 打开【变形文字】对话框，在【样式】下拉列表中选择【旗帜】选项，参数设置如图所示， 设置完毕。单击【确定】按钮，即可将文字变形。3. 双击“拥有汇成，投资生活美好前程！”文字所在的图层，打开【图层样式】对话框，选择 【投影】选项，设置投影的相关参数如图所示，然后单击【确定】按钮，即可应用图层样式。4. 在工具栏中选中【横排文字工具】 ，在“背景.psd”文档中输入“汇成.上东”文字，字体 为“华文琥珀”，大小为“32.25 点”，颜色为“C:91，M:86，Y:87，K:77”。5. 双击“汇成.上东”文字所的在图层，打开【图层样式】对话框，选择【内阴影】、【外发光】 和【斜面和浮雕】等选项，相关参数如图所示。6. 单击【确定】按钮，即可应用图层样式7. 在工具栏中选择【横排文字工具