Podręcznik użytkownika Anuluj

Tworzenie aplikacji internetowych przeznaczonych na urządzenia mobilne za pomocą programu Dreamweaver

 

 

Dzięki integracji z biblioteką jQuery Mobile program Dreamweaver umożliwia szybkie projektowanie aplikacji internetowych działających na większości urządzeń mobilnych, które dostosowują się do wymiarów danego urządzenia.

Tworzenie aplikacji internetowych za pomocą biblioteki jQuery Mobile

Otwórz stronę startową jQuery Mobile lub utwórz stronę HTML5

Aplikację można utworzyć na podstawie stron startowych jQuery Mobile, dostępnych w programie Dreamweaver. Można również rozpocząć tworzenie aplikacji internetowej od nowej strony HTML5.

Strony startowe jQuery Mobile zawierają pliki HTML, CSS i JavaScript oraz pliki obrazów, które ułatwiają rozpoczęcie pracy nad aplikacją. W aplikacji można wykorzystać pliki CSS i JavaScript udostępniane z serwera zawartości (CDN), pliki z własnego serwera, albo pliki zainstalowane wraz z programem Dreamweaver.

Uwaga:

Aby określić położenie połączonych plików, przejrzyj znaczniki <link> i <script src> w widoku Kod.

Wstaw składniki jQuery Mobile z panelu Wstaw

Wstaw składniki jQuery Mobile z panelu Wstaw na stronę HTML. Pliki CSS i JavaScript biblioteki JQuery Mobile definiują styl i zachowanie tych składników.

Informacje o sieciach dostarczania zawartości (CDN) oraz plikach jQuery Mobile

Sieci dostarczania zawartości (CDN)

Sieć dostarczania zawartości (sieć CDN) to sieć komputerowa, która zawiera kopie danych rozmieszczone w różnych miejscach. Jeśli aplikację internetową tworzy się z użyciem adresu URL sieci dostarczania zawartości, to w aplikacji używane będą pliki CSS i JavaScript określone tym adresem URL. Program Dreamweaver domyślnie używa sieci dostarczania zawartości jQuery Mobile.

Można jednak użyć adresów URL innych sieci dostarczania zawartości, np. sieci takich firm, jak Microsoft lub Google. W widoku Kod można zmodyfikować położenie serwera plików CSS i JavaScript, podane w znacznikach <link> i <script src>.

Pliki pobrane z sieci dostarczania zawartości mają status „tylko do odczytu”.

Lokalne pliki jQuery Mobile

Podczas instalowania programu Dreamweaver w komputerze zapisywana jest kopia plików JQuery Mobile. Strona HTML otwierana po wybraniu strony startowej „jQuery Mobile (lokalnie)” jest połączona z lokalnymi plikami CSS i JavaScript oraz plikami obrazów.

Strony startowe jQuery Mobile

Program Dreamweaver udostępnia następujące strony startowe do tworzenia aplikacji internetowych:

jQuery Mobile (CDN)

Ze strony tej należy korzystać wtedy, gdy biblioteka jQuery Mobile ma być udostępniana z sieci dostarczania zawartości (CDN).

 

jQuery Mobile (lokalnie)

Ze strony tej należy korzystać wtedy, gdy użytkownik zamierza samodzielnie udostępniać zasoby albo gdy aplikacja nie wymaga połączenia internetowego.

 

jQuery Mobile (PhoneGap)

Ze strony tej należy korzystać wtedy, gdy aplikacja internetowa po wdrożeniu w formie aplikacji mobilnej ma mieć dostęp do rodzimych funkcji urządzeń przenośnych. Więcej informacji zawiera sekcja Pakowanie aplikacji internetowych.

 

 

Tworzenie aplikacji na urządzenia przenośne na podstawie stron startowych

  1. Wybierz polecenie Plik > Nowy.

  2. Stosownie do potrzeb wybierz jedną z następujących opcji:

    • Strona z przykładu > Startery mobilne > jQuery Mobile (CDN).

    • Strona z przykładu > Startery mobilne > jQuery Mobile (lokalnie).

     

  3. Kliknij przycisk Utwórz.

    Na wyświetlonej stronie włącz opcję Stale śledź łącza (Widok > Opcje widoku aktywnego), a następnie przejdź do widoku aktywnego. Przetestuj działanie aplikacji za pomocą składników nawigacyjnych.

    Użyj opcji z menu Podgląd wieloekranowy, aby sprawdzić sposób wyświetlania projektu na urządzeniach o różnych wymiarach. Wyłącz widok aktywny i wróć do widoku Projekt.

  4. W panelu Wstaw (Okno > Wstaw) wybierz opcję jQuery Mobile. Zostaną wyświetlone składniki, które można dodać do aplikacji internetowej.

  5. Przejdź do widoku Projekt. Umieść kursor w miejscu, gdzie ma zostać wstawiony składnik. Następnie kliknij składnik w panelu Wstaw. Dostosuj składniki, korzystając z opcji w wyświetlonym oknie dialogowym.

  6. (jQuery Mobile — lokalnie) Po zapisaniu pliku HTML pliki jQuery Mobile, w tym pliki obrazów, zostaną skopiowane do folderu zawierającego ten plik HTML.

Wyświetl podgląd strony w widoku aktywnym. Niektóre klasy CSS można stosować tylko w widoku aktywnym.

Tworzenie aplikacji internetowych na urządzenia przenośne na podstawie nowej strony

Składnik Strona pełni rolę kontenera wszystkich pozostałych składników jQuery Mobile. Należy go dodać przed rozpoczęciem wstawiania innych składników.

  1. Wybierz polecenie Plik > Nowy.

  2. Wybierz polecenie Pusta strona > HTML.

    Niektóre składniki jQuery Mobile używają atrybutów specyficznych dla języka HTML5. Aby zapewnić zgodność ze standardem HTML5 podczas walidacji, należy pamiętać o wybraniu wartości HTML5 w deklaracji typu dokumentu (DOCTYPE).

  3. W panelu Wstaw (Okno > Wstaw) wybierz opcję jQuery Mobile. W panelu zostaną wyświetlone składniki jQuery Mobile.

  4. Przeciągnij składnik Strona z panelu Wstaw do widoku Projekt.

  5. W oknie dialogowym Pliki jQuery Mobile wybierz jedną z następujących opcji:

    Zdalnie (CDN)

    Umożliwia połączenie ze zdalnym serwerem zawartości (CDN), z którego udostępniane są pliki jQuery Mobile. Jeśli serwis zawierający pliki jQuery Mobile nie został skonfigurowany, to należy użyć domyślnej opcji serwisu jQuery. Można również wybrać inne serwery CDN.

    Lokalnie

    Wyświetlane są pliki dostępne w programie Dreamweaver. Aby wybrać inny folder, kliknij przycisk Przeglądaj i przejdź do folderu zawierającego pliki jQuery Mobile.

    Pliki CSS i JavaScript zostaną skopiowane do lokalnego katalogu tymczasowego i pozostaną tam, dopóki użytkownik nie zapisze plików HTML w swoim komputerze. Po zapisaniu pliku HTML wszystkie skojarzone z nim pliki jQuery Mobile i pliki obrazów zostaną skopiowane do katalogu głównego serwisu.

  6. Wprowadź właściwości składnika Strona.

  7. Przejdź do widoku Projekt. Umieść kursor w miejscu, gdzie ma zostać wstawiony składnik. Następnie kliknij składnik w panelu Wstaw. Dostosuj składniki, korzystając z opcji w wyświetlonym oknie dialogowym.

Wyświetl podgląd strony w widoku aktywnym. Niektóre klasy CSS można stosować tylko w widoku aktywnym.

Używanie własnych plików i folderów

Na potrzeby aplikacji można utworzyć własne pliki CSS i JS. Należy pamiętać o nadaniu im następujących nazw: jquery.mobile.js, jquery.mobile.css, jquery.js

Jeśli używa się własnych folderów, procedura jest następująca:

  1. Pobierz nieskompresowaną wersję biblioteki podstawowej jQuery 1.5 ze strony http://docs.jquery.com/Downloading_jQuery#Download_jQuery.

  2. Zapisz plik w folderze głównym, zawierającym inne zasoby.

 

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?