0029 如何設計實現自己的個人簡歷網站

weixin_33976072發表於2017-03-09
網站

靡不有初，鮮克有終。
前面一節課，體驗了第一個網站頁面是如何編寫出來的，接下來，來做一個完整的網站。
來做一個自己的個人網站，把自己的個人簡歷放上去，然後釋出到伺服器上，並設定一個域名，這樣，其他人就可以通過域名訪問這個個人簡歷網站了。

設計網站

要編寫一個網站，第一步就是要整理需求，然後設計網站要呈現的樣子，這個階段一般稱為設計網站階段。
相信大家在網路上也看到過很多網站，每個網站的設計風格都不一樣，這都要靠設計人員根據需求將效果圖設計出來。
這裡暫時找不到設計人員，那就自己來設計一番，雖然效果可能不是很美觀，但好歹是自己做出來的，自己掌握其中的原理就好了。
個人簡介網站要呈現哪些內容呢？
每個人的需求可能都不一樣，學哥這裡先拋磚引玉，給出一個例子，大家可以在這個基礎上自己發揮。
首頁：
從上到下依次顯示：
標題（學哥的個人簡歷）
簡介（文字，說明學哥的基本概要情況）
工作經歷（公司名／職位／職責，如有多個列表形式）
工作經驗（專案名／負責內容／技術要素／相關連結，如有多個列表形式）
技術經驗（表格形式，技術點／經驗年數）
個人興趣愛好（愛好／介紹）
大概的樣子是這樣設計的：

4239845-5b855bd93777b153.jpg
2-3-1.jpg

程式設計思路

首先將上節課的程式碼全部複製過來，就有了一個基本的框架。
然後，修改標題為【學哥的個人簡介】，修改title內容就好。
然後，先把有代表性的文字先寫出來，如果是重複的顯示樣式的文字，則暫時可以不寫，等全部顯示樣式調整好了之後，再增加文字內容。
然後，先做簡介部分，分成標題和具體內容，要考慮整體框架，怎麼把各部分內容分割開來。
然後考慮標題的顯示效果，包括背景色，文字顏色，文字大小，邊距。
然後考慮簡介具體內容的背景色，文字顏色，文字大小，還有如何換行。
簡介部分做好之後，再做工作經歷部分，標題部分和簡介一樣，可以重複利用。
工作經歷的內容部分，文字效果，還有文字前面空格。
工作經驗的部分和工作經歷類似。
技術經驗要用表格來實現。
再後面的個人愛好基本上就是和工作經歷類似。
接下來，由粗到細，由外到裡，進行一步一步說明，如何做出這樣的個人網站。

先輸入內容

開啟程式碼編輯器，新建一個檔案 index.html，輸入上節課的程式碼，並修改title和body當中的內容如下：

4239845-d65b05c9593a6194.jpg
2-3-2.jpg

為了方便起見，學哥是在Macbook電腦裡面開發的網頁程式。使用的文字編輯器是TextWrangler。
注意這裡的第3行，第9行，第10行，第11行，第18行，其實是一行文字，由於學哥了截圖的時候讓文字更大，所以設定了一行只顯示60個字元，所以文字編輯器會看起來自動換行了，其實根據行號還是同一行。一般的文字編輯器裡面會顯示在同一行。這裡大家注意不需要增加輸入換行。
如果你用的也是Macbook電腦，那麼安裝了Chrome瀏覽器的話，看到的應該就是下圖的樣子。
如果你用的是Windows電腦系統，那麼前一節課已經說明過了，顯示效果基本是一樣的。
檢視瀏覽器結果如下：

4239845-7159dd076eab2d91.jpg
2-3-3.jpg

可以看到所有的文字都擠在一起了，並沒有按照程式裡面的樣子顯示。這是因為沒有新增任何樣式描述，瀏覽器不知道該如何顯示這些內容。記住：瀏覽器並不是像Word軟體這樣是“所見即所得”的。
這裡，先選取代表性的文字，如果顯示效果是重複的內容，則可以先不要編寫出來。
後面等顯示效果調整好了，複製相同的實現方式即可。

使用
標籤換行

要改變顯示的樣子，需要新增更多的描述符。
如果僅僅是想對內容從上往下排列，那麼最簡單的分隔內容方法就是使用換行標籤
。
在上面程式碼body裡面的每一行文字後面都加上
。

4239845-9b3a48525779c148.jpg
2-3-4.jpg

重新整理瀏覽器頁面：

4239845-a7bc9340d0668c4c.jpg
2-3-5.jpg


標籤是用來換行的。它是一個空的HTML元素。
也可以使用
來完成。但是一般不推薦
，因為它沒有結束標籤。
在未來的HTML規範中，是不允許出現未結束的標籤的，為了將來相容性考慮，一般都使用
標籤。

使用<b>標籤將文字加粗

要將【簡介／工作經歷／工作經驗（部分）】這3行文字加粗，可以使用<b>標籤。
方法是在要加粗的文字前面插入程式碼<b>，在文字後面插入結束標籤</b>。
修改程式碼如下：

4239845-aaf5337615056c7a.jpg
2-3-6.jpg

重新整理瀏覽器頁面：

4239845-6c69d44ea203ed5e.jpg
2-3-7.jpg

設定整個網頁的背景顏色

整個網頁頁面的背景色預設是白色的，有點刺眼，來改成淺灰色的吧。
在修改body標籤的開始標籤為：<body style="background-color:#f0f0f0;">

4239845-7f800cc80e63f155.jpg
2-3-8.jpg

重新整理瀏覽器頁面：

4239845-c8989b8688635f0f.jpg
2-3-9.jpg

可以看到底色是淺灰色了。

標籤屬性

這裡引入了一個新的概念：標籤屬性。
屬性是用於給標籤元素提供附加資訊，可以讓標籤具備更多展現的能力。
屬性總是以名稱=值的形式出現，例如：name="value"，有點類似於python語言裡面的字典資料型別的key和value一樣。
屬性總是在標籤元素的開始標籤中設定。
屬性和屬性值對大小寫不敏感，但是一般都是採用小寫。
記住，屬性值一定要被包括在引號內。雙引號是常用的，不過使用單引號也可以。
想了解每個HTML標籤元素可使用的合法屬性，可以去搜尋“HTML參考手冊”。

CSS樣式

style是屬性名，background-color: #f0f0f0 是屬性值。
style屬性的作用是給標籤元素提供樣式說明，讓元素呈現不同的樣式。
瀏覽器讀取到style樣式的時候，會按照指定的樣式進行展示元素。
style屬性的值一般採用CSS來實現。
CSS的全稱是Cascading Style Sheets，層疊樣式表。
CSS是一種用來表現HTML或XML等檔案樣式的計算機語言。
CSS能夠對網頁中元素位置的排版進行畫素級精確控制。
CSS有詳細的規定，針對某個HTML元素可以使用哪些關鍵字來描述樣式。
具體的規定，可以去搜尋“CSS參考手冊”。
比如，這裡的background-color就是規定某個HTML元素的背景顏色。

顏色定義

顏色定義一般由一個十六進位制符號來定義，這個符號由紅色，綠色和藍色的值組成（RGB）。
每種顏色的最小值是0，對應的十六進位制是#00；最大值是255，對應的十六進位制是#FF。
前面教程中學習過二進位制，逢二進一。那麼相同道理，十六進位制就是逢十六進一。
那麼0到9後面，相應的用A代表10，B代表11，直到F代表15。
比如十六進位制的C2換算成10進位制就是 12*16+2=194。
數字前面的#代表是十六進位制
如果是純紅色的，那麼對應的Red就是255，Green就是0，Blue就是0，換成十六進位制就是 #FF0000。
如果是純綠色的，那麼對應的Red就是0，Green就是255，Blue就是0，換成十六進位制就是 #00FF00。
如果是純黃色的，那麼對應的Red就是255，Green就是255，Blue就是0，換成十六進位制就是 #FFFF00。
前面用到的#f0f0f0，顏色是淺灰色。
大家可以去搜尋“線上顏色選擇器”，可以輸入十六進位制，檢視對應的顏色。
注意，十六進位制的數值是大小寫不敏感的。例如F0F0F0和f0f0f0是一樣的效果。

關於學習的一些技巧方法

一般而言，學哥的教程都是動手型的，也就是基本會將每一個步驟都詳細說明，但是也難免對某些概念的說明比較簡單。
這種時候，大家要學會根據教程中出現的關鍵概念去網上搜尋相關知識，比如前面的“HTML參考手冊”“線上顏色選擇器”等等。
或者比如background-color的用法。
要學會用好搜尋引擎來尋找相關的知識。可以加上關鍵字“教程”，或者“例子”，或者“百科全書”等等來搜尋。
學哥會盡量說明用到的新概念，但是關於概念的來龍去脈，以及更廣根深的用法，以及更多的參考例子，還是需要大家自己去尋找和練習，這樣才能掌握的更牢固，更深刻理解。

課後練習

將網頁的背景顏色修改為藍色進行試驗。

往期教程

因為教程是系列教程，前後關聯性非常強，請大家按照微信公眾號【零基礎學程式設計】的歷史訊息釋出時間先後次序進行閱讀。

相關文章