Webseitengestaltung mit (X)HTML und CSS

‡„•‡‹–‡‰‡•–ƒŽ–—‰
‹–ȋȌ—†
Grundlagen
AnjaMorsch,
Berlinden03.07.2010
INHALT
Inhalt..............................................................................................................................................2
Einführung....................................................................................................................................10
DerEinsatzvonHTMLundCSSimWebdesign..................................................................................10
InternetundWWW:DerEntwicklerundseineUmgebung..............................................................12
Internet..........................................................................................................................................12
InternetDienste,diefürdenKursvonBelangsind......................................................................12
www..........................................................................................................................................12
ftp..............................................................................................................................................13
EMail.........................................................................................................................................13
DasClientServerPrinzipdeswww...............................................................................................13
DenQuelltexteinerWebsiteanzeigenlassen...........................................................................14
WebsitesinmehrerenBrowserntesten...................................................................................15
ScreenshotdienstefürBrowser,dieSienichtinstallierenkönnen...........................................15
WasSiezumErstellenvonWebsitesbrauchen................................................................................16
Browser.........................................................................................................................................16
EditorzumVerfassenderQuelltexte............................................................................................16
FTPProgramm...............................................................................................................................16
Bildbearbeitung.............................................................................................................................17
AndereProgrammiersprachenundTechniken,dieaufWebsiteszumEinsatzkommen.................17
Clientseitig(d.h.direktimBrowserausgeführt)..........................................................................17
Serverseitig....................................................................................................................................18
EinrichtenderEntwicklungsumgebung.............................................................................................18
„Einkaufsliste“...............................................................................................................................18
ErsteSchrittemitHTML.................................................................................................................20
Textauszeichnung..............................................................................................................................20
BefehlemiteinleitendemundabschließendemTag....................................................................20
Befehle,dienurauseinemTagbestehen.....................................................................................21
HTMLundXHTML..............................................................................................................................21
DasGrundgerüsteinerHTMLDatei..................................................................................................21
DokumententypDeklaration........................................................................................................21
Kopfdaten......................................................................................................................................22
Seiteninhalt...................................................................................................................................22
HTMLQuelltextfürdasGrundgerüsteinerWebsite....................................................................23
NamenskonventionfürDateinamen:................................................................................................24
HTMLAttribute.................................................................................................................................24
2
Schema..........................................................................................................................................24
Lesetipps:.......................................................................................................................................25
Kommentare......................................................................................................................................25
Zeichenkodierungen(Entities)undZeichensatzangabeinHTML.....................................................25
ZeichensatzangabeimheadvonHTMLDateien...........................................................................26
CodierungvonSonderzeichenundHTMLeigenenZeichen.........................................................27
LesetippszuZeichensatz,ZeichenvorratundCodierungeninHTML............................................27
Zeichenvorrat,SonderzeichenundHTMLeigeneZeichen........................................................27
Zeichencodierungen..................................................................................................................27
AngabezurZeichencodierung...................................................................................................27
Zeichenreferenz.........................................................................................................................27
Textformatierungmit(X)HTML......................................................................................................28
TippsZurVorgehensweisebeiderTextstrukturierung.....................................................................28
BlockundInlineElemente................................................................................................................28
HTMLBefehl..............................................................................................................................28
Wirkung.....................................................................................................................................28
Blockelemente...............................................................................................................................29
InlineElemente.............................................................................................................................30
InlineElement...........................................................................................................................30
AusseheninMozillaFirefox.......................................................................................................30
WieHTMLBefehleverschachteltwerdendürfen.........................................................................31
Erlaubt.......................................................................................................................................31
Nichterlaubt..............................................................................................................................31
PhysischeTextformatierung..............................................................................................................32
LogischeTextformatierung................................................................................................................32
FehlersuchemitHTMLValidatoren..................................................................................................33
Lesetipps............................................................................................................................................33
Einführungindie„Designsprache“CSS..........................................................................................34
CascadingStyleSheets......................................................................................................................34
Stil..................................................................................................................................................34
VererbungvonStilregeln...............................................................................................................35
Folien.............................................................................................................................................37
StylesheetsundihreUmsetzungimWebBrowser.......................................................................38
CSSindenKopfeinerHTMLDateieinbinden...................................................................................38
DerAufbauvonCSSRegeln.........................................................................................................39
DieIntegrationvonCSSFormateninHTML..................................................................................39
CSSzentralundfüreineHTMLDateidefinieren(embedded)......................................................40
ScreenshotderBeispieldatei.........................................................................................................41
3
Lesetipps............................................................................................................................................41
BeispielfürdenEinsatzvonCSS....................................................................................................41
UmsetzungvonStylesheetsimBrowser.......................................................................................42
ScreenshotdienstezumTestenvonWebsites..............................................................................42
StatistikenüberdieMarktanteileverschiedenerBrowser...........................................................42
MaßeinheiteninCSS.....................................................................................................................42
EinbindungvonCSSinHTML.........................................................................................................42
ExkursFarbeninHTML/CSS...........................................................................................................43
AdditiveFarbmischungamBildschirm..............................................................................................43
SubtraktiveFarbmischungimPrint...................................................................................................44
Webfarben.........................................................................................................................................44
DieNotationvonFarbeninHTMLundCSS.......................................................................................45
FarbangabeninHTML...................................................................................................................45
FarbangabeninCSS.......................................................................................................................46
Lesetipps............................................................................................................................................46
SchriftformatierungmitCSS..........................................................................................................48
WasistSchriftformatierung?............................................................................................................48
Schriftart:WarummehrereSchriftenangeben?..............................................................................49
Schriftgrösse:WelcheEinheitengebräuchlichsind..........................................................................50
Pixel(relativeEinheit)...................................................................................................................50
Punkt(absoluteEinheit)................................................................................................................51
EM.................................................................................................................................................51
Prozent..........................................................................................................................................53
WelcheSchriftgrößefürwebgerechteTexte?..............................................................................54
Lesetipps............................................................................................................................................55
KlassenundIDselektorinCSS......................................................................................................56
Klassenselektor..................................................................................................................................56
IDSelektor.........................................................................................................................................59
EigenschaftsloseHTMLTagszurGestaltungvoneinzelnenWörtern,ZeichenoderSeitenbereichen
...........................................................................................................................................................61
Lesetipps............................................................................................................................................63
BilderinWebsiteseinbinden.........................................................................................................64
GrafikformatefürWebsites..............................................................................................................64
4
GIF.................................................................................................................................................64
Einsatzbereich...........................................................................................................................65
JPG.................................................................................................................................................65
Einsatzbereich...........................................................................................................................65
PNG................................................................................................................................................65
PNG8(8Bit)..............................................................................................................................65
PNG24(24Bit)..........................................................................................................................66
Einsatzbereich...........................................................................................................................66
BilderaufHTMLSeitenimGegensatzzuBilderninMSWordDateien............................................67
TippszurProjektstrukturundPfadeinHTML...................................................................................68
AufbauvonPfadeninHTML..........................................................................................................69
RelativePfade............................................................................................................................69
ReferenzierenüberdieURI.......................................................................................................72
DasIMGTagzumeinbindenvonGrafikeninWebsites....................................................................72
PfadangabemitdemAttributsrc..................................................................................................72
AlternativtextmittelsAltAttributangeben..................................................................................72
RahmenmitdemBorderAttribut.................................................................................................73
BreiteundHöhemitwidthundheight.........................................................................................73
Lesetipps............................................................................................................................................74
BildermitCSSimTextausrichten..................................................................................................75
Ausgangssituation.............................................................................................................................75
BildervomTextumfliessenlassenMITHILFEderfloatEigenschaft.................................................79
DenTextumflussmitderclearEigenschaftabschalten....................................................................81
RahmenundAbständeinCSS........................................................................................................88
Rahmen.............................................................................................................................................88
AussenabstandundInnenabstand....................................................................................................91
UmlaufenderInnenabstand..........................................................................................................92
EinseitigeInnenabstände..............................................................................................................92
KurzschreibweisenfürInnenabstände..........................................................................................92
Innenabstandmit4Werten......................................................................................................93
Innenabstandmit3Werten......................................................................................................93
Innenabstandmit2Werten......................................................................................................93
Beispiel..........................................................................................................................................94
Lesetipps............................................................................................................................................96
Verweise(Links)erzeugenmitHTML.............................................................................................97
AllgemeineszuLinks..........................................................................................................................97
5
VerschiedeneFunktionenvonVerweisen(Links).............................................................................97
Vorbereitungen.............................................................................................................................97
VerlinkenvonSeitendeseigenenProjekts(projektinterneVerweise)........................................98
VerlinkenaufeineandereInternetadresse(projektexternerVerweis)........................................99
EineDateizumDownloadanbieten............................................................................................100
EMailLink...................................................................................................................................101
Beispiel........................................................................................................................................102
Bildlinks...........................................................................................................................................102
SprungmarkenzumStrukturierenlangerSeiten.............................................................................104
Lesetipps..........................................................................................................................................107
Linkfunktionen.............................................................................................................................107
Bildlinks.......................................................................................................................................108
Sprungmarken.............................................................................................................................108
LinkzuständegestaltenmitCSSPseudoklassen...........................................................................109
Linkzustände....................................................................................................................................109
DenBrowserCacheleereninMozillaFirefoxundInternetExplorer.........................................110
BrowserCacheleereninMozillaFirefox3.6.8........................................................................110
BrowserCacheleereninInternetExplorer7..........................................................................111
CSSPseudoklassenaufdieLinkzuständeanwenden......................................................................111
Pseudoklasse...........................................................................................................................111
Pseudoelement........................................................................................................................111
Syntax(Schema)vonPseudoklassenundPseudoelementselektor.......................................111
PseudoklassenfürdieLinkzustände........................................................................................111
Lesetipp...........................................................................................................................................113
Tabellen......................................................................................................................................114
DerEinsatzvonTabellenimmodernenWebdesign.......................................................................114
TabellenmitHTMLdefinieren.........................................................................................................116
DerTabellenassistentdesEditorsPhase5.......................................................................................117
ZellenverbindenmitHTML.............................................................................................................121
Kopf,KörperundFusseinerTabelledefinieren(zusatzwissen).....................................................122
Lesetipps..........................................................................................................................................123
TabellenmitCSSStyleSheetsgestalten.......................................................................................125
DasVerhaltenvonTabellenohneGestaltungsanweisungen..........................................................125
HöheundBreitevonTabellenundTabellenzellenmitCSSdefinieren...........................................126
6
DieAusrichtungderZellinhalteändern..........................................................................................128
AbstandvomRahmenzumText.....................................................................................................131
ExkursKombinationvonSelektoren...........................................................................................131
Tabellenzelleneinfärben.................................................................................................................132
DieFusszeilekursivsetzen..............................................................................................................133
DasRahmenmodellvonTabellen....................................................................................................134
Lesetipps..........................................................................................................................................136
FormularemitHTMLerzeugen....................................................................................................137
DerEinsatzvonFormulareninHTML..............................................................................................137
SchnittstellenzuserverseitigenProgrammiersprachen.................................................................139
FormularfeldermitHTMLerzeugen................................................................................................141
Formularbereichdefinieren........................................................................................................141
EinzeiligeEingabefelder..............................................................................................................142
EinmehrzeiligesTextfelddefinieren...........................................................................................143
AbsendeundAbbrechenButtons..............................................................................................144
DieBedeutungdesnameAttributsfürdieEingabefelder..............................................................146
AngabenfürdenFormularversand.................................................................................................147
FormularversandpermailtoAnweisung(nichtzuempfehlen)..................................................147
FormularversandaneinenServer...............................................................................................148
DenVersandüberdendwformmailerrealisieren.........................................................................148
BesonderheitenbeiderGestaltungvonFormularfeldernmitStyleSheets...................................152
Lesetipps..........................................................................................................................................153
HintergrundfarbenundHintergrundbildermitCSS......................................................................155
AnwendungvonHintertrundbildernundBeispielefürinrenEinsatz.............................................155
ScheinbareHalbtransparenz.......................................................................................................155
Verlauf.........................................................................................................................................156
ReiternavigationmitrundenEckenundSchatten......................................................................158
Hintergrundfarbenund–bilderanwenden....................................................................................161
Hintergrundfarbe........................................................................................................................161
Hintergrundbild...........................................................................................................................161
HintergrundWiederholung.........................................................................................................161
PositionierungdesHintergrundbildes.........................................................................................161
Numerisch...............................................................................................................................162
Konstanten..............................................................................................................................162
WasserzeichenoderHintergrund–Anhang...............................................................................163
7
ZusammenfassendeHintergrundeigenschaft.............................................................................163
WorkshopHintergrundbilder..........................................................................................................163
Lesetipp...........................................................................................................................................171
WieCSSnochinHTMLintegriertwerdenkönnen........................................................................172
EmbeddedStyleSheet....................................................................................................................172
ExternerStyleSheet........................................................................................................................173
InlineStyleSheet.............................................................................................................................177
Lesetipp...........................................................................................................................................178
CSSLayout:PositionierenvonHTMLElementenmitCSS.............................................................179
VorundNachteilevonCSSLayout.................................................................................................179
Vorteile........................................................................................................................................179
Nachteile.....................................................................................................................................181
VorgehensweisebeimLayouten.....................................................................................................181
SeitentypengemäßihrerinhaltlichenBedeutungfestlegen......................................................181
Seitenbereichedefinieren...........................................................................................................181
ÜblicheLayoutbreiten.................................................................................................................182
DasCSSBoxmodell..........................................................................................................................182
WorkshopDivElementepositionierenmitCSS..............................................................................183
InnenundAußenabstandfüralledivElementefestlegen.........................................................184
ArtderPositionierungundStartposition....................................................................................184
ArtderPositionierung.............................................................................................................184
Startposition............................................................................................................................185
VerhaltenverschachtelterdivElementebeiunterschiedlicherPositionierung.........................187
EineinfachesLayoutumsetzen...................................................................................................189
Der„BoxModelBug“desInternetexplorer...............................................................................191
UmgangmitüberlangenInhalten...............................................................................................192
WeiterenützlicheCSSBefehlezurAnzeigeundPositionierungvonElementen.......................194
Umfluss....................................................................................................................................194
StapelungabsolutpositionierterElemente.............................................................................194
ArtderAnzeige........................................................................................................................195
DasLayouthorizontalzentrieren................................................................................................196
Lesetipps..........................................................................................................................................196
CSSNavigationsleistemitListe....................................................................................................197
WarumListennavigation?...............................................................................................................197
Workshop„ungeordneteListemitLinksinHTMLerstellen“..........................................................199
8
EineunsortierteListeerstellen...................................................................................................199
Exkurs:DieListeverschachteln...................................................................................................200
LinksfürdieNavigationerzeugen...............................................................................................201
ListengestaltenmitCSS..................................................................................................................203
DasListenzeichenbestimmen.....................................................................................................203
EinBildalsListenzeichendefinieren...........................................................................................204
Workshop„DieNavigationsleistemitCSSgestalten“.....................................................................204
AnpassungenderHTMLDatei.....................................................................................................204
AbständeundListenpunkteabschalten......................................................................................205
DieLinkzuständegestalten..........................................................................................................206
DieLinkszuBlöckenerklären......................................................................................................207
DieTextabständederLinksgestalten.........................................................................................209
DenEintragderaktuellenSeitebesondershervorheben...........................................................209
AnpassungenfürInternetExplorer5.5.......................................................................................210
Lesetipps..........................................................................................................................................211
HochladenvonInternetseitenaufeinenServer...........................................................................213
AuswahleinesWebProviders.........................................................................................................213
Providerleistungen......................................................................................................................213
ProjektmiteinemFTPProgrammaufdenSErverladen................................................................214
WahleinesDomainnamens.........................................................................................................214
UserLoginundPasswort..............................................................................................................215
FTPProgramm.............................................................................................................................215
Lesetipps..........................................................................................................................................216
TippszurWahldesWebProviders.............................................................................................216
PerfectFtp,einfreiesFTPProgrammfürdenPC.......................................................................216
Abbildungsverzeichnis.................................................................................................................217
9