想自己用 DW 做个电商小网页，放几款产品展示，却不知道从哪儿开始？担心做得不好看，顾客没耐心看下去，又怕步骤太复杂学不会，该怎么办呢？其实电商网页制作有固定流程，只要按步骤来，新手也能做出能看的页面。今天就带大家一步步做，还会说些实用技巧，看完就能上手。
一、基础问题：电商网页用 DW 做，有啥优势？
可能有人会问：“用在线模板做电商页更快，为啥要用 DW？” 因为 DW 能自由调整布局，比如想给某款产品加个 “限时折扣” 标签，用模板可能改不了，但用 DW 能直接画个标签放上去。
网友小李说：“我用模板做过一次，产品排列太死板，换成 DW 后，想怎么排就怎么排，页面看着灵活多了。” 所以要是你想做有自己风格的电商页，用 DW 更合适。不过要是完全没接触过网页制作，得有点耐心，第一次做肯定会慢些。
二、场景问题：电商网页该包含哪些部分？哪里找参考？
做之前得知道电商网页该有啥。至少要包含这几个部分：
- 顶部导航（放 “首页”“产品列表”“购物车”）；
- 产品展示区（放产品图片、名称、价格）；
- 底部信息（联系方式、售后说明）。
不知道怎么排的话，可以打开你常逛的小电商网站，截图保存，照着它的布局做 —— 不用一模一样，参考位置就行。小编第一次做时，就参考了一家手作店的网页，把产品区排成两列，看着挺整齐。
三、具体步骤：用 DW 做电商网页，5 步就能成型
1. 新建文件并规划表格，先搭框架
打开 DW 后，新建 HTML 文件（步骤和之前一样），保存为 “shop.html”。然后插入一个 “4 行 1 列” 的表格（这是大框架）：
- 第 1 行：放导航；
- 第 2 行：放产品轮播图（暂时用一张图代替）；
- 第 3 行：放产品展示（后面会再插小表格）；
- 第 4 行：放底部信息。
表格边框设为 “0”（在属性面板改），这样看不到边框，页面更干净。
2. 做顶部导航，让顾客能找到地方
在第 1 行表格里，插入一个 “1 行 3 列” 的小表格（用来分导航项）：
- 第 1 列：输 “首页”；
- 第 2 列：输 “产品列表”；
- 第 3 列：输 “购物车”。
选中文字，在属性面板改颜色（比如黑色），加下划线（点 “U” 按钮），这样顾客知道是能点的。有个卖饰品的网友，导航文字用了橙色，和产品风格很搭，她说 “有顾客说老远就看到导航，找东西方便”。
3. 插轮播图位置，先放一张主图
在第 2 行表格里，点 “插入”→“图像”，选一张好看的产品主图（比如新品合集图）。图片宽度设成和表格一样宽（比如表格宽 1000px，图片也设 1000px），这样不会有空白。
要是暂时没有轮播功能，先放一张图就行 —— 新手别一开始就追求复杂功能，能显示图片就好。
4. 做产品展示区，让产品看得清楚
在第 3 行表格里，插入 “2 行 2 列” 的小表格（放 4 款产品）：
- 每个小格子里先插产品图片，再在图片下方输名称和价格；
- 价格可以用红色字体，加粗显示（在属性面板点 “B”）。
插图片时注意，图片大小保持一致（比如都设成 200px 宽），这样排列才整齐。有个卖文具的网友，把产品图都裁成正方形，排出来特别整齐，顾客说 “看着舒服，有购买欲”。
5. 加底部信息，增加信任感
在第 4 行表格里，输 “联系电话：XXX-XXXXXXX”“售后说明：支持 7 天无理由退换”。文字不用太大，设成 12px 就行，颜色用灰色。
这部分虽然简单，但能让顾客觉得靠谱。小编之前做的网页没加底部信息，有朋友说 “看着像临时页面，不敢买”，加上后就好多了。
四、解决方案：做的时候遇到问题该怎么办？
1. 图片插进去显示 “叉号”，怎么回事？
这是因为图片没和网页文件存在同一个文件夹。把图片移到保存 “shop.html” 的文件夹里，删掉原来的图片，重新插一次就行。
2. 表格里的内容对齐乱了，该怎么调？
选中表格某一行，在属性面板找 “水平” 和 “垂直” 对齐，选 “居中”—— 这样里面的文字和图片就会居中显示，看着整齐。
3. 要是觉得页面单调，能加啥？
可以在产品价格旁加个小标签，比如画个红色小方块，在里面输 “新品”。方法是：点 “插入”→“矩形”，画好后在上面输文字，拖到价格旁边就行。
五、个人观点
用 DW 做电商网页，新手别追求 “一步到位”。先做出能展示产品的基础页面，能打开、能看清图片和价格，就算成功了。之后再慢慢学加链接、做轮播，一步步优化。
小编觉得，做网页和摆地摊一样，先把东西摆整齐、让人能看清，再考虑怎么摆得好看。第一次做肯定有不满意的地方，改几次就越来越顺了。希望大家都能做出自己的电商小网页，哪怕只有几款产品，也是个好开始。
