[ ホーム ] [ 上へ ]

ホームページを作ろう

”作る/いじる”のが好きで開設したホームページですが、早7年目に入りました。

ほとんど独学で作って来たんですが、最近はお店や個人でもホームページを作りたいとのお話を聞き、私の経験を含めホームページの作り方を紹介してみようかと思います。

作成の基本的な流れ

まずは全体の流れを理解しましょう。

★ホームページを作る

まずは、ホームページを作らなければいけません。

その為にはホームページ作成ソフトで作るのが、最終的には簡単です。

”ホームページビルダー”が定番みたいですが、私はマイクロソフトの”フロントページ”を使っています。

最終的にはこれらソフトを買ってしまうのが良いんですが、私も最初はパソコンに入っていた”ワード”で作成しました。

ワードでも結構なページは作成できるんですよ。

そこでここでは”ワード”を使って、ホームページ作成の基本を説明したいと思います。

★ホームページをアップロードする。

作ったホームページは自分のパソコンでは見ることができますが、もちろんほかのパソコンからは見れません。

そこで自分のホームページのデータをサーバー(ホームページを置くパソコン)へ、アップロード(データを送る)する必要があります。

その為の手順です。

・ホームページ開設の手続き

皆さんインターネットに接続している訳なので、どこかのプロパイダーと契約をしているはずですが、ほとんどのプロパイダーでは個人向けに無料でホームページが開設できるようになっているはずです。

まずは自分の契約しているプロパイダーのホームページに行って、申込みをしましょう。

・データのアップロード

無事ホームページ開設の手続きが終わったら、いよいよホームページのデータを自分用のサーバーにアップロードです。

アップロードの方法も何種類かあるみたいです。

★ホームページ完成

これでホームページができた訳です。早速アドレスを打ち込んで見てみます。

これが結構感動もので、自分で作った物ならではと思います。

しかしアップロードして見てみると結構イメージした通りに表示しなかったりリンクが切れていたりと結構不具合があると思います。

その場合は直して、再度アップロードする訳です。

そうしている内にあなたのホームページは、どんどん大きくなっていきます。

それではホームページを作成してみましょう。

第1章 ホームページを作る

1.雛形(原型)を作る

”ワード”には質問の答えていくとホームページの雛形(原型)を作ってくれるWebページウイザード”があります。

まずはこれで作成してみます。

○スタート→すべてのプログラム→Officeドキュメントの新規作成をクリック

○Webページのタグ→Webページウィザードを選択した後にOKをクリック

○Webページウィザードが立ち上がります。次をクリック

○Webサイトのタイトルを「homepage」に変更した後に、次へをクリック

○独立したページをクリック選択して、次をクリックする

○”新しいWebページ1”をダブルクリックする

○名前を”newpage1”に変更して、OKをクリックする

 → 

○”新しいWebページ2”をダブルクリックする

○名前を”newpage2”に変更して、OKをクリックする

○名前が変更されている事を確認して、次へをクリックする

○ここは、そのまま次をクリックする

○テーマを設定するを選択して、テーマの参照をクリックする

○取合えず”ブレンド”を選択して、OKをクリックする

○これでウィザードが終りです。完了をクリックする

これでホームページの雛形が出来た訳です。

一旦ワードを終わって、できたホームページを見てみましょう

2.ホームページを見てみよう

今作ったホームページは自分のパソコンの”My Documents”の”homepage”フォルダの中に出来ている筈です。

”default”を開くと、作ったホームページが開きます。

先ほどワードの時と同じような画面ですが、インターネットエクスプローラで開いているので、リンクを(アンダーラインのある文字)クリックすると、それぞれのページに移動します。

これでホームページの雛形が出来た訳です。

3.ホームページの構成

今作ったページですが、どんな構成になっているんでしょう?

先ほどの”homepage”フォルダを、もう一度見てみましょう。

フォルダの中には4つのファイルと同じ名前の4つのフォルダができています。

・ページの構成

4つのファイルが、先ほど見たそれぞれのページになります。

それぞれの関係ですが、イメージとしてはこんな構成になっています。

  

                 

defaultページを先頭に、それぞれのページがつながっている訳です。

これを「ページの構成」と言います。(ほんとかな・・・?)

たとえばnewpage2の次のページを作成した場合には方向に構成が広がり、newpage1の下に新しいページを作成した場合には方向に構成が広がる訳です。

ワードではページの構成を変更が出来ないんですが、見やすい(作りやすい)ページは、この構成と言う考え方が大切です。

・画像フォルダ

この4つのフォルダーの中には同じ名前のページの中に貼り付けられた、画像が入っています。

それぞれのページに画像を追加した場合には、必ずここに保管されます。

必ずファイルとフォルダの名前は、同じにしなければいけません。

4.ホームページを修正しよう

それではいよいよホームページの修正です。

まずは”newpage1”を修正してみます。

先ほどの”homepage”フォルダを開け、”newpage”のファイルの上で、マウスのBクリックし、編集をクリックします。

ワードが立上がって、”newpage1”のページが開きます。

開いたページの内容を説明します。

本文 

ここがページの本文です。

ここに文字を書いたり、画像を貼ったりする訳です。

罫線(表)

ここも基本的には本文ですが、罫線(表)形式になっています。

リンク 

文字の下にアンダーライン(下線)があるのは、ここをクリックすると別のページに移動する”リンク”です。

・文章入力

それでは早速文章を入力して見ましょう。

まずは下の例題と同じように入力してみて下さい。

これでホームページの更新が出来た訳です。

・更新内容の確認

それでは”newpage1”を開いてみます。

これでホームページの更新ができた訳です。

・写真を貼ってみよう

それでは続いてホームページに写真を貼ってみましょう。

再度”newpage1”を、ワードで開きます。

取合えず画像を選んで、挿入します。

終わるとこんな感じで、画像が貼り付きます。

一旦ワードを閉じて、”newpage1”を開くと無事、画像が貼り付いているはずです。

基本的にはここまでの内容でホームページの作成/修正が出来るはずです。

・書式を変えよう

しかしこのままではちょっとさびしい感じです。

そこでもう少し見易くする為には、書式の調整をします。

再度”newpage1”を、ワードで開きます。

これで文字サイズ/色等が変更できます。

書式の横の、書体(MSPゴシック)/サイズ(10.5)/太文字(B)/斜体(I)/書体→フォント等で色々な変更が出来ます。

文字の位置を変更できます。

左寄せ/中央揃え/右寄せでも良いですし、単純にスペースで間を空けてもOKです。

段落(文字の前後/上下の隙間)調整も出来ます。

画像のサイズも変更できます。

終わったらワードを閉じて、インターネットエクスプローラでページを開いてみます。

先ほど実施した変更が反映されているはずです。

基本的にはワードの書式変更がすべて使えるはずです。

・テーマを変えよ

これが最もホームページ的な変更方法です。

作成時に設定したテーマを変更することが出来ます。

○書式→テーマをクリック

○”アート”を選択して、OKをクリック

これでテーマが変更されました。

ワードを上書き保存後閉じて、エクスプローラでページを開いてみます。

がらっとページの雰囲気が変わります。

背景だけではなく文字の色等も同時に変更されます。

すべてのページを同じテーマでも良いですし、別々にしても良いかも知れません。

・新しいページを作ろう

それでは続いて新しいページを作ってみましょう。

○スタート→すべてのプログラム→Officeドキュメントの新規作成をクリック

○標準タブ→Webページを選択して、OKをクリック

○保存先をhomepageにして、ファイル名を”newpage3”にして保存

そうすると”homepage”フォルダに、新しくページが出来ます。

ここのは画像が無いので画像フォルダはまだ出来ていません。

ここに文章を書き込めば、新しいページが出来るわけです。

こんな感じで、どんどんページを増やす事が出来ます。

・リンクを張ろう

先ほど作った”newpage3”ですが、ページの構成的には浮いてしまっています。

こんな感じです。

リンクもつながっておらず、このほかのページから移動する事が出来ない訳です。

そこで”newpage1”から”newpage3”へのリンクを張って見ましょう。

”newpage1”をワードで開きます。

リンクを張るファイルを選んだ後に、挿入→ハイパーリンクをクリック

リンクを張るページを指定して、OKをクリックします。

これでページ同士のリンクが張れた訳です。

ページの構成としては、こんな感じになる訳です。

もちろん”newpage3”から戻るリンクを張らないと、”newpage1”に戻れませんよ(^_^)/~

以上でホームページ作成の基礎の説明を終わりまが、出来るだけ分かり易く書いたつもりですが、どうでしょうか?

何はともあれまずは作ってみる事が重要かもしれません。

皆さん、がんばってチャレンジしてみて下さい。

 

次回は”ホームページ開設の章”を書く予定です。

お楽しみに(^_^)/~

[ ホーム ] [ 上へ ]

inserted by FC2 system