Dreamweaver i jQuery Mobile Integration

• Kwiecień 26, 2024

W ciągu ostatnich kilku lat Dreamweaver^R ma coraz więcej funkcji do tworzenia mobilnych treści internetowych i aplikacji mobilnych. To nowe uaktualnienie do CS6 nie jest wyjątkiem. Dreamweaver CS6 ma usprawniony przepływ pracy dzięki funkcjom jQuery Mobile.

Rozpoczęcie nowego projektu mobilnego jest proste dzięki nowej opcji Strona z próbki w oknie dialogowym Nowy dokument. Możesz wybrać próbkę jQuery Mobile z folderu Mobile Starters. Ta przykładowa strona zawiera niektóre gotowe pliki graficzne, css i JavaScript.

Na tej przykładowej stronie możemy zacząć budować nasz projekt, dodając elementy do strony.

1. W panelu Wstaw wybierz jQuery Mobile z menu kategorii. Spowoduje to wyświetlenie gotowych komponentów.
   
   
2. Aby dodać nowy komponent, umieścimy nasz kursor w miejscu, w którym zostanie dodany nowy element projektu i kliknij jeden z komponentów na liście. W naszym przykładzie wybierzmy Slider.
   
   Dreamweaver automatycznie doda kod suwaka do naszej strony. W widoku na żywo możemy zobaczyć naszą nową kontrolę suwaka.
   
   

Ale ta strona jest trochę ogólna. Mamy szybki i łatwy sposób na stylizację naszej strony za pomocą nowego panelu Próbki mobilne jQuery.

1. Z paska menu kliknij opcję Okno - próbki mobilne jQuery. Jeśli nie załadowałeś jeszcze plików graficznych, css i JavaScript, zobaczysz wyskakujące okno dialogowe. Kliknij Kopiuj, aby załadować pliki.
   
   
2. Nowy panel Próbki mobilne jQuery jest pusty, dopóki nie wybierzesz elementu na stronie przykładowej. Po wybraniu elementu panel wyświetli odpowiednie próbki dostępne dla tego elementu. Jeśli wybierzemy element nagłówka, zobaczymy kilka motywów nagłówka.
   
   
3. Jeśli przejdziemy do widoku na żywo, możemy kliknąć każdą próbkę motywu, aby zobaczyć podgląd ich wyglądu.
   
   

Możemy to powtórzyć dla wszystkich elementów projektu na naszej stronie. Gdy to zrobimy, panel Próbki mobilne jQuery wyświetli dostępne dostępne próbki motywu. Możemy również użyć przełącznika rozdzielczości, aby wyświetlić podgląd projektu, który będzie wyglądał na rozdzielczości pulpitu i tabletu.

Jeśli użyjemy linku Uzyskaj więcej motywów u dołu panelu, przeglądarka otworzy się na stronie ThemeRoller dla jQuery Mobile.

* Adobe dostarczyło mi kopię tego oprogramowania w celu sprawdzenia.

Prawa autorskie 2018 Adobe Systems Incorporated. Wszelkie prawa zastrzeżone. Zrzuty ekranowe produktów Adobe zostały przedrukowane za zgodą Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst i Flash Paper jest / są [a] zarejestrowanym znakiem towarowym lub znakami towarowymi Adobe Systems Incorporated w Stanach Zjednoczonych i / lub innych krajach.

Instrukcje Wideo: Part 10: Using the jQuery Mobile Theme Roller in DreamWeaver (Kwiecień 2024).