如何建立一個網站：初學者

今天我將指導您從零開始建立一個完整的網站。如果這聽起來很難，別擔心。我會指導你每一步。...

你一直想做一個網站嗎？也許你讀過我們的一些HTML（理解HTML）和CSS教程，但不知道如何在更大的項目中使用這些語言。

今天我將指導您從零開始創建一個完整的網站。別擔心，如果這看起來很難，我會指引你一步步地完成。

您將使用HTML、CSS和JavaScript生成這個網站，並使用jQuery（jQuery指南）進行操作。你不會做什麼真正的前沿，所以這段代碼應該在大多數現代瀏覽器中都能很好地工作。

如果您不確定是否有CSS，請查看W3的CSS指南學校網.

設計

這是這個網站的設計。看一看高分辨率圖像如果你想看得更好，甚至更好，下載完整的項目在這裡。

我在Adobe Photoshop 2017中為一家虛構的公司設計了這個網站。如果您感興趣，請確保從包下載中獲取.PSD文件。以下是photoshop文件中的內容：

在PSD中，您會發現所有圖層都已分組、命名和顏色編碼：

你需要安裝一些字體才能使事情看起來正確。第一個是字體真棒，用於所有的圖標。另外兩種字體是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瀏覽器中打開。你可能不會注意到太多，它肯定不會看起來像一個網站而已。

請注意，頁面標題是如何成為噪波媒體的。這是由title標記內的文本定義的。這必須在頭標籤裡面。

標題

讓我們創建標題。下面是它的樣子：

讓我們從頂部的那一點灰色開始。淺灰色，下面有點深灰色。以下是特寫：

將此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類刪除最後一個元素的右邊框。下面是它的樣子：

本節只剩下紅色水平顏色高亮顯示。將此HTML添加到普通包裝之後：

下面是CSS：

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

這是最上面的部分。這就是它看起來的樣子——和設計很相似，對吧？

主要內容區

現在是時候轉移到主要內容領域了，即所謂的“疊上”。這部分是這樣的：

這是一個非常簡單的部分，左邊的一些文本，右邊有一個圖像。這個區域將大致劃分為三分之一，大致接近黃金分割率。

您將需要此部分的示例圖像。它包含在下載中。這張圖片是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將調整圖像大小，同時保持圖像的縱橫比。

報價區

讓我們創建報價區域。下面是它的樣子：

這是另一個簡單的領域。它包含一個深灰色的背景，以白色為中心的文本。

將此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;}

這裡發生的事情不多。大小調整是所需的主要調整--字體大小、間距等。這就是整個事情現在的樣子——它開始看起來像一個網站了！

圖標區域

讓我們繼續努力--快結束了！下面是需要創建的下一個區域：

這部分將使用幾個類。除了內容之外，這三個圖標基本相同，因此使用類而不是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的——它不僅限於鏈接。這一部分現在是這樣的：

頁腳

最後一件事就是頁腳！這真的很簡單，因為它只是一個沒有文本的灰**域。在圖標區域的正常包裝後添加此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，這也是可選的。該網站是完全功能在這一點上沒有這個功能。下面是它的樣子（加速）：

修改您的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語句來顯示不同的圖像，並跟蹤當前顯示的圖像。