搜索
67第5章店铺公告模板设计Chapter05网店公告显示在普通店铺右上角，店主可以在此发布一些促销、公告信息。本章主要介绍店铺公告的设计与制作过程,通过本章的学习，您可以轻松地制作出精美的店铺公告。Chapter5学习重点|WHAT'SIMPORTANT店铺公告的设计原则与要求/文字形式的公告/制作美观的图片公告/店铺公告的安装使用/公告模板的设计第5章店铺公告模板设计68淘宝网店装修实战店铺公告的设计原则与要求ABOUTSHOPANNOUNCENMENT5.1定义公告中的文字样式默认情况下，淘宝店铺公告中的文字是黑色的宋体字，可以通过编辑器的方式来对公告文字的字体、字号、颜色等进行设置，具体步骤如下：1登录到淘宝网站，点击“我是卖家”超链接，如图5-3所示。图5-1普通店铺的公告显示位置图5-2不同风格的店铺公告位置店铺公告信息是用来显示店铺的动态信息、商品促销、服务信息等内容的，普通店铺公告的位置一般显示在店面的右上角，如图5-1所示。普通店铺公告的位置、尺寸和播放方式都是固定设置的，只能在有限区域内发挥作用，如图5-2所示。FONTOFSHOPANNOUNCENMENT5.2图5-3登录淘宝网69第5章店铺公告模板设计Chapter055弹出“店铺公告设置”对话框，如图5-7所示。图5-7“店铺公告设置”对话框6将光标移至编辑框中，输入文字，也可以从网上收集一些由文字和符号组成的图形，使公告文字更加生动、有趣，如图5-8所示。图5-8输入公告文字7拖动光标选中文字，单击“字体”下拉列表，从中选择“黑体”，如图5-9所示。图5-9选择公告字体8在“字号”下拉列表中选择字号为“18”，2在左侧的“店铺管理”列表中点击“店铺装修”超链接，如图5-4所示。图5-4点击“店铺装修”链接3打开“店铺装修”页面，如图5-5所示。图5-5“店铺装修”页面4单击“店铺公告”栏目上的“编辑”超链接，如图5-6所示。图5-6单击“编辑”超链接70淘宝网店装修实战如图5-10所示。图5-10设置字体字号9单击“字体颜色”图标按钮，在“拾色器”中选择文字颜色为“红色”，如图5-11所示。图5-11设置文字颜色美观的图片形式公告栏的设计除了简单的文字公告形式外，淘宝店铺还支持使用图片形式的公告，就是将公告制作成一张图片，而图片可以使用Photoshop这类图像处理软件制作，因此，可以制作很多漂亮的效果，如图5-13所示。SHOPANNOUNCENMENTDESIGN5.310设置完成后，单击【保存】按钮，显示“操作成功”，浏览普通店铺公告效果，如图5-12所示。图5-12公告显示效果提示在公告编辑器中还有很多其他的功能，如设置字体为斜体、复制、项目符号、链接、上标、下标等等，这些都和Word操作方法相似，读者可以自己尝试。71第5章店铺公告模板设计Chapter05英体简”，字体大小为“30点”，字体颜色为“ff0076”，如图5-16所示。图5-15输入公告文字图5-16设置字体样式4打开“图层”面板，选择文字所在图层，单击面板下方的【添加图层样式】按钮，从弹出的菜单中选择【描边】命令，如图5-17所示。图5-17添加“描边”图层样式图5-13图片形式公告本节学习如何制作美观的图片形式公告。1从网上收集需要的图片素材，在Photoshop软件中打开，如图5-14所示。图5-14打开素材文件提示由于淘宝限制公告的宽度在350像素以内，因此，如果从网上搜集的素材宽度超过该限制时，需要修改文件的尺寸。2单击工具箱中【横排文字工具】按钮，在图片中单击，并输入文字，如图5-15所示。3拖动鼠标选中文字，在“选项”面板或“字符”面板中设置文字字体为“汉仪秀72淘宝网店装修实战图5-22所示。图5-20添加“内发光”图层样式图5-21完成后的效果图5-22保存文件为PSD格式5打开“图层样式”对话框，设置描边大小为3像素，颜色为黄色，如图5-18所示。图5-18设置描边颜色6在左侧“样式”列表中选择“阴影”样式，设置参数如图5-19所示。图5-19添加“阴影”图层样式7在左侧的“样式”列表中选择“内发光”样式，设置参数如图5-20所示。8设置完成后单击【确定】按钮，公告图片制作完成后如图5-21所示。9选择菜单【文件】|【存储】命令，将文件保存为PSD格式，以便于以后修改，如73第5章店铺公告模板设计Chapter0513单击【存储】按钮，弹出“将优化结果存储为”对话框，在对话框中输入要保存的文件名，单击【确定】按钮，将图片保存，如图5-26所示。图5-25存储图像图5-26“将优化结果存储为”对话框10选择菜单【文件】|【存储为Web和设备所用格式】命令，如图5-23所示。图5-23选择“存储为Web和设备所用格式”命令11打开“存储为Web和设备所有格式”对话框，在对话框中选择优化的文件格式为“GIF”，如图5-24所示。图5-24选择优化的文件格式为GIF12勾选“透明度”复选框，在“颜色”右侧的下拉菜单中选择“128”选项，使图片在保证清晰的状态下占用最小的空间，提高浏览速度，如图5-25所示。74淘宝网店装修实战图片公告的安装和使用图片公告制作完成后，就可以将它发布在公告中了，那首先需要将图片上传到网络上，在第一章的时候我们曾经讲过几种上传图片至免费空间的方法，现在来了解一下使用虚拟主机的具体方法。将图片上传到虚拟主机中虚拟主机是在网络服务器上划分出一定的磁盘空间，可供用户放置站点、应用组件等，以及提供必要的站点功能、数据存放和传输功能。所谓虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的服务器划分成多个“虚拟”的服务器，每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持、FTP、E-mail等）功能。如果想开一个专业的网店，建议购买虚拟主机，因为购买虚拟主机后，不光图片的上传、修改非常方便，而且以后可以建议独立的网站。在选择虚拟主机服务商时应注意挑选那些品牌大、口碑好的公司，这样购买后的服务才有保障，国内比较大的服务商有中国万网、新网互联、35互联等等。虚拟主机一般可通过Web方式或者FTP软件来管理，在购买虚拟主机后，服务商会提供虚拟主机所在的IP地址及FTP用户名和密码，有了这些资料，通过FTP软件就可以方便上传图片文件资料了。什么是FTP呢？简单地说，FTP就是完成两台计算机之间的文件复制，从远程计算机复制文件至自己的计算机，称为“下载”；从自己的计算机中复制文件至远程计算机中，称为“上载”。如何使用FTP软件上传文件呢？以常用的FTP软件FlashFXP为例，操作步骤如下：1启动FlashFXP软件，其界面如图5-27所示。2选择菜单【站点】|【站点管理器】命令，如图5-28所示。HOWTOUSEANNOUNCENMENT5.475第5章店铺公告模板设计Chapter05图5-30输入FTP用户资料5单击【连接】按钮，开始连接站点，连接上站点后，在本地磁盘找到要上传到站点的目录，选中需要上传的图片，单击鼠标右键，从弹出的菜单中选择【传送】命令，如图5-31所示。图5-31上传文件6这样图片就上传到对应的虚拟主机空间内了。图片传输完后，在图片上单击鼠标右键，从弹出的菜单中选择【复制URL】命令，如图5-32所示。图5-27FlashFXP工作界面图5-28打开站点管理器3打开“站点管理器”对话框，在对话框中单击【新建站点】按钮，在弹出的对话框中输入站点名称，如图5-29所示。图5-29“站点管理器”对话框4在“常规”选项卡中，输入FTP空间的IP地址，设置用户名称和密码，端口默认为“21”，单击【应用】按钮，站点就设置好了，如图5-30所示。76淘宝网店装修实战在店铺中应用图片公告图片上传到网上后，就可以在店铺中应用图片公告了，操作步骤如下：1登录到“我的淘宝”，单击“店铺管理”列表中的“店铺装修”超链接，如图5-35所示。图5-35单击“店铺装修”超链接2打开“店铺装修”页面窗口，在“店铺公告”区中单击“编辑”超链接，如图5-36所示。图5-36单击“编辑”超链接3打开“店铺公告设置”窗口，如图5-37所示。图5-32复制图片URL7在浏览器中粘贴复制得到的URL地址，如图5-33所示。图5-33粘贴URL地址8将地址中的“ftp”替换为“http”,并将IP地址改为域名地址，就可以在浏览器中显示刚刚上传的图片了，如图5-34所示。图5-34预览图片77第5章店铺公告模板设计Chapter05图5-37“店铺公告设置”对话框4拖动鼠标选中要删除的文字内容，如图5-38所示。图5-38选中要删除的文字内容5按键盘上的【Delete】键将文字删除，将光标移至需要插入图片的位置，单击【图片】按钮，打开“图片设置”对话框，在“地址”文本框中输入图片保存的路径，尺寸会自动显示为图片的原始大小，如图5-39所示。6单击【确定】按钮，即可将图片插入在公告栏中，单击【保存】按钮，完成店铺公告内容设置，如图5-40所示。7关闭店铺公告设置，单击“查看我的店铺”链接，打开店铺首页，可以看到添加的图片滚动显示在公告区域，如图5-41所示。图5-39设置插入图片路径图5-40设置完成后保存图5-41店铺中显示图片公告的效果提示公告栏中的内容可以图文混排，在图片下面还可以再输入文字，也可以插入多张图片。78淘宝网店装修实战设计公告模板首先使用Photoshop软件对公告图片素材进行切片处理，具体步骤如下：1从网络上下载合适的素材图片，使用Photoshop打开该图片，如图5-43所示。图5-43打开素材文件TEMPLATEDESIGN5.5公告模板的设计虽然图片形式的公告栏比单纯文字形式的公告要漂亮很多，但内容不灵活，如果要添加新的公告，就必须修改图片，因此，淘宝店铺提供了使用公告模板的方式，既有图片形式的美观效果，又可以任意删添文字内容，但由于涉及源代码等内容，对于初学者来说有一定的难度，本节将学习公告模板的设计方法，效果如图5-42所示。图5-42利用HTML制作公告内容提示如果网络上找不到合适的公告栏素材，也可以发挥自己的想象，设计出满意的效果。2选择菜单【视图】|【标尺】命令，显示图片标尺，如图5-44所示。图5-44显示图片标尺79第5章店铺公告模板设计Chapter05图5-47选择“切片工具”图5-48设置切片对齐方式7使用【切片工具】在图片中拖曳一个矩形切片，如图5-49所示。8按照同样的方法，再绘制两个切片区域，如图5-50所示。图5-49绘制图片上部分的切片区域3单击工具箱中的【移动工具】按钮，从图片标尺上方拖动一条蓝色参考线至需要裁剪处的位置，如图5-45所示。图5-45拖出参考线4按照同样的方法再拖一条参数线至图片下方，如图5-46所示。图5-46再拖出一条参考线5单击工具箱中的【切片工具】按钮，如图5-47所示。6选择菜单【视图】|【对齐到】|【参考线】命令，如图5-48所示。80淘宝网店装修实战图5-50绘制图片下部分的切片区域9选择菜单【文件】|【存储为Web和设备所用格式】命令，如图5-51所示。10打开“存储为Web和设备所用格式”对话框，设置参数如图5-52所示。11单击【存储】按钮，打开“将优化结果存储为”对话框，如图5-53所示。图5-51选择“存储为Web和设备所用格式”命令图5-52“存储为Web和设备所用格式”对话框图5-53“将优化结果存储为”对话框12单击【保存】按钮，将切片存储到images文件夹中，如图5-54所示。图5-54存储优化后的图片81第5章店铺公告模板设计Chapter05将公告模板生成网页在Photoshop中将模板设计并生成切片后，还需要将其制作为HTML网页，我们以DreamweaverCS5版本为讲解平台，来学习其制作方法，具体操作步骤如下：1启动DreamweaverCS5软件，其界面如图5-55所示。图5-55启动DreamweaverCS52在“新建”列表中单击“HTML”选项，新建一个空白HTML文件，如图5-56所示。图5-56新建空白H