淘宝网店装修第5章(2)

来源：网络收集时间：2026-09-10

导读： 80 图5-52 “存储为Web和设备所用格式”对话框图5-53 “将优化结果存储为”对话框击【保存】按钮，将切片存储到5-54所示。图5-54 存储优化后的图片高清晰版淘宝网店装修将公告模板生成网页在Photoshop中将模

图5-52 “存储为Web和设备所用格式”对话框

图5-53 “将优化结果存储为”对话框

击【保存】按钮，将切片存储到5-54所示。

图5-54 存储优化后的图片

高清晰版淘宝网店装修

将公告模板生成网页

在Photoshop中将模板设计并生成切片后，还需要将其制作为HTML网页，我们以

Dreamweaver CS5版本为讲解平台，来学习其制作方法，具体操作步骤如下

：

Dreamweaver CS5软件，其界面如图5-55所示。

图5-55 启动Dreamweaver CS5

“新建”列表中单击“HTML”选项，新建一个空白HTML文件，如图5-56所示。

图5-56 新建空白HTML文件【文件】【保存】|命令，如图5-57所示。

图5-57 选择“保存”命令

文本框中输入“gonggao.html”，将文件保存到images文件夹中，如图5-58

所示。

从面板中单击【表格】按钮，如图5-59

所示。

设置行数为“3”，列数为“1”，表格宽度为“304像素”，边框粗

细、单元格边距、单元格间距均为“0”，如图5-60

所示。

图5-58 “另存为”对话框

高清晰版淘宝网店装修

淘宝网店装修实战

图5-59 单击“表格”按钮

图5-60 “表格”对话框

3行15-61所示。

图5-61 在页面中插入表格

1 行单元格中，在“插入”

面板中单击【图像】按钮，打开“选择图像源文件”对话框，选择图片保存的文件夹

images，并从中选中需要插入的图片gonggao_01.gif，如图5-62所示。

图5-62 选择要插入的图片

辅助功能属性”对话框，如图5-63所示。

图5-63 “图像标签辅助功能属性”对话框

格中。

3行单元格中插入

图片，完成后如图5-64

所示。

高清晰版淘宝网店装修

图5-64 插入公告栏底部图片2行单元格内，将视图加背景图片代码“background=" gonggao_02.gif"”

，如图5-65所示。

图5-65 添加单元格背景图片代码

图5-66 添加了背景图片

第2

行单元格中，在“插入”面板中单击【表格】

按钮，

打开“表格”对话框，

设置参数如图

5-67所示。

图5-67 设置“表格”对话框

面板“对齐”下拉菜单中选择“居中对齐”选项。

1行单元格，

高清晰版淘宝网店装修

淘宝网店装修实战

插入“gonggao_05.gif”文字图片，如图5-70

。

F12】键在浏览器中

1行单元格中时，在“属性”预览效果。面板“水平”下拉菜单中选择“居中对齐”选项，将文字图片设置为居中对齐，如图5-68所示。

图5-68 将图片水平居中

2行单元格中，输入相应的公告文字，如图5-69所示。

图5-69 输入公告信息文字

在店铺中应用公告模板

HMTL页面制作好后，就需要将HTML代码应用于店铺中，具体步骤如下

：

络空间中，登录“我的淘宝”，在“店铺管理”

列表中单击“店铺装修”超链接。

“店铺公告”中的“编辑”超链接，如图5-70所示。

图5-70 单击 “编辑”超链接

单击【编辑HMTL源码】按钮，如图5-71

所示。为在“我的淘宝”中管理店铺公告只能粘贴源代码，因此源代码中调用的图

片要指向虚拟主机中发布的图片，返回到

Dreamweaver CS5中，将视图切换为“代码”视图，

在显示的源代码中找到原来图片的路径，

高清晰版淘宝网店装修

将其替换为图片上传到网络后的路径，如图

5-72所示。

图5-71“店铺公告设置”对话框

图5-72 替换图片路径

<body>标签中<table>…</table>之间的全部代码，单击鼠标右键选择【拷贝】命令。

制的源码粘贴到店铺公告文本框中，如图5-73所示。

图5-73 在店铺公告文本框中粘贴代码

HMTL源码】按钮，返回到编辑器方式，可以看到制作的公告页已经

显示在公告区内，如图5-74

所示。

窗口，打开“查看我的店铺”页面，可以看到公告栏中的内容已经发布在店铺中，如图5-75所示。

图5-74 在编辑器中预览公告页效果

图5-75 公告模板发布在店铺中

淘宝网店装修第5章(2).doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/wenku/43666.html（转载请注明文章来源）

上一篇：5-4 电场强度通量高斯定理
下一篇：管理信息系统第四版(黄梯云)课后习题答案