罫線・表機能を使うための準備
この中級コースでは、表（テーブル）を含む文書を Ｗeb ページ化すること、それと入門・初級コースで 作成したホームページにリンクしたり、新しく作るホームページの中で幾つかの項目間でリンク網を張る ことなどことを練習します。そこで、新しく次のような Ｗeb ページを作りましょう。 なお、内容は自由ですが、リンク先となる Ｗeb ページは予め用意しておく必要があります。前に作った ホームページ以外に作成したものがあれば、それも利用することにしますので、同じフロッピーに保存し ておいてください。
|
番号 |
タイトル |
内容・見出し |
備考 |
|
１
|
深谷先生のホームページ
|
授業案内 |
２にリンク |
|
経歴紹介 |
未制作 |
||
|
家族紹介 |
３にリンク |
||
|
２
|
深谷先生の授業へご案内
|
生活社会科学基礎講義Ⅲ |
試作品 |
|
コミュニケーション情報論 |
試作品 |
||
|
情報処理演習 |
試作品 |
||
|
３ |
深谷家のネコたち |
（ペット紹介） |
未公開 |
|
４ |
私のホームページ |
私の趣味 |
教材見本 |
（ここをクリックすると上表の４にリンクします。）
（ここをクリックすると上表の３にリンクします。）
タイトルロゴは、初級篇で説明した方法で作成できますから、ここでは皆さんの工夫にお任せします。ま た、見本の表の下に描いてある画像は Ward97 の「オートシェイブ」を使い、タイトルロゴの作成に「ワ ードアート」を活用したのと同じやり方で、ＨＴＭＬに利用できる形式に変換したものです。これについ ては後で詳しく取り扱います。 それでは、先ずはワープロで見本のような下書きを作ってみましょう。画面の最初と最後の罫線（茶色に 色付けしてある横線）、タイトルロゴ、表形式の罫線など、いずれも Ｗeb ページ形式では直接的には使 えなかったり、取り扱いが面倒だったりしますので、ここではすべてを普通のワード文書作成モードで下 書きすることにします。 それでは、ワード文書の新規作成画面を開いて、図形描画モードで罫線（直線）を一本引いてから、ワー ドアートでタイトルロゴを作ってください。作成したらそれを［編集］でコピーし、一度クリアしてから 初級篇で説明したようにして、作成中の画面に［形式を選択して貼り付け］で挿入し直してください。 なお、図形描画モードにするためには、次図で示すようにツールバーの［図形描画アイコン］をクリック してください。画面の下段に「描画メニュー」のアイコンが提示されますので、直線引きやオートシェイ プ、ワードアートなどの加工に利用できます。暇なときに色々試用してみて、画像処理技能を磨いておい てください。これらをマスターすると、楽しいホームページ作りが可能になります。
次に、入門篇で行った［画像まわりの書式設定］で、文書が画像であるタイトルロゴの下に入力できるよ うに設定します。これを怠ると面倒な状態が発生しますので気を付けてください。
罫線のうち「直線」は、縦線・横線ともに、前図で示した線引きのアイコンをクリックした後、線を引き たい始点と終点の間をマウスのカーソルでドラッグすればよろしい。線の色および線の幅の指定は、線を 引いた後、ハンドルを付けた状態でそれぞれのアイコンをクリックし、希望の条件を指定すればよいでし ょう。なお、後でＨＴＭＬ形式でファイルするとき、横線は <HR="数値"> というタグで示されますが、 縦線や斜線は無視されますので、タイトルロゴと同様な画像として処置する必要があります。 罫線を使って表を作るためには、ツールバーの［罫線］をクリックした後、ダイアログボックスの［表の 挿入］を選択し、さらに列数・行数等の指定をします。たとえば見本の表は４列９行ですから、次のよう に表示されます。
この表の中に必要な文字列を入力するわけですが、文字列の長さが表のセルを超えると自動的に改行され て、セルの縦幅が広くなります。必要事項の入力が終われば、不要な部分は罫線消去ツールを使って消去 します。また、マウスのカーソルを縦線の上に当てて動かしてセルの横幅を調整し、文字列が各セルに１ 行で納まるようにしてください。 この場合、セルの横幅は文字列より長めに調整します。これは、ＨＴＭＬに変換するとき、フォントサイ ズの関係でＨＴＭＬの文字列の方が長くなるのに対して、表全体の寸法はワープロで作成したのがそのま ま引き継がれるからです。ワープロで表を作成して Ｗeb ページに挿入する際に苦労するのはこれで、一 度でピッタリとうまく当てはまることは先ずありませんから覚悟をしておいてください。 ともあれ、多少は気に食わない点があっても、直接ＨＴＭＬで表の記述ができるようになるまでは、それ で我慢することにしましょう。なにしろ、コンピュータがやっているのは外国語を直訳するようなレベル ですから… 表ができたら、この段階でいちどワープロ文書としてあなたのフロッピーにファイルしておくことにしま しよう。ファイル名はあなたの自由ですが、後で内容が分かるようにしておくことが肝要です。一応ここ では Table.doc としておきます。次に、[HTML形式］でファイルして（ファイル名は Table.html とし ましょう）ワープロを閉じ、エクスプローラでファイルを開いて出来栄えを見てください。 多分、満足できるほどではないにしても、なるほど！と思えるような画面が現れるはずです。そこで、初 級篇でやったように「メモ帳」を開いて［ソース表示］に切り替えてみましょう。以下に示すのは、見本 の画面のうち表の部分にあたるＨＴＭＬ表現です。もともとはうんざりするほど複雑な表示ですので、見 やすいように並びを整理してありますが、それでも、これに手を加えるのかと思うといやになってくるの ではありませんか？
前述したように、これはワープロで作った原表を忠実に変換しているからですが、その際、表全体の横幅 を固定して、各列のセルの横幅を全体に対する百分比（％）で配分しています。また、各セルごとに文字 のフォントやサイズを指定していますし、セルの縦幅に対する文字の位置をばらつかせないようにするた めの VALIGN="TOP" というタグを忠実に付加してもいます。 その他、非常にきめこまかいタグ付けを行っていますが、そのほとんどは精密な表の作成・表示に必要な もので、大雑把な表でよければ無視してもかまわないものです。たとえば、見本の表を最初からＨＴＭＬ で次のように書いてブラウザで表示させてみましょう。<CENTER><TABLE BORDER BORDERCOLOR="#000000"> <TH><FONT SIZE="2">番号</FONT></TH> <TH><FONT SIZE="2">タイトル</FONT></TH> <TH><FONT SIZE="2">内容・見出し</FONT></TH> <TH><FONT SIZE="2">備考</FONT></TH> <TR> <TH ROWSPAN="3"><FONT SIZE="2">１</FONT></TH> <TD ROWSPAN="3"><FONT SIZE="2">深谷先生のホームページ</FONT></TD> <TD><FONT SIZE="2">授業案内</FONT></TD> <TD><FONT SIZE="2">２にリンク</FONT></TD> <TR><TD><FONT SIZE="2">経歴紹介</FONT></TD> <TD><FONT SIZE="2">未制作</FONT></TD> <TR><TD><FONT SIZE="2">家族紹介</FONT></TD> <TD><FONT SIZE="2">３にリンク</FONT></TD> <TR> <TH ROWSPAN="3"><FONT SIZE="2">２</FONT></TH> <TD ROWSPAN="3"><FONT SIZE="2">深谷先生の授業へご案内</FONT></TD> <TD><FONT SIZE="2">生活社会科学基礎講義Ⅲ</FONT></TD> <TD><FONT SIZE="2">試作品</FONT></TD> <TR><TD><FONT SIZE="2">コミュニケーション情報論</FONT></TD> <TD><FONT SIZE="2">試作品</FONT></TD> <TR><TD><FONT SIZE="2">情報処理演習</FONT></TD> <TD><FONT SIZE="2">試作品</FONT></TD> <TR> <TH><FONT SIZE="2">３</FONT></TH> <TD><FONT SIZE="2">深谷家のネコたち</FONT></TD> <TD><FONT SIZE="2">（ペット紹介）</FONT></TD> <TD><FONT SIZE="2">未公開</FONT></TD> <TR> <TH><FONT SIZE="2">４</FONT></TH> <TD><FONT SIZE="2">私のホームページ</FONT></TD> <TD><FONT SIZE="2">私の趣味</FONT></TD> <TD><FONT SIZE="2">教材見本</FONT></TD> </TABLE></CENTER> これで以下のような表が表示されます。
番号 タイトル 内容・見出し 備考 １ 深谷先生のホームページ 授業案内 ２にリンク 経歴紹介 未制作 家族紹介 ３にリンク ２ 深谷先生の授業へご案内 生活社会科学基礎講義Ⅲ 試作品 コミュニケーション情報論 試作品 情報処理演習 試作品 ３ 深谷家のネコたち （ペット紹介） 未公開 ４ 私のホームページ 私の趣味 教材見本 いかがですか？ 基本的な構造はまったく同じですが、随分すっきりしていますし、提示される表自体も 見苦しいものではありませんね。タグの中で見本と違うのは <TH> ～ </TH> ですが、これは表の中の 項目表示などに役立つもので、文字列は太字で中央揃えで表示されます。 このように直接ＨＴＭＬを使う方が都合のよい場合もあることを覚えておいてください。なお、表を作 るときの基本は、<TABLE> <TR> 行を作るタグ。</TR> はなくてもよい。 <TD> ～ </TD> 行に含まれるセルの指定 </TABLE> で、<TABLE> ～ </TABLE> に囲まれた <TR><TD> ～ </TD> のパターンを、いくつか繰り返せば表ができ ますので、暇なときに色々と試みてみてください。なお、見本のように一つのセルの縦幅を３行分にする ときには <TD ROWSPAN="3"> ～ </TD> のように指定すれば可能になります。
表の挿入が一応かたがついたところで、再びワープロ文書に戻りましょう。もし「メモ帳」で表の手直し をした場合はＨＴＭＬ形式のファイル（Table.html）の方を開いて、それを Ward文書の Table.doc に 上書きしてから、あらためて Table.doc を開き直します。 もし画面が「図形描画」モードになっていなければ、描画アイコンをクリックして描画のツールバーを画 面下段に表示させてください。さらに、次図のように任意のオートシェイプ画像を画面に挿入し、サイズ や色などを設定しましょう。
画像面に文字列を書き込む必要がある場合は、先ず［テキストボックス］のアイコンをクリックしてから 画像面をドラッグします。画像を囲むボックス型の枠が提示され、同時にカーソルが画像面に移って文字 入力が可能になります。
見本のリンク用ボタンとしての２つの画像は、いずれもこのようにして作られたものですが、このままで はＨＴＭＬに持ち込むことができません。そこで、ワードアートでタイトルロゴを作成したのと同様にし て作成中のワープロ画面に貼り付けます（→［形式を選択して貼り付け］）。
ホームページの構成には特に定めがあるわけではありませんが、一般的には、トップページで全体のイメ ージを表すような映像と、全体の構造を示す各部分の見出し（いわゆる目次）を配置するものが多いよう です。それらをどのように飾り立てるかが、作成者のデザインセンスを表すことになるわけですが、トッ プページにあまり多くの、またはサイズの大きな写真や画像を使うと、ファイルの呼び出しに時間がかか り過ぎたりして、イライラすることなきにしもあらずです。 同様に、１つのホームページが長大に過ぎるのも考えものです。内容によってはしばしば書き換えが必要 となりますが、ほんのちょっとした変更でも、そのつど全部を呼び出して変更箇所を探し出すというのは 案外と煩わしいものです。ですから、トップページは書物の表紙と目次ぐらいの内容にして、１つの章に 相当する部分をそれぞれ別の Ｗeb ページとして作成し、目次から必要とするページにリンクできるよう にしておくのが好ましいのです。 なお、場合によっては各ページ間で相互にリンクしあうネットワークを組むことも必要ですが、これはか なり綿密にプランを練ってからでないと、折角のリンク網が無意味になることもないわけではありません から気を付けましょう。そこで、ここでは先ず Ｗeb ページ間でのリンク方法を中心に説明します。 リンクの設定は Ｗard97で行うことができますが、リンク元・リンク先のファイル名が英数字に統一され ていなければならないとか、ワープロ文書をＨＴＭＬ文書に変換する作業が煩わしいとか、色々と問題が ありますので、むしろ、ワープロ文書をＨＴＭＬに変換して手直しをする最後の段階で「メモ帳」を使っ て行う方が楽でしょう。 リンクのタグ表現は <A HREF="[リンク先のファイル名]">[リンク先を指示する文字列または画像]</A> で、たとえば、リンク先が入門篇で作ったホームページ Myhome.html で、見本のようにリンク先を画像 で示すときには <A HREF="Myhome.html"><IMG SRC="but3.gif" BORDER="0"></A> とすればよいわけ です。そうすれば、次のように画像が表示され、その画像面にカーソルを持っていくとカーソルが手の指 マークに変わり、そのままクリックすると画面が指定のホームページに切り替わります。
先ず、画像全体を１つのマップ（地図）とみなし、その中にリンクを設定する３つのエリア（地域）を 指定するわけですが、この図の場合にはマップの左上角が (0，0) 右下角が (300，90) という座標で 描かれていますので、それを基準にして各エリアの座標を決めます。数値はいずれもピクセル数です。
さて、以上のデータが整えられれば、ＨＴＭＬ文書で次のようなタグ指定を行います。赤字で示した部 分がマップの使用に関するものです。
<CENTER><IMG SRC="マップ画像のファイル名.gif" USEMAP="#マップ名" BORDER="0"></CENTER> <MAP NAME="マップ名"> <AREA SHAPE="rect" COORDS="25,15,85,75" HREF="リンク先ファイル名.html"> <AREA SHAPE="circle" COORDS="150,45,30" HREF="リンク先ファイル名.html"> <AREA SHAPE="poly" COORDS="250,15,220,38,232,75,270,75,280,38" HREF= "リンク先ファイル名.html"> </MAP> 以上のうち、２個所のマップ名は同じでなければなりませんが、名前それ自体は英数字で分かりやすく 付けてください。なおエリア属性を示す rect は四角形 circle は円形 poly は多角形のエリアで、 座標データと食い違いがないように気を付けなければなりません。 ③ ホームページが長大になると、同一ページ内でのリンクが必要になることがありますが、その場合は リンク先の頭に <名前(マーカー名）> を付けておく必要があります。リンク先に必要なＨＴＭＬ表示 は <A NAME="マーカー名">テキスト</A> ですが、テキストの部分は省略してもかまいません。りンク 元での表示は <A HREF="#マーカー名">テキスト</A> で、テキストの部分をクリックするとマーカー 名で指定したリンク先が呼び出されます。 マーカーを付けておくと、他のファイルからそこへリンクさせることもできます。その場合には、リン ク元を次のようにします。 <A HREF="リンク先のファイル名.html#マーカー名">テキスト</A> たとえば、初級篇の最後に [深谷先生作成タイトルロゴアルバムより] というテキストがあります。そ こには TL01 というマーカーが付けられていますので、ここからそれに直接リンクさせてみましょう。 下の 初級篇最終ページに掲載のタイトルロゴ と表示されている箇所をクリックしてみてください。そ こには次のようなタグ表示が潜んでいます。 <A HREF="Mhome2.html#TL01">初級篇最終ページに掲載のタイトルロゴ</A>
［深谷先生作成タイトルロゴアルバムより］
表紙に戻る
初級篇最終ページに掲載のタイトルロゴ
