Web
  メイキングWebデザイン【初級編】Adobe GoLive & Live Motionではじめよう!
page: 1 2 3 4 5 6 7 8 9 10 11 12
ナビゲーションの製作 KEYWORD コンポーネント、レイアウトグリッド
まずナビゲーションの部分から制作をはじめよう。ここで重要になる機能が同じ素材を何度もつくる手間を省略できる「コンポーネント」。


1.コンポーネントとは?
Rainbow Graphics」には、オープニングアニメーションが入るトップページを除き、すべてのページの左側にナビゲーションを配置する。共通の要素(ここではナビゲーション部分)を複数のページに配置する場合に便利な機能が「コンポーネント」。GoLiveではHTMLページ内に、他のHTMLページを、テキスト、画像、その他の視覚的コンテンツが含まれた状態で埋め込むことができる。この埋め込まれているHTMLファイルがコンポーネントで、コンポーネントに対して加えられた変更は、それを配置しているすべてのページに反映される。つまり、ナビゲーションのボタンをひとつ増やす際に全部のページを更新しなくても、コンポーネントのファイルのみを修整すればすむというわけだ。


2.ナビゲーション用のWebページをつくる
それでは、実際にコンポーネントの機能を生かしたナビゲーションの制作に移ろう。まず、最初につくった「rainbow folder」からいったん離れて、「ファイルメニュー>新規」で新しいWebページを作成する。ファイルが開いたら、ドキュメントウインドウの上の方にある「ページタイトル」の内容を変更しておこう。

ページタイトル変更
初期設定では「Welcome to Adobe GoLive 5」になっているので、ここでは「Rainbow I Navigation」に直した


3.Webページのサイズを設定する
まずはドキュメントウィンドウの右下にある「ウインドウサイズの変更」プルダウンメニューから「780(17インチモニタ)」を選択する。次に左上にある「ページ」アイコンをクリックし、インスペクタを「ページインスペクタ」に変える。ここで[左右のマージン:0 ]、[上下のマージン:0 ]と入力した。

ウインドウサイズの変更
インスペクタを表示していない場合には、「ウインドウメニュー>インスペクタ」で開いておこう
ページインスペクタ


4.コンポーネントに指定
ここで「ページインスペクタ」の「HTMLタブ」の中にある[コンポーネント]ボタンをクリック(すぐ上にある[JavaScript]のチェック項目が切り替わる)。ここまで設定できたら一旦ファイルを保存する。

HTMLタブ
ファイル保存ダイアログ
保存先には、最初につくった「lesson」の中の「rainbow folder>rainbow.data>Components」を選択する。ファイル名は「navi.html」とした


トップに戻る


back next
メイキングWebデザイン【初級編】
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 ページ)
- サイトの完成、公開の準備