--- title: "五页公司网站模版（5 套设计，25 个页面）：案例" description: "五套完整的公司网站模版：货运、专业服务、牙科诊所、精密制造与 B2B SaaS，共 25 个可点击的真实页面，每页不到 25 KB，不用 JavaScript、不用图库照片。" url: https://williamw.name.my/zh/portfolio/company-website-pack/ language: zh-Hans --- [首页](https://williamw.name.my/zh/) [作品集](https://williamw.name.my/zh/portfolio/) 公司网站落地页套装：5 套模版 # 公司网站设计与开发： 五个页面，五种设计方向 五套完整的公司网站（共 25 个页面），全部做成真实上线、自适应的页面，而不是效果图。每套模版覆盖公司网站真正需要的同一组五个页面，但走完全不同的视觉方向；每页只有不到 25 KB 的 HTML 与 CSS，零 JavaScript，也没有需要加载的图片。 [WhatsApp 问我](https://williamw.name.my/go/whatsapp?from=case-company-website-pack-head&l=zh&text=%E4%BD%A0%E5%A5%BD+William%EF%BC%8C%E6%88%91%E7%9C%8B%E4%BA%86%E4%BD%A0%E7%BD%91%E7%AB%99%E4%B8%8A%E3%80%8C%E5%85%AC%E5%8F%B8%E7%BD%91%E7%AB%99%E8%90%BD%E5%9C%B0%E9%A1%B5%E5%A5%97%E8%A3%85%EF%BC%9A5+%E5%A5%97%E6%A8%A1%E7%89%88%E3%80%8D%E7%9A%84%E6%A1%88%E4%BE%8B%EF%BC%8C%E6%83%B3%E8%81%8A%E4%B8%80%E4%B8%AA%E7%B1%BB%E4%BC%BC%E7%9A%84%E9%A1%B9%E7%9B%AE%E3%80%82) 作者：[William W](https://williamw.name.my/zh/about/)，WilliamW Resources。十年以上 IT 基础设施与安全经验 更新于 2026-09-15 演示模板 · 虚构公司 [在线 Demo](https://williamw.name.my/zh/templates/) ![模版 01，Northwind Freight：首页](https://williamw.name.my/images/projects/templates/northwind/01-home.jpg) 模版 01，Northwind Freight：首页 ## 客户面对的问题 公司网站项目通常卡在同一个地方：老板看着一张情绪板无法判断方向，而另一条路（套一个建站工具主题）出来的效果和同行的网站一模一样。更麻烦的是，给客户看的样板通常只有三屏图库照片加占位文字，没人能判断这个设计放进真实内容后还站不站得住：运价表、收费标准、机床清单、营业时间表。 ## 交付了什么 - 五种设计方向，而不是同一套换色：每套模版有自己的字体搭配、配色、间距体系与页面结构（运营操作台式、编辑排版式、柔和医疗式、深色工程图纸式、产品导向 SaaS 式） - 每套都覆盖公司网站必备的五个页面：落地首页、服务或产品详情、可信度页面（团队 / 事务所 / 加工能力）、回答「多少钱」的页面，以及带完整询价表单的联系页 - 用真实内容而不是占位文字：公开的截单时间与运输天数、带区间的收费标准、按次计价的治疗项目、以 µm 标注的加工公差、套餐对比表，都是客户真正会看的东西 - 在值得的地方做行业专属组件：实时货运跟踪卡、事务所资质台账、预约时段卡、车间能力参数板，以及完全用 CSS 搭出来的调度看板 - 不依赖摄影素材：视觉重量来自字体、配色与 CSS 结构，客户手上没有照片库，网站看起来依然完整 - 用 Astro 静态页面构建、部署在 Cloudflare：没有 JavaScript、没有建站工具、没有每月要打补丁的 CMS，全站保留可见的键盘焦点样式并支持「减少动态效果」偏好 技术栈 - Astro - TypeScript - CSS - Responsive - Cloudflare - SEO ## 系统实景 25 张截图，点击查看 - ![模版 02，Meridian Advisory Partners：首页](https://williamw.name.my/images/projects/templates/meridian/01-home.jpg) 模版 02，Meridian Advisory Partners：首页 - ![模版 03，Rivergum Dental Studio：首页](https://williamw.name.my/images/projects/templates/rivergum/01-home.jpg) 模版 03，Rivergum Dental Studio：首页 - ![模版 04，Forge Precision Engineering：首页](https://williamw.name.my/images/projects/templates/forge/01-home.jpg) 模版 04，Forge Precision Engineering：首页 - ![模版 05，Cobalt Field Ops：首页](https://williamw.name.my/images/projects/templates/cobalt/01-home.jpg) 模版 05，Cobalt Field Ops：首页 ## 带来的改变 - 客户点开五个真正能用的网站来选方向，而不是对着一张图点头 - 每个页面只有不到 25 KB 的 HTML 与 CSS、零 JavaScript，在客户现场用弱网也能秒开 - 由于结构是共用的，把选定的模版改成客户真实品牌（文案、配色、字体、标识）是几天的工作量，而不是重新开一个项目 - 上线后几乎没有维护负担：Cloudflare 上的静态文件，没有插件更新、没有主题授权续费、也没有会被攻破的后台登录 ## 有项目想法？ 告诉我你的需求，我通常会在一个工作日内回复。 [WhatsApp](https://wa.me/ww6886) [邮箱](mailto:inquiry@williamw.name.my) [Telegram](https://t.me/williamw6886) [Signal](https://signal.me/#eu/h1W76J74uDauxkfBfSoVotZ-pZe2ogGDa6vmK3Xqw8tWLNsiTE9OaIvVwXZxHiqE) [LinkedIn](https://www.linkedin.com/company/williamw-resources/) [或者用表单把细节发给我](https://williamw.name.my/zh/contact/?from=case-company-website-pack) ## 相关内容 - [查看全部案例](https://williamw.name.my/zh/portfolio/) - [服务范围与交付方式](https://williamw.name.my/zh/services/) ## 常见问题 ### 我能直接拿一套模版给自己公司用吗？ 它们就是为此准备的。挑一套符合你行业的方向，我把文案、配色、字体和标识换成你公司的，虚构公司的内容会被完全替换。基于已选模版做一个五页网站，通常一到两周交付（含你这边的内容确认时间）。 ### 我需要准备专业摄影照片吗？ 不需要。五套模版都刻意不使用照片，视觉效果靠字体、配色与排版实现。如果你有厂房、诊所或团队的照片，可以加进去，效果会更好；但网站不会因为照片没到就上不了线。 ### 一个五页公司网站多少钱？托管费用呢？ 基于模版做一个五页双语网站，报价落在我定价页的偏低区间；这种流量规模在 Cloudflare 上托管通常是免费的，你只需要付域名费。把行业和需要的页面发给我，一个工作日内回复具体区间。 ### 网站能做中英双语吗？ 可以。你正在看的这个网站就是这样做的：带语言前缀的网址、hreflang 标签，每种语言一份内容源。模版只展示英文版本，是为了让人单纯评价设计；加第二语言是一个明确定价的步骤，不需要重做。 ### 表单是真的能用吗？ 演示模版里的表单只有样式、不提交数据（刻意如此）。正式交付的网站里，询价表单会发送到邮箱、WhatsApp 或你的 CRM，并带反垃圾机制，每一条提交都会留档、可搜索。 ## 可以开始梳理需求了？ 把你现在管什么、哪里最痛发过来。一个工作日内回复；沟通清楚需求后，一个工作日内给你书面范围和按里程碑的固定报价。 [WhatsApp 联系我](https://williamw.name.my/go/whatsapp?from=case-company-website-pack-end&l=zh&text=%E4%BD%A0%E5%A5%BD+William%EF%BC%8C%E6%88%91%E7%9C%8B%E4%BA%86%E4%BD%A0%E7%BD%91%E7%AB%99%E4%B8%8A%E3%80%8C%E5%85%AC%E5%8F%B8%E7%BD%91%E7%AB%99%E8%90%BD%E5%9C%B0%E9%A1%B5%E5%A5%97%E8%A3%85%EF%BC%9A5+%E5%A5%97%E6%A8%A1%E7%89%88%E3%80%8D%E7%9A%84%E6%A1%88%E4%BE%8B%EF%BC%8C%E6%83%B3%E8%81%8A%E4%B8%80%E4%B8%AA%E7%B1%BB%E4%BC%BC%E7%9A%84%E9%A1%B9%E7%9B%AE%E3%80%82) [邮件或其他方式](https://williamw.name.my/zh/contact/?from=case-company-website-pack-end) [inquiry@williamw.name.my](mailto:inquiry@williamw.name.my)