Dreamweaver와 jQuery 모바일 통합

• 할 수있다 2, 2024

지난 몇 년 동안 Dreamweaver^{아르 자형} 모바일 웹 컨텐츠 및 모바일 애플리케이션을 작성하는 데 점점 더 많은 기능이 제공되었습니다. CS6 로의이 새로운 업그레이드도 예외는 아닙니다. Dreamweaver CS6에는 jQuery Mobile 기능이 개선 된 워크 플로가 있습니다.

새 문서 대화 상자의 샘플에서 새 페이지 옵션을 사용하면 새 모바일 프로젝트를 쉽게 시작할 수 있습니다. Mobile Starters 폴더에서 jQuery Mobile 샘플을 선택할 수 있습니다. 이 샘플 페이지에는 미리 작성된 그래픽, CSS 및 JavaScript 파일이 제공됩니다.

이 샘플 페이지에서 페이지에 요소를 추가하여 프로젝트를 빌드 할 수 있습니다.

1. 삽입 패널의 카테고리 메뉴에서 jQuery Mobile을 선택합니다. 미리 만들어진 구성 요소가 표시됩니다.
   
   
2. 새 컴포넌트를 추가하기 위해 새 디자인 요소가 추가 될 위치에 커서를 놓고 목록에서 컴포넌트 중 하나를 클릭합니다. 이 예에서는 슬라이더를 선택하겠습니다.
   
   Dreamweaver가 자동으로 슬라이더 코드를 페이지에 추가합니다. 라이브 뷰에서 새로운 슬라이더 컨트롤을 볼 수 있습니다.
   
   

그러나이 페이지는 약간 일반적입니다. 새로운 jQuery Mobile Swatches 패널을 사용하여 빠르고 쉽게 페이지 스타일을 지정할 수 있습니다.

1. 메뉴 표시 줄에서 창-jQuery Mobile 견본을 클릭하십시오. 지원 그래픽, CSS 및 JavaScript 파일을 아직로드하지 않은 경우 팝업 대화 상자가 표시됩니다. 복사를 클릭하여 파일을로드하십시오.
   
   
2. 샘플 페이지에서 요소를 선택할 때까지 새 jQuery Mobile 견본 패널이 비어 있습니다. 요소를 선택하면 해당 요소에 사용 가능한 해당 견본이 패널에 표시됩니다. 헤더 요소를 선택하면 몇 가지 헤더 테마가 표시됩니다.
   
   
3. 라이브 뷰로 전환하면 각 테마 견본을 클릭하여 모양을 미리 볼 수 있습니다.
   
   

페이지의 모든 디자인 요소에 대해이 작업을 반복 할 수 있습니다. 이렇게하면 jQuery Mobile 견본 패널에 사용 가능한 해당 테마 견본이 표시됩니다. 또한 해상도 스위처를 사용하여 데스크탑 및 태블릿 해상도에서 보이는 디자인을 미리 볼 수 있습니다.

패널 하단에서 더 많은 테마 가져 오기 링크를 사용하면 jQuery Mobile 용 ThemeRoller 웹 사이트에 브라우저가 열립니다.

* Adobe는 검토 목적으로이 소프트웨어의 사본을 제공했습니다.

저작권 2018 Adobe Systems Incorporated. 판권 소유. Adobe 제품 스크린 샷은 Adobe Systems Incorporated의 허가하에 재 인쇄되었습니다. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, 플래시, ActionScript, 불꽃 놀이, 참여, 사로 잡기, 플래시 촉매 및 플래시 용지 는 미국 및 / 또는 기타 국가에서 사용되는 Adobe Systems Incorporated의 [a] 등록 상표 또는 상표입니다.

비디오 지침: Part 3: Using jQuery Mobile Pages in DreamWeaver (할 수있다 2024).