Microsoft Word - homepage

Size: px

Start display at page:

Download "Microsoft Word - homepage"

なおまきい
5 years ago
Views:

1 web ページ 1. web ページ ( ホームページ ) の公開インターネットには無数の web サイトが公開されています. 複数の web ページのまとまりのことを web サイトと言います.web ページは,web ブラウザを使って閲覧できます. 代表的な web ブラウザ ( 以下ブラウザと略 ) は, マイクロソフトの IE(Internet Explorer) や Edge があります. その他に,Firefox,Opera,Google Chrome 等があります. 皆さんは, 目的や好みでブラウザを選ぶことができます. web ページを公開するためには, その内容を web サーバに登録する必要があります.web サーバはプロバイダ等が提供するものや, フリーで利用できるものがあります. 最近は CMS(Content Management System) を利用して, 後述する HTML 言語の知識が無くても, 手軽に web ページやブログを公開できるものもあります. 代表的なものとして,Wix( ウィックス ) や Jimdo( ジンドゥー ) 等があります. コンピュータリテラシーの授業では, 総合メディアセンターが提供する学内限定の web サーバを利用します. その原理や仕組みを十分に理解した上で, 各自の目的に応じた web サーバを選んで活用してください. ( 注意 ) インターネットによる情報公開の威力は絶大です.2016 年 4 月に発生した熊本地震では, ライオンが逃げ出したなどのデマが社会問題になりました. 噓やデマを公開することはもっての他です. 著作権の侵害や他人の誹謗中傷にならないよう十分注意し, 有益な情報を公開するように心掛けてください. 2. web ページの記述 (1) HTML 言語 web ページは,HTML(Hyper Text Markup Language) 言語を使って記述します. 以下の説明では,HTML 言語を HTML と記載します. 図 1は, 電大太郎の web ページです. が一行だけが表示される web ページです. これは, ブラウザのタブにも表示されています. 図 1 web ページの例 1

2 (2) HTML で記述した web ページ図 1は, わずか一行の web ページですが,HTML で記述すると図 2のようになります. 内容は文字列の記述, すなわちテキストファイルになっており, メモ帳などを使って入力することができます. HTML で記述された web ページの構造を見てみましょう.web ページは, タグと呼ばれるテキストを埋め込むことによって記述します. 冒頭にある <!DOCTYPE 途中略 > は, 文書型宣言になります.XHTML 1.0 の型式で web ページを記述することを示すものです. 詳しい説明は省略します. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta content="text/html; charset=shift_jis" http-equiv="content-type" /> <title> 電大太郎の web ページです </title> </head> <body> 電大太郎の web ページです. </body> </html> 図 2 HTML の例 <html> は,web ページの始まりを示すタグです. 終わりは </html> になります. このように, タグの終わりには / ( スラッシュ ) が付きます. これらの間に web ページの内容を記述する構造になっています. なお, 説明の都合でタグに色を付けていますが,HTML とは無関係です. <head> は, ヘッダを示すタグです. 終わりは </head> になります. このタグの中に,<meta> タグと <title> タグが入れ子 ( タグの中にタグが存在する構造 ) になっています. <meta> は, 単独で使うタグです.web ページが記述されている漢字コード等を指定します. <title> は, タイトルを示すタグです. 終わりは </title> になります. これらのタグの間に記述された文字列は,web ブラウザで表示した時に, ウインドウのタブに表示されます. 図 2 の例では電大太郎の web ページですがタブに表示されます. <body> が,web ページの本文を示すタグです. 終わりは </body> になります. これらのタグの間に記述された文字列は,web ページの本文になります. は, 段落を示すタグです. と で囲まれた部分が, 段落になります. 以上,web ページの構造を図 2に記述された HTLM で説明しましたが, 電大太郎の web ページです. を表示するだけで, これだけ多くの記述を行わなければなりません. 初学者にとって決して分かり易いとは言えないばかりか, タイプミスを誘発することにもなりかねません. 2

3 3. web ページ公開までの流れ (1) web ページの記述 web ページを記述する方法は, 大きく二つあります. 一つは, メモ帳などのテキストエディタを使ってタグを入力する方法です. この方法は最もシンプルですが, タグに関する知識が必要です. もう一つは,web ページを記述するための専用のエディタを使う方法です. この方法は, タグに関する知識が十分でなくても, ワープロ感覚で記述できます. コンピュータリテラシーの授業では, 専用のエディタを使う方法で進めます. 具体的なソフトウェアは,Microsoft Expression Web 4 を使います. このソフトウェアは,2012 年 12 月 21 日 ( 日本時間 ) から, フリーソフトになった製品です. ワープロ感覚で web ページを作成でき, 生成された HTML のコードを逐次見ることができます.HTML の知識がある人は,HTML のコードを直接記述することもできます. したがって,Microsoft Expression Web 4 は,HTML の知識が豊富な方も, そうでない方も, 両方, 満足して利用できます. (2) web サーバへの登録総合メディアセンターの web サーバへ登録するまでの流れを, 図 3に示します. 1Microsoft Expression Web 4 を使って, 各自の web ページをパソコン上に作成します. 2web サーバへ登録フォルダ public_html を転送パソコン教育システムの web サーバ web.term.usmc.dendai.ac.jp 1 web ページの作成 Microsoft Expression Web 4 を使って各の web ページを作成フォルダ名 public_html ファイル名 index.html パソコンパソコンパソコン 3ブラウザによる閲覧 web ページをブラウザで閲覧可能図 3 web ページ公開までの流れ 3

2パソコン上で作成した web ページは,web サーバへ転送します.Microsoft Expression Web 4 では, 後述するパブリッシュの機能を使います.

4 総合メディアセンターの web サーバは, フォルダ public_html の内容が公開される仕様になっています. さらにトップページ ( 最初に表示されるページ ) は, ファイル名 index.html で保存する仕様になっています.2パソコン上で作成した web ページは,web サーバへ転送します.Microsoft Expression Web 4 では, 後述するパブリッシュの機能を使います. 3web サーバへの転送が完了すると, ブラウザで web ページを閲覧できるようになります. 4. パソコン側のフォルダの作成 (1) スタートを右クリックし, エクスプローラをクリックします. (2) H ドライブを右クリックし新規作成フォルダの順にクリックします. 4

5 (3) ここではフォルダの名前は, MyWebSites にしておきます. (4) さらに MyWebSites を右クリックし新規作成フォルダの順にクリックします. 5

6 (5) フォルダの名前は, public_html です. キーボードの入力モードを半角英数に切り換えた後, 入力してください. スペルミスに十分注意してください. 5. Microsoft Expression Web 4 の起動と漢字コードの設定それでは,Microsoft Expression Web 4 を起動してみましょう. 最初に,web サーバの漢字コードに, 設定を合わせる必要があります.Microsoft Expression Web 4 をまだインストールしていな人は, 速やかに行ってください. (1) スタートをクリックし, Microsoft Expression Microsoft Expression Web4 の順にクリックします. 6

7 (2) デザインタブが押された状態で起動が完了します. (3) 分割タブをクリックすると, 上段に HTML のコードが, 下段にデザインが表示されます. 7

8 (4) コードタブをクリックすると,HTML のコードが表示されます. (5) 漢字コードの変更 Microsoft Expression Web 4 の漢字コードは, デフォルトでユニコード (UTF-8) に設定されています. 総合メディアセンターの web サーバは,Shift-JIS で公開しているため, このまま web サーバに登録すると,web ページが文字化けします. 漢字コードを Shift-JIS に変更します. ファイルプロパティの順にクリックします. 8

9 (6) 言語タブをクリックし, 日本語 ( シフト JIS) をクリックします. (7) OK をクリックします. 9

10 (8) shift-jis に変わります. この設定は, 新規作成毎に行ってください. 6. web ページの作成それでは,web ページを作成してみましょう. 図 1に示した, 電大太郎の web ページです. を表示する, 一行だけの web ページを作成する手順を示します. (1) デザインタブをクリックします. 10

11 (2) 電大太郎の web ページです. の文字を入力します. ワープロ感覚で文字を入力できます. 電大太郎の部分は, みなさんの名前にすると良いでしょう. (3) 分割タブをクリックすると, 上段に入力した文字が HTML のコードとして記述されていることが分かります. デザインウインドウでは,HTML のタグの機能を意識することなく, 入力できます. 11

12 (4) さっそく, 保存します. ファイル名前を付けて保存の順にクリックします. (5) H ドライブを選択し, MyWebSites をダブルクリックします. 12

13 (6) H ドライブを選択し, public_html をダブルクリックします. (7) ファイル名を index にし, 保存をクリックします. 13

14 (8) 以上の操作で,web ページの保存が完了します. 7. サイトの設定 (H ドライブ ) 情報端末で作成した web サイトを設定します. この設定は一度行えば, 毎回行う必要はありません. (1) サイト新規サイトの順にクリックします. 14

15 (2) 参照をクリックします. (3) H ドライブを選択し, MyWebSites 選択し開くをクリックします. 15

16 (4) OK をクリックします. 8. サイトの設定 (web サーバ ) 総合メディアセンターの web サーバに接続するための設定を行います. この設定は一度行えば, 毎回行う必要はありません. (1) ウインドウタブをクリックし, public_html/index.html の順にクリックします. 16

17 (2) サイトパブリッシュの設定の順にクリックします. (3) パブリッシュタブをクリックし, 追加をクリックします. 17

18 (4) 接続の設定名前は web.term.usmc.dendai.ac.jp, 場所は ftp://web.term.usmc.dendai.ac.jp, ユーザ名は学籍番号にします. 例では 99xx999 になっています. パスワードの欄は, 必要に応じて入力してください. 慣れるまでは, パスワードの欄を空欄にしておくと良いでしょう. 誤りがないことを確認し, 追加をクリックします. (5) パブリッシュ先の一覧に追加されます. OK をクリックします. 18

19 9. サイトの公開 (web サーバへ転送 ) (1) サイトパブリッシュの順にクリックします. (2) 作業中のパブリッシュ先に接続するをクリックします. 19

20 (3) web サーバへのログイン総合メディアセンターの共通パスワードを入力します. パスワードを記憶するは, 慣れるまではチェックを外しておいた方が良いでしょう. 最後に OK をクリックします. (4) 左側がパソコン側に, 右側が web サーバになります. 左側の public_html をクリックした後, をクリックします. パソコン側 web サーバ側 20

21 (5) 右側に public_html が表示され, 転送が完了します. 10. web ページの閲覧 (1) IE による閲覧 IE を移動し,URL の欄にと入力します. なお,99xx999 の部分は, みなさんの学籍番号に置き換えてください. 以下のように web ページが表示されます. 学籍番号の部分を変更すると, 他の方の web ページを閲覧できることを確認してください. ( 注意 ) 前述した通り, 総合メディアセンターの web サーバは学内限定の閲覧になります. 学外から閲覧する場合は, 事前に VPN 接続を完了しておく必要があります. 21

22 (2) 閲覧内容が文字化けする場合以下のように, 閲覧内容が文字化けする場合は, 漢字コードの設定が誤っている可能性があります. 再度,5.(5) を確認してください. 11. ハイパーリンクの設定 (1) サイトのウインドウが表示されている場合は, ウインドウタブをクリックし, public_html/index.html をクリックします. (2) ハイパーリンクを設定してみましょう. 新しく段落を作るために, 最初に入力した文字列の下の部分をクリックします. 22

23 (3) 新しい段落に東京電機大学へのハイパーリンクの例です. を入力します. 行の最初の上部に小さく p が表示されているのは, 段落 (Paragraph) を示しています. (4) 東京電機大学の文字列をマウスでドラッグし, 選択します.Shift キーを押しながらカーソル移動キーを使って選択することもできます. (5) 挿入ハイパーリンクの順にクリックします. 23

(6) アドレスの欄に http://www.dendai.ac.jp/ を入力し, OK をクリックします. (7) 東京電機大学の文字列が青くなり, 下線が付きます.

24 (6) アドレスの欄にを入力し, OK をクリックします. (7) 東京電機大学の文字列が青くなり, 下線が付きます. マウスカーソルを東京電機大学の文字列の上に移動すると, ハイパーリンク先へ移動するにはが表示されます. 12. 画像の挿入 (1) 画像は, あらかじめ,public_html に入れておく必要があります. ここでは IE を使って東京電機大学の web ページを表示し, 画像を利用することにします. 画像を右クリックし, 名前を付けて画像を保存をクリックします. 24

25 (2) H ドライブをクリックし, MyWebSites をダブルクリックします. (3) public_html をダブルクリックします. (4) 保存をクリックします. s 25

26 (5) 下の部分をクリックし, 必要に応じて Enter キーを押します. web ページで表示可能な画像は,jpg( ジェイペグ ),gif( ジフ ),png( ピング ) 形式になります. (6) 挿入画像ファイルからの順にクリックします. (7) public_html をダブルクリックします. 26

27 (8) 画像ファイルをクリックし, 挿入をクリックします. (9) OK をクリックします. 27

28 (10) 画像が組み込まれます. 分割をクリックすると,HTML のコードを確認することができます.web ページの内容を追加する毎に, どのコードが追加されたのかを確認すると良いでしょう. (11) 画像の大きさの変更は, 画像を右クリックし. 画像のプロパティをクリックします. 28

29 (12) 概観タブをクリックし, サイズを変更し OK をクリックします. 13. 表の挿入 (1) 下の部分をクリックし, 必要に応じて Enter キーを押します. 29

30 (2) テーブルテーブルの挿入の順にクリックします. (3) 行と列のサイズを入力し, OK をクリックします. 例では,2 行,2 列です. 30

31 (4) 2 行 2 列の表が表示されます. デフォルトでは, 枠線のサイズが 0 になっていますので, ブラウザで閲覧した時には, 罫線は見えません. 表のセルの中には, これまで説明してきたように, 文字や画像などを入れることができます. (5) 1 行目のセルに花のページ山のページを入れました. 次の複数の web ページで活用したいと思います. (6) web ページの内容を充実し, 完成を高めていきます. ここでは紹介していない機能がたくさんあります. 試行錯誤を繰り返しながら, 生成される HTML のコードとの関係を理解してください. 31

32 14. その他 (1) 水平線の表示水平線は, 挿入タブをクリックし, HTML 水平線の順にクリックすると表示できます. 水平線が表示されます. 組み込まれた,HTML のコードも確認しておきましょう. 32

33 (2) 背景の色の変更背景の色は, 書式設定タブをクリックし, 背景をクリックすると変更できます. 背景の自動をクリックします. 背景の色をクリックします. その他の色をクリックすると, 細かく色を選べます. 33

34 (3) 文字の大きさの変更文字の大きさは, 文字列を選択した後, 書式設定タブをクリックし, フォントをクリックします. サイズを選びます. 34

35 (4) 箇条書き, 中央揃え等箇条書きや中央揃え等は, 下記で設定できます. (5) 連絡先の表示 web ページの作成者へ問い合わせを行えるようにしておく必要があります. 一般的には, メールアドレスを記述します. メールアドレスを入力し,Enter キーを押すと自動的にメールアドレスにリンクが貼られます. パブリッシュを行い,IE で表示すると以下のようになります. 35

36 36

37 15. 複数の web ページの作成 web サイトは, 通常, 複数の web ページから構成されます. 一般的に, 複数の web ページを作成するためには,web ページ毎にフォルダを用意し, その中にページ毎で必要になる画像などのファイルを入れます. ここでは例として, 花のページ山のページをクリックすると, 各ページが表示される例を取り上げます. なお, 花や山の画像は省略し, 文字のみが表示される web ページにします. 仕組みと原理を理解してください. (1) web ページ毎にフォルダを作成ここでは, 花の web ページと山の web ページを作るために,4. で説明した方法で, public_html の配下に flower と mountain のフォルダを作ります. 37

38 (2) 花の web ページを作ります. ファイル新規ページをクリックします. (3) 標準 HTML OK をクリックします. 38

39 (4) 6. で説明した方法で, 花の web ページです. を入力し, ファイル名前を付けて保存をクリックします. 漢字コードは Shift-JIS にしておいて下さい. (5) public_html の中の flower フォルダに保存します. ファイル名は flower を入力し, 保存をクリックします. ファイル名は index など, 他の名前にもできます. 39

40 (6) 同様に, 新規作成を行い, 山の web ページです. を入力し, ファイル名前を付けて保存をクリックします. 漢字コードは Shift-JIS にしておいて下さい. (7) public_html の中の mountain フォルダに保存します. ファイル名 mountain を入力し, 保存をクリックします. ファイル名は index など, 他の名前にもできます. 40

41 16. 複数の web ページへのハイパーリンクの設定 (1) 先ほど作成した index を閉じた場合は, ファイル開くの順にクリックし, index を開きます. (2) ハイパーリンクを設定する文字列を選択します. 分割をクリックし, 花のページの文字列を選択します. この時,HTML のコードのウインドウの中で, 花のページの文字列だけが選択されていることを確認してください. 操作を誤ると, 花のページの文字列以外も選択してしまう可能性があります. 41

42 (3) ハイパーリンクを設定します. (4) public_html をダブルクリックします. (5) flower をダブルクリックします. 42

43 (6) flower.html をクリックし, OK をクリックします. (7) ハイパーリンクが設定された文字列が青くなり, 下線が表示されます. 43

44 (8) 同様に, 山のページの文字列を選択します. この時,HTML のコードのウインドウの中で, 山のページの文字列だけが選択されていることを確認してください. 操作を誤ると, 山のページの文字列以外も選択してしまう可能性があります. (9) ハイパーリンクを設定します. 44

45 (10) 先ほどとは異なる方法ですが, をクリックし, フォルダの一覧から public_html をクリックします. (11) mountain をダブルクリックします. (12) mountain.html をクリックし, OK をクリックします. 45

46 (13) index.html を保存します. ファイル保存の順にクリックします. 17. 複数ページのサイトの公開 (web サーバへ転送 ) (1) サイトパブリッシュの順にクリックし,web サイトを公開します. 46

47 (2) 作業中のパブリッシュ先に接続するをクリックします. (3) web サイトを公開します. 左右のウインドウに public_html が表示されていることを確認します. 左側の public_html をクリックした後, をクリックします. 47

48 (4) はいをクリックします. (5) IE で表示してみましょう. 花のページをクリックします. (6) 戻るをクリックします. 48

49 (7) 山のページをクリックします. (8) 戻るをクリックします. (9) flower や mountain フォルダの中に, 文字, 表, 画像等を追加し各ページの内容を仕上げることによって,web サイトを完成していきます. 18. その他の注意事項 (1) ファイル名について総合メディアセンターの web サーバは,UNIX と言う OS で動いています.Windows とはファイル名の命名規則が異なります. 全角文字のファイル名は使えません. スペースを含むファイル名は使えません. 半角文字は大文字と小文字が区別されます. Microsoft Expression Web 4 で作っている時には表示されていた画像が,web サーバへ登録すると表示されなくなることが起こりますので, 注意してください. 49

50 (2) 必要なファイルについて web ページに必要なファイルは,public_html の配下に, すべて入れておく必要があります. ピクチャフォルダなどに入れた画像にリンクを貼ると,web サーバへ登録しても表示されません. 必要な画像ファイルなどは,public_html 配下にコピーして入れて下さい. (3) 複数の web ページについて複数の web ページを作る場合は, 花の web ページや山の web ページで説明したように, public_html 配下に, ページ毎のフォルダを作成し完成してください. 50

Microsoft Word - no11

Microsoft Word - no11 web ページ 1. web ページ ( ホームページ ) の公開インターネットには無数の web サイトが公開されています. 複数の web ページのまとまりのことを web サイトと言います.web ページは,web ブラウザを使って閲覧できます. 代表的な web ブラウザ ( 以下ブラウザと略 ) は, マイクロソフトの IE(Internet Explorer) や Edge があります.