今天刚给本地开咖啡馆的老李做完官网，趁热乎把建站流程梳理出来。这已经是我第三次从头做网站了，虽然每次都有新坑要踩，但步骤基本跑不了下面这些。

第一步：琢磨这个网站要做成啥样

先搬个小马扎坐老李店里聊了俩钟头。我捧着笔记本猛记：店铺介绍写菜单要不要分冷热饮？能在线预约座位吗？顾客留言板要不要搞？老李越说越兴奋，拍板“整个页面要看着像咖啡豆颜色！放点拉花照片！”得，需求基本盘清楚了。

第二步：乱涂乱画网站草图

回家摊开A4纸开画。第一版画得像儿童简笔画，首页堆满字，菜单页塞得喘不过气。又翻了几个咖啡店官网偷师，重新画第二版：首页大字写店名+咖啡大图，菜单页用卡片式排列，特意给预约按钮留了黄框框。晚上发给老李看，他说“顶部再加个地图！”，行连夜改第三稿。

第三步：电脑上搭出骨架

打开代码编辑器哐哐敲。先搭出个光秃秃的框架：导航栏四条菜单（首页/菜单/预约/联系），底下分五块区域（头图/简介/招牌产品/顾客评价/页脚）。用div框得像搭积木，调间距调到眼冒金星。重点调了手机显示效果，现在人全靠手机看，屏幕小了字不能挤成一团。

第四步：给网站穿衣服

老李指定的咖啡棕当主色调，结果直接铺满像泥巴墙。赶紧掺米白当背景，关键按钮用深咖提亮。字体试了八种才选定圆润款，文字大小反复调整——招牌咖啡名放大到28px，地址电话缩到16px。最累是处理图片：用手机拍的拉花照片全带阴影，PS修图修得手抽筋。

第五步：塞进实用小工具

• 预约表单折腾最久，日期选择框死活对不齐，偷懒用现成插件；
• 谷歌地图嵌进去后显示慢吞吞，压缩到200px高度才顺眼；
• 顾客评价栏搞成自动轮播，测试时发现手机端会卡顿，删了动画效果才流畅。

第六步：点得我怀疑人生

自己当小白鼠狂点三天：用安卓机点预约按钮，居然弹出键盘挡住确认键；拿老掉牙iPad看菜单，图片加载慢得像蜗牛；电脑上故意输错手机号测试表单，错误提示语居然显示英文！改完这堆BUG，让咖啡馆小妹实测，她嚷嚷“店铺简介第二行有个错别字”，赶紧连夜改文案。

第七步：传上网还要折腾

托管平台传文件传了四十多分钟，结果CSS样式全乱了。检查发现图片路径大小写搞错，“*”传成了“*”。改完刚松口气，老李问“网址能不能不带平台广告？”得，咬牙买了独立域名，又配了带咖啡杯图标的浏览器标签。

今早把账号密码交给老李时，他一刷新看到咖啡豆旋转加载动画，乐得差点打翻浓缩杯。这行干久了就知道，网站上线才是麻烦的开始——下周还得教他更新菜单！