use a Table for Page Layout

ကၽြန္ေတာ္တုိ႕ အခု website တစ္ခုလံုးကို tablet ကို အသံုးျပဳျပီး ေရးဆြဲၾကည့္ရေအာင္။

အရင္ဆံုး ကၽြန္ေတာ္တုိ႕ ရဲ႕ page layout ကို အၾကမ္းဆြဲပါမယ္။

<html>
<head>
    <title>One Piece</title>
</head>
<body>
<table>
    <tr>
        <!-- Banner -->
        <td colspan=2>
            <!-- image here -->
        </td>
    </tr>
    <tr>
        <td>
            <!-- menu -->
        </td>
        <td>
            <!-- text -->
        </td>
    </tr>
</table>
</body>
</html>

အေပၚမွာ banner ပါျပီးေတာ့ ဘယ္ဘက္မွာ menu ပါပါမယ္။ ညာဘက္မွာေတာ့ စာေတြ ေရးပါမယ္။

banner က အျပည့္ျဖစ္မွာ ျဖစ္တဲ့ အတြက္ေၾကာင့္ column ၂ ခု ကို ေပါင္းထားပါတယ္။ အခု စာေတြ ပံုေတြ ထည့္ၾကည့္ရေအာင္။

 <html>
<head>
    <title>One Piece</title>
    <meta charset="utf-8">
</head>
<body>
<table>
    <tr>
        <!-- Banner -->
        <td colspan=2>
            <img src="banner.jpg">
        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="videos.html">Videos</a></li>
            </ul>
        </td>
        <td>
            <p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>

            <p>The chapters have been adapted into an original video animation (OVA) produced by Production I.G in 1998, and an anime series produced by Toei Animation, which began broadcasting in Japan in 1999. Since then, the still ongoing series has aired over 600 episodes. Additionally, Toei has developed eleven animated feature films, two OVA's, and five television specials. Several companies have developed various types of merchandising such as a trading card game, and a large number of video games.</p>

            <p>The manga series was licensed for an English language release in North America by Viz Media, in the United Kingdom by Gollancz Manga, and in Australia and New Zealand by Madman Entertainment. The anime series has been licensed by Funimation Entertainment for an English-language release in North America, although the series was originally licensed and distributed by 4Kids Entertainment.</p>

            <p>One Piece has received wide critical acclaim, primarily for its art, characterization, humor and story. Several volumes of the manga have broken publishing records, including highest initial print run of any book in Japan and the first book to sell over three million copies in Oricon history. As of 2013, the series had over 345 million volumes in circulation worldwide, making it the best-selling manga series in history.</p>

        </td>
    </tr>
</table>
</body>
</html>

အဲဒီ အခါ browser မွာ ေအာက္ကလို မ်ဳိး ျမင္ရပါမယ္။

Figure 7-18

အခု ထပ္ျပီးေတာ့ ကၽြန္ေတာ္တုိ႕ ေတြ css ထည့္ရေအာင္။

<html>
<head>
    <title>One Piece</title>
    <meta charset="utf-8">
    <style>
    body {
        padding:0px;
        margin:0px;
        background-color:#ecf0f1;
    }
    table.container {
        width:776px;
        margin-left:auto;
        margin-right:auto;
        background-color:#FFFFFF;
    }
    td.banner {
        text-align:center;
    }
    td.menu {
        width: 100px;
        vertical-align:top;
        border-right: 1px solid #2980b9;
    }

    td.menu ul {
        list-style:none;
        padding:0px;
    }

    td.menu ul li {
        padding-bottom:5px;
    }

    td.menu ul li a {
        text-decoration: none;

    }

    td.menu ul li a:link , td.menu ul li a:visited {
        color:#2980b9;
    }

    td.menu ul li a:hover {
        color:#3498db;
        text-decoration:underline;
    }

    td.content {
        padding-left : 8px;
    }
    </style>
</head>
<body>
<table class="container">
    <tr>
        <!-- Banner -->
        <td colspan=2 class='banner'>
            <img src="banner.jpg">
        </td>
    </tr>
    <tr>
        <td class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="videos.html">Videos</a></li>
            </ul>
        </td>
        <td class="content">
            <p>One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 73rd volume released as of March 2014. One Piece follows the adventures of Monkey D. Luffy, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>

            <p>The chapters have been adapted into an original video animation (OVA) produced by Production I.G in 1998, and an anime series produced by Toei Animation, which began broadcasting in Japan in 1999. Since then, the still ongoing series has aired over 600 episodes. Additionally, Toei has developed eleven animated feature films, two OVA's, and five television specials. Several companies have developed various types of merchandising such as a trading card game, and a large number of video games.</p>

            <p>The manga series was licensed for an English language release in North America by Viz Media, in the United Kingdom by Gollancz Manga, and in Australia and New Zealand by Madman Entertainment. The anime series has been licensed by Funimation Entertainment for an English-language release in North America, although the series was originally licensed and distributed by 4Kids Entertainment.</p>

            <p>One Piece has received wide critical acclaim, primarily for its art, characterization, humor and story. Several volumes of the manga have broken publishing records, including highest initial print run of any book in Japan and the first book to sell over three million copies in Oricon history. As of 2013, the series had over 345 million volumes in circulation worldwide, making it the best-selling manga series in history.</p>

        </td>
    </tr>
</table>
</body>
</html>

အခု ဆိုရင္ ကၽြန္ေတာ္တို႕ ေတြ CSS ေတြ ထပ္ျဖည့္ထားပါတယ္။ ဒါေၾကာင့္ website က ေအာက္ကလို ျမင္ရပါလိမ့္မယ္။

Figure 7-19

results matching ""

    No results matching ""