网页设计基础教程

任务一个人网站首页设计学习活动一接受工作任务,明确工作要求学习活动二工作准备学习活动三个人漫画网首页设计学习活动四个人音乐网、个人摄影网首页设计学习活动五个人网站首页设计工作总结、成果展示与经验交流返回学习活动一接受工作任务。明确工作要求一、学习准备１.学习设备:电脑、投影仪２.学习资料:参考书籍、互联网上的电子资源３.分成学习小组二、学习过程创建选区在Ｐｈｏｔｏｓｈｏｐ中利用标准选区创建工具、套索工具(图１.１－３)、智能选区创建工具可以根据不同的图像内容进行有选择的选区创建下一页返回学习活动一接受工作任务。明确工作要求１.套索工具套索工具一般用于创建不规则的自由选区。在图像窗口中沿着图像的边缘进行拖动即可创建选区。选择套索工具后。在图像中单击并开始拖动。当终点与起点重合后。释放鼠标。套索闭合形成选区效果。若得到的节点位置不准确。按Ｄｅｌｅｔｅ键可删除前一个节点。双击鼠标左键闭合选区。对选区边缘要求不高时。可以使用此工具。２.多边形套索工具多边形套索工具一般用于创建多边形选区。在图像中。沿需要选取的图像部分的边缘拖动。当终点与起点重合时。即可创建选区。单击鼠标左键定义开始位置。然后释放鼠标左键并围绕需要选择的区域的边缘移动鼠标。上一页下一页返回学习活动一接受工作任务。明确工作要求选择“多边形套索工具”后。在图像中单击确定起点。然后沿着要选择的区域边缘移动鼠标。每到一个需要改变方向的位置都要单击。回到起点后。鼠标右下角出现一个小圆圈。单击鼠标左键。即可创建一个多边形选区。•制作具有直边的选区。•制作过程中只需要点击拐点处。•双击鼠标左键闭合选区。•适合将不规则直边对象从图像中选取出来。３.磁性套索工具磁性套索工具一般用于快速选择与背景对比强烈且边缘复杂的对象。可沿着对象的边缘创建选区。适用于选取边界分明的图像。如图１.１－４所示。上一页下一页返回学习活动一接受工作任务。明确工作要求【宽度】区域边缘的搜索范围。数值越小。选区越精确。【对比度】确定定位点时所依据的边缘反差度。数值越大。选区越精确。【频率】确定锚点的数量。数值越大。插入的锚点越多。③心的祝福(图１.１－５)。④春的气息(图１.１－６)。上一页下一页返回学习活动一接受工作任务。明确工作要求形状工具的使用在ＰｈｏｔｏｓｈｏｐＣＳ５中。用户还可以通过形状工具创建路径图形。形状工具一般可分为两类。一类是基本几何体图形的形状工具ꎻ另一类是图形形状较多样的自定义形状工具。对于创建的形状路径图形。也可以通过相应编辑操作改变其形状。在工具箱中选择“矩形”工具。用户可以很方便地绘制矩形形状的图形对象。通过单击该工具选项栏中“自定形状工具”按钮右侧的下拉箭头。可以打开“矩形选项”对话框。如所示。在工具箱中选择“圆角矩形”工具。用户可以快捷地绘制图１.１－７带有圆角的矩形图形。如图１.１－８所示。此工具的选项栏与“矩形”工具的选项栏大致相同。只是多了一个用于设置圆角参数属性的“半径”文本框。用户可以在该文本框中输入所需矩形的圆角半径大小。选项栏中其他参数的设置方法与“矩形”工具的选项栏相同。上一页下一页返回学习活动一接受工作任务。明确工作要求形状工具组中的“椭圆”工具用于创建椭圆形状的图形对象。如图１.１－９所示。它的选项栏及创建图形的操作方法与“矩形”工具的基本相同。只是在其选项栏的“椭圆选项”对话框中少了“方形”单选按钮和“对齐像素”复选框。而多了“不受限制”和“圆(绘制直径或半径)”单选按钮。选择“圆(绘制直径或半径)”单选按钮。用户能够以直径或半径方式创建圆形图形。选择工具箱中的“多边形”工具(图１.１－１０)。用户可以很方便地创建多边形与星形图形。它的选项栏及创建图形的操作方法与“矩形”工具基本相同。“自定形状”工具(图１.１－１１)的图形创建方法及参数选项设置的方法。与“矩形”工具基本相同。用户可以在“自定形状”工具的选项栏、“自定形状选项”对话框以及“形状”下拉列表框中设置所需参数选项。上一页下一页返回学习活动一接受工作任务。明确工作要求⑤幸运大转盘(图１.１－１２)。⑥镖靶(图１.１－１３)。渐变工具使用１.渐变工具选项。如图１.１－１４所示。各选项意义分别为:ａ—线性渐变ｂ—径向渐变ｃ—角度渐变ｄ—对称渐变ｅ—菱形渐变ｆ—渐变样本。点击打开渐变编辑器ｇ—点击打开渐变拾色器上一页下一页返回学习活动一接受工作任务。明确工作要求２.渐变编辑器(图１.１－１５)。⑦商标(图１.１－１６)。⑧台历(图１.１－１７)。钢笔工具的使用首先简要介绍一下钢笔工具和路径的概念:１.钢笔工具属于矢量绘图工具。其优点是可以勾画平滑的曲线。在缩放或者变形之后仍能保持平滑效果。２.钢笔工具画出来的矢量图形称为路径。路径是矢量的路径。允许是不封闭的开放状。如果把起点与终点重合绘制。就可以得到封闭的路径。现在来绘制一个简单的路径:在工具栏选择钢笔工具(快捷键Ｐ)。如图１.１－１８所示。上一页下一页返回学习活动一接受工作任务。明确工作要求保持钢笔工具的选项。如图１.１－１９所示(在工具栏上方):选择第二种绘图方式(单纯路径)。并取消橡皮带功能。然后用钢笔在画面中单击。会看到在击打的点之间有线段相连。保持按住Ｓｈｉｆｔ键可以让所绘制的点与上一个点保持４５°整数倍夹角(比如０°、９０°)。这样可以绘制水平或者垂直的线段(图中从第５个点开始按下了Ｓｈｉｆｔ键)。从上面的练习中可以得出两个规律:①要绘制线段。只要定义了各个点的位置。软件就会在点间连线成形②控制线段形态(方向、距离)的。并不是线段本身。而是线段中的各个点的位置。上一页下一页返回学习活动一接受工作任务。明确工作要求记住两个术语:①所绘制的那些点称为“锚点”(ａｎｃｈｏｒ)。②锚点间的线段称为“片断”(ｓｅｇｍｅｎｔ)。绘制的那些锚点。由于它们之间的线段都是直线。所以又称为直线形锚点。现在来绘制曲线形锚点。在起点按下鼠标之后不要松手。向上拖动出一条方向线后放手。然后在第二个锚点拖动出一条向下的方向线。依此类推。画出路径。我们看到。在绘制出第二个及之后的锚点并拖动方向线时。曲线的形态也随之改变。究竟曲线是怎样生成的。我们又该如何来控制曲线的形态呢?除了具有直线的方向和距离外。曲线多了一个弯曲度的形态。只要改变锚点位置就可以改变方向和距离。但是弯曲度该如何控制呢?如图１.１－２０所示。在工具栏选择“直接选择工具”。上一页下一页返回学习活动一接受工作任务。明确工作要求⑨艺术相册副本(图１.１－３２)。ＰＳ图层使用方法详解在使用Ｐｈｏｔｏｓｈｏｐ时几乎都会使用到图层功能。但是你对图层的概念和所有应用功能都全面了解了吗?相信图层功能还有许多地方被你忽视掉了。今天我们就来全面透析Ｐｈｏｔｏｓｈｏｐ图层功能。帮助大家详细了解图层这个Ｐｈｏｔｏｓｈｏｐ中最基本而又重要的工具。•图层概念在不影响整个图像中大部分元素的情况下。可以使用图层处理其中一个元素。我们可以把图层想象成一张张叠起来的透明胶片。每张透明胶片上都有不同的画面。改变图层的顺序和属性可以改变图像的最后效果。通过对图层操作。使用它的特殊功能可以创建很多复杂的图像效果。上一页下一页返回学习活动一接受工作任务。明确工作要求•图层面板图层面板上显示了图像中的所有图层、图层组和图层效果。可以使用图层面板上的各种功能来完成一些图像编辑任务。例如创建、隐藏、复制和删除图层等。还可以使用图层模式改变图层上图像的效果。如添加阴影、外发光、浮雕等。另外。可以通过对图层的光线、色相、透明度等参数的修改来制作不同的效果。图层面板如图１.１－３３所示。•图层类型背景图层:每次新建一个Ｐｈｏｔｏｓｈｏｐ文件时。图层会自动建立一个背景图层(使用白色背景或彩色背景创建新图像时)。这个图层是被锁定的。位于图层的最底层。我们是无法改变背景图层的排列顺序的。同时也不能修改它的不透明度和混合模式。如果按照透明背景方式建立新文件。图像就没有背景图层。最下面的图层不会受到功能上的限制(图１.１－３４)。上一页下一页返回学习活动一接受工作任务。明确工作要求普通图层:如果不愿意使用Ｐｈｏｔｏｓｈｏｐ强加的受限制背景图层。也可以将它转换成普通图层。让它不再受到限制。具体方法:在图层调板中双击背景图层。打开新图层对话框(图１.１－３５)。然后根据需要设置图层选项。点击“确定”按钮。则图层面板上的背景图层就会转换成普通图层。⑩电影胶片(图１.１－３６)。花卉邮票(图１.１－３７)。路径面板的构成创建路径后。可以通过“路径”面板对路径进行填充、描边、创建选区等操作。路径面板中的主要构成元素如图１.１－３８所示:编号１~６分别为“用前景色填充路径”按钮、“用画笔描边路径”按钮、“将路径作为选区载入”按钮、“从选区生成工作路径”按钮、“新建路径”按钮、“删除当前路径”按钮。上一页下一页返回学习活动一接受工作任务。明确工作要求三、评价反馈填写学习活动考核评价表。学习活动名称:

接受工作任务、明确工作要求上一页下一页返回学习活动一接受工作任务。明确工作要求上一页返回学习活动二工作准备一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程１.每个小组到网上查阅个人漫画网。并展示。２.教师通过一个例子讲解个人漫画网草图的规划。(１)网站颜色搭配。橙色是欢快活泼的色彩。是暖色中最温暖的色彩。它易使人想到金色的秋天、丰硕的果实。是一种富足、快乐而幸福的颜色。橙色与浅绿色、浅蓝色相配。可以构成最欢快的色彩。蓝色的和平。为画面造出和平宁静的气氛。营造唯美的海水风格。下一页返回学习活动二工作准备蓝色和白色象征大海和白沙的天然搭配。蓝色。清爽且悠远。在忙碌的都市里也是一种十足的个性。用蓝色调布置空间。能给繁华的页面制造一些宁静的氛围。(２)网站制作特点。卡通之家网站的首页采用了圆形的图形来组织页面。Ｆｌａｓｈ的效果在首页设计也有体现。当鼠标滑到图片时。显示网站的栏目链接。效果如图１.２－１所示。网站还有一个特点是。多以水晶形式出现栏目。如在栏目上放置作者设计的漫画。效果如图１.２－２所示。(３)网站布局。网站布局如图１.２－３所示。上一页下一页返回学习活动二工作准备(４)素材准备。重要的素材如图１.２－４所示。三、评价反馈填写学习活动考核评价表。学习活动名称:

网页设计———工作准备上一页下一页返回学习活动二工作准备上一页返回学习活动三个人漫画网首页设计一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程１.教师演示个人漫画网首页设计制作过程。操作步骤如下。(１)Ａ区:背景区设计。背景色要为衬托主题而设计。它的主要功能是辅助色调来营造网页的氛围。与主色调形成对比。下面将设计个人漫画网的背景。下一页返回学习活动三个人漫画网首页设计①在ＰｈｏｔｏｓｈｏｐＣＳ５中新建一个分辨率为１０２像素/英寸的文档。命名为“个人漫画网”、填充背景色为＃ｆｆｃｃ００。如图１.３－１所示。新建一个图层。用“渐变工具”将填充模式设置为“从前景到透明”。前景色为＃ｃ４２ｂ００。如图１.３－２所示。新建一个图层。“用渐变工具”将填充模式设置为“从前景到透明”。前景色设置为＃ｄ１ｄ１ｄ１。然后执行“滤镜”→“纹理”→“龟裂纹”命令。再设置其图层的混合模式为“叠加”。相关设置如图１.３－３所示。新建一个图层。用“矩形选框工具”建立一个图形选区。填充白色上一页下一页返回学习活动三个人漫画网首页设计②新建一个图层。用“渐变工具”将填充模式设置为“从前景色到透明”。设置前景色为＃２７８９ｂｅ、图层透明度为４０％。如图１.３－４所示。③新建一个图层。用“钢笔工具”勾出两个月牙。如图１.３－４所示。④完成的效果如图１.３－５所示。Ｌｏｇｏ是网站的标志和门户。是网站形象的重要体现。也是网站的名片。而对于一个追求精美的网站来说。Ｌｏｇｏ更是它的灵魂所在。即所谓的“点睛”之处。①用设计背景中的中间部分设计的方法来设计Ｌｏｇｏ的背景。如图１.３－６所示。上一页下一页返回学习活动三个人漫画网首页设计②为Ｌｏｇｏ添加小人形象。以充分表达创作想法。将“素材８.ｐｓｄ”复制到“Ｌｏｇｏ.ｐｓｄ”中。如图１.３－６中的４所示③为突出网站的形象和添加其亮点。将文字“卡通”设置成红色。④将“素材９.ｐｓｄ”复制到“Ｌｏｇｏ.ｐｓｄ”中。最后为画面添加文字“最受欢迎的漫画网站”。并使用网页中常用的字体:宋体、１２点。消除锯齿的方法为“无”。文字“最喜欢的”字体为:黑体、１８点。消除锯齿方法为“浑体”。“卡通之家”的字体为:方正综艺简体、２８点。消除锯齿的方法为“浑体”。文字部分中除“卡通”为＃ｃｃ００００。其他颜色为黑色。如图１.３－７所示。上一页下一页返回学习活动三个人漫画网首页设计(３)Ｆ区:网站导航区设计。一般网站都从网站的背景、Ｌｏｇｏ开始设计。然后确定网站的主色调和主题。最后从导航开始设计。在设计网站导航条的时候。除了要兼顾在设计网站Ｌｏｇｏ、网站Ｂａｎｎｅｒ需注意的几点原则外。还要根据网站导航的特点。使其在美观的基础上更加实用。这里设计的个人漫画网。是以与别人交流为目的的。主要是以Ｆｌａｓｈ为表现形式。在设计风格上很活泼。导航条并不仅是直线形的。这里以圆形为创作点。如图１.３－８所示。①导航区背景设计。如图１.３－９所示。用“矩形选框工具”建立一个尺寸为１０４×１０４像素的选区。填充为白色。添加图层样式“投影”和“外发光”。如图１.３－９所示。上一页下一页返回学习活动三个人漫画网首页设计②新建一个图层。用“钢笔工具”勾出一个月牙之后。将“素材１０.ｐｓｄ”中的⑧复制到“个人漫画网”中。放置的位置和大小如图１.３－１０所示。③主要做的是Ｆｌａｓｈ的动态效果。因此在设计网页的时候。要将设计想法用图形事先勾勒出来。下面将制作当鼠标滑过如图１.３－１１所示的图片时。显示的图片效果。④用“椭圆选框工具”绘制如图１.３－１１所示的选区。并填充白色。设置其图层样式为“描边”和“投影”。⑤为画面添加导航文字“首页”。文字设置:方正综艺简体、粗体、３０点。消除锯齿的方法为“犀利”。为文字“首页”添加图层样式。其设置如图１.３－１２所示。导航菜单“首页”即完成了。上一页下一页返回学习活动三个人漫画网首页设计用步骤①、②的方法。再做４个圆点和小人头。如图１.３－１３所示。⑥因为导航要做出Ｆｌａｓｈ效果。因此。导航文字需做成单独的图片。以便在后期制作Ｆｌａｓｈ时使用。完成效果如图１.３－１４所示。(４)Ｃ区:欢迎区设计。这个网站欢迎的设计使用一个小人“说话”的动画。提高了网页的活泼性。①用“圆角矩形工具”绘制如图１.３－１５所示的圆角矩形。并设置“投影”效果和“外发光”效果。和“导航区背景设计”一样。勾出月牙、增加图片的立体感。完成效果如图１.３－１５所示。上一页下一页返回学习活动三个人漫画网首页设计将素材“１３.ｐｓｄ”和素材“１４.ｐｓｄ”复制到“个人漫画网.ｐｓｄ”中。如图１.３－１６所示。②将素材“１１.ｐｓｄ”和素材“１２ｐｓｄ”复制到“个人漫画网.ｐｓｄ”中。并添加欢迎词的具体文字。文字是常用的网页字体:宋体、１２点、＃３３３３３。消除锯齿的方法为“无”。完成的效果如图１.３－１７所示。(５)Ｄ区:网站交流区。网站交流区是作者和好友互相交流的模块。以方便与大家联系。将交流区域用“小电视”示出。将素材“１５.ｐｓｄ”和素材“１６.ｐｓｄ”复制到“个人漫画网.ｐｓｄ”中。并添加文字。“漫画交流”设置:黑体、粗体、１８点、＃ｃｃ００００。消除锯齿的方法为“犀利”。并按图１.３－１８和图１.３－１９所示设置其图层样式。上一页下一页返回学习活动三个人漫画网首页设计(６)Ｅ区:最新漫画区设计。中间内容区域是“最新漫画”区。这里主要用来展示作者的作品、实力和擅长的方向。因此在整个网页中所占区域是最大的。在进行这个区域的设计时。将主要内容以故事形式展现。①用“圆角矩形工具”勾出如图１.３－２０所示的圆角矩形。填充颜色为渐变色。前景色为＃ｆ３ｆ３ｆ３。背景色为＃ｆｆｆｆｆ。并设置其图层样式。图层样式设置如图１.３－２１所示。②将“素材１０.ｐｓｄ”、“素材１８.ｐｓｄ”、“素材１９.ｐｓｄ”和“素材１０.ｐｓｄ”中的③。复制到“个人漫画网.ｐｓｄ”中。如图１.３－２２所示。上一页下一页返回学习活动三个人漫画网首页设计③为画面添加文字。文字“最新漫画”的设置和文字一样。其中蓝色的文字设置:颜色为＃２ｃ５３ａｌ。字形为加粗。其他文字都是网页中最常用字体:宋体、１２点、＃３３３３３。行距为１８点。完成效果如图１.３－２３所示。(７)Ｅ区:版权区设计。版权是用来维护权益的。因此版权的声明是必不可少的。一般网站都将其放在页面的最下面。版权区和主要内容分开。因此这里为“个人”加了两条颜色不同的线条来区分。友情链接在网页中也是很重要的。是网站和其他网站互相联系的纽带网络之所以成为“互联网”。就体现在“互联”上。“个人漫”也将体现友情链接。如图１.３－２４所示。上一页下一页返回学习活动三个人漫画网首页设计２.教师展示结果。经过上述操作。“个人漫画网”就设计完成了。效果如图１.３－２５所示。３.学生根据老师的讲解。制作出效果图。三、评价反馈填写学习活动考核评价表。学习活动名称:

网页设计———个人漫画网首页设上一页下一页返回学习活动三个人漫画网首页设计上一页下一页返回学习活动三个人漫画网首页设计上一页返回学习活动四个人音乐网、个人摄影网首页设计一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程１.利用上节课老师讲解的知识。在互联网上欣赏个人音乐网。制作一个个人音乐网首页效果图。要求:①网页风格符合个人网站类的特点、色调。形象应体现网站的性质。②有统一的色彩风格和主色调。能体现自身的特点。下一页返回学习活动四个人音乐网、个人摄影网首页设计③页面功能区的布局合理、美观、相对固定。④页面整齐。不出现文字错行的情况。④页面整齐。不出现文字错行的情况。２.利用上节课老师讲解的知识。在互联网上欣赏个人摄影网。制作一个个人摄影网首页设计首页效果图。要求:①网页风格符合个人网站类的特点、色调。形象应体现网站的性质。②有统一的色彩风格和主色调。能体现自身的特点。③页面功能区的布局合理、美观、相对固定。④页面整齐。不出现文字错行的情况。３.对于个人音乐网页首页设计的制作过程。如果有改进方案或思路。请写出你的想法。上一页下一页返回学习活动四个人音乐网、个人摄影网首页设计４.对于个人摄影网页首页设计的制作过程。如果有改进方案或思路。请写出你的想法。三、评价反馈填写学习活动考核评价表。学习活动名称:个人网首页设计上一页下一页返回学习活动四个人音乐网、个人摄影网首页设计上一页返回学习活动五个人网站首页设计工作总结、成果展示与经验交流一、学习准备１.学习资料:互联网资源、完成的成果、移动黑板、投影仪、彩色卡片。２.分成学习小组。返回图１.１－３返回图１.１－４返回图１.１－５&图１.１－６最终效果图最终效果图图１.１－５图１.１－６返回图１.１－７返回图１.１－８返回图１.１－９返回图１.１－１０返回图１.１－１１返回图１.１－１２最终效果图返回图１.１－１３最终效果图返回图１.１－１４返回图１.１－１５返回图１.１－１６返回图１.１－１７返回图１.１－１８返回图１.１－１９返回图１.１－２０返回图１.１－３２返回图１.１－３３返回图１.１－３４返回图１.１－３５返回图１.１－３６返回图１.１－３７返回图１.１－３８返回图１.２－１返回图１.２－２返回图１.２－３返回图１.２－４返回图１.３－１填充背景颜色返回图１.３－２填充渐变返回图１.３－３图层的设置返回图１.３－４返回图１.３－５返回图１.３－６返回图１.３－７返回图１.３－８返回图１.３－９返回图１.３－１０返回图１.３－１１返回图１.３－１２返回图１.３－１３返回图１.３－１４返回图１.３－１５返回图１.３－１６返回图１.３－１７返回图１.３－１８&图１.３－１９返回图１.３－２０&图１.３－２１返回图１.３－２２返回图１.３－２３返回图１.３－２４返回图１.３－２５返回任务二企业网站首页设计学习活动一接受工作任务,明确工作要求学习活动二工作准备学习活动三汽车网首页设计学习活动四家居网站、某公司网站首页设计学习活动五企业网站首页设计工作总结、成果展示与经验交流下一页返回学习活动一接受工作任务，明确工作要求一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源、视频教学。３.分成学习小组。二、学习过程１.上网查询或查找参考资料、书籍等，完成下面的问题。①企业网有什么特点?②设计企业网时应该注意什么问题?③如何使用Ｐｈｏｔｏｓｈｏｐ的图层?④什么是网站Ｌｏｇｏ?它有什么作用?下一页返回学习活动一接受工作任务，明确工作要求⑤Ｌｏｇｏ设计的方法有哪些?⑥在网上查找５个以上Ｌｏｇｏ，并说说它们的含义。２.根据老师的讲解完成下列Ｌｏｇｏ的制作。３.参考素材文件夹中的“爱包网Ｌｏｇｏ制作１”、“爱包网Ｌｏｇｏ制作２”、“爱包网Ｌｏｇｏ制作３”视频，并制作出该效果图。４.参考素材文件夹中的“酷透互动娱乐网Ｌｏｇｏ制作”视频，并制作出该效果图。５.每个小组成员到互联网欣赏企业网站的主页，并画出该网站的结构。上一页下一页返回学习活动一接受工作任务，明确工作要求三、评价反馈填写学习活动考核评价表。学习活动名称:

接受工作任务、明确工作要求

上一页下一页返回学习活动一接受工作任务，明确工作要求上一页返回学习活动二工作准备一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程１.每个小组到网上查阅企业网站并展示。为该企业网写出需求分析，其包含以下内容。①网站的功能模块分析:②网站结构分析:③网站拓扑图:④收集相关的素材:下一页返回学习活动二工作准备２.教师通过一个例子讲解汽车网首页草图的规划。①网站色彩搭配。日落的景象和日出的景象同样壮观、绮丽，而且神秘、迷人。如果有机会观日落，会发现它使你神往:太阳静静地躺在西方地平线上，变得如此之大，颜色是那样深黄、橘红ꎻ它缓缓坠落，接近地平线时竟缩身变扁。若天空有云，你会看见灿烂的晚霞ꎻ全天无云，不要忘记回头，你会发现背后的天空中现出神秘的蓝灰色暗弧，暗弧外面还镶有明显的亮弧。落日的余晖下，深黄和银红的天空中，灿烂的晚霞辉映着，这时候，和爱人开着汽车在湖边休憩，相信这样美好、幸福的情景是每个人都向往的。上一页下一页返回学习活动二工作准备Ｌｕｘｕｒｙ汽车服务网站，以金黄色为主色调，搭配深黄和橘红，同时配以米白色，营造一种落日下的黄昏，温暖幸福的气氛。白色是点睛之笔，使网页更加明快。②网站制作特点。Ｌｕｘｕｒｙ汽车服务网站最大的特点是营造夕阳下汽车漂亮的身影，给人一种购买的欲望，如图２.２－１

所示。③网站布局。网站布局如图２.２－２所示，其中:Ａ区为Ｂａｎｎｅｒ，主要用来放置与汽车保养方面相关的广告。Ｂ区为网站二级导航，主要包括方便用户使用的各类信息咨询。Ｃ区为网站主导航，包括首页、汽车服务、社区、汽车租赁、加盟连锁、帮助。上一页下一页返回学习活动二工作准备Ｄ区为会员登录和服务中心区。Ｅ区为最新服务区。Ｆ区为社区推荐文章区。Ｇ区为友情链接和版权区。④素材准备。所需要的素材如图２.２－３所示。上一页下一页返回学习活动二工作准备三、评价反馈填写学习活动考核评价表。学习活动名称:

网页设计———工作准备

上一页下一页返回学习活动二工作准备上一页返回学习活动三汽车网首页设计一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程１.老师在课堂演示汽车网首页设计制作过程。操作步骤如下:(１)Ａ区:Ｂａｎｎｅｒ设计。前面已经讲过，此网站Ｂａｎｎｅｒ主要是想营造在落日的余晖下，深黄和银红的天空中，灿烂的晚霞辉映夕阳下的汽车的美好景象。下一页返回学习活动三汽车网首页设计①在ＰｈｏｔｏｓｈｏｐＣＳ５中新建一个“宽×高”为７１１０像素×７００像素，分辨率为７２像素/英寸的文档，填充背景色为＃ｆｅｆ０ｃ９。命名为“汽车.ｐｓｄ”，将“素材３２.ｐｓｄ”和“素材３３.ｐｓｄ”复制到“汽车.ｐｓｄ”中，如图２.３－１所示。②为画面加上一些装饰，使之看起来像路，如图２.３－２所示③用“钢笔工具”勾出如图２.３－２所示的①、②、③、④４个区域。①的颜色为＃００００００，②、③、④的颜色分别为＃７７３ｄ２２、＃ｄｅ８９４７、＃ｆ１ｄ７９８。④为画面添加网站的主题———汽车，并为汽车添加投影。上一页下一页返回学习活动三汽车网首页设计⑤将“素材２１１.ｐｓｄ”复制到“汽车.ｐｓｄ”中，将复制后的副本载入选区，填充为黑色，设置其不透明度为４０％。将“素材３４.ｐｓｄ”复制到“汽车.ｐｓｄ”中，并将其不透明度设置为４０％，完成的效果如图２.３－３所示。⑥为Ｂａｎｎｅｒ添加文字。为了突出“欢迎光临”４个字，设置其图层效果为投影，如图２.３－４所示。(２)Ｂ区:网站二级导航设计。新建两个图层，下面一层填充颜色为＃ａ０７ｂ５ｂ，上面一层填充颜色为＃３ｄ４２５４，并为其添加导航“首页｜汽车服务｜社区｜汽车租赁｜加盟连锁｜帮助”，导航文字设置为网页常用字体:１２点、白色，消除锯齿的方法为“无”，完成的效果如图２.３－５所示。上一页下一页返回学习活动三汽车网首页设计(３)Ｃ区:网站主导航设计。网站二级导航放在上面之后，显得右侧偏重，因此要在网页的左上角添加主导航。①设置主导航的背景。在页面左上角用“钢笔工具”勾出如图２.３－６所示的形状，并将其转换为选区，填充为黑色，设置其不透明度为３１１％。②用“钢笔工具”勾出如图２.３－７所示的形状，并填充颜色为＃ｆ５ｅ５ｂｄ。③为画面添加导航文字，并在每个栏目之间添加颜色为＃９ｄ９２７９的１个像素的线，如图２.３－８所示。上一页下一页返回学习活动三汽车网首页设计④为画面添加Ｌｏｇｏ，将“素材.３５ｐｓｄ”复制到“汽车.ｐｓｄ”中，完成的效果如图２.３－９所示。(４)Ｄ区:会员登录区设计。Ｌｕｘｕｒｙ汽车服务网站面向的大部分客户是经常给汽车做保养的人，当然这些人也是汽车俱乐部的成员，因此，会员登录是少不了的。用“矩形选框工具”绘制如图２.３－１０所示的选区，描边１个像素，颜色为＃８ｅ４ｂ１ａ，并为画面添加文字和图标。为了增加登录框的变化性，登录框设置为如图２.３－１０所示的样子。(５)Ｅ区:最新服务区设计。为了和画面保持一致，该区在颜色选用上与样式设计上和“会员登录”保持一致。制作方法也和会员登录区一样，只是在中间部分添加一张能代表最新服务的图片，上一页下一页返回学习活动三汽车网首页设计在图片周围添加１个像素的＃１１ｅ４ｂ１颜色的线。完成的效果如图２.３－１１所示。(６)Ｆ区:社区推荐文章区设计。社区推荐文章区主要是放置近期推出的主要服务项目，以图片形式出现，首先设计“最新服务１”。①新建组“最新服务１”，新建一个１６９×１９５像素的矩形框，填充渐变颜色，设置和完成的效果分别如图２.３－１２和图２.３－１３

所示。②为画面添加文字和图片，将“素材３０.ｐｓｄ”复制到“汽车.ｐｓｄ”中，并为其描边(４像素)，颜色为＃ｅ７ａ８７ａ，如图２.３－１４

所示。上一页下一页返回学习活动三汽车网首页设计③为页面添加图标，将前景色设置为＃００００００，用“矩形选框工具”或者“铅笔工具”绘出如图２.３－１５所示的小图标。④复制“最新服务１”两次，调整其位置，如图２.３－１６所示。并为画面添加推荐文章，如图２.３－１７所示。(７)Ｇ区:版权区设计。最后，为画面添加版权区。版权区的内容为“常见问题｜友情链接｜网站地图｜版权声明｜招贤纳士｜联系我们”，完成的效果如图２.３－１８所示。２.任务结果展示。完成的效果如图２.３－１９所示。３.学生根据老师的讲解，制作出效果图。上一页下一页返回学习活动三汽车网首页设计三、评价反馈填写学习活动考核评价表。学习活动名称:

网页设计———汽车网首页设计

上一页下一页返回学习活动三汽车网首页设计上一页返回学习活动四家居网站、某公司网站首页设计一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程１.利用上节课老师讲解的知识，在互联网上欣赏家居网站，制作一个家居网站的首页效果图。要求:①网页风格符合个人网站类的特点、色调，形象应体现网站的性质。②有统一的色彩风格和主色调，能体现自身的特点。③页面功能区的布局合理、美观、相对固定。下一页返回学习活动四家居网站、某公司网站首页设计④页面整齐，不出现文字错行的情况。２.利用上节课老师讲解的知识，在互联网上欣赏企业网站，制作某企业网站首页设计首页效果图。要求:①网页风格符合个人网站类的特点、色调，形象应体现网站的性质。②有统一的色彩风格和主色调，能体现自身的特点。③页面功能区的布局合理、美观、相对固定。④页面整齐，不出现文字错行的情况。３.对于家居网站首页设计的制作过程，如果有改进方案或思路，请写出你的想法。４.对于某企业网站首页设计的制作过程，如果有改进方案或思路，请写出你的想法。上一页下一页返回学习活动四家居网站、某公司网站首页设计三、评价反馈填写学习活动考核评价表。学习活动名称:企业网首页设计上一页下一页返回学习活动四家居网站、某公司网站首页设计上一页返回学习活动五企业网站首页设计工作总结、成果展示与经验交流一、学习准备１.学习资料:互联网资源、完成的成果、移动黑板、投影仪、彩色卡片。２.分成学习小组。二、学习过程引导问题１.通过企业网站首页成果展示，结合互联网资源、工具书等资源对整个个人网站首页过程进行分析总结，找出企业网站制作过程中存在的问题并填写“企业网站首页设计总体评价表。用张贴版的方式每组派一位同学进行讲述，其他组点评，最后教师点评。下一页返回学习活动五企业网站首页设计工作总结、成果展示与经验交流２.在企业网站首页设计制作过程中，你学到了什么?３.如果下次接到相似的任务，在制作过程中应该注意哪些事项?４.每位同学写一份工作总结，不少于５００字。上一页返回图２.２－１返回图２.２－２返回图２.２－３所需的素材返回图２.３－１返回图２.３－２返回图２.３－３返回图２.３－４返回图２.３－５返回图２.３－６返回图２.３－７返回图２.３－８返回图２.３－９返回图２.３－１０返回图２.３－１１返回图２.３－１２返回图２.３－１３返回图２.３－１４返回图２.３－１５返回图２.３－１６返回图２.３－１７返回图２.３－１８返回图２.３－１９返回任务三电子商务网站首页设计学习活动一接受工作任务,明确工作要求学习活动二工作准备学习活动三农产品销售网首页设计学习活动四某数码产品销售网首页设计学习活动五电子商务网首页设计工作总结、成果展示与经验交流返回学习活动一接受工作任务，明确工作要求一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程引导问题１.电子商务网有什么特点?２.当所拍摄的数码相片不能满足客户视觉上的需求时，如何处理?３.根据老师的讲解完成以下图片的处理。①“色彩平衡”调色(图３.１－１、图３.１－２)。下一页返回学习活动一接受工作任务，明确工作要求②“镜头光晕”效果(图３.１－３~图３.１－５)。③“ＵＳＭ锐化”(图３.１－６)。④去水印(图３.１－８)。⑤修复瑕疵(图３.１－９)。⑥钢笔工具抠图(图３.１－１１)。⑦添加闪光效果(图３.１－１３)。⑧曲线调整图片对比度(图３.１－１６)。⑨照片滤镜(图３.１－１８)。上一页下一页返回学习活动一接受工作任务，明确工作要求三、评价反馈填写学习活动考核评价表。学习活动名称:

接受工作任务、明确工作要求

上一页下一页返回学习活动一接受工作任务，明确工作要求上一页下一页返回学习活动一接受工作任务，明确工作要求上一页返回学习活动二工作准备一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程１.每个小组到网上查阅电子商务网并展示，为该电子商务网写出需求分析，包含以下内容。①网站的功能模块分析。②网站结构分析。下一页返回学习活动二工作准备③网站拓扑图。④收集相关的素材。２.教师通过一个例子讲解农产品销售网草图的规划。“希望之光”网站是一个以农产品销售为主的电子商务网站，网站中有现实商场中常见的“最新促销活动”，有用户登录窗口，有专卖自家品牌商品的“品牌店”和卖各类不同品牌商品的“专卖店”，有客户服务的在线订货、配选须知，有本站主打商品，有搜索品牌的品牌店搜索，有最新销售的最新商品和销售业绩很好的推荐商品，现在正在热销的热卖商品，按季节分的季节商品，以及服务热线和版权声明等，还有和其他网站建立连接的友情链接等。上一页下一页返回学习活动二工作准备①网站色彩搭配。“希望之光”网站在配色上采用大众很容易接受的蓝色和绿色。蓝色是天空的颜色，象征宽广和包容，象征网站的容量和内涵丰富ꎻ绿色是植物的固有色，是最有生命力的颜色，用绿色做网站的辅助色，是借用了绿色环保的概念，现在，人们都崇尚绿色食品，这个网站的建设也秉承这种理念，人性化的绿色使人看着很舒服。红色水果作为点睛色出现，给人一种很想吃的欲望，可以达到销售的目的。“希望之光”网站的颜色搭配，是自然和人们心理感受融合的结果，足够传给人们一种网上销售农产品和水果副食的信息，达到颜色为转达信息服务的目的。上一页下一页返回学习活动二工作准备②网站制作特点。“希望之光”网站在布局上采用电子商务网站常用的上左右结构式，中间还有两分栏，如图３.２－１所示。此网站一个最大的特点是在图片效果的处理上采用了现在流行的元素———水晶来表现导航(图３.２－２)，这样的导航让人想起水果的透明和色泽，从而引起食欲，产生购买的欲望。③网站布局。网站布局如图３.２－３所示，其中:Ａ区为网站Ｌｏｇｏ、快速导航(包括“首页”、“加入收藏”、“登录”、“注册”和“购物车”链接)和Ｂａｎｎｅｒ区。Ｂ区为促销活动专区，展示近期最新推出的促销活动。Ｃ区为网站导航区。上一页下一页返回学习活动二工作准备Ｄ区为用户登录区。Ｅ区为商品搜索区，用于站内的模糊搜索。Ｆ区为品牌区，展示网站的著名品牌，这样可以提高网站名气。Ｇ区为客户服务区，主要展示网站订货相关服务。Ｈ区为主打商品区，实为网站广告位。Ｉ区为品牌搜索区，用来查询网站品牌。Ｊ区为最新商品区，展示近期上架的产品。Ｋ区为专卖店区，按照产品而设的店。Ｌ区为广告位区。Ｍ区为推荐商品区，展示网站推荐给用户的一些商品。Ｎ区为热卖商品区，展示最近购买最多的商品。上一页下一页返回学习活动二工作准备Ｏ区为季节商品区，主要是按照季节的不同来划分商品。Ｐ区为网站调查区，调查用户是如何知道该网站的。Ｑ区为版权和友情链接区。④素材准备。所需要的素材如图３.２－４所示。三、评价反馈填写学习活动考核评价表。学习活动名称:

网页设计———工作准备

上一页下一页返回学习活动二工作准备上一页返回学习活动三农产品销售网首页设计一、学习准备１.学习设备:电脑、投影仪。２.学习资料:参考书籍、互联网上的电子资源。３.分成学习小组。二、学习过程１.老师在课堂上演示农产品销售网的首页设计制作过程。操作步骤如下。(１)Ａ区:网站Ｌｏｇｏ、快速导航和Ｂａｎｎｅｒ区设计。“希望之光”网站要塑造的是一个以农产品为主的销售网站，以蓝色和绿色为主色调。下面先设计Ｈｅａｄ部分。下一页返回学习活动三农产品销售网首页设计①在ＰｈｏｔｏｓｈｏｐＣＳ５中新建一个“宽×高”为９００像素×１３００像素，分辨率为７２像素/英寸的文档，填充蓝色渐变色，如图３.３－１所示②用“钢笔工具”勾出如图３.３－２所示区域，填充渐变，相关设置如图３.３－２中“背景色”所示。③要体现晶莹剔透的诱人感觉，水果是首选，因此，将“素材９ｐｓｄ”复制到页面中，并用“圆角矩形工具”新建一图层，填充为白色，设置其不透明度为４４％，如图３.３－３所示。④为页面添加文字，文字的图层样式设置为“描边”和“外发光”，如图３.３－４所示。上一页下一页返回学习活动三农产品销售网首页设计⑤为画面添加Ｌｏｇｏ和快速导航，将“素材３６.ｐｓｄ”复制到页面的左上角ꎻ新建图层，在页面上边绘制一条６像素的横线，填充色为＃１ｆ７ｃａ８，再绘制１像素的横线，填充颜色为＃７ｂｅ５ｆｄꎻ再用“圆角矩形工具”设置其半径为１０，并设置其图层样式为“投影”和“内阴影”，如图３.３－５所示。(２)Ｂ区:促销活动专区设计。在水果图案的右侧添加“最新促销活动”的相关信息，这里主要作为网站中促销活动的版块，可以理解为广告位，如图３.３－６所示“{”形的图层样式为“投影”和“内投影”，相关设置如图３.３－７所示。上一页下一页返回学习活动三农产品销售网首页设计(３)Ｃ、Ｄ区:网站导航区和用户登录区设计。网站导航也是采用和网站主色调统一的色调，决定以绿色渐变为主，蓝色渐变为鼠标滑过时的颜色。①用“钢笔工具”勾出两个图层，下面的一层填充颜色为＃ｃ５ｃ５ｃ５，上面的一层填充颜色为＃ｆ６ｆ５ｆ６，完成效果如图３.３－８所示。②为导航添加立体效果，按图３.３－９所示设置。③为导航添加文字，导航的文字字号为１４点，欢迎词的字号为１２点，如图３.３－１０所示。(４)Ｅ区:商品搜索区设计。为页面添加搜索功能模块，将“素材３７.ｐｓｄ”和“素材３１１.ｐｓｄ”复制到页面中，新建图层，用“渐变工具”绘制圆形形状，并设置它的图层样式，如图３.３－１１所示。上一页下一页返回学习活动三农产品销售网首页设计(５)Ｆ区:品牌店区设计。用“圆角矩形工具”绘制一个圆角矩形，将这个形状栅格化，并填充颜色＃ｃ２ｅｃｆａ，并且描１个像素的边，描边颜色为＃６３ｃ３ｄ２。新建图层，填充“从前景到透明”的渐变，并将“素材５.ｐｓｄ”复制到页面中，渐变颜色设为白色，如图３.３－１２所示。(６)Ｇ区:客户服务区设计。为画面添加客户服务的相关快速链接时注意，用“圆角矩形工具”绘制灰色和白色底色，灰色的颜色值为＃ａｂａｂａｂ，并复制“素材１１.ｐｓｄ”，如图３.３－１３所示。上一页下一页返回学习活动三农产品销售网首页设计(７)Ｈ区:主打商品区设计。①主打商品区主要是用“圆角矩形工具”绘制圆角矩形来新建３个图层，最下面的浅绿色的颜色为＃ｄｅｆ４ｅｅ，中间图层为白色，上面图层颜色为＃ａ７ｅ３ｅｅ，完成效果如图３.３－１４所示。②复制“素材１２.ｐｓｄ”和“素材１３.ｐｓｄ”到页面中，并为页面添加文字，文字都设置为黑体，颜色分别为紫色(＃ｆ７３ｄ７ｅ)、灰色(＃４１１４１１)、蓝色(＃００６２７４)、绿色(＃００７６３０)和黄色(＃ｆ９ｆａ０ｆ)，完成效果如图３.３－１５所示。(８)Ｉ区:品牌搜索和服务热线区设计。①用“矩形圆角工具”绘制出圆角矩形，填充绿色渐变色，再自定义一个图案，新建一个图层，填充这个自定义的图案，设计其图层数字为“颜色加深”，如图３.３－１６所示。上一页下一页返回学习活动三农产品销售网首页设计②新建图层，用“圆角矩形工具”绘制圆角矩形，填充灰色渐变色，并将“素材１１１.ｐｓｄ”复制到画面中，输入文字“服务热线０８０－４２４－４３１０”，文字设置为１１１点、黑体，文字“服务热线”的颜色为＃６６６６６６，文字“０８０－４２４－４３１０”的颜色为＃ｄ４００６６，完成效果如图３.３－１７所示(９)Ｊ区和Ｋ区:最新商品和专卖店设计。最新商品区放置的是近期最新推出的商品，这里选择新商品中有代表性的商品。右侧的专卖店区放置一些在本店中开设的小店中的商品，完成的效果图如图３.３－１８所示。上一页下一页返回学习活动三农产品销售网首页设计这里主要是用“圆角矩形工具”来设置圆角矩形，然后进行颜色填充:最新商品区的颜色为＃１３７ｆ００ꎻ右侧深一点的蓝色为＃６３ｄ０ｆ０，浅一点的蓝色为＃ｃ１ｅ５ｆ９，字体是常用的网页字体，灰色字的颜色为＃３ｄ３ｄ３ｄ，红色字的体颜色为＃ｆｆ００００。在图３.３－１９中，左侧的滚动条中的三角形符号后的背景图层样式设置为“描边”和“渐变叠加”。(１０)Ｌ区:广告位区设计。广告位的设计如下。①为了和整个网站的风格色调保持一致，要将广告位的背景色设置为蓝色和绿色，具体设置如图３.３－２０所示。上一页下一页返回学习活动三农产品销售网首页设计②为了增加画面的丰满度，在该区中增加一些灰线(如图３.３－２１所示的图案)，然后将“素材１１.ｐｓｄ”和“素材９.ｐｓｄ”复制到画面中，再输入文字，文字的颜色有黑色、红色(＃ｆｆｄｅ００)、绿色(＃７２ｆｆ３ａ)，完成的效果如图３.３－２１所示。(１１)Ｍ区:推荐商品区设计。推荐商品区主要放置一些网站中希望推荐给用户的商品，体现商品的名称和价格，如图３.３－２２所示。①商品图片背景的主要制作方法:用“矩形选框工具”创建矩形选区填充颜色为白色，然后在没有取消选区的情况下，新建一个图层，填充颜色为＃６６６６６６，执行“选择”→“修改”→“扩展”命令，弹出“扩展选区”对话框，将“扩展量”选项设置为５，如图３.３－２３所示。然后选择“选择”→“反向”命令将画面反向选择，设置其羽化为５，按Ｄｅｌｅｔｅ键两次，完成投影阴影效果。上一页下一页返回学习活动三农产品销售网首页设计②完成投影阴影效果之后，在白色层的上层，新建一个图层，设置其颜色为＃ｅｅｅｅｅｆ。完成这些之后，将这３个图层合并，选取下面的部分，如图３.３－２４所示，按两次Ｄｅｌｅｔｅ键，完成商品背景的设计。文字“推荐商品”的颜色设为＃０８０ａａ。(１２)Ｎ区:热卖商品区设计。①热卖商品区主要放置网站中卖出去最多的商品，标题“热卖商品”的设计和前面的标题“最新商品”和“推进商品”一样，在文字前面加上小图标，丹药在颜色上加以区分，标题“热卖商品”的颜色为＃ＦＦ７２００。注意两行商品用虚线隔开，商品图片可以从素材文件夹中找，完成的效果如图３.３－２５所示。②对于文字前的图标设计，用“椭圆选框工具”创建正圆形选区，并设置其图层样式为“渐变叠加”，其设置效果如图３.３－２６所示。

上一页下一页返回学习活动三农产品销售网首页设计(１３)Ｏ区:季节商品区设计。在季节商品区中，将商品按照春、夏、秋、冬分为４类，该区的设计和推荐商品、热卖商品及最新商品３个区的一样。该区标题文字前面的图标颜色设为＃７５７４００，商品图片可以从素材文件夹中找，完成的效果如图３.３－２７所示。(１４)Ｐ区:网站调查区设计。网站为了提高自己网站的质量，设计了调查区，搜集广