2020年 6月 29日の授業内容 戻る
きょうの授業は、はじめて Webページを作成する学生が多数なので、以下のように進めます。 1.こちらで準備したひな形を取得する。(ファイルの保存) 2.各自の内容に変更する。(テキストエディター) 3.アップロードする。(ftp) 4.Webブラウザで確認する。(GooGleChrome) 以上の作業によって、Webページを作成するための基本的な一連の流れを把握していただきます。 |
自宅で作業をしている人は、以下の2つのフリーソフトを先にインストールしてください。
◆WinSCP をインストールする ← ftp ソフト(ファイルの送受信)
◆TeraPad をインストールする ← テキストエディター(メモ帳に近い)
●クライアントPCは、皆さんが利用しているパソコンのことです。 (1).HTML ( HyperText Markup Language ) 文書の作成や編集を行います。 (2).FTP ( File Transfer Protocol ) によって Webサーバに HTML文書を転送します。 (3).Webブラウザによって転送した HTML文書の表示具合をチェックします。 ※ 上の(1)の作業については、テキストエディタの「TraPad」を利用して
・JustSystems ホームページ・ビルダー21 ●Webサーバは、常時動いているコンピュータです。 (1).クライアントPCから送られてきたファイル (HTML文書や画像) を保存しています。 (2).Webブラウザから閲覧要求があれば配信します。 (3).常時インターネットに接続しています。 |
(1). 本日の練習用サンプルページは以下のようなページです。 (下の画像にリンクしています!)
(2). サンプルページを保存するために、
ここか上のサンプル画像上にマウスポインタ
を合わせ、
クリックして開き、開いたウィンドウ内で、
① 「右クリック」する。
② 「ページのソースを表示」を選択する。
(3). サンプルページのソースが新しいタブで開いたら、キーボードで
"Ctrl + a"ですべて選択状態にし、
"Ctrl + c"でコピーする。
(4). テキストエディタ "TeraPad"を起動し、"Ctrl + v"でペーストする。
(5). HTML文書を デスクトップ に保存する。 (ファイル名:index.html)
①. "TeraPad" のメニュー「ファイル」を選択する。
②. メニュー内の「名前を付けて保存(A)」を選択する。
③. 左上の保存する場所の下で「デスクトップ」を選択する。
④. ファイル名 を "index.html" と入力する。
このとき、ファイルの種類が 「ユーザー(*.txt,*.htm,*.html,*.cgi,*.pl)」になっているか確認する。
⑤. 以上の準備ができたら右下の「保存」ボタンをクリックする。
(6). html文書が認識されて以下のように表示が替わる。
(7). TeraPad の表示設定
◆ウインドウ設定
①. メニューの「表示」を選択し、「オプション」を選択する。
②. 「ウインドウ」タブを選択する。
③. 「状態」の右側の「デフォルト」のところをクリックする。
④. 「ユーザ指定」を選択する。
◆表示設定
⑤. 「表示」タブを選択する。
⑥. 「マーク」のところを全てチェックする。
⑦. 「OK」ボタンをクリックして設定を終了する。
(8). このページを参考にして、各自の内容に変更する。
(9). 「ファイル」 → 「上書き保存(S)」 を実行し、 デスクトップ上の index.html を上書き保存する。
■Webページ作成用サーバへのユーザ登録は、同一パスワードで設定しているので、
パスワードの変更方法 のページを
参考にし、演習室パソコンへのサインイン時の
パスワードに変更する。
(1). これからよく使う「WinSCP」アイコンをデスクトップ上にコピーする。(インストールした人は既にあります。)
①. 「スタート」ボタンをクリックする。
②. 「スタートメニュー」内の「WinSCP」アイコンをデスクトップ内にドラッグしてコピーしておく。
(2). 「WinSCP」を起動する。
新しいサイトの設定をするために「新規ホスト」を選択する。
「ホストの設定名」 と
「ホスト名」 と
「ユーザ名」 を以下のように設定し、
「OK」ボタンをクリックする。
①. ホスト名: tai.edd.osaka-sandai.ac.jp
②. ユーザ名: f20m???(20m以外の学生は"s半角学番")
③. 下の「保存(S)」ボタンを選択して設定を終わる。
※. パスワード: 安全のためにここでは設定しない。(接続するたびに入力する)
(3). セションの保存
①. 確認するだけでよい。
②. OKボタンを選択して終わる。
(4). 「接続」するために「ログイン」ボタンを選択する。
(5). 「パスワード」を入力し、「OK」ボタンをクリックする。
(6). 暗号化に関するダイアログが出てきたら、「はい」ボタンをクリックする。
(7). 接続できたら、① パソコン側(左側)で をクリックし、②「デスクトップ」を選択する。
① サーバー側(右側)で「public_html」を「ダブルクリック」する。
(8). ファイル("index.html")のアップロードは、以下の方法で行う。
① アップロードしたいファイルの場所(デスクトップ)を選択し、「アップロード」する。
★ クライアント側(左側)のファイル"index.html"をサーバ側にドラッグ&ドロップする。
(9). 以下のように「サーバ上」にファイルが表示されると、アップロードはOKです。
(11). こんな時は再接続してください!
1). ファイルがアップロードできなくなったとき。 2). サーバ側(右側)のファイル名が表示されなくなったとき。 ※ こんなときは、WinSCPを一旦終了し、再度起動して接続してください。 サーバに接続後、一定時間何も操作しなかった場合に発生します。 |