《任务21首页布局设计备课讲稿》由会员分享，可在线阅读，更多相关《任务21首页布局设计备课讲稿（23页珍藏版）》请在金锄头文库上搜索。
1、任务2-1 首页布局设计,任务要求 、掌握使用Photoshop进行网站首页的版面设计方法 、掌握使用Photoshop制作网页各版面元素的设计技巧和方法,任务效果图,任务2-1 首页布局设计,操作步骤：,1、运行Adobe PhotoshopCS2，新建一个文件名为“首页结构草图”，宽度、高度分别为900px(像素)、600px的psd文件。 2、新建一个图层，并命名为“logo”。 3、选择“工具箱”上的“矩形工具”，并设置“前景色”为“浅黄色”，在“logo”图层上画一矩形，操作如图2-1_2所示。 4、给“logo”图层进行2像素的外部描边，操作如图2-1_3所示。 5、新建名称为“l
2、ogo”图层，选择“T”工具，并设置字体、字号、颜色分别为“Arial”、“36点”、“#7e3a0c”，然后输入“logo”，如图2-1_4所示。 6、新建名为“(200*70)”的图层，使用“T”输入“200*70”，如图2-1_5所示。,任务2-1 首页布局设计,尝试练习：,按照图2-1_1所示，参照步骤1-6尝试完成网页结构草图的绘制，看你能完成吗？ （1）绘制banner的矩形区域，并标注像素要求：700*70。 （2）绘制“导航条”的矩形区域，并标注像素要求：900*40。 （3）分别绘制“登陆框”“商品导航”“商品排行”“友情链接”的矩形区域，并标注它们的宽度像素要求：200。
3、（4）绘制“商品搜索”、“新品上架”、“精品推荐”矩形区域，并标注它的像素的要求：690。 （5）绘制“版权信息”矩形区域，并标注它的像素要求：900*40。,任务2-1 首页布局设计,任务2-2 导航设计,操作步骤：,1、运行photoshop CS2，新建一个名为“logo”，宽度、高度分别为“32470px”的psd文档。 2、新建“图层1”制作logo左边的半椭圆图案，操作如图2-2_2所示。 3、选区填充颜色，操作如图2-2_3所示。 4、制作白色线条，操作如图2-2_4所示。 5、调整白色线条，操作如图2-2_5所示。 6、制作“飞鸟”图案，操作如图2-2_6所示。 7、给“飞鸟”
4、图案填充白色，操作如图2-2_7所示。 8、复制“飞鸟”图案，操作如图2-2_8所示。 9、输入文字“衢州恒创网上商城”，操作如图2-2_9所示。,任务2-2 导航设计,任务效果图,任务2-2 导航设计,操作步骤：,1、新建一个名为“导航”，宽度、高度分别为“91234px” ，其它参数默认的“psd”文档。 、绘制“矩形形状”，操作如图2-2_11所示。 、“删格化”矩形形状并将其作为选区载入，操作如图2-2_12所示。 、收缩选区，操作如图2-2_13所示。 、给选区填充颜色，操作如图2-2_14所示。 、输入文本“网站首页”，然后设置“图层样式”，操作如图2-2_15所示。,任务2-2
5、导航设计,尝试练习：,按图2-2_12所示，参照“网站首页”制作步骤，完成如下操作： 1、输入“新到商品”、“畅销商品”、“推荐商品”、“搜索商品”、“商品分类” 等文字。 2、分别设置它们的图层样式同“网站首页”。 3、在各个栏目文字间输入“竖线”。,任务2-2 导航设计,任务2-3 Banner设计,一、什么是Banner?,bnnaer,又称网幅广告、旗帜广告、横幅广告，它是用于表现商家广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式。,二、任务要求,1、掌握使用Photoshop CS2中的钢笔工具绘制图形轮廓路径 2、掌握使用Photoshop CS2中的直接选取
6、工具和转换点工具调整路径 3、掌握使用Photoshop CS2中的路径与选区的转化 4、掌握使用Photoshop CS2中的渐变色的设置与填充 5、掌握使用Photoshop CS2中的魔术棒工具抠图的应用 6、掌握使用Photoshop CS2中的任意变形工具的使用,任务2-3 Banner设计,任务效果图,任务2-3 Banner设计,操作步骤：,1、运行Adobe photoshop CS2，新建一名称为“banner”，宽度、高度分别为“70070px”的psd文档。 2、新建一图层，并命名为“banner”。 3、使用“钢笔工具”绘制一城市轮廓，操作如图2-3_2所示。 、使用“
7、直接选取工具”和“转换点工具”，调整“城市”轮廓，操作如图2-3_3所示。 、将路径转化为选择区，操作如图2-3_4所示。 、切换到图层面板，给选区填充“渐变色”，具体操作： 选择工具箱中的“渐变工具”，设置“渐变色”，操作如图2-3_5所示。 添加新色标，操作如图2-3_6所示。 设置新色标颜色分别为“1090c0”，操作如图2-3_7所示。,任务2- anner设计,尝试练习：,按照图2-3_8所示，参照步骤尝试为新添加的色标设置颜色： （1）选取颜色“df83f3”。 （2）选取颜色“979690”。,任务2-3 Banner设计,操作步骤：,设置渐变色的“不透明度”为100%，操作如图
8、2-3_9所示。 对选区填充设置好的渐变色，操作如图2-3_10所示： 7、插入“intel标志”图层,为该图层添加“intel标志”。 打开“F: gshop2.0images”文件夹下的“intel.jpg”文件。 将整个“intel标志”完整选中形成选区，操作如图2-3_11所示。 将已选取的“intel标志”复制到“banner.psd”文档中，操作如图2-3_12所示。,任务2- anner设计,尝试练习：,按照下图2-3_13所示，完成如下操作： （1）选中“保持长宽比”按钮，沿对角线方向缩小“intel”标志。 （2）将“intel”标志移动到图示位置。 （3）选中“保持长宽比”
9、按钮，沿对角线方向缩小“intel”标志到图示大小。,任务2-3 Banner设计,操作步骤：,8、输入广告语“英特尔 让城市充满色彩”，如图2-3_14所示。 9、删格化文字，并设置文字的颜色，操作如图2-3_15所示。,尝试练习：,按照下图2-3_13所示，完成如下操作： （1）选中“保持长宽比”按钮，沿对角线方向缩小“intel”标志。 （2）将“intel”标志移动到图示位置。 （3）选中“保持长宽比”按钮，沿对角线方向缩小“intel”标志到图示大小。,任务2- anner设计,banner的国际标准规范 IAC/CASIE标准,注：现在随着大屏幕的显示器出现,banner的表现尺寸
10、越来越大,760X70;1000X70像素的大尺寸banner也俏然出现.,任务2-4 左栏设计,任务要求,1、掌握使用photoshop cs2设计制作“我购买的商品”版块 2、掌握使用photoshop cs2设计制作“商品导航”版块 3、掌握使用photoshop cs2设计制作“商品排行版”版块 4、掌握使用photoshop cs2设计制作“友情链接”版块,任务2-4 左栏设计,任 务 效 果 图,任务2-4 左栏设计,操作步骤：,一、运行“photoshop cs2”，并新建名为“左栏”，设高度、宽度分别为“216265px”的psd文档。 二、设计制作“我购买的商品”矩形区域，并
11、添加图片。 1、设计制作“我购买的商品”矩形区域，操作如图2-4_2所示。 2、为矩形区域添加含有“我购买的商品”文字的图片，操作如图2-4_3所示。,尝试练习：,按图2-4_4所示，完成如下操作： 1、将“图层1”重命名为“标题图像”。 2、新建一图层，命名为“内容区”，使用“矩形选框”工具并设高度、宽度分别为“212224px”。 3、使用“油漆桶工具”对矩形选区填充“#a6e3ff”颜色。,任务2-4 左栏设计,操作步骤：,、为“我购买的商品”矩形区域添加文字内容，操作如图2-4_5所示。,尝试练习：,按图2-4_6所示，完成如下操作： 1、新建一图层，命名为“购物车”。 2、打开“e:gshop2.0imagescart_empty.gif”文件，并将其全选拖曳到“左栏.pad”中。,任务2-4 左栏设计,操作步骤：,四、添加一分隔直线，操作如图2-4_7所示。,尝试练习：,按图2-4_1所示，利用教材提供的素材，参照上述制作“我购买的商品”模块的具体操作步骤，完成“左栏”其他版块制作： 1、制作“商品导航”模块制作。 2、制作“商品排行榜”模块制作。 3、制作“友情”模块制作。,
