Web
  メイキングWebデザイン【初級編】Adobe GoLive & Live Motionではじめよう!
page: 1 2 3 4 5 6 7 8 9 10 11 12
ページを仕上げる KEYWORD コンポーネント
それでは実際に、新規ページを加えてGoLiveで制作してこう。


1.イラストを配置する
what's new」は更新状況を知らせるためのページなので、マイクを もったイラストや、ページタイトルである「what's new」のロゴなども用意しておく。

イラストの配置
これらを配置する際には、前述の通りポイント&シュートドラッグ&ドロップなどを使えばいい。画像を読み込んだら、必ずAltテキスト(代替テキスト)を設定しよう

2.ツールバーの水平/垂直位置を使う
ツールバーの水平/垂直位置を使う ツールバーの[水平位置]や[垂直位置]を使えば、画像の位置を座標ベースで指定することができる。たとえばマイクをもったイラスト(ill_01.gif)を[水平位置:180 ]として(左図)、「what's new」のロゴ(new.gif)や細い飾りケイ(line.gif)も同様に[水平位置:180]にすれば、左揃えにすることができる。


3.テキストボックスの配置方法
GoLiveの「テキストボックス」をレイアウトグリッドに配置し、その中にテキストを書き込めばページ上の正確な位置にテキストを配置することができる。やり方はほかと同様、まず「オブジェクト」パレットの 「基本タブ」にある「テキストボックス」アイコンをドラッグしてページ上に配置し、そこにテキストを入力すればいい。

テキストボックスの配置


トップに戻る


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