All Articles Dreamweaver
Dreamweaver CS5 में एक एपी डिव में एक गूगल मानचित्र सम्मिलित करना
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.

हम सभी कोई शक गूगल उत्कृष्ट नक्शा सुविधा का उपयोग किया है स्थानों के लिए बाहर खोज. यह महान नहीं हो सकते करने के लिए उन्हें का उपयोग करने के लिए लोगों को अपने स्थानों को खोजने में मदद करने में सक्षम हो सकता है, भी? क्या अधिक है, यह भी अधिक से अधिक नहीं हो सकता है अगर करने के लिए कि वे अपने वेब पेज के आराम छोड़ नहीं किया होगा? यह वास्तव में बहुत सरल है में क्या Dreamweaver .


चरण 1 - आधारभूत तैयारी

Dreamweaver में मैं इस के लिए एक नया पृष्ठ बनाने के लिए जा रहा हूँ : फ़ाइल

New Page.

नया पृष्ठ.


पृष्ठ पर मैं एक एपी डिव पृष्ठ में मेरे नक्शे पकड़ बनाने के लिए शुरू करने के लिए जा रहा हूँ. पहले यकीन है कि अपने पृष्ठ को देखने के डिजाइनर के लिए सेट कर दिया जाता है ताकि आप वास्तविक पृष्ठ देख सकते हैं.

Design View Button.

डिज़ाइन दृश्य बटन.


सम्मिलित कक्ष से श्रेणी के रूप में आम चुन और एपी डिव ड्रा 'का चयन करें.

Draw AP Div button.

एपी डिव बटन ड्रा.


आप कर्सर अब एक crosshair दिखाएगा; पृष्ठ पर crosshair के साथ एक बॉक्स आकर्षित कहीं. इसे आप आकार देखने के लिए अपने नक्शे प्रदर्शित करना चाहते हैं बनाने की कोशिश करो. यह बाद में tweaked किया जा सकता है.

AP Element on screen.

स्क्रीन पर एपी तत्व.


यह बॉक्स नक्शे में शामिल होंगे. कारण मैं नक्शे के लिए इस बॉक्स बनाया है जिसके साथ मैं इसे संशोधित कर सकते हैं आसानी है. बॉक्स के ऊपरी बाएँ कोने में छोटे सफेद वर्ग हथियाने मुझे बॉक्स reposition करने के लिए कहीं भी अनुमति देता है.

गुण पैनल में डिव गुण प्रदर्शित किया जाएगा. 'MapBox' आईडी बदलें और डब्ल्यू सेट

Properties Panel.

गुण पैनल.


चरण 2 - नक्शा सम्मिलित

अपने वेब ब्राउज़र का उपयोग करने के लिए एक स्थान खोज Google Maps का प्रयोग करने के लिए. मैं बाहर प्रशिक्षण कार्यालय मैं ग्लासगो में उपयोग की खोज की है.

Glasgow Google Map.

ग्लासगो गूगल मानचित्र.


गूगल मानचित्र पर ऊपरी दाएँ कोने में कुछ छोटे चिह्न हैं. एक बुलाया लिंक पर क्लिक करना यह खुल जाएगा.

Goole map link button.

गूगल मानचित्र लिंक बटन.


चिह्नित बॉक्स के अंदर सभी कोड और इसे कॉपी "वेबसाइट में एम्बेड करने के लिए एचटीएमएल चिपकाएँ" का चयन करें.

युक्ति: कोड पर जल्दी उत्तराधिकार में 3 बार यह सभी का चयन करें क्लिक करें, तो प्रतिलिपि (कमांड सी) बनाने के लिए सुनिश्चित करें कि आप किसी भी याद नहीं है.

Google Map Insert Code.

गूगल मानचित्र सम्मिलित कोड.


इस कोड सक्षम हो जाएगा फिर से प्रदर्शित एपी डिव का उपयोग कर एक iframe (डालने फ्रेम) के अंदर अपने स्थान की पूरी तरह से इंटरैक्टिव गूगल मानचित्र के साथ इस पृष्ठ के.

Dreamweaver में हमारे एपी डिव MapBox में इस कोड डालने के लिए, यह के बीच कोड देखें में चिपकाएँ

युक्ति: को यकीन है कि कोड सही स्थान में सम्मिलित किया जाता है का सबसे आसान तरीका करने के लिए देखें डिजाइन और पृष्ठ पर MapBox एपी डिव अंदर क्लिक करें स्विच इतना है कि फ्लैशिंग कर्सर अंदर बैठता है

Code View Cursor.

कोड देखें कर्सर.


स्विच करें देखें भाजित करने के लिए दोनों डिजाइन और कोड देखें. कर्सर सही खुले और बंद div टैग के बीच अब चमकती जाएगा और आप कोड पेस्ट कर सकते हैं (कमांड- V).


चरण 3 - पूर्वावलोकन

Dreamweaver और इंटरेक्टिव मानचित्र में लाइव देखें पर स्विच अपने MapBox डिव अंदर पृष्ठ पर दिखाई देगा.

Map Page.

नक्शा पृष्ठ.


MapBox डिव का आकार यदि आवश्यक तुम हमेशा गुण पैनल का उपयोग कर सकते हैं, सिर्फ यकीन है कि आप लाइव देखें स्विच बंद करने के लिए पैरामीटर सक्षम.

यदि आप एक कठिन चुनौती फैंसी है तो आप भी कास्केडिंग स्टाइल शीट (सीएसएस) का उपयोग सीमाओं, पृष्ठभूमि आदि के साथ MapBox प्रारूप कर सकते हैं, लेकिन है कि एक अन्य लेख के लिए है.


Learn more about Dreamweaver here.


Comments (8)

You must be logged in to comment. Login Now

  • 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: