ここ山梨は最近蒸し暑かったり、寒かったり、日差しが強かったり、雨だったり…
体調も崩しがちな時期ですが、皆さんはいかがお過ごしですか？
WDSの受講生はそんな気候にも負けず、今日も元気に授業を終えました
今日は一日かけて画像編集ソフトFireWorksとIllustratorからのHTMLの書き出し作業
作業の流れは基本的にはどちらも同じです。
（１）ツールメニュー内のスライスツールを使って書き出す画像範囲を選択します
（２）範囲選択が終わったら、メニューからそれぞれ書き出しのプレビュー（FireWorks）、Web用に保存（Illustrator）を選択
（３）全スライスの書き出し・HTMLの書き出し → OK
（４）あとは出来上がったHTMLファイルをHTML編集のソフトで手直しします
ソフトが自動的に書き出してくれるHTMLファイルはちょっと複雑で、ファイル自体が重くなってます
色んなところにいっぱいspacer.gifが入っていたりするんですよ
それを手動でレタッチしてあげれば、後々の編集作業能率もアップ
ファイルも軽くてバッチリ
複雑なレイアウトなら、最初から頭をひねって難しいレイアウトを組むよりはこういったソフトからHTMLファイルを書き出して、編集した方が早く終わる場合が多いです。
でも手動での編集はソースコードをある程度理解していなければ難しいんですよね=3
でも、試行錯誤で複雑なファイルを手直ししていくことでHTMLの勉強にもなるし、結構オススメですよ
ただし、Illustratorはスライスでの書き出しに対応しているバージョンは10以上なのでご注意！
ある程度、形になったら画像ファイルを良く見てみましょう
きれいなグラデーション画像がgif形式で保存されていて劣化したりしていませんか？
逆に、きれいなベタ塗りのボタンなどをjpg形式で保存して汚くなっていないでしょうか？
気になるところを発見したらスライスを切った画像ファイルを再び開いて…
きれいに保存し直したい部分だけを選んで適切なファイル形式で保存し直してあげましょう。
あとはソースコードで画像のリンクを修正して、完成
簡単に終わってしまいましたが、実は今回はその作業の中でスタイルシートを適用してみたり、ロールオーバーボタンを設定したりなどなど
今までの復習を織り交ぜての授業内容だったので、皆さんトイレに行くのも忘れるくらい必死にパソコンに張り付いておりました
ほんとに時間があっという間に過ぎちゃったなぁ
今日はこんなところでしょうか。
あ！忘れてた！
今日の先生の大事な一言「画像サイズは最小範囲で書き出そう！」
ユーザーに優しいページ作りのため、自分のHTMLの勉強のためにも重要な一言でした～
それでは皆様、また来週
この記事へのコメントはありません。