为什么选择 Sublime Text 做网页？

在开始之前,先了解一下 Sublime Text 的优势：

sublime网页制作视频教程
（图片来源网络，侵删）
  • 轻量快速：启动和运行速度极快，对电脑配置要求不高。
  • 强大的编辑功能：多光标编辑、命令面板、快速跳转等，能极大提升编码效率。
  • 高度可定制：通过插件和配置文件（Preferences.sublime-settings），可以打造成一个功能强大的个人 IDE。
  • 免费试用：可以无限期试用，偶尔会弹窗提醒购买，但不影响核心功能。

精选视频教程推荐

这里为您挑选了从入门到进阶的优质中文视频教程,涵盖了不同平台和风格。

Bilibili (B站) - 零基础入门首选

B站是国内学习编程的绝佳平台,资源丰富，互动性强。

  • UP主： 程序员鱼皮

    • 【保姆级】前端开发入门教程，零基础也能学会！
    • 简介： 虽然这是一个完整的前端入门系列，但其中早期几集专门介绍了使用 Sublime Text 进行开发，鱼皮的讲解非常清晰、有条理，特别适合零基础小白，他会从安装、配置、插件安装一路讲到基础语法，非常系统。
    • 观看链接： 在 B站搜索 “程序员鱼皮 前端入门” 即可找到。

  • UP主： 狂神说Java

    sublime网页制作视频教程
    （图片来源网络，侵删）
    • 【狂神说HTML】HTML超入门教程
    • 简介： 狂神的课程以激情、有趣和干货多著称，在他的 HTML 基础教程中，他使用的编辑器就是 Sublime Text，跟着他学习，你不仅能学会 HTML，还能快速熟悉 Sublime Text 的基本操作。
    • 观看链接： 在 B站搜索 “狂神说HTML” 即可找到。

  • UP主： 黑马程序员

    • 2025新版HTML+CSS基础入门教程
    • 简介： 黑马程序员的课程非常体系化，质量有保障，他们的前端基础课程同样使用 Sublime Text 作为教学工具，内容详实，适合喜欢系统性学习的同学。
    • 观看链接： 在 B站搜索 “黑马程序员 HTML CSS” 即可找到。

YouTube - 进阶与英文资源

YouTube 上有大量高质量的英文教程，适合希望提升英文阅读能力或接触国际前沿开发技巧的学习者。

  • 频道： Traversy Media

    • Build a Website with HTML, CSS & JavaScript (Full Course)
    • 简介： Brad Traversy 是一位非常受欢迎的编程导师，他的这个全栈入门课程，从头到尾使用 Sublime Text 进行演示，节奏紧凑，项目驱动，非常适合有一定基础后想通过实战巩固知识的同学。
    • 观看链接： 在 YouTube 搜索 “Traversy Media Build a Website”。

  • 频道： The Net Ninja

    • HTML & CSS Crash Course For Absolute Beginners
    • 简介： 这个频道的教程以“忍者”为主题，风格独特，短小精悍，他的快速入门课程会带你快速过一遍 HTML 和 CSS 的核心知识点，同时展示 Sublime Text 的高效用法。
    • 观看链接： 在 YouTube 搜索 “The Net Ninja HTML CSS Crash Course”。

Sublime Text 网页制作核心技能点

无论你看哪个教程,都需要掌握以下 Sublime Text 的核心技能，它们能让你从“会用”到“好用”。

基础操作

  • 安装与汉化：下载安装 Sublime Text，通过安装 Package Control 插件来管理其他插件，包括汉化插件。
  • 创建与保存文件：新建 .html, .css, .js 文件，并保存在项目文件夹中。
  • 快捷键：
    • Ctrl + S：保存
    • Ctrl + N：新建文件
    • Ctrl + Shift + N：新建窗口
    • Ctrl + /：注释/取消注释
    • Ctrl + D：选中相同内容，可连续按选择多个
    • Ctrl + 鼠标左键：多光标编辑

必装插件

通过 Ctrl + Shift + P 打开命令面板，输入 Package Control: Install 来安装以下插件：

  • Emmet：前端开发神器！ 通过简短的语法快速生成 HTML 和 CSS 代码。
    • 示例：输入 然后按 Tab 键，会自动生成完整的 HTML5 文档结构，输入 ul>li*5 然后按 Tab，会生成一个包含 5 个 li 的无序列表。
  • LiveReload 或 AutoSave：实时预览你的网页，你在 Sublime Text 中修改代码，浏览器会自动刷新显示效果，极大提升开发体验。
  • SideBarEnhancements：增强侧边栏功能，比如快速在新窗口中打开、复制文件路径等。
  • ColorHighlight：鼠标悬停在 CSS 颜色值上时，会显示一个颜色方块，直观方便。
  • HTML-CSS-JS Prettify：代码格式化工具，一键让你的代码变得整洁规范。

项目管理

  • 新建项目：Project -> New Project，选择你的网站根文件夹。
  • 保存项目：Project -> Save Project As...，会生成一个 .sublime-project 文件，下次可以快速打开整个项目。
  • 切换项目：通过 Project 菜单可以轻松在多个网站项目间切换。

推荐的学习路径

  1. 环境搭建与熟悉 (1-2天)

    • 任务：安装 Sublime Text，安装 Package Control。
    • 目标：学会汉化，熟悉界面（菜单栏、侧边栏、编辑区），掌握最基本的文件操作和快捷键。

  2. HTML 基础 + Sublime 插件 (3-5天)

    • 任务：跟着一个视频教程（如鱼皮或狂神）学习 HTML 基础标签（<html>, <head>, <body>, <h1>, <p>, <a>, <img>, <div>, <ul>, <li> 等）。
    • 目标：重点掌握 Emmet 插件的使用，尝试用 Emmet 语法快速构建页面结构，安装 LiveReload 并配置好，体验实时预览的快感。

  3. CSS 基础 + 代码美化 (3-5天)

    • 任务：学习 CSS 选择器、盒模型、常用属性（颜色、字体、背景、边距、浮动、定位等）。
    • 目标：使用 Emmet 快速编写 CSS（如 w100 -> width: 100px;），安装 HTML-CSS-JS Prettify，学习格式化代码，保持代码整洁。

  4. 实战项目与进阶 (1-2周)

    • 任务：模仿一个简单的静态网站（如个人主页、公司介绍页）进行完整制作。
    • 目标：将所学知识融会贯通，熟练使用 Sublime Text 的工作流，可以尝试探索更多插件，如代码片段插件、Git 插件等。

总结与提示

  • 动手最重要：看再多视频，不如亲手敲一遍代码，跟着教程做一个小项目，效果最好。
  • 善用官方文档：遇到问题，先学会使用 Sublime Text 的官方文档和 Package Control 的插件库。
  • 不要追求完美工具：Sublime Text 非常优秀，但最终决定你网页制作水平的是你的 HTML、CSS 和 JavaScript 知识，而不是编辑器本身，先把工具用熟，再考虑是否换成 VS Code 等更强大的工具。
  • 社区支持：遇到具体问题，可以去 Stack Overflow、V2EX 或者相关技术论坛提问。

希望这份详细的指南能帮助你顺利开启 Sublime Text 的网页制作之旅！祝你学习愉快！