0. 引言

網站的搭建需要頁面、域名和云服務器，這一篇教程是第一步，也就是關于頁面的制作，如何將制作好的頁面發布到云服務器上，請參考之前的文章：對于對域名沒有要求的完全小白的同學，可以嘗試最基礎的建站網站，例如竹子建站、凡科建站等。通過簡單的幾步操作，就可以搭建一個基礎的展示頁面，好處在于步驟簡單、不用花錢租服務器和域名，以及不用弄備案，壞處在于頁面自由度較低，無法鍛煉自己的計算機水平，并且域名可能不好看。

不過目前來看，騰訊阿里和華為都有相關的云服務，操作也相對不是很復雜，作為學生也有專門的優惠。

1. 基礎知識

頁面分為動態網頁和靜態網頁，注意動態網頁不是指網頁有動畫，而是指頁面內容可以通過不改變代碼實現。靜態網頁一般為展示類型，也可以有很多炫酷的動畫。

靜態頁面是不能隨時改動的，靜態是一次性寫好放在服務器上進行瀏覽的，如果想改動，必須在頁面上修改，然后再上傳服務器覆蓋原來的頁面，這樣才能更新信息，使用者不能隨時修改。

動態頁面是可以隨時改變內容的，有前后臺之分，管理員可以在后臺隨時更新網站的內容，前臺頁面的內容也會隨之更新。

這里我所說的主要是靜態網頁，僅僅涉及到最基礎的HTML語言，動態網頁一般涉及到JSP、PHP、ASP等技術，而靜態網頁一般會涉及到HTML、CSS、Java Script等技術。

2. 所需工具

所涉及的工具有模版文件和編譯器，其中模版是從網上選擇下載的，編譯器常用的有Sublime Text，編譯器的作用是將代碼轉換成機器語言，也就是0和1。

模版需要從網上下載模版再進行修改，當然也可以自己制作，不過難度相對較高，也較耗時間。這里我選擇的是模版之家（cssmoban），里面可以選擇喜歡的免費模版下載。

下載好后解壓，文件夾里的index.html文件就是我們要編輯的主頁，選擇用Sublime或Dreamweaver打開即可編輯，用瀏覽器打開即可預覽。Dreamweaver是Adobe的軟件，界面可以選擇初學者的上下樣式，更加容易上手，但對電腦性能（應該是CPU）要求較高，我手上這臺MBP13 2016款幾乎無法流暢使用。

如上所示，整體由一組對應的<…>和</…>構成，head為標題，body為內容。

4. HTML屬性：

font屬性：也就是和字體相關的屬性，與Word這種可視化軟件不同，所有的修改都由代碼實現。

例如：

<font face=“黑體” color=“#000000” size=“5”>文字</font>

與字面意思相同，face是字體，color是顏色，可以輸入16進制RGB顏色或者blue等顏色名，size是文字大小。

用Find工具定位到文字的位置，直接修改即可，Sublime保存后，刷新瀏覽器打開的頁面即可，如果是Dreamweaver，則可直接點擊頁面上的內容編輯。

Sublime修改文字示例：

division屬性：div內的內容為一個整體，一個區塊，刪除網頁某一塊內容以div為單位刪除，點擊左側行數處三角箭頭可以折疊快速刪除。

例如：

<div>區塊內容</div>

刪除某一區塊示例：

paragraph屬性：即段落屬性，會自動與上下內容分開，形成一個單獨的段落。

例如：

<p align=“center”>段落內容</p>

超鏈接：

例如：

<a href=“XXX.html”>超鏈接</a>

將某網頁保存在文件夾下，這里我新建了一個名為article的文件夾方便管理，在引號內輸入html文件的路徑和名稱，保存刷新后即可看到導航欄的導航內容已經發生了變化。

其中<li>為表單list，一般在導航欄比較常見。

image屬性：

例如：

<img src=“XXX.jpg” width=“50%”>

Img src就是image source，即圖片來源，一般圖片放在images文件夾里，width即寬度，可以用百分比或者數值調整。

HTML的換行和空格：

HTML中文字的回車不能直接讀取，一般用<br>即breakline換行，斷開兩行內容

例如：

第一行內容<br>第二行內容

一般情況下，空格可以直接讀取，若不能直接讀取，也可以使用&nbsp，即空格。

例如：

前半句&nbsp后半句