”作る/いじる”のが好きで開設したホームページですが、早7年目に入りました。
ほとんど独学で作って来たんですが、最近はお店や個人でもホームページを作りたいとのお話を聞き、私の経験を含めホームページの作り方を紹介してみようかと思います。
まずは全体の流れを理解しましょう。
まずは、ホームページを作らなければいけません。
その為にはホームページ作成ソフトで作るのが、最終的には簡単です。
”ホームページビルダー”が定番みたいですが、私はマイクロソフトの”フロントページ”を使っています。
最終的にはこれらソフトを買ってしまうのが良いんですが、私も最初はパソコンに入っていた”ワード”で作成しました。
ワードでも結構なページは作成できるんですよ。
そこでここでは”ワード”を使って、ホームページ作成の基本を説明したいと思います。
作ったホームページは自分のパソコンでは見ることができますが、もちろんほかのパソコンからは見れません。
そこで自分のホームページのデータをサーバー(ホームページを置くパソコン)へ、アップロード(データを送る)する必要があります。
その為の手順です。
・ホームページ開設の手続き
皆さんインターネットに接続している訳なので、どこかのプロパイダーと契約をしているはずですが、ほとんどのプロパイダーでは個人向けに無料でホームページが開設できるようになっているはずです。
まずは自分の契約しているプロパイダーのホームページに行って、申込みをしましょう。
・データのアップロード
無事ホームページ開設の手続きが終わったら、いよいよホームページのデータを自分用のサーバーにアップロードです。
アップロードの方法も何種類かあるみたいです。
これでホームページができた訳です。早速アドレスを打ち込んで見てみます。
これが結構感動もので、自分で作った物ならではと思います。
しかしアップロードして見てみると結構イメージした通りに表示しなかったり、リンクが切れていたりと結構不具合があると思います。
その場合は直して、再度アップロードする訳です。
そうしている内にあなたのホームページは、どんどん大きくなっていきます。
それではホームページを作成してみましょう。
”ワード”には質問の答えていくとホームページの雛形(原型)を作ってくれる”Webページウイザード”があります。
まずはこれで作成してみます。
○スタート→すべてのプログラム→Officeドキュメントの新規作成をクリック
○Webページのタグ→Webページウィザードを選択した後にOKをクリック
○Webページウィザードが立ち上がります。次をクリック
○Webサイトのタイトルを「homepage」に変更した後に、次へをクリック
○独立したページをクリック選択して、次をクリックする
○”新しいWebページ1”をダブルクリックする
○名前を”newpage1”に変更して、OKをクリックする
→
○”新しいWebページ2”をダブルクリックする
○名前を”newpage2”に変更して、OKをクリックする
○名前が変更されている事を確認して、次へをクリックする
○ここは、そのまま次をクリックする
○テーマを設定するを選択して、テーマの参照をクリックする
○取合えず”ブレンド”を選択して、OKをクリックする
○これでウィザードが終りです。完了をクリックする
これでホームページの雛形が出来た訳です。
一旦ワードを終わって、できたホームページを見てみましょう。
今作ったホームページは自分のパソコンの”My Documents”の”homepage”フォルダの中に出来ている筈です。
”default”を開くと、作ったホームページが開きます。
先ほどワードの時と同じような画面ですが、インターネットエクスプローラで開いているので、リンクを(アンダーラインのある文字)クリックすると、それぞれのページに移動します。
これでホームページの雛形が出来た訳です。
今作ったページですが、どんな構成になっているんでしょう?
先ほどの”homepage”フォルダを、もう一度見てみましょう。
フォルダの中には4つのファイルと同じ名前の4つのフォルダができています。
・ページの構成
4つのファイルが、先ほど見たそれぞれのページになります。
それぞれの関係ですが、イメージとしてはこんな構成になっています。
→
↓
defaultページを先頭に、それぞれのページがつながっている訳です。
これを「ページの構成」と言います。(ほんとかな・・・?)
たとえばnewpage2の次のページを作成した場合には→方向に構成が広がり、newpage1の下に新しいページを作成した場合には↓方向に構成が広がる訳です。
ワードではページの構成を変更が出来ないんですが、見やすい(作りやすい)ページは、この構成と言う考え方が大切です。
・画像フォルダ
この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”に戻れませんよ(^_^)/~
以上でホームページ作成の基礎の説明を終わりまが、出来るだけ分かり易く書いたつもりですが、どうでしょうか?
何はともあれまずは作ってみる事が重要かもしれません。
皆さん、がんばってチャレンジしてみて下さい。
次回は”ホームページ開設の章”を書く予定です。
お楽しみに(^_^)/~