All Articles Dreamweaver
드림위버 CS5에서 AP 사업부에 구글지도를 삽입
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.

우리는 의심의 여지가 위치를 검색하는 구글의 우수한지도 시설을 이용 없어요. 그것도 사람들이 당신의 위치를​​ 쉽게 찾을 수 있도록 그들을 사용할 수 있도록 훌륭한하지 않을까요? 그들이 당신의 웹 페이지의 편의를 떠날 필요가 없다고했던 할 수있다면 더 무엇, 그것은 더욱 안 그러 겠어요? 정말에서 할 수있는 매우 간단 드림위버 .


1 단계 - 기초 준비

드림위버에서이에 대한 새 페이지를 만들거다 : 파일

New Page.

새 페이지.


페이지에서 그 페이지에 내지도를 잡아 AP 사업부를 만들어 시작하는거야. 먼저 실제 페이지를 볼 수 있도록 페이지보기가 디자이너로 설정되어 있는지 확인합니다.

Design View Button.

디자인보기 단추.


삽입 패널에서 카테고리로 일반을 선택하고 'AP 사업부를 그려'를 선택하십시오.

Draw AP Div button.

AP 사업부 버튼을 그립니다.


당신 커서 이제 십자선 모양의이 아이콘이 표시됩니다, 십자선 모양으로 페이지에 어딘가에 상자를 그립니다. 그것 당신이지도 표시보고 싶은 크기하기 위해보십시오. 그것은 나중에 조정하실 수 있습니다.

AP Element on screen.

화면에서 AP 요소입니다.


이 상자는지도를 포함됩니다. 제가지도이 상자를 만든 이유는 내가 그것을 수정할 수있는 용이입니다. 상자의 왼쪽 상단 모서리에있는 작은 흰색 사각형을 잡아 것은 나를 어디 상자를 재조 정할 수 있습니다.

속성 패널에서 사업부의 속성이 표시됩니다. 'MapBox'로 ID를 변경하고 W 설정

Properties Panel.

속성 패널.


2 단계 -지도를 삽입

Google지도를 사용하여 위치를 검색하는 웹 브라우저를 사용하십시오. 나는 글래스 고에서 사용하는 교육 사무실을 검색했습니다.

Glasgow Google Map.

글래스고 Google지도.


구글지도에서 오른쪽 상단 모서리에 약간의 작은 아이콘이 있습니다. 하나라는 링크를 클릭하면 열어 것입니다.

Goole map link button.

Google지도 링크 버튼을 클릭합니다.


그것을 복사하여 "웹사이트에 포함할 HTML 붙여넣기"이라고 표시된 상자 안에 모든 코드를 선택합니다.

팁 : 모두 선택하기 위해 코드에 신속하게 연속적으로 3 번 클릭한 다음 복사 (명령 - C)이 어떤 놓치지 않도록합니다.

Google Map Insert Code.

Google지도 삽입 코드입니다.


이 코드는 활성화됩니다 다시 표시 IFRAME (삽입 프레임)를 사용하여 AP 사업부 안에 위치의 완전 대화형 Google지도와이 페이지의.

드림위버에서 우리 AP 사업부의 MapBox에이 코드를 삽입하기 위해서, 사이의 코드보기에 붙여 넣으십시오

팁 :이 코드는 올바른 위치에 삽입되었는지 확인하는 가장 쉬운 방법은 깜박이는 커서가 내부 앉아 있도록보기를 디자인하고 페이지에서 MapBox AP 사업부 내부를 클릭하십시오로 전환하는 것입니다

Code View Cursor.

코드보기 커서.


디자인과 코드를 모두 볼 수보기를 분할로 전환합니다. 커서가 이제 올바른 열고 닫힌 사업부 태그 사이 점멸되며 (명령 V) 코드를 붙여넣을 수 있습니다.


3 단계 - 미리보기

드림위버와 쌍방향지도에서 라이브보기를 전환하여 MapBox 사업부 내부의 페이지에 표시됩니다.

Map Page.

지도 페이지.


당신은 항상 당신이 매개 변수를 사용하는 라이브보기를 전환 있는지, 필요한 경우 MapBox 사업부 크기를 조정할 수있는 속성 패널을 사용할 수 있습니다.

당신이 더 도전을 공상면 당신은 또한 테두리, 배경 등 MapBox 형식을 CSS 스타일 시트 (CSS)를 사용할 수 있지만, 다른 기사에 대한이야.


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: