Web
  メイキングWebデザイン【初級編】Adobe GoLive & Live Motionではじめよう!
page: 1 2 3 4 5 6 7 8 9 10 11 12
外部URLへのリンクとEメールリンクの設定 KEYWORD リンク、外部参照
Webサイトをつくるなら、リンク集はおさえておきたい。また、サイトを見た人が作者にメールを送れるよう、準備しておくのも必須。


1.テキストベースのリンク集をつくる
題材となるサイトには「link」ページを用意した。これは文字通り別のサイトへのリンク集ページ。基本的なつくり方はこれまでと同様なので、「what's new」などの制作方法を参照してほしい。ここでは、自分のWebサイト以外のお気に入りのサイトや訪問者に見てほしいサイトへのリンクの張り方について説明していく。なお、自由にリンクを張っていいと明記されているWeb サイトも数多いが、そのサイトの持ち主にメールで確認をとるべき場合もあることを覚えておこう。

2.[新規リンク]をクリック
ここでは、もっとも簡単な外部リンクの張り方を紹介しよう。テキストでリンク先の名前を入力したら、その文字列を選択する。「テキストインスペクタ」の「リンクタブ」を選び、チェーンのようなマークの[新規リンク]ボタンをクリック。すると、インスペクタのリンクタブに「(Empty Reference!)」と表示が出るので、その枠内にリンク先のURLを入力する。たとえば、「MdN Graphic Server」にリンクを張るなら、この枠には「http://www.MdN.co.jp/」と入力すればいい。
外部リンクの張り方
リンクがされると、ドキュメントウインドウ上の文字列が青い表示に変化する
外部リンクの張り方
実際に、ブラウザでリンク先を表示させて、アドレスバーなどからコピー&ペーストすると確実
外部リンクの張り方



3.リンク先を別ウィンドウで開く
「リンクタブ」ではもうひとつ設定しておこう。このタブにある[ターゲット]は[初期設定]から[_blank]に変更し、リンク先が別ウインドウで開くようにしておいた。

インスペクタのリンクタブ サイトに訪れた人がいずれかのサイトの名前をクリックしたとき、[初期設定]のままではいま開いているブラウザウインドウにリンク先のサイトが表示されてしまう。この設定を[_blank]にしておけば新しく別のウインドウが表示され、そこにリンク先のWebページが現れるので、自分のWebサイトはそこに表示されたままになる


4.「外部参照タブ」を使ったリンク設定
後々の更新作業やURL管理まで考えると、さらに有効な方法がある。まず、「サイトウインドウ」の「外部参照タブ」を選択し、「オブジェクト」パレットの「サイトタブ」か[URL]アイコンをドラッグして「外部参照タブ」に入れる。
「外部参照タブ」を使ったリンク設定 「外部参照タブ」を使ったリンク設定
「untitled URL」という新しいURLが追加される。まずはこのURLの名前を決めておこう
インスペクタが「参照インスペクタ」に変化しているので、その[URL]に、そのサイトのURLを入力。あとは前項で説明したように、「リンクタブ」を選んで[新規リンク]ボタンをクリック。ここで「ポイント&シュート」を使い、「外部参照タブ」のURLにつなげる。
参照インスペクタ 「外部参照タブ」に登録した場合、「参照インスペクタ」の[URL]だけを変更すれば、サイト内でその項目を使っているすべてのファイルが更新されるので、作業の効率アップにつながる
参照インスペクタ


トップに戻る


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