如何使用網(wǎng)頁模版快速制作一個(gè)網(wǎng)頁？
時(shí)間：2022-08-27 06:54:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2022-08-27 06:54:01 來源：網(wǎng)站運(yùn)營
網(wǎng)站的搭建需要頁面、域名和云服務(wù)器，這一篇教程是第一步，也就是關(guān)于頁面的制作。
1. 基礎(chǔ)知識(shí)
頁面分為動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁，注意動(dòng)態(tài)網(wǎng)頁不是指網(wǎng)頁有動(dòng)畫，而是指頁面內(nèi)容可以通過不改變代碼實(shí)現(xiàn)。靜態(tài)網(wǎng)頁一般為展示類型，也可以有很多炫酷的動(dòng)畫。
靜態(tài)頁面是不能隨時(shí)改動(dòng)的，靜態(tài)是一次性寫好放在服務(wù)器上進(jìn)行瀏覽的，如果想改動(dòng)，必須在頁面上修改，然后再上傳服務(wù)器覆蓋原來的頁面，這樣才能更新信息，使用者不能隨時(shí)修改。
動(dòng)態(tài)頁面是可以隨時(shí)改變內(nèi)容的，有前后臺(tái)之分，管理員可以在后臺(tái)隨時(shí)更新網(wǎng)站的內(nèi)容，前臺(tái)頁面的內(nèi)容也會(huì)隨之更新。
這里我所說的主要是靜態(tài)網(wǎng)頁，僅僅涉及到最基礎(chǔ)的HTML語言，動(dòng)態(tài)網(wǎng)頁一般涉及到JSP、PHP、ASP等技術(shù)，而靜態(tài)網(wǎng)頁一般會(huì)涉及到HTML、CSS、Java Script等技術(shù)。
2. 所需工具
所涉及的工具有模版文件和編譯器，其中模版是從網(wǎng)上選擇下載的，編譯器常用的有Sublime Text，編譯器的作用是將代碼轉(zhuǎn)換成機(jī)器語言，也就是0和1。
模版需要從網(wǎng)上下載模版再進(jìn)行修改，當(dāng)然也可以自己制作，不過難度相對(duì)較高，也較耗時(shí)間。這里我選擇的是
muban.io，里面可以選擇喜歡的免費(fèi)模版下載。
下載好后解壓，文件夾里的
index.html文件就是我們要編輯的主頁，選擇用Sublime或Dreamweaver打開即可編輯，用瀏覽器打開即可預(yù)覽。Dreamweaver是Adobe的軟件，界面可以選擇初學(xué)者的上下樣式，更加容易上手，但對(duì)電腦性能（應(yīng)該是CPU）要求較高，我手上這臺(tái)MBP13 2016款幾乎無法流暢使用。
3. HTML基本結(jié)構(gòu)：
<HTML> <head> <title>標(biāo)題內(nèi)容</title> </head> <body> 內(nèi)容 </body></HTML>如上所示，整體由一組對(duì)應(yīng)的<…>和</…>構(gòu)成，head為標(biāo)題，body為內(nèi)容。
4. HTML屬性：
font屬性：也就是和字體相關(guān)的屬性，與Word這種可視化軟件不同，所有的修改都由代碼實(shí)現(xiàn)。
例如：
<font face=“黑體” color=“#000000” size=“5”>文字</font>與字面意思相同，face是字體，color是顏色，可以輸入16進(jìn)制RGB顏色或者blue等顏色名，size是文字大小。
用Find工具定位到文字的位置，直接修改即可，Sublime保存后，刷新瀏覽器打開的頁面即可，如果是Dreamweaver，則可直接點(diǎn)擊頁面上的內(nèi)容編輯。
Sublime修改文字示例：
Dreamweaver修改文字示例：
division屬性：div內(nèi)的內(nèi)容為一個(gè)整體，一個(gè)區(qū)塊，刪除網(wǎng)頁某一塊內(nèi)容以div為單位刪除，點(diǎn)擊左側(cè)行數(shù)處三角箭頭可以折疊快速刪除。
例如：
<div>區(qū)塊內(nèi)容</div>刪除某一區(qū)塊示例：
paragraph屬性：即段落屬性，會(huì)自動(dòng)與上下內(nèi)容分開，形成一個(gè)單獨(dú)的段落。
例如：
<p align=“center”>段落內(nèi)容</p>Align為對(duì)齊，center就是將段落居中對(duì)齊
超鏈接：例如：
<a href=“XXX.html”>超鏈接</a>將某網(wǎng)頁保存在文件夾下，這里我新建了一個(gè)名為article的文件夾方便管理，在引號(hào)內(nèi)輸入html文件的路徑和名稱，保存刷新后即可看到導(dǎo)航欄的導(dǎo)航內(nèi)容已經(jīng)發(fā)生了變化。
其中<li>為表單list，一般在導(dǎo)航欄比較常見。
image屬性：例如：
<img src=“XXX.jpg” width=“50%”>Img src就是image source，即圖片來源，一般圖片放在images文件夾里，width即寬度，可以用百分比或者數(shù)值調(diào)整。
HTML的換行和空格：HTML中文字的回車不能直接讀取，一般用<br>即breakline換行，斷開兩行內(nèi)容
例如：
第一行內(nèi)容<br>第二行內(nèi)容一般情況下，空格可以直接讀取，若不能直接讀取，也可以使用 ，即空格。
例如：
前半句 后半句效果展示：我的個(gè)人主頁：（最近可能無法訪問，備案結(jié)束即可正常訪問）
以上就是網(wǎng)頁模板怎么用的詳細(xì)內(nèi)容，小編的個(gè)人網(wǎng)站就是在
muban.io免費(fèi)下載的，這是個(gè)很不錯(cuò)的模板網(wǎng)站，里邊的模板都是響應(yīng)式的，能夠適配各種設(shè)備，且頁面精美。
muban.io的模板是其中更改操作最簡單的，小白不用擔(dān)心下載模板不懂html知識(shí)，不知道怎么改啦
！操作簡單歸簡單，但生成的網(wǎng)頁又非常漂亮，想要自己當(dāng)站長的朋友快去
muban.io看看吧
在線咨詢
