Entwerfen Sie Ihre erste Windows Store-App (HTML)

  • Artikel

Dieses Lernprogramm hilft Ihnen, die ersten Schritte mit den grundlegendsten HTML-Entwurfsaufgaben in Blend for Visual Studio 2012 durchzuführen. Wenn Sie dieses Lernprogramm abgeschlossen haben, haben Sie eine einfache, dynamische Version des Arbeitsspeicherspiels erstellt, das häufig als "Konzentration" bezeichnet wird.

Arbeitsspeicherspielprojekt

Laden Sie zuerst das Beispielprojekt für das HTML-Memory-Spiel aus der Windows Store-App-Beispielgalerie herunter. Dieses Projekt ist der Ausgangspunkt zum Durcharbeiten dieses Lernprogramms und enthält alle Dateien, einschließlich aller Bilder, die zum Erstellen der Anwendung erforderlich sind.

Wenn Sie das Beispielprojekt für das HTML-Arbeitsspeicherspiel heruntergeladen haben, extrahieren Sie die Dateien an einem Speicherort auf dem Computer, beispielsweise \Eigene Dateien\Visual Studio 2012\Projekte\. Wenn Sie die Dateien extrahiert haben, können Sie das Projekt öffnen.

So öffnen Sie ein vorhandenes Projekt

  1. Klicken Sie im Menü Datei auf Projekt/Projektmappe öffnen.

  2. Suchen Sie im Dialogfeld Projekt öffnen den Speicherort der extrahierten Projektdateien und die Projektmappendatei (memory.sln) im Projektordner oder in einem der Projektunterordner, und klicken Sie dann auf OK. Klicken Sie auf OK.

    Tipp

    Sie können ein Projekt auch öffnen, indem Sie im Datei-Explorer mit der rechten Maustaste auf die Projektdatei (.jsproj) klicken, auf Öffnen mit zeigen und dann Blend auswählen.

JJ129451.collapse_all(de-de,VS.110).gifDer Projektordner

Im Bereich Projekte können Sie die Standarddateien und Ordner finden, die automatisch generiert werden, wenn Sie ein neues Projekt erstellen.

Tipp

Wenn der Bereich Projekte nicht sichtbar ist, klicken Sie im Menü Fenster auf Projekte.

  • References enthält das schreibgeschützte CSS und die Windows-Bibliotheken für JavaScript.

  • css enthält alle Dateien des benutzerdefinierten CSS, die von der Anwendung verwendet werden.

  • images enthält Imageressourcen für die Anwendung.

  • js enthält die benutzerdefinierten JavaScript-Dateien.

  • default.html ist die standardmäßige Startseite der App.

  • package.appxmanifest führt die Anwendung und die Ressourcen auf. Diese Datei definiert auch die Startseite der App.

Speicherprojekt öffnen

JJ129451.collapse_all(de-de,VS.110).gifDie Quelldateien

Im Bereich Projekte werden neben den Standarddateien und Ordnern auch die Quelldateien für das Projekt angezeigt. Dazu zählen folgende Dateien:

  • Die Bilder Der Ordner photos enthält die Quellbilder für das Spiel.

  • Die semantische Struktur definiert in HTML Die HTML-Datei gibt das Dokumentobjektmodell (DOM) sowie einige ID und Klassennamen an. Standardmäßig wird default.html in der Ansicht Teilen geöffnet. Sie können den Code für default.html anzeigen, indem Sie entweder auf CodeSymbol "Codeansicht" oder auf die TeilenSchaltfläche „Geteilte Ansicht“-Ansicht klicken.

    Hinweis

    Wenn default.html nicht auf der Entwurfsoberfläche angezeigt wird, doppelklicken Sie auf default.html im Ordner Projekte.

  • Die Spiellogik in JavaScript Das JavaScript gibt die Spielfunktionen an. Das Skript erstellt auch dynamisch einige IDs und Klassen. Zum Anzeigen von JavaScript für das Spiel erweitern Sie im Ordner Projekte den Ordner js, und doppelklicken Sie anschließend auf default.js, um die Datei zu öffnen.

Zusätzlich zu den Quelldateien übergibt der Entwickler auch Hinweise für Entwickler (HTML) mit einigen Informationen zum Code und Vorschlägen zu den Formatelementen des Spiels.

Tipp

Es empfiehlt sich, das Projekt im Verlauf der Arbeit gelegentlich zu speichern. Zum Speichern des aktuellen Dokuments klicken Sie im Menü Datei auf Speichern, oder drücken Sie STRG+S.

Wenn mehrere Dateien geändert wurden, können Sie alle Änderungen speichern, indem Sie im Menü Datei auf Alle speichern klicken oder UMSCHALT+STRG+S drücken.

Ein Sternchen auf der Dokumentregisterkarte gibt an, dass sich eine Datei geändert hat. Wenn sich mehrere Dateien geändert haben, wird ein Sternchen auf jeder der Registerkarten angezeigt.

Der nächste Schritt: Formatieren von Apps.