 |
Web技術実習 |
| 戻る〔７．文字（フォント）〕 次へ〔９． ファイル転送(FTP)〕 目次 |
|
Web技術実習 |
| 戻る〔７．文字（フォント）〕 次へ〔９． ファイル転送(FTP)〕 目次 |
トップページからたどっていける“ひとまとまり”の関連するWebページの集まりを「Webサイト」といい、Webページをたどっていく仕組みを「リンク（ハイパーリンク）」という。 ここでは、Webサイトとリンクについて学習する。
8-1 Webサイト
サイト(site)とは、複数のWebページがリンクされ、ひとまとまりに公開されているWebページ群のこと、また、それらのWebページ群が置かれているインターネット上での場所のことである。Webサイトとも呼ばれ、Webサイト内のWebページはリンクによって相互に行き来ができるようになっている。
実習５ 課題用WebサイトのトップページをHPBで作成する。ファイル名は「index.htm」とする。
操作１ 新しいページを準備する。タイトルを「Web技術実習」とする。
操作２ 文字を入力する。
行末で［Shift］＋［Enter］を押す。別の段落(<P>)となる。
・位置揃えの設定
操作３ 1つ目の段落は<H1>タグの見出し文字とし、位置揃えは中央揃えとする。同じようにして、2つ目の段落は<H2>タグの見出し文字とし、位置揃えは中央揃えとする。
位置揃えを設定したい段落に移動して、メニューバーから次のように選択する。
［書式(O)］ → ［位置揃え(A)］ → 選択
位置揃えは、タグの属性として設定される。 <H1 align="center"> ・・・ </H1>
左揃え→ align="left" 右揃え→ align="right"
・リストの設定
操作４ 3つ目の段落に対して、リストを設定する。
リストを設定する範囲「フォントのサンプル」から「フォント装飾のサンプル2」までの4行をドラッグで範囲指定する。メニューバーから次のように選択する。
［挿入(I)］ → ［リスト(S)］ → ［番号なしリスト(B)］
字下げされて、各行の先頭に中点(・)が付けられる。
リストのタグは、リスト範囲を表す <UL> と各リスト項目を表す <LI> である。［HTMLページ］で確認する。
<UL>
<LI><A href="moji1.htm">フォントのサンプル</A>
<LI><A href="moji2.htm">フォントサイズのサンプル</A>
<LI><A href="moji3.htm">フォント装飾のサンプル</A>
<LI><A href="moji4.htm">フォント装飾のサンプル2</A>
</UL>
操作５ ファイルを保存する。
操作６ Webブラウザを起動して、ファイルindex.htmを閲覧する。
8-2 HPBのサイト
HPBはコンピュータ内にWebサイトと同じようなサイトを作成し、サイト内のWebページなどを管理することができる。インターネット（ネットワーク）への接続に関係なく、使用しているコンピュータの中に作成する。
実習６ 課題用のサイトをHPBで作成する。
前の課題index.htmが作成されていること。
操作１ メニューバーから次のように選択する。
［サイト(S)］ → ［サイトの新規作成(N)...］
サイト新規作成のダイアログが表示される。［サイト名(N)］に「Web」と入力し、［次へ(N)］ボタンをクリックする。
ここで入力するサイト名はHPB管理用に使用するものであるから、漢字でもかまわない。
操作２ トップページを選択する。
操作３ サイトの詳細設定で画像ファイルの保存場所を設定する。
操作４ 設定が終わったので、［完了］ボタンをクリックする。
［○転送時に転送設定をする(L)］にチェックが入っていること。
サイトを作成すると、左図（ウィンドウの左側）のようになる。
サイト名が表示され、その下の［サイト］タブをクリックする。［リンク］ボタンの下にこのサイトに属するWebページなどがリストで表示される。この場所を「サイトビュー」という。今は、index.htm一つだけである。
※ HPBを起動したとき、作成済みのサイトを開くには、メニューバーから次のように選択する。
［サイト(S)］ → ［サイトを開く(O)...］
8-3 リンク
Webページに埋め込まれた、ほかのWebページや画像データの位置情報のことをハイパーリンク(hyperlink)またはリンク(link)という。埋め込まれたリンクをクリックすることで別のWebページに切り替わる。
リンクのタグは <A> である。このタグに位置情報を属性として設定する。
<A href="sample1.htm">フォントのサンプル</A>
<A> と </A> にはさまれた文字「フォントのサンプル」をクリックすると、属性 href で指定されたファイル(Webページsample1.htm)に表示が切り替わる。
Aはanchor、hrefはhyperlink referenceの略。
実習７ リンクを設定する。
HPBは「Web技術実習」のサイトを開いておくこと。
次の課題Webページが作成されていること。（ ）内はWebページのタイトルである。
index.htm （Web技術実習）
moji1.htm （フォントのサンプル）
moji2.htm （フォントサイズのサンプル）
moji3.htm （フォント装飾のサンプル）
moji4.htm （フォント装飾のサンプル2）
操作１ サイトビューの「トップページ(/index.htm)」を右クリックして表示されるメニューから［編集(E)］をクリックして、トップページを表示する。
・リンクの設定
操作２ リスト部分の「フォントのサンプル」をドラッグして範囲指定する。
メニューバーから次のように選択する。
［挿入(I)］ → ［リンク(L)...］
属性 ダイアログの［参照(B)...］ボタンをクリックして、ファイルmoji1.htmを選択する。選択したファイル名は「file:///x:/xxxxx/moji1.htm」のように表示されるが、このままでよいので［OK］ボタンをクリックする。
リンクが設定された部分は、青色の文字で下線が付く（通常の設定の場合）。
同じようにして、リストの2～4行目にもリンクを設定する。
「フォントサイズのサンプル」 ←←← moji2.htm
「フォント装飾のサンプル」 ←←← moji3.htm
「フォント装飾のサンプル2」 ←←← moji4.htm
リンクの解除 … リンクポイントを右クリックして、メニューから［リンクの解除(R)］を選択する。
操作３ ファイルを保存する。
サイトビューにリンクを設定したファイルmoji1.htm, moji2.htm, moji3.htm, moji4.htmが表示される。
操作４ Webブラウザを起動して、ファイルindex.htmを閲覧する。
リンクをクリックして、Webページが切り替わるか確認する。
切り替わったWebページからこのトップページへ戻るリンクがないので、Webブラウザの［戻る］ボタンを使う。
操作５ サイトビューの「moji1.htm」を右クリックして表示されるメニューから［編集(E)］をクリックして、ページを表示する。
操作６ トップページに戻るリンクを設定する。
操作７ Webブラウザの更新ボタンをクリックして再表示させ、リンクの確認をする。
| 戻る〔７．文字（フォント）〕 次へ〔９． ファイル転送(FTP)〕 目次 | |
|
| Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda | |
