Adobe
サインイン 注文状況 ユーザー登録
 
Web
  メイキングWebデザイン【初級編】Adobe GoLive & Live Motionではじめよう!
page: 1 2 3 4 5 6 7 8 9 10 11 12
画像の配置と整列 KEYWORD ポイント&シュート 整列パレット
GoLiveで画像を配置するにはいくつかの方法がある。視覚的にわかりやすい方法もあれば、ドラッグによる手軽な方法もあるので、ここで一通り把握しておこう。またプレビューの仕方もここで説明する。


1.ポイント&シュートで画像を配置
はじめに「ポイント&シュート」による方法を見ていこう。まず、「オブジェクト」パレットの「基本タブ」にある「画像」アイコン(?マーク)をページ上のレイアウトグリッドにドラッグ。そうするとレイアウトグリッド上に画像を配置するための「プレースホルダ」(?マークの四角形)が表示される。

ポイント&シュート ポイント&シュート
インスペクタは「画像インスペクタ」に変わり、「基本タブ」を見ると[ソース]に[(Empty Reference!)]と表示さているが、これは「プレースホルダ」に対して画像ファイルが指定されていないという意味
画像インスペクタ


2.ポイント&シュートの使い方
それでは「ポイント&シュート」を使用して画像を設定していこう。「基本タブ」の[ソース]右側にある渦巻きのようなマークが「ポイント&シュート」ボタン。これをクリック&ドラッグすると、そこからラインが伸びる。このラインを引っ張って「サイトウインドウ」の「Images」フォルダ内にある目的の画像につなげてやる。これで画像の貼り込みは完了。ボタンがページに読み込まれ、「画像インスペクタ」の[ソース]に画像が存在する場所が表示される。

メイキング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 ページ)
- サイトの完成、公開の準備

ポイント&シュートの使い方


3.直接ドラッグして画像を配置
もうひとつの画像配置方法が、ドラッグによるものだ。まず、これまでと同様に「画像」アイコンをページ上に配置し、「画像プレースホルダ」を作成する。このホルダに、「image」フォルダから目的の画像をドラッグ&ドロップするだけで画像が貼り込まれる。慣れてしまえば、これがいちばん簡単な方法だ。「画像プレースホルダ」を、Commandキー(Mac)もしくはAltキー(Windows)を押しながらドラッグすると、「ポイント&シュート」のときと同様にラインが伸びる。これを引っ張って「image」フォルダ内の目的の画像にドラッグする、ショートカットによる画像の配置法もある。 直接ドラッグして画像を配置


トップに戻る


back next
ポイント&シュートの使い方