網頁發布到互連網嘗試

         這兩天分別學習了下HTML和CSS，雖沒有製作精美的網頁但將入門的元素和屬性都用了下。並嘗試發布到互連網上。

      我在《中國互聯》申請了個可以免費使用4天的伺服器，網址：http://www.163ns.com/err.asp   在本網站可以設定下自己的首頁的名稱是哪種類型，方便傳我們的網頁。我使用的FTP上傳工具是FileZilla是一款免費的，地址：http://filezilla-project.org/。通過這個工具可以通過拖拽的方式將要上傳的HTML和CSS文檔以及相關圖片傳到伺服器上。（我的4天試用網站：http://wodedz.c28.163ns.com/）

     在我的網站首頁，我們通過瀏覽器中的查看菜單下的字型大小，調節字型，我們會發現首頁中間部分的ABCDEFG等字不會像其他字型一樣變，他們是不變的。這是因為我在CSS檔案中設定這些字型的font-size屬性時，使用的單位是px或pt，而其他能變的使用的是%或em。我們看到的現象就是這兩者的本質區別。

      首頁左上方有三張圖片（沒有顯示出來，是因為我沒有上傳，因為上傳後要想讓他們顯示出來速度很慢，還不能理解的話可以看下下一頁中的圖片顯示情況，這下可以理解不要在網頁中插入的太多圖片的意義了）的擺放，在html中使用了span標記id，在CSS中使用了z-index進行層次堆疊。代碼如下：

     html檔案：

     <span id="p1"><img src="IMG_2417.JPG" alt="lp1" title="資訊提高班1" width=300px height=300px></span>
<span id="p2"><img src="IMG_2418.JPG" alt="lp2" title="資訊提高班2" width=300px height=300px></span>
<span id="p3"><img src="IMG_2419.JPG" alt="lp3" title="資訊提高班3" width=300px height=300px></span>

     CSS檔案：

 #p1{
 position:absolute;
 left:130px;
 top:130px;
 z-index:1;
}
#p2{
 position:absolute;
 left:200px;
 top:200px;
 z-index:2;
}
#p3{
 position:absolute;
 left:300px;
 top:300px;
 z-index:3;
}

      第二頁中的所涉及的內容都在我的《html讀書筆記》涉及到了。這個頁面顏色，字型，樣式等都是在html文檔中設定的。而首頁中除了新聞文字，連結，圖片等內容是在html中添加的，其他效果（雖然不好看）都是在CSS中設定的。

      通過這個實驗就可更好的理解CSS和HTML的作用了。很多效果其實在html檔案中也是可以設定的（尤其是html4.0以後），不過使用CSS我們更容易集中管理網頁的布局和樣式等。而且在CSS中盒子模型的提出也使我們不必在使用HTML中的table元素來進行布局了。