5步图解dw手机销售网站制作，避开建站公司坑价陷阱

你是不是也这样，找建站公司做手机销售网站，结果报价高得离谱，还说这功能那功能要加钱？其实，自己动手做网站，不仅省钱，还能掌握整个流程。今天我就用图解步骤的方式，带你看懂dw手机销售网站制作的全过程，不花冤枉钱，也不被坑。

一、需求分析：明确你要的网站功能和风格

做网站之前，第一步就是搞清楚你到底需要什么。手机销售网站的常见功能包括：

• 产品展示页：展示手机型号、图片、参数、价格等
• 购物车与下单系统：用户可在线下单
• 用户注册与登录：支持会员系统
• 后台管理界面：用于商品管理、订单查看等
• SEO优化结构：方便搜索引擎抓取

如果你只是做个展示型网站，功能就比较简单，成本也低。但如果要做带商城功能的，那就要考虑开发复杂度和后期维护。

案例参考：华中某手机店网站需求

我们来看一个华中地区某手机店的真实案例，他们找建站公司要价3.5万，但后来自己动手做了，成本不到1000元。他们的需求很简单，只是展示产品、有联系客服、有下单功能，用 DW（Dreamweaver） + 阿里云服务器 + 阿里云数据库 就搞定了。

二、环境准备：选择适合的开发工具与服务器

1. 安装Dreamweaver（DW）

DW是Adobe出品的网页开发工具，适合初学者入门，界面清晰，代码编辑方便。去官网下载安装，选择“Web Authoring”版本，安装时注意选择适合中文用户的语言包。

2. 注册阿里云账号

阿里云是中国最大的云计算服务商之一，建站用阿里云，安全、稳定、成本低。注册账号后，你需要：

• 注册域名（如：xxx.com）
• 购买云服务器（推荐轻量应用服务器，起步配置1核2G就足够）
• 配置SSL证书（免费申请，提升网站信任度）
• 备案ICP（国内服务器必须）

注意：如果服务器在阿里云，域名也必须用阿里云的，否则备案会很麻烦。

3. 环境搭建：本地开发环境 + 服务器环境

开发阶段，你可以在本地用DW写代码，然后上传到阿里云服务器。服务器环境需要支持PHP或HTML，具体看你要用什么语言开发。

推荐配置：

项目	内容
本地开发工具	Adobe Dreamweaver CC
服务器系统	Linux（CentOS 7）
Web服务器	Apache 或 Nginx
数据库	MySQL
前端技术	HTML5、CSS3、JavaScript
后台语言	PHP（可选）

三、核心步骤：从页面设计到功能实现

1. 网站结构设计

DW的站点管理功能很实用，可以帮你管理整个网站的结构。比如，你可以在站点根目录下建立以下文件夹：

根目录/
│
├── images/      // 存放手机图片
├── css/         // 存放样式表
├── js/          // 存放JavaScript代码
├── products/    // 存放产品页面
├── contact/     // 联系页面
└── index.html   // 首页

然后，用DW新建页面时，选择“站点”>“新建页面”，输入文件名，DW会自动帮你创建一个HTML框架。

2. 设计首页布局

首页是用户的第一印象，要清晰展示你的产品和品牌信息。DW支持拖拽式布局，你可以从“设计视图”拖放元素。

示例代码：首页HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>XX手机销售</title><link rel="stylesheet" href="css/style.css">
</head>
<body><header><h1>XX手机销售</h1><nav><ul><li><a href="index.html">首页</a></li><li><a href="products/product1.html">产品1</a></li><li><a href="contact.html">联系我们</a></li></ul></nav></header><section><h2>热销手机推荐</h2><div class="product-list"><div class="product"><img src="images/product1.jpg" alt="产品1"><h3>手机型号A</h3><p>价格：￥1999</p><a href="contact.html">立即咨询</a></div><!-- 更多产品 --></div></section><footer><p>&copy; 2025 XX手机销售</p></footer>
</body>
</html>

小贴士：首页要注重SEO，使用语义化的HTML标签，比如<header>、<section>、<footer>，这样搜索引擎更容易理解你的页面结构。

3. 创建产品页面

产品页面是网站的核心，每个产品要单独建一个页面，结构要统一。例如，你可以使用DW的“模板”功能，创建一个统一的页面模板，然后用它来生成多个产品页面。

示例代码：产品页面HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>手机型号A - XX手机销售</title><link rel="stylesheet" href="css/style.css">
</head>
<body><header><h1><a href="index.html">XX手机销售</a></h1><nav><ul><li><a href="index.html">首页</a></li><li><a href="products/product1.html">产品1</a></li><li><a href="contact.html">联系我们</a></li></ul></nav></header><section class="product-detail"><img src="images/product1.jpg" alt="产品1"><h2>手机型号A</h2><p>价格：￥1999</p><ul><li>屏幕尺寸：6.5英寸</li><li>摄像头：4800万像素</li><li>电池容量：4500mAh</li></ul><a href="contact.html">立即咨询</a></section><footer><p>&copy; 2025 XX手机销售</p></footer>
</body>
</html>

4. 联系我们页面

联系页面要包括联系方式、地图、咨询表单等。DW的表单功能支持创建简单的联系表单，用户填写后可提交到邮箱。

示例代码：联系页面HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>联系我们 - XX手机销售</title><link rel="stylesheet" href="css/style.css">
</head>
<body><header><h1><a href="index.html">XX手机销售</a></h1><nav><ul><li><a href="index.html">首页</a></li><li><a href="products/product1.html">产品1</a></li><li><a href="contact.html">联系我们</a></li></ul></nav></header><section class="contact"><h2>联系我们</h2><p>电话：0711-1234567</p><p>邮箱：sales@xxphone.com</p><p>地址：湖北省武汉市武昌区XX路XX号</p><form action="mailto:sales@xxphone.com" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" required><br><br><label for="email">邮箱：</label><input type="email" id="email" name="email" required><br><br><label for="message">留言：</label><br><textarea id="message" name="message" rows="5" required></textarea><br><br><input type="submit" value="发送"></form></section><footer><p>&copy; 2025 XX手机销售</p></footer>
</body>
</html>

注意：如果你希望表单数据能自动发送到邮箱，需要配置服务器端邮件处理脚本，比如PHP或Node.js。如果不想搞这么复杂，可以用第三方表单服务，如Formspree。

四、代码/配置示例：基础样式和服务器部署

1. CSS基础样式（style.css）

body {font-family: "微软雅黑", Arial, sans-serif;background-color: #f4f4f4;color: #333;margin: 0;padding: 0;
}header {background-color: #007BFF;color: #fff;padding: 15px;text-align: center;
}nav ul {list-style: none;padding: 0;margin: 0;display: flex;justify-content: center;
}nav li {margin: 0 15px;
}nav a {color: #fff;text-decoration: none;
}nav a:hover {text-decoration: underline;
}section {padding: 20px;background-color: #fff;margin: 20px auto;max-width: 1000px;
}.product-list {display: flex;flex-wrap: wrap;gap: 20px;
}.product {flex: 1 1 300px;background-color: #eee;padding: 15px;border-radius: 8px;
}.product img {width: 100%;border-radius: 8px;
}.product h3 {margin-top: 10px;
}footer {text-align: center;padding: 15px;background-color: #007BFF;color: #fff;
}

2. 部署网站到阿里云服务器

完成代码编写后，使用DW的“上传”功能，把网站文件上传到阿里云服务器的指定目录（通常是/www/wwwroot/）。

配置步骤（参考【阿里云官方文档】）：

1. 登录阿里云控制台，进入“轻量应用服务器”。

2. 点击“远程连接”，使用SSH连接服务器。

3. 安装Apache或Nginx服务：

   # 安装Apache（示例）
   sudo yum install -y httpd
   sudo systemctl start httpd
   sudo systemctl enable httpd
   

4. 将网站文件上传到/var/www/html/目录。

5. 修改Apache配置文件（/etc/httpd/conf/httpd.conf），设置站点根目录。

6. 重启Apache服务：

   sudo systemctl restart httpd
   

完成后，你就可以通过域名访问你的网站了。

五、常见报错与解决方法

1. 无法访问网站，提示“403 Forbidden”

• 原因：权限设置错误或目录权限不足。
• 解决：
  • 检查服务器目录权限：

    sudo chmod -R 755 /var/www/html
    

  • 检查Apache配置，确保DocumentRoot指向正确目录。

2. 网站显示空白页面

• 原因：代码有错误，或PHP文件没有解析。
• 解决：
  • 在服务器上安装PHP解析环境：

    sudo yum install -y php php-mysql
    

  • 确保.php文件有正确的文件头（<?php ... ?>）。

3. 表单提交失败

• 原因：表单action没有正确设置，或服务器没有配置邮件服务。
• 解决：
  • 如果用mailto:方式提交，需确认邮件客户端是否正常。
  • 推荐使用第三方服务如Formspree，或配置PHP邮件发送脚本。

六、小结：dw手机销售网站制作全流程

通过图解步骤，我们从需求分析、环境准备、代码实现到服务器部署，完整地走过了一个dw手机销售网站的制作过程。整个过程中没有使用任何建站公司的服务，成本控制在几百元以内，非常适合中小型企业或个体商户使用。

如果你正在计划搭建一个手机销售网站，或者已经找过建站公司觉得价格虚高，不妨试试自己动手做。掌握这套流程，不仅能省钱，还能让你更了解网站背后的运作逻辑。

建站花了多少钱？留言说说真实价格。你的经验也许正是别人需要的宝贵参考。