|
サブページとはTOPページ以外のページです。
サブページを作る時はTOPページのヘッダーとフッターの部分
のレイアウトと同じレイアウトにすると効率よく楽に複数のページ作る
ことができます。
■ TOPページのソースをコピー、貼り付けする
まず新規にメモ帳を立ち上げます。そしてTOPページを開き、ソースも開きます。
編集→すべて選択でソースをコピーして新規に立ち上げた方の
ソースに丸ごと貼り付けます。
また、TOPページの外部ファイルも同時に開いておきます。
新規メモ帳に貼り付けたソース
<HTML>
<HEAD>
<TITLE>ホームページのタイトル</TITLE>
<link rel="stylesheet" href="toppage.css" type="text/css">
</HEAD>
<BODY>
<div id="body">
<div id="header">ホームページのタイトル</div>
<div id="header2" align="center">
<a href="menu1.html">メニュー1</a>
<a href="menu2.html">メニュー2</a>
<a href="menu3.html">メニュー3</a>
<a href="menu4.html">メニュー4</a>
<a href="menu5.html">メニュー5</a>
<a href="menu6.html">メニュー6</a>
</div>
<div id="middle">
TOPページのメインコンテンツ
</div>
<div id="rightmenu">
<ul>
<li><a href="htmltag.html">HTMLタグ</a></li>
<li><a href="stylesheet.html">CSSとは</a></li>
<li><a href="source.html">ソースとは</a></li>
</ul>
<hr>
<ul>
<li><a href="server2.html">サーバーとは</a></li>
<li><a href="browser2.html">ブラウザとは</a></li>
</ul>
<hr>
<ul>
<li><a href="bbs.html">雑談掲示板</a></li>
<li><a href="chat.html">チャット</a></li>
<li><a href="mailform_sample.html">問い合わせ</a></li>
</ul>
</div>
<br clear="all">
<div id="footer">
<a href="aboutlink_sample.html">リンクについて</a>
<a href="menseki.html">免責事項</a>
<a href="mutuallylink_sample.html">相互リンク募集</a>
</div>
</div>
Copyright (C) 2000-2011 サイト名 All rights reserved.
</BODY>
</HTML>
上記のソースで赤文字の部分が不要な部分なので
全て削除します。
そしてTOPページのタイトルを
削除してタイトル部分をサブページのタイトルに変更します。
また、
<HEAD>～</HEAD>内の
<link rel="stylesheet" href="toppage.css" type="text/css">
のtoppage.cssの
部分をsubpage.cssに変更すると
以下のようなソースになります。
<HTML>
<HEAD>
<TITLE>サブページのタイトル</TITLE>
<link rel="stylesheet" href="subpage.css" type="text/css">
</HEAD>
<BODY>
<div id="body">
<div id="header">ホームページのタイトル</div>
<div id="header2" align="center">
<a href="menu1.html">メニュー1</a>
<a href="menu2.html">メニュー2</a>
<a href="menu3.html">メニュー3</a>
<a href="menu4.html">メニュー4</a>
<a href="menu5.html">メニュー5</a>
<a href="menu6.html">メニュー6</a>
</div>
<div id="middle">
メインコンテンツ
</div>
<div id="footer">
<a href="aboutlink_sample.html">リンクについて</a>
<a href="menseki.html">免責事項</a>
<a href="mutuallylink_sample.html">相互リンク募集</a>
</div>
</div>
Copyright (C) 2000-2011 サイト名 All rights reserved.
</BODY>
</HTML>
下記リンクから解説その2（CSSファイルの編集のページ）に移動して下さい。
・CSSファイルの編集
・ヘッダーを追加する
・サブページのサンプル
HTMLタグ一覧
スタイルシート一覧
|
