コンピュータ基礎実習 ( 上級 ) 第三回 ウェブページの作成について２ 清水淳紀. 前回までの内容  ページの簡単な作り方。  ページの編集・アップロード・確認 方法について。  ページはメモ帳や Kompozer 等で編集できる。 ウェブサー バーにアップロード  ページを公開するには、必要ファイル群をウェブサー.

Presentation on theme: "コンピュータ基礎実習 ( 上級 ) 第三回 ウェブページの作成について２ 清水淳紀. 前回までの内容  ページの簡単な作り方。  ページの編集・アップロード・確認 方法について。  ページはメモ帳や Kompozer 等で編集できる。 ウェブサー バーにアップロード  ページを公開するには、必要ファイル群をウェブサー."— Presentation transcript:

1 コンピュータ基礎実習 ( 上級 ) 第三回 ウェブページの作成について２ 清水淳紀

2 前回までの内容  ページの簡単な作り方。  ページの編集・アップロード・確認 方法について。  ページはメモ帳や Kompozer 等で編集できる。 ウェブサー バーにアップロード  ページを公開するには、必要ファイル群をウェブサー バーにアップロードする必要がある。  Internet Explorer などで実際にページを開いて確認する。 URL 例 http://www.cc.kyoto-su.ac.jp/~g123456/ 最新の状態に更新 [F5 キー ]  ファイルを更新してアップロードしたら、 Internet Explorer を 最新の状態に更新 [F5 キー ] すること。 今日はウェブページ上で使えるいくつかの機能を紹介します。

3 ウェブページ作成の手順 ページの作成 アップロードして公開 結果の確認 メモ帳などを利用してウェブページを作成。 HTML 形式で記述する。 ファイル名は半角英数 ファイル名は半角英数で保存。 ( 例 ) index.html public_html フォルダにファイルをドラッグ する。 アドレス (URL) を入力して動作確認する。 F5 キーで最新の情報に更新。

4 今日の内容  Kompozer を中心としたページ編集を行います。  書式設定と画像の挿入を行ってみます。 Kompozer は、学内の場合 共通アプリケーション内に存在します。

5 ページの編集 Kompozer を使った編集

6 ウェブページでできる事  HTML の主な機能  文字を装飾 ( 書式設定 ) する  リンクで他のページをつなぐ  画像や映像の掲載位置や大きさを決める  表を作成してレイアウトを決める その他、箇条書きやフレームなど細かい機能はありますが、 基本的に HTML でできることは少ない。 Kompozer など HTML 編集支援アプリケーションを使うと 簡単に編集できる。 ( より高度な表現を行うには、画像で行うか、 CSS や Javascript といっ た 別の技術を併用する必要がある。 )

7 Kompozer でページを編集する１  Kompozer ならワープロのように HTML を編集できる。  ３つの画面を切り替えて編集する  [ 通常 ] 画面で主に編集する。  [ ソース ] 画面では HTML の詳細を編集できる。  [ プレビュー ] 画面で Internet Explorer で表示した様子を確 認。 [ 通常 ] 画面 [ ソース ] 画面 [ プレビュー ] 画面

8 Kompozer でページを編集する２  [ 通常 ] 画面  ワープロ感覚で編集。  文字列を選択して 各種書式設定できる。  ウィンドウ下部の タブをクリックして 各画面を切り替える。

9 Kompozer でページを編集する３  [ ソース ] 画面  通常画面を編集すると 自動的に HTML が 生成されてゆく。  直接 HTML を修正 することもできる。  微調整や 直接修正したほうが 操作が簡単なときに この画面を使う。

10 Kompozer でページを編集する４  [ プレビュー ] 画面  表示確認用の画面。  ブラウザで表示した結果に 忠実な画面表示。  完成前に一度は確認すること。 ( 細かな部分が 通常画面と違うかも。 )

11 Kompozer 編集の基本  編集は WORD と似た感覚で操作できる。  基本は範囲選択をしてから各種書式設定ボタンを押す。 1) 文字を入力して、選択する。 2) 例えば、箇条書きボタンを押すと、 3) 選択した文字列が箇条書きになる。

12 HTML ならではの特殊な書式設定１  [ 見出し ]  文字列を見出し設定にすると、大きなサイズで題字とな る。  見出し１～６があり、数字が小さいほどサイズが大きい。 見出し１の例 (“HTML の例 ” と言う文字列部分 ) 見出し２の例 見出しに選択した範囲は 1 つの段落として独立し、上下で自動的に改行されます。 見出しのサイズは厳密な規定が無く、ブラウザによって微妙に異なります。 見出し４以上は通常の文字より小さくなるかもしれません。 見出し３の例

13 HTML ならではの特殊な書式設定２  [ 水平線 ]  水平線を挿入すると、ウィンドウの右端から左端まで 仕切りとなる直線が挿入される。 [ 挿入 ] メニュー → [ 水平線 ] で作成できます。 初期設定では画面の左端から右端までを仕切ります。 ウィンドウの大きさを拡大縮小すると、それにあわせて伸び縮みします。 水平線上で [ 右クリック ] → [ 水平線のプロパティ ] を選択すると 線の長さや太さ、位置を変えられます。 ( 右クリックする位置はシビアで す。 ) これが水平線

14 HTML ならではの特殊な書式設定３  [ ページの配色と背景 ]  HTML では、ページ全体の色を決められる。  文字やリンクや背景の色を決められる。  背景には画像を置くこともできる。 [ 書式 ] メニュー → [ ページの配色と背景 ] で設定できます。 文字等はさらに個別に色を設定することもできます。 設定例

15 HTML ならではの特殊な書式設定４  [ ページ設定 ]  HTML の決まりとして、ページにはタイトルをつける。  その他 ページ内容の説明なども書ける。 [ 書式 ] メニュー → [ ページのタイトルとプロパ ティ ] で編集できます。 [ タイトル ] は、あなたのページをお気に入りに 登録する際の、初期登録名になります。 [ 内容の説明 ] は、あなたのページが検索エンジ ン (Yahoo など ) に登録されたとき、内容紹介とし て表示されます。 [ 文字エンコード ] を適切に設定すると 日本語文字の文字化けを防げます。 ( 携帯など一部モバイルデバイスでは、 エンコードが日本語 Shift_JIS でないと 正しく表示されないかもしれません。 )

16 HTML ならではの特殊な書式設定５  その他、 [ テーブル ] で表を作成したり、 [ リンク ] で文字列をクリックしたとき 他のページにつなげたりできる。 詳細は次週以降に説明します。

17 画像を利用する

18 画像を表示する  HTML には画像を表示することができます。  画像は別ファイルとして作成し、あらかじめ用意してお く必要がある。  画像は、 JPG GIF PNG 形式のものが一般的に使用できる。 ( 多くのブラウザが対応している形式です。 )  画像を用意する方法は問われない。  ペイントや他の画像編集ツール、携帯デジカメの写真、スキャ ン画像などから画像を用意してください。

19 画像を扱う上での注意点  画像の形式 JPEG GIF PNG 形式のいずれか。  名前をつけて保存する時などに形式を指定できることが多い。  ファイル名は半角英数のみ  ファイル名は半角英数のみ使用可能。  menu.gif neko_3.jpg touroku.png など。  ファイルは HTML ファイルからアクセスできる位置 に置く。  HTML ファイルと同じ場所に保存しておくのが無難。  大きすぎる画像はページを見にくくする。  高性能カメラで撮った写真はそのままでは大きすぎる。 そのときは縮小処理が必要。  著作権、肖像権に注意！  著作物をウェブに勝手に掲載しない。 本人の許可無く写真を公開しない。

20 画像を表示するための手順１  好きなイラストを描いて、 ページに挿入してみましょう。  ペイントなどで画像を用意する。  [ スタート ] → [ 全てのプログラム ] → [ アクセサリ ] → [ ペイント ]  描き終わったら名前をつけて保存。  JPEG 形式などで保存。  ファイル名は半角英数文字に。  保存場所は HTML ファイルと同じ場所にする。 比較的小さめのサイズでちょうど。

21 画像を表示するための手順２  Kompozer で画像を読み込む。  Kompozer の通常画面で 画像を入れたい位置をクリックし、 [ 挿入 ] メニュー → [ 画 像 ] [ 代替テキスト ] 欄にメッセージを書いておくと、マウスを画像にかざしたときに、 入力したテキストが表示されます。 また、何らかの理由で画像が表示できないときに、画像の変わりに 入力したテキストが表示されます。 次週に続 く