ホームページを作ろう

ホームページを作るのは意外と簡単です。この「夢荘にて」を例に説明します。

1.準備の準備
 このページをご覧になっているのだからパソコンが有り、Internetに繋がる環境のはずです。でももし会社のネットからでは個人のページを作るのは無理のはず。自分のお金でプロバイダに加入しましょう。月額2000円前後と思えば良いでしょう、近くのプロバイダを調べるならここです、このページで自宅の市外局番と電話の種類(アナログかISDNか)を入れると、プロバイダ一覧が表示されます。知り合いに評判を聞くのも良いでしょう。
 プロバイダによっては、ホームページが別料金になっている場合も有りますので、良く確認しましょう。

2心の.準備
(1)何を表現したいか考えましょう。(これが一番難しい、決まれば後はテクニックだけ)
(2)A4の紙を何枚か用意します。
   この紙に、イメージしたページを書いていきます。メモ的な殴り書きで十分です。
   ページは一つでは無くて、最初のページから何カ所にリンクさせた方が軽くて良いでしょう。
   それを全て新しいA4の紙に書いていきます。これでページの繋がりが明確になります。

3.ソフトの準備
(1)専用ソフトの購入

 専門の言語HTMLを勉強すれば、ホームページを作る専用のソフトは不要ですが、ワープロ感覚で操作出来る専用ソフトを使う方が楽です。ここではその方法を説明します。
  Adobe PageMill 3.0 9000円くらいだったでしょうか。(但しPower Mac専用です)
文字だけのページならこれだけで十分ですが、画像を入れるなら次をご覧下さい。
(2)画像ソフトの入手
 これはお金を掛けなくても可能です。
  *Adobe Photoshop LE-J:上記Adobe PageMill 3.0のCD-ROMに着いています。
  *Photonick:JPEG用の素晴らしい無料ソフト、これが有ればPhotoshopはほぼ不要。
         Y,Tanaka's Workshopからダウンロード出来ます。(夢荘日記12/29参照)
  *WebGIF:これも無料、
GIFにするならこれ、http://160.252.61.3/mawatar/dv/developjp.html#WebGIFからダウンロード出来ます。
 有れば便利なもの。
  *Graphic Converter:画像フォーマットを色々変えられます。市販版とシェアウエアが有ります。シェアウエア版はここからダウンロードして下さい。
(3)FTPソフト
 Fetch::自分のページをプロバイダ側に送るためのソフトです。試しに使うのは無料、継続使用にお金を払いましょう。ここからダウンロード出来ます。

4.参考書の準備
 こばやしゆたか著:情熱のPageMill2.0J,ソフトバンク,2300円
 (3.0Jが出てから書店で見ません。新版を準備中でしょうか)

5.機器の準備
 パソコンさえ有れば出来るのですが、画像を取り込むスキャナかデジカメが有ると便利でしょう。
どちらが良いかは好みの問題ですが、応用が利いて価格も安いのはスキャナでしょうか。普通のカメラで撮った写真も、パンフレットなども取り込めますし、4万円以下で買えるでしょう。



さて準備はできました、あとは作るテクニックを学びましょう。
でも、もう少しパソコンの中に準備が必要です。

6.フォルダの作成
 ホームページの名前のフォルダ(例:夢荘)を作り、その中に2の(2)で設定したページ毎のフォルダ(例:diary)と画像を入れるフォルダ(例:Data)を作ります。ページに張り付ける画像はこのフォルダーから張り付けないと表示されなくなります。
 更に念のため補助フォルダ(例:夢荘補助)を作ります。その中には検索サイトに登録するデータとか、記念のスクリーンショットとか、プロバイダ側には置かないがホームページに必要なファイルを入れます。

7.PageMillの設定
 4の参考書、情熱のPageMill2.0Jの28ページに詳しく書いてあります。あまり難しいところは有りませんが、注意するのは下の2箇所くらいでしょうか
    

    

8.背景の設定
 PageMillの初期設定では背景は灰色になっています。ウインドウー属性パレットを表示で背景色を指定出来ますが、模様を入れたい場合は属性パレットの一番下の背景画像の中に模様のGIFファイルをドラッグします。
      (これ を背景画像の四角にドラッグ)

 背景画像は専門の素材集なども有りますが、このページではここMUSEUM SONEから無料でダウンロードして使用しています。その他にも無料の素材を提供するページは有りますので、自分の好みの背景を探すと良いでしょう。


では、いよいよあなたのホームページの作成です。

9.題字の作成

 ちょっと意外かも知れませんが、ホームページで見られる題字の大部分は「文字」では無くて「画像」なのです。HTMLでの文字の大きさには限りが有り、小さいのが
これ、大きいのがこれと考えて大きな間違いは無いでしょう。一番大きいので十分かも知れませんが、文字ですから見え方はフォントに左右されます。自分のイメージ通りに相手の環境では見えない場合があります。そこで画像(絵)にしてしまえば、大きさも色も自由ですし、自分のイメージに近いものを相手も見る事が出来るわけです。

 この題字は簡単にはワープロソフトで好きなフォントを使ったものをスクリーンショットを撮って、3の(2)に紹介したWebGIFドラッグすれば、ホームページで使えるGIFファイルになります。
フォトショップを使える人はそれで凝った絵を作るのも良いでしょうし、他のドローやペイントソフトでも出来ます。
 私のページでは無料で好きな題字を作ってくれるサイトSignboard Factoryに行って「夢荘にて」を作りました。このサイトでは日本語は一文字だけしか作れませんから、夢、荘、に、て、を別々に作り、クラリスドローで繋いでから、Graphic ConverterでGIFに変換しています。

これがSignboard Factoryで作成した画像(JPG)、そのまま並べても良いのでしょうが、クラリスドローだとつなぎ合わせ、縮小も簡単です。
出来たものはGraphic Converter等を使いGIFに変換します。


この文字はこのままでは背景が白色です、背景パターンの上に乗せるには画像を透明にします。方法は簡単、張り付けたGIF画像をコマンドキー(リンゴマークの付いたキー)を押しながらダブルクリックすると、
 が現れますから、左のアイコンで上から6番目(左で強調表示)をクリック、鉛筆の先みたいのを透明にしたいところでクリックします。すると、下のように透明になります。
後は、ファイルー画像を保存にすればOK

上の夢は背景が白色、この荘は透明です。

違いが分かりますか?

背景が薄く少し分かり難いと思いますが、濃い背景では明白になります。


注意:これらの画像は6で書いた画像を入れるフォルダ(例:Data)から張り付けないと、サーバーに置いたとき表示されなくなります。また張り付けた後に移動してはいけません。

10.本文の作りかた
 文章の左右を揃えたり、中央に配置したりするためには、テーブルを利用すると良いと思います。
PageMill一番上のアイコンで左から7番目「テーブルを挿入」をクリックすると「テーブルの作成」ウィンドウが開きますから、ここで行数1、列数1、罫線の太さ、セル余白、枠線の太さを全て0にすれば、テーブルは見えずに、文章は揃えることが出来ます。このページはテーブルの幅550Pixelsに設定しています、あまり大きくすると横スクロールしないと見えないページになります。私は17インチモニターを使用していますので、このページもパワーブックではどう見えるのか、確認はしていません。
 文章だけならエディター(私はJedit2.0)や慣れたワープロソフトで作成したものをPageMillのテーブルにコピーーペーストした方が早いかも知れません。

11.画像の張り付け
 9の題字の作成で書いた張り付け方法と同じです。JPG,GIFファイルをPageMillの画面にドラッグするだけです。写真はPhotonickでJPGに、文字っぽいのはWebGIFでGIFにしたものを張り付けると良いでしょう。注意事項は画像を入れるフォルダーから張り付けるのは同じです。

12.リンク先の表示
 自分の他のページに飛ぶには、PageMillの左上に有るタイトルのアイコンを、挿入したいところにドラッグすればOK、リンクしたいページに飛ぶようにするには、PageMillでブラウザの初期設定を開き、更にBookmarks.htmlとかFavorites.htmlを開き、リンクしたいページのアドレスをドラッグすればOKです。ドラッグした後は、その文字を適当に変更しても大丈夫です。

13.メールください。
 ページを見た人から感想のメールが来たらうれしいものです。「メールお待ちしています」とかポストの画像を張り付けて、そこをクリックするとメールソフトが立ち上がるように設定出来ます。
これもPageMillなら簡単で、クリックする文字か画像を選択して、左下のリンク先のところに
    mailto:自分のメールアドレス
を入力して、returnキーを押せばOKです。(その部分の色が変わります)

14.カウンターの設置
 訪問者の数はホームページの楽しみです、ぜひカウンターを置きましょう。プロバイダに準備されているはずです。これだけHTMLのタグを記述する必要があるかも知れませんが、心配は要りません。プロバイダから入手したタグをPageMillの表示ーソースモードで張り付け、表示ープレビューモードにすれば、カウンターらしきものが見えますから、それを目的の場所にコピーーペーストすればOKです。
(このページをプロバイダーのサーバーに置けば、カウンターが見えるはずです)

完全なものにしてからアップするか、取り敢えず作ってみて、更新しながら作り込んでいくか、作り手の個性ですが、始めなければ何も起こりません。将来のページを見据えて、まず作り出したらどうでしょう。文字だけのページなら9をとばして10項だけでできますし、5項の機器もいりません。これならメールを書くのと同じですし、内容が大事なものですから、画像等は不要と考えても良いでしょう。

これでホームページは出来ました。では、プロバイダーの決められたところににアップしましょう。



15.Fetchの設定
 プロバイダに接続し3の(3)で書いたFetchを立ち上げます。設定はこんなところでしょうか
  

ここでOKをクリックすればサーバーに接続します。
public_htmlのウインドウが見えるはずです。

そのpublic_htmlの中に、上で作ったページ、画像を入れたフォルダーをドラッグし、送信が完了したら、ブラウザで自分のページアドレスに繋いでみましょう。きっと自分のホームページが見えるはずです。

詳しくは直江さんのページのここFetch についてをごらんください。


16更新
 もうここまで出来れば、後は更新をしていくだけです。
ぜひ、あなたのページを作ってください。

追記
 自分の覚え書きのつもりで作成しました。不十分なところや思い違いも多々あると思います。ご意見、ご要望を夢荘までメール戴けたら幸いです。

Mac初心者からMac初心者へ
夢荘ホームページに戻る