Website aus dynamischer Webvorlage erstellen
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > 4. Anleitung Microsoft Expression Web > 4. Website aus dynamischer Webvorlage erstellen

4. Website aus dynamischer Webvorlage erstellen

Im vierten Teil der Microsoft Expression Web Anleitung werden wir aus unserer dynamischen Webvorlage eine Website erstellen.
Sollte unsere Website noch nicht geöffnet sein (z.B. weil die bisherige Anleitung abgebrochen wurde), so gehen wir auf Site --> Site öffnen und öffnen unsere Website.

Homepage erstellen aus dynamischer Webvorlage

Neue Webseite aus dynamischer Vorlage erstellenZuerst erstellen wir unsere Einstiegsseite unserer Website, das ist die Homepage. Dafür müssen wir aus der von uns vorher erstellten Vorlage (master.dwt) eine Webseite erstellen.
Dazu gehen wir auf Datei --> Neu --> Aus dynamischer Webvorlage erstellen und klicken unsere Master Datei an. Wir erhalten nun eine Datei, bei der es nur einen sichtbaren Bereich gibt, der geändert werden kann, den Content Bereich. Der Rest, der für die Bearbeitung gesperrt ist, den können wir nur über die master Datei ändern.
Homepage speichernAm besten speichern wir die Datei gleich ab. Dazu beachten wir die Regeln für Dateinamen. Der erste Punkt triff hier auch zu, so dass wir unsere Datei danach benennen. Ich selbst nutze immer den Namen index, da ich mir das 2003 so angewöhnt habe. Expression Web schlägt, wir noch später sehen werden, den Namen default vor. Jeder kann selbst entscheiden, was er nutzen will, wichtig ist nur, dass man nicht xyz oder sonst etwas anderes als Namen nutzt, da sonst keine Webseite angezeigt werden kann. Um zu speichern gehen wir auf Datei --> Speichern unter und speichern die Homepage in der obersten Ebene. In diesem Fall dort, wo die Master Datei liegt, wie im linkem Bild zu sehen.

Nun können wir die Startseite mit Inhalt füllen und abspeichern, dabei achten wir jetzt schon darauf, dass wir die Seite für Suchmaschinen optimieren, siehe Promotion.
Den Titel und Metatag für die Beschreibung und Keywörter können wir einfügen, indem wir einen Rechtsklick machen und Seiteneigenschaften auswählen, oder unter Datei --> Eigenschaften.

Homepage verlinken und Verknüpfung erstellen

Sobald die erste Webseite fertig ist, müssen wir diese in der Navigation links verknüpfen. Im Moment haben wir dort noch keinen Link stehen. Dafür öffnen wir die Master Datei und können beim Copyright schon einmal die Jahreszahl ändern.
Nun haben wir 2 Möglichkeiten den Link zu erstellen.

  1. Hyperlink einfügenIn der Navigation schreiben wir ganz oben unseren Linktext Namen wie z.B. Home, Start... und markieren ihn mit der Maus und klicken das Hyperlink Symbol Hyperlink Symbol Expression Weban. Auch die Tastenkombination Strg + K und Einfügen --> Link sind möglich. Dann wählen wir unsere Datei aus, die wir als Homepage gespeichert haben. Im meinem Fall ist es die Index Datei in der obersten Ordnerebene. Siehe Bild rechts (klicken zum vergrößern)
  2. Alternativ können wir auch zuerst mit der PC Maus an die Stelle klicken, wo der Hyperlink zur Homepage gesetzt werden soll und wie oben das Hyperlink Menü aufrufen. Hier suchen wir uns wieder den Homepage Link (index) und dürfen diesmal nicht auf ok drücken, da wir zuerst unseren Linktest angeben müssen. Das geschieht ganz oben im Fenster bei Text anzeigen als. Mit OK schießen wir das ganze ab und können unseren Hyperlink sehen

Dynamische Webvorlage übernehmenNun speichern wir die dynamische Vorlage ab, z.B. per Tastenkombination Strg + S. Es erscheint eine Abfrage (Bild links), ob die 1 Datei, die an die master.dwt angehängt ist, auch aktualisiert werden soll. Wir klicken auf Ja, da wir den Menülink auch auf unserer Homepage sehen wollen. Hätten wir bereits 15 Webseiten mit der Vorlage erstellt, würden nun alle 15 Webseiten den Home Link erhalten.

Das Ergebnis können wir im Webbrowser begutachten, indem wir die Homepage Datei in der Vorschau öffnen, z.B. durch die Taste F12. Sollte die Homepage noch geöffnet gewesen sein, muss sie erst gespeichert werden.

Weitere Webseiten verlinken

Für weitere Webseiten gehen wir wie oben vor, nur mit dem Unterschied, dass wir beim speichern darauf achten, die URL für Suchmaschinen zu optimieren. Dabei meine ich die sprechende URL. Eine Anleitung dazu gibt es hier: Anleitung sprechende URL

Neuer Ordner erstellenIn unserem Fall würde das dann wie folgt ablaufen:

  1. Neue Webseite aus der Vorlage erstellen
  2. Datei speichern unter wählen und neuen Ordner erstellen, indem oben auf Neuer Ordner (siehe rote Markierung Bild rechts) geklickt wird. Dem Ordner geben wir dann nach den Regeln für Dateinamen (siehe weiter oben) einen Namen der etwas über den Webseiten Inhalt aussagt. Da noch das Impressum fehlt, nehmen wir in diesem Fall den Namen Impressum (klein geschrieben). Dann öffnen wir den Ordner und nehmen entweder den von Expression Web vorgeschlagenen Namen Default, oder ändern das auf Index und speichern.
  3. Wir erstellen wieder einen Hyperlink in der Vorlage, unserer master.dwt und verlinken diesmal nicht die Index Datei, sondern nur den Ordner (in unserem Fall Impressum). So entsteht dann Websitename.de/impressum als URL, statt Websitename.de/impressum/index.html.
  4. Sollte zwischen dem Home Link und Impressum zu viel Platz sein, einfach vor das Impressum klicken und die Löschtaste drücken. Alternativ geht auch die Entf-Taste, hier muss man aber an das Ende des Home Links gehen.

Fertige Expression Web WebsiteNun kann man beliebig viele weitere Webseiten erstellen und verknüpfen, bis die Website fertig ist. Je mehr Webseiten entstehen, desto größer der Vorteil durch die Webvorlage. Bei 15 Webseiten würde es sonst bedeuten, dass man 15 Webseiten einzeln öffnen und einen weiteren Weblink einfügen muss. So aber muss nur die dynamische Webvorlage mit einen weiteren Hyperlink gefüllt werden, welcher beim speichern auf alle 15 Webseiten übertragen wird.
Am Ende könnte die Webseite dann wie im Beispiel links aussehen.

 

Weiter mit Teil 5: Website online stellen