視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
到目前為止，我們已經建立了Vedio主頁，按照順序，現在,我們準備構建about頁面。
所以，首先，我們要建立一個名為about.html的新檔案。所以，檔案=》新建，然後我們把它儲存到和index.html同級的目錄下，命名為about.html：
這裡我們已經建立了about.html檔案，我們先把Dreamweaver預設給的程式碼刪除掉，然後把編碼設為Unicode，因為我們要寫中文，然後我們把index.html中的所有內容拷貝到about.html。所以。Ctrl+A選擇所有文字，Ctrl+C複製所有文字。然後來到about.html，點選Ctrl+ V貼上所有的文字。
現在，我們來儲存檔案，看看瀏覽器的外觀。然後我們點選about，它將帶我到about.html。當然，現在，about頁面與我們的主頁index.html完全相同。因為，我們還沒有改變任何的東西。
所以讓我們開始修改about.html。首先，我要將被選定的導航項更改為about。所以我要從Vedio導航項中剪下選擇的classs屬性。然後，新增到About中：
| <ul>
<li><a href = "index.html">Vedio</a></li>
<li><a href = "about.html" class = "selected">About</a></li> |
接下來，我將刪除在section元素中的所有內容：
現在，就剩下了我們的標題，導航和我們的頁尾。然後，留下一個空白的section。之所以這麼做，是因為我們希望我們的頁首和頁尾在每個頁面上都相同。
現在，我儲存about.html。讓我們切換到瀏覽器並轉到about.html。
你看，就剩下標題，導航和頁尾，然後內容部分是空白的。
您還會看到，About導航項當前是被選中的。如果我回到Vedio，Vedio就是被選中的導航項。所以如果我們在兩個頁面之間來回滾動，網站訪問者就可以通過檢視導航來檢視他們目前在哪個頁面。
現在，我們回到我們的HTML。在section的內部，我將新增虛幻大學的介紹。在這裡的img資料夾裡面，你會發現oxox.work.jpg，這是我們網站的logo。所以讓我們繼續新增。我要說img src，然後是我們圖片的路徑：img/oxox.work.jpg。對於替代文字alt，設定為www.oxox.work，然後我要新增class為profile-photo，然後我關閉標籤：
| <section>
<img src="img/oxox.work.jpg" alt = "www.oxox.work" class="profile-photo" >
</section> |
這裡，您也可以新增自己的圖片。寬度為200畫素，高度為200畫素的正方形圖片最為合適。
那麼，接下來，我將新增第三級標題About。
最後我還要新增一些關於虛幻大學的段落文字。你也可以自定義你自己的文字。我要說：“專注IT線上教育，提供科學上網技術”。
接下來我要再放一個段落。在本段中，我要說：“我是棒哥，如果你想找到我，我的私人微信：oxoxwork”。
| <section>
<img src="img/oxox.work.jpg" alt = "www.oxox.work" class="profile-photo" >
<h3>About</h3>
<p>專注IT線上教育，提供科學上網技術</p>
<p>我是棒哥，如果你想找到我，我的私人微信：oxoxwork</p>
</section> |
現在，儲存並重新整理頁面：
你看，這有我們的logo。有我們的關於標題。和我們寫的段落文字。
更多精彩內容盡在視訊中！
本文固定連結：
http://www.oxox.work/web/html-css/about-page/ | 虛幻大學檢視原文：
http://www.oxox.work/web/html-css/about-page/