X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
在Dreamweaver CS5插入AP Div的Google地图
翻译谷歌翻译

我们都毫无疑问,利用谷歌的优良地图设施搜索出地点。岂不是巨大的,也能够使用它们来帮助人们找到您的位置?更重要的是,会不会是更大的,如果做到这一点,他们没有离开你的网页的舒适呢?这真的是非常简单的事情, 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.


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