Die Einführung in die Welt des CSS - Kapitel 1: Was macht das CSS?
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Die Einführung in die Welt des CSS Kapitel 1: Was macht das CSS? Im CSS gibt es folgende Probleme: Da es kein Papierdruck ist sondern im Web sieht je nach Browser also Betrachter die Webseite anders aus da jeder Browser ein bisschen anders arbeitet. Auch wenn man als Programmierer einer Seite alles schön bunt macht und mit vielen Schriftarten kann der Betrachter der Seite die Seite anders sehen da man die Schriftarten und alles verändern kann im Browser. Sogar eigene Stylesheets können eingefügt werden! Der Seitenquelltext wird je nach Browser und Browsereinstellungen anders formatiert also aufgebaut und angezeigt. Der Quelltext besteht aus 3 verschiedenen Sprachen wie HTML (ordnet den Inhalt der Webseite), das CSS (gestaltet die HTML Elemente) und das JavaScript (manipuliert das Verhalten einer Webseite). Ohne CSS sieht alles ganz anders aus. Keine Spaltenformatierung, keine Farben keine Aufteilungen usw. Mit dem CSS wird die Seite erst richtig designt. Denn nur mit dem HTML alleine kann man keine Webseite gut gestalten. Also HTML und CSS und JavaScript bilden also den Seitenquelltext. HTML Seiten bestehen alle aus „kleinen Boxen“ dazu kann man im Web developer die Einstellung Blockelemente mit Kontur versehen einschalten und alles wird umrahmt angezeigt also in solchen rechteckigen Kästchen. Mit dem Firebug Addon kann man die Webseite überprüfen wie was dargestellt wird und ob alles funktioniert.
Kapitel 2: Was gibt es alles im CSS?
HTML: Das HTML bedeutet Hyper Text Markup Language. Jeder Quelltext hat vier
Elemente: Den Doctype, das HTML, den Head- Bereich mit title, Meta und style und
dann noch den Body mit dem ganzen Inhalt. Als Doctype kann man heute eigentlich
nur den verwenden dies genügt und jeder Browser kann es
verstehen. In den werden auch die Metatags geschrieben. Diese enthalten
Beschreibung, Seitenersteller usw. In den Body werden
In dem Bereich werden Kopfbereich, Navibereich, Textbereich und
Fussbereich angegeben. Umschlossen wird das ganze mit dem wrapper tag. damit wird alles umschlossen und es wirkt übersichtlicher. Um nun
auch die vielen verschiedenen divs voneinander zu unterscheiden werden sie am
Schluss mit Kommentaren getagt zum Beispiel Der
Navigationsbereich wird mit dem Tag angefangen und wird mit der also
mit dem Lisetentag weitergeführt dann kommen die untergeordnete Listen und
mit diesen Tags erstellt man die Navigation.
Auf der Seite http://www.nice-entity.com/ findet man viele verschiedene
Sonderzeichen und ihre Schreibweise im HTML. Und um die Seite zu überprüfen
kann man im Firefox unter Werkzeuge Lokal HTML validieren anklicken und es wird
überprüft.
Kapitel 3: Im CSS gibt es Stylesheets!
Im 3 Kapitel geht es um die eigenen Stylesheets um die HTML Seite zu gestalten
und designen. Es wird also ein neus Dokument aufgemacht und als .css Datei
gespeichert. Dann kommt am Anfang folgendes geschrieben: /* Stylesheet für
Workbook Nansa1 LBVO */
Nun kommen die ganzen Formatierungen. U zum Beispiel den Body zu definieren
gebraucht man body {background-color: Farbe-x; color: farbe-x; } damit wäre der
ganze Body Bereich in der nun bestimmten Farbe. Dies kann m an auch ebenfalls in
allen Tags anwenden. div#wrapper/kopfbereich usw. {background-color: red;
color: black; } Mit diesem “Code“ wird der Hintergrund rot und die Farbe der Schrift
Schwarz.
Um Schriftarten zu definieren kann man einfach die Schriftarten in der font-family
angeben: font-family: Tw Cen MT Condensed Extra Bold, Arial, Helvetica, sans-serif;
die erst genannte Schrift wird nun als erstes genommen, ist diese nicht vorhanden
dann die 2. Und immer so weiter.
Man kann auch die Texte ausrichten und formatieren auch hier kann man die
Schriftart auswählen und mit text-align kann man bestimmen wo es sein sollte und
die Schriftgrösse und der Schriftstyle ebenfalls.
Um für bestimmte Abschnitte oder Absätze eine Farbe zu bestimmen muss man
vorher zum Beispiel in einem oder oder Tag folgendes machen:
nun kann man ganz einfach angeben
div#gewünschter name {background-color: #8c8c8c; } und schon wird der
gewünschte Text in diese Hintergrundfarbe kopiert.
und verändern den Namen der Dateien. Das tag darf nur einmal
pro Seite angewendet werden kann man mehrere Male verwendet.
Hier ein kleines beispiel für ein CSS Stylesheet:
So könnte ein Stylesheet aussehen.:
/* Stylesheet für Workbook Nansa1 LBVO */
body { background-color: green;
color: black;
font-family: Tw Cen MT Condensed Extra Bold, Arial, Helvetica, sans-serif;
font-size: 120%}
div#wrapper {background-color: red;
color: black;
font-family: Tw Cen MT Condensed Extra Bold, Arial, Helvetica, sans-serif;}
div#kopfbereich {background-color: #f3c600;
color: black;
font-family: Tw Cen MT Condensed Extra Bold, Arial, Helvetica, sans-serif;
font-size: 130%; }
address {
text-align: center;
font-style: normal;
font-size: 80%;
line-height: 1.5;}
a {text-decoration: none; }
a:link {color:blue;}
a:visited{color: white}
a:hover, a:focus {text-decoration: underline;}
p#Self-HTML { background-color: #8c8c8c; }
Farbecodes, Befehle, Formatierungen
Um Farbcodierungen zu wählen geht das so #ffffff, dies ist ein Farbcode und die
ersten 2 ff bedeuten rot, die zweiten 2ff bedeuten grün und die dritteen 2 ff`s
bedeuten blau. Am einfachsten findet man diese im Photoshop Mit diesen Farben
wird dann alles zusammengemischt. Man kann die Farben auch in Prozent angeben
oder in der Englischen Bezeichnung reicht meistens auch aus.
Um jedes HTML Element ist ein grosser Kasten. Um den Inhalt ist der Padding-
bottom und dann kommt der Border, dann der Margin-bottom. Von allen gibt es
bottom, top, left und right um von allen die Grösse exakt bestimmen zu können.
Um von einer Box die Grösse zu bestimmen gebraucht man die tags width und
height. Um sie zu positionieren (auch Bilder) style="position:absolute; top:Xpx;
left:Xpx;" Die X-px müssen nun nur noch eingesetzt werden und bestimmt werden
das Bild wird danach ausgerichtet.
Den Wrapper passt man an und zwar mit diesem Code dann ist alles in der Mitte
zentriert und sieht auch gestalteter aus. width: 1300px; margin-top: 10px; margin-
right: auto; margin-bottom: 15px; margin-left: auto;
Mit dem padding- tag kann man verschiedene Textbereiche formatieren und
gestalten also immer angeben wie viel abstand alles haben soll und so weiter.
Mit dem background-color kann man im Boxmodell auch im padding und im border
anwenden. Um zum Beispiel ein Logo zu umrahmen schreibt man im CSS p#logo:
{border:10px solid #ffffff ; margin-left: , margin-right: } man kann beliebig viele
Elemente mit oder benennen und dann im CSS formatieren,
Farben gestalten, Rahmen hinzufügen und so weiter.
Man könnte auch für die Navigation einfach den Befehl geben im CSS
div#navibereich { display: inline; list-style-type: none;} dann würde es auch eine
horizontale Navigation erstellen, so wie ich es halt nun mit einer Tabelle gemacht
habe.
Um Farben/ Textformatierungen und so weiter im Voraus anzuschauen wie es später
aussehen könnte kann man die HTML- Seite im Firefox öffnen und Firebug
installieren. Mit Firebug kann man die Webseite anschauen und formatieren. Mit den
Pfeiltasten rauf und runter bewirkt, dass es immer eine Farbe/ Grösse höher oder
tiefer geht und damit kann man gut schauen, was bei welcher Formatierung
geschieht.
Kapitel 4: Wie erstellt man ein Kontaktformular?
Man kann sogar Kontaktformulare erstellen. Hier ein solcher Code:
Vorname:
Nachname:
Geschlecht:
männlich |
weiblich
rows="8"
cols="50"
>Kommentar zur Seite
Fanden sie es Lehrreich?
Ja
Nein
Teilweise
Dies bewirkt folgendes:
Formularchef wird nun das ausgefüllte einfach an die gewünschte Email Adresse
geschickt!
Druckversionen der Webseite:
Man kann auch ein extra CSS machen für eine Druckversion, da sonst das reine
HTML ausgedruckt wird hat man somit die Möglichkeit extra eine Druckversion zu
gestalten.
Der Browser speichert alle Deklarationen. Das heisst irgendwelche Styles die man geschrieben hat. Manche werden angewendet andere werden überschrieben. Hier ein Mindmap was der Browser genau macht. Floaten: Man kann auch Elemente gut positionieren. Entweder mit Normalem Flow: Position: static, oder Position: relative oder eine absolute Positionierung: Position: absolute, Position: fixed . Mit diesen Befehlen kann man die Elemente an den Teil heften , den man will eigentlich ist es am HTML Dokument angebunden aber mit dem Befehl Position: absolute kann man ganz einfach den Bereich zuerst bestimmen und dann wird es dort ausgerichtet. Um Bilder besser positionieren zu können sollte man den Bildern Klassen zuweisen. Mit float: right,left,center kann man bestimmen wo das Bild kommen sollte. Mit Border kann man einen Rahmen machen, um es sichtbarer machen, da es einen Rahmen hat. Mit margin-bottom, margin-left, margin-right kann man den Abstand zwischen Bild und darunterliegenden Text machen. Clear-tag: Es gibt clear-tags um einen Text unter Bilder zu schieben. Es gibt clear-left, right, clear: both (meistgebraucht). Es gibt auch Schrumpf-float. Um Bilder statt so, sauber aufzustellen, stellt man unter die eingebundene Grafik ein - tag. Dies bewirkt dass alles wieder sauber untereinander ist.
Dann erstellt man im head das div.galerie hr { clear: both; width:0; height:0; font-
size:0; line-hright:0;0} oder auch mit overflow:hidden; (dies ist die einfachste
Varitante) hat aber auch noch nachteile. Hat die Werte hidden, visible, scroll oder
auto. Mit Overflow hidden kann man einfach Inhalte einschliessen.
Display:table kann man ebenfalls die Bilder usw. einschliessen, damit es gut
aussieht.
Kapitel 5 Zweispaltiges Layout :
Float & Margin
Mit float und margin kann man ein “zweispaltiges Layout “ erstellen. Zum Beispiel
links die Navigation und rechts irgendwas anderes. Dies macht man mit dem CSS.
Man geht in den Navibereich mit div#navibereich {float: left; width: 110px; padding-
left: 20px; padding-top: 20px; } den Listenelementen werden wie immer das list-style-
type: none; eingesetzt nun wurde die Navigation nach links gesetzt, dafür musste
man auch vorher alle bereits vorhanden Formatierungen des Navibereichs
auslöschen und neu formatieren.
Zu den Hyperlinks im Navibereich muss man eingeben display: block; damit es
blockartig anklickbar ist, dann die Farben oder einen Rahmen bestimmen. Und schon
wird der Navibereich so formatiert. Um dann Farbe in die “Spalte“ zu kriegen, muss
man ein Bild einfügen statt background-color schreibt man background. Dieser geht
dann jedoch bis zu unterst. Um dies zu verhindern, kann man im Fussbereich
background-color: white; machen, und clear:both; dann kommt es weiss also nicht
mehr bis zu unterst. Auch dreispaltige Layouts kann man machen. Dazu macht man
diesen Befehl für die Sidebar:
#sidebar
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam
At vero eos et accusam et justo duo dolores et ea rebum.
Der Block-formating-context gibt es nur einmal auf einer
HTML Seite. Clear-Elemente gelten dabei nur in einem BFC.
Flexibles, zweispaltiges Layout:
Alles soll nun flexibel werden. Als erstes wurde im Wrapper das width auf auto
gestellt damit es automatisch die Angaben des min/ und max-width (diese muss man
auch angeben) nutzt. Es nimmt also die mindest und maximal-Angaben die es
verwenden kann um die Seite anzuzeigen. Dies ist praktisch bei kleineren oder
grösseren Bildschirmen, da die Seite sich anpasst. Weil das flexible HTML nicht
immer ganz das macht, was man will muss man dazu die Seite wider spezieller
formatieren. Zum Beispiel wenn der Text zu breit angezeigt wird oder ähnliches.
Dazu werden alle Bereiche verdoppelt! Alle Bereiche werden verdoppelt und
kriegen einen anderen Namen wie zum Beispiel
Dies wird dann auch in der CSS Datei gemacht. Nun kann man ganz einfach im
normalen Bereich kann man die Ausrichtung also float und width wird dort bestimmt.
Im Innenbereich wird das padding-top/left/right/bottom gemacht. Diese werden beide
getrennt analysiert also man kann nun viel genauer formatieren! Man kann alles
separat voneinander formatieren ohne das es alles verzieht.
Patches:
Da es viele ältere Browser gibt, die das CSS noch nicht alles richtig anzeigt. Um
solche Fehler zu korrigieren gibt es Patches. Zum Beispiel beim IE6 kann man
einfach *html schreiben dann der Befehl. So ein Befehl wird nur vom IE6 gelesen und
auch nur von ihm dargestellt.
Der Internet Explorer braucht beim Patch immer mehr Aufmerksamkeit. Die neueren
werden immer je besser doch sie müssen viel aufholen um zum Beispiel an den
Firefox ranzukommen! Der Internet Explorer braucht beim Laden länger als andere.
Es werden nur Elemente mit hasLayout abgearbeitet sonst zeigt es sie nicht an, um
es schneller zu laden.. Durch die Anweisung height: 1% bekam das div das Merkmal
hasLayout und wird nun auch vom Explorer richtig angezeigt.
Stylesheet / Style-tag für Internet Explorer:
Um ein Stylesheet extra für Internet Explorer einzubinden kann man auch einen
Kommentar verfassen, indem folgendes steht: Will man kein Stylesheet einfügen
kann man auch statt mit einem Link kann man einfach ein einfügen body
background-color: { white;} dann käme alles weiss.
Kapitel 6: ein zentrales Stylesheet:
Im nächsten Kapitel geht es da drum, wenn man viele verschiedene Befehle hat im
Stylesheet, dann kann man auch ein zentrales Stylesheet machen, indem man auf
externe Stylesheets verlinkt. Dazu muss man natürlich zuerst mal ein Stylesheet
aufteilen in mehrere. Dann gibt es ein Stylesheet für den Kopfbereich, den
Navigationsbereich und so weiter. Diese verlinkt man dann alle im zentralen
Stylesheet, dann hat man bessere Übersicht und auch viel mehr Ordnung.Der Befehl um in einer CSS Datei andere
einzubinden muss man schreiben @import
url(Stylesheet.css) ; Nun muss man nur
verschiedene Stylesheets erstellen und die
Befehle aus dem bildschirm.css in die
verschiedene Abteilungen schreiben/ aufteilen.
Wie hier auf dem Bild (fundament.css) , so macht
man wenn man viele Elemente gleich formatieren
will. Der Befehl wird dann für all diese
angewendet.
Die Restaurierung der
Abstände(Fundament.css)
Für die Restaurierung macht man wieder eine
gleiche Liste wie oben. Mit h1-h6 (alle
Überschriften) stellt man den Margin-bottom
ein oder die Blockquote oder ul und ol
Listen. Wie man hier rechts sieht werden
immer alle möglichen Listen und
Definitionslisten, Listenelemente und Zitate
beschrieben und es wird ihnen eine Definition
zum Formatieren gegeben.
Man schreibt immer Kommentare, da diese
der IE auch mitliest. Z.B. /* Aufzählungszeichen */ ul {list-style-type: square; } für Ul
und Ol Listen. Auch für Tabellen und für Formulare ist es sehr praktisch. Vor allem
weil es viel übersichtlicher ist statt alles auf einem CSS Dokument zu speichern.
Die Basisformatierung:
Die Basisformatierung ist die Grundlegende
Formatierung. Bei der Schriftformatierung
werden die Schriftgrössen bestimmt. Man kann
hier auch das Clearing einschreibe oder ein
versteckmich einbauen. Dazu schreibt man
.versteckmich {postition: absolute; left; 23000px;
top: 23000px; Font-size: 0; } Dies wird dann so
weit links angezeigt, dass es nichtmehr sichtbar
ist Man kann auch die .containingfloats
einfügen mit dem Overflow: hidden;Stylesheets komplettieren:
Meistens kann man zum komplettieren des CSS einfach vom alten bildschirm.css
kopieren und einfügen. Man sollte immer in Kommentarzeilen schreiben was nun
folgt, damit man gut die einzelnen Bereiche unterscheiden kann. Am Schluss des
Stylesheets schreibt man /*Ende @media – nicht löschen */
Unbedingt wichtig ist es man sollte in der Druckversion schreiben @media print { }
damit es dann auch die Druckversion anzeigt und nicht irgendwelche anderen
Sachen wenn man nicht drucken will. Dann sollte man mal wieder im Firefox das
HTML und das CSS validieren.
Das Boxmodell für Inliner:
Es gibt folgende Inline Elemente:
Die sub und sup werden
gebraucht um Elemente hoch und
tief zu stellen.
Beim Boxmodell für inline
Elemente kann man seine
Grösse nicht bestimmen. Sie
wird durch die jeweilige
Textgrösse und deren Inhalt
bestimmt. Aber margin-top und
margin-bottom kann man nicht
bestimmen.
Man kann zwar alles bestimmen wie hoch oder breit was kommen soll, aber man
kann viele Mist damit machen! Man sollte dazu immer das p {line-height: 1.7; }
einstellen. Dann wird der Zeilenabstand lesbar, ansonsten ist es unlesbar da es
ineinander gedrückt wird usw.Inline-Block-Boxen sind ein Mittelding:
Inline-Blockboxen können andere Sachen wie Schriften oder Bilder verschieben,
normale Boxen können dies nicht, sie verschmelzen eher ineinander.
Kapitel 7 :
CSS 1 und 2 und 3:
CSS Level 1 CSS Level 2 CSS Level 3
W3C- Empfehlung W3C-Empfehlung Mai Working Draft Aug 2002
Dez.1996 1998
Elemente und Inhalte Elemente positionieren W3C- Empfehlung 12.
gestalten April 2011
CSS 3 ist seit April 2000 da und es ist kein monolithischer Standard sondern besteht
aus zahlreichen Modulen. Selectors, CSS Color, Namespace, Background, Values &
Units usw. werden immer wieder neu gemacht und verändert/ verbessert aber man
kann es schon heute gebrauchen.
Das Progressive Enhancement in Verbindung mit CSS: Viele Leute sagen, CSS3
käme noch nicht in Frage, da noch viele Leute alte Browser haben sollen und so
weiter. Doch das Progressive Enhancement bedeutet, dass Webseiten nicht in jedem
Browser alles gleich aussehen muss und sie müssen sich auch nicht gleich
verhalten. Denn alte Browser zeigen die Seiten, so wie sie können und Moderne
Browser zeigen sie dann halt in voller Pracht. It`s not a Bug it`s a Feature.
Das Progressive Enhancement gab es schon früher, bei den Fernsehern. Es wurden
einige Programme in Farbe gesendet, obwohl es noch viele Leute mit schwarz-weiss
Fernsehern gab.
Wofür kann man CSS 3 schon einsetzen, wo nicht?
Für Mehrspaltige Layouts
Multi-column Layout Module (Candidate Recommendation)
Template Layout Module (Working Draft)
Flexible Box Layout Module (Working Draft)
Grid Modules (Positionierung und Layout)
Floatbasierte Layouts werden immer noch gebraucht werden müssen.Was kann CSS3 alles?
Abgerundete Ecken mit border-radius
Schlagschatten mit box-shadow und text-shadow
Transparenzeffekte mit opacity und RGBA
Lineare Farbverläufe für background.
Die Browser bestimmen was geht! Im Allgemeinen verstehen die Browser das CSS3
recht gut.
Die Browser Präfixe
Browser Präfix Layout-Engine
Safari -webkit- Webkit
Chrome -webkit- Webkit
Firefox -moz- Gecko
Opera -o- Presto
Internet Explorer -ms- Trident
Runde Ecken per CSS3: border-radius:
Runde Ecken für Kopf/Fuss-bereich oder Rahmen oder Titelumrundungen macht
man mit dem border-radius: tag. Die Einheit ist Pixel und je höher man sie stellt desto
runder wird der Rahmen oder die Form. Beispiel: Meine Seite. Man kann sogar jede
einzelne Ecke bestimmen Reihenfolge: links oben, rechts oben, rechts unten, links
unten. Dann mit px einstellen wo man wie viel abgerundet haben will. Unter border-
radius.com kann man sich einen Border konstruieren
Auch Schatten kann man einfach einbinden. Mit dem Befehl box-shadow kann man
um eine Box einen Schatten gehen lassen. Reihenfoge: horizontaler Schatten,
vertikaler Schatten, Unschärfe, Hintergrundfarbe. Dies geht auch im – Bereich, dann
geht der Schatten auf die andere Seite.
Opacity schreibt man in die Zeile oder vor den text: style=“opacity: 0.7; “ dann
wird die Schrift und die Box transparent. RGBA macht nur die Box transparent!
Style=“background: rgba( 192,192,192, 0.7); “ RotGrünBlauAlphakanal
Es gibt extra CSS Selektoren Tester, indem man testen kann was der Browser alles
versteht und was nicht!Dies sind alle Elemente der Inline Navigation. Div Navibereich ist ein Blockelement und wird gestaltet mit text-align: right, padding-bottom und border-bottom. Ul-listen sind auch Blockelemente. Li Elemente sind Inlineelemente und werden mit display:inline gestaltet. A sind auch Inlineelemente und werden mit padding-bottom und border-bottom gestaltet. Li.sie-sind-hier a sind auch Inlineelemente und werden ebenfalls mit padding- und border-bottom gestaltet. Die floatbasierte Navigation: Um eine floatbasierte Navigation zu erstellen muss man im CSS nur das display-inline ausschneiden und nun schreibt man float:left und width:auto; .Doch nun ist ein Abstand also sozusagen das Blockelement der Navigationsleiste weg. Dazu erhöht man nun das padding und alles ist wieder normal. Die floatbasierte Navigation kann viel besser gestaltet werden, da alles Blockelemente sind. Um eine verlängerte Grafik einzufügen fügt man eine längere Grafik ein. Hat diese 90px dann muss man url (bildname.jpg) repeat-x left -60px dann kommt die Grafik bei 60px gibt man nichts ein kommen die oberen 30px usw. dies kann man dann zB beim hovern usw. einsetzen, damit sich mehrere Male die Grafik ändert. Wie zB bei contao.org. Suchfunktion einbinden: Mit einer guten Suchfunktion kann man Leuten viel Zeit ersparen, wenn man eine gutbesuchte Webseite hat mit viel Inhalt. Diese Seite durchsuchen:
Dies ist der HTML Code.
Doch dieses hat noch keine Funktion nun soll es hübscher gestaltet werden.
Nun ändern wir das “suchen“ Symbol in eine Grafik mit folgendem Code dieser wird mit dem
Standartcode ersetzt.
Um nun das Suchfeld zu gestalten schreibt man folgendes:
div#navibereich input#suchfeld {
width: 115px;
font-size: 11px;
border: none;
border-radius: 10px;
padding: 6px 25px 3px 9px;
margin: 0;
}
div#navibereich input.lupe {position: absolute; right: 279px; top:10px; padding: 0;
margin: 0; } (dies ist für die Positionierung der Lupe!)
Dann gäbe es viele Websites die den Suchdienst anbieten, dafür muss die Webseite
aber an einer Domäne angemeldet sein.
Dropdown-Navigation erstellen:
Dies wurde versucht ist jedoch nicht gelungen und es gefällt mir auch nicht, denn es
ist auf meiner Seite unnötig
Kapitel 8 : Fliesstext, Abstände, Zeilenhöhe.
Man sollte den Boxen immer einen Platz, Raum zuteilen. Damit sie wissen wie viel
Text dort reinpasst. Doch fügt man einfach Text ein, dann sieht dies eher sehr
schlecht aus. Man sollte eine gute Schriftart suchen und auch die width: bestimmen.
Dann kommt es so breit wie man angibt zum Beispiel 1350px. Dann kann man auch
den Zeilenabstand regeln, damit alles ein bisschen lockerer wirkt. Auch die normale
Schriftgrösse kann man verändern mit font-size und die Einheiten werden auch in
Pixel angegeben.Über Online Services wie fontsquirrel kann man Schriften generieren lassen oder
über Google Web Fonts kann man ganz einfach viele verschiedene Schriftarten
herausholen. Dann kann man den Link kopieren der angezeigt wird ins HTML
einfügen und dann normal mit font-family einbinden und schon hat man eine neue
Schrift zum gestalten der HTML-CSS Webseite. Das einzige was man braucht für
diese Schriftart ist eine funktionierende Internetverbindung um die Schrift aus dem
Internet zu holen.
Um Zitate hervorzuheben macht man dann kann man im CSS noch
formatieren mit background, padding, border-top, border-bottom oder margin-left.
Mit del und ins als tag kann man Texte gestalten. Im CSS fügt man dazu ein: del
{text-decoration: line-through; backgorund-color: #ccc; } ins{text-decoration: none;
background-color: yellow; }
Kapitel 9: Framework!
Dies ist der Rahmen für die Arbeit. Es ist wie ein Fundament. Es gilt als eine
Sammlung von Werkzeugen, Bibliotheken, Konventionen und bewährten Praktiken,
die regelmässig anfallende Aufgaben in allgemeine, wiederverwendbare Module zu
abstrahieren versucht. Sie gelten als Waschmaschinen für Browserbugs. Für
Frameworks gibt es viele Seiten wie YUI oder 960 Grid System oder das YamL.de
Es gibt extra flexible Layoutsysteme Yet Another Multicolumn Layout( yaml). Diese
passen sich dem Bildschirm an. Dies ist äusserst praktisch bei Tablets iPhones und
so weiter.
Es gibt ein solides Fundament, die Pflege des Quelltextes ist viel einfacher. Aber
man muss sich mit der Struktur einarbeiten, dies kostet sehr viel Zeit. Die Arbeit mit
Frameworks ist ein Kompromiss.
YAML:
Es gibt 5 Grundregeln für YAML. Yaml ist kein Fertiglayout! Man muss den Aufbau
und alles verstehen. Man sollte mindestens die Dokumentation lesen. Es basiert auf
dem TOP-DOWN Prinzip. Yaml stellt alles bereit, der Nutzer optimiert nun das fertige
Layout. Die Grundbausteine des YAMLs sind das base.css das iehacks.css. Diese
sind verantwortlich für die browserübergreifende konkrete Darstellung. Die Trennung
von YAML und Nutzer-CSS. Man kann sich einfach das vorgemachte HTML
herunterladen.
Das Einfache nun ist, alles was man brauch kann man nun einfügen oder was nicht
gebraucht wird gelöscht. Man muss nur all seine eigenen Daten und Texte einfügen
und schon hat man ein stabiles Layout das sich schön anpasst bei allen
Browsergrössen. Man kann einfach seinen Text einfügen, die Farben anpassen oder
Hintergrundgrafiken und so weiter. Es geht viel schneller und sieht optisch auch gut
aus.Unter: http://builder.yaml.de/# kann man ganz einfach alles gestalten. Man kann die Bereiche die man will öffnen dann kann man links von den vorgegebenen Elementen und dann wird auf diese gedrückt und nach rechts hinein gezogen. Dann kann man Lorem Ipsum Patzhaltertext einfügen. Auch Subtemplates kann man beliebig verschachteln. Man kann sich einfach Listen und Titel einfügen und so weiter und alles wird angezeigt wie es später kommt. Einfach super! Man kann beliebig viele Spalten einfügen und auch nach unten normaler Text und dann kommt darunter zum Beispiel 2-3 Spalten und schon hat man in kürzester Zeit ein super Layout. Das Programm kann nur online gebraucht werden. Es ist ein in JavaScript geschriebenes Programm. Hat man die Seite so weit wie man will gestaltet, kann man get Code drücken und schon erhält man den Code indem das HTML so geschrieben wurde, wie man vorher die Seite gestaltet hat. Diesen Code fügt man dann in das Notepad++ und nun haben wir genau die Seite die wir vorhin gestaltet haben. http://de.wix.com/website/templates
Sie können auch lesen
