学习如何开始为网站编码可能是一项艰难的任务。如果你不熟悉编码语言，那就更难了。但在正确的指导下，学习如何为网站编码是很容易的。
在本教程中，我们将为初学者介绍简单的网站设计与HTML网页模板。它们是编码网站的最简单方法。从长远来看，这是一个可以为你节省时间的过程，同时让你为你的访问者创建一个专业设计的网站!
[
（图片来自Envato Elements）。
在这个网页设计代码教程中，我们将使用一个来自Envato Elements的模板。如果你想浏览其他网页设计模板选项，请查看Envato Elements的网站设计代码模板集。你会发现专业的、响应式的选项，可以为你的下一个项目进行定制。
在我们开始我们的网页设计代码之前
你可能很想学习如何开始为网站编码。但如果你是一个初学者，看代码可能会被吓到。因此，在我们深入研究之前，让我们看看一些有用的术语，以便你能理解你在下面的步骤中对网站进行编码的变化。
- HTML。超文本标记语言是一种组织网页的语言。像文本和链接这样的东西都在这里添加。在本教程中，我们将使用HTML。
- 标签。标签是HTML中代码工作的方式。它们被写在角括号之间。一个标签打开（如：
<title>），另一个关闭（如：</title>）。文本内容放在开头和结尾的标签之间。 - PHP。一种服务器端的脚本语言，主要用于建立基于网络的应用程序。你会看到它被用来收集数据。几乎所有的联系表格都是用PHP文件工作的。
- 注释。注释是代码作者留下的注释。这些不会改变页面的任何东西，但它们可以让你看到代码应该做什么。
我们将需要什么
如果你想跟上这个简单的网页设计代码教程，你需要一些东西：
- Okno-Ultimate Multipurpose HTML5 Template。我们将从这个HTML网页模板中编辑一个个人登陆页面。
- Sublime Text编辑器。Sublime Text是我们要用来编辑标记的东西。
- Chrome，Safari，Firefox，或其他网络浏览器。你将需要你的浏览器，以确保你的修改能正常工作。
[
你有你需要的一切吗？那就让我们开始吧!
1.编辑标题和页眉
在本教程中，我们正在处理index-onepage-personal.html文件。这是一个简单的网站设计，适合初学者使用。在解压Okno ZIP文件夹后，在Sublime Text和你的浏览器中打开它。Sublime Text会让你编辑网站设计的HTML代码，而你的浏览器会让你实时看到变化。
在Sublime Text中，找到标题注释下的title 标签。这将改变出现在页面的标签或窗口上的名称。在简单的网站HTML代码中，它将看起来像这样。
<!-- Title -->
<title>Okno - Ultimate Multi-Purpose HTML5 Template</title>
用你的网站名称替换该文本。由于这是一个个人单页网站模板，这很可能是你自己的名字。在Sublime Text中保存该文件，并在浏览器中刷新页面。你会在窗口顶部的标签中看到这些变化。
让我们继续看看这个简单的网站设计的初学者的导航栏。这个栏在访问者滚动时是可见的，它还包括一个在左边的标志的位置。要改变标识，找到Logo 注释并编辑这几行代码。
<!-- Logo -->
<a class="logo-wrapper" href="index.html">
<img class="logo logo-light" src="assets/img/logo-light.png" alt="Okno">
<img class="logo logo-dark" src="assets/img/logo-dark.png" alt="Okno">
</a>
这两行都是为你的标志准备的，但在你的网页设计代码页面的不同部分。最上面的一行是在深色背景下的浅色标志。底线是针对浅色背景的深色标志。这是为了确保你的品牌形象在页面上是可见的。
在assets文件夹内的img文件夹中放置你的标志副本。改变网站设计代码中的文件名**（logo-light.png和logo-dark.png**），以匹配你的标志的文件名。
注意：你的标志应该是PNG文件格式，背景是透明的。还要注意，alt 属性对你的网页非常重要，以防照片无法加载或访客使用读屏软件。在进行这个简单的网站HTML代码教程时，为你的所有图片给出一个备用的描述。
在这个网站设计代码模板中，导航条代表了单页的不同部分。如果你不想重新命名这些部分，请随意跳过。
在主菜单注释下，你会看到每个部分的名称。编辑Primary Menu 评论下的a 标签之间的文字，重新命名你的导航栏中的链接。
<!-- Primary Menu -->
<div class="module menu left">
<ul id="nav-primary" class="nav nav-primary">
<li><a href="#home">Start</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
保存这个网页设计项目的简单网站HTML代码，并刷新以看到你的改动。
2.更新你的个人信息
现在是时候开始编辑你在网页设计代码中的信息了。
让我们看看从Section / Home 注释开始的部分。这里可以改变什么？我们可以替换背景图片和头像。你还可以添加你的名字、工作头衔、专业领域和其他信息。
[
让我们从改变图像开始。你可以从bg-image div 中编辑背景照片，从容器v-center img 标签中编辑头像div 。与改变文本不同，你需要通过源属性对img 标签本身进行修改。src 属性告诉网页在哪里可以找到照片。
如果我们看一下背景照片的src 属性，我们就可以知道在哪里可以找到这个图片。在你的Finder或文件资源管理器中，前往assets > img > photos来自己寻找图片文件。
要改变你简单的网站HTML代码中的背景图片，请准备好一个替代的JPG文件，尺寸与原文件完全相同。给你的照片起一个简单的名字，并把它放在照片文件夹中。现在改变src 属性中的名称，然后保存。
如果你没有准备好替换的照片，但想改变背景，可以去Envato Elements。你可以找到一个图片库或很酷的图形来使用。对于这个简单的网站设计初学者教程，我将使用其中的一张图片库背景照片。
[
改变头像的过程也是如此。把你的头像放在img文件夹内的avatar文件夹里。用你的照片的名字替换avatar01。在Sublime Text中保存这个网页设计项目的简单网站HTML代码，并刷新你的浏览器，看看它现在的样子。
[
改变名字和简介
编辑你的名字和简历需要几个简单的步骤。在col-md-9中找到H1 标签div ，并添加你的名字。在下面一行，键入你的工作头衔。
<h1 class="mt-20 mb-0 text-lg">Mike Lee</h1>
<h3 class="lead text-muted mb-40">Professional Front-End Developer</h3>
在Section / Home 评论下有三个描述列表。它们是由dl 标签定义的。它们是你可以简要地添加更多专业信息的地方。正如你在浏览器中看到的那样，默认的字段是专业、出生日期、前一家公司、多年经验和当前公司。如果你想分享这些信息，请编辑每个dl 中的dd 标签。如果你想改变这整个部分，你需要改变每个dl 标签内的dt 标签。
<div class="col-sm-4">
<dl class="description-2">
<dt>Speciality</dt>
<dd>Front-End Development</dd>
<dt>Years experience</dt>
<dd>6+</dd>
</dl>
</div>
做了修改？保存简单网站设计的HTML代码文件，刷新页面，看看你的变化。
[
注意，你可以让访问者通过点击一个按钮来下载你的简历或履历。为了设置这个，我们首先要在assets文件夹中创建一个名为cv的文件夹。然后，我们将把我们的简历放在这个新的文件夹里。
现在，让我们看看HTML，看看如何让它发挥作用。在网站设计的示例代码中，前往 "下载简历"一行。
<div class="col-sm-4"><a href="#" class="btn btn-primary btn-filled btn-block">Download CV</a></div>
我们要把href 属性中的**#替换为assets/cv/name-of-cv-file.extension**。为了使简历可以下载，在href 属性之后添加download 属性。你的网站设计的HTML代码中的那一行现在应该是这样的。
<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div>
保存这个网站设计项目的HTML代码，并在你的浏览器中测试它。注意，现在你只能从按钮上打开文件。但一旦你的网站上线，访问者就可以下载你的简历。
3.服 务部分
让我们在网站设计的HTML代码中加入我们提供的服务。如果你在步骤1中改变了这个部分或其他部分的名称，你仍然可以按照本教程的其余部分进行操作。只要确保在每个步骤中改变h6 标签。
用移动应用程序 h5 标签改变第一个服务的名称。这可以是你提供的任何服务。在接下来的一行中，在p 标签中对你的服务做一个简单的描述。保存网站设计代码文件，在你的浏览器中查看变化。
[
看起来我们可能遇到了一个问题。如果你改变了服务的名称，移动应用程序的图标就不再匹配了。这不是一个问题。Okno使用Themify图标。这些是供个人和商业使用的免费网络图标。
从上面的Themify链接中搜索一个匹配的图标。在i 标签中添加该图标的属性名称。在这个例子中，我将使用ti-shortcode 图标。让我们看看现在看起来如何。
[
这就好了。对你的其他服务重复这个过程，编辑网站设计样本代码中的桌面应用、图形设计、HTML/CSS开发和AngularJS行。
[
4.添加你的技能
在这个为初学者设计的简单网站设计中，这是一个精心设计的部分。正如你在浏览器中看到的那样，技能部分有一个仪表来显示你的熟练程度。这可以在网页设计代码中的技能注释下进行编辑。
你可以改变你希望访问者看到的技能。这些技能的名称可以在Section / Skills 注释下的strong 标签中找到。
你对这种技能的掌握程度如何？为了在你的网站上展示这一点，我们需要回溯到进度条 div 。在div 标签内，我们要编辑aria-valuenow 属性，以及style 属性。这些值将使用相同的数字来代表你的技能水平，满分为100。如果你想在100分中填上97分，请在这两个属性中进行修改。你的改动应该与下面的代码相匹配。
<div class="mb-40">
<div class="progress progress-2">
<div class="progress-bar" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 97%;">97%</div>
</div>
<strong>Adobe Photoshop</strong>
</div>
保存并刷新你的浏览器窗口，即可看到你的新技能你可以重复这个步骤来完成你的网页设计代码中的其余技能部分。
[
5.教育和工作经验
这是我们网页设计代码中让我们添加教育和工作经验的部分。
我们将编辑事件类中的三个标签div 。第一行让我们编辑日期，下面一行是你的教育或工作经验的标题，最后一行是地点。因此，如果我想分享我在NASA的三个月的火箭科学课程，我将编辑代码，看起来像这样。
<div class="event">
<div class="date">15.02.2004 - 15.05.2004</div>
<h5 class="mb-0">Rocket Science Course</h5>
<span class="text-muted">NASA</span>
</div>
你可以为其他两个事件类div 标签重复这些步骤。
[
6.推荐信
如果你正在按照这些步骤为一个自由职业者的网站编码，那么你就知道这一部分有多重要。来自过去的客户、顾客和老板的评价对说服别人信任你的下一个项目有很大的帮助。
这一部分在Section / Testimonials 评论下开始。这些引言有特殊的格式，我们要让它们保持原样。我们要做的就是编辑在div 标签中发现的文本。如果你有一个你想使用的确切的引语，就把它加在这里。使用strong 标签，用粗体字使推荐信的部分内容突出出来。
如果你有提供推荐信的人的头像，请将其添加到该推荐信部分的img 标签中。如果没有，请随意删除这行代码。下面的两行代码让你用这个人的名字和工作头衔来完成推荐语。
<div class="col-sm-6">
<div class="testimonial testimonial-1">
<div class="quote">
These tutorials are <strong>excellent</strong>. I've learned so much. I can't wait to try more!
</div>
<div class="author with-image">
<img src="assets/img/avatars/avatar01.jpg" alt="testimonial author avatar">
<span class="name text-uppercase">Mark Johnson</span>
<span class="caption text-muted">Envato Tuts+ user</span>
</div>
</div>
</div>
在你的网站设计的样本代码中重复这些步骤，完成这一部分。
[
7.媒体
你有想分享的工作照片吗？你可以在这一步为你的简单网站HTML代码准备好它们。
在我们开始之前，需要注意的是，得到你的照片的准确尺寸对这部分很重要。每张照片必须正好是640x563。使用Adobe Photoshop来调整你的图片大小。如果你没有这个程序，你可以使用一个免费的网站，如Pixlr或Photopea。
一旦你准备好你的图片，让我们看看如何将它们添加到我们的网站。找到Section / Works 的评论，然后在Media Item 的评论下找到img 的标签。我们可以通过一行熟悉的代码来改变我们的照片。如果我们阅读这一行，我们可以看到，我们需要将我们的照片放在作品文件夹内，这可以在img文件夹中找到。我们还需要改变文件名，以便我们的网站知道要使用哪张照片。
<img src="assets/img/works/gr-winter.jpg" alt="grand rapids in winter">
让我们做这些修改并保存。刷新你的浏览器以看到你的照片。
[
你可能会注意到，将鼠标悬停在你的照片上会显示一个特殊的效果。它看起来好像我们可以留下图片中显示的项目的简要描述。让我们充分利用这个HTML网页模板，添加一个简短的描述。
回溯到网站设计的样本代码的媒体项目注释下的h5 标签。在第一行，让我们留下这个项目的名称。在第二行，让我们添加一个完成项目所需的相关服务。
<div class="image-box image-hover bg-black text-center">
<div class="image">
<div class="hover dark">
<a href="#">
<h5 class="mb-0">Cityscapes</h5>
<span class="text-muted">Photography</span>
</a>
</div>
<img src="assets/img/works/gr-winter.jpg" alt="grand rapids in winter">
</div>
</div>
如果这项工作可以在网上看到，我们可以链接到它。在Media Item 注释下的a 标签中，将href 属性中的**#**替换为介绍你的项目的网页的链接。试着链接到谷歌，看看效果如何。
本节允许你分享最多六个项目。对你想分享的每件作品按照上述步骤进行。
[
8.联系部分
现在是时候为这个网页设计项目在HTML代码中设置联系信息了。这是在你的网页设计代码中很容易完成的一个步骤。
我们首先在Section / Content 评论下的img 标签中添加你的头像。这与我们在本网页设计代码教程的第二步中谈到的过程相同。
在Section / Content 注释下的address 标签内，我们将添加我们的地址、电话号码和电子邮件地址。通过编辑strong 标签内的内容，可以随意改变你分享的联系信息的类型。
<div class="col-sm-4">
<img class="img-circle mb-25" width="72" src="assets/img/avatars/envato-avatar.jpg" alt="envato avatar">
<address>
<strong>Address:</strong><br>
A795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br><br>
<strong>Phone:</strong><br>
+48 221 909 99<br><br>
<strong>E-mail:</strong><br>
<a href="#">your.name@example.com</a><br>
</address>
</div>
联系表不需要太多改动。如果你想给默认文本添加一个有趣的旋转，只需改变form 标签中的placeholder 属性。你可以用button 标签来改变按钮的文本。
<div class="col-sm-8">
<form class="contact-form validate-form" id="contact-form">
<div class="row">
<div class="form-group col-sm-6">
<input name="name" id="name" type="text" class="form-control bordered" placeholder="Name">
</div>
<div class="form-group col-sm-6">
<input name="email" id="email" type="text" class="form-control bordered" placeholder="E-mail address">
</div>
</div>
<div class="form-group">
<textarea name="message" id="message" cols="30" rows="7" class="form-control bordered" placeholder="Message"></textarea>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<button class="btn btn-filled btn-primary btn-block">Send it <i class="i-after ti-arrow-right"></i></button>
</div>
但是，我们的联系表格能用吗？现在还不行!我们需要对我们的PHP文件做一个非常快速的编辑。在你的搜索器或文件资源管理器中，进入Okno文件夹中的assets>php。然后在Sublime Text中打开contact-form.php文件。
在这个文件中，你会看到下面这行代码。
$emailTo = 'example@mail.com';
用你自己的电子邮件地址替换例子中的电子邮件，然后保存网页设计代码文件。现在，当访问者完成联系表格时，你会收到一封邮件，告诉你他们说了什么。
[
9.编辑页脚
这是我们为网站编码的最后一个步骤。这个单页网站的页脚有一个版权归属Okno网页模板的创造者和三个链接。你可以完全删除页脚，删除一些元素，或者编辑这些链接。如果你想编辑这些链接，我将指导你如何做。
在网站设计的示例代码的Footer 注释下，你会发现以下列表项。
<li><a href="#">Sign Up</a></li>
在href 属性中，用一个你想分享的网站的链接替换**#符号。这一改变将让访问者通过点击注册**进入该网站。你可以把这个文本改成任何你想改的东西。在接下来的两个列表项目中重复这一过程。
我们完成了!
祝贺你，你成功地按照步骤用网页模板编写了一个网站!如果你要为自己或客户创建一个网站，这个过程可以为你节省很多时间。而且正如你所看到的，这是建立网站最简单的方法之一。
