實驗題目

個人網站綜合實驗

一、實驗目的

　　　　通過開設該實驗，學生可以把在本課程中所學到的HTML、CSS以及JavaScript技術綜合應用於一個內容充實、形式豐富的個人網站，在實驗過程中加深對網頁程式設計所涉及的各種開發技術的理解及各種技術結合使用的體會，為後續課程的學習打好基礎。

二、裝置與環境

PC相容機、Windows作業系統、文字編輯軟體、圖片處理軟體　

三、實驗內容

　　　　實驗內容：自由確定網站內容主題，綜合應用HTML、CSS和JavaScript開發實現一個內容充實、形式豐富的個人網站。

實驗要求：要求所完成的網站至少包括5個以上網頁，必須使用HTML中的至少5種標記，至少使用CSS或JavaScript技術中的一種用於網頁效果的實現

在課程結束前要提交綜合性實驗報告和網站的原始碼。

四、實驗結果及分析

1  網頁設計

1.1 網站主題設計思路

           體育運動可以使我們更接近自然，接近自己本原，豐富社會交往，體育體現出自由開放精神，使其成為人們和睦相處的良方，起到了淨化人們身心作用。因此，每個人都離不開運動。

           我們小組的網頁設計主題就是運動，旨在讓人們更加了解一些運動，來增加人們對於運動的喜愛，讓一些平時宅在家裡的人們在瀏覽了我們小組的網頁之後能夠走出家門，投入到運動中去。另外，設計該網頁主要是面向廣大學生，運動是學生生活中極為重要的一部分，西方教育與中國教育在方式上有很大差別，這些差別並不僅僅體現在基礎文化科目上，更體現在鍛鍊學生身體素質的體育課方面。

           我們的設計思路是從五項運動（分別是游泳、籃球、排球、網球和滑雪）入手，通過對這五項運動的介紹，點燃人們身體裡有關運動的DNA。

1.2 各網頁內容設計

           網頁主要分為主頁和五個分網頁，主頁最主要的作用便是連結向各個分網頁，而分網頁的作用則主要是分別介紹各自的運動內容。

      主頁：

           主頁當中主要是一個巨大的輪播圖，通過連結通向各個子網頁，沒有什麼具體的實質內容，主要是作為一個通向其他各個子網頁的樞紐，其他子網頁也能夠返回到主頁，這樣各個子網頁之間就可以相互跳躍了。

     子網頁：

           首先是關於游泳的子網頁，主要是通過對自由泳、蛙泳、蝶泳、仰泳、花樣游泳和潛泳的介紹來向瀏覽者展示游泳的魅力。該網頁在內容裡具體闡述了有關於游泳的一些姿勢的由來、動作的技巧、何時被列為奧運專案以及一些科研材料證明的科學訓練方法，為許多志在學習游泳技巧的瀏覽者提供了更加科學的學習方式。

           其次是關於籃球的子網頁，這個子網頁共可以連結到4個分網頁中，也就是說，該子網頁本身也是一個小型的主頁。四個分網頁分別介紹了花式籃球、正規的籃球比賽、籃球明星的簡介以及其他的一些籃球資訊。花式籃球作為一種街頭文化只得在網頁中將其作為一個主題具體介紹，因此在這個分網頁中具體從花式籃球的起源、與傳統籃球的不同等方面入手，讓瀏覽者對街頭籃球能夠有更加深入的瞭解。剩下的三個子網頁相對介紹得更加簡單，因為相對於花式籃球，正規的籃球比賽以及一些NBA球星則更加為人們所熟知，因此在網頁中只進行了簡單的介紹。

           接著是有關於排球的子網頁，也是主要從四個方面來介紹，分別是排球的歷史、排球的規則、排球的一些教學視訊以及有關於排球的一些比賽精彩視訊，能夠為喜愛排球的人們提供一個深入瞭解排球的源泉。

           然後是有關於網球的子網頁，這個子網頁主要從介紹網球的幾項著名賽事以及介紹網壇名將來使瀏覽者對網球有一個更加細緻的瞭解。著名賽事主要有澳大利亞網球公開賽、溫布林登網球錦標賽、法國網球公開賽和美國網球公開賽，對於對網球不是很瞭解的瀏覽者，這可以為他們開啟一個進入網球世界的大門。

           最後是有關於滑雪的子網頁，主要從對不同型別的滑雪種類、關於滑雪的建議以及學習滑雪的一些教學入手，旨在能讓瀏覽該子網頁的瀏覽者能夠對滑雪這項運動有一個更加全面的認識，滑雪的小建議也能夠讓那些剛剛接觸滑雪的瀏覽者在運動的過程中能夠儘可能地規避風險。

1.3 各網頁佈局設計

    在小組中，我主要負責完成主頁的設計以及有關滑雪的子網頁設計，因此我將主要介紹這兩個網頁的佈局設計。

主頁當中主要由一個巨大的輪播圖構成，最初的想法是通過高階CSS當中的@-webkit-keyframes來起到動態移動的效果，但是考慮到能讓瀏覽者能夠更加靈活地控制主頁，我們之後的想法是建立兩種模式，一種是自動模式，也就是之前所說的通過CSS的-webkit-animation 屬性來控制主頁當中對應五個分子頁的連結DIV，使其能以30秒為一個週期，不停地迴圈播放，但不能由瀏覽者來操控，瀏覽者只能點選連結系統所自動迴圈到的那個連結DIV；另一種是傳統模式，即使用者能夠操控連結DIV的一種模式，主要的想法就是在主頁下方新增5個懸浮半透明的小圓球，併為其加上CSS游標懸停效果，當游標懸停在小圓球上時，小圓球自動變為實心，並將上方的連結DIV轉換成小圓球所對應的連結DIV，這樣，使用者就能夠很自由地隨時控制自己想看到的那個連結DIV了。

另外，主頁還通過外鏈CSS的轉換來控制之前所介紹的兩種模式，瀏覽者可以進行選擇，當選擇自動模式時，用JavaScript將對應的外鏈CSS頁轉換成自動模式所對應的CSS頁，而當瀏覽者選擇傳統模式時，則用JavaScript將對應的外鏈CSS頁轉換成傳統模式所對應的CSS頁，以此來達到自由的切換。除此之外，我們還為主頁添加了“聯絡我們”和“更多分類”這兩個功能，當瀏覽者點選“聯絡我們”時，用CSS可以向我們所指定的郵箱傳送郵件，而在點選“更多分類”時則會連結到主頁之外的其他網頁中，不同的是這些網頁所介紹的都是之前談到的5種運動之外的其他運動。

    滑雪子網頁的佈局為了迎合全組的網頁結構，因此整個子網頁就是一個網頁，並沒有分網頁，網頁中應用了HTML中的錨技術，在整個子網頁的左側增加一個可伸可縮的小目錄，當收起時，不會影響介面的觀看；而在需要時，則可以隨時開啟，並連結到該子網頁的不同深度，這樣瀏覽者在瀏覽網頁時就可以靈活地跳躍到自己想看的位置了。

2 網頁實現

2.1 HTML的應用

主頁：

     主頁中首先在頭部應用到的HTML標籤就是<meta charset="utf-8">，這是為了保證在用不同瀏覽器開啟時，不會出現莫名其妙的亂碼；以及一些link標籤，因為主頁中應用到了許多CSS和JavaScript的內容，因此是通過外部鏈入的方式來實現呼叫。

     在主頁的內容部分主要是用div盒子來佈局，因此在整個網頁中，使用到最多的就是div標籤，甚至直接在一個div中只放一張圖片，比如說：

        另外，在主頁中還用到了無序列表定義標籤<ul>，因為ul標籤如果用CSS去掉它的預設格式的話將可以很好地用來作為一個選項目錄。比如說：

       上面這段程式就用到了<ul>和<li>標籤，兩者需要一起配合使用，ul用來定義無序列表，而li則代表無序列表的不同項，為每個li標籤加上<a>超連結標籤，這樣當用戶點選這些無序列表的不同項時，可以連結到其他的子網頁。

        除此之外，主頁中還用到了控制背景音樂的<embed>標籤，比如：

        上面這段程式中，由於新增音樂時會有開始播放的按鈕，比較影響美觀，因此特意將它的CSS設定為自動迴圈播放，並將<enbed>的寬高設定為0px。

子網頁：

為了保證子網頁在用不同瀏覽器開啟時，不會出現莫名其妙的亂碼，子網頁在頭部也用到了<meta charset="utf-8">這個HTML標籤。

另外，也用到了很多div標籤來佈局，主要分為頂部及頂部選單div、目錄div以及內容div，其中，內容div主要是一些純色的半透明盒子，將標題放在<h>標籤中、內容放在<p>標籤中，使整個網頁的效果看起來比較美觀。

該網頁中還用到了<video>標籤，其作用是將對應路徑下的視訊檔案匯入網頁中，為文章新增更多的元素，比如說：

上面這段程式中，src指定了mp4視訊檔案的路徑，controls屬性非常重要，可以將視訊轉換為控制播放，如果不指定，那麼網頁中的所有視訊會在開啟網頁時自動播放，如果有很多視訊的話會顯得很亂。

2.2 CSS的應用

主頁：

首先，主頁中用到了cursor這個屬性，這是用來指定游標檔案的，在這之後寫上游標影象檔案的url，並指定auto，可以使瀏覽者在瀏覽本網頁時，游標會有所變化。

其次是選擇器的使用，主頁中主要用到了最常用的id選擇器、通用選擇器、標籤選擇器、類選擇器和偽類選擇器等等。在設計時，用通用選擇器將整個網頁的margin和  padding屬性都置為0，以防產生空隙，並將之前提到的cursor屬性也寫入到通用選擇器中。id選擇器主要用來選中網頁中的各個div，通過width和height屬性來控制所選中的整個div的大小，用position屬性來定義所選中div的定位方式，並以left和top屬性來確定選中div的具體位置，比如說：

          網頁中用偽類選擇器來起到一定的動態作用，:hover偽類選擇器的作用是當游標移動到某個指定div上時，div的CSS屬性會轉換成對應:hover中所指定的屬性。比如：

          最後，還用到了-webkit-animation屬性，用來使對應div自動產生輪播圖的效果，-webkit-animation屬性中的第一個位置用來指定名稱，第二個位置用來指定一整個迴圈所需要的時間，最後的infinite是指無限迴圈，如果不加infinite，則CSS動畫會在以此迴圈之後結束，無法起到輪播圖的真實效果。

子網頁：

     子網頁中也用到了cursor這個屬性，這是用來指定游標檔案的，在這之後寫上游標影象檔案的url，並指定auto，可以使瀏覽者在瀏覽本網頁時，游標會有所變化。

     子網頁中主要用到了最常用的id選擇器、通用選擇器、標籤選擇器、類選擇器和偽類選擇器等等。在設計時，用通用選擇器將整個網頁的margin和padding屬性都置為0，以防產生空隙，並將之前提到的cursor屬性也寫入到通用選擇器中。id選擇器主要用來選中網頁中的各個div，通過width和height屬性來控制所選中的整個div的大小，用position屬性來定義所選中div的定位方式，並以left和top屬性來確定選中div的具體位置，比如說：

       以上這些內容在主頁和子網頁中都有所使用。但除此之外，在子網頁中還用到了linear-gradient，這是一個用來產生漸變的屬性，在它的後面可以加上多個rgb屬性或者rgba屬性，它們之間的顏色轉換為漸變效果，比如：

       最後值得一提的是在實現目錄時，我由於需要製作一個按鈕，因此在過程中還應用到了border-top-right-radius和border-bottom-right-radius這兩個控制邊角弧度屬性，其中border-top-right-radius屬性用來控制右上角的弧度，border-bottom-right-radius用來控制右下角的弧度。

2.3 JavaScript的應用

首先，主頁和子網頁中都用到了onmouseover和onmouseout這兩個JS元素onmouseover主要是指當游標移動到指定div上時，呼叫指定的JavaScript函式，而onmouseout指當游標離開指定div時，呼叫指定的JavaScript函式。對應的函式寫在外部JS檔案中，並通過link標籤鏈入，具體例子如下：

在外部JS檔案中，需要定義之前在HTML網頁檔案中呼叫的JS函式，主要是通過document.getElementById來獲取對應div的id，並通過JavaScript來改變所選中的div對應的屬性，也能起到動態的作用，比如：

另外值得一提的是，為了控制主頁中動態CSS的-webkit-animation屬性，在對應的JS函式中通過控制div的style.webkitAnimationPlayState來控制-webkit-animation屬性是否執行，通過將其修改為paused來使其暫停，修改為running來使其繼續執行。

3 網頁效果圖

主頁的動態效果（移動到連結div上時彈跳下落）：

將主頁的動態效果切換到傳統模式時的效果：

子網頁進入後的效果：

子網頁瀏覽時的效果：

4課程總結

     在完成本次綜合實驗時，我主要學到了CSS動態效果的使用、JavaScript以及對游標的控制。比如在製作輪播圖時，由於CSS動態效果-webkit-animation的一些侷限性，我在之前的學習過程中不知道如何去控制這種動態屬性，因此在製作網頁時很需要費腦子，通過在網上查詢資料，我瞭解到webkitAnimationPlayState屬性可以用來控制動態CSS，有了這個屬性，我在動態CSS的運用上才變得更加靈活自如。

     最後，通過本次綜合實驗我確實收穫到了很多，老師在上課的過程中雖然已經對絕大部分常用的標籤、屬性等做了細緻的講解，但是要想真正領悟，還是需要通過自己的不斷實踐，在完成綜合實驗的過程中不斷熟練自己的認識，以及和隊友之間的合作，這些都是我未來踏上社會道路所必須要具備的。