别急着写代码，先想清楚“推广什么”
很多零基础学习者做 H5 网站时，最大的坑不是不懂标签，而是拿到需求直接打开编辑器，做出来的东西要么丑，要么不符合甲方预期。这门课专门针对这个痛点：它不教你怎么背 HTML 语法，而是带你走一遍“产品推广网站”从需求到落地的完整逻辑。你之前可能遇到过这种情况：设计师给的图很美，但你切图切得七零八落，或者根本不知道用户点开页面后该往哪看。课程从第一讲就开始梳理建站需求与设计实现的逻辑关系，告诉你怎么通过 PRD 文档定调网站气质，怎么分析目标用户的年龄层次。这些看起来“虚”的内容，其实是避免后期返工的关键。如果你之前做的项目总是被改稿，或者不知道该站在谁的角度设计，这部分内容能帮你补上“设计思维”这块短板。
PS 作图与前端实现的衔接技巧
H5 推广网站往往有很多异形元素、不规则导航和复杂的视觉分层，这对前端实现是个挑战。课程重点讲解了如何用 PS 构建网页版心区域、调整参考线颜色，以及制作品牌 LOGO 和角标文案的对齐方式。你可能会疑惑：学 HTML5 为什么要用 PS？因为很多小型推广项目没有专职 UI 设计师，或者你需要快速原型验证，自己会画图能节省大量沟通成本。课程还详细拆解了导航的布尔运算拓展、内容区及版权区域的异形边界尺寸规则。这些是纯视频课程里容易忽略的“手工活”，却是实际工作中提高还原度的实用技能。建议你先看完前 6 讲理解整体流程，再重点啃第 7 到 11 讲的视觉实现细节，把 PS 作图规范和前端切片逻辑对应起来。
学完能独立做什么，资料怎么配合
这门课适合有一定 HTML/CSS 基础、但缺乏完整项目经验的学习者，或者想转岗做轻量级网页开发的技术新人。如果你是纯小白，建议先补充基本的网页结构知识，再跟完本课提升项目实战能力。学完后，你应该能独立承接一个简单的产品推广 H5 网站设计需求：从读懂甲方 PRD、确定目标用户画像，到用 PS 划分版心、制作导航和异形区域，最后还原成可运行的网页。资料包里通常包含课程视频和配套的设计源文件，建议你跟着视频步骤，先在 PS 里复现版心设计和导航制作，再尝试用代码实现。不要只看视频不动手，推广网站的核心价值在于“视觉还原度”，只有通过实际练习，才能真正掌握从设计稿到代码的转化技巧。
课程目录
1 01-产品推广网站的建站需求与设计实现的逻辑关系 (07:24) 2 02-通过产品需求文档的品牌描述定调网站气质调性 (08:07) 3 03-用户需求画像与目标用户群年龄层次定位分析 (05:09) 4 04-根据甲方需求和用户年龄结构和层次定调网站建站风格 (13:30) 5 05-根据PRD任务书要求实现建站规范及建站设计准备 (05:02) 6 06-H5活动推广网站设计的三大分区及功能划分 (01:45) 7 07-PS软件构建网页版心区域及改变软件参考线颜色设置 (03:50) 8 08-推广网站品牌LOGO的制作方法与角标文案对齐方式 (06:37) 9 09-导航的制作及异形底座的布尔运算拓展 (13:18) 10 10-甲方需求与标的网站对标时的技术实现方式 (03:57) 11 11-内容区及版权区域异形边界尺寸规则与实现方法 (06:31) 12 12-代言人的角色选择与在网站版心中构图和位置关系 (05:01) 13 13- 角色的边界柔和效果及角色与画面背景的呼应效果 (04:06) 14 14-广告文案信息的画面化解读与设计理念解析 (04:05) 15 15-宣传文案的主字体选择与网站品牌调性的统一性和协调性 (03:38) 16 16-文案的图层及排布方式调整与识读性布局 (04:34) 17 17-主体文案与围绕性文案的构架关系及字体选择 (08:28) 18 18-文字组的群落化效果及其与网站相关元素的关系 (03:23) 19 19-网站底色与水波效果的合成实现 (04:34) 20 20-水泡的绘制方法及其在非版心区域的布局填充 (02:28) 21 21-版权区的位置布局及其与内容区域直接的关系 (03:02) 22 22-网站内容区中非矩形区域的装饰包边效果制作方法 (03:40) 23 23-内容区域标题字号及web元素统一性 (06:19) 24 24-产品的位置及布局摆放和文案信息的排列关系 (03:18) 25 25-内容区域的字体字号及按钮的规范布局 (03:56) 26 26-内容区版块文案字号的统一性延续 (02:17) 27 27-会员专区的内容模块排版规范化及web元素的选材 (03:47) 28 28-会员专区icon的布局及配色 (02:35) 29 29-版权区内容布局及联系方式icon的版位布置 (05:20) 30 30-透底图及颜色叠加制作网站页面细节web元素 (01:52) 31 31-HTML5推广网站设计分析及设计逻辑性总结 (09:45)
