從品牌網(wǎng)站建設(shè)到網(wǎng)絡(luò)營銷策劃,從策略到執(zhí)行的一站式服務
來源:公司資訊 | 2022.04.08
網(wǎng)站的搭建需要頁面、域名和云服務器,這一篇教程是第一步,也就是關(guān)于頁面的制作,如何將制作好的頁面發(fā)布到云服務器上,請參考之前的文章:對于對域名沒有要求的完全小白的同學,可以嘗試最基礎(chǔ)的建站網(wǎng)站,例如竹子建站、凡科建站等。通過簡單的幾步操作,就可以搭建一個基礎(chǔ)的展示頁面,好處在于步驟簡單、不用花錢租服務器和域名,以及不用弄備案,壞處在于頁面自由度較低,無法鍛煉自己的計算機水平,并且域名可能不好看。
不過目前來看,騰訊阿里和華為都有相關(guān)的云服務,操作也相對不是很復雜,作為學生也有專門的優(yōu)惠。
頁面分為動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁,注意動態(tài)網(wǎng)頁不是指網(wǎng)頁有動畫,而是指頁面內(nèi)容可以通過不改變代碼實現(xiàn)。靜態(tài)網(wǎng)頁一般為展示類型,也可以有很多炫酷的動畫。
靜態(tài)頁面是不能隨時改動的,靜態(tài)是一次性寫好放在服務器上進行瀏覽的,如果想改動,必須在頁面上修改,然后再上傳服務器覆蓋原來的頁面,這樣才能更新信息,使用者不能隨時修改。
動態(tài)頁面是可以隨時改變內(nèi)容的,有前后臺之分,管理員可以在后臺隨時更新網(wǎng)站的內(nèi)容,前臺頁面的內(nèi)容也會隨之更新。
這里我所說的主要是靜態(tài)網(wǎng)頁,僅僅涉及到最基礎(chǔ)的HTML語言,動態(tài)網(wǎng)頁一般涉及到JSP、PHP、ASP等技術(shù),而靜態(tài)網(wǎng)頁一般會涉及到HTML、CSS、Java Script等技術(shù)。
所涉及的工具有模版文件和編譯器,其中模版是從網(wǎng)上選擇下載的,編譯器常用的有Sublime Text,編譯器的作用是將代碼轉(zhuǎn)換成機器語言,也就是0和1。
模版需要從網(wǎng)上下載模版再進行修改,當然也可以自己制作,不過難度相對較高,也較耗時間。這里我選擇的是模版之家(cssmoban),里面可以選擇喜歡的免費模版下載。
下載好后解壓,文件夾里的index.html文件就是我們要編輯的主頁,選擇用Sublime或Dreamweaver打開即可編輯,用瀏覽器打開即可預覽。Dreamweaver是Adobe的軟件,界面可以選擇初學者的上下樣式,更加容易上手,但對電腦性能(應該是CPU)要求較高,我手上這臺MBP13 2016款幾乎無法流暢使用。
如上所示,整體由一組對應的<…>和</…>構(gòu)成,head為標題,body為內(nèi)容。
font屬性:也就是和字體相關(guān)的屬性,與Word這種可視化軟件不同,所有的修改都由代碼實現(xiàn)。
例如:
<font face=“黑體” color=“#000000” size=“5”>文字</font>
與字面意思相同,face是字體,color是顏色,可以輸入16進制RGB顏色或者blue等顏色名,size是文字大小。
用Find工具定位到文字的位置,直接修改即可,Sublime保存后,刷新瀏覽器打開的頁面即可,如果是Dreamweaver,則可直接點擊頁面上的內(nèi)容編輯。
Sublime修改文字示例:
division屬性:div內(nèi)的內(nèi)容為一個整體,一個區(qū)塊,刪除網(wǎng)頁某一塊內(nèi)容以div為單位刪除,點擊左側(cè)行數(shù)處三角箭頭可以折疊快速刪除。
例如:
<div>區(qū)塊內(nèi)容</div>
刪除某一區(qū)塊示例:
paragraph屬性:即段落屬性,會自動與上下內(nèi)容分開,形成一個單獨的段落。
例如:
<p align=“center”>段落內(nèi)容</p>
超鏈接:
例如:
<a href=“XXX.html”>超鏈接</a>
將某網(wǎng)頁保存在文件夾下,這里我新建了一個名為article的文件夾方便管理,在引號內(nèi)輸入html文件的路徑和名稱,保存刷新后即可看到導航欄的導航內(nèi)容已經(jīng)發(fā)生了變化。
其中<li>為表單list,一般在導航欄比較常見。
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)容
一般情況下,空格可以直接讀取,若不能直接讀取,也可以使用 ,即空格。
例如:
前半句 后半句