Transcript PowerPoint プレゼンテーション

T2V技術
Web製作ラボ
7
4/25, 2011
hayashiLabo
T2V技術
Webの仕組みと
Weｂページ作成
講義の方針ちょっとだけ補足
みなさんは文科系ですが、講義では理科系的なことも
お話することにしました
とはいえ、誰でもわかるレベルでしゃべるのでご安心を
なぜか？
・これからは文科系理科系分業の時代じゃない
・両方できる人はとてもいい人材とみなされます
・将来、企画、マーケティング、宣伝などの職種についた
として、Webを使うときも、理科系っぽいことを知ってい
ると人材にハクがついて有利です
Webの仕組み初歩
サーバー
クライアント
インターネット
HTML
URL
(例：http://www.google.com)
サーバーもしょせんはPCと同じく
コンピュータです。CPU、メモリ、
ディスクなどのカタマリです。
Webブラウザ
ローカル上のページとサーバー上のページ
サーバー
クライアント
Index.html
HTML
インターネット
Index.html
URL
ネットワーク透過性と言います
(Network Transparency)
Webブラウザ
クライアントのPCにあるindex.html
をブラウザで見るのと、サーバー
にあるindex.htmlをブラウザで見
ることは、結果は同じです。
サーバー上のファイルの操作
T2V技術
では、今までローカルでやっていたように、サ
ーバー上でファイルを作ったり、書き換えたり、
削除したり、移動したり、するのはどうするか
・ファイルマネージャを使う
・ｆｔｐを使う
・（リモートログイン 高度）
いわゆるレンタルサーバーでは不可
ラボで使うサーバー
T2V技術
林ラボでは「さくらインターネット」のレン
タルサーバー（スタンダード）を借りてい
ます。
サーバーアクセス情報
講義HPの右上に、実習で使うサーバーの情報があります
中を見るには以下のIdとPasswordが必要です。
ID:
hayashilabo
パスワード: aoyama2011
講義HP：
http://niz237gt.sakura.ne.jp/
サーバーのファイルマネージャを使ってみる
《 サーバコントロールパネル ログイン情報 》
URL： https://secure.sakura.ad.jp/rscontrol/
ドメイン名
： niz237gt.sakura.ne.jp
サーバパスワード： m89mnm9ns6
•「運用に便利なツール」～「ファイルマネージャ」
•これを使って、ファイルのアップロード・ダウンロードなどが
できます
•ということは、これだけあればHPはできてしまいます
自分のフォルダを作る
ファイルマネージャで実習用のフォルダを作る
•「sites2012」というフォルダに入る（ダブルクリック）
•上の方の「表示アドレスへの操作」～「フォルダ作
成」
•名前は以下のようにしてください
ローマ字姓 － ローマ字名
（例： hayashi-masaki）
HTMLをアップロードしてアクセス
ファイルマネージャでHTML公開してみます
•サーバー上の自分のフォルダに移動
•ファイルマネージャの「アップロード」を押す
•「ファイルを追加」～「アップロード開始」
•以前やったsample1/template.htmlをアップ
ロードする
•自分のページをアクセスしてみる
http://niz237gt.sakura.ne.jp/sites/hayashi-masaki/template.html
ページの更新
次に、サーバーで公開したページの更新しま
す
•ローカルのtemplate.htmlをエディターで開く
•なんか書き換える
•ファイルマネージャでアップロードする（削除し
てから再アップのようです）
•更新されたページをアクセス
Webサイトのトップ
index.html
を置くこと。
絶対置かないといけないという決まりではないが、
サイトのトップにアクセスしたときに、これが無い
とページが見えない。
Webページ作成の基本プロセス
HTMLをエディタで編集
Webブラウザでローカルで確認
OKだったら必要ファイルをアップロード
Webブラウザで確認
次
• FTP