如何建立一个网站：初学者

今天我将指导您从零开始创建一个完整的网站。如果这听起来很难，别担心。我会指导你每一步。...

你一直想做一个网站吗？也许你读过我们的一些HTML（理解HTML）和CSS教程，但不知道如何在更大的项目中使用这些语言。

make-website-beginner

今天我将指导您从零开始创建一个完整的网站。别担心，如果这看起来很难，我会指引你一步步地完成。

您将使用HTML、CSS和JavaScript生成这个网站，并使用jQuery（jQuery指南）进行操作。你不会做什么真正的前沿，所以这段代码应该在大多数现代浏览器中都能很好地工作。

如果您不确定是否有CSS，请查看W3的CSS指南学校网.

设计

这是这个网站的设计。看一看高分辨率图像如果你想看得更好，甚至更好，下载完整的项目在这里。

Website Design Wooden

我在Adobe Photoshop 2017中为一家虚构的公司设计了这个网站。如果您感兴趣，请确保从包下载中获取.PSD文件。以下是photoshop文件中的内容：

PSD Template

在PSD中，您会发现所有图层都已分组、命名和颜色编码：

Template PSD Layers

你需要安装一些字体才能使事情看起来正确。第一个是字体真棒，用于所有的图标。另外两种字体是PT Serif和Myriad Pro（包括Photoshop）。如果您不确定如何安装字体，请阅读我们的指南。

不要担心，如果你没有adobephotoshop，你不需要它来继续。

初始代码

既然设计清楚了，我们就开始编码吧！在您最喜欢的文本编辑器中创建一个新文件（我使用的是Sublime text 3）。另存为索引.html. 您可以随意调用它，许多页面之所以称为索引，是因为web服务器的工作方式。大多数服务器的默认配置是为索引.html如果没有指定页面，则返回第页。

如果您不想了解详细信息，请从下载中获取完整的代码。

以下是您需要的代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Noise Media</title><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><style>/* CSS goes here, at the top of the page */</style></head><body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">/* JavaScript goes here, at the bottom of the page */</script></body></html>

这可以做几件事：

定义所需的最小HTML。
定义“噪波介质”的页面标题
包括Google CDN上托管的jQuery（什么是CDN）。
包括谷歌CDN上托管的字体。
定义一个样式标记来编写CSS。
定义一个脚本标记来编写JavaScript。

再次保存文件并在web浏览器中打开。你可能不会注意到太多，它肯定不会看起来像一个网站而已。

First Code Browser Preview

请注意，页面标题是如何成为噪波媒体的。这是由title标记内的文本定义的。这必须在头标签里面。

标题

让我们创建标题。下面是它的样子：

Website Header

让我们从顶部的那一点灰色开始。浅灰色，下面有点深灰色。以下是特写：

Gray Bar Closeup

将此HTML添加到顶部的body标记中：

你来的时候，我们把这个分解。潜水器就像一个容器，用来放其他东西。这个“其他东西”可以是更多的容器，文本，图像，任何真正的东西。对于可以进入某些标记的内容有一些限制，但是div是相当通用的。它有一个顶部酒吧的id。这将用于使用CSS对其进行样式，并在需要时使用JavaScript对其进行目标。确保只有一个元素具有特定id——它们应该是唯一的。如果您希望多个元素具有相同的名称，那么使用一个类来代替——这就是它们的设计目的！下面是您需要对其进行样式设置的CSS（将其放在样式标签的顶部）：

html, body {margin: 0;padding: 0;font-family: 'Helvetica', 'Arial'; /* initial fonts */}#top-bar {width: 100%;background: #F1F1F1; /* light gray */border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */height: 25px;}

注意在名称之前如何使用散列符号（#，hashtag，pound sign）。这意味着元素是一个ID。如果您使用的是a类，那么您将使用句号（.）。html和body标记的padding和margin设置为零。这样可以防止任何不必要的间距问题。

现在是时候进入标志和导航栏了。在开始之前，需要一个容器来放置此内容。让我们把它设为一个类（这样你以后就可以重用它），因为这不是一个响应性强的网站，所以把它设为900像素宽。

HTML格式：

CSS格式：

.normal-wrapper {width: 900px;margin: 0 auto;padding: 15px 40px;background: red;overflow: auto;}

在完成代码之前很难判断发生了什么，因此添加（临时）彩色背景以查看发生了什么是很有帮助的：

background: red;

现在是时候创建标志了。图标本身需要字体。Font Awesome是一组打包为矢量字体的图标--太棒了！上面的初始代码已经设置好了，所以一切都准备好了！

将此HTML添加到普通包装器div中：

<div id="logo-container"><i class="fa fa-volume-down logo-icon"></i> <h1>Noise Media</h1></div>

CSS格式：

.logo-icon {color: #000000;font-size: 60pt;float: left;}h1 {float: left;margin: 21px 0 0 25px;}

不要担心其他字体与设计不匹配——稍后您将整理这些字体。如果您想使用不同的图标，请转到Font Awesome ic***页面，然后将fa volume更改为您想要使用的图标的名称。

移动到导航栏，您将使用无序列表（UL）进行此操作。将此HTML添加到徽标容器之后（但仍在普通包装中）：

<ul id="navbar"><li><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">Reviews</a></li><li><a href="" class="last-link" >Contact</a></li></ul>

href用于链接到其他页面。本教程网站没有任何其他页面，但您可以在此处输入名称和文件路径（如果需要）。评论.html. 一定要用双引号括起来。

以下是CSS：

#navbar { list-style-type: none; /* remove bullet points */ margin: 29px 0 0 0; padding: 0; float: right; font-size: 16pt;}#navbar li { display: inline; /* make items horizontal */}#navbar li a:link, #navbar li a:visited, #navbar li a:active { text-decoration: none; /* remove underline */ color: #000000; padding: 0 16px 0 10px; /* space links apart */ margin: 0; border-right: 2px solid #B4B4B4; /* divider */}#navbar li a:link.last-link { /* remove divider */ border-right: 0px;}#navbar li a:hover { /* change color on hover (mouseover) */ color: #EB6361;}

这个CSS以一个无序的列表开始。然后使用列表样式type:none；删除项目符号；。链接之间有一点间隔，当您将鼠标悬停在链接上时，它们会被赋予一种颜色。小的灰色分隔线是每个元素的右边框，然后使用last link类删除最后一个元素的右边框。下面是它的样子：

Website Navbar Hover

本节只剩下红色水平颜色高亮显示。将此HTML添加到普通包装之后：

下面是CSS：

#top-color-splash {width: 100%;height: 4px;background: #EB6361;}

这是最上面的部分。这就是它看起来的样子——和设计很相似，对吧？

Website Top Section Completed

主要内容区

现在是时候转移到主要内容领域了，即所谓的“叠上”。这部分是这样的：

Website Main Area

这是一个非常简单的部分，左边的一些文本，右边有一个图像。这个区域将大致划分为三分之一，大致接近黄金分割率。

您将需要此部分的示例图像。它包含在下载中。这张图片是670px宽，是从我们的松下Lumix DMC-G80/G85审查。

在top color splash元素后添加HTML：

<div class="normal-wrapper"><div class="one-third"><h2 class="no-margin-top">Welcome!</h2><p>Noise Media is a technology company specialising in tech reviews.</p><p>We’re very good at what we do, but unfortunately, we are not a real company.</p><p>Make sure you visit makeuseof.com for the full tutorial on how to build this website.</p><p>Alternatively, check out our review of the Panasonic G80 shown on the right!</p></div><div class="two-third"><img class="featured-image" src="Image_1.jpg" /></div></div>

注意普通包装器元素是如何返回的（这就是使用类的乐趣）。您可能想知道为什么图像（img）标记没有关闭。这是一个自动关闭标签。正斜杠（/&gt；）表示这一点，因为关闭标记并不总是有意义的。

CSS格式：

.one-third {width: 40%;float: left;box-sizing: border-box; /* ensure padding and borders do not increase the size */margin-top: 20px;}.two-third {width: 60%;float: left;box-sizing: border-box; /* ensure padding and borders do not increase the size */padding-left: 40px;text-align: right;margin-top: 20px;}.featured-image {max-width: 500px; /* reduce image size while maintaining aspect ratio */}.no-margin-top {margin-top: 0; /* remove margin on things like headers */}

这里最重要的属性是框大小：border box；。这样可以确保元素的宽度始终为40%或60%。默认值（没有此属性）是指定的宽度加上任何填充、边距和边框。图像类（特征图像）的最大宽度为500px。如果只指定一个维度（宽度或高度），而将另一个维度留空，css将调整图像大小，同时保持图像的纵横比。

报价区

让我们创建报价区域。下面是它的样子：

Website Quote Area

这是另一个简单的领域。它包含一个深灰色的背景，以白色为中心的文本。

将此HTML添加到上一个普通包装之后：

<div id="quote-area"><div class="normal-wrapper"><h3>“makeuseof is the best website ever”</h3><h4>Joe Coburn</h4></div></div>

然后这个CSS：

#quote-area {background: #363636;color: #FFFFFF;text-align: center;padding: 15px 0;}h3 {font-weight: normal;font-size: 20pt;margin-top: 0px;}h4 {font-weight: normal;font-size: 16pt;margin-bottom: 0;}

这里发生的事情不多。大小调整是所需的主要调整--字体大小、间距等。这就是整个事情现在的样子——它开始看起来像一个网站了！

Website Progress

图标区域

让我们继续努力--快结束了！下面是需要创建的下一个区域：

Website Icon Area

这部分将使用几个类。除了内容之外，这三个图标基本相同，因此使用类而不是id是有意义的。将此HTML添加到上一个报价区域之后：

<div class="normal-wrapper"><div class="icon-outer"><div class="icon-circle"><i class="fa fa-youtube logo-icon"></i></div><h5>YouTube</h5><p>Checkout our YouTube channel for more tech reviews, tutorials and giveaways!</p></div><div class="icon-outer"><div class="icon-circle"><i class="fa fa-camera-retro logo-icon"></i></div><h5>Reviews</h5><p>If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.</p></div><div class="icon-outer"><div class="icon-circle"><i class="fa fa-dollar logo-icon"></i></div><h5>Buying Guides</h5><p>At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.</p></div></div>

这三个图标也很棒。HTML再次使用普通的包装器类。以下是CSS：

.icon-outer {box-sizing: border-box; /* ensure padding and borders do not increase the size */float: left;width: 33.33%;padding: 25px;margin: 0;text-align: center;}.icon-circle {background: #EEEEEE;color: #B4B4B4;width: 200px;height: 200px;border-radius: 200px; /* make rounded corners */margin: 0 auto;border: 2px solid #D6D6D6;box-sizing: border-box; /* ensure padding and borders do not increase the size */font-size: 75pt;padding: 30px 0 0 0;cursor: pointer;}.icon-circle:hover {/* change color on hover (mouseover) */color: #FFFFFF;background: #EB6361;}h5 {margin: 15px 0 10px 0;font-size: 20pt;}

CSS中出现了一些新的东西。圆角由边界半径设置：200px；。将此值设置为与宽度相同的值将生成一个完美的圆。如果你更喜欢圆角的正方形，你可以减少这个。注意悬停操作是如何应用于div的——它不仅限于链接。这一部分现在是这样的：

Website Ic*** Hover

页脚

最后一件事就是页脚！这真的很简单，因为它只是一个没有文本的灰**域。在图标区域的正常包装后添加此HTML：

以下是CSS：

#footer {width: 100%;background: #F1F1F1; /* light gray */border-top: 1px solid #D4D4D4; /* dark gray "topline" */height: 150px;}

看-非常简单的东西。

再加点比萨

就这样，编码完成了！你完全可以保持原样，这是一个完整的网页。不过，您可能已经注意到，它与设计并不完全相同。主要原因是使用的字体。我们来解决这个问题。

大多数标题使用的字体是Myriad Pro。这是adobecreatecloud附带的，但不能作为webfont使用。目前网页上使用的字体是Helvetica。这看起来没问题，所以您可以保持原样，但是PT Sans可以作为webfont使用。用于所有文本的字体是PT Serif，这是一种webfont。

Webfonts是一个简单的过程。就像在计算机上加载新字体一样，网页可以按需加载字体。最好的方法之一是通过谷歌字体。

添加此CSS以切换到更好的字体：

@import url('https://fonts.googleapis.com/css?family=PT+Sans');@import url('https://fonts.googleapis.com/css?family=PT+Serif');h1, h2, h4, h5, h6 {font-family: 'PT Sans', 'Helvetica', 'Arial';}

现在修改html和body元素以使用新字体：

font-family: 'PT Serif', 'Helvetica', 'Arial';

注意h3元素是如何不包括在列表中的——这将默认为PT Serif而不是PT Sans。

最后，让我们使用一些JavaScript来滚动浏览三个不同的特色图片。这部分需要图片2和图片3，这也是可选的。该网站是完全功能在这一点上没有这个功能。下面是它的样子（加速）：

Website Scrolling Images

修改您的HTML以包含三个特色图像。注意其中两个有一个隐藏的CSS类。每个图像都有一个ID，这样JavaScript就可以独立地针对每个图像。

以下是隐藏额外特征图像所需的CSS：

.hidden {display: none;}

既然HTML和CSS已经处理好了，让我们切换到JavaScript。了解这一部分的文档对象模型（DOM）很有用，但这不是一个要求。

在页面底部找到脚本区域：

在脚本标记中添加以下JavaScript：

/* JavaScript goes here, at the bottom of the page */$(document).ready(function() { // run once the page is ready var time = 2500; // get the image containers $im1 = $('#f-image-1'); $im2 = $('#f-image-2'); $im3 = $('#f-image-3'); setInterval(function(){ // call function every x milliseconds (defined in time variable above) changeImage(); }, time); var currentImage = 1; function changeImage(){ switch(currentImage) { case 1: // show image 2 $im1.hide(); $im2.show(); $im3.hide(); currentImage = 2; break; case 2: // show image 3 $im1.hide(); $im2.hide(); $im3.show(); currentImage = 3; break; default: // show image 1 $im1.show(); $im2.hide(); $im3.hide(); currentImage = 1;} }});

这里发生了一些事情。代码包含在$（document）.ready（）中。这意味着它将在浏览器完成页面呈现后运行——这是一个很好的实践。setInterval（）函数用于按预定义的毫秒间隔（1000毫秒=1秒）定期调用changeImage（）函数。它存储在时间变量中。您可以增加或减少此值以加快或减慢滚动。最后，使用一个简单的case语句来显示不同的图像，并跟踪当前显示的图像。