《网站首页制作》PPT课件

*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,*,*,网站首页制作,商务网页设计,子任务,1,：确定首页风格、色调及布局,子任务,2,：设计首页页头区,子任务,3,：设计首页主内容区,子任务,4,：设计首页页尾区,子任务,5:,生成首页效果图,商务网页设计 项目二,任务,1,：首页设计,商务网页设计,1,、观察色调及布局,商务网页设计 项目二,2,、首页的策划分析,3,、首页设计的最终效果图,子任务,1,：确定首页风格、色调及布局,要点,商务网页设计,商务网页设计 项目二,子任务,1,：确定首页风格、色调及布局,风格,色调,布局,简洁,大气,精细,实用,蓝色,灰色,红色,白色,商务网页设计,商务网页设计 项目二,子任务,1,：确定首页风格、色调及布局,商务网页设计,商务网页设计 项目二,制作标志区和导航区,（,1,）,从【开始】【程序】中打开,Photoshop,软件新建文档（快捷键：Ctrl+N），设置相应属,。,（提示：如果设计中画布的大小不合适，可以从菜单命令【图像】【画布大小】进行调节。）,（,2,）保存文件（快捷键：,Ctrl+S,），这里保存到文件夹“商务网页设计与制作,/,源文件”中。,（提示,：一般在网站项目开发时需要将文件夹分类建好，源文件单独放在一起，方便以后查找编辑。例如这里存放源文件的文件夹“商务网页设计与制作”。）,子任务,2,：设计首页页头区,商务网页设计,商务网页设计 项目二,（,3,）,在【图层】面板中新建组，双击默认组名重命名为“,top,”；,（提示：双击组名称，可在文字上双击，也可在文字旁边双击，这时会弹出图层组属性窗口，可选择组的颜色，以便区别于其他的组。）,（,4,）在【图层】面板中新建组，双击默认组名重命名为“导航栏”；,（,5,）在【图层】面板，新建图层，双击默认图层名重命名为“导航栏背景”；,4,选择工具栏中的【矩形选框工具】，绘制,1280*100px,的选区。,制作标志区和导航区,子任务,2,：设计首页页头区,商务网页设计,商务网页设计 项目二,（,6,）改变前景色为,#ebebeb,。,（提示：“,#,”后为十六进制的颜色值，每两位分别代表“,R,”“,G,”“,B,”的值。）,（,7,）单击【文件】按钮，导入,logo,文件，右击图层，选择复制该图层，在弹出的“复制图层”窗口中选择需要复制到的目标文档为“,index,”文件。,（,8,）选中,logo,图层，按“,CTRL+T,”键调整,logo,大小；打开标尺（快捷建：,Ctrl+R,），按住鼠标左键，从标尺上拖出参考线。,制作标志区和导航区,子任务,2,：设计首页页头区,商务网页设计,商务网页设计 项目二,（,9,）制作导航，在工具栏中选择【文字工具】，输入文字“首页 公司简介 产品展示 行业动态 售后服务 分销合作”然后确认。,（,10,）在“窗口”中打开“字符”面板，在字符面板中更改文字属性（大小,12PX,、字体：宋体、颜色：黑色）,（,11,）打开本书配套资源“项目资料库,/,素材”中的文件,1.jpg,（,Ctrl+O,）,使用工具栏中【移动工具】或者方向键移动红色条纹，使其紧贴左边缘和水平线。,制作标志区和导航区,子任务,2,：设计首页页头区,商务网页设计,商务网页设计 项目二,（,12,）制作导航，在工具栏中选择【文字工具】，输入文字“首页 公司简介 产品展示 行业动态 售后服务 分销合作”然后确认。,（,13,）在“窗口”中打开“字符”面板，在字符面板中更改文字属性（大小,12PX,、字体：宋体、颜色：黑色。,（,14,）打开本书配套资源“项目资料库,/,素材”中的文件,1.jpg,（,Ctrl+O,）,使用工具栏中【移动工具】或者方向键移动红色条纹，使其紧贴左边缘和水平线。,制作标志区和导航区,子任务,2,：设计首页页头区,商务网页设计,商务网页设计 项目二,导航区最终效果图,子任务,2,：设计首页页头区,商务网页设计,商务网页设计 项目二,(15),在【图层】面板中新建组，双击默认组名，重命名为“,banner,”。,(16),在【图层】面板，新建图层，双击默认图层名重命名为“,banner,背景”选择工具栏中的【矩形选框工具】，绘制,1280*185px,的选区。,(17),在【图层】面板中，【添加图层样式】，选择渐变叠加，渐变角度为,0,度，设置渐变颜色为,#3271F0,到,#76A3FF,。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,18,）单击【文件】按钮打开素材中图“,pbdn.jpg,”，在工具栏中选择【磁性套索工具】,设置羽化值,0.5px,。,（,19,）按快捷键,Ctrl+M,打开,“,曲线”面板，调节界面。,（,20,）,在工具栏中选择【文字工具】选择“横排文字工具”建立文字图层，在【窗口】中打开【字符】面板设置字体为宋体，字号为,16px,并输入文字。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,21,）创建文字图层，输入文字（开启劲爆“约惠”模式），在【字符】面板中调节“约惠”字体大小为,60px,，并设置颜色为,#FAFD01,。“其他字体”为,36px,并设置颜色为,#FFFFFF,。,（,22,）在工具栏中选择【形状工具】中的矩形工具，绘制矩形并为其填充颜色。,（,23,）选中形状图层，单击【图层】面板中的【添加图层蒙板】按钮为形状图层添加蒙版。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,24,）选中蒙版图层，利用多边形套索选出要被隐藏遮盖的区域，调节前景色为黑色，按,Alt+Delete,填充。,（,25,）复制“小白条”图层，移动到矩形右侧。,（,26,）新建字体图层，输入文字（百大品牌齐聚惠，好货等抢），双击字体图层，选中要改变大小的字体，设置为宋体，黑色、,16px,。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,27,）在【形状选择工具】中选择圆角矩形工具，在形状属性工具栏中设置颜色为,#B1ABAB,、半径为,30px,。,（,28,）新建文字图层，在【字符】面板中设置颜色为,EFOE19,，字体为宋体，,14px,、颜色为,ff0000,选中将形状图层和文字图层右击鼠标悬着“合并图层”，方便移动。,（,29,）打开本书配套资源“项目资料库,/,素材“,white.png,”、“,rad.png,”、“,gray.png,”文件。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,30,）选中图层“,gray”,打开【图层样式】面板，在【投影】面板中设置投影角度为,160,度，距离为,10px,、大小为,5px,。,（,31,）选中,“giay”,图层右击，选择拷贝图层样式。,（,32,）选中图层“,white,”、“,rad,”,右击选择，粘贴图层样式。,（,33,）调整图层位置和图层顺序。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,子任务,3,：设计首页主内容区,Banner,效果图,商务网页设计,商务网页设计 项目二,（,34,）在菜单栏中选择【矩形选框】，新建图层，绘制矩形选区。选中图层，单击添加图层样式，打开图层样式面板，选择渐变叠加，设置渐变属性值。,（,35,）在【图层】面板中，单击新建组按钮，双击组名，重命名为“产品类别”。,（,36,）在【图层】面板中新建图层，双击默认图层名称，重命名为红色小横条。,（,37,）在菜单面板中选择【矩形工具】，绘制矩形选区。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,36,）在工具栏中，选择前景色，将前景色改为,#EA1227,按“,Alt+Delete,”键填充颜色。,（,37,）复制“红色小横条”图层，重命名为“灰色小横条”填充色为“,b5afaf,”。,（,38,）按,Ctrl+T,调节图层大小。,（,39,）在工具栏中选择【文字工具】中的横排文字工具，新建文字图层，设置文字宋体、填充颜色为,#000000,、字符大小为,18px,、加粗。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,40,）打开素材文件夹中的“,3.png,”。将“,3.png,”图层重命名为“项目符号”，并将其复制移动至相应的位置。,（,41,）打开素材文件中的“,4.jpg”,文件，将其移动到相应的位置。,（,42,）新建图层，用选框工区画出,1280px*715px,的选区，并将其颜色填充为“,#ebebeb,”，绘制虚线在图层面板中新建图层，重命名为“虚线”，在工具栏中选择画笔工具。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,43,）在【画笔】面板中，设置形状为圆点、像素大小为,3px,、颜色为“,b8b2b2”,、间距为,200px,如图所示。,（,44,）,在,【,图层,】,面板中，选中“虚线”的图层。按住鼠标左键，拖动到新建图层按钮上，进行图层复制。,（,45,）新建文字图层，输入下面文字在,【,字符,】,属性面板中，设置文字属性为宋体、黑色和,#686565,、,12px,。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,46,）在【画笔】面板中，设置形状为圆点、像素大小为,3px,、颜色为“,b8b2b2”,、间距为,200px,（,47,）,在,【,图层,】,面板中，选中“虚线”的图层。按住鼠标左键，拖动到新建图层按钮上，进行图层复制。,（,48,）新建文字图层，输入下面文字在,【,字符,】,属性面板中，设置文字属性为宋体、黑色和,#686565,、,12px,。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,49,）在【图层】面板中新建组，双击重命名组为“站内公告”。,（,50,）打开“素材”文件夹中的“,6.png,”文件，并复制图层移动到相应的位置。,步骤,66,：新建文字图层“站内公告”在图层面板中设置文字属性，字体为宋体、,14px,、加粗、,#ffffff,。,（,51,）复制组“产品分类”中的“虚线”调整大小，并移动到相应的位置。复制组“产品分类”中的“项目符号”图层，并移动到相应的位置。复制组“产品分类”中“虚线”图层，并移动到相应的位置。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,52,）打开“素材”文件中“,7.jpg,”文件，并将其移动到相应的位置。,（,53,）新建文字图层，输入以下文字，在字符面板中设置文字属性为字体宋体、,12px,、,#191717,。,复制组“站内公告”，将其移动到相应的位置，更改组名为“行业动态”。,（,54,）新建文字图层，输入以下文字，在字符面板中设置位置属性为字体宋体、,12px,、,#bcbbbb,。,子任务,3,：设计首页主内容区,商务网页设计,商务网页设计 项目二,（,55,）：复制“价格图层”移动到相应的位置。新建文字图层，并在相应位置输入以下文字，设置字体为宋体、加粗、,12.03px,，颜色为白色。,（,56,）：在【图层】面板中新建组，重命名为“次导航”，如图,2-49,所示。,（,57,）：新建文字图层，在【字符】面板中设置字体为宋体，,14px,颜色为,#1C8CBA,。输入“次导航”文字“,+,返回首页,+,添加收藏,+,友情链接,+,联系我们”。,子任务,4,：设计首页页尾区,商务网页设计,商务网页设计 项目二,（,58,）：新建图层，使用选框工具画出“,1280px*100px,”的选框，填充为“,#b2adad,”色；新建文字图层，在“字符”面板中设置字体为宋体，,12px,、颜色为黑色，输入以下文字信息。,（,59,）：存储文件为,Web,所有格式，快捷键为,Ctrl+Alt+Shift+S,，在弹出的