零基礎學網站制作系列教程-02
01、網站制造東西
做一個網站,其實有許多東西能夠將其完結出來,可是在這里我將重點講幾個在我會運用到的東西。
第一,FTP上傳下載東西
第二,代碼編輯器東西,Sublime。這個東西,也是咱們后邊做網站寫代碼時分,會一向用到的東西,也是我在整個教程中,會運用到的東西,我建議咱們能夠裝置一下,是Sublime東西下載地址
第三,網頁切片東西,Adobe Photoshop CC,這個東西,特別是在前端開發人員切圖的時分,會運用到里邊的切片東西這個功能,也不需求學多精深,由于咱們只是用到里邊的一些根本功能,不會像專業設計師那樣,要求精通。以下是Adobe Photoshop CC的下載地址:
鏈接: https://pan.baidu.com/s/1OH8ZqcP1QGsHfmsMRmuagQ
提取碼: wwab
關于這個破解版的裝置教程,假如不會的話,我后邊再單獨寫一篇文章來講,這篇教程里就不詳細講解了。
這三個東西,便是咱們后邊運用頻率比較高的東西,當然,做網站還有許多小東西會運用到,像IEtester,beyond compare,這些咱們目前用不到,咱們就先不說了,比及用到的時分,咱們再講,可是,咱們能夠略微了解一下。
IEtester首要是在測驗時,用來測驗IE兼容性的,由于IE軟件版別比較多,為了網站在各種IE版別下測驗便利,而運用的一個小東西。
beyond compare是一個代碼比較軟件,這個在大型項目,還有網頁代碼比較多的時分會用到。
講完了東西,接下來,便是網站程序了,這個也是做一個網站,非常重要的部分了,這個部分就如同咱們平時煮飯相同,咱們不僅需求準備米,咱們還需求知道怎樣將米變成飯,而前面的東西內容,它就如同咱們煮飯用的電飯煲這個東西,所以接下來這個進程便是怎樣把米做成飯的一個進程,當然也不難。
在講這個進程之前,咱們還需求再了解一下與其相關的幾個問題。
02、建站程序
其實,建站程序,有許多種,比如咱們自己寫的網站源碼,也能夠成為建站程序,還有一些開源的網站源碼也是建站程序,例如,dedecms(也叫織夢CMS),wordpress(國外的一個博客體系),ecshop(一個購物商場體系),discuz,(一個論壇體系),這些都能夠稱之為建站程序,而且這些程序里,有付費,也有免費之分,像ecshop這個網站程序體系里邊就有付費的部分,而其他幾個根本都是免費的。
其實,這個建站程序就如同咱們裝置的微信,微博程序相同,是人人都能夠下載裝置的,可是裝置完了,不是就表明網站已經做好了。
咱們都知道,咱們裝置的微信,微博,裝置好今后,也是需求做些簡單設置,比如,換個頭像,設置一個好聽的昵稱等等。
而建站程序也相同,裝置完后,咱們每個人的程序都是相同的,也便是說,咱們每個裝置了這個建站程序的網站,都是相同的風格,可是咱們為了凸顯出自己網站的風格與調性,所以,咱們還需求對其進行修改。
而在一個建站程序里,根本都會有許多風格能夠選擇,這個便是咱們接下來要提到的,網站模板。
03、網站模板
網站模板,便是一個網站的風格,相似咱們現在手機里皮膚風格,一個網站,只能用一個網站程序,可是你能夠完結多種網站風格,也便是說,你能夠用多種網站模板。
關于網站模板,之前我在公眾號上也分享過許多,有dedecms的網站模板,也有wordpress的網站模板,還有一些整站的網站模板。總歸,便是學習資源仍是比較豐富的。
在開端網站制造之前,你只需想好了用哪個網站程序來完結自己的網站,然后就能夠在網上先找一些免費的網站模板來進行學習,比及自己學得差不多了。
其實,你自己就能夠寫一些網站模板了,比如,你計劃用dedecms這個網站程序來制造自己的網站,那你就能夠先去學習一些dedecms做網站的相關常識,這個也比較有針對性,學習起來愈加簡單上手,興趣也會大點。
講完了網站程序,網站模板,咱們再來說一下網站里的網頁,每個網站都是由不同的網頁組合而成。網頁又分為靜態網頁與動態網頁。
04、靜態網頁與動態網頁
簡單講,靜態網頁便是沒有后臺數據庫交互的網頁,咱們都把它成為靜態網頁,這個是相對于動態網頁而言的,所以,動態網頁便是有后臺數據庫交互的網頁。
像我的www.yangxiaoer.net這個站點里的網頁都是靜態頁面,而且每一個頁面的文件都是以xxxx.html,或許xxxx.html這樣的文件格式呈現。
而動態網頁的文件后綴名,就比較多了,首要是根據開發網站后臺的言語來的,例如,xxxx.php,xxxx.asp,xxxx.jsp等,而點后邊的文件名,便是表明這個網站后臺是用這個言語來開發的。像xxxx.php這個便是表明網站的后臺程序是用php言語開發的。
05、靜態鏈接,偽靜態鏈接與動態鏈接
當咱們在翻開一個網站時,咱們會先輸入它的鏈接網址,這個鏈接網址也叫做一致資源定位符,英文名,URL(Uniform Resource Locator)。
而在咱們的網站里,一般會有三種網站鏈接類型,靜態鏈接,偽靜態鏈接,動態鏈接。
靜態鏈接便是存在網站空間上的一個獨立靜態網頁文件所生成的一個靜態地址。
例如,http://www.yangxiaoer.net/contact.html,這個便是一個靜態鏈接。當咱們拜訪靜態頁面時,并不需求經過操作數據庫,而是直接提取的靜態網頁,因此,拜訪速度相對較快而且服務器的負載很小。
對搜索引擎來說,同樣能夠節省大量的抓取時間。而這個也是最簡單被搜索引擎錄入的地址。
而“偽靜態”,它不是真的靜態鏈接,只是從鏈接地址上看如同是靜態鏈接,事實是在服務器上并不存在這個靜態頁面,這個頁面可能是php,asp,jsp等網站后臺言語的頁面。
咱們運用偽靜態鏈接便是為了便利搜索引擎錄入與抓取咱們的網站頁面,能夠讓他人經過搜索引擎快速找到咱們,這個也是在SEO優化的時分,會常常運用的一種手法。
動態鏈接便是咱們在拜訪動態網頁時,服務器程序需求調用數據庫來提取網頁內容,然后反應給咱們。鏈接地址里會常常呈現一個“?”的頁面,例如,這個是一個微信的頁面地址:https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649090640&idx=3&sn=a27aa58e1b45d91e4ba04d0db10960b3&chksm=be5bcdfd892c44eb6fbf72985f5fe0adc960da988eefba842a832250dcaa51493acfe24f502f#rd
它便是一個動態的鏈接地址。
簡單點的了解便是,沒有問號的鏈接地址一般都是靜態地址,而地址里有問號呈現的鏈接地址便是動態鏈接地址,處在這兩者之間的地址便是偽靜態地址,這個大約先了解知道一下即可,首要是為了后邊內容做準備的。
06、從一個網頁的誕生來學習HTML與CSS常識
在前面已經講了,網站都是由一個一個的網頁組成,而網頁便是由一個一個的HTML文件,所以,學習網站制造,其實便是學習怎樣寫HTML文件,當每個HTML文件寫完今后,咱們經過一個標簽就能夠把各文件鏈接起來,于是就組成了一個網站。
01)、什么是HTML
HTML便是一種超文本標記言語,英文全稱 Hyper Text Mark-up Language。
學習網站制造一定要學會HTML的根本常識,否則沒有辦法開端后邊的作業。
02)、榜首個網頁的誕生
榜首步,翻開Sublime東西,點擊【文件】-新建文件,或許按快捷鍵ctrl+n。
第二步,寫下下面這些代碼
第三步,點擊【文件】-保存,或許按快捷鍵ctrl+s,文件名就為,inedx,文件后綴名就為,html。文件保存完后,咱們找到這個文件,你就會看到,如下文件:
直接雙擊這個文件,就會在瀏覽器翻開,看到這個網頁,而這個頁面里的......的中心部分只要一內容:我是第一個網頁。
所以,在瀏覽器里看到的內容,也是這個內容。
到目前為止,這榜首個網頁,就算完結了。
可是想在這個網頁里加各種特效,色彩,圖片等內容的話,其實都是在這個中心完結。
第四步,翻開FTP東西,經過之前購買的網站空間,服務網供貨商供給給你的,服務器地址,服務器FTP登錄賬戶,服務器FTP暗碼,然后登錄后,上傳剛剛寫的那個網頁,就能夠經過網址來拜訪其頁面了。