ウェブZYCO'S > ウェブ・トリック:DynamicHTML > Make a window

時間を用意してがっちり取り組みたいのがDynamicHTMLだ。

いくつかのサンプルをやっつけて少し分かったような気分でいるけど、まだまだ万全ではない諸君も多いと思う。

結構こんな人多いんじゃないかと思えるのが、以下のタイプ。

CSSはテキスト関連だけで済ませてるからその先はぼやけてる、レイアウトはガチガチにテーブル組んでGIFやテキストを流し込んでいる。そんなのが日常だからややこしいDynamicHTMLへと頭を転換させるのはどうも苦痛を伴なう。

皆そうなのだ。何かのきっかけが必要だろ?そこで、これはと思える題材を見つけた。リンクをクリックして開くウィンドウを一から作るというものだ。これならもしかして、少しは前進できるかもしれない!そういう期待感で取り上げてみた。

まずは、右ののリンクボタンをクリックしてみてくれ。ひとつひとつのウィンドウパーツは全てオリジナルが可能だ。アクティブウィンドウも実現できる。

    Reference link : BrainJar.com

Make all

一からウィンドウを構築する

HTMLとCSSのコンビネーションがウィンドウを構築するためのコンポーネントとして使用されてる。本ページを保存してそのソースを参照する準備をしよう。

ソース上部の"STYLE type="の記述がウィンドウのデザイン部分を担当している。簡単に理解するために、2番目の記述からひとつひとつスタイルの記述を削除してその都度表示される状態を確認すること。 1番目を最初に削除するといきなりレイアウトが壊れるので、これは最後だ。何とか仕組みが分かってきたら、 今度はそのスタイルを変更してみよう。ピクセル(px)やカラー(#404040など)を変更して表示を確認していくと理解が早い。
本編ではオリジナルに対してウィンドウを構成するためのタイトル部分に透過gifを使っている。ふたつのウィンドウを開き、 一方をクリックすることによりウィンドウをアクティブにすることができる。最小化、クローズなどのボタンにはイメージマップが 設定されている。そう、全てのコンポーネントのオリジナルが可能なのだ。

さて、ここまできたら本家リファレンスでゆっくり学習することを勧める。BrainJar.comでは丁寧な解説ページが10ページ用意 されているので、ひとつひとつ取り組んでいこう。

::: Smokey :::

Smokey,you're not my sky
I realy want to say good-by
Money was all your lies
Wish I knew the reason why
Cuz my head is clear
All the time I'm free,in my life

Music is like a star
Shinin' bright from a far
Music It's just a pole star
Find a way with my guitar
I've got to know my direction
And I know there's no connection with my action

Somethin blowing in my brain
Feel so good and there's no pain
Find myself in the rain
While my friends keep me sane
And I know it ain't no good
When I'm standing in the sun like a fool

-Music by Char-