書籍バックエンド管理システムには、さまざまな機(jī)能効果を表示するためのさまざまなページが必要です

最後に、これらのページが組み立てられて、完全なバックエンド機(jī)能ページが形成されます。

このセクションでは、バックエンド管理システムのヘッドページを作成します

図に示すように、パスワード、ユーザー情報(bào)を変更し、システムを終了する管理者の機(jī)能が含まれています

ホームページを表示し、ページを送ります、戻る、更新、ヘルプなどのボタンをクリックします

レイアウトには <table><td> を使用します。

さまざまな小さなアイコンを追加しました。効果を達(dá)成するために。

レイアウトは 3 つの <表> 段落に分かれています

最初の部分は、パスワード、ユーザー情報(bào)を変更し、システムを終了することです

<tr>
  <td height="57" background="https://img.php.cn/upload/course/000/000/008/58241d480ee8f976.gif">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="378" height="57" background="https://img.php.cn/upload/course/000/000/008/58242a6c7fb76454.jpg">&nbsp;</td>
        <td>&nbsp;</td>
        <td width="281" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="33" height="27"><img src="https://img.php.cn/upload/course/000/000/008/58241db991188465.gif" width="33" height="27" /></td>
              <td width="248" background="https://img.php.cn/upload/course/000/000/008/58241ecee3d8a379.gif">
                <table width="225" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td height="17"><div align="right"><a href="ly_pwd.php" target="rightFrame">
                          <img src="https://img.php.cn/upload/course/000/000/008/58241f589c539785.gif" width="69" height="17" border="0" /></a></div>
                    </td>
                    <td><div align="right"><a href="ly_pwd.php" target="rightFrame">
                          <img src="https://img.php.cn/upload/course/000/000/008/58241f87de0d6838.gif" width="69" height="17" border="0" /></a></div>
                    </td>
                    <td><div align="right"><a href="login.php?tj=out" target="_parent">
                          <img src="https://img.php.cn/upload/course/000/000/008/58241fa5c3ae2298.gif" alt=" " width="69" height="17" border="0" />
                          </a></div>
                    </td>
                  </tr>
                </table></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

2 番目の部分は、ホームページ、進(jìn)む、戻る、更新、ヘルプ、その他のクリック ボタンです。

<tr>
  <td height="40" background="https://img.php.cn/upload/course/000/000/008/58241fee34c77371.gif">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="194" height="40" background="https://img.php.cn/upload/course/000/000/008/5824202426789223.gif">&nbsp;</td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="21"><img src="https://img.php.cn/upload/course/000/000/008/5824204770d92615.gif" width="19" height="14" /></td>
              <td width="35" class="STYLE7"><div align="center"><a href="ly_right.php" target="rightFrame">首頁</a></div></td>
              <td width="21" class="STYLE7"><img src="https://img.php.cn/upload/course/000/000/008/5824206c3e017337.gif" width="19" height="14" /></td>
              <td width="35" class="STYLE7"><div align="center"><a href="javascript:history.go(-1);">后退</a></div></td>
              <td width="21" class="STYLE7"><img src="https://img.php.cn/upload/course/000/000/008/5824208561069957.gif" width="19" height="14" /></td>
              <td width="35" class="STYLE7"><div align="center"><a href="javascript:history.go(1);">前進(jìn)</a></div></td>
              <td width="21" class="STYLE7"><img src="https://img.php.cn/upload/course/000/000/008/582420b4a0ac0424.gif" width="19" height="14" /></td>
              <td width="35" class="STYLE7"><div align="center"><a href="javascript:window.parent.location.reload();">刷新</a></div></td>
              <td width="21" class="STYLE7"><img src="https://img.php.cn/upload/course/000/000/008/582420cfd7041136.gif" width="19" height="14" /></td>
              <td width="35" class="STYLE7"><div align="center"><a href="ly_right.php" target="rightFrame">幫助</a></div></td>
              <td>&nbsp;</td>
            </tr>
          </table></td>
        <td width="248" background="https://img.php.cn/upload/course/000/000/008/5824211aae974497.gif">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="16%"><span class="STYLE5"></span></td>
              <td width="75%"><div align="center"><span class="STYLE7">By(<a href="http://ipnx.cn" target="_blank">php.cn</a>)</span></div></td>
              <td width="9%">&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

3つ目は管理メニューの表示です

<tr>
  <td height="30" background="https://img.php.cn/upload/course/000/000/008/5824213c382a3310.gif">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="8" height="30"><img src="https://img.php.cn/upload/course/000/000/008/5824215c09227277.gif" width="8" height="30" /></td>
        <td width="35%" background="https://img.php.cn/upload/course/000/000/008/5824217ae53db193.gif">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="24%"> </td>
              <td width="53%" height="20" valign="bottom" class="STYLE1">管理菜單</td>
              <td width="33%"> </td>
            </tr>
          </table>
        </td>
        <td><img src="https://img.php.cn/upload/course/000/000/008/58242199adc1e244.gif" height="30" /></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="20" valign="bottom"><span class="STYLE1">當(dāng)前登錄用戶：admin  用戶角色：管理員</span></td>
              <td valign="bottom" class="STYLE1"><div align="right"></div></td>
            </tr>
          </table>
        </td>
        <td width="17"><img src="https://img.php.cn/upload/course/000/000/008/582421be84fc5175.gif" width="17" height="30" /></td>
      </tr>
    </table></td>
</tr>

このようにして、バックグラウンド管理ヘッダーページのフロントエンドコードが完成しました。