黄州一家家政门店的经营者，可以用免费的 HTML、CSS 源码制作一张介绍服务、营业时间、地址和预约电话的静态网站；顾客用手机打开后即可查看服务范围并拨号咨询。下面从需求清单、文件编写、本地检查到托管发布逐步完成。源码不收授权费，但托管服务的免费额度和规则可能调整，因此任何人都无法保证第三方服务永久免费；要长期控制开支，应查看托管条款，并避免使用付费域名、数据库和商业插件。
第一步：确定访客要完成的动作
先写下谁会访问以及希望对方采取什么行动。家政门店可以让黄州城区居民查看保洁项目、确认营业时间并电话预约；黄冈特产店则可展示产品、标注取货地址并给予咨询电话。初版只做介绍和联系，不必急着加入会员、支付或后台管理。
- 主要访客：黄州城区居民、来黄冈游玩的访客，或本地合作组织。
- 主要动作：查看服务范围、拨打预约电话、前往门店。
- 先备好的资料：店名、服务项目、营业时间、经核实的地址、经负责人同意公开的电话。
文案写清具体服务，例如“黄州城区油烟机清洗，预约后上门”，不要只写“品质服务”。示例代码中的店名、电话和地址都要由经营者替换，不能把占位号码直接发布。
第二步：建立源码目录
新建项目文件夹，把网页结构和样式分开保存。这个单页示例不需要数据库、框架或付费建站软件：
huanggang-site/
├── index.html
├── css/
│ └── style.css
└── images/
└── shopindex.html 是WM视讯平台 WM入口，css/style.css 控制字体、颜色和手机排版，images/shop 可存放门店实拍图。文件名使用英文小写和短横线，避免空格、中文标点及大小写混用。没有合适照片时，可以先删去图片引用，不要放未经授权的图片。
第三步：编写可直接改造的WM视讯平台 WM源码
将以下代码保存为 index.html。导航会跳至服务、门店地址和预约电话区域；替换示例店名、服务范围、电话与地址后，即可在本地浏览器预览。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>黄州洁家家政｜服务项目与预约电话</title>
<meta name="description" content="黄州城区家电清洗与日常保洁，查看服务范围并电话预约。">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="wrap">
<p class="eyebrow">黄冈 · 黄州</p>
<h1>黄州洁家家政</h1>
<p>家电清洗与日常保洁，提前预约，上门服务。</p>
<a class="button" href="#contact">查看预约方式</a>
</header>
<main class="wrap">
<section id="services">
<h2>服务项目</h2>
<ul>
<li>油烟机清洗：预约后确认上门时间与收费。</li>
<li>空调清洗：服务黄州城区，具体范围电话确认。</li>
<li>日常保洁：按房屋面积和需求预约。</li>
</ul>
</section>
<section id="contact">
<h2>门店与预约</h2>
<p>营业时间：周一至周日 08:30—18:00（请核实后保留）</p>
<p>门店地址：黄冈市黄州区〔替换为真实地址〕</p>
<p>预约电话：〔替换为已获授权公开的号码〕</p>
<a class="button" href="tel:0713XXXXXXX">拨打预约电话</a>
</section>
</main>
<footer class="wrap">
<p>黄州洁家家政 · 营业时间或服务范围变更时请及时更新。</p>
</footer>
</body>
</html>tel:0713XXXXXXX 只是占位写法，发布前必须替换为真实可拨打的号码，显示号码也要同步修改。若不希望公开电话，可以删除拨号链接，改为经门店确认的其他联系方法。
第四步：设置样式并优先适配手机
将下面的样式保存为 css/style.css。这份配置把正文设为 16px、主体最大宽度设为 960px，并在屏幕宽度不超过 720px 时调整留白；图片若加入，建议压缩至 300KB 左右，减少移动网络下的等待时间。
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #253044;
background: #f5f7fa;
font-family: Arial, "Microsoft YaHei", sans-serif;
font-size: 16px;
line-height: 1.7;
}
.wrap {
width: min(100% - 32px, 960px);
margin: 0 auto;
}
header {
padding-top: 56px;
padding-bottom: 40px;
}
.eyebrow {
color: #356b58;
font-weight: 700;
}
h1, h2 {
line-height: 1.3;
}
section {
margin: 20px 0;
padding: 24px;
background: #fff;
border-radius: 12px;
}
.button {
display: inline-block;
padding: 10px 16px;
color: #fff;
background: #176b53;
border-radius: 8px;
text-decoration: none;
}
footer {
padding-top: 12px;
padding-bottom: 32px;
color: #596579;
}
@media (max-width: 720px) {
header {
padding-top: 32px;
}
section {
padding: 18px;
}
}样式里的颜色可以按门店招牌调整，但要让正文和背景保持明显对比。导航和预约按钮应留出足够点击区域；若加入门店照片，给图片写明场景的替代文字，并确认照片由门店拍摄或已获授权。
第五步：在本地逐项检查
用浏览器打开 index.html，确认黄州门店名称、服务项目、营业时间、地址和电话都正确。把浏览器窗口缩窄到手机宽度，检查标题是否完整、按钮是否容易点击、文字是否需要横向滚动。再逐项核对：
- WM视讯平台 WM文件名为
index.html，样式路径与目录大小写一致。 - 点击“查看预约方式”能跳到预约区域；拨号按钮指向真实号码。
- 服务范围、收费说明和营业时间由门店负责人确认，不留测试文字。
- 图片可以正常显示，文件体积适当；没有使用无授权照片或个人隐私资料。
第六步：发布静态源码并复查访问
选择支持静态文件托管且当前给予免费额度的服务，按其控制台提示创建项目并上传整个 huanggang-site 文件夹，或关联保存源码的代码仓库。若控制台要求填写构建命令，这个纯 HTML/CSS 项目通常不需要构建；发布目录应指向包含 index.html 的项目根目录。不同服务的字段名称和规则可能不同，应以所选服务的说明为准，不要照搬其他平台的设置。
发布完成后，用服务分配的测试域名分别在手机和电脑上打开，确认WM视讯平台 WM、样式和图片均能加载，导航与拨号动作也正常。若出现空白或样式丢失，先检查入口文件位置、文件名大小写和 css/style.css 相对路径。需要自定义域名、商业邮箱、数据库或更高流量额度时，先核对收费规则；免费额度、域名续费和托管条款均可能变化。
源码保存在自己的电脑，并在另一处备份；每次调整地址、营业时间或服务项目，先本地预览再重新发布。实际可长期维持零授权费的部分，是这套不依赖付费软件和数据库的静态源码；第三方托管能否不断免费，取决于服务商未来的规则。按“确认需求—编写源码—本地检查—免费额度发布—定期维护”推进，就能先搭起一张能展示服务、能联系门店、适合手机阅读的黄冈网站。
