髭仙人の漫ろ歩き
T-AMMA
............................ unworldly man go for a ramble in the internet world ...
マイ・ホームページの変遷
 Webサーフィンで「Webサイトを師」として


 多少ホームページ関連の書籍を参考にしましたが、結局「Webサイトを師」として学んできました。気に入ったホームページ、特にデザインの良質なサイトと技術的な解説サイトを身近に置いて、一段一段階段を上るようなやり方で進めてきました。
 最近、やっともう少し基礎から学び直そうと関連書籍を数冊購入して、現在「スタイルシート」を学び始めたところです。次に「JavaScript」や「Webデザイン」を予定しています。そして、ソフトの方も本格的に「Dreamweaver」、「Flash」や「Painter」などを勉強しようと予定をしています。

 ・ホームページ作成の総合的な支援サイトとしては
   「ホームページ作成無料リンク集」などは便利なサイトです。

 ・技術的な解説サイトとしては
   「とほほのWWW入門」や「ZSPC」を勧めします。

 ・デザインの良質なサイトとしては
   「GAUCHO.com」、「DesignFesta」、「Macromedia」など。

 特にデザインの優れたWebサイトに出会うには、国際的な検索エンジンで「fashion」とか「design」など思いついたままのKeyWordで検索する。また最近はメールマガジン(HOMEPAGE Clip)などで定期的に提供してもらうのも便利です。

 尚、これまでの変遷を、下記のようにWord時代から現在改定中の最新まで掲載しました。各画面にサイトをリンクしてありますので、クリックしてください。

 

 
最初は「Microsoft Word」で作成  
 結構便利なWordの Web ページ作成機能


 初めてホームページを作成したのが、Wordでページを作成して、ただ「Webページで保存」を選択しただけでした。それでも、フレームを使用したり、ロゴを利用したりして楽しみながら挑戦しました。

Wordで作成した初期のHP Wordで編集・保存し、IEで表示して確認の繰り返しで、HTMLのソースを見たり、手を加えることはほとんどありませんでした。
 左のページは始めて3年目程の、Word時代の最終段階のページです。それでもその間に3回程改定し、なんとなくWordの限界を感じ、ホームページ作成ソフトに気持ちが揺らぎ出していました。

 今回、Wordの機能を再確認して、「フィルタ後の HTML」の意味を初めて知りました。もう少し早く知っていたら、HTMLの記述も編集も相当変わっていたかも知れません。後の祭りです。


フィルタ後の HTML の使用について(Wordのヘルプより抜粋)

 Word で Web ページを HTML 形式で保存したり、電子メール メッセージを送信した場合、そのまま Word の全機能を使用してコンテンツの編集ができるように、タグが自動的に追加されます。
 HTML 形式の Web ページや電子メール メッセージのサイズを小さくするには、フィルタ後の HTML 形式で保存します。これにより、Office プログラムで使用されるタグが削除されます。
 フィルタ後の HTML形式で保存された Web ページを Word で 開くと、文字列や全般的な外見は保存されていますが、ファイルを編集する際、通常の方法では一部の Word 機能を使用できない場合があります。たとえば、箇条書きや段落番号の外見は保持されますが、箇条書きに関連する一部の Word 機能は保持されません。

 Word で Web ページの編集を終了するときは、できるだけ、フィルタ後の HTML 形式で Web ページを保存してください。ただし、Web ページの基になる HTML が重要ではない場合には、標準の Web ページとしてファイルを保存してください。
 後になってファイルを編集する必要が生じた場合に備えて、Word 形式と、フィルタ後の HTML 形式の 2 つのファイルを保持しておくことができます。Word 文書の内容を編集し、これを将来の編集に備えて Word 形式で保存してから、このファイルのコピーをフィルタ後の HTML 形式で保存しておきます。

 サンプルとして二つの保存形式を紹介いたします。「ソース」でHTMLの記述を比較して下さい。簡単な内容ですが、容量でも下記のように差があります。

・WebページWordとHTML1.htm  (6.2KB)
・Webページ(フィルタ後) WordとHTML2.htm (1.7KB)

 

 
純粋に「HTML」でホームページに挑戦  
 簡単なHTMLリファレンスでホームページを作成


 HTMLリファレンスで基本的な要素を利用して、フレーム、画像、音楽、リンクなどを試しました。コンテンツはともかくとして、春夏秋冬と4つのブロックに分けた、それなりにまとまりを持ったページに出来上がった。これまでのWordのソースとは比較にならないほど簡素な記述には驚きました。

メモ帳でHTML言語のHP このページでは各ページの写真にひとつか二つ入り口を設け、サブページにリンクしています。
「前ページ」や「後ページ」への移動は各ページ下の「左右に向いた犬の画像」をクリックしてください。

 HTMLリファレンスは「とほほのWWW入門」や「ZSPC」を参考にしました。
 ウインドウを複数開いて解説を見ながら、記述文をコピーして、直ちに実行して、編集と、書籍を見ながら編集するより効率よく作業が進みました。

 

 
「ホームページ・ビルダー」や「DREAMWEAVER」にも挑戦  
 ホームページの作成支援ソフトを利用


 ホームページの作成支援ソフトとして、「ホームページビルダー」と「Dreamweaver」を使ってみましたが、「ホームページビルダー」は初心者向けには都合の良い便利なソフトと評価しましたが、本格的なホームページを構築するには物足りなく、結局今後のホームページ作成は「Dreamweaver」をベースにすることにしました。

Dreamweaverで作成したHP ホームページの作成にあたって、Webサイトの作成を支援するサイトが結構あります。レイアウトやデザインなどと総合的なものや色彩などに限定したサイトもあります。

 また、「IXS NET」のリンクの素材では国内や海外の素材サイトが精舎意されています。そして色彩面では「配色事典」・「続・配色事典」などが参考になり便利です。

 その他、背景と文字の関係、例えば文字の色や大きさもなかなか難問で、最近は見栄えもよいので、小さなフォントを使用す傾向がありますが、小さすぎるのは読み手には苦痛となります。

 

 
最新作は「現在進行中」  
 色数を減らして、落ち着いたシックな感じを期待しましたが


 これまではブロックごとに色を定め、現在位置を色で見極められるとの配慮をしてきましたが、その反面少々けばけばしいように感じて、色数を極端に減らし中間色を選びました。

Dreamweaverで作成した最新のHP デザインや色彩はデジタルな数値で設定していますが、最終的には受けての環境に左右されます。

 受け手の環境はハードやソフト面で多岐にわたります。極端な言い方をすれば、100%同じものを提供するのには「メモ帳のANKによるText文」になってしまうでしょう。これは時代の流れに逆らう行為で、決して同調できない。

 最近は、「StyぇSheet」や「JavaScript」を勉強中で、このサイトは製作中ですが、是非調理して盛り合わせしたいと思います。

 

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/