忍者ブログ
css.stylistのBlogコンテンツです
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

日曜日から札幌‥行く前に完成させておきたい、河ぶたです。

情報研のサイト、自分で更新しやすいようにサイトのデザインを一掃しよう!と思い立ったまでは良かったものの‥

情報システム」研究会なんて名前なもので、若干のいや相当のプレッシャーがあり、資格関係の勉強そっちのけ;3日がかりで出来たのが、ナビゲーション用のFLASHとトップページの大まかなレイアウト(Fireworksで部品を並べた)だけという進捗状況orz
CSSも全然書いてないし、僕はタイピングが遅いんだ 泣

この3日間以前にもウェブデザインの研究のためありとあらゆる企業やら学校やらのサイト構造を体系化して、まぁある程度の黄金比(?)のようなものを見つけ出した。
つまり(少なくとも国内の)ウェブデザイナーたちはそれぞれの個性を出しながらも暗黙の約束を遵守しているということ。

ただその約束事を言葉に直すのが難しくて、まだニュアンスでしかつかめてないんですな。
同サークルの論集にでも書こうかしら。

しかし、時間かけてソースとかも覗きながらサイトの研究してると、案外大手企業のページでも欠陥があったりして面白いね。
あとはDHTML+CSSを使ったナビゲーションが大半だったことに驚いた。
数年前までは、こんなでもなかったと思うんだけど…

下手な企業のオフィシャルサイトに負けないくらいのクオリティで作っています。
「小さな妥協を重ねない」
ウェブデザインの上で最も大切なことだと思っています。

新歓までに間に合うか!!?
作っていたアカペラサークルのサイトは一応の完成したのですが、SEO対策を全くしていないので、部ログの方にしばらく広告として貼っておきます。新歓時期が終わるまでかなぁ‥

[PR]高崎経済大学非公認アカペラサークルLULLABY
その前に一言。フレッシュプリキュア!来週の放送はイースたん回!!?
なんだこの超展開wwwwついていけねぇというか完全大きなお友達向けじゃないか!?
え、シ可ぶたです。

今日は先日スライスして書き出した画像をDreamweaverに取り込みました。

基本的にはCSSではなく、テーブルの中にテーブルを配置してレイアウトをしていきます。
あと、スライスしてある各画像にハイパーリンクを指定するのも楽ですねー。
ただ、ソフトでのページ構築には慣れてないので、やっぱりサイト内共通のcssは自分で書いて、各ページから呼び出した方が都合いい気もします。
とりあえずこんな感じで進んでます(まだ途中)

http://stylist.nobody.jp/lulla/

困るのは、<body>に対するCSSで中央配置を指定しているので、各段落<div>に左詰めの定義をしてやらないと、文字が全部中央寄りになってしまったり‥
まだまだ勉強不足なところは多々あります。これならソース手書きした方が楽かもorz
さて、サークルで引き受けたオフィシャルサイトの作成だが、感覚が鈍っているので肩慣らしに自分で立ち上げた非公認アカペラサークル"LULLABY"のサイト作成でウォーミングアップ。
あっ、河ぶたです。
友人も自分のサイト作るって聴いたので、その応援の意味も込めて、僕のサイト制作のメソッドをちょこっとお見せしようと思います。


高校時代に作ったウェブページは基本的に画像数枚をCSSで指定したボックスにはめて配置してました。
たとえば横の長さ200cm縦の長さ∞(ありえねー)の四角形を真ん中において、その中に横の長さ50cmの長方形を左詰めにおく。すると、もう一つ四角形をおくならその箱の横の長さxは1<x<150と自動的に決まりますよね?
そんな感じです。(伝わるのかな?)

このサイト作成のいいところは、ニュアンスでページのデザインを構築できるってとこでしょうか?(個人的にそう思うのだが)
ただし、RBGで指定できる基本色しか使えないため、安っぽいデザインになりがちなんですよね。
そんな悩みを払しょくしようと、写真素材を増やすと表示が崩れたり(配置が相対指定なので)することもしばしば‥


手書きでページを構築する限界を感じた河ぶたが今回のお仕事で取り入れるのが、Fireworks 8です。

FlashやStudioMXでおなじみのMacromedia社(現adobe社)のソフト。Flashになじんでいる河ぶたからすれば、UIは使いやすいことこの上ない。(レイヤーの操作に少し難ありだ‥)
まず「Flashでサイト作れよ」という批判は置いておく。(関数とかわかんねーんだ)


まずはこちらをご覧いただきたい。

http://stylist.nobody.jp/lu/

一枚の画像のようにも思えるが、ソースを見てもらえば分かるように、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"の曲名から‥
前のページ      次のページ
css.stylist
プロフィール
HN:
河ぶた(本名:海ぶた)
性別:
非公開
自己紹介:
北海道は函館で生まれ、心は群馬県民。
家の裏に小・中学校、女子高が密集している。犯罪者予備軍。
'10春基本情報技術者試験余裕でした(笑)

「css.stylist」開設前は中学時代「SOUL MUSIC(音楽サイト)」、「atCafe(コミュニティーサイト)」を運営。当時を知る人はどれほどいるのか…
Retrieval
Counter
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   さふログ - SurfLog   All Rights Reserved
Design by MMIT / TemplateB2  Powered by NINJA TOOLS
忍者ブログ [PR]