如何开始网页设计

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

以下是一个关于如何开始构建网站的答案,我完全赞同并且不含糊。 这会花费一些钱,就像学习弹吉他需要购买吉他和其他配件一样。 这也需要一些时间,而且主要不直接涉及编码本身。 它是关于让你到达一个真正进行网页设计的地方,并且你无法抗拒学习!

我将提到特定的公司名称,但不提供链接,只是为了明确这篇文章不是联盟营销。 谷歌搜索它们应该会直接找到它们。

1. 购买域名

从 Hover 购买域名。 购买一些有用的东西,比如你的名字.com 或商业想法.com。 或者购买一些你实际上会做些什么的愚蠢的东西。

2. 购买一些网站托管

在 Media Temple 购买最便宜的托管计划。 告诉他们你已经拥有域名。 我认为将域名购买公司和托管公司分开更好1

完成后,您将收到一封服务激活电子邮件。

3. 将新域名的名称服务器指向新的托管

服务激活电子邮件中的链接将带您前往 Media Temple 的指南,其中包含完成设置所需的所有信息。 在 DNS 部分,您将看到 Media Temple 的名称服务器。 我们需要更改 Hover 上我们域名的名称服务器,以便该域名正确指向 Media Temple。

当我们更改这些名称服务器时,我们正在更改 DNS 信息。 每当您更改 DNS 信息时,可能需要一些时间。 此信息需要传播到世界各地为互联网提供动力的路由器。 这就是互联网的工作原理!

请注意,这可能需要一些时间才能开始工作(对于我们即将建立的网站实际上才能显示出来)。

4. 获取一些 FTP 软件

FTP 用于传输文件。 我们将使用它将文件从您的计算机传输到网站托管服务器计算机。 我们将在稍后讨论这些文件,但现在我们只是进行设置。

如果您使用的是 Mac,请获取 Coda。 Coda 是一个 FTP 客户端,但它也是一个代码编辑器,当您像现在一样刚开始时,这非常方便。

我对 PC 软件并不熟悉,但谷歌搜索“适用于 PC 的 FTP 客户端”会显示很多内容。 我相信有一些不错的软件。

5. 通过 FTP 连接到您的网站托管

该 Media Temple 指南区域还将包括 FTP 信息,这意味着

  1. 主机名
  2. 用户名
  3. 密码

将电子邮件中的 FTP 凭据输入 FTP 客户端(创建新站点)。

连接到服务器。

6. 将域名添加到托管

购买托管时,我们告诉他们我们有自己的域名。 因此,让我们在其中进行设置。 这肯定会因托管公司而异。 以下是 Media Temple 的操作方式

7. 通过服务器上的 FTP 找到网站根目录

服务器上始终有一个特定的文件夹是“网站根目录”。 例如,如果您在那里放置一个 index.html 文件,那么当您访问你的名字.com 时就会显示该文件,或者如果您在那里创建一个名为“cool”的文件夹并在该文件夹中放置一个 index.html 文件,那么当您访问你的名字.com/cool/ 时就会显示该文件。

8. 感受力量在你的血管中流淌

您放入网站根目录中的任何内容都将在互联网上实时显示!

如果您在那里放置一个 index.html 文件,那么当您在网页浏览器中访问您的域名时就会显示该文件。

9. 找到一个不错的模板下载,并将其上传到您的服务器

下载一个模板。 谷歌搜索诸如“免费 HTML 模板”之类的内容,甚至可以找到您喜欢的付费模板并购买。 模板并没有什么错。 最终您会变得足够好,不需要模板,或者可以在何时使用模板方面做出明智的选择,但现在,最好从一个外观不错的网站开始,您可以对其进行调整并使其成为自己的网站。 就像学习乐器通过演奏您喜欢的歌曲比学习音阶更有乐趣(并且更容易变得更好)一样。

10. 祝贺

您现在已经建立了一个网站。 您绝对有能力编辑这些文件并使其发生。 无需任何进一步的培训,您就足够聪明,可以找到要更改的词语并在 HTML 中更改它们并查看结果。 您足够聪明,可以找到 CSS 中的颜色值并将它们更改以查看结果。 您足够聪明,可以找出 HTML 元素和 CSS 选择器之间的联系。

这就是绝大多数网页设计师的起步方式。 我知道我就是这样做的。

现在,您可以学习您想学习的任何东西,并在您实际工作的网站中学习。 您可以想象您学习的内容如何应用于您的真实网站。 您做得越多,就越好。 想变得更好吗? 只需构建网站!

替代方案

我想在这篇文章中非常具体。 没有含糊不清的地方。 但这并不意味着这是唯一的途径。 让我们在评论中讨论类似但不同的路径。

升级

在对这个过程感到相当舒适之后,有很多方法可以升级。 一些方法可能包括

  • 安装像 WordPress (视频系列)、Kirby、Perch、Ghost 等等这样的 CMS。
  • 通过不断设计来提升你的整体设计技能。
  • 学习一些 jQuery (视频系列) 来添加高级功能和交互。
  • 学习关于版本控制系统,例如 Git。
  • 学习如何有效地运营一个网页设计业务。

有很多方法可以提升自己。你很可能会在自然地学习过程中发现大多数方法。


1例如,如果你从你的托管公司购买你的域名,然后决定更换托管公司,托管公司没有动力帮助你处理域名。