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

Kostenlose Premium-Zugang

Rufen Sie unsere gesamte Bibliothek von Premium-Hub Artikel, Projekt-Dateien und die ersten 10% des jeweiligen Tutorial-Video aus dem Online-Tutorial-Bibliothek .

Erstellen Sie jetzt Ihren kostenlosen Zugang!

Einfügen einer Google Map in eine AP-Div in Dreamweaver CS5
Übersetzt von Google Translate

Wir haben alle keinen Zweifel Google ausgezeichnete Map Anlage genutzt heraus zu suchen Standorten. Wäre es nicht toll, dass man sie benutzt, um den Menschen helfen, finden Sie Ihre Standorte, auch? Was mehr ist, wäre es nicht noch größer, wenn zu tun, dass sie nicht auf den Komfort Ihrer Webseite zu verlassen? Es ist wirklich sehr einfach zu tun, in Dreamweaver .


Schritt 1 - Vorbereitung der Grundlegung

In Dreamweaver Ich werde eine neue Seite für diese zu schaffen: File

New Page.

New Page.


Auf der Seite werde ich durch die Schaffung eines AP-Div auf meine Karte in die Seite belegt, beginnen. Stellen Sie zunächst sicher, dass Ihre Seite sehen zu können Designer eingestellt, so dass Sie die aktuelle Seite sehen können.

Design View Button.

Design-Ansicht Button.


Von der Insert-Panel wählen Gemeinsame auch die Kategorie, und wählen Sie "AP Div zeichnen".

Draw AP Div button.

AP Div zeichnen Taste.


Sie Cursor zeigt nun ein Fadenkreuz, mit dem Fadenkreuz zeichnen Sie ein Feld irgendwo auf der Seite. Versuchen Sie es von der Größe Sie sehen möchten, Ihre Karte angezeigt hatte. Es kann später optimiert werden.

AP Element on screen.

AP-Element auf dem Bildschirm.


Diese Box enthält die Karte. Der Grund warum ich dieses Feld erstellt haben, für die Karte ist die Leichtigkeit, mit der ich es ändern kann. Grabbing das kleine weiße Quadrat in der linken oberen Ecke der Box ermöglicht es mir, die Box irgendwo neu zu positionieren.

In der Properties Panel der Div-Eigenschaften wird angezeigt. Ändern Sie die ID zu "MapBox" und stellen Sie den W

Properties Panel.

Properties Panel.


Schritt 2 - Einsetzen der Karte

Verwenden Sie Ihren Web-Browser zu einem Standort mit Google Maps-Suche. Ich habe die Ausbildung Büro benutze ich in Glasgow gesucht.

Glasgow Google Map.

Glasgow Google Map.


Auf der Google Map gibt es einige kleine Icons am rechten oberen Ecke. Mit einem Klick auf die sogenannte Link öffnet es.

Goole map link button.

Google Map Link-Button.


Wählen Sie den gesamten Code in das Kästchen "HTML-Code zum Einbetten in eine Website" und kopieren Sie sie.

Tipp: Klicken Sie 3 mal schnell hintereinander auf den Code, um alles auszuwählen, dann kopieren (Befehl-C), um sicherzustellen, dass Sie nicht verpassen.

Google Map Insert Code.

Google Map einfügen Code.


Dieser Code ermöglicht die Wiederverwendung Anzeige dieser Seite in der voll interaktiven Google-Karte von Ihrem Standort innerhalb des AP-Div mit einem iframe (Einlegerahmen).

So fügen Sie diesen Code in unserem AP Div MapBox in Dreamweaver, fügen Sie ihn in die Codeansicht zwischen den

Tipp: Der einfachste Weg, um sicherzustellen, dass Sie den Code in der richtigen Position eingesetzt wird, um zur Entwurfsansicht wechseln, und klicken Sie in der MapBox AP Div auf der Seite, so dass der blinkende Cursor befindet sich innerhalb der

Code View Cursor.

Codeansicht Cursor.


Wechseln Sie in Split auf das Design und den Code zu sehen. Der Cursor wird nun zwischen dem richtigen offenen und geschlossenen div-Tags zu blinken und Sie können den Code einfügen (Befehl-V).


Schritt 3 - Vorschau

Schalten Sie die Live-Ansicht in Dreamweaver und der interaktiven Karte auf der Seite in Ihrem MapBox Div erscheinen.

Map Page.

Karte Seite.


Sie können immer mit den Eigenschaften-Panel der MapBox Div Größe bei Bedarf einfach nur sicherstellen, schalten Sie den Live-View-off um die Parameter zu ermöglichen.

Wenn Sie eine größere Herausforderung fancy dann können Sie auch Cascading Style Sheets (CSS), um die MapBox mit Rahmen, Hintergründe etc. Format, aber das ist für einen anderen Artikel.


Learn more about Dreamweaver here.


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