X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

DreamweaverのCS5での絶対位置のDivにGoogleマップを挿入する
Google翻訳で翻訳さ

Check out our Dreamweaver courses!

我々は、すべては疑いようの場所を検索するには、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.


Check out our Dreamweaver courses!

David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

Aug 15, 2011
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.
Sep 02, 2011
David Smith
You are absolutely right Skye, thank-you
Aug 08, 2012
Dear author,

I want to express my sincere thanks of this useful article.
Aug 27, 2012
David Smith
Thank-you
Apr 04, 2013
elisabetta
grazie
Apr 05, 2013
David Smith
Prego
Jun 18, 2013
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.
Aug 15, 2013
Dennis
Thank you so much. I have bookmarked your page for future reference. Valuable info!
You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link