Dreamweaver와 함께 Adobe Device Central 사용

Dreamweaver 웹 디자이너와 개발자는 Device Central을 사용하여 Dreamweaver 파일이 다양한 모바일 디바이스에서 어떻게 표시되는지 미리 볼 수 있습니다. Device Central은 Opera의 Small-Screen Rendering™ 기술을 사용하여 디자이너와 개발자에게 작은 화면에서 웹 페이지가 어떻게 표시되는지를 보여 줍니다. 디자이너와 개발자는 CSS가 제대로 작동하는지 테스트할 수도 있습니다.

예를 들어 웹 개발자가 고객으로부터 휴대 전화용 웹 사이트를 만들어달라는 요청을 받을 수 있습니다. 웹 개발자는 Dreamweaver를 사용하여 임시 페이지를 만든 다음 Device Central을 사용하여 이러한 페이지가 다양한 디바이스에서 어떻게 나타나는지 테스트할 수 있습니다.

  1. Dreamweaver를 시작합니다.
  2. 파일을 엽니다.
  3. 다음 중 하나를 수행합니다.
    • [파일] > [브라우저에서 미리보기] > [Device Central]을 선택합니다.

    • 문서 창 툴바에서 [브라우저에서 미리보기/디버그] 버튼 을 클릭한 상태로 [Device Central에서 미리보기]를 선택합니다.

모바일 디바이스용 Dreamweaver 웹 콘텐츠 제작 관련 팁

Device Central은 Dreamweaver에서 만든 웹 페이지를 Opera의 Small-Screen Rendering 기능을 사용하여 미리 봅니다. 이 미리보기를 통해 웹 페이지가 모바일 디바이스에서 어떻게 표시되는지 확인할 수 있습니다.

참고: Opera의 Small-Screen Rendering 기능은 에뮬레이트된 각 디바이스에 미리 설치되거나 설치되지 않을 수 있습니다. Opera의 Small-Screen Rendering 기능이 설치되어 있는 경우 Device Central은 콘텐츠가 어떻게 표시되는지를 미리 보여줍니다.

Dreamweaver에서 만든 웹 페이지가 모바일 디바이스에서 제대로 표시되도록 하려면 아래 팁을 참조합니다.

  • Adobe® Spry 프레임워크를 사용해 콘텐츠를 개발한 경우 다음 HTML 행을 페이지에 추가하여 Device Central에서 CSS를 렌더링하고 JavaScript™를 제대로 실행할 수 있습니다.<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>

  • Opera의 Small-Screen Rendering 기능은 프레임, 팝업, 밑줄, 취소선, 윗줄, 깜박임 및 선택 윤곽을 지원하지 않습니다. 이러한 디자인 요소는 사용하지 않아야 합니다.

  • 모바일 디바이스용 웹 페이지를 간단한 상태로 유지합니다. 특히 글꼴 수, 글꼴 크기 및 색상을 최소로 사용합니다.

  • 이미지 크기와 필요한 색상 수를 줄이면 이미지가 의도한 대로 표시될 가능성이 높아집니다. 사용된 각 이미지의 높이와 폭을 정확히 지정하려면 CSS 또는 HTML을 사용합니다. 모든 이미지에 대해 대체 텍스트를 제공합니다.

참고:

웹 페이지를 모바일 디바이스용으로 최적화하는 데 필요한 정보는 Opera 소프트웨어 웹 사이트를 참조하십시오.

휴대 전화 및 모바일 디바이스용 내용 만들기에 대한 자세한 팁과 기술은 www.adobe.com/go/learn_cs_mobilewiki_kr을 참조하십시오.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책