今回は、他のページにリンクします。
前回のindex.phpをエディタで開きタイトルを変えて以下の4ファイルを作成します。
ファイル名：editautho.php タイトル：作者編集
ファイル名：newautho.php タイトル：新規作者登録
ファイル名：editcomic.php タイトル：コミック編集
ファイル名：newcomic.php タイトル：コミック新規登録
ファイルを開きタイトルを変えて、SAVE ASでファイル名を変えて保存します。
4ファイルが作成できたらindex.phpを以下に修正します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>コミックデータベース</title>
</head>
<body>
<div>
コミックデータベース管理メニュー
</div>
<div>
<br>
<a href="./editautho.php">作者編集</a>
<br>
<br>
<a href="./newautho.php">新規作者登録</a>
<br>
<br>
<a href="./editcomic.php">コミック編集</a>
<br>
<br>
<a href="./newcomic.php">コミック新規登録</a>
</div>
</body>
</html>
実行するとメニューが表示され、クリックすると各ファイルに移動します。
<a>タグでページ間移動が完成です。文字部分を絵にも代えられます。
<img>タグを文字部分に記載すれば、画像データのクリックでの移動になり、スタイルシートを使えは、このままでボタン表示可能です。
しかし、今回は、ダサイのと時間が無いので、直接ボタンに変更しましょう！
<a>タグを以下に変更します。
<input type="button" onclick="window.location.href='./editautho.php';" value="作者編集" />
<br>
<br>
<input type="button" onclick="window.location.href='./newautho.php';" value="新規作者登録" />
<br>
<br>
<input type="button" onclick="window.location.href='./editcomic.php';" value="コミック編集" />
<br>
<br>
<input type="button" onclick="window.location.href='./newcomic.php';" value="コミック新規登録" />
これは、FROMの機能のボタンを直接実行してボタン表示します。
少しは良くなりましたか？
左に寄り過ぎですね！
inputの前の<div>を修正します。
<div style="margin: 5px;">
これは、divの周りの上下左右に5ピクセル(5ドット)空ける設定です。
いかがでしょうか？
少し見やすくなりましたか？
簡単ですが、少しサイトらしくなってきましたか？
次回は少しスピードアップして新規作者登録を作成します。
0 件のコメント:
コメントを投稿