All Articles Dreamweaver
DreamweaverのCS5での絶対位置のDivにGoogleマップを挿入する
David Smith on Mon, August 15th 8 comments
Integrating GoogleMaps in to your website is all the rage in the web design world. It's also quite straightforward to do in Dreamweaver. David Smith, Authorised Adobe Trainer, shows you how.

我々は、すべては疑いようの場所を検索するには、Googleの優れた検索機能を利用さそうだ。それはあまりにも、人々があなたの場所を見つけるのを助けるためにそれらを使用できるように素晴らしいと思いませんか?実行する場合しかも、それは彼らがあなたのWeb​​ページの快適性を残すために持っていないこと、さらに大きなのではないでしょうか?それは実際に行うには非常に簡単ですDreamweaverの


ステップ1 - グラウンドワークの準備

ファイル :Dreamweaverで、私はこのために新しいページを作成するつもりです

New Page.

新しいページ。


ページ上で私はページに私のマップを保持するために絶対位置のDivを作成することによって開始するつもりです。まず、実際のページを見ることができるようにページビューがデザイナーに設定されていることを確認してください。

Design View Button.

デザインビューボタン。


挿入パネルからカテゴリのような一般的な選択と"絶対位置のDivを描画"を選択します。

Draw AP Div button.

絶対位置のDivのボタンを描画します。


このカーソルが十字線が表示されます。十字線をページのどこかにボックスを描画します。それは、マップが表示されるのを確認したいサイズにしてみてください。これは後で微調整することができます。

AP Element on screen.

画面上にAPエレメント。


このボックスは、マップが含まれます。私はマップにはこのボックスを作成した理由は、私はそれを変更することができる容易さです。ボックスの左上隅にある小さな白い四角をつかんで、私はどこボックスの位置を変更することができます。

プロパティパネルでのDivのプロパティが表示されます。 "MapBox'にIDを変更し、Wを設定します。

Properties Panel.

[プロパティ]パネル。


ステップ2 - マップを挿入する

Googleマップを使用して場所を検索するWebブラウザを使用してください。私はグラスゴーに使用するトレーニング室を検索しました。

Glasgow Google Map.

グラスゴーGoogleマップ。


Googleの地図上の右上隅にあるいくつかの小さなアイコンがあります。と呼ばれるもののリンクをクリックすると、それを開きます。

Goole map link button.

Googleマップのリンクボタン。


そしてそれをコピー"のウェブサイトに埋め込むためのHTML貼り付け"とマークされたボックス内のすべてのコードを選択します。

ヒント:それをすべて選択するにはコード上で立て続けに3回をクリックし、コピー( コマンド+ C)を使用すると、いずれかを見逃していないことを確認する。

Google Map Insert Code.

Googleマップのコードを挿入。


このコードは、iframeを(挿入フレーム)を使用して絶対位置のDivの中のあなたの場所の完全にインタラクティブなGoogleマップでこのページを再表示できるようになります。

Dreamweaverで私たちの絶対位置のDivのMapBoxにこのコードを挿入するには、間にコードビューに貼り付けます

ヒント:点滅するカーソルが内側に位置するようにコードが正しい位置に挿入されていることを確認する最も簡単な方法は、デザインビューにページ上のMapBox絶対位置のDiv内をクリックして切り替えることです。

Code View Cursor.

コー​​ドビューのカーソル。


設計とコードの両方を確認するには、[Viewを分割に切り替えます。カーソルが正しい、オープンとクローズのdivタグの間点滅します、あなたは( コマンド+ V)のコードを貼り付けることができます。


ステップ3 - プレビュー

Dreamweaverのライブビューと対話型のマップ上のスイッチは、MapBox本部内のページに表示されます。

Map Page.

地図のページ。


いつでも、パラメータを有効にするライブビューをオフに切り替えることを確認、必要に応じてMapBox部のサイズを変更するプロパティパネルを使用することができます。

あなたが困難な課題を空想なら、あなたはまた、国境、背景などでMapBoxをフォーマットするカスケーディングスタイルシート(CSS)を使用することができますが、それは別の記事です。


Learn more about Dreamweaver here.


Comments (8)

You must be logged in to comment.

  • Dennis
    Thank you so much. I have bookmarked your page for future reference. Valuable info!
    • 5 years ago
    • By: Dennis
    Reply
  • Skye
    For non Dreamweaver users, just a note that an AP Div is just a div with absolute positioning (AP). If you look at the source code image you can see the absolute positioning style that Dreamweaver has applied to the div.
    • 7 years ago
    • By: Skye
    Reply
  • David Smith
    You are absolutely right Skye, thank-you
    • 7 years ago
    • By: David Smith
    Reply
  • Dear author, I want to express my sincere thanks of this useful article.
    • 6 years ago
    • By:
    Reply
  • David Smith
    Thank-you
    • 6 years ago
    • By: David Smith
    Reply
  • elisabetta
    grazie
    • 6 years ago
    • By: elisabetta
    Reply
  • David Smith
    Prego
    • 6 years ago
    • By: David Smith
  • Sandra
    Hello there, I need some help. I want to create a structure with 4 frames: Left, Top, Main and Right. In the top frame I have a Banner, in a table, and I want to insert a Spry Menu Bar. The problem is, if I want in that Spry a Vertical Menu it doesn't shows up in the main frame. How do I make it visible? Best regards.
    • 5 years ago
    • By: Sandra
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: