做网站网页设计，最容易走错的一步不在画图，而在选路。模板建站、可视化设计工具、代码开发这三条路，走哪条决定了你后面每一次改版是点几下，还是拆了重来。做英文站，路线没选对，返工的时间和钱都得自己付。
选完路再按流程落地，上线前拿Google的三项Core Web Vitals阈值自查一遍。WordPress官方说可以在Site Editor里完全不碰代码做出主题，这话有一点水分，导出的主题仍要改style.css前四行。
- 这是什么：出海新手做网站网页设计，在模板建站、可视化设计工具、代码开发三条路里选一条，再按流程落地。
- 官方怎么说：WordPress官方说可以完全不碰代码、在Site Editor里做出主题；Google给出三项Core Web Vitals阈值。
- 怎么做：先激活一个现成主题来学，再在Site Editor里改样式，最后导出主题。
- 常见误区：以为完全不用碰代码，导出后要改style.css前四行；图片不设宽高会让文字跳动。
这篇讲三条路线各自适合谁、模板路线从哪一步开始、上线前查哪几个数，以及哪些坑要提前避开。网页设计以外的建站工具用法，放在其他工具那篇里。
本文目录
网站网页设计的三条路线，各自适合谁
三条路线没有哪条更好，看你现在手上有什么。下面按路线说适合谁、前置条件、上线后改起来难不难。
路线一：拿现成主题改，官方说可以一行代码不碰
WordPress官方把Site Editor定义为主题的「在后台里的可视化可编辑呈现」。官方说可以完全在这个界面做出主题，一行代码不用碰；还推荐复用，不必从零搭建一切。
适合不想学代码、要尽快上线、以后主要改内容和样式的人。前置条件就一个：装好WordPress，后台能进Appearance > Editor。上线后改样式在Site Editor里点几下就行。
这条路线有一处要回文件处理，放在下一节讲。官方给的从设计稿到发布五步顺序，可以对照看从设计稿到发布的5步顺序。
路线二：先用可视化工具出设计，再交给建站工具落地
这条路线分两段：先在设计工具里把页面画出来，再交给建站工具落地。设计稿能先给人看，改版也有对照。麻烦在设计稿和线上是两套东西，改一处要同步两处。
适合要跟人对接、要先看设计再动手、页面改动频繁的人。前置是设计工具和建站工具两套都要会一点。上线后改：设计稿改一遍，建站工具里还得再改一遍。
用Figma做网页界面的步骤，可以看Figma做网页界面。
路线三：直接写代码，适合要完全控制的人
自己写HTML和CSS，页面长什么样、怎么动，全在自己手里。web.dev的响应式设计课程覆盖媒体查询、宏布局、微布局、排版、响应式图片、图标、主题、无障碍、交互，要系统学可以从这里入手。
适合要完全控制、要做特殊交互、现有主题改不动的人。前置是HTML、CSS、一点JavaScript。上线后改：改哪行改哪行，出问题也自己扛。
这条路线最容易被低估的是性能。图片、字体、脚本每一项都要自己管，官方那些图片规则，在模板路线里是主题帮你做一半，在代码路线里全靠自己写。
选模板建站这条路，具体从哪一步开始
官方给的顺序是先激活一个现成主题来学，再在Site Editor里改，最后导出成自己的主题。模板不是挑一个好看的主题套上去就完了。
先激活一个默认主题来学：Twenty Twenty-Four / Twenty Twenty-Three / Twenty Twenty-Two
官方说第一步是激活一个现成主题来学习和研究，通常建议用最新的默认主题，因为它按最新特性构建。默认主题自WordPress 3.0版起随每个版本打包，按发布年份命名。
官方列出的可学习的最新默认主题是Twenty Twenty-Four、Twenty Twenty-Three、Twenty Twenty-Two。动作：后台Appearance > Themes，激活其中一个。回查：激活后前台打开看排版有没有乱，乱了先换回上一个。
进 Appearance > Editor，在 Styles 里挑预设样式变体
Site Editor入口在后台菜单的Appearance > Editor。官方说多数人应先从调整设计开始，在菜单面板里选Styles。
Twenty Twenty-Four这类区块主题自带预设样式变体，在侧边栏能看到。动作：点Styles，挑一个变体作为起点。回查：点了变体前台没变化，看是不是没按Save，或者改的是单个区块不是全局。
用 Style Book（眼睛图标）改全局样式，改完按 Save
下一步是选Style Book图标，形状像眼睛。打开后可以全面修改站点全局样式。
动作：在Style Book里改颜色、字体、间距这些全局项，改好按Save保存。回查：只改了某一个区块，其他地方没跟着变，说明改的是区块级样式，回到Style Book改全局。
导出：⋮ 菜单选 Export，或用 Create Block Theme 的扳手按钮
导出方式一：在Site Editor头部点⋮（Options）按钮，选Export。会得到一个含完整主题的ZIP文件，文件名与所基于的主题一致，默认主题就是twentytwentyfour.zip。
导出方式二：激活Create Block Theme后，Site Editor里出现扳手图标按钮，点开是Create Block Theme菜单，提供保存更改、导出ZIP、编辑主题信息、创建新主题等选项。用Create Theme可以自定义主题全部信息，完成后点Export Theme导出。
Create Block Theme是WordPress贡献者维护的官方第一方插件。它目前还不能上传自定义截图，要分发主题仍需自己加screenshot文件。
导出后主题还叫Twenty Twenty-Four，官方说最好改名以代表你做出的东西。动作：解压twentytwentyfour.zip，把文件夹改名为your-theme-name，打开style.css改顶部信息，至少改前四行，尤其Theme Name，最后重新打包成ZIP。回查：装上后后台还显示Twenty Twenty-Four，说明前四行没改对。
从定目标到上线，网页设计流程分几步
流程不是先画图再填内容。官方说应用布局前应先确认内容流是否合理。顺序反了，后面每一步都在改。
第一步：先确认内容流是否合理，再谈布局
官方说应用任何布局之前，先确认内容流是否合理。动作：把文字、图片、表单项按阅读顺序排出来，先不套栏，手机上从上往下读一遍。
内容流不对，套两栏三栏都别扭，改布局解决不了顺序问题。回查：手机上读着跳，先调内容顺序，别急着加CSS。创意部分的落地步骤可以看创意网页设计落地步骤。
第二步：宏布局用 CSS grid + 媒体查询，断点别铺太多
宏布局指界面在页面层面的整体组织方式。官方示例是用CSS grid配合媒体查询，在指定断点切换多栏，示例断点是45em。
媒体查询适合少量元素调整。布局改动多的时候，断点会失控，30em、45em、60em一路加下去，维护起来很麻烦。动作：先写单栏，到45em加grid两栏。回查：断点越加越多，说明该换grid或flexbox自适应。
宏布局不一定要用媒体查询，也可靠grid或flexbox自适应。先试自适应，实在不行再加断点。
第三步：图片按官方规则处理（width/height、srcset + sizes、首屏主图不懒加载、alt 必写）
图片这块官方给了几条硬规则。知道尺寸就始终写width和height，防止图片加载时其他内容跳动；用max-inline-size 100%约束，避免图片超出容器导致横向滚动。
多尺寸用srcset提供多个版本，配合sizes告诉浏览器显示宽度。srcset与src是互补关系，不是替代，仍需有效的src属性；宽度描述符和密度描述符只能二选一，不能同时用。
首屏主图不要用loading懒加载，可以设为eager。alt属性必须始终写，即使是空值；空alt告诉屏幕阅读器这是装饰性图片，缺失alt则不提供这个信息。
手机上要横向滚动，先查图片有没有超出容器，再看有没有写max-inline-size 100%。图片加载时文字跳动，先查width和height。alt没写，先补alt，装饰性图片写空值。表单部分可以看网页设计表单。
第四步：上线前测三项 Core Web Vitals，看第 75 百分位、分移动端和桌面端
测量最简便的方式是用web-vitals JavaScript库，每个指标调用一个函数。现场测量工具包括Chrome User Experience Report、Chrome DevTools、PageSpeed Insights、Search Console的Core Web Vitals报告；实验室测量可用Chrome DevTools和Lighthouse。
实验室测不了INP，因为模拟环境没有用户输入，只能用TBT作为代理指标。实验室测量不能替代真实用户测量。Google强烈建议站点自建真实用户监测，因为CrUX数据不提供逐页浏览的详细遥测。
动作：打开PageSpeed Insights输入网址跑一遍，再看Search Console的Core Web Vitals报告，看第75百分位，分移动端和桌面端分别看。具体阈值下一节列。
实验室和现场数据不一样，以现场为准。用JavaScript公共API测得的数值可能和CrUX报告的不同，这是正常的，看趋势不看单次。
上线前要对的数字：三项 Core Web Vitals 阈值表
三项指标，六个条件，对着表查。
| 指标 | 达标阈值 | 测什么 | 怎么测 |
|---|---|---|---|
| LCP | 页面开始加载后2.5秒内 | 加载性能 | PageSpeed Insights、Search Console、web-vitals库 |
| INP | 200毫秒或以下 | 交互性 | 现场测量；实验室用TBT代理 |
| CLS | 0.1或以下 | 视觉稳定性 | 同上 |
三项里有一项不达标，这一页就不算通过，移动端和桌面端要分别看。稳定版Core Web Vitals指标每年变动不超过一次；待定指标在pending阶段至少保留六个月，给生态适应时间。指标会演进，FID在2024年被INP取代就是例子。
四个避坑点：模板同质化、移动端适配、加载速度、素材版权
这四个坑，前三个有官方原话可对，第四个讲怎么查授权。每个坑按现象、原因、回查顺序写。
坑一：以为完全不用碰代码，导出后要改 style.css 前四行
照着官方教程在Site Editor里改完，导出装上，后台主题还叫Twenty Twenty-Four，前台跟别人的站长得像。
官方承认「完全不碰代码」里有一点小水分，导出的主题仍需改style.css前四行。都用同一套预设样式变体，前台自然拉不开差距。
解压看style.css前四行，Theme Name改成your-theme-name。样式同质化，回Style Book看改了哪几项全局样式，没改就回去改，别急着换主题。
坑二：移动端图片溢出、文字跳动，补 width/height、max-inline-size 100%
手机上图片比屏幕宽，要横向滚动才能看全；图片加载时旁边的文字跳一下。
图片比屏幕宽会溢出，用户得横向滚动。不写width和height，浏览器不知道图片多大，加载时其他内容就会跳。强行改宽高比会把图片压扁或拉伸，要用object-fit处理。
先查img有没有width和height，再查CSS有没有max-inline-size 100%。两个都补上还跳，看是不是图片外面套了固定宽度的容器。
坑三：加载速度，预加载属性少用、别按格式预加载、fetchpriority 只在真关键时用
页面加载慢，首屏主图反而比别人慢。
预加载等属性过度使用会覆盖浏览器的优先级判断，导致性能下降。不能按浏览器对图片格式的支持来预加载不同格式，会造成多余下载、浪费用户流量。fetchpriority="high"只在图片确实关键时才设，否则会挤占其他资源的优先级。
先看head里有没有一堆preload，再看fetchpriority是不是只挂在一张真关键图上，最后看首屏主图是不是被设成了懒加载。
坑四：素材版权，只讲查授权、用可商用来源
模板里的图、网上找的图直接用，后面收到投诉或者被要求下架。
每张图找来源页的授权说明，看清楚能不能商用、要不要署名。找不到授权说明就换一张。自己拍或自己做的图，留好源文件。
上线前把每张图列一张表，写来源、授权类型、要不要署名，对不上的先换掉。网页设计案例对照标准可以看网页设计案例对照标准。
网站制作软件的三条路线、设计网站公司怎么选，可以对照看网站制作软件三条路线和设计网站公司怎么选。
AI 能帮网页设计哪几步，哪几步必须人来做
AI能帮的是整理和起草，不能替你在后台点。下面四步可以交给AI，三条提示词是本文给的示例，不是官方模板。
- 按三条路线列出各自适合的场景和前置条件，供你对照自选。
- 把Core Web Vitals三项阈值和测量工具整理成一张自查清单。
- 按官方响应式图片规则，生成带width、height、loading、srcset的图片标签草稿。
- 把style.css顶部主题信息按your-theme-name改好，生成可粘贴的头部注释。
提示词一：「我在做出海网站，请把模板建站、可视化设计工具、代码开发三条路线列成对比表，每行写适合谁、需要什么前置条件、上线后改起来难不难，不要给推荐结论。」
提示词二：「按Google Core Web Vitals的LCP 2.5秒、INP 200毫秒、CLS 0.1三个阈值，帮我做一张上线前自查清单，每项写用什么工具测、看第几百分位。」
提示词三：「给我一段响应式图片的HTML草稿，包含width、height、loading、srcset和sizes，图片是首屏主图，尺寸1200x800。」
把WordPress和web.dev的官方条款整理成对照表这件事，可以交给猎者出海的AI Agent。它接的是整理资料、对照原文这类活，判断还得你自己下。
- 在WordPress后台Appearance > Editor里亲手选一个默认主题并激活，再进Styles和Style Book改样式。
- 导出ZIP后亲手解压、把文件夹改名为your-theme-name，打开style.css改前四行，尤其Theme Name。
- 用PageSpeed Insights或Search Console的Core Web Vitals报告看第75百分位结果，决定这一版留还是改。
AI给的是草稿和清单，后台点、文件改、结果判断这三件事得你自己做。全自动的说法可以不用信。
常见问题
Core Web Vitals 现在看哪几项？
当前聚焦加载、交互性、视觉稳定性三个方面，对应LCP、INP、CLS三项。指标会随时间演进，FID在2024年被INP取代就是一个例子。
LCP、INP、CLS 分别衡量什么？
LCP衡量加载性能，INP衡量交互性，CLS衡量视觉稳定性。三项都按第75百分位分移动端和桌面端看，全部达标才算通过。
实验室测出来和真实用户数据不一样，信哪个？
以现场测量为准。实验室测量不能替代真实用户测量，Lighthouse这类工具测不了INP，只能用TBT做代理指标。
装饰性图片的 alt 怎么写？
写空值alt=""。alt属性必须始终写，空alt告诉屏幕阅读器这是装饰性图片，缺失alt则不提供这个信息。装饰性图片理想情况下用CSS引入，不放在HTML里。
宏布局一定要用媒体查询吗？
不一定。grid或flexbox也能让宏布局自适应。媒体查询适合少量元素调整，布局改动多时断点会失控。
路线选定、模板导出改好、上线前六个条件过一遍，这三件事做完，网页设计这一关就算过了。上线前那三项指标的检查结果，想整理成一张对照表，可以交给猎者出海的AI Agent。后面是内容和运营的事。
发表评论