応用文書処理 6回目
ホームページ作成課題:県立短大に関わることならなんでも
目的:インターネット(特にウェブサイト)に関する仕組みを知り,マナーを学ぶ
授業,ゼミ,学科,専攻,サークル,生協など
HTMLデータ作成(オーサリングソフト)として,Microsoft Expression Web 4 ,ファイル転送(FTPソフト)として,FFFTPを使用する(いずれもフリーソフト)。
今回を含め,4回で完成。
Step0:HTMLの基礎
USBメモリに
- web:ホームページデータ保存用 ← 実際にホームページで公開するデータ(html,画像)を保存
- mat:画像などの元データ用 ← 編集前の素材用。ここの画像をhtm内で指定してはダメ
の2つのフォルダを作成。
- メモ帳(または他のエディタ)に次のテキストをコピー(ドラッグで選んで Ctrl+C → Ctrl+V)
<html>
<head>
<title> あいうえお </title>
</head>
<body>
かきくけこ
</body>
</html>
- webフォルダにファイル名"index.html"で保存
- ブラウザ(IEやFireFox)で開く (ファイルをダブルクリックでもOK)
- 6行目を か<h1>きく</h1>けこ に変更し,上書き保存
- ブラウザで「更新」
以下のタグも試してみる
<a href="リンク先アドレス"> ここをクリック </a>
<img src="画像ファイル名">
重要ポイント1:フォルダ名,ファイル名は英数半角文字を使うこと(全角文字や半角カナはダメ)
重要ポイント2:ホームページで使用するファイル(画像ファイルや別のHTMLファイル)は同じフォルダ内(webフォルダ内)に保存すること
重要ポイント3:サイト内リンク(a タグ),画像ファイル名(img タグ)は相対パスを確認
サーバについて
情報論特講 (5回目) インターネットとネットワーク
https://www.biz-kpc.net/okamura/class/ial/5network.htm
FTPサーバはクライアントとの間でデータの送信(アップロード),受信(ダウンロード)をおこなう。通常はユーザ名,パスワードで認証をおこなう
ウェブサーバはホームページを公開するサーバ。クライアントからのリクエスト(ホームページのアドレス)に従い,データを送信する。
Webサイトの仕組み|国民のためのサイバーセキュリティサイト(総務省):
https://www.soumu.go.jp/main_sosiki/cybersecurity/kokumin/basic/service/02/
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:テキスト(文字)の入力と編集
- 適当に文字入力,編集。
- 表示 → ページ → 分割 でデザイン(ホームページと同じ見た目 = wysiwyg)とコード(タグのついたHTMLデータ)の両方を表示
- どこかのホームページへのリンク(外部リンク)も設定してみる。文字を選択 → ハイパーリンク → アドレス入力
- 保存する(ファイル名はindex.htm)。
Step2:データのアップロード
重要:間違えると他の人のデータを消す可能性もあるので注意。ミスを繰り返した場合は大幅減点。
- 人数が多いので,教員が共有ドライブのデータを一括してアップロードしていく。
- ある程度,編集ができたら,共有ドライブ(Nドライブ)のadp\webフォルダ内の自分の学生証番号フォルダに自分が作成したデータ(自分のwebフォルダ内のhtmlや画像データ)をコピーする
(コピーするデータ,コピー先のフォルダを間違えないように)
- adp\webフォルダ内のindex.htmlをダブルクリックすると一覧ページが出るので,自分の番号のリンクから確認する
- 毎回,授業の最後に教員がまとめてサーバにアップロード。(たまに授業途中にアップロード)
- アップロードされたデータはhttps://adp.2-d.jp/でネット上に公開
宿題:課題に関するデータ(画像含む)を集める。著作権,肖像権に十分注意。