网店美工赢家宝典(第3章)课件

赢家宝典网店美工赢家宝典赢家宝典网店美工赢家宝典详解Dreamweaver之

代码其实很简单第3章Areyouready?详解Dreamweaver之第3Areyourea第3章详解Dreamweaver之代码其实很简单Dreamweaver的基本操作揭秘店铺常见特效代码第3章详解Dreamweaver之代码其实很简单Drea淘宝店铺装修是一门综合性艺术，要制作好的店铺装修设计不但要会用图像处理软件，如Photoshop，还要懂得将软件中的图片添加链接，使买家能够点击进入到所需页面的软件，这就用到了Dreamweaver，利用它去设计代码。说到Dreamweaver软件，一般给我们的感觉是制作网站用的，很难，根本学不会，其实Dreamweaver软件如果用在淘宝店铺装修这部分，操作是很简单的。淘宝店铺装修是一门综合性艺术，要制作好的店铺装修设计不但要会Dreamweaver软件是网页三剑客（Dreamweaver，Fireworks，Flash）中的最为重要的软件。卖家在装修自己店铺的时候，可能会遇到图片错位，一张图片只能加一个超链接，全屏海报和轮播图根本不会做等问题，其实这些问题只要用Dreamweaver软件去制作，都可以解决的。在这里，我们着重讲一下如何安装Dreamweaver软件。Dreamweaver软件是网页三剑客（Dreamweave步骤1在百度搜索栏中输入【Dreamweaver绿色版】，按【Enter】键进行搜索，然后在搜索结果中随便找到一个下载即可。因为正版Dreamweaver软件是需要购买使用的，所以这边最好下载绿色版，绿色版也属于破解版。操作步骤步骤1操作步骤步骤2下载的解压包请存在除C盘以外的其他盘内，下载完成后选中解压包点击鼠标右键，在弹出的菜单中选择【解压到当前文件夹】命令。步骤3下载的解压包请存在除C盘以外的其他盘内，下载完成后选中解压包点击鼠标右键，在弹出的菜单中选择【解压到当前文件夹】命令。操作步骤步骤2步骤3操作步骤步骤4安装成功后，在桌面会显示Dreamweaver软件图标。操作步骤步骤4操作步骤Dreamweaver软件建立文档的步骤操作较多，也有很多细节需要大家注意，如果不按照这个步骤操作的话，后期使用会有很大的麻烦，所以希望大家仔细学习本节内容，然后再进行操作。Dreamweaver软件建立文档的步骤操作较多，也有很多细步骤1双击桌面的Dreamweaver快捷方式进入软件欢迎界面。从弹出窗口中的【创建新项目】选项区中点击【HTML】按钮。操作步骤步骤1操作步骤步骤2点击软件界面右侧【文件】面板标签打开选项区，在其中的下拉列表中选择除C盘以外的其他盘存放店铺文档代码。步骤3点击【文件】面板中的【管理站点】按钮，打开【管理站点】窗口，在其中点击【新建】按钮，在弹出的菜单中选择【站点（S）】命令。操作步骤步骤2步骤3操作步骤步骤4点击【完成】按钮，在弹出【编辑文件】选项区第一个编辑框中将名称更改为【淘宝店铺代码】，点击【下一步】按钮。更改名称操作步骤步骤4更改名称操作步骤步骤5在弹出的【编辑文件，第2部分】选项区中，问题为【您是否打算使用服务器技术】，因为不涉及到建立网站，所以选择【否，我不想使用服务器技术】，再点击【下一步】按钮。步骤6在弹出的【编辑文件，第3部分】选项区中，问题为【在开发过程中，您打算如何使用您的文件？】，选择【编辑我的计算机上的本地副本，完成后再上传到服务器】，再点击【下一步】按钮。操作步骤步骤5步骤6操作步骤步骤7在弹出的【共享文件】选项区中，问题为【您如何连接到远程服务器？】，这部分请注意，因为淘宝不需要建立服务器，所以在下拉列表中选择【无】，点击【下一步】按钮。操作步骤步骤8在弹出的【总结】选项区中，保持默认参数，点击【完成】按钮。程序返回【管理站点】窗口中，点击【完成】按钮，完成站点的建设。步骤7操作步骤步骤8表格是淘宝店铺装修中最常用的制作代码的方法，操作十分简单，只要注意几个常容易出错的地方就可以。具体操作步骤如下：表格是淘宝店铺装修中最常用的制作代码的方法，操作十分简单，只操作步骤步骤1鼠标右键点击节中建立好的站点【淘宝店铺代码】，在弹出的菜单中选择【新建文件】命令，按【Enter】键确定默认名称，新建一个可执行的文件。创建文件操作步骤步骤1创建文件步骤2在新建好的【untitled.html】文件上双击鼠标左键，打开该文件。在左侧页面中点击【代码】按钮，按【Ctrl+A】组合键选中所有代码，然后按【Delete】键执行【删除】命令。操作步骤删除全部代码步骤2操作步骤删除全部代码操作步骤步骤3点击【设计】按钮回到编辑页面，点击【表格】按钮，打开【表格】对话框，在其中设置【行数】为【1】，【边框粗细】【单元格边距】【单元格间距】均为【0】，编辑好后点击【确定】按钮。【边框粗细】【单元格边距】【单元格间距】均必须为【0】，否则会影响添加到店铺之后的展示效果。操作步骤步骤3【边框粗细】【单元格边距】【单元格间距】均必表格编辑好后，需要添加商品图片，那么如何为表格添加商品图片呢？具体操作步骤如下：表格编辑好后，需要添加商品图片，那么如何为表格添加商品图片呢操作步骤步骤1鼠标点击制作好的表格内容区域，点击【图像】按钮，在弹出的下拉列表中选择【图像】，打开【选择图像源文件】对话框，在其中选择本书配套素材【1.jpg】文件，点击【确定】按钮。操作步骤步骤1操作步骤步骤2此时系统会弹出2个提示框。因为淘宝不需要制作网站，而且所用图片都是淘宝空间的网络图片，所以在这里依次选择【否】和【取消】命令。操作步骤步骤2操作步骤步骤3根据步骤2中的操作，商品图片就插入到了表格中，但是如果这样直接上传到淘宝店铺中是无法在店铺中显示的，因为图片只是本地链接，需将【图片的源文件地址】更换成淘宝店铺【图片空间】中的【图片网络地址】。步骤4下面我们就把制作好的海报上传到【图片空间】。在浏览器中登录淘宝店铺，在【卖家中心】页面【店铺管理】选项栏下，点击【图片空间】按钮。选择【图片空间】操作步骤步骤3步骤4选择【图片空间】操作步骤步骤5进入【图片空间】操作页面，在其中点击【上传图片】按钮。【图片空间】页面操作步骤步骤5【图片空间】页面步骤6在弹出的【上传图片】窗口中点击【高速上传】设置区中的【点击上传】按钮。操作步骤步骤6操作步骤操作步骤步骤7在弹出的【添加文件】窗口中勾选要上传的图片，点击【选好了】按钮。在弹出的窗口中选择【立即上传】按钮，完成图片的上传。选择图片操作步骤步骤7选择图片操作步骤步骤8将鼠标移到【图片空间】页面中上传成功的图片上，点击弹出的【复制链接】按钮，我们就获取到了该图片在图片空间中的【图片网络地址】。操作步骤步骤8操作步骤步骤9返回Deamweaver软件中，点击插入好的商品图片，在软件页面下方的【属性】面板【源文件】编辑框中点击，插入鼠标指针，按【Ctrl+A】组合键选中全部内容，按【Ctrl+V】组合键执行粘贴命令，将【图片的源文件地址】更换成图片空间中的【图片网络地址】，按【Ctrl+S】组合键保存表格即可。粘贴链接操作步骤步骤9粘贴链接在制作代码时，一定要将【图片的源文件地址】更换成图片空间中的【图片网络地址】，否则图片是无法在店铺中显示的。在制作代码时，一定要将【图片的源文件地址】更换成图片空间中的在表格中加入图片后，如何才能让买家在点击图片时跳转到对应的商品页面呢？具体操作步骤如下：在表格中加入图片后，如何才能让买家在点击图片时跳转到对应的商操作步骤步骤1在淘宝店铺中，进入点击图片（节上传的）跳转后的对应商品页面，复制在浏览器中出现的商品地址。复制链接地址步骤2在Dreamweaver中，点击表格中的商品图片，在【属性】面板中选中【链接】编辑框中的全部内容，按【Ctrl+V】组合键执行【粘贴】命令，网页地址被添加到【属性】面板中的【链接】编辑框内。粘贴链接地址操作步骤步骤1复制链接地址步骤2粘贴链接地址根据节的操作，商品图片已经加入了超链接，那么如何将制作好的图片添加到店铺展示呢？具体操作步骤如下：根据节的操作，商品图片已经加入了超链接，那么如何将制作好的图操作步骤步骤1在Dreamweaver操作页面中点击【代码】按钮，将编辑框中的所有代码内容全部选中，快捷键为【Ctrl+A】，按【Ctrl+C】组合键执行【复制】命令。复制全部代码操作步骤步骤1复制全部代码步骤2在淘宝店铺【卖家中心】页面【店铺管理】选项栏下，点击【店铺装修】按钮，进入【店铺装修】操作页面，将页面左侧的【自定义区】模块拖到页面中，释放按钮后，新建【自定义内容区】模块。操作步骤创建【自定义内容区】模块步骤2操作步骤创建【自定义内容区】模块步骤3将鼠标移动到新建的【自定义内容区】模块中，此时模块的右上角出现【编辑】按钮，点击该按钮。操作步骤步骤4在弹出的【自定义内容区】对话框中，点击【显示标题】设置区中的【不显示】单选钮，点击【源码】按钮，然后将复制好的代码粘贴到编辑框中，点击【确定】按钮。步骤3操作步骤步骤4步骤4根据步骤4中的操作，带有超链接的商品图片就展示到了店铺中，点击页面右上角的【发布】按钮，买家就可以在店铺内看到你的成果了。操作步骤发布图片步骤4操作步骤发布图片删除或者复制代码的时候，一定要将所有代码全部删除或者复制，最好利用快捷键【Ctrl+A】，选中全部代码之后再执行删除或者复制命令。删除或者复制代码的时候，一定要将所有代码全部删除或者复制，最我们已经学了Dreamweaver软件的基础操作，但淘宝中还存在很多特效的首页效果，那它们又是如何制作的呢？这里主要讲解淘宝中3个常用的特效，包括单张全屏海报特效代码、全屏轮播海报特效代码和悬浮背景特效代码。我们已经学了Dreamweaver软件的基础操作，但淘宝中还在浏览淘宝店铺的时候会看到很多店招下边为一张全屏海报，但是当买家自己设计的时候，每次都被自定义模块的限制宽度束缚套在里面不能实现全屏，在这里就来学习怎么样挣脱自定义模块的束缚，实现全屏的海报。在浏览淘宝店铺的时候会看到很多店招下边为一张全屏海报，但是当操作步骤步骤1将本书配套素材【素材与实例】丨【第3章】文件夹中的【2.jpg】图像文件，上传到店铺【图片空间】内。上传图片操作步骤步骤1上传图片操作步骤步骤2打开Dreamweaver软件，并在【文件】面板中【淘宝店铺代码】站点下新建一个文件，双击该文件将其打开。点击页面中的【代码】按钮，依次按快捷键【Ctrl+A】【Delete】将代码全部删除，然后将本书配套素材【单张全屏海报特效代码.txt】文件中的特效代码粘贴到编辑区域内。特效代码操作步骤步骤2特效代码粘贴特效代码操作步骤粘贴特效代码操作步骤操作步骤步骤3根据全屏海报的图片尺寸来调整代码中图片高度【height:655PX】，如图片高度为700像素，这里需要将【655】改成【700】；将【产品链接地址】替换成商品浏览器上的地址；将【图片网络地址】替换成商品上传到【图片空间】的地址。修改代码操作步骤步骤3修改代码操作步骤步骤4根据节所学将所有代码添加到【自定义内容区】模块中，点击【发布】按钮将全屏海报展示给买家。最终效果操作步骤步骤4最终效果请在英文输入法状态下输入代码和更改代码内的信息。请在英文输入法状态下输入代码和更改代码内的信息。有的卖家喜欢第一屏是单张全屏海报，有的卖家喜欢第一屏可以添加多张全屏海报，使海报图片进行轮播展示，在这里以三张全屏海报的设计为案例进行讲解。具体操作步骤如下：有的卖家喜欢第一屏是单张全屏海报，有的卖家喜欢第一屏可以添加操作步骤步骤1将本书配套素材【海报1.jpg】【海报2.jpg】【海报3.jpg】图像文件上传到淘宝店铺【图片空间】内，可以看到这3张全屏海报的尺寸相同。上传图片操作步骤步骤1上传图片操作步骤步骤2打开Dreamweaver软件，并在【淘宝店铺代码】站点下新建一个文件，打开该文件。点击页面中的【代码】按钮，将编辑区的代码全部删除，然后将本书配套素材【全屏轮播海报特效代码.txt】文件中的特效代码粘贴到编辑区域内。特效代码操作步骤步骤2特效代码操作步骤操作步骤粘贴代码操作步骤粘贴代码操作步骤步骤3将其中的【height:602PX】分别替换成海报的高度，将【产品链接地址】替换成商品浏览器上的地址；将【图片网络地址】替换成商品上传到图片空间的地址。操作步骤修改代码步骤3操作步骤修改代码步骤3根据节所学将所有代码添加到【自定义内容区】模块中，点击【发布】按钮将全屏轮播海报展示给买家。操作步骤最终效果步骤3操作步骤最终效果全屏轮播海报可以添加2～5张，请根据所需海报数量进行添加。全屏轮播海报可以添加2～5张，请根据所需海报数量进行添加。悬浮背景是什么？它的作用是什么？很多卖家对悬浮背景不是很了解，其实悬浮背景是指一个背景永远跟随着页面展示，很多天猫和大卖家必备的店铺促销利器。具体操作步骤如下：悬浮背景是什么？它的作用是什么？很多卖家对悬浮背景不是很了解步骤1将本书配套素材【3.jpg】图像文件上传到店铺【图片空间】内。操作步骤步骤1操作步骤步骤2打开Dreamweaver软件，并在【淘宝店铺代码】站点下新建一个文件，打开该文件。点击页面中的【代码】按钮，将编辑区的代码全部删除，然后将本书配套素材【悬浮背景特效代码.txt】文件中的特效代码粘贴到编辑区域内。操作步骤特效代码步骤2操作步骤特效代码粘贴代码操作步骤粘贴代码操作步骤步骤3将【图片网络地址】替换成商品上传到【图片空间】的地址。操作步骤修改代码步骤3操作步骤修改代码步骤4进入【店铺装修】页面，将鼠标移至【导航】模块中，点击右上角的【编辑】按钮，在弹出的【导航】对话框中点击【显示设置】选项卡，将编辑好的代码【粘贴】到编辑区域内，点击【确定】按钮。操作步骤步骤4操作步骤步骤5根据步骤4中的操作完成悬浮背景色设置，点击【发布】按钮将悬浮背景展示给买家。操作步骤最终效果步骤5操作步骤最终效果悬浮背景的图片高度可以设置在800～1000像素之间，推荐使用800像素。悬浮背景的图片高度可以设置在800～1000像素之间，推荐使赢家宝典网店美工赢家宝典赢家宝典网店美工赢家宝典详解Dreamweaver之

代码其实很简单第3章Areyouready?详解Dreamweaver之第3Areyourea第3章详解Dreamweaver之代码其实很简单Dreamweaver的基本操作揭秘店铺常见特效代码第3章详解Dreamweaver之代码其实很简单Drea淘宝店铺装修是一门综合性艺术，要制作好的店铺装修设计不但要会用图像处理软件，如Photoshop，还要懂得将软件中的图片添加链接，使买家能够点击进入到所需页面的软件，这就用到了Dreamweaver，利用它去设计代码。说到Dreamweaver软件，一般给我们的感觉是制作网站用的，很难，根本学不会，其实Dreamweaver软件如果用在淘宝店铺装修这部分，操作是很简单的。淘宝店铺装修是一门综合性艺术，要制作好的店铺装修设计不但要会Dreamweaver软件是网页三剑客（Dreamweaver，Fireworks，Flash）中的最为重要的软件。卖家在装修自己店铺的时候，可能会遇到图片错位，一张图片只能加一个超链接，全屏海报和轮播图根本不会做等问题，其实这些问题只要用Dreamweaver软件去制作，都可以解决的。在这里，我们着重讲一下如何安装Dreamweaver软件。Dreamweaver软件是网页三剑客（Dreamweave步骤1在百度搜索栏中输入【Dreamweaver绿色版】，按【Enter】键进行搜索，然后在搜索结果中随便找到一个下载即可。因为正版Dreamweaver软件是需要购买使用的，所以这边最好下载绿色版，绿色版也属于破解版。操作步骤步骤1操作步骤步骤2下载的解压包请存在除C盘以外的其他盘内，下载完成后选中解压包点击鼠标右键，在弹出的菜单中选择【解压到当前文件夹】命令。步骤3下载的解压包请存在除C盘以外的其他盘内，下载完成后选中解压包点击鼠标右键，在弹出的菜单中选择【解压到当前文件夹】命令。操作步骤步骤2步骤3操作步骤步骤4安装成功后，在桌面会显示Dreamweaver软件图标。操作步骤步骤4操作步骤Dreamweaver软件建立文档的步骤操作较多，也有很多细节需要大家注意，如果不按照这个步骤操作的话，后期使用会有很大的麻烦，所以希望大家仔细学习本节内容，然后再进行操作。Dreamweaver软件建立文档的步骤操作较多，也有很多细步骤1双击桌面的Dreamweaver快捷方式进入软件欢迎界面。从弹出窗口中的【创建新项目】选项区中点击【HTML】按钮。操作步骤步骤1操作步骤步骤2点击软件界面右侧【文件】面板标签打开选项区，在其中的下拉列表中选择除C盘以外的其他盘存放店铺文档代码。步骤3点击【文件】面板中的【管理站点】按钮，打开【管理站点】窗口，在其中点击【新建】按钮，在弹出的菜单中选择【站点（S）】命令。操作步骤步骤2步骤3操作步骤步骤4点击【完成】按钮，在弹出【编辑文件】选项区第一个编辑框中将名称更改为【淘宝店铺代码】，点击【下一步】按钮。更改名称操作步骤步骤4更改名称操作步骤步骤5在弹出的【编辑文件，第2部分】选项区中，问题为【您是否打算使用服务器技术】，因为不涉及到建立网站，所以选择【否，我不想使用服务器技术】，再点击【下一步】按钮。步骤6在弹出的【编辑文件，第3部分】选项区中，问题为【在开发过程中，您打算如何使用您的文件？】，选择【编辑我的计算机上的本地副本，完成后再上传到服务器】，再点击【下一步】按钮。操作步骤步骤5步骤6操作步骤步骤7在弹出的【共享文件】选项区中，问题为【您如何连接到远程服务器？】，这部分请注意，因为淘宝不需要建立服务器，所以在下拉列表中选择【无】，点击【下一步】按钮。操作步骤步骤8在弹出的【总结】选项区中，保持默认参数，点击【完成】按钮。程序返回【管理站点】窗口中，点击【完成】按钮，完成站点的建设。步骤7操作步骤步骤8表格是淘宝店铺装修中最常用的制作代码的方法，操作十分简单，只要注意几个常容易出错的地方就可以。具体操作步骤如下：表格是淘宝店铺装修中最常用的制作代码的方法，操作十分简单，只操作步骤步骤1鼠标右键点击节中建立好的站点【淘宝店铺代码】，在弹出的菜单中选择【新建文件】命令，按【Enter】键确定默认名称，新建一个可执行的文件。创建文件操作步骤步骤1创建文件步骤2在新建好的【untitled.html】文件上双击鼠标左键，打开该文件。在左侧页面中点击【代码】按钮，按【Ctrl+A】组合键选中所有代码，然后按【Delete】键执行【删除】命令。操作步骤删除全部代码步骤2操作步骤删除全部代码操作步骤步骤3点击【设计】按钮回到编辑页面，点击【表格】按钮，打开【表格】对话框，在其中设置【行数】为【1】，【边框粗细】【单元格边距】【单元格间距】均为【0】，编辑好后点击【确定】按钮。【边框粗细】【单元格边距】【单元格间距】均必须为【0】，否则会影响添加到店铺之后的展示效果。操作步骤步骤3【边框粗细】【单元格边距】【单元格间距】均必表格编辑好后，需要添加商品图片，那么如何为表格添加商品图片呢？具体操作步骤如下：表格编辑好后，需要添加商品图片，那么如何为表格添加商品图片呢操作步骤步骤1鼠标点击制作好的表格内容区域，点击【图像】按钮，在弹出的下拉列表中选择【图像】，打开【选择图像源文件】对话框，在其中选择本书配套素材【1.jpg】文件，点击【确定】按钮。操作步骤步骤1操作步骤步骤2此时系统会弹出2个提示框。因为淘宝不需要制作网站，而且所用图片都是淘宝空间的网络图片，所以在这里依次选择【否】和【取消】命令。操作步骤步骤2操作步骤步骤3根据步骤2中的操作，商品图片就插入到了表格中，但是如果这样直接上传到淘宝店铺中是无法在店铺中显示的，因为图片只是本地链接，需将【图片的源文件地址】更换成淘宝店铺【图片空间】中的【图片网络地址】。步骤4下面我们就把制作好的海报上传到【图片空间】。在浏览器中登录淘宝店铺，在【卖家中心】页面【店铺管理】选项栏下，点击【图片空间】按钮。选择【图片空间】操作步骤步骤3步骤4选择【图片空间】操作步骤步骤5进入【图片空间】操作页面，在其中点击【上传图片】按钮。【图片空间】页面操作步骤步骤5【图片空间】页面步骤6在弹出的【上传图片】窗口中点击【高速上传】设置区中的【点击上传】按钮。操作步骤步骤6操作步骤操作步骤步骤7在弹出的【添加文件】窗口中勾选要上传的图片，点击【选好了】按钮。在弹出的窗口中选择【立即上传】按钮，完成图片的上传。选择图片操作步骤步骤7选择图片操作步骤步骤8将鼠标移到【图片空间】页面中上传成功的图片上，点击弹出的【复制链接】按钮，我们就获取到了该图片在图片空间中的【图片网络地址】。操作步骤步骤8操作步骤步骤9返回Deamweaver软件中，点击插入好的商品图片，在软件页面下方的【属性】面板【源文件】编辑框中点击，插入鼠标指针，按【Ctrl+A】组合键选中全部内容，按【Ctrl+V】组合键执行粘贴命令，将【图片的源文件地址】更换成图片空间中的【图片网络地址】，按【Ctrl+S】组合键保存表格即可。粘贴链接操作步骤步骤9粘贴链接在制作代码时，一定要将【图片的源文件地址】更换成图片空间中的【图片网络地址】，否则图片是无法在店铺中显示的。在制作代码时，一定要将【图片的源文件地址】更换成图片空间中的在表格中加入图片后，如何才能让买家在点击图片时跳转到对应的商品页面呢？具体操作步骤如下：在表格中加入图片后，如何才能让买家在点击图片时跳转到对应的商操作步骤步骤1在淘宝店铺中，进入点击图片（节上传的）跳转后的对应商品页面，复制在浏览器中出现的商品地址。复制链接地址步骤2在Dreamweaver中，点击表格中的商品图片，在【属性】面板中选中【链接】编辑框中的全部内容，按【Ctrl+V】组合键执行【粘贴】命令，网页地址被添加到【属性】面板中的【链接】编辑框内。粘贴链接地址操作步骤步骤1复制链接地址步骤2粘贴链接地址根据节的操作，商品图片已经加入了超链接，那么如何将制作好的图片添加到店铺展示呢？具体操作步骤如下：根据节的操作，商品图片已经加入了超链接，那么如何将制作好的图操作步骤步骤1在Dreamweaver操作页面中点击【代码】按钮，将编辑框中的所有代码内容全部选中，快捷键为【Ctrl+A】，按【Ctrl+C】组合键执行【复制】命令。复制全部代码操作步骤步骤1复制全部代码步骤2在淘宝店铺【卖家中心】页面【店铺管理】选项栏下，点击【店铺装修】按钮，进入【店铺装修】操作页面，将页面左侧的【自定义区】模块拖到页面中，释放按钮后，新建【自定义内容区】模块。操作步骤创建【自定义内容区】模块步骤2操作步骤创建【自定义内容区】模块步骤3将鼠标移动到新建的【自定义内容区】模块中，此时模块的右上角出现【编辑】按钮，点击该按钮。操作步骤步骤4在弹出的【自定义内容区】对话框中，点击【显示标题】设置区中的【不显示】单选钮，点击【源码】按钮，然后将复制好的代码粘贴到编辑框中，点击【确定】按钮。步骤3操作步骤步骤4步骤4根据步骤4中的操作，带有超链接的商品图片就展示到了店铺中，点击页面右上角的【发布】按钮，买家就可以在店铺内看到你的成果了。操作步骤发布图片步骤4操作步骤发布图片删除或者复制代码的时候，一定要将所有代码全部删除或者复制，最好利用快捷键【Ctrl+A】，选中全部代码之后再执行删除或者复制命令。删除或者复制代码的时候，一定要将所有代码全部删除或者复制，最我们已经学了Dreamweaver软件的基础操作，但淘宝中还存在很多特效的首页效果，那它们又是如何制作的呢？这里主要讲解淘宝中3个常用的特效，包括单张全屏海报特效代码、全屏轮播海报特效代码和悬浮背景特效代码。我们已经学了Dreamweaver软件的基础操作，但淘宝中还在浏览淘宝店铺的时候会看到很多店招下边为一张全屏海报，但是当买家自己设计的时候，每次都被自定义模块的限制宽度束缚套在里面不能实现全屏，在这里就来学习怎么样挣脱自定义模块的束缚，实现全屏的海报。在浏览淘宝店铺的时候会看到很多店招下边为一张全屏海报，但是当操作步骤步骤1将本书配套素材【素材与实例】丨【第3章】文件夹中的【2.jpg】图像文件，上传到店铺【图片空间】内。上传图片操作步骤步骤1上传图片操作步骤步骤2打开Dreamweaver软件，并在【文件】面板中【淘宝店铺代码】站点下新建一个文件，双击该文件将其打开。点击页面中的【代码】按钮，依次按快捷键【Ctrl+A】【Delete】将代码全部删除，然后将本书配套素材【单张全屏海报特效代码.txt】文件中的特效代码粘贴到编辑区域内。特效代码操作步骤步骤2特效代码粘贴特效代码操作步骤粘贴特效代码操作步骤操作步骤步骤3根据全屏海报的图片尺寸来调整代码中图片高度【height:655PX】，如图片高度为700像素，这里需要将【655】改成【700】；将【产品链接地址】替换成商品浏览器上的地址；将【图片网络地址】替换成商品上传到【图片空间】的地址。修改代码操作步骤步骤3修改代码操作步骤步骤4根据节所学将所有代码添加到【自定义内容区】模块中，点击【发布】按钮将全屏海报展示给买家。最终效果操作步骤步骤4最终效果请在英文输入法状态下输入代码和更改代码内