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