登陆注册
19798900000013

第13章 人气网店少不了精心的装修(4)

(1)打开Dreamweaver软件,在快捷菜单“新建”列表中选择"HTML选项。打开一个空白的网页,选择菜单"文件,'―"保存"命令,在弹出的"另存为"对话框中选择前面已保存的html文件夹,并输入文件名“miaoshu.html”。

(2)单击"保存"按钮后返回网页编辑窗口。选择菜单"插入"―"表格"命令'在弹出的"表格"对话框中设置行数为4,列数为5,表格宽度为"930"像素,边框粗细、单元格边距和单元格间距都设为0。

(3)单击“确定”按钮,在网页中插入4行5列,宽度为930像素的表格。

(4)将光标放在第1列第1行,拖动鼠标选中第1列.在"属性"面板中单击"合并所选单元格"按钮,将第1列的4个单元格合并。接着,在合并后的单元格中单击,将光标插入在单元格中。

(5)选择菜单“插入”—“图像”命令,在弹出的“选择图像源文件”对话框中先打开“images”文件夹,然后选中要在该单元格中插入的图像文件“top-1.gif”。

(6)弹出"图像标签辅助功能属性"对话框,可在"替换文本"文本框中输入图片的说明文字。单击"确定"按钮,将图片插入到光标所在单元格中。

(7)把光标移到第2列第1行单元格中,根据上面的方法选择需要插入的图像文件“top-2.gif”。在第2列第2行单元格中插入图像文件“top-3.gif”。拖动鼠标选中第2列后两行单元格,在"属性"面板中单击"合并所选单元格"按钮,将其合并,然后在单元格中插入图像文件“top-4.gif”。

(8)拖动鼠标选中第3列与第4列第1行的两个单元格,在"属性"面板中单击"合并所选单元格"按钮将其合并,在合并后的单元格中插入图像文件“top-5.gif”。然后将光标移至第3列的第2行,根据前面介绍过的方法插入背景图像“top-bg.gif”, 单击"确定"按钮,插入背景。

(9)选择第3列的第3行与第4行单元格,在"属性"面板中单击"合并所选单元格" 按钮将其合并,在合并后的单元格中插入图像文件“top-8.gif”。随后,在第4列下面单元格中分别插入其他相应的图片。

接下去要在Dreamweaver软件中制作图片右上部分的内容,具体操作步骤如下:

(1)在第5列第1行单元格中单击鼠标,选择菜单"插入"-"表格"命令,并设置表格的行数为1,列数为4,宽度为534像素。

(2)单击“确定”按钮,在单元格中插入1行4列的嵌套表格。

(3)将光标分别移动到嵌套表格的每一个单元格中,并分别插入相应的按钮图片。

(4)拖动鼠标选中第5列剩下的3个单元格,并将其合并。在合并后的单元格中插入3 行1列,宽度为534像素的嵌套表格,在嵌套表格的第1行单元格中插入“最新推荐”,标题图片top-14.gif。在第2行单元格中再插入1行3列,宽度为534像素的嵌套表格。在两侧的单元格中分别插入相应图片。

(5)在嵌套表格的第3行中插入图像文件“top-17.gif”,完成后上半部分的效果就出来了。

接下来开始制作图片下半部分的内容,具体操作步骤如下:

(1)使用鼠标在上半部分表格的右侧单击,按下回车键。然后,选择"插入"―"表格"命令,插入3行5列,宽度为930像素的表格。拖动鼠标光标选中第1列的3个单元格,将它们合并,并在"属性"面板中设置单元格宽度为10,背景颜色为"淡紫色"。

(2)在第2列第1行和第3行单元格中分别插入图像文件“bottom-1.gif”和“bottom-4.gif”,并设置该列单元格宽度为174像素。然后合并第3列单元格,设置宽度为10,单元格背景色为"淡紫色"。

(3)合并第4列和第5列的第1行单元格,并插入图像文件“bottom-5.gif”。同样方法合并第4列和第5列的第3行单元格,并插入图像“bottom-6.gif”。然后,设置第4列第2行单元格宽度为730像素,第5列第2行单元格宽度为6像素,单元格背景颜色为"淡紫色"。

(4)将光标移动到左侧空白单元格中,单击"表格"按钮,插入4行1列,表格宽度为957。的表格,单击"确定"按钮插入嵌套表格。单击嵌套表格边框,选中嵌套表格后,在"属性"面板"对齐"下拉菜单中选择"居中对齐"选项。然后分别在第1 行和第3行中插入"商品分类"和"更多推荐"的标题图片。

(5)将光标移动到右侧空白单元格中,插入8行1列,表格宽度为95%的嵌套表格,并设置表格"居中对齐"。分别在1、 3、 5、 7单元格中插入相应的标题图片。将光标移动到公告栏单元格中,在其中输入公告信息。然后在"文档"面板中单击"拆分"按钮,将在编辑窗口左半部分显示代码视图,右半部分显示设计视图

(6)在代码视图中公告信息文字的前面输入以下代码:

(7)代码添加完成后,公告栏的信息已变为2号橘黄色文字。而滚动字幕的效果只有在正浏览器中才能显示,如杲想查看可按下F12键,在浏览器中打开网页查看。

(8)根据最新推荐区域内的高度要求,制作好相关商品图片。将光标移动到最新推荐下面的空白单元格中,单击"表格"按钮插入1行4列,表格宽度100%,单元格边距为3的表格。单击"确定"按钮,在空白单元格中插入嵌套表格。然后在每个单元格中分别插入4幅商品图片。

下面给几个按钮添加链接,具体操作步骤如下:

(1)单击“设计”代码返回设计视图模式。为最新推荐上面的4个按钮添加链接。单击"我的店铺"按钮,打开"属性"面板,在"链接"文本框中输入店铺网址。在"链接"文本框中粘贴店铺网址后,在"边

框"文本框中输入"0",然后打开"目标"下拉菜单,选择“-blank”选项,表示链接网址将在一个新的窗口中打开。

(2)"信用评价"和"个人空间"的链接方法与上面步骤相同先在店铺中打开相应的页面,复制链接地址后,将网址粘贴到图片的"属性"面板中。"加入收藏"的链接则有所不同,需在代码视图模板中,图片代码的前后加如下代码:

其中61898587是店铺的编号。

(3)按钮链接制作完成后,就可以开始制作左側的"商品分类"和"更多推荐"栏目内容。商品分类可以和店铺类目相同,也可不相同。根据需要可以添加文字分类,也可添加图片分类。在"更多推荐"中添加一些热卖商品及文字说明。制作时在下面的空白单元格中插入嵌套表格,用来控制文字分类和图片,就非常简单,这里不再重复。最后,别忘记为"商品分类"和"更多推荐" 添加链接,让买家很方便地进入想进入的页面才是最重要的。

(如果不熟悉添加文字样式的代码,可先在Dreamweaver软件中输入要添加的内容,等到发布商品时再利用网站自带的编辑工具对文字样式进行修改。)

(4)把右侧的宝贝描述、宝贝展示、买家须知和邮资说明等4个栏目依照商品的信息添加相关说明就行了,剩下的只是简单地插入图片与输入文字的操作,这里不再赘述。

(5)全部制作完成后,保存网页,然后按下F12键在浏览器中查看网页效果。

5、将商品描述模板应用到网店中

在制作好商品描述模板,并完成商品内容的制作后,就可以在网上发布了。接下来以淘宝店铺为例,发布商品描述模板的具体操作步骤如下:

(1)登录"我的淘宝",进入"我是卖家"页面,选择"宝贝管理"―"我要卖"命令,在打开的网页中选择发布方式,如选择"一口价发布"。

(2)在打开的列表中选择一口价商品的类目,方便买家找到相关商品,然后单击"好了,去发布宝贝"按钮。

(商品描述模板在网站上是以代码形式发布的,因而需要将描述模板中的图片先上传到自己的网络空间中,修改路径后发布的商品描述模板才能正常显示。商品描述模板的上传方法与公告模板的上传方法一致,这里不再赘述。)

(3)在一口价发布页面中,按照要求填写宝贝信息,然后单击"编辑源文件"链接,将显示编辑源文件文本框。

(4)切换到Dreamweaver软件中,单击"代码"按钮,在代码视图中拖动鼠标选中…之间的所有代码。

(5)单击鼠标右键选择"拷贝"命令,返回一口价发布网页中,在编辑源文件文本框中单击鼠标右键选择"粘贴"命令,完成后代码都粘贴到文本框中。

(6)单击文本框上方的"预览,,链接,可以在新窗口中查看描述模板的完成效果,也可以单击"使用编辑器"链接,返回编辑器窗口进行文字样式的修改。

(7)完成后继续相关信息的填写,如价格、所在地和运费等内容。填写完成后单击"预览"按钮,没有问题后单击"发布"按钮。发布完成后,就可以在自己店铺中找到发布的商品了。

(在编辑器中浏览网页的效果并不是最终显示效果,看上去可能有些不规整,应该以单击"浏览"链接后的浏览效果作为最终参考。完成制作的商品描述模板,不需要每次都在Dreamweaver中修改, 可以直接在淘宝的编辑器中完成,对于初学者来说就更加方便了。)

怎样制作窄版商品描述模板

窄版商品描述模板又被叫做新旺铺宝贝描述模板,主要是在旺铺中应用, 相对于宽版描述模板而言,它的可选择性更多一些。

在旺铺中添加了左侧栏显示内容,同样包含了分类导航、店铺信息等栏目,因而倘若默认设置是打开左侧栏,则商品描述模板的宽度应控制在710像素以内,并且也无需再像宽版商品描述模板一样在左侧制作更多推荐、商品分类等内容。接下去就对窄版商品描述模板的制作做一个介绍。

1、制作商品描述模板

在photoshop软件中设计窄版商品描述模板的具体操作步骤如下:

(1)打开photoshop软件,选择菜单"文件"-"新建"命令,新建710像素×200像素的图片文件。接着将素材图片复制到新空白图片中,同时调整其尺寸与位置。

(2)再在图片右侧粘贴拥有黄绿色的区域,同时将其调整到合适的位置。在"图层"面板中右击鼠标,在弹出的菜单中选择"向下合并"命令,将两个图片合并为一层。在工具栏中单击"仿制图章工具"按钮,处理两张图片拼接的部分。

(3)打开另一幅素材图片,将其复制至已创建的图片中,同时对齐进行大小与位置的调整,在这里制作公告信息栏。

(4)在图片中输入店铺名称,如"童心小铺"。双击选中文字,选择菜单"图层"―"混合选项"命令,打开"图层样式"对话框,在"样式"列表中选择"渐变叠加"选项,单击"渐变,,右侧的颜色条,打开"渐变编辑器",设置渐变颜色由浅绿到红色。

同类推荐
  • 百年老店之死

    百年老店之死

    本书揭秘了百年老店的衰落之谜,既是缅怀那些英雄的业绩,更重要的是学习百年老店的成功经验,吸取其走向衰落的沉痛教训。
  • 创造性思维案例选编

    创造性思维案例选编

    本书共分三篇,介绍了古今中外许多著名企业如何运用创造性思维在产品与技术开发、企业经营战略与市场策略、组织制度与管理方法方面取得成功。
  • 怎样搞外销

    怎样搞外销

    本书分十个话题介绍外销的工作过程。包括:“开启外销大门——取得进出口经营权”、“寻找出口市场——联系贸易伙伴”、“进行讨价还价——争取满意的价格”、“商定外销合同——确定贸易法律基础”等。
  • 影响企业管理的125个精彩故事

    影响企业管理的125个精彩故事

    精选世界著名企业的125个精彩故事,让读者在轻松愉快的阅读中领略到真正的管理大师的高超智慧,感受到世界级企业经营的奥妙,从而学习和掌握更多的管理学知识。本书易读易懂,趣味性强,适合企业管理者和对管理感兴趣的读者阅读。
  • 主管修炼

    主管修炼

    包含了丰富的方法、工具、案例,帮助新晋主管更快、更好地完成从一名优秀员工到一名合格部门主管的转变。本书所提到的问题都是新晋主管工作中常常会遇到的,所介绍的方法和工具非常实用,是新晋主管的必备参考书和学习资料。
热门推荐
  • 十里繁花等你来

    十里繁花等你来

    生活如同奔流的河水,一直朝前,真能永不言悔?亦或后悔有期?三生花,三世情,前世情未断,今生花凋零,来生已陌路。勿忘卿,勿忘心,奈河毅拒孟婆汤,断桥痴等许仙郎。冬细语,夏荫眠,望穿旧照,惟闻叹息。
  • 唯我独异

    唯我独异

    苦恨年年压金线,徒为他人做嫁衣!神蚕,魔蚕,神魔一体!强则成神,败则成魔!
  • 盗仙偷天

    盗仙偷天

    他是土鳖,也是要成为盗仙的男人。他不是好人,但立志成为一个不坏的人。美女,金钱,权利?太low了,咱可是要成为神仙的人,目标必须是星辰大海!
  • 谁夏了夏天

    谁夏了夏天

    穿生死,玩穿越现代帅哥到灵气世界,竟成万年废材!看众人颠覆灵力世界。万年不变的定律:强者生,败者亡(第一部乃是现代,第二部才是正文)小崽我非常震惊的选错了作品类型,所以,抱歉--
  • 校园篮球争霸

    校园篮球争霸

    文案1:从现在开始,开启一段热血的篮球历程!文案2:这里有你的梦想,这里充满着奇迹。
  • 超级小职员

    超级小职员

    晚上加班却撞见老板娘在办公室换衣,是福还是祸?……看小职员如何混地风生水起,艳遇无边……
  • 甘家洼风景

    甘家洼风景

    在这部由二十个短篇构成的长篇小说《甘家洼风景》里,作者王保忠塑造了城镇化、现代化浪潮中一个正在逝去的村庄典型——甘家洼,呈现农耕文明在当代社会生活中的尴尬处境,留守农民和外出务工者复杂的精神遭遇,试图为他们不甘泯灭的“野心”存史立传。
  • 火影之血祭修罗

    火影之血祭修罗

    一个叫叶旭的孩子,无意间穿越到了火影的时代,成为了鸣人的哥哥,看叶旭怎么改变火影的命运。
  • 古杭杂记

    古杭杂记

    本书为公版书,为不受著作权法限制的作家、艺术家及其它人士发布的作品,供广大读者阅读交流。
  • 神妖灭世

    神妖灭世

    他生来就是个小透明,他以为自己会透明一生。但他不知道的是,在遥远的异世大陆,一个庞大帝国的皇座正在等待他。他曾经爱吐槽爱玩游戏,有很多的朋友,可是他渐渐变得心如铁石,因为在成皇之路上,双手终究要沾满鲜血。