コンピュータ基礎実習(上級) 第四回ウェブページの作成について３清水淳紀前回までの内容  ページの作成方法(編集・アップロード・確認)     ページはKompozer やメモ帳等で編集する。ページを公開するには、アップロードをする必要がある。 Internet Explorerなどでページを開き、F5キーで表示を更新。書式設定と画像の挿入    文字の色、大きさ、見出しページの色。タイトル画像の挿入前回の作成例今日の内容  前回紹介しきれなかったHTMLの機能を紹介します。    リンク表（テーブル TABLE）画像、リンク、表を踏まえた応用テクニック。主にKompozerを使って編集をします。 Kompozerは、学内の場合共通アプリケーション内に存在します。リンク(ハイパーリンク)についてリンク(ハイパーリンク)とは１  リンク     リンクはHTML文章中に埋め込まれた、他のHTMLや画像などの位置情報である。一般的に青い文字に下線がついて表現される。 (例) 詳細はこちらリンクをクリックするとリンク先にジャンプする。マウスカーソルはリンクに触れると手の形になるいろいろなものをリンクにできる    文章をリンク化画像をリンク化ボタンやスイッチをリンク化画像をリンク化した例押すと別のページにジャンプリンク(ハイパーリンク)とは２  リンクの用途     自サイト内の別ページを表示する。（2ページ目に移動など。）別のサイトに接続する。（他サイトを紹介するなど。）ボタンやバナーを作成する。（画像に対してリンクさせる。）拡大画像などを見せる。（小さな画像で一覧表示し、クリックすると大きな画像を表示。）バナーやメニューリスト等もリンクである。クリックして大きな画像を表示リンクの作成例１  Kompozerで文字に対するリンクを作成する 1. リンクの元となる文字を入力。  2. 3. 4. [ここをクリック] など。リンク先が何かよく分かる文章が望ましい。文字を選択し、Kompozerの[リンク]ボタンをクリック。リンク先ページのアドレスや、ファイル名を入力。ファイルを保存・アップロードし実際に動作するか確認する。リンクの作成例２  リンク先として指定できるもの   別ページのアドレス（ＵＲＬ） (例) http://www.xyz.com/abc.html 別のファイル (例) mypage.html   注意：呼び出し元のファイルと同じフォルダ内にリンク先のファイルが存在すること！画像ファイルなど (例) myhome.jpg  ブラウザに直接画像が表示されます。補足：リンク先ページは同一フォルダ内に無いとだめなのか？厳密にはその必要はありません。例えば index.html と同じフォルダ内に data フォルダがあり、 data フォルダ中に mypage.html が入っている場合、リンク先を data/mypage.html と書けば動作します。ただし index.html より上位のフォルダにはリンクできません。（サーバーでは index.htmlのあるフォルダが最上位なので。）リンクを作成する際の注意点  リンク先アドレスは正確に入力する。    リンク先が何かよく分かる文章にすること。   コピー貼り付け等を使うと確実度アップ。大文字・小文字なども正確に入力すること。クリックしたらどうなるか、どこにつながっているかがページ閲覧者に想像できるような文言にする。 [リンクターゲット] に注意！  詳細は次のページへリンクターゲットとは１    リンクをクリックした際に、次画面を表示する方法。 Kompozerではリンクを設定する際に、[リンクターゲット] 欄で設定できる。よく使うリンクターゲットは[新しいウィンドウに開く]である。リンクターゲットの設定例リンクターゲットとは２  通常のリンク   リンクをクリックすると、ウィンドウが書き換わって、リンク先ページが表示される。（通称 [遷移する] という。）ターゲットが[新しいウィンドウ]のリンク  リンクをクリックすると、別のウィンドウや別のタブにリンク先ページが表示される。 (通称 [別窓] [別タブ] という。) 普通のリンクは画面が切り替わるリンクをクリック時に新しいウィンドウを開けるリンクターゲットとは３  なぜ[新しいウィンドウ]が必要なのか？    サイトＡから別のサイトＢへのリンクがあった場合普通のリンクの場合、サイトＢを開いて目的のサイトでなかった場合、ウィンドウを閉じてしまうことが多い。このとき、サイトＡもウィンドウごと失われてしまう。ページ閲覧者は、サイトＡに二度と訪問しないかもしれない。新しいウィンドウリンクの場合、サイトＢを開いて目的のサイトでなかった場合、ウィンドウを閉じても、サイトＡのウィンドウが残っているので、ページ閲覧者は、再度サイトＡの続きを見ることができる。つまり、外部（B）のサイトにリンクする場合は、新しいウィンドウに設定しておくと、閲覧者が自サイト（A）のウィンドウを閉じにくいのでうれしい。特にリンク集サイトを作るときなどに良い。リンクの練習をしてみましょう１  現在のページの下部に、リンク集ページへのリンクを作成してみましょう。 Yahoo Google など index.html link.html さらにさまざまなサイトリンク集の部分をクリックすると、 2ページ目のリンク集が開く。にリンク自分専用の使いやすいリンク集を作ってみるのも良いでしょう。リンクの練習をしてみましょう２  作成手順リンク集ページを作成 • link.html を新規作成。 index.html と同じフォルダ内に保存すること！ • いくつかの外部サイトへのリンク（別窓）を作る。リンク集ページを接続 • index.htmlを編集して、link.html へのリンクを作成する。関連ファイルをアップロード • index.html と link.html 両方をアップロードすること。 • 動作確認してみること。自サイト内の別のページにリンクをする際は、リンク先のページをあらかじめ用意しておいたほうがスムーズです。表(テーブル)について表(テーブル)とは   HTMLの標準機能として備わっている表現の一つ。いわゆるWORDの表のようなものが作成できる。表の作成例罫線が少し立体的な表現になるのがHTMLによる表の特徴である。表の各セルに対して、背景色、文字そろえ、縦横サイズ等が設定できる。表は、HTMLでは <TABLE>というタグで表現されるので表のことをテーブルと呼ぶことが多いです。 Kompozerで表を作成する  表の作成方法 1. 2.  ページ中で表を作成したい位置をクリック。テーブルボタンをクリックして表のサイズを決める。表の編集  セルの編集     各セルをダブルクリックまたは右クリック → セルのプロパティセルの[高さ]と[幅]、[背景色]などを決められる。複数セルを選択し、右クリック → [結合] など。表の大きさ設定    表の周囲の白い点をドラッグまたは右クリック → プロパティ行単位・列単位・テーブル全体それぞれの高さと幅を決められる。その他、太字等の書式設定や画像挿入など一般的な編集ができる。表編集のテクニック１  幅や高さの％指定    テーブルやセルの幅や高さは通常ピクセル単位で決まる。％単位で決めることもできる。％指定ではページ閲覧者のウィンドウのサイズを１００％とした割合で、表の大きさを指定できる。ウィンドウいっぱいに広がる表も作れる。ピクセルとはパソコン画面のようなデジタル映像は小さな点の集合体でできています。その１点が１ピクセルです。例えばハイビジョンは１画面が1920ｘ1125=2160000個のピクセルでできています。表編集のテクニック２  罫線のデザインを変える  罫線を太くしたり細くしたり、セルとセルの間隔を調整したりして表の見た目を編集できます。枠線の太さセル間隔 ABC 余白（青く塗った所）表編集のテクニック３  表の罫線を見えなくする  罫線の太さを０にすると、表の罫線は見えなくなる。    この見えない表を使って、ページのレイアウトを行うテクニックがある。 HTMLでは自由な位置に画像を配置したり、二段組等の表現ができない。レイアウトに透明の表が多用される傾向がある。３段組サイトの例：この例では、表の幅１００％(ウィンドウに対して) 枠線の太さ０ピクセルセル間隔０ピクセルに設定しています。 (実際のブラウザでは赤い罫線は見えません。) 表の中に表を作成し、色を塗ることによって複雑なデザインを表現したりもします。表のテクニック４  画像と表とリンクの組み合わせ   画像を使ったリンクメニューなどが作れます。表現の幅が広がります。作成手順(例)： 1. 画像を作成 2. 表を作成 3. 画像を挿入 4. リンクを作る 5. 表の罫線を消す実際のブラウザ表示。各ページにジャンプできる。表の中に画像を挿入し、画像に対してリンクをつけた例。手軽に画像を用意する： WORDの図形などを使って素材を用意し、 Snipping Tool 等を使って画像として取り出すと簡単です。 (SnippingToolは画面上の指定した範囲を画像として取り出すアプリケーションです。) 画像の編集にはペイントの他、Paint.NETなども便利です。次週に続く