ＨＰを作って、大学サーバーに自分のサイトをつくる

23 June, 2008

ＨＰ見本　　HP作成のためのお助けサイト （このＨＰとHPBuilderを両方を画面にだしてやってみよう）
Acrobat 利用のファイルのアップ

Step 1

1	コンピュータを立ち上げる
2	「アクセサリ」から「HPビルダー」を起動
3	Ａドライブに自分のＦＤを挿入

Step 2　自分のＨＰ表紙を作る作業

1	Welcom to my homepage　などの題目を作成
2	「ツールバー」から字の大きさ、色などの字体装飾にチャレンジ　　　Welcome to my homepage　　　　　（英数半角扱いArial Black 18ポ　緑　斜体）
3	下段に次に飛べる頁題目（項目）を作成　　題字下には更新日時挿入「課題　ジャーナリズム史」「課題　外国ジャーナリズムⅡa」「授業頁へ」「メール」などを作る。
4	ここまでできたら、「ファイル」の「Webページとして保存」をつかって、自分のＦＤにこの頁を保存する。その前に「ファイル」の「ブラウザでみる」をクリックして、ブラウザが立ち上がると、字や大きさが違った画面になるが、これが君のＨＰだ。
5	保存のときの注意：保存ファイル名　英数半角扱い　「index.html」とすること
6	これでＦＤに表紙が保存された。
7	もう一度、自分のＨＰをワードに呼び出し、「ツールバー」の「挿入」からハイパーリンクをはる　ジャーナリズム史　自分のアドレス(~xxxx)＋頁名＋「.htm」or 「.html」
	Top Page　http://lctweb.cc.sophia.ac.jp/~A08190000/index.html 　http://lctweb.cc.sophia.ac.jp/~A08190000/journalism.html 　　　　　　　自分のサイト/頁
8	自分へのメールができるようにアイコンなどを選び、画像に「挿入」「リンク」からメールリンクをはる。

	１．クリップアートなどからアイコンを選ぶ。２．アイコンにマウスあて、「挿入」「リンク」｢電子メールアドレス」をクリックして自分のアドレスを入れる。３．[mail to:s-yuga@sophia.ac.jp]
9	これをＨＰに「上書き保存」する。ワードは終了しないで、最小にして残しておく。

Step 3 次はFFTPをつかって、サイトに乗せる

1	画面の「ツール」から「FＦTP」を選んで、起動させる。
2	ＩＤとパスワードをいれて、FFTPが使えるようにする。
3	左側画面からAドライブ（自分のＦＤが入っている）を選ぶと、その中に[index.html]ファイルと、色や画像が入ったファイルなどが見える
4	右側に[public_html]という名のフォルダをつくる「ツールバー」またはマークから作成　名前を付ける「public_html」
5	これがあなたのHPのフォルダになり、ここに左側から必要なファイルを全部右側に送る続きがあるので、このFFTPファイルも終了せず、最小にしておく。
6	これで、ブラウザから自分のサイトを呼び出せば、ワードで作ったホームページができている。

Step 4 Q&A　
（Step３まででうまくHPができていない場合あるいは更新してもうまくいかない場合など）

1		ＦＦＴＰを使ってファイルを右に移したがHPが見えないとき
	(1)	まず左側FDに収められているファイルの名前が半角英数扱い「index.html」になっていないことが多い。「ひらがな入力」で「半角に変わっている」場合も作動しません。右マウスをクリックして名前を変えて、もう一度　Step３へ
	(2)	右の[public_html]フォルダがきちんとできていないか、単に右側へ移しただけで、実はこの [public_html]フォルダにHPのファイルが入っていないことが多い。
2		表紙や字は出ているが、画像などが「×」などででない
	(1)	これは[index.html]以外の画像ファイル「…files.」などが右側に移動していないから。左から右へ移動させればよい（アップロード）
	(2)	IE,Netscapeなどのブラウザザによって、どうしてもうまく貼り付かない、見えないときもある。
3		うまくゆかないときは、右側にある「public_html」ファイルが不完全であったり、複数できていることがあるので、いったん全て削除（右クリックで「削除」）して、はじめからやり直してみる。右クリックで「名前を変更」にもトライ。

Step5 　応用編　自分の課題ファイルHP作成　ファイル名は全て、半角英数扱いです。

1	すでにワードで作っている人は、Step 2を応用。
2	テキストファイルなどでもOK　「挿入」「ファイル」でFDから該当ファイルを呼び出せばいい。
3	それにハイパーリンクと同じ「ファイル名」をつけて、FDに保存し、FTPを使って右側の [public_html]のフォルダ内に移す。例　…自分のサイト名/journalism1.htm
4	うまくハイパーリンクできないときは、もう一度付けた名前が一致しているか確認する。
5	自分のメインページに「戻る」「授業頁へ」URL　へのリンクをはる。好きなアイコンを使ってみては　http://pweb.cc.sophia.ac.jp/s-yuga/gakubu/JHindex08.html　　　　　　　　　　　　　　リンクのはりかたは、
6	「index.html」の更新は、ＦＤから開いて書き直しをし、「上書き保存」でＦＤに戻し、またＦＦＴＰファイルを開いて、左から右へ「アップロード」する。ほかのＨＰ頁も同様である。従って、大学のＰＣセンター利用のときは、「ワード」「ＦＴＰ」「ブラウザ（ネスケ）」の３つのソフトを使うことになる。

２．図表などの挿入
（１）「ツールバー」「挿入」「図」「クリップアート」などから好きな画像を選んでみよう

　　　図をクリックして拡大、縮小などサイズ変更ができる　　　　　　　　　　　　　　　

(1)	HPから好きな画像などをダウンロードする。
	「ファイル保存」のうち「画像も含み全て」などをつかう。あるいはブラウザとワードの画面を両方出しておき、「コピー」「ペースト」機能を使う。

あとは努力次第。がんばってみよう

ＨＰ作成の見本

　　　Welcome to Ryusuke's Homepage
　　　　　　　　　　　　　　　　注１　表題で誰のＨＰかはっきりわかるように
　　　　　　　　　　　　　　　　　　　　　　April 30, 2001
　　　　　　　　　　　　　　　注２　更新日付を必ず入れる

次に　アサイメントの頁にリンクをはる。各頁には必ず、更新年月日を入れ、「戻る」「Back」などで表紙に戻れるようリンクをはる。2頁以上あるときは、「次に」などでリンクさせる。

　　　　　　　　　ジャーナリズム史
　　　　　　　　　外国ジャーナリズムⅡa

　　　　　　　　　
注３　表紙下ならびにアサイメント掲載頁末には、必ず、「メール」アイコンなどでメールを送れるようにする
　　　　　　　　　　　　　　　　　　　　　

マイホームページへの道

Acrobat File の利用

大学コンピュータ室　Ｄ、Ｏ教室の端末だけに入っているソフトです。閲覧はAdobe Acrobat Readerを使い、文書ファイルがそのまま読め、崩れず印刷することができます。ＨＰ作成よりも簡単にファイルが作れます。

１．ワードで文書を作成
２．印刷画面を呼び出し、「プリンター」のところで、「Acrobat Distiller」を選び、印刷すると文書名.pdf　という拡張子がついたファイルができるので、ディスクに保存
３．上記のとおり、ＦＦＦＴＰファイルを使って、自分のＨＰにアップする。
４．リンク先は 「-----/~s-yuga/journalism1.pdf 」というようにする。
５．このソフトを使って、しおりを作成したりすると、文書閲覧が容易ですし、ハイパーリンクをはることなどができます。