コンピュータ基礎実習(上級) 第二回

コンピュータ基礎実習(上級) 第三回
ウェブページの作成について２
清水淳紀
前回までの内容


ページの簡単な作り方。
ページの編集・アップロード・確認方法について。




ページはメモ帳やKompozer 等で編集できる。
ページを公開するには、必要ファイル群をウェブサーバーに
アップロードする必要がある。
Internet Explorerなどで実際にページを開いて確認する。
URL例
http://www.cc.kyoto-su.ac.jp/~g123456/
ファイルを更新してアップロードしたら、
Internet Explorerを最新の状態に更新[F5キー] すること。
今日はウェブページ上で使えるいくつかの機能を紹介します。
ウェブページ作成の手順
ページの作成
アップロードして公開
結果の確認
メモ帳などを利用してウェブページを作成。
HTML形式で記述する。
ファイル名は半角英数で保存。
(例) index.html
public_htmlフォルダにファイルをドラッグする。
アドレス(URL)を入力して動作確認する。
F5キーで最新の情報に更新。
今日の内容


Kompozerを中心としたページ編集を行います。
書式設定と画像の挿入を行ってみます。
Kompozerは、学内の場合
共通アプリケーション内に存在します。
ページの編集
Kompozerを使った編集
ウェブページでできる事

HTMLの主な機能




文字を装飾(書式設定)する
リンクで他のページをつなぐ
画像や映像の掲載位置や大きさを決める
表を作成してレイアウトを決める
その他、箇条書きやフレームなど細かい機能はありますが、
基本的にHTMLでできることは少ない。
KompozerなどHTML編集支援アプリケーションを使うと
簡単に編集できる。
(より高度な表現を行うには、画像で行うか、CSSやJavascriptといった
別の技術を併用する必要がある。)
Kompozerでページを編集する１


KompozerならワープロのようにHTMLを編集できる。
３つの画面を切り替えて編集する



[通常] 画面で主に編集する。
[ソース] 画面ではHTMLの詳細を編集できる。
[プレビュー] 画面でInternet Explorer で表示した様子を確認。
[通常] 画面
[ソース] 画面
[プレビュー] 画面
Kompozerでページを編集する２

[通常] 画面



ワープロ感覚で編集。
文字列を選択して
各種書式設定できる。
ウィンドウ下部の
タブをクリックして
各画面を切り替える。
Kompozerでページを編集する３

[ソース] 画面



通常画面を編集すると
自動的にHTMLが
生成されてゆく。
直接HTMLを修正
することもできる。
微調整や
直接修正したほうが
操作が簡単なときに
この画面を使う。
Kompozerでページを編集する４

[プレビュー] 画面


表示確認用の画面。
ブラウザで表示した結果に
忠実な画面表示。


完成前に一度は確認すること。
(細かな部分が
通常画面と違うかも。)
Kompozer編集の基本

編集はWORDと似た感覚で操作できる。

基本は範囲選択をしてから各種書式設定ボタンを押す。
1)
文字を入力して、選択する。
2)
例えば、箇条書きボタンを押すと、
3)
選択した文字列が箇条書きになる。
HTMLならではの特殊な書式設定１

[見出し]


文字列を見出し設定にすると、大きなサイズで題字となる。
見出し１～６があり、数字が小さいほどサイズが大きい。
見出し２の例
見出し１の例
(“HTMLの例” と言う文字列部分)
見出し３の例
•見出しに選択した範囲は1つの段落として独立し、上下で自動的に改行されます。
•見出しのサイズは厳密な規定が無く、ブラウザによって微妙に異なります。
•見出し４以上は通常の文字より小さくなるかもしれません。
HTMLならではの特殊な書式設定２

[水平線]

水平線を挿入すると、ウィンドウの右端から左端まで
仕切りとなる直線が挿入される。
これが水平線
•[挿入] メニュー → [水平線] で作成できます。
•初期設定では画面の左端から右端までを仕切ります。
•ウィンドウの大きさを拡大縮小すると、それにあわせて伸び縮みします。
•水平線上で [右クリック] → [水平線のプロパティ] を選択すると
線の長さや太さ、位置を変えられます。 (右クリックする位置はシビアです。)
HTMLならではの特殊な書式設定３

[ページの配色と背景]



HTMLでは、ページ全体の色を決められる。
文字やリンクや背景の色を決められる。
背景には画像を置くこともできる。
設定例
•[書式] メニュー → [ページの配色と背景] で設定できます。
•文字等はさらに個別に色を設定することもできます。
HTMLならではの特殊な書式設定４

[ページ設定]


HTMLの決まりとして、ページにはタイトルをつける。
その他ページ内容の説明なども書ける。
•[書式] メニュー → [ページのタイトルとプロパティ]
で編集できます。
•[タイトル]は、あなたのページをお気に入りに登録
する際の、初期登録名になります。
•[内容の説明]は、あなたのページが検索エンジン
(Yahooなど)に登録されたとき、内容紹介として表
示されます。
•[文字エンコード] を適切に設定すると
日本語文字の文字化けを防げます。
(携帯など一部モバイルデバイスでは、
エンコードが日本語Shift_JIS でないと
正しく表示されないかもしれません。)
HTMLならではの特殊な書式設定５

その他、[テーブル] で表を作成したり、
[リンク]で文字列をクリックしたとき
他のページにつなげたりできる。
詳細は次週以降に説明します。
画像を利用する
画像を表示する

HTMLには画像を表示することができます。



画像は別ファイルとして作成し、あらかじめ用意しておく必要
がある。
画像は、JPG GIF PNG 形式のものが一般的に使用できる。
(多くのブラウザが対応している形式です。)
画像を用意する方法は問われない。

ペイントや他の画像編集ツール、携帯デジカメの写真、スキャン画像
などから画像を用意してください。
画像を扱う上での注意点

画像の形式 JPEG GIF PNG形式のいずれか。


ファイル名は半角英数のみ使用可能。


HTMLファイルと同じ場所に保存しておくのが無難。
大きすぎる画像はページを見にくくする。


menu.gif neko_3.jpg touroku.png など。
ファイルはHTMLファイルからアクセスできる位置に置く。


名前をつけて保存する時などに形式を指定できることが多い。
高性能カメラで撮った写真はそのままでは大きすぎる。
そのときは縮小処理が必要。
著作権、肖像権に注意！

著作物をウェブに勝手に掲載しない。
本人の許可無く写真を公開しない。
画像を表示するための手順１

好きなイラストを描いて、
ページに挿入してみましょう。

ペイントなどで画像を用意する。


[スタート]→[全てのプログラム]
→[アクセサリ]→[ペイント]
比較的小さめのサイズでちょうど。
描き終わったら名前をつけて保存。



JPEG形式などで保存。
ファイル名は半角英数文字に。
保存場所はHTMLファイルと同じ場所にする。
画像を表示するための手順２

Kompozerで画像を読み込む。

Kompozerの通常画面で
画像を入れたい位置をクリックし、[挿入]メニュー → [画像]
[代替テキスト] 欄にメッセージを書いておくと、マウスを画像にかざしたときに、
入力したテキストが表示されます。
また、何らかの理由で画像が表示できないときに、画像の変わりに
入力したテキストが表示されます。
次週に続く

Download Report