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

Accès Premium gratuitement

Accédez à notre bibliothèque complète des articles Hub Premium, les fichiers projet et les premiers 10% de chaque Cours-vidéo de la Bibliothèque Didacticiel en ligne .

Créez votre compte gratuit!

Insertion d'une carte Google dans un div PA dans Dreamweaver CS5
Traduit par Google Translate

Nous avons tous fait aucun doute utilisées installation de Google Map excellente pour la recherche sur sites. Ce ne serait pas génial d'être capable de les utiliser pour aider les gens à trouver vos bureaux, aussi? Qui plus est, serait-il pas encore plus grande si pour cela ils n'ont pas eu à quitter le confort de votre page web? Il est vraiment très simple à faire dans Dreamweaver .


Etape 1 - préparer le terrain

Dans Dreamweaver, je vais créer une nouvelle page pour cela: Fichier

New Page.

Nouvelle page.


Sur la page que je vais commencer par créer une div PA à tenir ma carte dans la page. D'abord assurez-vous que votre page vue est réglée sur Concepteur de sorte que vous pouvez voir la page réelle.

Design View Button.

Bouton Mode Création.


Dans le Panneau de choisir Insérer commune que la catégorie et sélectionnez «Dessine div PA.

Draw AP Div button.

Dessinez le bouton div PA.


Vous curseur se montrent maintenant une croix, avec la croix dessiner une boîte quelque part sur la page. Essayez de faire la taille que vous souhaitez voir votre carte affichée. Il peut être modifié ultérieurement.

AP Element on screen.

Elément AP à l'écran.


Cette boîte contient la carte. La raison pour laquelle j'ai créé cette boîte pour la carte est la facilité avec laquelle je peux le modifier. Saisissant le petit carré blanc dans le coin supérieur gauche de la boîte me permet de repositionner la zone de n'importe où.

Dans le panneau Propriétés des propriétés de la DIV sera affichée. Changer l'ID à "MapBox 'et réglez le W

Properties Panel.

Panneau Propriétés.


Étape 2 - Insertion de la carte

Utilisez votre navigateur Web pour rechercher un emplacement en utilisant Google Maps. J'ai cherché à l'Office de la formation-je utiliser à Glasgow.

Glasgow Google Map.

Glasgow Google Map.


Sur la carte Google il ya quelques petites icônes dans le coin supérieur droit. Cliquant sur le lien l'un appelé l'ouvrira.

Goole map link button.

Bouton Google Map lien.


Sélectionnez tout le code à l'intérieur de la case marquée "Collez le code HTML pour l'intégrer sur site" et de le copier.

Astuce: Cliquez trois fois de suite rapidement sur ​​le code pour sélectionner tout, puis copier (Commande-C) pour s'assurer que vous ne manquez aucune.

Google Map Insert Code.

Insérez la carte Google Code.


Ce code permettra la ré-affichage de cette page avec la carte entièrement interactive Google de votre emplacement à l'intérieur du div PA à l'aide d'une iframe (frame insertion).

Pour insérer ce code dans notre MapBox div PA dans Dreamweaver, collez-le dans le mode Code entre les

Astuce: La meilleure façon de s'assurer que le code est inséré dans l'emplacement correct est de passer en mode Création et cliquez à l'intérieur du Div MapBox AP sur la page afin que le curseur clignotant se trouve à l'intérieur du

Code View Cursor.

Curseur Voir Code.


Interrupteur à Split View pour voir la conception et le code. Le curseur va clignoter entre les balises div correcte ouverts et fermés, et vous pouvez coller le code (Commande-V).


Étape 3 - Aperçu

Allumez le Live View de Dreamweaver et de la carte interactive apparaîtra sur la page intérieure de votre Div MapBox.

Map Page.

Page Carte.


Vous pouvez toujours utiliser le panneau Propriétés pour redimensionner la Div MapBox si nécessaire, assurez-vous simplement changer le mode Live View off pour activer les paramètres.

Si vous avez envie d'une difficile défi, alors vous pouvez aussi utiliser des feuilles de style en cascade (CSS) pour formater la MapBox avec des frontières, etc origines, mais ce sera pour un autre article.


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