さて、サークルで引き受けたオフィシャルサイトの作成だが、感覚が鈍っているので肩慣らしに自分で立ち上げた非公認アカペラサークル"LULLABY"のサイト作成でウォーミングアップ。
あっ、河ぶたです。
友人も自分のサイト作るって聴いたので、その応援の意味も込めて、僕のサイト制作のメソッドをちょこっとお見せしようと思います。
高校時代に作ったウェブページは基本的に画像数枚をCSSで指定したボックスにはめて配置してました。
たとえば横の長さ200cm縦の長さ∞(ありえねー)の四角形を真ん中において、その中に横の長さ50cmの長方形を左詰めにおく。すると、もう一つ四角形をおくならその箱の横の長さxは1<x<150と自動的に決まりますよね?
そんな感じです。(伝わるのかな?)
このサイト作成のいいところは、ニュアンスでページのデザインを構築できるってとこでしょうか?(個人的にそう思うのだが)
ただし、RBGで指定できる基本色しか使えないため、安っぽいデザインになりがちなんですよね。
そんな悩みを払しょくしようと、写真素材を増やすと表示が崩れたり(配置が相対指定なので)することもしばしば‥
手書きでページを構築する限界を感じた河ぶたが今回のお仕事で取り入れるのが、
Fireworks 8です。
FlashやStudioMXでおなじみのMacromedia社(現adobe社)のソフト。Flashになじんでいる河ぶたからすれば、UIは使いやすいことこの上ない。(レイヤーの操作に少し難ありだ‥)
まず「Flashでサイト作れよ」という批判は置いておく。(関数とかわかんねーんだ)まずはこちらをご覧いただきたい。
一枚の画像のようにも思えるが、ソースを見てもらえば分かるように、8枚の画像を組み合わせて一枚に見えるようにしている。
まずFireworksで一枚絵(?)を描いたあと、同ソフトでその絵をスライスしていく。
そのまま書き出し。今回は8枚に分割されたjpegとhtmlが生成される。
以下イメージの書き出しの際自動生成されたHTMLテーブルの一部。
<tr>
<td colspan="3"><img name="TITLE_r1_c1"
src="TITLE_r1_c1.jpg" width="760" height="45" border="0"
id="TITLE_r1_c1" alt="" /></td>
<td><img src="spacer.gif" width="1" height="45" border="0"
alt="" /></td>
</tr>
<tr>
<td rowspan="5"><img name="TITLE_r2_c1"
src="TITLE_r2_c1.jpg" width="53" height="335" border="0"
id="TITLE_r2_c1" alt="" /></td>
<td><img name="TITLE_r2_c2" src="TITLE_r2_c2.jpg"
width="143" height="47" border="0" id="TITLE_r2_c2" alt=""
/></td>
<td rowspan="5"><img name="TITLE_r2_c3"
src="TITLE_r2_c3.jpg" width="564" height="335" border="0"
id="TITLE_r2_c3" alt="" /></td>
<td><img src="spacer.gif" width="1" height="47" border="0"
alt="" /></td>
</tr>
<tr>
(以下すべてのスライスに対して同様にテーブルで絶対位置指定)
こんな感じで、ブラウザ上で一枚絵に見える絵を、ファイルでは8つに分割できるわけ。
これってどういうことかって言うと、分割した一つ一つにHTMLやcssの定義ができるってこと。
一枚のjpeg上にリンクが散在している状態を作り出せるてな訳だ。
ただこの<table>タグをうまくCSSと共存させながら組み込まなければならない。
Dreamweaverが使い慣れていればもっと楽に組み込めるのに‥orz
高校時代からFireworksは使っていたけど、実際スライスを切ってページを作ろうとはしなかったんだよな‥「ソフトは使わない」って意地だったのかもしれないがww
まぁ明日にはアカペラサークルのページがいっちょ上がりってわけだ。
ウェブデザインについてしっかり勉強したわけじゃないからウェブ標準とか考えなしに作ってるのはいただけないが(知らん)
ちなみにサークル名の"LULLABY"はうちらメンバーの崇拝するTAKE6へのリスペクトを込めて、彼らのアルバム"JoinTheBand"の曲名から‥