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

ADVERTISEMENT

靡不有初,鮮克有終。

前面一節課,體驗了第一個網站頁面是如何編寫出來的,接下來,來做一個完整的網站。

來做一個自己的個人網站,把自己的個人簡歷放上去,然後釋出到伺服器上,並設定一個域名,這樣,其他人就可以通過域名訪問這個個人簡歷網站了。

設計網站

要編寫一個網站,第一步就是要整理需求,然後設計網站要呈現的樣子,這個階段一般稱為設計網站階段。

相信大家在網路上也看到過很多網站,每個網站的設計風格都不一樣,這都要靠設計人員根據需求將效果圖設計出來。

這裡暫時找不到設計人員,那就自己來設計一番,雖然效果可能不是很美觀,但好歹是自己做出來的,自己掌握其中的原理就好了。

個人簡介網站要呈現哪些內容呢?

每個人的需求可能都不一樣,學哥這裡先拋磚引玉,給出一個例子,大家可以在這個基礎上自己發揮。

首頁:

從上到下依次顯示:

標題(學哥的個人簡歷)

簡介(文字,說明學哥的基本概要情況)

工作經歷(公司名/職位/職責,如有多個列表形式)

工作經驗(項目名/負責內容/技術要素/相關連結,如有多個列表形式)

技術經驗(表格形式,技術點/經驗年數)

個人興趣愛好(愛好/介紹)

大概的樣子是這樣設計的:

程式設計思路

首先將上節課的程式碼全部複製過來,就有了一個基本的框架。

然後,修改標題為【學哥的個人簡介】,修改title內容就好。

然後,先把有代表性的文字先寫出來,如果是重複的顯示樣式的文字,則暫時可以不寫,等全部顯示樣式調整好了之後,再增加文字內容。

然後,先做簡介部分,分成標題和具體內容,要考慮整體框架,怎麼把各部分內容分割開來。

然後考慮標題的顯示效果,包括背景色,文字顏色,文字大小,邊距。

然後考慮簡介具體內容的背景色,文字顏色,文字大小,還有如何換行。

ADVERTISEMENT

簡介部分做好之後,再做工作經歷部分,標題部分和簡介一樣,可以重複利用。

工作經歷的內容部分,文字效果,還有文字前面空格。

工作經驗的部分和工作經歷類似。

技術經驗要用表格來實現。

再後面的個人愛好基本上就是和工作經歷類似。

接下來,由粗到細,由外到裡,進行一步一步說明,如何做出這樣的個人網站。

先輸入內容

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

為了方便起見,學哥是在Macbook電腦裡面開發的網頁程式。使用的文字編輯器是TextWrangler。

注意這裡的第3行,第9行,第10行,第11行,第18行,其實是一行文字,由於學哥了截圖的時候讓文字更大,所以設定了一行隻顯示60個字元,所以文字編輯器會看起來自動換行了,其實根據行號還是同一行。一般的文字編輯器裡面會顯示在同一行。這裡大家注意不需要增加輸入換行。

如果你用的也是Macbook電腦,那麼安裝了Chrome瀏覽器的話,看到的應該就是下圖的樣子。

如果你用的是Windows電腦系統,那麼前一節課已經說明過了,顯示效果基本是一樣的。

檢視瀏覽器結果如下:

可以看到所有的文字都擠在一起了,並沒有按照程式裡面的樣子顯示。這是因為沒有新增任何樣式描述,瀏覽器不知道該如何顯示這些內容。記住:瀏覽器並不是像Word軟體這樣是“所見即所得”的。

這裡,先選取代表性的文字,如果顯示效果是重複的內容,則可以先不要編寫出來。

後面等顯示效果調整好了,複製相同的實現方式即可。

使用

標籤換行

要改變顯示的樣子,需要新增更多的描述符。

如果僅僅是想對內容從上往下排列,那麼最簡單的分隔內容方法就是使用換行標籤

在上面程式碼body裡面的每一行文字後面都加上

ADVERTISEMENT

重新整理瀏覽器頁面:

標籤是用來換行的。它是一個空的HTML元素。

也可以使用

來完成。但是一般不推薦

,因為它沒有結束標籤。

在未來的HTML規範中,是不允許出現未結束的標籤的,為了將來相容性考慮,一般都使用

標籤。

使用標籤將文字加粗

要將【簡介/工作經歷/工作經驗(部分)】這3行文字加粗,可以使用標籤。

方法是在要加粗的文字前面插入程式碼,在文字後面插入結束標籤。

修改程式碼如下:

重新整理瀏覽器頁面:

設定整個網頁的背景顏色

整個網頁頁面的背景色預設是白色的,有點刺眼,來改成淺灰色的吧。

在修改body標籤的開始標籤為:

重新整理瀏覽器頁面:

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

標籤屬性

這裡引入了一個新的概念:標籤屬性。

ADVERTISEMENT

屬性是用於給標籤元素提供附加資訊,可以讓標籤具備更多展現的能力。

屬性總是以名稱=值的形式出現,例如: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的用法。

要學會用好搜尋引擎來尋找相關的知識。可以加上關鍵字“教程”,或者“例子”,或者“百科全書”等等來搜尋。

學哥會儘量說明用到的新概念,但是關於概唸的來龍去脈,以及更廣根深的用法,以及更多的參考例子,還是需要大家自己去尋找和練習,這樣才能掌握的更牢固,更深刻理解。

課後練習

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

往期教程

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

» 零基礎學程式設計

ADVERTISEMENT