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