面向设计与前端入门者的“网站搭建”必修课

很多初学者在尝试搭建个人作品集或小型网站时，往往陷入两个极端：要么只会套用现成的模板，导致页面千篇一律，缺乏个性；要么一上来就死磕代码，却在配色、排版、字号比例等基础设计规范上屡屡碰壁，做出来的页面显得粗糙且不专业。这门课程正是为了解决这些“有想法却无章法”的能力缺口而设计。它不只是一堂技术实操课，更是一套完整的网站设计思维体系，帮助学员从零开始建立对网站结构的宏观认知和微观规范。

课程适合具备计算机基础操作能力、对网页设计感兴趣但毫无经验的同学，以及希望系统补齐前端设计基础的前端开发初学者。无论你是想为自己的设计作品搭建展示窗口，还是为转岗前端打下坚实的设计审美与规范基础，这门课都能提供清晰的指引。建议初学者按照课程顺序，从“需求分析”到“视觉规范”再到“内容落地”逐步学习，特别是前几节关于需求点、版块划分和尺寸规范的讲解，是后续动手实践的关键基石。

从需求分析到视觉落地的完整闭环

课程的核心价值在于将抽象的“设计”拆解为可执行的具体步骤。前半部分聚焦于网站的前期规划与基础规范，详细讲解了个人网站和定制化网站的设计需求点及建站原则。学员将学习到如何科学地划分网站各版块，掌握定制化网站设计的尺寸规范，以及如何确保整体调性的统一。这些内容看似基础，却是构建专业网站不可或缺的骨架。特别是在字体选择上，课程深入剖析了中英文字体的选用技巧，明确了等线体与衬线体的适用场景，并制定了网站文字的配色标准，帮助学员建立起严谨的视觉设计规范。

后半部分则侧重于设计需求的落地与页面内容的逻辑呈现。通过学习设计师个人站的PRD（产品需求文档）分析，学员能够理解如何将业务展示模块的需求转化为可视化的图表。课程还详细讲解了网站字号的选择、不同级别文字的配比规范，以及如何通过画面化的方式安排页面内容，包括作品展示内容的创建方法。通过这些章节的学习，学员不仅能掌握网站设计的具体技法，更能理解内容组织背后的逻辑性，从而实现从“会做图”到“懂设计”的跨越。

学完能做什么及学习建议

完成本课程后，学员将能够独立规划并设计一个结构合理、视觉规范的個人网站或小型定制化网站。你将不再依赖模板，而是能够根据具体需求，从版块划分、字体选配、色彩规范到内容逻辑进行系统化设计，并具备将业务需求转化为清晰设计图表的能力。这对于求职作品集的制作或个人品牌网站的搭建具有极高的实用价值。

建议学员在学习过程中，不要仅停留在观看视频的层面，而是要结合课程提供的资料包线索，动手实践每一个设计环节。可以先从分析一个简单的个人站PRD文档开始，逐步尝试划分版块、选择字体和配色，最终完成一个完整的网站设计方案。资料包中的案例和模板可以作为参考，但更重要的是理解其背后的设计原则，这样才能真正内化为自己的能力。通过这种“学练结合”的方式，你不仅能掌握网站设计的技能，更能培养出专业的设计思维，为后续的深入学习和职业发展奠定坚实基础。

课程目录

1 01-个人网站和定制化网站设计的需求点及建站原则 (04:09)
2 02-个人站各版块划分的原则和方法 (08:27)
3 03-定制化网站设计的尺寸规范及调性统一性问题 (08:13)
4 04-网站的字号选择和不同级别文字的配比规范 (05:12)
5 05-中英文字体的选择及等线体和衬线体的使用场景区别 (04:35)
6 06-网站应用文字的的配色标准和规范 (05:07)
7 07-个人站的网页元素图形设定标准 (01:38)
8 08-设计师个人站的网站设计诉求PRD文档分析 (02:43)
9 09-网站设计中业务展示模块需求分析及产品需求图表化落地 (05:22)
10 10-网站建设页面内容安排的逻辑性问题及画面化实现形态 (03:08)
11 11-作品展示内容的创建及网站画面化表现方式 (02:07)
12 12-个人网站设计任务书解读及各屏之间的衔接关系 (01:35)
13 13-个人站建站的版宽和版心宽度的取样和参数化设定 (05:36)
14 14-网站各屏高度设定及首屏导航位置设定和布局划分 (03:04)
15 15-个性化网站LOGO制作方法 (06:32)
16 16-导航按钮文案区域的规范化实现 (08:50)
17 17-首屏导航区域导航按钮的点选状态效果实现 (03:03)
18 18-首屏Banner的需求分析及设计点分析 (03:43)
19 19-Banner区与轮播条区的位置布局及主体素材构图关系 (04:18)
20 20-个人站首屏Banner制作步骤及技术实现方法 (08:21)
21 21-轮播区制作方法及首屏的跨页面制作 (05:03)
22 22-各屏头部区域设计标准统一性分析及技术操作要点 (02:11)
23 23-第二屏主文案的版式布局及细节规范化落地 (06:12)
24 24-头部区域图案纹理的还原方法及制作技巧 (08:24)
25 25-第二屏头部文字版式的制作方法及批处理方案 (03:51)
26 26-网站版心内容区域模块分割的平均分布方法 (05:28)
27 27-内容版块的模块化实现和同级替换法 (09:33)
28 28-第二屏的整体风格把控及细节局部微调方法 (04:56)
29 29-第三屏的版心定位及头部区域规范化延续 (06:21)
30 30-黑屏头部区域分案的反白效果实现及文案替换 (03:13)
31 31-作品集分类区域制作方法 (04:38)
32 32-作品集版块展示区域分区布局 (03:07)
33 33-作品集显示窗口版块的图文排版 (08:14)
34 34-作品集三大展示板块表现的技术实现方法 (05:21)
35 35-第四屏头部的延续性制作及个性化调整 (04:48)
36 36-文案排版与文案字号配色同头部文案内容统一性实现 (04:05)
37 37-多边形背景素材文件生成器插件的使用方法及应用 (09:24)
38 38-第五屏头部的延续性更替 (04:03)
39 39-多边形生成工具制作背景特效 (04:03)
40 40-合作伙伴版面LOGO的排列布局版式定稿 (04:38)
41 41-合作伙伴LOGO的排列组合和对齐分布 (04:44)
42 42-通过添加调整成控制图层蒙版制作局部点击变彩色效果 (01:47)
43 43-第六屏底部背景效果制作及细节修饰方法 (04:12)
44 44-第六屏头部区域批量反白效果实现 (02:33)
45 45-联系方式图标组反白搞制作及布尔运算的绘制 (07:37)
46 46-表单的风格统一性制作及验证码效果制作方法 (07:51)
47 47-地图的局部变亮效果制作和指示标志 (05:22)
48 48-版权区域的制作及网站整版裁剪和整体效果核对 (03:46)
49 49-将网站图片文件置入到浏览器中查看效果的方法 (06:26)
50 50-个人站设计及制作方法和设计思路总结 (08:04)