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
Zuerst
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.
Am
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.
-
In
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
an.
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) - 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
Nun
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
In
unserem Fall würde das dann wie folgt ablaufen:
- Neue Webseite aus der Vorlage erstellen
- 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.
- 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.
- 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.
Nun
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