网店美工赢家宝典(第3章)详解Dreamweaver之代码其实很简单

详解Dreamweaver之

代码其实很简单第3章Areyouready?第3章详解Dreamweaver之代码其实很简单Dreamweaver的基本操作3.13.2揭秘店铺常见特效代码淘宝店铺装修是一门综合性艺术，要制作好的店铺装修设计不但要会用图像处理软件，如Photoshop，还要懂得将软件中的图片添加链接，使买家能够点击进入到所需页面的软件，这就用到了Dreamweaver，利用它去设计代码。说到Dreamweaver软件，一般给我们的感觉是制作网站用的，很难，根本学不会，其实Dreamweaver软件如果用在淘宝店铺装修这部分，操作是很简单的。Dreamweaver软件是网页三剑客（Dreamweaver，Fireworks，Flash）中的最为重要的软件。卖家在装修自己店铺的时候，可能会遇到图片错位，一张图片只能加一个超链接，全屏海报和轮播图根本不会做等问题，其实这些问题只要用Dreamweaver软件去制作，都可以解决的。在这里，我们着重讲一下如何安装Dreamweaver软件。步骤1

在百度搜索栏中输入【Dreamweaver绿色版】，按【Enter】键进行搜索，然后在搜索结果中随便找到一个下载即可。因为正版Dreamweaver软件是需要购买使用的，所以这边最好下载绿色版，绿色版也属于破解版。操作步骤步骤2

下载的解压包请存在除C盘以外的其他盘内，下载完成后选中解压包点击鼠标右键，在弹出的菜单中选择【解压到当前文件夹】命令。步骤3

下载的解压包请存在除C盘以外的其他盘内，下载完成后选中解压包点击鼠标右键，在弹出的菜单中选择【解压到当前文件夹】命令。操作步骤步骤4

安装成功后，在桌面会显示Dreamweaver软件图标。操作步骤Dreamweaver软件建立文档的步骤操作较多，也有很多细节需要大家注意，如果不按照这个步骤操作的话，后期使用会有很大的麻烦，所以希望大家仔细学习本节内容，然后再进行操作。步骤1

双击桌面的Dreamweaver快捷方式进入软件欢迎界面。从弹出窗口中的【创建新项目】选项区中点击【HTML】按钮。操作步骤步骤2

点击软件界面右侧【文件】面板标签打开选项区，在其中的下拉列表中选择除C盘以外的其他盘存放店铺文档代码。步骤3

点击【文件】面板中的【管理站点】按钮，打开【管理站点】窗口，在其中点击【新建】按钮，在弹出的菜单中选择【站点（S）】命令。操作步骤步骤4

点击【完成】按钮，在弹出【编辑文件】选项区第一个编辑框中将名称更改为【淘宝店铺代码】，点击【下一步】按钮。更改名称操作步骤步骤5

在弹出的【编辑文件，第2部分】选项区中，问题为【您是否打算使用服务器技术】，因为不涉及到建立网站，所以选择【否，我不想使用服务器技术】，再点击【下一步】按钮。步骤6

在弹出的【编辑文件，第3部分】选项区中，问题为【在开发过程中，您打算如何使用您的文件？】，选择【编辑我的计算机上的本地副本，完成后再上传到服务器】，再点击【下一步】按钮。操作步骤步骤7

在弹出的【共享文件】选项区中，问题为【您如何连接到远程服务器？】，这部分请注意，因为淘宝不需要建立服务器，所以在下拉列表中选择【无】，点击【下一步】按钮。操作步骤步骤8

在弹出的【总结】选项区中，保持默认参数，点击【完成】按钮。程序返回【管理站点】窗口中，点击【完成】按钮，完成站点的建设。表格是淘宝店铺装修中最常用的制作代码的方法，操作十分简单，只要注意几个常容易出错的地方就可以。具体操作步骤如下：操作步骤步骤1

鼠标右键点击3.1.2节中建立好的站点【淘宝店铺代码】，在弹出的菜单中选择【新建文件】命令，按【Enter】键确定默认名称，新建一个可执行的文件。创建文件步骤2

在新建好的【untitled.html】文件上双击鼠标左键，打开该文件。在左侧页面中点击【代码】按钮，按【Ctrl+A】组合键选中所有代码，然后按【Delete】键执行【删除】命令。操作步骤删除全部代码操作步骤步骤3

点击【设计】按钮回到编辑页面，点击【表格】按钮，打开【表格】对话框，在其中设置【行数】为【1】，【边框粗细】【单元格边距】【单元格间距】均为【0】，编辑好后点击【确定】按钮。【边框粗细】【单元格边距】【单元格间距】均必须为【0】，否则会影响添加到店铺之后的展示效果。表格编辑好后，需要添加商品图片，那么如何为表格添加商品图片呢？具体操作步骤如下：操作步骤步骤1

鼠标点击制作好的表格内容区域，点击【图像】按钮，在弹出的下拉列表中选择【图像】，打开【选择图像源文件】对话框，在其中选择本书配套素材【1.jpg】文件，点击【确定】按钮。操作步骤步骤2

此时系统会弹出2个提示框。因为淘宝不需要制作网站，而且所用图片都是淘宝空间的网络图片，所以在这里依次选择【否】和【取消】命令。操作步骤步骤3

根据步骤2中的操作，商品图片就插入到了表格中，但是如果这样直接上传到淘宝店铺中是无法在店铺中显示的，因为图片只是本地链接，需将【图片的源文件地址】更换成淘宝店铺【图片空间】中的【图片网络地址】。步骤4

下面我们就把制作好的海报上传到【图片空间】。在浏览器中登录淘宝店铺，在【卖家中心】页面【店铺管理】选项栏下，点击【图片空间】按钮。选择【图片空间】操作步骤步骤5

进入【图片空间】操作页面，在其中点击【上传图片】按钮。【图片空间】页面步骤6

在弹出的【上传图片】窗口中点击【高速上传】设置区中的【点击上传】按钮。操作步骤操作步骤步骤7

在弹出的【添加文件】窗口中勾选要上传的图片，点击【选好了】按钮。在弹出的窗口中选择【立即上传】按钮，完成图片的上传。选择图片操作步骤步骤8

将鼠标移到【图片空间】页面中上传成功的图片上，点击弹出的【复制链接】按钮，我们就获取到了该图片在图片空间中的【图片网络地址】。操作步骤步骤9

返回Deamweaver软件中，点击插入好的商品图片，在软件页面下方的【属性】面板【源文件】编辑框中点击，插入鼠标指针，按【Ctrl+A】组合键选中全部内容，按【Ctrl+V】组合键执行粘贴命令，将【图片的源文件地址】更换成图片空间中的【图片网络地址】，按【Ctrl+S】组合键保存表格即可。粘贴链接在制作代码时，一定要将【图片的源文件地址】更换成图片空间中的【图片网络地址】，否则图片是无法在店铺中显示的。在表格中加入图片后，如何才能让买家在点击图片时跳转到对应的商品页面呢？具体操作步骤如下：操作步骤步骤1

在淘宝店铺中，进入点击图片（3.1.3节上传的）跳转后的对应商品页面，复制在浏览器中出现的商品地址。复制链接地址步骤2

在Dreamweaver中，点击表格中的商品图片，在【属性】面板中选中【链接】编辑框中的全部内容，按【Ctrl+V】组合键执行【粘贴】命令，网页地址被添加到【属性】面板中的【链接】编辑框内。粘贴链接地址根据3.1.5节的操作，商品图片已经加入了超链接，那么如何将制作好的图片添加到店铺展示呢？具体操作步骤如下：操作步骤步骤1

在Dreamweaver操作页面中点击【代码】按钮，将编辑框中的所有代码内容全部选中，快捷键为【Ctrl+A】，按【Ctrl+C】组合键执行【复制】命令。复制全部代码步骤2

在淘宝店铺【卖家中心】页面【店铺管理】选项栏下，点击【店铺装修】按钮，进入【店铺装修】操作页面，将页面左侧的【自定义区】模块拖到页面中，释放按钮后，新建【自定义内容区】模块。操作步骤创建【自定义内容区】模块步骤3

将鼠标移动到新建的【自定义内容区】模块中，此时模块的右上角出现【编辑】按钮，点击该按钮。操作步骤步骤4

在弹出的【自定义内容区】对话框中，点击【显示标题】设置区中的【不显示】单选钮，点击【源码】按钮，然后将复制好的代码粘贴到编辑框中，点击【确定】按钮。步骤4

根据步骤4中的操作，带有超链接的商品图片就展示到了店铺中，点击页面右上角的【发布】按钮，买家就可以在店铺内看到你的成果了。操作步骤发布图片删除或者复制代码的时候，一定要将所有代码全部删除或者复制，最好利用快捷键【Ctrl+A】，选中全部代码之后再执行删除或者复制命令。我们已经学了Dreamweaver软件的基础操作，但淘宝中还存在很多特效的首页效果，那它们又是如何制作的呢？这里主要讲解淘宝中3个常用的特效，包括单张全屏海报特效代码、全屏轮播海报特效代码和悬浮背景特效代码。在浏览淘宝店铺的时候会看到很多店招下边为一张全屏海报，但是当买家自己设计的时候，每次都被自定义模块的限制宽度束缚套在里面不能实现全屏，在这里就来学习怎么样挣脱自定义模块的束缚，实现全屏的海报。操作步骤步骤1

将本书配套素材【素材与实例】丨【第3章】文件夹中的【2.jpg】图像文件，上传到店铺【图片空间】内。上传图片操作步骤步骤2

打开Dreamweaver软件，并在【文件】面板中【淘宝店铺代码】站点下新建一个文件，双击该文件将其打开。点击页面中的【代码】按钮，依次按快捷键【Ctrl+A】【Delete】将代码全部删除，然后将本书配套素材【单张全屏海报特效代码.txt】文件中的特效代码粘贴到编辑区域内。特效代码粘贴特效代码操作步骤操作步骤步骤3

根据全屏海报的图片尺寸来调整代码中图片高度【height:655PX】，如图片高度为700像素，这里需要将【655】改成【700】；将【产品链接地址】替换成商品浏览器上的地址；将【图片网络地址】替换成商品上传到【图片空间】的地址。修改代码操作步骤步骤4

根据3.1.5节所学将所有代码添加到【自定义内容区】模块中，点击【发布】按钮将全屏海报展示给买家。最终效果请在英文输入法状态下输入代码和更改代码内的信息。有的卖家喜欢第一屏是单张全屏海报，有的卖家喜欢第一屏可以添加多张全屏海报，使海报图片进行轮播展示，在这里以三张全屏海报的设计为案例进行讲解。具体操作步骤如下：操作步骤步骤1

将本书配套素材【海报1.jpg】【海报2.jpg】【海报3.jpg】图像文件上传到淘宝店铺【图片空间】内，可以看到这3张全屏海报的尺寸相同。上传图片操作步骤步骤2

打开Dreamweaver软件，并在【淘宝店铺代码】站点下新建一个文件，打开该文件。点击页面中的【代码】按钮，将编辑区的代码全部删除，然后将本书配套素材【全屏轮播海报特效代码.txt】文件中的特效代码粘贴到编辑区域内。特效代码操作步骤粘贴代码操作步骤步骤3

将其中的【height:602PX】分别替换成海报的高度，将【产品链接地址】替换成商品浏览器上的地址；将【图片网络地址】替换成商品上传到图片空间的地址。操作步骤修改代码步骤3

根据3.1.5节所学将所有代码添加到【自定义内容区】模块中，点击【发布】按钮将全屏轮播海报展示给买家。操作步骤最终效果全屏轮播海报可以添加2～5张，请根据所需海报数量进行添加。悬浮背景是什么？它的作用是什么？很多卖家对悬浮背景不是很了解，其实悬浮背景是指一个背景永远跟随着页面展示，很多天猫和大卖家必备的店铺促销利器。具体操作步骤如下：步骤1

将本书配套素材【3.jpg】图像文件上传到店铺【图片空间】内。操作步骤步骤2

打开Dreamweaver软件，并在【淘宝店铺代码】站点下新建一个文件，打开该文件。点击页面中的【代码】按钮，将编辑区的代码全部删除，然后将本书配套素材【悬浮背景特效代码.txt】文件中的特效代码粘贴到编辑区域内。操作步骤特效代码粘