2 ネットスケイプ・コンポーザーを使って、ホームページを1枚作ってみる
 

(1)まず、とにかくホームページを1枚だけ作ってみましょう

あなたが見ているこのページも、ネットスケイプ・コンポーザーで作ったものです。

以下に、作り方を説明しますが、その説明を補うために、下記のページが役立つかもしれません。適宜、参照してください。

a ネットスケープコンポーザー簡単マニュアル(田中基行氏)

b コンポーザーを使ってホームページ(Senior-net)

では、はじめましょう。

1) まず、「ネットスケイプ・ナビゲーター」を立ち上げます。みなさんのパソコンの下部にあるバーの「スタート」の右横の2番目の丸と×が重なったようなボタンを押すと、ナビゲーターが現れます。ナビゲーターは、ホームページを見るためのソフトです。立ち上げると、どこかのホームページ(おそらく実習室のページ)が見えているはずです。次に、ナビゲーターの上部に横に並んでいるメニューから、「Communicator」をクリックしてください。そしてそのなかから「Composer」をクリック。すると、コンポーザーの初期画面が現われます。

2) 次に、ボタンメニューから「新規」をクリック→「空白ページ」をクリック→メニューから「書式」をクリック→そのなかから「ページの配色とプロパティ」をクリック→「表題」のところに、ホームページの名前を書きます(日本語で書くためには、パソコン画面の右下で、日本語モードに変更してください)。→ホームページのタイトルを書いたら「OK」を押す。

これで、このページに、名前が付きました。次に、このページをすぐに自分のパソコンに保存します。

3) ボタンメニューの「保存」をクリック→「保存する場所」という欄の右の方にある「▼」印をクリック→そこから「Windows (Z:)」をクリック(このとき、「Documents」「Mail」などのフォルダが見えているはずです)→「public_html」フォルダを探す。→「public_html」フォルダをダブルクリックして開きます。そしたら、なにもファイル名の入っていない画面が現われます。このフォルダが、これからあなたが作るたくさんのHTMLファイルを保存する場所です。よく覚えておきましょう。→下のほうにある「ファイル名」のところに、英語半角小文字で「index.html」と入れる(indexとhtmlのあいだにはドット(.)があるので注意)。→「保存」をクリック「名前を付けて保存」

(もし、「public_html」ファイルが存在しない場合は、自分で作りましょう。ウィンドウの右上のほうにある、キラッと光っているフォルダのボタン(カーソルを上に置くと「新しいフォルダの作成」と出てくる)をクリック→するとフォルダの名前を入力せよという表示が出るので、英語半角小文字で「public_html」と書き込んでキーボードの「Enter」を押す(すでに「public_html」フォルダがある場合は、新しく作る必要はありません)。(publicとhtmlのあいだの「_」は、キーボードの文字の「ろ」を「Shift」を押しながら押すと、出ます)。これで「public_html」フォルダが作成されました。)

これで、めでたく、何も書かれていないホームページを保存することに成功しました。画面のいちばん左上に、あなたの入力したファイル名が表示されているのを確認しましょう。

あなたの作ったトップページを、ナビゲーターに登録しておきましょう。ナビゲーターの左上にある「ブックマーク」をクリック→「ブックマークを追加」をクリック→これで登録されました。確認のために、もう一度、「ブックマーク」をクリックして、その枠の中の一番下を見てください。あなたのページが登録されているはずです。次回からは、このブックマークをクリックすることで、一気にあなたのトップページに飛べます。(他のページも、同じようにして、どんどん追加できます)

4) 次に、何も書かれていないコンポーザーの画面に、カーソルをもっていって、1行だけ何か書いてみましょう。たとえば「これは私のホームページです」とか。書けたら、ボタンメニューの「保存」をクリックしてください。自動的に上書き保存されます。

これで、あなたのホームページができました。

では、ほんとうにできているかどうかを、確かめてみましょう。

5) 上部メニューの「Communicator」から「navigator」をクリック→左上の「ファイル」をクリック→「ぺージを開く」をクリック→現れた窓に「http://www.edu1.osakafu-u.ac.jp/~あなたのID/」を入力する(「~」は、半角にしてキーボードの「SHIFT」+「へ」で出ます)→「開く」をクリック。

すると、あなたが作った記念すべきホームページが見えるはずです。これは、他の人が見ても、まったく同じように見えます。ホームページを公開することに成功したのです。

6) パソコンを立ち上げて、以前に作って保存しておいたファイルをコンポーザーで開くときには、左上のメニューから「ファイル」→「ページを開く」→「ファイルを選択」ボタンを押す→「public_html」フォルダから、お目当てのファイルを探してクリックして、「開く」を押します。

 ここで知っておくと便利なこともしやり方を間違ってしまったときには、「編集」→「元に戻す」で、ひとつ手前の状態に戻すことができます。これは重宝しますので、ぜひ覚えておいてください。

 他の学生のページを見るには、同じようにして、「http://www.edu1.osakafu-u.ac.jp/~他の学生のID/」を入力してみてください。あるいは表紙ページにあるリンクを利用すること。

 皆さんがよく間違うポイントをあげておきましたので、必ず見てください。
 
 


(2)表紙ページにいろいろ手を入れてみる
 

次に、もう少し、ページにいろいろ書き込んでみましょう。そのときには、フォントの大きさや、飾りなどを変えるとメリハリが出ます。

これらは、ワープロとまったく同じ感覚です。

フォントの大きさ

大きさを変えたい文字をカーソルで選択して反転表示させ、上部の上から3段目・左から3つ目の▼を押して、大きさを決定する。
      
   フォント(0) フォント(+1) フォント(+2) フォント(ー1)


フォントの種類  

上から3段目・左から2つ目の▼で、フォントの種類を変えることができます。

   フォント2001(プロポーショナル) フォント2001(MS明朝) フォント2001(ポップ体)


強調斜体下線などのボタンがその横に並んでいるので、試してみましょう。

色の指定は3段目・左から4つ目の▼でできます。(「その他」を押すと、自分の好きな色が作れます)

その他、上部メニューの「書式」をクリックすると、レイアウトのための様々な機能がありますので、挑戦してみてください。その中から重要なものを2個あげると、

(a) インデント

これは、まさにこの行のレイアウトのように、ページの左側を一定距離空けて、ページを見やすくする機能です。インデントするためには、インデントしたい数行の文章をカーソルで指定して反転表示させて、「書式」→「インデント」とクリックするとできます。(このとき、インデントされた文章の上と下に空白が一文字分できてしまうので、その部分をあとで削除するときれいです)。インデントをやめるには、インデントされた文章の最後で一回「Enter」を押して空白を作っておいてから、「書式」→「インデント解除」をクリックします。

以上の動作は、上から3段目の右の方にあるボタンでもできます。


(b) センタリング

文章をページの中央に強制的におきたいときには、センタリングしたい文章をカーソルで指定して反転表示させて、「書式」→「配置」→「中央」をクリックします。

中央

このようになります。解除したいときには、「書式」→「配置」→「左」。


このようにして手を入れたら、「保存」しましょう。パソコンがフリーズしたときに困らないように、たびたび「保存」することをおすすめします。「保存」したら、ナビゲーターで、ほんとうにきれいにできているかどうかを確かめましょう。
 

(3)ちょっと高度な設定
いまあなたが作ったページは、「文字の色」と「背景色」を、閲覧者が持っているパソコンの状態に、自動的に合わせるようになっています。たとえば、あなたが作ったページの文字は何色に見えていますか? 「黒」ですよね。でも、このままだと、パソコンの文字色を「緑」にしてインターネットを見ている人が見たら、あなたのページの文字色は「緑」になってしまうのです。そういうふうにして見ている人も、たまにいるのです。

なので、相手がパソコンをどんな設定にしていても、「文字色は絶対に黒で見てほしい!」という設定をすることができます。

まず、「書式」→「ページの配色とプロパティ」→「配色と背景」まで行って、そこにある「ユーザー定義の配色を使用」というところをチェックしてください。それから、「普通の文字列」が「黒」になっているかどうか確認。次に、一番下の「背景」を、あなた自身で設定し直してください。色のところをクリックして、色を決めることができます。通常は「白」が多いですが、他の色でもかまいません。できたら、「OK」をクリック。これで、強制的に、文字色と背景色を決めることができました。

これでよかったら、「保存」してください。設定を変更したときにも、「保存」しないと、変更が反映されません。
 

(4)ファイル名について
 
いま作ったページのファイル名は「index.html」でしたね。この「index.html」という名前は、特別な意味を持っています。これは、あなたのホームページの「表紙」だよ、という印になるのです。つまり、誰かが、あなたのホームページを見に来たときに、いちばん最初に現われるページが、この「index.html」という名前の付いたページなのです。だから、表紙にしたいページには、必ずこの名前を付けましょう。

では、表紙以外のページには、どういう名前を付ければいいのでしょうか。これから、たくさんのファイルを作っていきますが、それについてもルールがあります。ここでは、ファイル名の最後に「.html」(ドット HTML)を付けるのだと覚えておきましょう。たとえば、「morioka.html」とか「tsukurikata.html」などです。いくつかの似たようなファイルを作るときには、「gazou01.html」「gazou02.html」などのような数字を入れると便利です。

大事なことは、ファイル名はすべて英語か数字の半角小文字でなければならないという点です。大文字や日本語は使わないようにしましょう。


戻る