网店装修设计图切片与优化技术.pdfVIP

设计图的切片与优化

在中制作完成的网店装修设计图通常是不能直接应用于网店装修的，为了使能够满

足网页功能设计及网络传输的要求，在进行的发布与应用之前，还需要根据实际情况对设计图进行

切片及优化处理。本节便将对网店装修设计图的切片、优化进行讲解。

13.1.1

按功能对设计图进行切片

在网店的页面中，很多上会有跳转到其他页面的或实现特殊功能的热点区域，要制作出这类

效果，需要先将设计图分割为不同大小的切片，再针对特定切片进行编辑。接下来就讲解如何使用

Photoshop中的“切片工具”分割网店装修设计图。

如果想要创建正方形的切片，只需在单击并拖曳鼠标时按住Shift键即可。

13.1.2

优化切片提升浏览体验

一整张大需要完才能在浏览器中显示出来，如果将其分割成多张小，那么浏览器就可以同

时多张，无形中缩短了浏览者的等待时间。另一方面，如果的某些区域适合以格式进行优化，

而其余部分适合以格式进行优化，就可以通过切片操作将整张分割，然后分别以不同的格式对

各切片进行优化，这样便能发挥不同格式的优势和特长，既不影响视觉效果，又能缩小文件的体积，

也加快了的速度。

对切片后的设计图执行“文件＞为Web

所用格式”菜单命令，在打开的“为Web

所用格式”框中单击某一个切片，就可以

在右边的选项组中为这个切片设置不同的文件

格式等参数，根据实际需要对进行优化处

理，如下图所示。

网页制作

网店装修设计实际上就是网页设计与制作，不可避免地要用到网页代码，如、等。网页制作

中常见的基本任务，如制作表格、图像、图文混排、创建等，如果完全采用手工编写代码的方式

来完成，对一些没有程序设计基础的网店店主来说几乎是不可能的。值得庆幸的是，在中我

们可以用近乎于“所见即所得”的方式来完成上述任务。

13.2.1

利用表格展示商品详情信息通过实例详细讲解在Dreamweaver中用表格展现商品详情信息的方法。

1.运行DreamweaverCC，可以看到欢迎界面的“新建”选

项组中包含了多种文件格式的选项，单击“HTML”选项，新

建一个空白的HTML文件。

2.单击“”面板中的“表格”按钮，打开“表格”

框，在其中设置表格的行数、列数等参数，具体

的设置可以根据商品详情信息的数量和类别来确定。要

注意商品详情页面中表格的宽度最大为740像素。

3.完成“表格”框的设置后单击“确定”按钮，

在预览窗口中可以看到添加的表格。为了直观地观察表

格制作效果和代码之间的关系，单击“拆分”按钮，将

设计视图和代码视图同时显示出来。

4.在“属性”面板中设置“水平”选项为“居中对齐”。可以看到第二列单元格中的文字以居中对齐的方

式显示，同时代码区域也相应地发生了变化。设置字体大小。

5.选中第一列单元格，在“属性”面板中单击“背景颜色”选项后的色块，打开颜色选择面板，在其中单

击黑块，将第一列单元格的背景设置为黑色。

6.保持选中的第一列单元格不变，在“属性”面板中单击文字颜色的色块，在打开的颜色选择面板中选择

白块，将第一列单元格的文字颜色调整为白色，制作出黑底白字的显示效果。

7.完成表格的编辑，就需要对表格进行保存了。执行“文件＞另存为”菜单命令，打开“另存为”对

话框，在其中设置文件的名称、保存格式和保存位置，这里选择使用HTML文件格式进行保存，完成设置后

单击“保存”按钮。

8.完成文件的保存操作后，将得到相应的HTML文件。双击该文件，即可使用计算机默认的浏览器将文件打开，

可以看到之前在Dreamweaver中编辑的表格在浏览器中的显示效果。

13.2.2

在页面中

之前我们通过制作表格展示了商品的详情