もどる

Webページの作成（２）

確認

計算機室は飲食禁止です．

目標

簡単なWebページを作成する.

具体的な実習内容

• Webページ公開
• 手引きの７章の内容

作成手順（の続き）

1. はじめに，手順10のURLへアクセスし，何らかのエラーメッセージが表示されるか確認する．
   • インタネットエクスプローラのアドレスバーは右端をドラッグすることでバー幅を調整できます．
2. Webサーバの利用申請

   通常，ファイルはインターネットから閲覧できない位置に保存されている．そこで，インターネットで公開するためには，ファイルをWebサーバにアップロードする必要がある．本学のWebサーバは以下の手続きで利用できる．

   • 全学計算機システムホームページの左帯の「各種設定・確認」->「Webページ・CGIの公開」をクリック
   • 「コンテンツの公開申請」
   • アカウントとパスワードの入力
   • ガイドラインをよく読む（時間をとりますので，必ず読んで下さい．）
   • 「ガイドラインに従う」をクリック（以下，同様に何度か確認OKでクリック）
3. 作業用のフォルダを作成
4. サンプルページ（とサンプル画像）の閲覧
5. サクラエディタを使って html ファイルを作成/編集する．
6. Webページ作成ツール Dreamweaverを使う．
7. CSSファイルで見た目を変更する．

8. Webページの公開について
   • 「Documents/lesson4」下に保存されたhtmlファイルは，インターネットから閲覧できない位置にある．
   • これをWebサーバにコピーする必要がある．この操作を一般にアップロードと呼ぶ．
   • 本日はもっとも単純なドラッグ＆ドロップによる方法を使って，アップロード操作をおこないます．

   

9. アップロード
   • 以下では，先週ダウンロードした sample1.html をアップロードする対象ファイルとして説明します．
   • 「Documents/lesson4」フォルダに sample1.html があることを確認する．（もし無い場合はダウンロードする．）
   • 次に，別のエクスプローラーのウィンドウで「コンピュータ（W:）/www/」フォルダを開く．
   • そこに「local_only」フォルダがない場合は作成し，「local_only」フォルダを開く．
   • 「lesson4」から「local_only」へ sample1.html をコピー（ドラッグ＆ドロップ）する．
   • sample1.html 内で使っている画像ファイルやCSSファイルがあれば，それらのファイルも一緒にコピーする．
   • 以上．
10. 公開した Webページを閲覧する．
    • 以下のURLから閲覧できるようになる．
      • http://www.u.tsukuba.ac.jp/~s0000000/local_only/sample1.html
    • なお，「local_only」フォルダへコピーしたファイルを直接ダブルクリックで開いても同じように画面に表示されるが，これはインターネット経由での閲覧ではない（アドレスバーの値が異なっていることに注意）
      • W:/www/local_only/sample1.html
11. 参考：「local_only」フォルダについて（ここの説明図がわかりやすい）
    • 「local_only」フォルダに置いたファイルは，学内でのWebページ作成＆公開が練習できるように，学内限定公開になります（正確には全学計算機システムからのみアクセス可能）．
    • 公開制限をなくしたい場合（つまり世界中に一般公開したい場合）は，
    • 「コンピュータ（W:）/www/」フォルダに公開したいファイルをおきます．
    • ここに置いたファイルは以下のURLから閲覧可能です．
      • http://www.u.tsukuba.ac.jp/~s0000000/filename.html
    • 「local_only」は，筑波大学の独自サービス（独自環境）です．一般的な限定公開の設定方法は，手引き「7.8.2 アクセス制限をおこなう」を参照して下さい．
    • また，一般公開をおこなう場合は，知的財産権の侵害がないことを十分に確認した上で公開するようにして下さい．

課題

• 授業のページへ戻って，課題のページを開いて下さい．

もどる

inui -at- cs.tsukuba.ac.jp