All Articles Dreamweaver
在Dreamweaver CS5插入AP Div的Google地图
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.

新的一页。


在网页上,我要开始创建一个AP Div的举行在我的地图页面。首先确保你的页面视图设置为设计师,所以你可以看到实际的页面。

Design View Button.

设计视图“按钮。


从“插入”面板,选择常见的类别,并选择“绘制AP Div的”。

Draw AP Div button.

“绘制AP Div的”按钮。


您的光标会显示出一个十字,十字线,在页面上绘制一个盒子的地方。尝试使你想看到您的地图上显示它的大小。它可以进行调整。

AP Element on screen.

AP元素在屏幕上。


此框将包含地图。我已经创建了此框地图的原因是,我可以修改它的易用性。抓住小框的顶部左上角的白色方形,让我随时随地重新定位框。

div的属性,在属性面板会显示出来。更改ID MapBox“,并设置了W

Properties Panel.

属性面板。


第2步 - 插入地图

使用Web浏览器来使用Google Maps搜索位置。我已经搜索了培训办公室,我在格拉斯哥使用。

Glasgow Google Map.

格拉斯哥谷歌地图。


在Google地图上有一些小图标,在右上角。点击一个所谓的链接将会打开它。

Goole map link button.

谷歌地图上的链接按钮。


选择所有标记框里面的“粘贴HTML嵌入网站”,并把它复制的代码。

提示:在对代码的快速连续点击3次选择,然后复制(命令- C),以确保你不会错过任何

Google Map Insert Code.

Google地图插入代码。


此代码将使重新显示此页的内部AP使用iframe(插入帧)分区的位置完全互动的Google地图。

要插入到我们的AP在Dreamweaver中科MapBox这个代码,粘贴到代码视图之间的

提示:最简单的方法,以确保该代码插入到正确的位置,所以坐在里面闪烁的光标切换到设计视图,在页面上点击MapBox AP Div的内部

Code View Cursor.

代码查看光标所在。


切换到拆分视图的设计和代码。光标闪烁之间的正确打开和关闭的div标签,您可以粘贴代码( 命令- V)。


第3步 - 预览

开关上即时显示在Dreamweaver和互动式地图上会出现MapBox息的内页。

Map Page.

地图页面。


你总是可以使用“属性”面板调整MapBox息,如果需要的话,只需确保您切换,实时显示,使参数。

如果你看中了一个更难的挑战,那么你可以也可以使用层叠样式表(CSS)格式边框,背景等MapBox,但在另一篇文章的。


Learn more about Dreamweaver here.


Comments (8)

You must be logged in to comment.

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