ホームページを素早く作るために　その３

Ａ：タイトル部分を決める

タイトルは文字（テキスト）でも構いませんが、一般的には画像を使います。
その方が見栄えが良いからです。
ここではタイトル画像を作ることにします。

手順

１．タイトルを決める
２．デザインを決める
になります。

画像の大きさは、横幅500px〜800px（800px以下なら好きに決めていい）
高さも好きに決めてよいのですが、ここでは60px〜150pxくらいにします。

画像の作り方

どうしても画像処理するソフトが必要です。
ここだけは解説のしようがありません、ご自分で作っていくしかないのです。

フォトショップやイラストレーターなどの高価なソフトがなくても、
ホームページビルダーについている「ウェブアートデザイナー」で作れます。
Windowsについている「ペイント」でも作れます。
有料・無料のソフトが沢山あります。
私は「ウェブアートデザイナー」と「JTrim（無料）」を使っています。

■JTrimのダウンロードは こちら
■他の無料・有料ソフトは こちら や あちら と 窓の杜

でき上がった画像は、フォルダー「A」の中にもうひとつフォルダー「image」を作り、その中に入れます。
拡張子は
　・写真など････････「.jpg」（JPEG画像・ジェーペグ）
　・イラストなど･･････「.gif」（GIF画像・ジフ）、アニメーションGIFもOKですがファイルが大きくなるので要注意。
のどちらかにします。
微妙な色の変化を見せたい場合や細かな写真などは「.jpg」が良いでしょう。
（JPEGの画質設定がある場合は、85%くらいの高品質にします）

フラッシュ画像を作れる方は、フラッシュも良いでしょう。
■無料フラッシュ作成ソフトは parafla や Suzuka があります。
「html作成」にチェックを入れて保存すると、「****.html」も作ってくれます。
そのソースから<OBJECT ****> 〜 </OBJECT> をコピーして「Ａ」の部分に貼り付け、
もうひとつできている「****.swf」をフォルダー「A」に移動すれば完了です。

私の画像は「ウェブアートデザイナー」を使って下記のとおりにできました。

A/image/logo1.jpg　　サイズ：798px×80px

この画像をページにはめ込むには、まず新しいメモ帳に下記のようにソースを書きます。
<img src="image/logo1.jpg" width="798" height="80" alt="JoyWave便利箱　サンプル">
src、width、height、alt部分はご自分用に変更してください。

これをコピーして、「index.html」の「Ａ」の部分に貼り付けます。
（ソースが短く簡単ですから直接書いても構いません）

Ｂ：リンクするページを決める

最初から何ページと決めれない場合もあります。
その時は、ページを追加したり変更しても大丈夫なように考えておきます。
（テキスト文字でリンクさせると簡単です）

私の場合はページ数が決まっていたので、次のように画像で用意しました。
画像の大きさは、前のページで決めた「width="25%"」つまり横幅200px以下です。
これらの画像も「image」フォルダーに入れます。

A/image/page11.gif　　サイズ：200×45	A/image/page12.gif　　サイズ：200×45
A/image/page21.gif　　サイズ：200×45	A/image/page22.gif　　サイズ：200×45
A/image/page31.gif　　サイズ：200×45	A/image/page32.gif　　サイズ：200×45
A/image/page41.gif　　サイズ：200×45	A/image/page42.gif　　サイズ：200×45

それぞれ画像が2種類ある理由は、
開いているページが赤色の画像になるように考えました。
そうすれば、今どのページを見ているのかよく判ります。

トップページのリンク部分（Ｂ）には、
<img src="image/page12.gif" width="200" alt="トップページ"><br>
<a href="p2.html"><img src="image/page21.gif" width="200" alt="リンク　セカンドページ"></a><br>
<a href="p3.html"><img src="image/page31.gif" width="200" alt="リンク　サードページ"></a><br>
<a href="p4.html"><img src="image/page41.gif" width="200" alt="リンク　お楽しみページ"></a><br>
と書いています。

セカンドページのリンク部分（Ｂ）には、
<a href="index.html"><img src="image/page11.gif" width="200" alt="リンク　トップページ"></a><br>
<img src="image/page22.gif" width="200" alt="セカンドページ"><br>
<a href="p3.html"><img src="image/page31.gif" width="200" alt="リンク　サードページ"></a><br>
<a href="p4.html"><img src="image/page41.gif" width="200" alt="リンク　お楽しみページ"></a><br>
と書いています。

ということは、私のページは全部で4ページで、
　・トップページ･･････ index.html
　・セカンドページ････ p2.html
　・サードページ･･････ p3.html
　・お楽しみページ････ p4.html
ということが判りますね。

「こうでないとダメ」ということではありませんので、自分で考えてみてください。
もちろん画像を使わなくても構いません。

ＡとＢを、作った「index.html」に組み込む

私の場合はこんな感じになりました。

必要なページ分だけ名前を付けて保存する

タイトル部分は全ページ共通、リンク部分は一部を除いてほとんど共通。
ということで、必要なページ分だけ「*****.html」と名前を付けて保存します。

でき上がったそれぞれのページは、リンクの部分（Ｂ）を少しずつ修正し、上書き保存します。

上のはめ込みで、リンク部分をクリックしてみてください。

「Ｃ」の本文を、見ればどのページを見ているかすぐに判るように作っておけば、
リンク部分「Ｂ」は、全部の画像にリンクを付けておくことで全ページ共通にもできます。
その場合、画像の作成は半分で済みます。

授業はここまで

※　ここまでの一通りでマスターするのは難しいと思います。
　　もう一度、最初から読んでみましょう。作ってみましょう。
　　きっとうなづけることが多くなっていると思います。

１．
ここから先は各ページの本文作成になります。
本文には「ホームページを素早く作るために　その１」で学んだことを基本に、さらにテーブルを組み込んだりします。

この本文はきっとボリュームがあると思いますので、できるだけ新しいメモ帳で作ってください。
完成したら、それぞれのページにコピペし保存します。

各ページができ上がったら、文章が変でないか、画像が表示されているか、
リンクがちゃんとできていて各ページに行けるかなどを確認してください。

２．
いよいよホームページの一般公開です。
無料レンタルサーバーを借りても良いし、プロバイダーでもいいし、私のように有料サーバーでもいいですが、
勿体ないので、最初は無料がお勧めです。

アップロードの仕方は、それぞれのサイトが用意しているファイルマネージャを使ってもいいし、
無料FTPソフトを使ってもいいです。
この辺はレンタルした各サイトで、どんなことができるか確認してください。
（アップロードとは、作ったファイルをインターネットの世界にお披露目することです）

このページの先頭へ
ホームページを素早く作るために　　その１｜その２｜その３