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
Als 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
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
Um
Ä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.
-
Da
wir hier einen WYSIWYG Editor haben, nutzen wir die "Sehen und
bekommen Methode" einfach einmal. Dazu klicken wir irgendwo
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
an
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 -
Eine
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 (
).
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 - 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 anpassenAktuell 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)
Am 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
gelö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