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」のページ用に新しいフォルダをつくる。「rainbow.site」が「サイトウインドウ」に表示された状態で「サイトメニュー>新規>フォルダ」を選択、すると、「ファイルタブ」に新規フォルダが作成される。このフォルダは「new」という名称にした。

サイトメニュー
ファイルタブ
ツールバーの「新規フォルダ」ボタンをクリックして、新規フォルダを作成することもできる
サイトウインドウ


2.「what's new」用の新規ページを作成
新規Webページを作成
次に「ファイルメニュー>新規」で、新規Webページを作成する。ここでも、ナビゲーションをつくったときと同様、はじめにページタイトルを「Welcome to Adobe GoLive 5」を「Rainbow I what's new」に変更しておこう。「ページ」アイコンをクリックし、インスペクタで[左右のマージン]と[上下のマージン]を[0]に設定しておく。
新規Webページを作成


3.ページを保存して画像をサイトウィンドウに取り込む
ここでファイルを保存しておこう。保存先は「lessonフォルダ>rainbow folder>rainbow>new」を選択し、ファイル名は 「index.html」で保存。続いて「what's new」のページに配置する画像もサイトウインドウに取り込んでおこう。この「what's new」で使用する画像類も、ナビゲーションのときと同様「images」というひとつのフォルダにまとめてある。「Parts」フォルダに入れてあるので、これを取り込もう。「Parts」フォルダ>new>Images」フォルダを選択した状態で、サイトウインドウの「ファイルタブ」内の「new」フォルダにドラッグする。以上で配置する画像の取り込みが終了。
メイキング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 ページ)
- サイトの完成、公開の準備

  「サイトウインドウ」で「new」フォルダを確認すると「index.html」と「images」フォルダが追加されていることがわかる
画像をサイトウィンドウに取り込む


トップに戻る


back next
画像をサイトウィンドウに取り込む