So erstellen sie eine mobile website mit dreamweaver

Über 100 Millionen Verbraucher nutzen ihre Smartphones, um das Internet nach com zu durchsuchen.Score Inc. Erfahren Sie, wie Sie eine mobile Website speziell für das mobile Publikum erstellen. Für dieses Tutorial benötigen Sie Dreamweaver CS5 und up. In diesem Artikel erstellt man eine jQuery Mobile-Website.

Schritte

  1. Bildtitel Erstellen Sie eine mobile Website mit Dreamweaver Schritt 1
1. Dreamweaver öffnen und zur Datei gehen > Neu. Du wirst dann a sehen "Neues Dokument" Fenster. Auf der linken Seite möchten Sie die Option auswählen "Seite aus der Probe" Wählen Sie dann in der nächsten Spalte aus "Mobilfänger", dann "jquery mobile (cdn)"
  • Bildtitel Erstellen Sie eine mobile Website mit Dreamweaver Schritt 2
    2. Erstellen Sie die Seiten. Wenn Sie die JQuery Mobile (CDN) -Datei öffnen, sehen Sie eine Seite, die dem ähnlich ist:
  • Obwohl dies technisch ein einseitiges Dokument ist, stellt jeder Header ein anderes dar "Seite". Beispielsweise, "Seite eins" ist die Homepage für die mobile Website, "Seite zwei" könnte die über uns-Seite sein, "Seite drei" könnte Ihre Services-Seite sein und so weiter.
  • Bildtitel Erstellen Sie eine mobile Website mit Dreamweaver Schritt 3
    3. Schau dir den Code an. Diese Schritte können ziemlich knifflig sein, wenn Sie mit grundlegender HTML nicht vertraut sind. Um den Inhalt zu erstellen, versuchen Sie, in der Arbeit zu arbeiten "geteilte Sicht" auf Dreamweaver. So erreichen Sie den Modus, wenn Sie sich auf die linke Ecke des Dreamweavers unter dem Menü Datei ansehen, werden vier Optionen angezeigt "Code, Split, Design und Live" so was:
  • Wählen Sie die hervorgehobene Option "Teilt", und Sie sehen eine Ansicht des Codes und der eigentlichen Site nebeneinander. Schauen Sie sich den Code an.
  • 4. Bearbeiten Sie die Header für jede Seite. Es gibt (Div Data-Rolle ="Seite" id ="Seite"), was bedeutet, dass es der Beginn einer neuen Seite ist. Beachten Sie, dass jede Seite mit einer Nummer "DIV-Datenrolle = zugeordnet ist ="Seite" id ="Seite 2"`ist die zweite Seite`, div Datenrolle ="Seite" id ="Seite 3"`ist die dritte Seite und so weiter

    `div Datenrolle ="Header"`ist der Headerbereich, und Sie legen Ihre Header-Informationen zwischen den beiden ein "H1"und "/ h1" Stichworte.
  • Bildtitel Erstellen Sie eine mobile Website mit Dreamweaver Schritt 5
    5. Bearbeiten Sie die Inhalts- und Menüelemente. `div Datenrolle ="Inhalt"`ist der Anfang des Inhaltsabschnitts. Hier legen Sie den tatsächlichen Inhalt jeder Seite ein. Beachten Sie, dass auf der ersten Seite:
  • Wenn Sie auf die eigentliche Webseite ansehen, sehen Sie, dass die erste Seite eine Liste von Links hat. `UL-Datenrolle ="Listenansicht"`bedeutet, dass Sie eine Liste von Links im Inhaltsbereich wünschen.Beim Hinzufügen von Menüelementen oder `Datenrolle ="Listenansicht"`Stellen Sie sicher, dass Sie den richtigen Text mit den richtigen Seiten verknüpfen. Zum Beispiel, wenn Seite zwei ist "Über uns", Seite drei ist "Unser Service", und Seite vier ist "Kontaktiere uns" Dann willst du setzen:Bildtitel Erstellen Sie eine mobile Website mit Dreamweaver Schritt 5Bullet1
  • Um Inhalte zu bearbeiten, legen Sie einfach Ihren Text zwischen der `DIV-Datenrolle ="Inhalt"`und` / div `Tags. Beispielsweise:Bildtitel Erstellen Sie eine mobile Website mit Dreamweaver Schritt 5Bullet2
  • 6. Bearbeiten Sie die Fußzeile. Um die Fußzeile zu bearbeiten, legen Sie einfach Ihren Text anstelle der "Fußzeile" Text.
  • Bildtitel Erstellen Sie eine mobile Website mit Dreamweaver Schritt 7
    7. Werfen Sie einen Blick auf Ihre Website in "Live-Modus". Erinnern Sie sich, wo Sie eingeschaltet haben "Split-Modus?" In diesem Bereich gibt es einen Knopf, der besagt "wohnen". Klicken Sie darauf, und Sie werden sehen, wie Ihre Website auf einem Telefon aussehen wird!

    • Tipps

    In Verbindung stehende Artikel