応用文書処理 6回目

ホームページ作成課題:県立短大に関わることならなんでも

目的:インターネット(特にウェブサイト)に関する仕組みを知り,マナーを学ぶ

授業,ゼミ,学科,専攻,サークル,生協など

HTMLデータ作成(オーサリングソフト)として,Microsoft Expression Web 4 ,ファイル転送(FTPソフト)として,FFFTPを使用する(いずれもフリーソフト)。

今回を含め,4回で完成。

Step0:HTMLの基礎

USBメモリに

の2つのフォルダを作成。

  1. メモ帳(または他のエディタ)に次のテキストをコピー(ドラッグで選んで Ctrl+C → Ctrl+V)

<html>
<head>
<title> あいうえお </title>
</head>
<body>
かきくけこ
</body>
</html>

  1. webフォルダにファイル名"index.html"で保存
  2. ブラウザ(IEやFireFox)で開く (ファイルをダブルクリックでもOK)
  3. 6行目を <h1>きく</h1>けこ に変更し,上書き保存
  4. ブラウザで「更新」

    以下のタグも試してみる

    <a href="リンク先アドレス"> ここをクリック </a>

    <img src="画像ファイル名">

重要ポイント1:フォルダ名,ファイル名は英数半角文字を使うこと(全角文字や半角カナはダメ)

重要ポイント2:ホームページで使用するファイル(画像ファイルや別のHTMLファイル)は同じフォルダ内(webフォルダ内)に保存すること

重要ポイント3:サイト内リンク(a タグ),画像ファイル名(img タグ)は相対パスを確認

サーバについて

情報論特講 (5回目) インターネットとネットワーク
https://www.biz-kpc.net/okamura/class/ial/5network.htm

FTPサーバはクライアントとの間でデータの送信(アップロード),受信(ダウンロード)をおこなう。通常はユーザ名,パスワードで認証をおこなう

ウェブサーバはホームページを公開するサーバ。クライアントからのリクエスト(ホームページのアドレス)に従い,データを送信する。

基礎知識 ホームページの仕組み(総務省):
https://www.soumu.go.jp/main_sosiki/cybersecurity/kokumin/basic/basic_service_03.html

FFFTPについて

比較的簡単なファイル転送ソフト。フリーなので,自宅のPCなどにも導入可能。

設定の詳細は配布する別紙を参照

Microsoft Expression Web 4について

比較的高機能なHTML作成ソフト。残念ながら2020年にサポート終了。

ウェブ作成ソフト Microsoft Expression Web が無料化 [ホームページ作成] All About:
http://allabout.co.jp/gm/gc/406307/
(↑インストールについては,ここの2ページ目を参照)

今回はCSSやHTML5などは使用せず,画像挿入(img),リンク(a),テーブル(table)といった基本機能を使う。

Step1:テキスト(文字)の入力と編集

  1. 適当に文字入力,編集。
  2. 表示 → ページ → 分割 でデザイン(ホームページと同じ見た目 = wysiwyg)とコード(タグのついたHTMLデータ)の両方を表示
  3. どこかのホームページへのリンク(外部リンク)も設定してみる。文字を選択 → ハイパーリンク → アドレス入力
  4. 保存する(ファイル名はindex.htm)。

Step2:FTPのテスト

  1. FFFTP を起動,サーバに接続 → 左側が自分のパソコン,右側がサーバ
  2. サーバに転送したいファイルを選び,アップロードのボタン(上矢印)。転送が終わったら切断
  3. http://202.231.54.198/****** にアクセスして,インターネットに公開されていることを確認。
[編集] → [保存] → [アップロード] → [ブラウザで確認] を繰り返していく

宿題:課題に関するデータ(画像含む)を集める。著作権,肖像権に十分注意。