All Articles Dreamweaver
قرار دادن نقشه گوگل را به DIV AP در 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.

صفحه جدید.


در صفحه من قصد دارم با ایجاد DIV AP به نقشه من در آغوش گرفتن در صفحه شروع است. اول مطمئن شوید که نمایش صفحه شما این است که طراح آن ، بنابراین شما می توانید صفحه واقعی را ببینید.

Design View Button.

طراحی دکمه نمایش.


پنل اضافه کردن را انتخاب کنید به عنوان مجموعه مشترک و انتخاب کنید. 'قرعه کشی DIV AP'.

Draw AP Div button.

قرعه کشی AP دکمه DIV.


شما مکان نما در حال حاضر خط کش را نشان می دهد ، با خط کش رسم یک جعبه را در جایی بر روی صفحه. سعی کنید آن را به اندازه شما می خواهم به نقشه خود را نمایش داده است. می توان آن را بهینه سازی شد.

AP Element on screen.

AP عنصر بر روی صفحه نمایش.


این جعبه شامل نقشه. دلیل من از این جعبه برای نقشه ایجاد سهولت که با آن می توانید آن را تغییر می باشد. گرفتن مربع کوچک سفید در گوشه بالا سمت چپ از کادر اجازه می دهد تا مرا به انباشتگی جعبه در هر نقطه است.

در پانل خواص خواص DIV نمایش داده خواهد شد. تغییر ID به 'MapBox' و تنظیم W

Properties Panel.

پنل Properties.


مرحله 2 -- قرار دادن نقشه

با استفاده از مرورگر وب خود را یک مکان با استفاده از نقشه های گوگل به جستجو. من دفتر آموزش من در گلاسکو استفاده از جستجو است.

Glasgow Google Map.

گوگل نقشه گلاسکو.


در نقشه های گوگل هستند ، برخی از آیکون های کوچک در گوشه بالا سمت راست وجود دارد. با کلیک بر روی لینک نامیده می شود یکی آن را باز خواهد کرد.

Goole map link button.

گوگل نقشه را فشار دهید ، لینک کنید.


تمام کد داخل کادر مشخص شده اند "چسباندن HTML جاسازی در وب سایت و کپی از آن را انتخاب کنید.

نکته : کلیک کنید 3 بار در جانشینی سریع در کد به آن را انتخاب کنید ، و سپس کپی (فرماندهی - C) تا مطمئن شویم که شما هیچ کدام از دست ندهید .

Google Map Insert Code.

کد نقشه گوگل درج.


این کد را قادر خواهد ساخت مجدد نمایش این صفحه به طور کامل تعاملی با نقشه گوگل از محل سکونت خود را در داخل DIV AP با استفاده از IFRAME (فریم درج).

برای درج این کد را در MapBox DIV AP در Dreamweaver ، آن را به نمایش کد بین رب

نکته : ساده ترین راه برای اطمینان حاصل کنید که فعال است را به محل صحیح قرار داده است به سوئیچ برای طراحی نمایش و کلیک کنید و در داخل DIV AP MapBox در صفحه به طوری که مکان نما چشمک زن نشسته در داخل

Code View Cursor.

کد مکاننما.


تغییر به تقسیم مشخصات هر دو طراحی و کد برای دیدن. مکان نما در حال حاضر خواهد شد فلش بین تگ div را درست باز و بسته و شما می توانید کد (فرماندهی - V) پیست کنید.


مرحله 3 -- بررسی

تغییر در نمایش زنده در Dreamweaver و نقشه های تعاملی را بر روی صفحه را در داخل DIV MapBox خود ظاهر می شود.

Map Page.

صفحه نقشه.


شما همیشه می توانید پانل خواص DIV MapBox برای تغییر اندازه در صورت لزوم استفاده کنید ، فقط مطمئن شوید که شما را در نمایش زنده سوئیچ کردن به فعال کردن پارامترها.

اگر شما علاقه داشتن به یک چالش سخت تر و سپس شما همچنین می توانید شیوه نامه آبشاری (CSS) برای فرمت 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: