画像、ボタン、壁紙、表などを使って、ホームページを見やすくします。

　画像は自分で作らなくても、インターネット上で、無料で配布しているサイトがたくさんあります。

　・１キロの小箱　http://plaza12.mbn.or.jp/~keis/1kbox/

　・Anyway  http://anyway.plaza.gaiax.com/

　など。他のサイトの検索は、http://dir.yahoo.co.jp/computers_and_internet/internet/world_wide_web/page_design_and_layout/Graphics/

（１）画像の入れ方

まず、小さなボタンの画像を自分のページに貼り付けてみましょう。

http://plaza12.mbn.or.jp/~keis/1kbox/but/index.html

に行って、を探す。次に、このの上にカーソルを当てて、マウスを右クリック→「名前を付けて画像を保存」をクリック→「保存する場所」に「public_html」を指定→「保存」をクリック（このとき、ボタンのファイル名が「but20_b」になっていることを確認）

これで、が、あなたのパソコンの「public_html」フォルダに入りました。

次に、このボタンを貼り付けたい場所にカーソルを持ってきて、左クリック。そのあと、上部のボタンメニューから「画像」をクリック→「ファイルの選択」をクリック→「ファイルの場所」に「public_html」を指定→そこにある「but20_b」をクリック→「開く」をクリック→「OK」をクリック

これで、が、指定の場所に貼り付けられました。（この時点で、一回ページを保存するのがよい）

どんな画像でも、同じようにして貼り付けられます。

　のように。

写真なども同じようにして貼り付けます。
 

では、画像のボタンを押したら、どこかにジャンプするようにしましょう。そのためには、画像のボタンに「リンク」の設定をすればよいわけです。

まず、

大阪府立大学総合科学部

というのを作ります。そして、ボタンを部分をカーソルで選択して色を反転させ、メニューの「リンク」をクリック。あとは、通常のリンクの作業と同じです。リンクが終わったら、ボタンを再度選択してから、上部の「画像」をクリック。すると右下の「枠線」が「2」ピクセルになっていることがあるので、それを「0」ピクセルに変更する（数字は半角で入れること）。すると、以下のようになります。

大阪府立大学総合科学部

このボタン部分をクリックすると、リンク先にジャンプします。

ページの背景に、きれいな模様を付けることができます。たとえば、このページのように。

まず、http://anyway.plaza.gaiax.com/grndfold/grndflm.html　に行って、「ノイズ ● ランダムなバック素材」をクリック。すると、何種類か出てきます。たとえば左から２番目の上にカーソルを置いて、右クリック→「名前を付けて画像を保存」をクリック→「保存する場所」に「public_html」を指定→「保存」をクリック（このとき、ボタンのファイル名が「kabe_a02.gif」になっていることを確認）。

これで、この壁紙が、あなたのパソコンの「public_html」フォルダに入りました。

次に、上部のメニューから「書式」→「ページのプロパティ」→「配色と背景」に行き、「背景画像」のなかの「ファイルを選択」をクリック→「kabe_a02gif」をクリック→「開く」をクリック→「OK」

これで、壁紙が現われました。あとは、自由に文章や画像を書き込むことができます。

「表」（テーブル）を使うと、とてもきれいにレイアウトできます。「表」は奥が深いので、いろいろ試行錯誤しながら、ぜひマスターしましょう。

まずはこのページの表１を作ってみましょう。

ボタンメニューの「表」をクリック。表の設定画面が現われます。この設定画面の意味ですが、

行数：４　　列数：３　　　だと、
 

あ	い	う
え	お	か
き	く	け
こ	さ	し

こういうふうになります。

表の配置は、センタリングするかどうかを決めるためのもの。「中央」だとセンタリングされます。

罫線の幅は、

１ピクセル

あ

５ピクセル

あ

０ピクセル（この場合、枠線は表示されませんが、きちんと表になります）

あ

罫線０ピクセルは、きれいなレイアウトを作るときに、とても役立ちます。表２および表３をご覧ください。

表の幅は、

１００％

あ

５０％

あ

列の幅を同じにするのチェックは、きちんと列を３等分とか４等分したいとき以外は、はずしておきましょう。

表の背景で、表の中の色を選択できます。（ただし、細かい細工をするときには、表を作ったあとで、セルの色の背景を指定しましょう）
色を選択するには、「色」の右にある立体ボタンをクリックして指定します）
 

ここも

ここも同じ色になる

さて、表１と同じものを作れたでしょうか？

いったん表を作ってから、行や列を増やしたいと思ったときは、表の内部にカーソルを持っていき、マウスを右クリック→「挿入」をクリック→「行」か「列」をクリックで増えます。減らしたいときは、「削除」をクリックします。

さらに細かい細工をするときには、表の内部にカーソルを持っていき、マウスを右クリック→「表のプロパティ」をクリック。すると「セル」の設定ができます。「セル」とは、表の中の一番小さい枠のことです。上図ならば、この表は、左のセルと、右のセルからできています。左のセルと右のセルの背景色を変えるには、「セル」の「背景」の色をそれぞれ別に指定すればよいのです。
 

ここのセルと

ここのセルの色を別々に指定

コンポーザーは、実は、複雑な表を作るのには適していません。途中で行や列を増やそうと思っても、うまくできないときがあります。ですが、かなりのことが可能なので、チャレンジしましょう。

表の中に、画像を貼り付けることもできます。リンクを付けることもできます。表２は、どうやって作ったのでしょう？

さらには、表の中に、もうひとつ表を組み込むこともできます。

ホームページの表紙は、ぜひ、「表」の機能を使って作成してみてください。

（ａ）ホームページの表紙には、次のような情報が掲載されている必要があります。
 

＜必須＞

・ページのタイトル

・簡単なページの説明　１行でもいいです。「サッカー研究のページです」。

・ホームページの公開日と、最終更新日

・作成者のメールアドレス
 

・以下のページへのリンク

プロフィール　　あなたが誰なのかを紹介してください。

主要な内容のページ　　研究内容（サッカーの国際比較、全試合データ、エッセイ、批評、資料・・・）

リンク集　　重要な関連サイトへのリンク　あなたによるコメントを付けてください。コメントのないリンク集はダメ

 

＜その他＞

・以下のページへのリンク

日記

写真集

掲示板　　大学からは設置できません。自宅から作るときには、ぜひ。

カウンター　　これも大学のサーバには設置できません。無料カウンターを借りてくるのは可能だと思います。
 
 

（ｂ）表紙以外のページには、表紙に戻るためのリンクを付けておく必要があります。

・たとえば↓にあるような「戻る」のリンクです。上手なページを参照しましょう。