怎么自己做网站教程设计师如何拥有自己的个人网站（i）-外贸SEO优化建站分享

这不是一个快速的成功，也没有使用任何网站构建平台，也没有教程。这只是我在建立个人网站过程中的一些经验，它只是制作个人网站的100种方法之一。

正如标题所说，如何拥有“自己的”个人网站，因此您将讨论特定和可执行的途径。遵循此路径执行。下限是拥有一个个人网站，您不知道上限，并且有很大的想象空间。

为什么您需要个人网站

当前的基础架构非常完整，每个类别都有相应的应用程序。每个人都可以构建自己的页面并发布内容，尤其是在设计行业中。这些应用程序的起点是为更多的人提供服务，以便每个人都可以专注于创建而不必担心内容以外的其他内容，但这也是因为“向更多人提供服务”，这意味着需要各种限制。

发布页面

网站酷发布页面

发布页面

例如，对已发布内容的大小，大小，比例，格式（图片，视频，文本...）的限制以及对布局，布局等的限制，用户需要根据特定规则发布内容。一方面，各种限制是减少应用程序自己的运营和维护成本，另一方面，它是为了促进用户的操作。在许多情况下，没有限制，它们很容易混淆。

这里提到的限制不是贬义的，但毕竟是限制，有时它们仍然会受到影响。如果他们对您没有太大影响，那么阅读以下内容并不有害。只需观看并玩它。如果受到影响，那么您必须考虑一种打破限制的方法吗？

个人网站是一个不错的选择。它们不是“突破限制”，而应称为“扩大限制的边界”。在这里，大多数控制权都掌握在自己的手中，具有极高的自由。您可以自由地控制页面布局和样式，甚至可以为每项工作做不同的布局，而不必担心格式，文本，图片，视频，gifs ...以随意匹配。

您必须问，这看起来很诱人，因为它太好了，为什么很多人使用它？这正是使用外部应用和个人网站之间的核心区别：

自由程度与复杂程度成正比，您的意思越多，您所需的支持就越多。以下是我建立个人网站的过程。如果您已经计划建立个人网站，则以下内容可能对您有所帮助。如果您仍然犹豫，您只需查看整个过程，然后权衡是否这样做。

需要做什么工作

整个过程包括三个部分：

设计和实施上传服务器

在上传到服务器之前，所有这些只能在您自己的计算机上运行，只有在上传到服务器后，每个人都可以访问服务器。

设计和实施，这两个项目将连续迭代。低成本迭代是在线产品的重要特征之一。与物理产品不同，您必须完善，然后才能释放它们。否则，修改和调试的成本非常高。发布后，您可以举起一些大动作，然后才能执行下一次迭代。在线产品在这方面具有自然的优势，但是您可以以小步骤运行，并逐渐迭代逐渐接近理想状态。

设计

我不会对设计部分说太多。我都在这样做。每个人都可以随意演奏。应该注意的是，第一个版本应该尽可能简单。最主要的是清楚地清楚页面级关系，不要花太多时间。您很有可能会返回并以后进行修改。

完成

实施，即通过代码将设计草案转换为真实的网站，需要HTML（超文本标记语言），CSS（级联样式表），并且安排顺序均为学习顺序。

代码编辑器

在开始编写代码之前，您需要一个编辑器HTML，CSS和编辑器支持，就像在绘制图片之前一样，您需要安装Figma，在此阶段，不必担心要选择哪个编辑器，只需使用VS代码即可。

HTML，CSS

学习网络开发

HTML和CSS可能需要2-4周。他们不是编程语言。也可以从名称，即标记语言和样式表语言中看到它们。目前，它们可以大致理解为比编程语言更简单。网站的内容，布局和样式都是由他们完成的。

学习HTML和CSS并不是要学习A和B之间的线性关系，而是在两者之间移动和学习Web开发 - MDN可以帮助您掌握这两个工具。

CSS布局

HTML首先遵循教程，以熟悉标签的使用情况，注意页面结构，然后看HTML，它不能反映页面结构的重要性。当您开始使用CSS调整布局时，页面结构的重要性会反映出来。

CSS部分应特别注意CSS布局。使用频率很高。可以根据需要检查其他CSS样式，但是布局不好。它具有多种布局方法，并影响整个页面。有许多相关项目。您必须在早期阶段弄清楚。

一开始，您会头疼。毕竟，第一步总是很困难。如果您坚持不懈怎么自己做网站教程，您将能够尽快完成。您可以首先像这样欺骗自己。如果您头痛超过两个星期，请重试。您是需要建立自己的网站的人。坚持，稍等。

您可以通过浏览基础知识，做一些实际案例，在执行时学习并尝试使用HTML + CSS来采取行动：

上一篇文章中的简单视觉草稿；复制您喜欢的几页样式（从易于到困难）； 2-5页设计草稿应尽可能接近真正的网站环境，例如具有页面的开始和结尾，您可以彼此跳跃。

当您可以完成这些时，几乎完成了。这部分的最后一步是 - 响应式设计，这是当前环境中必须考虑的问题。响应式设计是指在不同屏幕尺寸（例如计算机，iPad，移动电话等）下页面的布局和样式。这不仅是CSS部分的工作，而且在不同尺寸的屏幕下的页面和样式也应在设计的早期阶段进行全面考虑。在意识到响应式设计之后，学习的这一部分结束并开始下一步。

这是一种完整的动态编程语言。当应用于HTML文档时，可以向网站提供动态交互功能。

只有在这一点上，我才能真正开始“编程”。它非常强大，除了Web开发外，还具有许多用途。相比之下，这对新手非常友好。相比之下，它非常适合作为入门编程语言。

编程对于非专业人士非常陌生。即使是那些适合入门的人也会感到非常复杂。这是一个事实。我们不能改变任何东西。我们只能想到一些使学习过程更加顺畅的方法。我的解决方案不是尝试“学习”。这件事非常困难，我无法学，我不知道有什么用途。因此，我们可以反向考虑它。我们需要用什么来学习？

我相信，在以前的HTML + CSS练习部分中，除了HTML和CSS之外，您必须遇到一些问题，例如完全相同的页面标头和页面末端。您需要将代码复制并粘贴到每个页面中。如果进行任何修改，则必须修改所有页面。的确，每个页面都需要它们，但是是否有任何方法可以自动将页面标头和页面末端添加到每个页面？即使进行了任何修改，它也只会更改一次。

它恰好擅长做这种事情，因此目前我们需要控制HTML中的某些内容。 JS文件可以解决所有页面的头部和结尾，我们不再需要一个一个一个粘贴它们。您需要了解DOM（文档对象模型）以通过它连接到HTML。由于您可以控制HTML中的内容，您还可以控制CSS吗？没错，您可以顺便说一句。

无论您做什么，都必须首先完成它。掌握基础知识后，您可以根据特定问题搜索相应的解决方案。否则，即使找到解决方案，您也将无法理解，更不用说解决自己的实际问题了。

整个过程基本上是要首先掌握基础知识，在发现问题后搜索解决方案，并学习如何解决这些问题。很有可能会从中扩展一些相关问题，然后发现问题，搜索，学习和发现问题...

您可能在开始时无法准确找到解决方案，因为您刚刚遇到了它，并且无法准确描述问题。要有耐心。通过深入了解JS，不仅可以提高技术能力，而且提出问题的能力也会提高。提出问题是一项非常重要的技能，因此可以形成积极的周期怎么自己做网站教程，您可以冷静地找到遇到问题时解决问题的方法。

一部分，完成时：

您可以停下来准备下一步。

完成分阶段任务

让我们整理一下现在所做的工作：

（DOM）

对于初学者来说，完成这些功能并不容易，这可能需要您很长时间，这是正常的，并且要坚持下去，并且当您完成页面时，将其上传到服务器，您可以通过域名访问它。

80％已经完成。尽管仍有20％的工作要做，但工作量和难度都比以前需要长期研究和研究的80％简单得多。

除了文章中列出的教程链接外，建议您找到其他一些教程，无论是文本还是视频，互联网上都有非常丰富的资源，并且基本教程不会太偏见。充分利用搜索并找到适合您的学习。