網頁要長什麼樣子，需先規畫大略的 Layout，才好進行後續的開發設計。本例使用 div 區塊標籤設計如下的佈局。

<html>
<head>
    <meta charset="UTF-8">
    <title>MahalJSP</title>
</head>
<style>
    body{
        margin:0px;
        display: flex;
        flex-direction: column;
        width:100%;
        height:100%;
    }
    #banner{
        height: 80px;
    }
    #menu{
        width:100%;
        height:37px;
        background-color:#0077ff;
    }
    #content{
        flex-grow:1;
        display: flex;
        width:100%;
        height:100%;
        overflow:hidden;
        background-color:#c0c0ff;
    }
    #copyright{
       background-color: #00aaff;
       width: 100%;
       height: 25px;
       text-align: right;
    }
</style>
<body>
    <div id="banner"></div>
    <div id="menu"></div>
    <div id="content">
        這是我的首頁
    </div>
    <div id="copyright"></div>
</body>
</html>

加入 banner

製作 banner.png 並 copy 到 static/images 目錄之下，然後 <div id=”banner”> 區塊撰寫成如下

<div id="banner">
    {% load static %}
    <img src="{% static 'images/banner.png' %}"/>
</div>

結果如下

加入下拉式選單

下拉式選單需使用 JavaScript 製作。網路上已有好用的套件，請先下載 SpryAssets.zip，解開後置於 static 目錄之下。

head 需修改成如下

<head>
    <meta charset="UTF-8">
    <title>MahalJSP</title>
    <script src="/static/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="/static/SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
    <link href="/static/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="/static/SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
    <link rel="Shortcut Icon" type="image/x-icon" href="/static/images/logo.png" />
</head>

<div id=”menu”> 區塊新增如下代碼，並於 div 區塊後新增 javascript 指令，如下代碼所示。

<div id="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
        <li>
            <a href="/travel">旅遊軌跡</a>
        </li>
        <li>
            <a href="/gallery">相片記錄</a>
        </li>
        <li>
            <a href="/tools">程式下載</a>
        </li>
        <li>
            <a href="#">財經資訊</a>
            <ul>
                <li>
                    <a href="/twstock">台灣股市</a>
                </li>
                <li>
                    <a href="/twgold">黃金儲摺</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar(
    "MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
    imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}
    );
</script>

結果如下

CopyRight

最下方的版權宣告比較簡單，只需在 <div id=”copyright”> 加入如下代碼即可

<div id="copyright">
    PowerBy Thomas(mahaljsp@gmail.com)
</div>

網頁初步規畫

加入 banner

加入下拉式選單

CopyRight

發佈留言