2020年 6月 29日の授業内容     戻る


課題: ホームページの作成 -作成の流れ-

    きょうの授業は、はじめて Webページを作成する学生が多数なので、以下のように進めます。
     1.こちらで準備したひな形を取得する。(ファイルの保存)
     2.各自の内容に変更する。(テキストエディター)
     3.アップロードする。(ftp)
     4.Webブラウザで確認する。(GooGleChrome)

    以上の作業によって、Webページを作成するための基本的な一連の流れを把握していただきます。

    iOS版教材  iOS版教材

    自宅で作業をしている人は、以下の2つのフリーソフトを先にインストールしてください。
    WinSCP をインストールする ← ftp ソフト(ファイルの送受信)
    TeraPad をインストールする ← テキストエディター(メモ帳に近い)

1. Webページを作成する環境

      ●クライアントPCは、皆さんが利用しているパソコンのことです。

        (1).HTML ( HyperText Markup Language ) 文書の作成や編集を行います。

        (2).FTP ( File Transfer Protocol ) によって Webサーバに HTML文書を転送します。

        (3).Webブラウザによって転送した HTML文書の表示具合をチェックします。

        ※ 上の(1)の作業については、テキストエディタの「TraPad」を利用して
          直接 HTML文書を作成しますのでタグの使い方が分からなかったり、
          作業中に Webブラウザで表示したときのイメージが分かりにくい人が
          多いと思います。
          市販されているソフトの中には、ワープロ的な感覚でページを作成
          できるものがあります。代表的なソフトとしては、以下のようなもの
          があります。

          ・Adobe    Dreamweaver CC
          ・JustSystems ホームページ・ビルダー21

      ●Webサーバは、常時動いているコンピュータです。

        (1).クライアントPCから送られてきたファイル (HTML文書や画像) を保存しています。

        (2).Webブラウザから閲覧要求があれば配信します。

        (3).常時インターネットに接続しています。


2. サンプルページを使った HTML文書の作成

    (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 を上書き保存する。


3. Usermin を使ったユーザ・パスワードの変更方法

    ■Webページ作成用サーバへのユーザ登録は、同一パスワードで設定しているので、
    パスワードの変更方法 のページを 参考にし、演習室パソコンへのサインイン時の
    パスワード
    に変更する。


4. ftp を使って 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を一旦終了し、再度起動して接続してください。
       サーバに接続後、一定時間何も操作しなかった場合に発生します。


5. Webブラウザによる各自のページ確認

    WinSCP で"index.html"を転送後、以下のページを開いて自分のページが正確にできているか確認してください。
    全履修学生のページ

    ◆ 参考ページ ◆

      (1). 表示色サンプル

      (2). カウンターフォント


戻る