Laut com.score Inc. verwenden über 100 Millionen Verbraucher ihre Smartphones zum Surfen im Internet. Erfahren Sie, wie Sie eine mobile Website speziell für das mobile Publikum erstellen. Für dieses Tutorial benötigen Sie Dreamweaver CS5 und höher. In diesem Artikel erfahren Sie, wie Sie eine mobile jquery-Website erstellen.
Schritte
Schritt 1. Öffnen Sie Dreamweaver und gehen Sie zu Datei > Neu
Sie sehen dann ein Fenster "Neues Dokument". Auf der linken Seite möchten Sie die Option "Seite aus Beispiel" auswählen, dann in der nächsten Spalte "Mobile Starters", dann "jQuery Mobile (CDN)"
Schritt 2. Erstellen Sie die Seiten
Sobald Sie die jQuery Mobile (CDN)-Datei öffnen, sehen Sie eine Seite, die ungefähr so aussieht:
Obwohl dies technisch gesehen ein einseitiges Dokument ist, stellt jede Kopfzeile eine andere "Seite" dar. Beispielsweise ist "Seite Eins" die Startseite der mobilen Website, "Seite Zwei" könnte die Seite "Über uns" sein, "Seite Drei" könnte Ihre Serviceseite sein und so weiter
Schritt 3. Sehen Sie sich den Code an
Diese Schritte können ziemlich knifflig sein, wenn Sie mit grundlegendem HTML nicht vertraut sind. Versuchen Sie zum Erstellen des Inhalts, in Dreamweaver in der "geteilten Ansicht" zu arbeiten. Um in diesen Modus zu gelangen, sehen Sie in der linken Ecke von Dreamweaver unter dem Dateimenü vier Optionen "Code, Split, Design und Live" wie folgt:
Wählen Sie die hervorgehobene Option "Aufteilen", und Sie sehen eine Ansicht des Codes und der tatsächlichen Site nebeneinander. Schau dir den Code an
Schritt 4. Bearbeiten Sie die Kopfzeilen für jede Seite
Es gibt (div data-role="page"), was bedeutet, dass es der Anfang einer neuen Seite ist. Beachten Sie, dass jeder Seite eine Nummer zugeordnet ist 'div data-role="page"' ist die zweite Seite, 'div data-role="page"' ist die dritte Seite und so weiter
'div data-role="header"' ist der Header-Bereich, und Sie setzen Ihre Header-Informationen zwischen die beiden Tags "h1" und "/h1".
Schritt 5. Bearbeiten Sie den Inhalt und die Menüelemente
'div data-role="Content"' ist der Anfang des Inhaltsabschnitts. Hier legen Sie den eigentlichen Inhalt jeder Seite ab. Beachten Sie, dass auf der ersten Seite Folgendes steht:
-
und wenn Sie sich die eigentliche Webseite ansehen, sehen Sie, dass die erste Seite eine Liste mit Links enthält. 'ul data-role="listview"' bedeutet, dass Sie eine Liste mit Links im Inhaltsbereich haben möchten. Achten Sie beim Hinzufügen von Menüpunkten oder 'data-role="listview"' darauf, dass Sie den richtigen Text mit den richtigen Seiten verlinken. Wenn beispielsweise Seite zwei "Über uns" ist, Seite drei "Unser Service" und Seite vier "Kontakt" ist, dann möchten Sie Folgendes eingeben:
Erstellen einer mobilen Website mit Dreamweaver Schritt 5 Punkt 1 -
Um nun den Inhalt zu bearbeiten, fügen Sie einfach Ihren Text zwischen die Tags 'div data-role="content"' und '/div' ein. Zum Beispiel:
Erstellen einer mobilen Website mit Dreamweaver Schritt 5, Punkt 2
Schritt 6. Bearbeiten Sie die Fußzeile
Um die Fußzeile zu bearbeiten, fügen Sie einfach Ihren Text anstelle des Texts "Seitenfuß" ein.
Schritt 7. Sehen Sie sich Ihre Website im "Live-Modus" an
Erinnern Sie sich, wo Sie in den "Split-Modus" geschaltet haben? Genau in diesem Bereich gibt es eine Schaltfläche mit der Aufschrift "Live". Klicken Sie darauf und Sie werden sehen, wie Ihre Website auf einem Telefon aussehen wird!
