Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > 4. Anleitung Microsoft Expression Web > 3. Dynamische Webvorlage laden und ändern

3. Dynamische Webvorlage laden und ändern

Die Dynamische Webvorlage halte ich für unverzichtbar, wenn es darum geht eine Website mit mehreren Seiten zu erstellen. In Nutzen einer dynamischen Webvorlage gibt es eine Erklärung, warum eine dynamische Webvorlage in Microsoft Expression Web genutzt werden sollte.

In dieser Anleitung soll es erst einmal darum gehen, wie wir eine dynamische Webvorlage laden und ändern um eine Website zu erstellen. Dazu nutzen wie eine vorgegebene fertige Beispiel Vorlage und schauen uns das Prinzip an, wie das ganze funktioniert.

Expression Web Website aus einer Vorlage

Aussuchen Dynamische WebvorlageAls erstes gehen wir auf Site --> Neue Site und wählen den Punkt Vorlagen aus. Hier können wir zwischen 19 verschiedenen Vorlagen wählen. Dabei spielt der Name keine Rolle, wir schauen einfach wie die Vorlage gestaltet ist und am besten unseren Vorstellungen entspricht.
Dabei müssen wir uns die Frage Breite, fest oder flexibel stellen. Wie wir lesen können, kein so leichte Entscheidung.

Ich nehme die Vorlage Kleinunternehmen 4 für dieses Beispiel (Bild rechts). Nun können wir den Ordner mit dem Inhalt unserer neuen Website sehen. Die default Datei ist unsere Homepage, also die Startseite unserer Website. Die öffnen wir und schauen sie im Browser an, dazu nutzen wir am besten die F12 als Tastenkombination, alternativ kann in der Symbolleiste das Symbol Browser Vorschau dafür geklickt werden oder unter Datei --> Browservorschau. Ich würde zur Tastenkombination raten, geht am schnellsten.

Jetzt können wir das ganze live testen und auch die Links besuchen.
Wenn es uns vorher noch nicht aufgefallen ist, so sollte es doch jetzt auffallen. Die Breite der Webseite ist doch sehr schmal.
Das werden wir dann bald ändern müssen. Gehen wir zurück zu Expression Web.

Änderungen an der dynamischen Webvorlage vornehmen

Master DWTUm Änderungen vornehmen zu können, müssen wir unsere Master Datei öffnen. Die master.dwt ist die dynamische Webvorlage, aus der wir alle Webseiten erstellen werden. So wie diese Datei aussieht, so werden alle anderen Webseiten aussehen.


Breite ändern

Nun wollen wir etwas am Design verändern, da uns vorher aufgefallen ist, dass die Webseite viel zu schmal dargestellt wird. Dafür gibt es verschiedene Möglichkeiten.  

  1. DIV Expression WebDa wir hier einen WYSIWYG Editor haben, nutzen wir die "Sehen und bekommen Methode" einfach einmal. Dazu klicken wir irgendwoPfeil ziehen Breite in die Vorlage, damit wir oben die verschiedenen Div Elemente angezeigt bekommen (Bild links), die auf diese Stelle in der Vorlage wirken. Nun klicken wir auf den <div#container>. Der umschließt die ganze Webseite und gibt die Breite vor, wie wir an der grünlichen Markierung sehen können. Mit der Maus gehen wir über den rechten Rand an da weiße Rechteck. Dort verändert sich unser Mauszeiger und zeigt die eingestellte Breite von 646 Pixel an (Bild rechts). Nun können wir die Breite z.B. um 300px erhöhen. Oft würden wir so die komplette Webseiten Breite erhöhen, da die innenliegenden Div Boxen keine Breite vorgegeben haben. In dieser Vorlage ist da aber der Fall, so dass wir die anderen Boxen ebenfalls um 300 Pixel erhöhen müssen.
    Beim Div Content ist es etwas blöd, da sich die Breite nach links bewegt. Hier muss zusätzlich die Box durch markieren verschoben werden. Dafür klickt man oben den Div#Content an, damit die Box markiert ist. Mit der Maus zieht man die Box beim Div Namen Div Box verschiebenan die richtige Position. Nun bleibt eine graue Box übrig. Hier handelt es sich um ein Hintergrundbild, das auch noch bearbeitet werden muss, oder wir löschen es einfach. Im Ordner image befindet sich dieses Bild, der Name ist msfp_smbus2_01. Wir können es nun mit einem Bildbearbeitungsprogramm öffnen. Ich nutze dafür paint.net. Unter Bild --> Größe ändern können wir das machen. Da wir nur die Breite ändern wollen, schalten wir Seitenverhältnis behalten aus und geben unsere 300 Pixel bei der Breite dazu. Das Bild speichern wir dann so ab. Nun schließen wir die Master Datei und öffnen sie neu, da das Bild noch nicht richtig angezeigt wird. Nun haben wir die Breite geändert.
    Um genau zu sein, ist das ändern des Bildes in diesem Fall total unnötig, da die weiße Content Box den grauen Bereich schon nach paar geschriebenen Linien überdeckt und normal nie zu sehen ist. Nur der schwarze Schimmer ist am Rand zu erkennen und schafft einen unschönen Absatz links, da das schwarz des Bildes beim vergößern mehr wurde. Um das auszubessern, müsste man das Bild neu bearbeiten.
    Fazit: Umständlich, da genau auf das Pixel genau die Boxen mit der Maus vergrößert werden muss. Dazu kommt noch das Problem mit der Content Box
  2. CSS EigenschaftenEine andere Möglichkeit ist das nutzen der CSS Eigenschaften. Sofern wir den Bereich nicht eingeschalten haben, können wir in unter Bereiche aktivieren und anpinnen (anpinnen). Wir wählen wieder die Div Elemente aus. Fangen wir mit einem Rechtsklick auf <div#container> an. Bei den CSS-Eigenschaften klicken wir Zusammenfassung an. Dort finden wir unter dem Punkt Position eine width Angabe, damit wird die Breite angegeben. Hier erhöhen wir den Wert um 300 auf 946px. Aufpassen, dass die Einheit px nicht gelöscht oder vergessen wird. Als nächstes klicken wir in den Header Bereich und klicken wieder oben auf den Div, diesmal ist es der div#masthead, damit die CSS Angaben bei den CSS-Eigenschaften angezeigt werden. Erhöhen den Wert wieder um 300px. Das gleiche machen wir mit dem div#footer und div#content. Nun bleibt wieder die graue Box übrig, die durch ein Bild erzeugt wird. Wie unter Punkt 1, ändern wir die Bildgröße und öffnen die master.dwt neu.
    Fazit: Einfach und schnell
  3. Direkt in der CSS Datei können diese Änderungen ebenfalls vorgenommen werden. Wir klicken in der CSS-Eigenschaftenbox auf das blaue style1.css, wie es im rechten Bild zu sehen ist. Sollte es nicht angezeigt werden, dann muss auf Zusammenfassung geklickt werden, da diese wohl aktiviert ist.
    Andere Möglichkeit wäre, das über die Ordnerliste zu öffnen. Zu finden ist diese Datei im Ordner styles.
    In der CSS Datei finden wir wieder unsere Divs und die width Angaben, welche wir einfach umschreiben müssen. Bei den Divs #container, #masthead, #content und #footer setzen wir die width Werte um 300 Pixel nach oben und speichern alles ab. Das Bild der grauen Box ändern wir wie beim ersten Punkt dieser Liste.
    Fazit: Einfach und noch schneller

Farben anpassen

Schön ist etwas anderes finde ich. Die Farben der Vorlage müssen verschwinden. Nun können wir im CSS-Eigenschaften Bereich die Farben austauschen. Dafür markieren wir wie oben beschrieben die verschiedenen Div Bereiche.
Zuerst den Div#Container, hier ist als Hintergrund das graue Bild drin. Das gefällt mir überhaupt nicht, also lösche ich komplett den Inhalt aus dem Background-image heraus. Die anderen beiden Angaben im Hintergrund Bereich können entfernt werden, da sie nicht mehr benötigt werden. Statt dessen setzte ich eine neue Farbe als Hintergrund ein. Dafür muss ich aber die Zusammenfassung wieder zu machen und bei Hintergrund das Feld background-color suchen und in die rechte Spalte klicken. Dort habe ich viele verschiedene Möglichkeiten eine neue Farbe zu wählen. Die Farbänderung ist sofort zu sehen. Wer doch lieber das Bild behalten will, der kann ja das aktuelle Bild im Bildbearbeitungsprogramm bearbeiten, indem er alles löscht und/oder neu übermalt.
In den anderen Div Bereichen machen wir es genauso, vorausgesetzt wir sind mit den Farben nicht zufrieden.

Schrift anpassen

Bei den CSS-Eigenschaften lassen sich genauso Schriftfarbe, Typ und Größe verstellen. Wie immer oben den Div markieren durch einen Klick und Zusammenfassung nutzen, da dort alle vergebenen CSS Einstellungen zu sehen sind, ganz ohne die ungenutzten, welche ausgeblendet werden.

Logo austauschen

Wenn das Logo die gleiche Größe haben soll, wie das aktuelle Logo, dann kann einfach das im Image Ordner liegende Bild mit einem Bildbearbeitungsprogramm geöffnet werden. Den Inhallt löschen, bzw. übermalen wir einfach mit unserem Logo. Wer kein Logo haben will, oder nur einen Text in das Feld schreiben will, der löscht einfach nur das Bild aus der Vorlage raus. Anklicken und Entf-Taste drücken.

Vorlage fertig anpassen

Aktuell haben wir eine fertige Website mit Links und Ordnern, die nicht zu unseren zukünftigen Website passen. Das werden wir ändern müssen. Ziel ist es eine leere Dynamische Website Vorlage zu erhalten, bei der wir nur unseren eigenen Inhalt einfügen müssen.
Eine andere Möglichkeit wäre, dass wir alle bestehenden Links umbenennen und unseren Linknamen setzen. Der verlinkte Ordner müsste ebenfalls umbenannt und der Hyperlink neu gesetzt werden. Die Beispiel Inhalte jeder einzelnen Webseite müsste entfernt werden. Auch die Bilder werden ausgetauscht. Viel Arbeit, bei der man aufpassen muss nichts zu vergessen.

Wir werden aber nur eine Datei ändern, die master.dwt, unsere Vorlagendatei. Wir löschen alle anderen Seiten und Links aus der Vorlage und erstellen die Website von Grund auf neu mit der Master Datei. So sparen wir uns nicht nur Zeit, sondern lernen auch mit einer dynamischen Webvorlage zu arbeiten (nächste Seite)

Restliche DateienAm besten öffnen wir den Windowsordner mit unserer Website, alternativ kann auch über Expression Web in der Siteansicht oder in der Ordnerliste die Dateien gelöscht werden. Dort löschen wir alle Dateien und Ordner bis auf die Master Datei und die Ordner Styles und Images.
Im Ordner Images kann das Bild msfp_smbus2_01 auf jeden Fall Beispiel dynamische Webvorlagegelöscht werden. Bei den anderen kommt es darauf an, wie man vorher entschieden hat, ob das Logo und/oder Hintergrundbild genutzt wird. In Expression Web müssen wir nun die F5 Taste drücken um zu aktualisieren. Nun müsste es so aussehen wie im Bild rechts.
Die Master Datei öffnen wir und löschen alle Links auf der Website heraus. Den Copyright Spruch können wir stehen lassen und später abändern. Je nachdem was wir im vorherigen Teil der Anleitung an Farben, Hintergrundbild und Logo gewählt haben, sie die Vorlage nun wie auf dem Bild links aus (zum vergrößern anklicken)

Nun sind wir soweit, dass wir aus dieser Vorlage unsere Website erstellen können

Weiter mit Teil 4: Website aus dynamischer Webvorlage erstellen