メイキングWebデザイン【初級編】６P

メイキングWebデザイン【初級編】Adobe GoLive & Live Motionではじめよう！

page:

４．代替テキストを入力しておく
画像の配置が終わったら、続けて「Altテキスト」すなわち「代替テキスト」を入力しよう。Altテキストとは、ブラウザが画像を読み込む途中、もしくはユーザの環境や設定により画像が読み込まれない場合などに、画像の代わりに表示される文字のこと。

「画像インスペクタ」の「基本タブ」にある［Altテキスト］に「Rainbow」など代替テキストを入力。これは必ず指定するように心がけたい

５．ナビゲーションのボタン配置を整理する
すべての画像を配置したら、「整列」パレットを使用して画像の位置を揃える。レイアウトグリッドに沿った配置に「整列」の機能を組み合わせると、正確なレイアウトが可能になる。Adobe Illustrator®の使用経験があれば「整列」の概念は簡単に理解できるはず。「まずページ上の画像をすべて選択する。「整列」パレットの［オブジェクトを整列］にある［左揃え］ボタンをクリックし、選択した画像の左辺を揃える。

整列パレットが表示されていない場合にはウインドウメニューで開いておこう。ボタンだけが並んだ左図は極端な例だが、きれいに整列させることができた

・Webデザインの潮流
・Webサイト全体の構造
・新規Webサイトを製作するための準備
・ナビゲーションの製作
・画像の配置と整列
・コンテンツページのレイアウト
・ページを仕上げる
・外部URLへのリンクと
Eメールリンクの設定
・各ページにリンクを張って
Webサイトを完成させる

メイキングWebデザイン
【初級編】
【中級編】
【上級編】

ダウンロード
・サンプルテンプレート
・フリーボタン素材
・印刷用PDF
・STEP1〜3 (PDF: 337KB/3 ページ)
・- GoLiveによるWebサイト構築
・STEP4〜8 (PDF: 530KB/5 ページ)
・- Rainbow Graphicsの製作過程
・STEP9〜10 (PDF: 272KB/3 ページ)
・- LiveMotionでアニメーション製作
・STEP11〜12 (PDF: 126KB/1 ページ)
・- サイトの完成、公開の準備

６．実際にブラウザを使ってプレビュー
GoLive上で「表示コントロール」やプレビュータブを利用してプレビューを確認することもできるが、正確にプレビューするためには、実際にブラウザで表示する必要がある。「環境設定」で指定しておけば、ツールバーの「ブラウザ表示」ボタンをクリックするだけでプレビューが可能。まず、「編集メニュー＞環境設定...」を選択し、「環境設定」ダイアログを開く。画面左側のリストから［ブラウザ］をクリックし、表示される画面で［追加...］ボタンでプレビューに使用するブラウザを選択していく。また、マシンに入っているブラウザをすべて追加したい場合は［すべて検索］ボタンを押せばよい。
環境設定

トップに戻る

back

‐

当Webサイトをご利用のお客様は、利用規約*にご同意いただいたものとみなされます。