Tài liệu Einstieg in CSS- P14 docx

der Vorlagen im Falle eines Content-Management-Systems > Validierung mit W3C-Tools Browserkompatibilitat testen Barrierefreiheit testen und optimieren Suchmaschinen und Marketing Please

Trang 1

36.1 Checkliste fiir die Webproduktion

Verwendung von Schriften, Uberschriften, Farben, Hervor-

hebungen, Bildern usw.) Technik und Hosting

>

Auswahl von eines Hosting-Providers Entscheidung fiir statische Seiten oder ein Redaktionssystem (CMS)

Bedarfserhebung ftir spezielle Programmierarbeiten Erstellen einer Dateistruktur und von Namenskonventionen (besonders wichtig bei Teamwork)

Im Falle von CMS: Installation und Setup, Anlegen der Basis- struktur, Installation von Erweiterungen

Anlegen von Error-Seiten und der Dateien robots.txt und htaccess

Programmierung und Validierung

>

Entscheidung Uber zu verwendende DTD Erstellung der XHTML- und CSS-Dateien bzw der Vorlagen im Falle eines Content-Management-Systems

> Validierung mit W3C-Tools Browserkompatibilitat testen Barrierefreiheit testen und optimieren

Suchmaschinen und Marketing

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

Kontrolle der Seitentitel (vorhanden?)

Suchbegriffe in Seitentiteln, Uberschriften, Link-Texten, alt-Attributen (von Bildern), Texten

Eintrag in Suchmaschinen und Verzeichnissen Eintrag auf kostenlosen PR-Plattformen Aussendung an Freunde und Bekannte Einladung zum Gegen-Link an ahnliche Websites Eintrag in CSS-Galerien

Anmeldung zu Design-Wettbewerben

405

Trang 2

36 Niitzliche Checklisten

Zugriffsanalyse und Weiterentwicklung

> Zugriffe regelmakig analysieren

> Besser besuchte Bereiche optimieren oder ausbauen bzw besser auffindbar machen

> Auffindbarkeit der Website in Suchmaschinen kontrollieren

36.2 Checkliste der

»beliebtesten« Fehler in (X)HTML

Fehlende DTD DTD nicht in der ersten Zeile (fiihrt zum Quirks-Mode) Fehlendes html-Tag

Falsch verschachtelte Elemente oder Tags Leere Elemente werden falsch geschlossen

<br /> ware richtig

>» Fehlende Ende-Tags

<p> ohne Ende-Tag ware falsch

>» Fehlendes Ende-div Ein Kommentar bei einem Ende-div hilft bei der Kontrolle

> Listen mit Unterlisten falsch verschachtelt

> Tippfehler bei Element-Namen oder Tags

> Grob- und Kleinschreibung von IDs; Klassen nicht Gbereinstim- mend benannt mit der Schreibweise im Stylesheet

>» Fehlende Anfthrungszeichen bei Werten, ID- und Klassen-

Namen

Falsch verschachtelte Tabellen-Elemente

> Falsch verschachtelte Formular-Elemente

> |ID-Namen mit # notiert, Klassen-Namen mit Punkt notiert

Trang 3

36.3 Checkliste der »beliebtesten« Fehler in CSS

36.3 Checkliste der

»beliebtesten« Fehler in CSS

Platzierung der @import-Regel nicht an erster Stelle

HTML-Kommentar statt CSS-Kommentars

Tippfehler bei den Namen von Selektoren Fehlendes Semikolon nach einer Deklaration Falschlichweise benutzter Doppelpunkt anstelle des Semiko-

lons nach einer Deklaration

> Falschlicherweise Semikolon anstatt eines Doppelpunkts nach einer Eigenschaft in einer Deklaration

> Grok- und Kleinschreibung bei Selektoren-Namen nicht ủber- einstimmend mit der Schreibweise in der HTML- Datei

> Mabeinheit vergessen Geschwungene Klammern nicht geschlossen Platzhalter fiir Selektor ohne leeres Paar geschwungener Klam- mern

Falschlicherweise Werte in Anfiihrungszeichen

Fehlende Raute # vor id-Namen Fehlender Punkt vor Klassennamen

Raute und Punkt miteinander verwechselt Falschlicherweise Raute oder Punkt vor Typ-Selektor Fehlende Selektoren bei einer Gruppierung

Falsch div#test a:link, a:visited {]

Richtig div#test a:link, div#test a:visited {}

Falschlicherweise Komma nach dem letztem Selektor in einer Gruppierung von Selektoren

Falschlicherweise Leerzeichen zwischen Wert und Mafeinheit

Falschlicherweise Leerzeichen zwischen url und (bildpfad) :1ïnk, :visited, :hover, :active - Reihenfolgel

Fehlende Anfihrungszeichen bei Schriftnamen, die aus mehr

als einem Wort bestehen

z-index gilt nur fiir Elemente mit position auber static

> top, right, bottom, left gelten nur fiir Elemente mit position relative oder absolute

> margin-top und margin-bottom wirken nicht bei Inline-Ele-

Trang 4

3 / Meine liebsten Tools

ra

y oat `: .«®

EasyRead Easy EasyLogin | ou | Al

Hinter jedem erfolgreichen Webentwickler

stehen hilfreiche Tools

Sie werden lernen,

> welche Werkzeuge lhre Arbeit erleichtern,

> wo Sie kostenlose Tools finden und

> wer Ihnen bei Fragen und Problemen hilft

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 5

37 Meine liebsten Tools

Am langsten habe ich gebraucht, zu lernen und zu akzeptieren, dass man im Web an allen Ecken kostenlose Werkzeuge und Hilfe von freundlichen Menschen findet Neulinge im Web sind von dieser Tat- sache immer wieder tiberrascht und reagieren unglaubig

Ohne Anspruch auf Vollstandigkeit und ohne Wertung der Reihen- folge sind hier einige der besten Tools angeftihrt, die auch ich bei Bedarf gerne gebrauche Detaillierte Erklärungen wủrden hier zu

An dieser Stelle auch einmal

ein groŠes Dankeschön an all

die genialen Entwickler, die weit ftihren Am besten probieren Sie diese selbst aus!

ihre Tools kostenlos zur Ver- fagung stellen CoffeeCup Free HTML-Editor

Volle Power - kann man da nur sagen Eigentlich mein liebster XHTML+CSS-Editor Er kann sich mit allen umfangreichen Edi- toren messen Zwar englischsprachig, was fiir HTML und CSS allerdings eher unerheblich ist Projektverwaltung, FTP-Client und WYSIWYG-Editor sind inklusive

http://www coffeecup.com/free- editor/

DAF taUe duet Me AU aes Cel AUER 02J()17//21)7 7

——=—

—¬— ọ ™

5 CoffeeCup’ D- - Over 45,280,038 Downloads in 87 Countries ÿ32 620 r2eedle

fresh software warm prople Tel a Pend About Ow Cool Softens

CoffeeCup Free HTML Editor

The Free HTML Editor is a Drag and Drop Editor with Built-In

FTP!

- Cet Sofware 5upport

Click Here to Check Out

CoffeeCup HTML Editor ! Abbildung 37.1 >

CoffeeCup Free HTML-Editor:

Trang 6

gleich den CSS-Code dafiir

Allan Jardins verbliiffendes Tool erweist sich als aukerst niitzlich,

mdchte man auf einen Klick das Layout fremder Websites genauer

untersuchen

http://www sprymedia.co uk/article/Design

41 —~ Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 7

FormLogix

Diese lupenreine Web 2.0-Anwendung wird demnachst auch in einer deutschsprachigen Version zur Verfiigung stehen Eine ele- gante und umfangreiche Applikation zur Erstellung von Formula- ren inklusive Verwaltung der Daten in Datenbanken

http://formlogix.com/

Sophisticated form builder tool

Try FermLogia Form Crestor Now (vet ae you wameg tor?) >> CLL

"This fee form bulkier

Formtog: 6 a onire frm bulkier hot fr cesting web Gytateses ort web frre b 1© “ro & te ony bol

Our fre may be errbedied nh you weber, biog, o may be wed ntrnally fut ett pou Gene the fern Forget af you krow eet Getabaees ard ferme creation « cur Erm buster te wey ou wert’

5 l4 à W9 WNG tel aed Ê tủa +64 30 coÓrg i46 ? "4Ð 4 ð vác %; 9290y 270400 de %y sa, tric G,

Abbildung 37.5 ard Wee Gates such ae Contac! us forme, Pewckeck forms, Qeents ceget ater frre Sea Mere

Gurvers, aire Polk, Orde free, Pritts, OM

FormLogix: Startseite

{CSS}Portal Menu Generator Bietet eine vielfaltige Auswahl an Gestaltungsmdglichkeiten fiir lhre Tab-Navigation

http://www cssportal.com/generators/menu htm

— 412

Trang 8

ColourLovers Colors & Patterns

Die coolsten Farbtrends, die prachtigsten Farbpaletten, Farben

und Patterns sowie Wettbewerbe rund um Farben und Muster

http://www.colourlovers.com/

lated Commed by Drremeant2

Reto 6 Foreve be 2 peace we love 6 re ”

Lated Commed by prevents

Main Naevgation TIS Qenerator wil create atorzorts manu wih a many as 8 ees Crcose for 2? designs Creat tor

_ Ti 00k) „my seas om CSS fone + UF Peet bite Moers pheeee i uemsnber lnvbiny by COt@ortel CSS Properties k¬w Danh inte seat curenty Ti beta wing frou expeterce ary problerss pleats contact me CSS Sotwwe

KS leegamtes te aa hHINL he Le rea our tua nà 0us chet xé

413

Trang 9

PU Ada ee dee on eA Ue

Create New Fawcon Cotet Picker

lergont image rut

D ñ Luted F gecoss

Top Rated f avicons

* Une Armaton © Ot moe

Trang 10

CSS-Frameworks und YAML

n Dabei

> Layouts eit

jst ein (%)

(kurz: AM) _ ann float-Umeebunge

Selber schreiben macht schlau

Sie werden lernen,

>» wie CSS-Frameworks funktionieren,

> welche die bekanntesten CSS-Frameworks sind und

>» welche Vor- und Nachteile CSS-Frameworks haben

Trang 11

38 CSS-Frameworks und YAML

An kaum einem Thema (aufer vielleicht der Frage »to hack or not to hack«) erhitzen sich die Gemuter von Webentwicklern derart heftig wie am Thema CSS-Frameworks Ich habe ein wenig meine Nase in entsprechende Diskussionen gesteckt und fand meine eigene — ambi- valente — Haltung dazu nur bestatigt

CSS-Frame .- Was?

Wenn Sie nach dem zehnten Webprojekt bemerken, dass Sie im Grunde genommen stets die gleichen CSS-Bausteine verwenden

und diese nur anders kombinieren und Details ändern, dann wird

sich der Gedanke aufdrangen, solche Module in eine Art Vorlage

zu packen, die Sie immer wieder beim Anlegen eines Internetauf- tritts als Grundlage nehmen kénnen

Viele Webentwickler verwenden bereits genau solche selbst geschriebenen Vorlagen Das kann von einem kleinen Paket mit CSS-Dateien fiir verschiedene Aufgaben (Typographie, Raumauf- teilung, Farben usw.) bis hin zu recht komplexen Vorgaben reichen

So ahnlich hat die Entwicklung von CSS-Frameworks begonnen

38.1 Was sind CSS-Frameworks?

CSS-Frameworks sind Ublicherweise »Universal-Seitenraster« fir Webseiten bzw Webprojekte, die zumeist aus einer Reihe von modularen CSS- Dateien und entsprechenden HTML-Vorlagen bestehen Ahnlich einem Seitenraster bei der Erstellung von Print- Produkten dienen auch CSS-Frameworks als Grundlage, um aus einem Raster die unterschiedlichsten Seitenlayouts abzuleiten

Dirk Jesse hat zum Thema 38.2 Was ist YAML?

YAML bei Galileo Press ein Praxisbuch veröffentlicht:

»CSS-Layoufs: Praxislösun- Yet Another Multicolumn Layout (YAML) ist das beeindruckende gen mit YAML 3.0« und komplexe CSS-Framework von Dirk Jesse

Trang 12

HI Heading OROPP ARLE CONTENT ELEMENTS fare KEHozer

Herding: Text Elements

Lorem igsue dolor st amet,

‘Censetetur redpecing elty, sed Bar norrety eirmodtenpo

Vaddurt ut labore et dolore magna ¬

whqurem ert, sed dam volupter { Âugtu:, Át vo sóc et vở

At vere eor et coun et jutto band subergree, sẻ cea tai

Gee dolores et en rebum Het cite 2 49795 lun được amet) hed gubergren, po ses teldnwts jutirmod tengor thá4umt vt

Eine ausfiihrliche Dokumentation in Deutsch und Englisch ist Grundlage der Arbeit mit YAML und informiert auch ủber zusä†z- liche Funktionen wie ein »Debugging Stylesheet«, ein Druck- Stylesheet und andere niitzliche Erganzungen

Die Webapplikation YAML-Builder erlaubt es, Layouts »vom Fleck weg« im Browser zu konstruieren Eine Drag-and-Drop- Funktion vereinfacht das Einfiigen von Musterinhalten Die Ober- flache ist vorziiglich und intuitiv gestaltet - das muss ich betonen!

Testen Sie einfach, wie YAML-Builder |hren Plan fiir eine Webseite

realisieren wiirde Sie werden daraus sicher lernen

38.3 Andere CSS-Frameworks

Ich méchte hier nur die bekanntesten CSS-Frameworks hervorhe- ben, um danach auf die Vor- und Nachteile bei der Verwendung eines Frameworks einzugehen AbschlieBend mdchte ich noch meine ganz personliche Empfehlung zu diesem Thema abgeben

4 Abbildung 38.1

YAML-Builder mit Drag-and-Drop- Ober flache

417

Trang 13

38 CSS-Frameworks und YAML

Blueprint CSS Das CSS-Framework Blueprint CSS des Norwegers Olav Friha- gen Bjorkoy basiert auf einem typografischen Gestaltungsraster (Grid) und beinhaltet ein ausgekltigeltes CSS-Reset und ein Druck- Stylesheet

you # wkd CES thendation to built your preysct on to of with vn eatptocte gad senuble Cootrbsdons

typognphy, andeven a stylesheet br printing uy

See o aol ete Wt we BP « Senautntin ited mension he hace treaty tk Sứ <3 (6 2 @ goed ploce to met Blogs: Blertoy com

a Son, SEND SOREN 99" SORES OF HO On HEN Clerc PT `

Blueprint CSS auf Google Code

Der Blueprint Grid CSS Generator erweitert die Designmöglichkei- ten von Blueprint um die Auswahl verschiedener Spaltenkombina- tionen; er ist allerdings recht spartanisch aufgebaut

` (ere) * Website: http://code ,gooyle.con/p/bluepriatcss

Total Page Wises Generated by!

| * Blueprint CSS Grid Generator (2006-02-25) [htt?:// kimat £y.cow/ b 140p šnt<g®n®rwtor / ] evra Page Warm

l on TT Dared om work byt

Trang 14

http://developer.yahoo com/yui/grids/

C2 (4

Detar é Doctype and Render Mode

YUL winks in Da) "Quirks" and “Suntands" browser

nes | prep atom been cued |

IDQCTTPE I%E PVBLIC “-//M3€//UTD MTWG $.01//EW* ase ch ous | bas |

*MtXp:/ 9,2 œo/Tu/Mald/04 £i£t ,đ$đ*> TH Spe (rab ve yal oth ina eee

yuegt | unt and uneven feo-ut spuace ae)

YU CSS Reset nerazrs browse COS ses HEM HT:

cherrents, crewing 4 me me gáSvợn VN OSS Dave hen —

fetul5 a Consatent sive foundton for common HTME elements a sates 6í phi tr ents (Tes tacatats toate end

——rreronr= Prvets (1) = width mers For IE, pleets / 13.490 Use dạy-

YU Forts package rengers af tee at tpn by Getautt To preserve PrOpeNy Miter to tanget IE For example, thes sets 6 10x

(SONS abety 1 DOOM Ter fonts specity otver sizes using #oatom-dec {

Percentages Orly (Dee HO OhwT A I COURT width 44, 022en) /* «

Đase Page Foermat

VE RP 4 (52M lò QUA] ÿ (4Q? Xì 3E 3082447 PKXVI30AE Peon a4xXXXœmb

“bo#r»

«áLv td»*dec*»

.địv tte*h@*+ beste naet hoe /;Av*

địy @*“bé*> boty “/á4iv>

Das Paket beinhaltet neben den eigentlichen CSS- und HTML- Dateien so Nuitzliches wie Rasterblatter im Format PDF zum Aus- drucken sowie Vorlagen ftir Fireworks, OmniGraffle, Photoshop und Visio

http://960.gs/

419

Tiêu đề	Checkliste der beliebtesten Fehler in CSS
Thể loại	Checkliste

Định dạng
Số trang	28
Dung lượng	4,92 MB