Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
zurück: Kapitel 05 - Teil 2 - Butter bei die Fische weiter: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.     Status: Diskussion Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
01. Dez 2007, 16:21
Rufname:
Wohnort: Aachen

Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! - Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!

Nach oben
       

·Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!


Hallo zusammen,

zum Stand der Dinge: Wir haben die Bedingungen für unser Webprojekt gecheckt, eine Idee in einem Grafikprogramm visualisiert, die Grundlagen in HTML/XHTML kennen gelernt und sind mit CSS auf Tuchfühlung gegangen. Das heißt, jetzt geht es ans Eingemachte, wir begeben uns an die Umsetzung.

Bevor wir uns aber in einen Webeditor stürzen, müssen wir uns erstmal ein Bild davon machen, wie wir vorgehen werden. Die Seite soll nach dem Boxmodell aufgebaut werden, d.h. wir überlegen uns, wo wir sinnvollerweise mit Containern arbeiten. Dafür betrachten wir den Entwurf, den wir in Kapitel 3 fertig gestellt haben. In dem grauen Bereich, dem Hauptcontainer, spielt sich nachher alles ab. Der Hintergrund ist rechts und links gleich, nur innerhalb dieser Box sind verschiedene Elemente positioniert.



Dieser Container wird im Browser zentriert, dadurch werden Auflösungen unterschiedlicher Art abgefangen – ist die Auflösung höher, ist mehr Hintergrund zu sehen, ist er geringer, ist weniger Hintergrund zu sehen. Die Inhalte sind durch die Zentrierung stets zu sehen. Der Hintergrund wird gekachelt, so dass er sich stets der Auflösung anpasst.

In diesen Hauptcontainer werden Boxen für die maßgeblichen Bereiche positioniert.



Dadurch dass sie in dem Hauptcontainer positioniert sind, wird Ihre Position nur durch den Container bestimmt und nicht mehr durch den body.

Nun benötigen wir die Größe des Containers. Dafür öffnen wir unser Layout in Gimp. Wir haben ja noch die Hilfslinien, die wir entlang der Elemente gezogen haben. Nun müssen wir noch eine kleine Korrektur vornehmen: Am rechten Rand des orange farbenden Blatt ist noch der Schlagschatten zu berücksichtigen. Wir ziehen also noch eine Hilfslinie 14 Pixel rechts vom Rand.





Nun wählen wir das Messwerkzeug aus und messen vom linken Rand des Menüs bis zur eben gezogenen Hilfslinie. Wahlweise kann man die Strecke natürlich auch oben am Lineal ablesen und errechnen. Wie auch immer, es werden 814 Pixel herauskommen. Dies ist die Breite unseres Hauptcontainers.

Jetzt geht’s an den Editor. Doch erstmal sollten wir uns im Explorer einen Projektordner erstellen. Dann erstellen wir im Editor eine leere Datei und speichern sie als index.html ab. Und eine weitere leere Datei, die wir als style.css abspeichern. Beide sollten im Projektordner gespeichert werden. Im Ordner brauchen wir noch einen Unterordner für die Bilder, die wir später dort ablegen werden. Nennt diesen Unterordner images. Soweit die Vorbereitungen. Öffnet eure index.html und fügt das XHTML-Grundgerüst ein und vergebt im title-Bereich dem Dokument den Namen Ziehenders Welt.



Vergesst nicht eure CSS Datei im Kopf einzubinden. Da wir sie extern abgelegt haben, muss auf sie referenziert werden. Nun öffnet ihr eure CSS Datei. Dort werden wir nun mit den globalen Angaben beginnen. Zunächst möchten wir, dass das Dokument immer eine Höhe von 100% hat. Notieren wir das für die Elternelemente html und body:

html, body { height: 100%;}

Anschließend müssen wir dafür sorgen, dass die Inhalte von body zentriert sind, denn der Hauptcontainer soll ja immer in der Mitte stehen. Dies erreichen wir mit der Eigenschaft text-align und dem Wert center. Und wo wir gerade dabei sind, setzten wir auch die Innen- und Außenabstände auf Null:

body{
padding: 0;
margin: 0;
text-align: center;
}


Da wir gerade im Elternelement sind, können wir dazu auch noch die Schriftfamilie, Schriftgröße und –farbe notieren. Diese Angabe ist für den Rest des Dokumentes gültig, solange keine Ausnahmen definiert werden. Ansonsten brauchen wir uns um diese Angaben nicht mehr zu kümmern.

body{
padding: 0;
margin: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
}


Speichern nicht vergessen! Das waren die grundsätzlichen Angaben. Bis auf das Zentrieren sollten diese Angaben stets an dieser Stelle erfolgen. Für den Hauptcontainer müssen wir einen id-Selektor erstellen, diesen benennen wir content. Seine Breite geben wir mit den vorher gemessen 814 Pixel an. Um diesen Container sicher in jedem Browser in der Mitte zu positionieren greifen wir ein wenig in die Trickkiste. Wir geben einen linken Abstand zum Elternelement von 50% Prozent und zusätzlich einen negativen Außenabstand von der Hälfte des gesamten Containers (407 Pixel) an. Und damit er bloß da bleibt wo er ist, setzen wir seine Position auf absolut:

#content{
width: 814px;
margin-left: -407px;
top: 0px;
left: 50%;
position: absolute;
}


Da wir bis jetzt keine anders lautende Angaben zur Hintergrundfarbe gemacht haben, erbt der Container die Standardfarbe des Basis-Stylesheets, also weiß. Um nachher im Browser auch was zu sehen, geben wir dem Container deshalb vorübergehend noch ein freches Grau als Hintergrundfarbe und geben ihm eine Höhe von 100%:

background-color:#ccc;
height: 100%;


Jetzt kehren wir in die HTML Datei zurück und fügen im body ein div mit der ID content ein. Mit der klassischen Aussage "Hallo Welt!" haben wir auch ein Inhalt, der jetzt im Browser betrachtet werden kann.



Ihr solltet jetzt ein 814 Pixel breites, graues Rechteck sehen, das sich über die gesamte Höhe des Browsers erstreckt. Wenn ihr die Größe des Browsers verändert, wird dieses Rechteck immer in der Mitte ausgerichtet sein.

So, das hat ja so gut geklappt, dass wir uns jetzt den anderen Boxen widmen werden. Als nächstes erstellen wir einen Container für den Kopfbereich. Das funktioniert im Prinzip genauso, wie mit dem Hauptcontainer. Natürlich ist der Kopf genauso breit, wie der Hauptcontainer, also 814 Pixel. Legen wir die Höhe erstmal mit 200 Pixel fest, bis wir das im Layout ausgemessen haben. Den exakten Wert werden wir dann nach dem Ausspielen des Bildes eintragen. Eine Hintergrundfarbe werden wir auch mal setzten, damit er zu sehen ist. Der Container sähe dann so aus:

#head{
width: 814px;
height: 200px;
background-color:#cc0000;
}


Im HTML Dokument können wir nun das "Hallo Welt!" entfernen und stattdessen in dem div content ein neues div mit der ID head erstellen.



Nun speichert ihr die Datei und aktualisiert den Browser. Als Ergebnis sollte ein schöner, roter, fetter Balken erscheinen. Weiter geht’s mit dem Container für das Menü. Auch hier messen wir in Gimp die Breite des Menüs und den Abstand von oben bis zum oberen Rand des Menüs aus. Nach meinen Werten ist die Breite 148 Pixel und der Abstand von oben beträgt 190 Pixel. Wir verfahren wie beim Kopfbereich und notieren zusätzlich eine Höhe von 300 Pixel und eine andere Hintergrundfarbe:

#menue{
background-color: #669933;
width: 148px;
height: 300px;
}


Dieser Container wird ebenfalls in das HTML Dokument eingebunden, innerhalb des Containers content:



Wir speichern die Dokumente und aktualisieren den Browser. Nun werdet ihr sehen, dass der Menücontainer unterhalb des heads rumhängt. Der ist ja 200 Pixel hoch, insofern höher als der gemessene Abstand des Menüs zum oberen Rand. Ohne weitere Angabe positioniert der Browser die Elemente hintereinander, wie sie im HTML-Dokument erscheinen. Reicht der Platz nicht aus, werden die Elemente umgebrochen und eine Zeile tiefer positioniert. Das ist aber nicht das, was wir wollten. Also müssen wir konkretere Angaben zur Position machen. Dies erreichen wir mit top, left und position. Der Abstand nach oben war 190 Pixel, nach links gibt es keinen Abstand, also 0 Pixel und die Position soll absolut sein. Demnach sieht die Styleangabe folgendermaßen aus:

#menue{
background-color: #669933;
width: 148px;
height: 300px;
left: 0px;
top: 190px;
position: absolute;
}


Nach Speichern und Aktualisieren passt das Ganze nun. Bleibt zum Schluss nur noch der Contentbereich. Messen wir in Gimp wiederum die Breite – vom rechten Rand des Menüs bis zum rechten Rand der hellgrauen Fläche – macht bei mir 632 Pixel. Desgleichen der Abstand nach oben - vom oberen Rand der hellgrauen Fläche bis zum oberen Dokumentenrand - macht 130 Pixel. Das Erzeugen eines ID-Selektors sollte ja nun kein Problem mehr sein. Dieser Container wird auch absolut positioniert, bedenkt dabei den linken Abstand, und gebt ihm auch eine schöne Hintergrundfarbe und eine feste Höhe. Auch dieser Container wird innerhalb des Hauptcontainers als div eingefügt.

#inhalt{
left: 148px;
top: 130px;
width: 632px;
height: 400px;
position: absolute;
background-color: #99ccff;
}




Im Prinzip haben wir das Grundgerüst nun fertig. Die festen Höhenangaben werden später wieder wegfallen, sobald diese Container mit Inhalten gefüllt sind. Dann werden die Inhalte die Höhe bestimmen. Jetzt haben wir das nur gemacht, um uns ein Bild zu verschaffen. Für eine bessere Übersicht sollten wir die CSS Datei und die HTML-Datei auskommentieren. Da beide in den folgenden Kapiteln noch anwachsen werden, findet man später leichter zurecht. Für die CSS Datei sähe dies so aus:

/* Basis */
html, body { height: 100%;}

body{
padding: 0;
margin: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
}

/* Hauptcontainer */
#content{
width: 814px;
height: 100%;
margin-left: -407px;
top: 0px;
left: 50%;
position: absolute;
background-color: #ccc;
}

/* Kopf */
#head{
width: 814px;
height: 200px;
background-color: #cc0000;
}

/* Menü */
#menue{
background-color: #669933;
width: 148px;
height: 300px;
left: 0px;
top: 190px;
position: absolute;
}

/* Inhalte */
#inhalt{
left: 148px;
top: 130px;
width: 632px;
height: 400px;
position: absolute;
background-color: #99ccff;
}


Die HTML-Datei wird ähnlich strukturiert:



Im nächsten Kapitel werden wir zum einen die Bilder für die Seite ausspielen und in das CSS einbinden und zum anderen das Menü erstellen, und halt noch so ein bisschen Feintunig betreiben.

Dann also bis nächste Woche.


Übung...

Diesmal gibt's zwar keine Übungsdatei, ihr könnt aber die HTML Dateivorlage aus den vorherigen Workshops verwenden.

Gruß

V 1.00 - (C) by Maninweb.de - All rights reserved··

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
maninweb
Microsoft Excel MVP 2014


Verfasst am:
01. Dez 2007, 16:23
Rufname: maninweb
Wohnort: Aachen

AW: Kapitel 5 - IN ARBEIT - AW: Kapitel 5 - IN ARBEIT

Nach oben
       

·Kapitel 05 - Teil 1 - Kleine Liste von Helferlein


Hallo zusammen,

noch ein kleiner Nachtrag zum Workshop. Manche werden sich sicherlich fragen, womit bzw. mit welcher Software denn geübt werden sollte. Nun, auch in diesem Stadium des Workshops bleiben wir bei der Empfehlung keinen professionellen Webeditor zu verwenden.

Ok, der Windows Editor ist sicherlich nicht besonders komfortabel, zumal er kein Syntax-Highlighting kennt. Deswegen, haben wir hier mal eine kleine Liste von Programmen zusammengestellt, die ihr verwenden könnt. Die Sortierung hier hat keine Bedeutung.

NNameKurzbeschreibungLink
1Notepad2Netter Windows Editor Ersatz mit vielen sinnvollen Funktionen. Der Editor lädt schnell und unterstützt Syntax-Highlighting für viele Sprachen.Link
2CSS EditorEin CSS-Editor, der komfortabel das Erstellen und Bearbeiten von CSS Dateien ermöglicht. Paletten unterstützen das Finden der CSS Eigenschaften.Link
3Notepad++Ein Open Source Editor mit vielfältigen Einstelloptionen und ausgereiften Features. Unterstützt auch das Ein- und Ausklappen von Codeteilen.Link

Weitere Vorschläge sind natürlich willkommen. Schreibt mir in diesem Fall eine PN.

Gruß

V 1.00 - (C) by Maninweb.de - All rights reserved··


Zuletzt bearbeitet von maninweb am 01. Dez 2007, 18:27, insgesamt 10-mal bearbeitet
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Dez 2007, 17:00
Rufname: maninweb
Wohnort: Aachen


AW: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! - AW: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!

Nach oben
       

Dieser Beitrag dient nur zur Sortierung
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet 1 womaninweb 7815 21. Dez 2007, 17:06
maninweb Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 1 womaninweb 5455 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 3 - Es lebt immer noch!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML 1 womaninweb 5131 21. Dez 2007, 17:04
maninweb Kapitel 02 - Teil 4 - Der Konformist – XHTML
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch 2 womaninweb 6249 21. Dez 2007, 17:04
maninweb Kapitel 03 - Teil 1 - Farbenrausch
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ... 1 womaninweb 5232 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 3 - Stein auf Stein ...
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 4 - Pimp my Site 1 womaninweb 5383 21. Dez 2007, 17:02
maninweb Kapitel 03 - Teil 4 - Pimp my Site
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt 1 womaninweb 4736 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? 1 womaninweb 4360 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 2 - Butter bei die Fische 1 womaninweb 4459 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 2 - Butter bei die Fische
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen 1 womaninweb 4240 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 3 - Feingeschliffen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6755 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 5 maninweb 3753 03. Apr 2008, 12:05
voler Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: HTML Editor Forum