基礎と応用のホームページ講座(40) |
学校たよりの相互リンク(ソース画面の活用) |
「ソース画面で相互リンク(1)」画面 |
|
写真(1) |
写真(1)は、「ソース画面で相互リンク(1)」画面です。
(1)マイコンの「tayori」フォルダ内の「tayori03」ページをクリック(またはダブルクリック) |
|
「ソース画面で相互リンク(2)」画面 |
|
写真(2) |
写真(2)は、「ソース画面で相互リンク(2)」画面です。
(1)「tayori03」ページを表示 |
|
「ソース画面で相互リンク(3)」画面 |
|
写真(3) |
写真(3)は、「ソース画面で相互リンク(3)」画面です。
(1)アドレス(D:\yamatesho\tayori\tayori03.htm)を確認する
(2)「D」ドライブの「yamatesho」フォルダ内の「tayori」フォルダ内の「tayori03」ページを表示という意味
(3)「表示」→「ソース」 |
|
「ソース画面で相互リンク(4)」画面 |
|
写真(4) |
写真(4)は、「ソース画面で相互リンク(4)」画面です。
(1)@「tayori03-メモ帳」とは、tayori03ページの設計図という意味
(2)A「IBM HomePage Builder V3.0 for
Windows」とは、ウインドウズ版ビルダー3という意味
(3)B「home01ah.gif」(homeボタン)をクリックすると、C「tayori_ndx」(小目次)にリンクするという意味
(4)D「back01ah.gif」(backボタン)をクリックすると、E「tayori02」ページにリンクするという意味
(5)ソース画面の現在地である「tayori03」が重要な意味をもっています。
(6)「ソース画面」を「閉じる」 |
|
「ソース画面で相互リンク(5)」画面 |
|
写真(5) |
写真(5)は、「ソース画面で相互リンク(5)」画面です。
(1)tayori03ページのブラウザ画面の「back」ボタンをクリック
(2)tayori02ページが表示されました。
(3)tayori02ページの「表示」→「ソース」 |
|
「ソース画面で相互リンク(6)」画面 |
tayori02-メモ帳
<P>
<A href="tayori_ndx.htm"><IMG src="home01ah.gif"></A>
@<A href="tayori01.htm"><IMG
src="back01ah.gif"></A>
</P> |
写真(6) |
写真(6)は、「ソース画面で相互リンク(6)」画面です。
(1)写真(6)は、写真(5)のソース画面です。
(2)tayori03ページもあるtayori02ページです。進むボタンが必要です。 |
|
「ソース画面で相互リンク(7)」画面 |
tayori02-メモ帳
<P>
<A href="tayori_ndx.htm"><IMG src="home01ah.gif"></A>
@<A href="tayori01.htm"><IMG
src="back01ah.gif"></A>
A<A href="Atayori01.htm"><IMG
src="@back01ah.gif"></A>
</P> |
写真(7) |
写真(7)は、「ソース画面で相互リンク(7)」画面です。
(1)@以下をドラッグして、右クリック→「コピー」
(2)@以下をAの場所で、右クリック→貼り付け」 |
|
「ソース画面で相互リンク(8)」画面 |
tayori02-メモ帳
<P>
<A href="tayori_ndx.htm"><IMG src="home01ah.gif"></A>
@<A href="tayori01.htm"><IMG
src="back01ah.gif"></A>
A<A href="Ctayori03.htm"><IMG
src="Bnext01ah.gif"></A>
</P> |
写真(8) |
写真(8)は、「ソース画面で相互リンク(8)」画面です。
(1)写真(7)の@back01ah.gifをBnext01ah.gifに変更(backをnextに変更するだけ)
(2)写真(7)のAtayori01.htmをCtayori03.htmに変更(01を03に変更するだけ) |
|
「ソース画面で相互リンク(9)」画面 |
|
写真(9) |
写真(9)は、「ソース画面で相互リンク(9)」画面です。
(1)「ファイル」→「上書き保存」→メモ帳を「閉じる」 |
|
「ソース画面で相互リンク(10)」画面 |
|
写真(10) |
写真(10)は、「ソース画面で相互リンク(10)」画面です。
(1)@「更新」→A実行結果
(2)「home」ボタンをクリック |
|
「ソース画面で相互リンク(11)」画面 |
tayori_ndx-メモ帳
<TR>
<TD>03</TD>
<TD></TD>
<TD align="left"><B>クズの種で地球緑化に役立てる</B></TD></TR>
<TR>
<TD>02</TD>
<TD>@<IMG src="new01ah.gif"
alt="New" height="26" width="57"></TD>
<TD align="left">B<A
href="tayori02.htm"><B>校区の自然に親しむ</B>C</A></TD></TR>
<TR>
<TD>01</TD>
<TD> </TD>
<TD align="left"><A href="tayori01.htm"><B>宮山から見た那波港と相生湾</B></A></TD></TR> |
写真(11) |
写真(11)は、「ソース画面で相互リンク(11)」画面です。
(1)写真(11)は、写真(10)のソース画面です。 |
|
「ソース画面で相互リンク(12)」画面 |
tayori_ndx-メモ帳
<TR>
<TD>03</TD>
<TD>A<IMG src="new01ah.gif"
alt="New" height="26" width="57"></TD>
<TD align="left">D<A
href="tayori03.htm"><B>クズの種で地球緑化に</B>E</A></TD></TR>
<TR>
<TD>02</TD>
<TD> </TD>
<TD align="left"><A href="tayori02.htm"><B>校区の自然に親しむ</B></A></TD></TR>
<TR>
<TD>01</TD>
<TD> </TD>
<TD align="left"><A href="tayori01.htm"><B>宮山から見た那波港と相生湾</B></A></TD></TR> |
写真(12) |
写真(12)は、「ソース画面で相互リンク(12)」画面です。
(1)写真(11)の@以下を切り取りして、Aに貼り付け
(2)写真(11)のB以下をコピーして、Dに貼り付け→tayori03と変更
(3)写真(11)のC以下の</A>をコピーして、Eに貼り付け
(4)「ファイル」→「上書き保存」→メモ帳を「閉じる」 |
「ソース画面で相互リンク(13)」画面 |
|
↑(完成ページにリンク) |
写真(13) |
写真(13)は、「ソース画面で相互リンク(13)」画面です。
(1)完成ページです。 |