Według com.score Inc. ponad 100 milionów konsumentów używa smartfonów do przeglądania Internetu. Dowiedz się, jak stworzyć witrynę mobilną specjalnie dla odbiorców mobilnych. Do tego samouczka będziesz potrzebować programu Dreamweaver CS5 lub nowszego. Z tego artykułu dowiesz się, jak utworzyć witrynę mobilną jquery.
Kroki
Krok 1. Otwórz Dreamweaver i przejdź do pliku > Nowy
Zobaczysz wtedy okno „Nowy dokument”. Po lewej stronie chcesz wybrać opcję „strona z próbki”, a następnie w kolejnej kolumnie „mobile Starters”, a następnie „jQuery Mobile (CDN)”
Krok 2. Utwórz strony
Po otwarciu pliku jQuery Mobile (CDN) zobaczysz stronę podobną do tej:
Chociaż technicznie jest to dokument jednostronicowy, każdy nagłówek reprezentuje inną „stronę”. Na przykład „Strona pierwsza” to strona główna witryny mobilnej, „Strona druga” może być stroną o nas, „Strona trzecia” może być stroną usług i tak dalej
Krok 3. Spójrz na Kodeks
Te kroki mogą być dość trudne, jeśli nie znasz podstawowego języka HTML. Aby utworzyć zawartość, spróbuj pracować w „podzielonym widoku” w programie Dreamweaver. Jak dostać się do tego trybu, jeśli spojrzysz na lewy róg programu Dreamweaver, poniżej menu plików, zobaczysz cztery opcje „koduj, dziel, projektuj i uruchamiaj”, jak poniżej:
Wybierz podświetloną opcję „podziel”, a zobaczysz widok kodu i rzeczywistą witrynę obok siebie. Spójrz na kod
Krok 4. Edytuj nagłówki dla każdej strony
Jest (div data-role="page"), co oznacza, że jest to początek nowej strony. Zauważ, że każda strona jest powiązana z numerem 'div data-role="page"' to druga strona, 'div data-role="page"' to trzecia strona i tak dalej
'div data-role="header"' to obszar nagłówka, a informacje nagłówka umieszczasz między dwoma znacznikami "h1" i "/h1".
Krok 5. Edytuj zawartość i pozycje menu
'div data-role="Content"' to początek sekcji treści. Tutaj umieszczasz rzeczywistą zawartość każdej strony. Zauważ, że na pierwszej stronie znajduje się:
-
a jeśli spojrzysz na rzeczywistą stronę internetową, zobaczysz, że pierwsza strona zawiera listę linków. 'ul data-role="listview"' oznacza, że chcesz mieć listę linków w obszarze zawartości. Dodając dowolne elementy menu lub 'data-role="listview"', upewnij się, że łączysz poprawny tekst z poprawnymi stronami. Na przykład, jeśli strona druga to „O nas”, strona trzecia to „Nasza usługa”, a strona czwarta to „Skontaktuj się z nami”, to chcesz umieścić:
Utwórz witrynę mobilną za pomocą programu Dreamweaver Krok 5 Punkt 1 -
Teraz, aby edytować zawartość, po prostu umieść swój tekst między tagami 'div data-role="content"' i '/div'. Na przykład:
Utwórz witrynę mobilną za pomocą programu Dreamweaver Krok 5 Punkt 2
Krok 6. Edytuj stopkę
Aby edytować stopkę, po prostu umieść swój tekst w miejscu tekstu „Stopka strony”.
Krok 7. Spójrz na swoją witrynę w „trybie na żywo”
Pamiętasz, gdzie przełączyłeś się w „tryb podziału”? w tym miejscu znajduje się przycisk z napisem „na żywo”. Kliknij w to, a zobaczysz, jak Twoja strona będzie wyglądać na telefonie!
