2017年1月28日 星期六

HTML小專案1:製作簡易的相簿(Album)頁面

從筆記1~筆記5的紀錄，我在這裡做一個簡單的整理，並藉由小專案來將所學到的內容做個應用，而題目就訂為"簡易的相簿頁面"。首先我們主要是應用表格(Table)來擺放圖片，並製作兩個頁面來分別存放不同類型的圖片，而頁面切換就應用超聯結(Link)的方式，將相簿類別的文字(Text)作為超聯結，除了這些之外，我額外介紹一下運用CSS的背景色的調整。





那麼我們就先從表格開始製作，表格大小為3列4行，如下:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
   
    <table border="1">
    <!--第一列-->
    <tr>
    <td></td> <!--第一行-->
    <td></td> <!--第二行-->
    <td></td> <!--第三行-->
    <td></td> <!--第四行-->
    </tr>
   
    <!--第二列-->
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
   
    <!--第三列-->
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
   
    </table>

</body>

</html>

接著，我們就將圖片分別插入每一行之中，圖片下載可以到這，下載的圖片分別改名為ImgX(X為編號)，並放在命名為Image的資料夾裡，我們也將圖片Resize成300*230，如下:

<table border="1">
    <!--第一列-->
    <tr>
    <td><img src="Image/Img1.jpg" width="300" height="230"></td> <!--第一行-->
    <td><img src="Image/Img2.jpg" width="300" height="230"></td> <!--第二行-->
    <td><img src="Image/Img3.jpg" width="300" height="230"></td> <!--第三行-->
    <td><img src="Image/Img4.jpg" width="300" height="230"></td> <!--第四行-->
    </tr>
   
    <!--第二列-->
    <tr>
    <td><img src="Image/Img5.jpg" width="300" height="230"></td>
    <td><img src="Image/Img6.jpg" width="300" height="230"></td>
    <td><img src="Image/Img7.jpg" width="300" height="230"></td>
    <td><img src="Image/Img8.jpg" width="300" height="230"></td>

    </tr>
   
    <!--第三列-->
    <tr>
    <td><img src="Image/Img9.jpg" width="300" height="230"></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
   
    </table> 

結果:




 這樣簡易型的相簿就已經成形，接著只要在新增一個HTML檔，把一樣的標示碼全部複製過去即完成第二頁的相簿，再來就是製作相簿類別作為超聯結了，順便也調整一下背景顏色，如下:

 <body style="background-color:DCBDBD;">
   
    <h3><a href="Note.html">人物</a> <a href="another.html">其他</a></h3>
   
    <table border="1">
    <!--第一列-->
    <tr>
    <td><img src="Image/Img1.jpg" width="300" height="230"></td> <!--第一行-->
    <td><img src="Image/Img2.jpg" width="300" height="230"></td> <!--第二行-->
    <td><img src="Image/Img3.jpg" width="300" height="230"></td> <!--第三行-->
    <td><img src="Image/Img4.jpg" width="300" height="230"></td> <!--第四行-->
    </tr>
   
    <!--第二列-->
    <tr>
    <td><img src="Image/Img5.jpg" width="300" height="230"></td>
    <td><img src="Image/Img6.jpg" width="300" height="230"></td>
    <td><img src="Image/Img7.jpg" width="300" height="230"></td>
    <td><img src="Image/Img8.jpg" width="300" height="230"></td>

    </tr>
   
    <!--第三列-->
    <tr>
    <td><img src="Image/Img9.jpg" width="300" height="230"></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
   
    </table>

</body>

注意這裡的背景色並不是屬於HTML的標示(紅色標著的地方)，而是CSS的背景色標示，並且使用的值是十六位原碼作為調色。整體結果如下:



張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)