LeseprobeGestalten Sie Ihre Webseiten professionell! Erfahren Sie in Kapitel 12, wie Sie Stylesheets einsetzen und CSS-Stile in Dreamweaver gekonnt nutzen. Außerdem zeigt Ihnen Hussein Morsy in Kapitel 13, wie Sie richtig mit Bildern arbeiten: Bildformat, Größe, Ausschnitt, Schärfe. Zusätzlich finden Sie das vollständige Inhalts- und Stichwortverzeichnis.

Hussein Morsy

Adobe Dreamweaver CC 394 Seiten, 2013, 29,90 € ISBN 978-3-8362-2452-9

www.galileodesign.de/3387

»Arbeiten mit CSS« »Bilder einfügen«

Inhaltsverzeichnis

Index

Der Autor

Know-how für Kreative.

E WieerstelleichCSS?

E WiegeheichmitCSS-Stilenum?

E WieverschiebeichCSS-Stile?

E WelchefortgeschrittenenTechnikengibtes?

Kapitel12

Arbeiten mit CSS SogestaltenSieSeitenmitCascadingStylesheets

12 Arbeiten mit CSS

194

InKapitel9,»DasDesignderWebsitemitCSS«,habenSiebereitsintensivmitCSSgearbeitet,umdasDesignfürdieBeispielwebsitezuerstellen.IndiesemKapitelwerdenwirnochtieferindieWeltvonCSSeindringen.

12.1 Was sind Cascading Stylesheets?

ZurFormatierungvonSeitenelementenwurdefrüherHTMLein-gesetzt.HeutebenutztmandafürCSS (CascadingStylesheets).Mit dieser Sprache können Sie sogenannte CSS-Stile oder CSS-Regeln anlegen, die die Formatierung einzelner Elemente oderauchTagsübernehmen.

SiekönnenCSSentwedernurfürdieFormatierungderSchriftoderauchfürdasgesamteLayouteinerWebsiteeinsetzen.Vie-lesistdamitmöglich.

CSS Zen Garden

SchonseitüberzehnJah-renkannmandiehoheKunstdesCSS-DesignsaufderWebsitehttp://www.csszengarden.comvonDaveSheabewun-dern(sieheAbbildung12.1).DerAutorzeigtdort,wiemannurdurchAustauschderStylesheetsdasDesignvölligverän-dernkann.DieHTML-Datei,dienurdieStruk-tur(wieÜberschriftenundAbsätze)unddenInhaltderSeitenenthält,bleibtdabeiunverändert.

Abbildung 12.1 EAlledreiWebseitenvonwww.csszengarden.comver-wendendiegleicheHTML-Datei(oberesBild)undunter-scheidensichnurdurchdenEinsatzunterschiedlicherCSS-Dateien.HierkönnenSiesehen,wasallesmitCSSmöglichist.

12 Arbeiten mit CSS

Was sind Cascading Stylesheets? 12.1

195

MitdenCSS-TechnikenausdiesemKapitelkönnenSieIhreInhaltenichtnuroptischstrukturieren,sondernauchansprechendgestal-ten.CSSgibt Ihnendafür vieleMöglichkeiten andieHand,dieschon fastdenen in richtigenTextverarbeitungenundDesktop-Publishing-Programmenentsprechen.ProbierenSieüberdiebe-schriebenenWegeallesaus,wasIhnenDreamweaveranbietet.

Vorteile von CSS

BeiCSS-WebsitesistdieVerwendungvonTabellenzumErstellendesLayoutsabsoluttabu.DasLayoutwirdalleindurchdieCSS-Dateidefiniert.DashatfolgendeVorteile:

E ErfüllungderaktuellenWebstandardszu100%(siehehttp://w3c.org)

E RedesignalleindurchAustauschderCSS-Dateimöglich E HTML-Dateierheblichkleiner,dadurchschnellererSeitenaufbau E DruckversionkanneinganzanderesAussehenhaben E SuchmaschinenkönnendieInhaltederWebseitebessererfassen E Siteistbarrierefrei(undz.B.fürVorlesesystemegeeignet)

Externe und interne CSS

Stile können sowohl innerhalb (intern) einerWebseitedefiniertwerdenalsauchaußerhalb(extern)ineinerextradafürangeleg-tenStylesheet-Datei.InterneStile sindnurinnerhalbderWebseitegültig,indersieangelegtwurden.IhrEinsatzistzumBeispielsinn-voll,wenneineÜberschriftnuraufeinerWebseiteblaudargestelltwerdensoll.ExterneStile ,diefürmehrereWebseitengeltensol-len,werdenineinerseparatenStylesheet-Dateidefiniert.

Literaturhinweise

DaCSSeinkomplexesThemaist,solltenSieweiterführendeLiteraturzuRateziehen.FolgendeweiterführendeBücherzumThemaCSSkannichIhnenempfehlen:

E »EinstieginCSS«vonPeterMüller,GalileoComputing

E »ModernesWebdesignmitCSS«vonHeikoStiegert,GalileoDesign

E »CSS–DasumfassendeHandbuch«vonKaiLaborenz,GalileoCom-puting

E »FortgeschritteneCSS-Techniken«vonIngoChaoundCorinaRudel,GalileoCompu-ting

F Abbildung 12.2DerinterneStilfür<h1>giltnurfürÜberschriftenaufderWebseite,indieereingebun-denwird.

12 Arbeiten mit CSS

196

DieErstellungvoninternenStilenistinDreamweaverCCsehrein-fach.WiealleanderenEinstellungenfürHTML-ElementekönnenauchsieüberdasEigenschaften-Bedienfeldvorgenommenwer-den(sieheSeite201).

Externe Stylesheets werden in einer separaten Datei formu-liertundaufdemWebserverabgelegt.DerVorteildaranist,dasssieganzeinfachinmehrerenWebseiteneingesetztwerdenkön-nen.GleichzeitigwirkensichÄnderungeninderCSS-Dateiauto-matisch auf alle betroffenen Webseiten aus. Angenommen, SiemöchtendieFarbeallerÜberschriftenIhrerWebsitevonGrüninGrauändern, somüssenSienurdenCSS-Stil inderStylesheet-Dateianpassen.

CSS in Vorlagen einsetzen

InterneStilebeziehensichnormalerweiseimmernuraufeinDoku-ment.WennSiesiejedochineineVorlageintegrieren,werdensieaufalleWebseitenübertragen,dieaufderVorlagebasieren.

Interne und externe CSS kombinieren

Esistauchmöglich,inter-neundexterneStyle-sheetszusammenzuver-wenden.WenneinStilsowohliminternenalsauchimexternenStyle-sheetdefiniertwird,hatimmerderinterneStilVorrang.WennzumBei-spieldas<h1>-TaginderexternenStylesheet-Dateialsgrauundinternalsblaudefiniertwird,sowirddieÜberschriftinblauerSchriftangezeigt.

Abbildung 12.3 EObensehenSiedenLinkzueinerseparatenCSS-Datei,inderdieStilefürdasHTML-Dokumentexterngespeichertwerden.

Methoden zur CSS-Erstellung 12.2

197

12.2 Methoden zur CSS-Erstellung

InDreamweaver gibt es verschiedeneMöglichkeiten zur Erstel-lungvonCascadingStylesheets:1.In den Seiteneigenschaften: Über das Menü Modifizieren N

Seiteneigenschaften können Sie komfortabel Hintergrund-farbe, Standardschriftart und Hyperlink-Stile einstellen. BeidieserMethodewerdendieStilenurinternangelegt.

2.Im Eigenschaften-Bedienfeld: Über das Fenster Eigenschaf-ten können Sie neue Stile sehr einfach durch die DefinitionvonSchriftfarbenundSchriftgrößenerstellen.AuchbeidieserMethodewerdendieStilenurinternangelegt.

3.ImBedienfeld CSS-Designer:ImFensterCSSDesignerkönnenSiesowohlinternealsauchexterneStileanzeigenundverwal-ten. Diese Methode ist die komplexeste Methode, um CSS-RegelninDreamweaverzuerstellenundzubearbeiten.

4.Im Bedienfeld CSS-Übergänge: Im CSS-Übergänge-Bedien-feldkönnenEffekteundAnimationenimneuenCSS3-Standarderstelltwerden.

Ameinfachstenistes,CSS-RegelnzunächstnurüberdasEigen-schaften-BedienfeldunddieSeiteneigenschaftenzuerstellen,dahierfürHTML-oderCSS-Kenntnissenicht erforderlich sind.DieStilewerdenmitdieserMethodejedochnurinternabgespeichert.DieMethodeeignetsichdahernur,umschnellfüreineeinfacheWebsitedieStilefestzulegen.WennSiemitderZeitetwasmehrErfahrungmitCSSgesammelthaben,könnenSiedieStileüberdasBedienfeldCSS-Designerverwalten.

CSS-Regeln über Seiteneigenschaften einstellen

Die wichtigsten Stile werden in Dreamweaver über die Seiten-eigenschaften(MenüModifizierenNSeiteneigenschaften)defi-niert.FolgendeEigenschaftenkönnenSiedorteinstellen:

E Schriftart,SchriftfarbeundSchriftgröße E HintergrundfarbeundHintergrundbildsowieEinstellungendes

Seitenrands E Hyperlink-StileundRollover-Effekte

12 Arbeiten mit CSS

198

Wenn Sie die Seiteneigenschaften in einer Vorlage (Template)konfigurieren, werden alle daraus erstellten Seiten automatischdamit formatiert.WennSiedieSeiteneigenschafteneinerWeb-seiteeinrichten,geltendieEinstellungennurfürdieseSeite.

Schritt für Schritt Seiteneigenschaften festlegen

1 Neue Seite erstellenErstellenSiefürdieÜbungenindiesemKapiteleineneueHTML-Datei,indemSieDateiNNeuwählenundanschließenddieKate-gorie Leere Seite, den Seitentyp HTML und unter Layout denEintrag Kein. Speichern Sie die Datei zum Beispiel unter demDateinamen»css_uebung.html«ab.

2 Text eingebenUmdieAuswirkungenderStilezusehen,mussIhreSeiteerstein-mal Text enthalten. Erstellen Sie eineÜberschriftmitdemFor-matÜberschrift2,undfügenSiedaruntereinenkurzenAbsatzein.DawirgleichauchnocheinenStilfürDatumsangabenanle-gen,benötigenwirnocheinesolcheDatumsangabe.ErstellenSieaußerdemeinen leerenHyperlink (sieheKapitel15,»Hyperlinkseinsetzen«).

Abbildung 12.4 E

EineleereHTML-Seiteerzeugen

Blindtextgenerator

GrafikerundWebdesig-nersetzengernesoge-nanntenBlindtextein,wenndieendgültigenTextenochnichtvorlie-gen.SomitkönnensiebereitsbeimLayoutenmiteinemBeispieltextarbeiten.AufderWebsitehttp://www.blindtext-generator.dekönnenSieBlindtextesehrkomfor-tabelgenerierenlassen.

Abbildung 12.5 E

Datei»css_uebung.html«

Methoden zur CSS-Erstellung 12.2

199

3 Menü »Seiteneigenschaften« öffnenWählen Sie Menü N Modifizieren N Seiteneigenschaften, oderklickenSieimEigenschaften-BedienfeldaufdieSchaltflächeSei-teneigenschaften.

4 Kategorie »Erscheinungsbild (CSS)«EsöffnetsicheinEinstellungsfenster,dasinmehrereKategorienunterteilt ist. IndererstenKategorie,Erscheinungsbild (CSS), legenSiedieEigenschaftenderSchriftfest.AuchderSeitenrandlässtsichhiereinstellen.

Die Kategorie Erscheinungsbild (HTML ) sollten Sie möglichstnicht verwenden, da hiermit die FormatierungseigenschaftenohneCSSdefiniertwerden.

5 Kategorie »Hyperlinks (CSS)« InderKategorieHyperlinks(CSS) bestimmenSiedieDarstellungderHyperlinks.Fallsgewünscht,könnenSiehierabweichendvonderStandardschriftaucheineandereSchriftartundSchriftgrößeeinstellen.

H Abbildung 12.6KlickenSieaufSeiteneigen-schaften.

F Abbildung 12.7HierlegenSiedieSchrift-eigenschaftenfest.

12 Arbeiten mit CSS

200

BeidenFarbeinstellungenistzubeachten,dasseinHyperlinkins-gesamtvierZuständeaufweisenkann.FürjedenZustandkönnenSieeineeigeneFarbedefinieren1:

E FarbefürHyperlinkbestimmtdieFarbefürLinks,dienochnichtbesuchtwordensind.

E BesuchteHyperlinkslegtdieFarbefürHyperlinksfest,diederBesucherzuvorschoneinmalangeklickthat.

E Rollover-HyperlinksdefiniertdieFarbe,dieangezeigtwird,wennsichderMauszeigerüberdemLinkbefindet.

E Aktive Hyperlinks legt die Farbe fest, die in dem Momentangezeigtwird,wennderBesuchermitderMaustasteaufdenHyperlinkklickt.

In der Liste Unterstreichungsstil2 können Sie festlegen, obüberhauptund,wennja,inwelchenFällendieHyperlinksunter-strichenwerdensollen.

6 Kategorie »Überschriften (CSS) «Neben der Schriftart können Sie für jedes ÜberschriftenformateineindividuelleGrößeundFarbedefinieren.

Abbildung 12.8 E

SollenLinksunterstrichenwerden?

Abbildung 12.9 E

EigenschaftenfürÜber-schriften

a

b

Methoden zur CSS-Erstellung 12.2

201

7 Änderungen überprüfenDieweiterenKategorienbeziehensichnichtaufdieCSS-Stile.Kli-ckenSieaufOK,umdievorgenommenenEinstellungenwirksamzumachen.

CSS-Regeln über Eigenschaften-Bedienfeld einstellen

Über die Seiteneigenschaften haben wir gelernt, wie wir Ein-stellungenvornehmen,diediegesamteSeitebetreffen.Was istjedoch, wenn wir einzelne Textstellen individuell formatierenmöchten?InunseremBeispieltextmöchtenwirz.B.dieDatums-angabeninRotundfettformatieren.

Inline-Stile | Eine einfache Möglichkeit, einzelne Textbereichezu formatieren, sind Inline-Stile. Das Eigenschaften-BedienfeldbesitztzweiModi.

E ImHTML-ModusnehmenSieEinstellungenvor,diedenHTML-Codebetreffen.DazugehörtetwadieEinstellungderFormate(wiez.B.Überschrift1oderAbsatz).

E ImCSS-ModusbestimmenSiediewichtigstenStileigenschaf-ten,wiez.B.Schriftart,SchriftgrößeundSchriftfarbe.

F Abbildung 12.10DieÄnderungensindjetztwirksam.

H Abbildung 12.11HTML-ModusdesEigen-schaften-Bedienfelds

H Abbildung 12.12CSS-ModusdesEigen-schaften-Bedienfelds

12 Arbeiten mit CSS

202

Diese Angaben beziehen sich immer auf die im Feld Zielregel 2angegebenenElemente.InunseremBeispielbeziehensichdieStileigenschaften auf body. Im letzten Abschnitt wurde durchEinstellender Seiteneigenschaftenu.a. dieseRegel automatischangelegt.

MitdemEigenschaften-BedienfeldkönnenSieeinenTextbe-reich markieren und ihm anschließend Schriftart, Schriftgröße,Schriftfarbe und andere Attribute zuweisen. Daraufhin erstelltDreamweavereinenneuenInline-CSS-Stil.BeieinemInline-CSS-StilwerdendieCSS-Eigenschaften,wiez.B.dieSchriftgröße,nurfürdenmarkiertenBereichfestgelegt.

Schritt für Schritt Inline-Stil im Eigenschaften-Bedienfeld erstellen

1 Datei öffnenÖffnen Sie die Datei »css_uebung.html« aus der vorherigenSchritt-für-Schritt-Anleitung,odererstellenSieeineneueHTML-Datei,indemSieDateiNNeuwählenundanschließenddieKate-gorieLeereSeite,denSeitentypHTMLundunterLayoutdenEin-tragKeinwählen.

2 Textstelle markierenMarkierenSieeineTextstelle,dieSieformatierenmöchten.Imfol-gendenBeispielsolldasDatumimFließtextumgestaltetwerden.

3 Schriftart, Schriftfarbe usw. einstellenImEigenschaften-BedienfeldkönnenSieimModusCSS1u.a.die Schriftart 3, Grösse 4, Farbe 5 und Schriftstärke 6(Bold)einstellen.AchtenSiedarauf,dassunterZielregelNInline-Stil2ausgewähltist.

Abbildung 12.13 E

EineleereHTML-Seiteerzeugen

Methoden zur CSS-Erstellung 12.2

203

4 Programmierung überprüfenAuchwennDreamweaverIhnendieArbeitabnimmt,denHTML-undCSS-Codemanuelleinzugeben,istesratsam,abundzuimCode nachzusehen, was Dreamweaver für uns »programmiert«hat.WennSieindieTeilen-oderCode-Ansichtwechseln,könnenSiesehen,welcheWirkung IhreEinstellung imHTML-Codehat.Beieinem Inline-CSS-StilwirddermarkierteBereichmiteinemspan-Tagumgeben,unddieCSS-EigenschaftenwerdenimStyle-Attributzumspan-Taggespeichert.InunseremBeispielwirddieFarbe(color)eingestelltunddieSchriftaufFett(bold)gesetzt.

5 Inline-Stil entfernenUmeinenInline-Stilzuentfernen,löschenSieeinfachdievorge-nommenenEinstellungenimEigenschaften-Bedienfeld.Inunse-remBeispielbrauchenSiedazunurdenFarbwert»#f0000«und»bold«zulöschen.

F Abbildung 12.14DasDatumsollgestaltetwerden.

F Abbildung 12.15Code-Ansicht

b c d e f

a

12 Arbeiten mit CSS

204

DasErstelleneinesInline-StilswieobenbeschriebenhatzwardenVorteil, dass man sehr einfach Texteigenschaften ändern kann.Wenn man jedoch die gleichen Eigenschaften auch auf andereTextstellenanwendenwill,mussman für jedeTextstelleerneutdie Eigenschaften zuweisen. In den nachfolgenden AbschnittenwerdenSie lernen,wiemitCSS-KlassendieArbeitmitCSSver-einfachtwird.

CSS-Klassen zuweisen | MitCSS-KlassenkönnenmehrereText-stelleneinheitlich formatiertwerden. ImCSS-Designer-Bedien-feld(siehenächstenAbschnitt)erstelltmandazueineCSS-Klasse(z.B.mitdemNamen.datum).DerPunktamAnfangdesNamenssignalisiert,dasses sichumeineCSS-Klassehandelt. ImDoku-mentenfensterwirddanndieTextstellemarkiertundunterZiel-regel im Eigenschaften-Bedienfeld die Zielregel.datum ausge-wählt.SiekönnendieCSS-KlasseauchbeiweiterenTextstellenübernehmen.

12.3 CSS-Regeln mit dem CSS-Designer verwalten

DasmächtigsteWerkzeugzumErstellenundVerwaltenvonCSS-StilenistdasBedienfeldCSS-Designer.

FürdieErstellungvonStylesheetsaufdieseWeisesindgrund-legendeHTML-Kenntnissehilfreich.WerfenSiedazueinenBlickinKapitel2,»DieSprachendesWeb«.InKapitel9,»DasDesign

Abbildung 12.16 E

CSS-Klasse.datumimFensterEigenschaftenzuweisen

CSS-Regeln mit dem CSS-Designer verwalten 12.3

205

derWebsitemitCSS«,wirdgezeigt,wieSieSchrittfürSchrittdasCSS-Designer-Bedienfeldeinsetzenkönnen.

Die vier Bereiche des Bedienfelds »CSS-Designer«

Das CSS-Designer-Bedienfeld besteht aus den vier BereichenQuellen, @Medien, Selektoren und Eigenschaften. Für dieErstellungeinerneuenCSS-Regelmüssen in jedemBereichEin-stellungenvorgenommenwerden.

BeimAnlegeneinerCSS-RegelentscheidetmansichzunächstunterQuelle,inwelcherCSS-DateidieRegelgespeichertwerdensoll.Anschließendlegtmanunter@Medienfest,fürwelcheAus-gabegerätedieRegelgeltensoll.UnterSelektorenwirdbestimmt,aufwelcheElementederSeitesichdieCSS-Regelbeziehensoll.UndzuletztstellenSieunterEigenschaftendieFormatierungwieSchriftgröße,Farbeetc.ein.

Quelle

Wo wird die CSS-Regelgespeichert?

@Medien

Für welches Ausgabemediumgilt die CSS-Regel?

Selektoren

Auf welche Elemente beziehtsich die CSS-Regel?

Eigenschaften

Wie soll das Elementaussehen?

F Abbildung 12.17DasCSS-BedienfeldbestehtausvierTeilen.

12 Arbeiten mit CSS

206

DieeinzelnenBereichesehenwirunsimFolgendengenaueran.

Bereich Quelle | HierwerdenalleCSS-Dateiengelistet,diemitderaktuellenWebseiteverknüpftsind.DurchdenKlickaufdasPlus-symbolkönnenneueCSS-Dateienangefügtwerden.EinKlickaufdasMinussymbolentferntdieselektierteCSS-DateivomDoku-ment. Die CSS-Datei selbst wird dabei nicht gelöscht, sondernlediglich die Verknüpfung. Inline-CSS-Stile werden als <style>gelistet.

Bereich Medien | ImBereich@MedienwerdendieMedienabfra-gen(engl.MediaQueries)gelistet.

Mit Medienabfragen können Sie festlegen, für welche Ausga-begeräte die CSS-Regeln gelten sollen: Mit der MedienabfragePrintgeltendienachfolgendenRegelnnur,wenndasDokumentgedrucktwird.DieMedienabfrageScreenbeziehtsichhingegennuraufBildschirme.EssindauchMedienabfragenmöglich,diedieBildschirmgrößeabfragen.DieMedienabfragemax-width:480pxbeziehtsichz.B.nuraufBildschirmemiteinermaximalenGrößevon480px(Smartphone).MedienabfragenkönnenüberdasPlus-symbolangelegtwerden.

InderListederMedienabfragenimCSS-Bedienfeldstehtganzoben immerGlobal.WennGlobal selektiert ist,beziehensichdienachfolgendenCSS-RegelaufkeinespezielleMedienabfrage,sonderngeltenglobal.

Abbildung 12.18 E

DerBereichQuellenimCSS-Designer-Bedienfeld

Abbildung 12.19 E

DerBereich@MedienimCSS-Designer-Bedienfeld

CSS-Regeln mit dem CSS-Designer verwalten 12.3

207

Wenn Sie die Funktion Fliessende Rasterlayouts verwenden,sind automatisch die Medienabfragen screen and (min-width:481px)undscreenand(min-width:769px)angelegt.

Bereich Selektoren | Die Selektoren geben an, auf welche Ele-mentesichdieCSS-Regelbeziehensoll.

DurchKlickaufdasPlussymbolwirdeinneuerSelektorerstellt.Die CSS-Regel mit dem Selektor »h1« legt das Design für dasHTML-Tag<h1>fest,dasderBeschreibungvonÜberschriftenvomFormatÜberschrift1dient.SolcheSelektorenwerdenTag-Selek-toren genannt.

Die Selektoren, die mit einem Rautenzeichen (#) beginnen,beziehensichaufdieBereicheimHTML-Dokument,dieeinID-Attributbesitzen,wie z.B.<divid="kopfbereich">.Die Selek-toren,diemiteinemPunktbeginnen,wiez.B.».datum«,heißenKlassen-Selektoren .Klassen-StilekönnenSieimGegensatzzuTag-StilenaufbeliebigeTextstellenanwenden(sieheAbschnitt»CSS-Klassenzuweisen«aufSeite204).

F Abbildung 12.20DieMedienabfragegiltfürBildschirmemiteinerBreitevonmaximal480px.

F Abbildung 12.21DerBereichSelektorenimCSS-Designer-Bedienfeld

12 Arbeiten mit CSS

208

Bereich Eigenschaften | Die Eigenschaften legen das AussehenderElemente fest, aufdie sichderSelektorbezieht.Es könnenüber 70 Eigenschaften eingestellt werden. Sie sind im BereichEigenschaftendesCSS-DesignersinfünfKategorienunterteilt:

E Layout: Eigenschaften wie Breite (width), Höhe (height),Außenabstände(margin),Innenabstände(padding)undSicht-barkeit(visible)

E Text: Eigenschaften wie Textfarbe (color), Schriftart (font-family)undSchriftgröße(font-size)

E Rahmen: Eigenschaften wie Rahmenfarbe (border-color),Rahmendicke(border-width)undRahmenstil(border-style)

E Hintergrund: Eigenschaften wie Hintergrundfarbe (back-ground-color)undHintergrundbild(background-image)

E Andere: Eigenschaften wie Listenstil-Position (list-style-position)undListenstil-Typ(list-style-type)

In Kapitel 9, »Das Design der Website mit CSS«, werden vieleEigenschaftenpraktischeingesetzt.

12.4 Effekte mit CSS-Übergängen

ImneuenCSS3-StandardkönnenSieAnimationseffektemithilfesogenannter CSS-Transitions kreieren, ohne dass Sie JavaScriptoder Flash verwenden müssen. In Dreamweaver CC wird dieFunktionCSS-Übergängegenannt.

Mit CSS-Übergängen transformieren Sie einzelne CSS-Attri-bute, wie z.B. die Hintergrundfarbe (background-color), voneinerFarbezueineranderen.DabeikönnenSieu.a.dieZeit,diefürdiesenVorgangbenötigtwird,einstellen.Esistbeispielsweiseauchmöglich,Elementezuvergrößern,indemSieetwadasCSS-Attributwidthverändern.

ImfolgendenBeispielwerdenwirmitCSS-Übergängeneinensogenannten Rollover- bzw. Hover-Effekt erstellen. Wenn derWebseitenbesuchermitderMausübereinenLinkfährt,solldieHintergrundfarbevonGelblangsamnachRottransformiertwer-den.

Fehlende Übersetzung?

BeinäheremHinsehenmagsichdereineoderandereLeserfragen,warumsichAdobenichtdieMühegemachthat,dieNamenderEigen-schaften(wiezumBei-spielfont-size)zuüber-setzen.DerGrundistganzeinfach:DieNamenderhierangezeigtenCSS-EigenschaftensinddieOriginal-CSS-Attribut-namen,wiesieauchimQuelltextstehen.Diesistinsbesonderefürfortge-schritteneAnwendersehrsinnvoll.

Effekte mit CSS-Übergängen 12.4

209

G Abbildung 12.22Hover-EffektmitCSS-Übergangrealisiert,obengelb,untenrot

Schritt für Schritt CSS-Übergang erstellen

1 Webseite vorbereitenErstellenSiezunächsteineSeitemiteinemLink.

2 Quelle auswählenWählenSieimCSS-DesignerzunächsteineQuelleaus.FallskeineQuellezurAuswahlsteht,könnenSieauchaufdasPlussymbolkli-ckenundAufderSeitedefinierenwählen,damitdieCSS-RegelimHTML-Dokument(Inline-CSS)gespeichertwird.

Browserkompatibilität

LeiderunterstütztderInternetExplorererstabVersion10dieCSS-Über-gänge.DasistjedochkeinArgument,ganzaufdieCSS-Übergängezuverzichten.ImInternetExplorervorVersion10wirddieFunktioneinfachignoriert–eskommtalsozukeinemFehlerinderDarstellung.AnderemoderneWeb-browserwiez.B.Safari,ChromeoderFirefox,führendieCSS-Übergän-geohneProblemeaus.

F Abbildung 12.23BeispielseitemiteinemLink

12 Arbeiten mit CSS

210

3 Selektor ».spezial« erstellenErstellenSieanschließenddenSelektor».spezial«.

4 CSS-Attribute festlegenStellen Sie in der Kategorie Hintergrund 1 das CSS-AttributBackground-Color z.B. auf eine gelbe Farbe. In der KategorieRahmen legenSieunterborder-styledenWertsolid (durch-gezogeneLinie)fest,stellendieLinienstärke(border-width)auf2pxeinundwählenalsLinienfarbe(border-color)Schwarzaus.

5 CSS-Übergang erstellenWählenSieFenster NCSS-Übergänge,umdasBedienfeldCSS-Übergängezuöffnen.KlickenSieaufdasPlussymbol,umeinenneuenCSS-Übergangzuerstellen.

G Abbildung 12.26BedienfeldCSS-Übergänge

Abbildung 12.24 E

Quellewählen

G Abbildung 12.25Rahmenattributeeinstellen

a

Effekte mit CSS-Übergängen 12.4

211

6 Übergang einstellenUmeinenÜbergangderHintergrundfarbenachRotzuerstellen,nehmen Sie folgende Einstellungen vor: Wählen Sie unter Ziel-regeldievonunsebenerstellteCSS-Regel.spezialaus.DawireinenEffekterzielenmöchten,derbeimÜberfahrenmitderMausentsteht,wählenwirunterÜbergangbeidenWerthoveraus.UnterDauerstellenSiedenWertauf1.DamitderEffektsofortbeginnt,legenSieeineVerzögerungvon0fest.AlsZeitfunktionwählenSielinear.

DawirdieHintergrundfarbeverändernwollen,klickenSieaufdasPlussymbolund stellendieEigenschaftbackground-colorein.AlsFarbeweisenSiedannunterEndwertz.B.Rotzu.KlickenSieanschließendaufdieSchaltflächeÜbergangerstellen.

G Abbildung 12.27CSS-Übergangeinstellen

7 CSS-Regel zuweisenAlsLetztesweisenSiedieCSS-Regel.spezialnochdemLinkzu,indemSiedenLinkmarkieren,dannimEigenschaften-Bedien-feldaufdenCSS-Modus2wechselnundunterZielregel3dieOptionspezialauswählen(sieheAbbildung12.28).

12 Arbeiten mit CSS

212

8 FertigInderCode-AnsichtkönnenSiesehen,wieDreamweaverfürSiedenCSS-Codegenerierthat.DenEffektkönnenSienunz.B. inderLive-Ansichttesten.

In den nächsten Kapiteln werden wir nun noch einmal einengründlichenBlickaufdieSeitenelementewerfen,dieSie in IhreWebseitenundVorlageneinfügenkönnen.DenAnfangmachenGrafikenundBilder.

Abbildung 12.28 E

CSS-Regelzuweisen

Abbildung 12.29 E

FertigerCSS-Übergang

b c

E WelchesBildformatnutzeichfürwelchenZweck?

E WiebestimmeichdieBildgröße?

E WieschneideichBilderzu,schärfesieoderrichtesieaus?

E WieimportiereundbearbeiteichPhotoshop-Dateien?

Kapitel13

Bilder einfügenSobringenSieFarbeaufIhreWebseiten

13 Bilder einfügen

214

Textalleinistlangweilig,undBildersagenmehralstausendWorte.IndiesemKapitel lernenSie,wieSiegrafischeElemente in IhreWebseiteneinfügenundsieinDreamweavernachbearbeiten.

13.1 Bilder bearbeiten

WennSiezumBeispielFotosmitIhrerDigitalkameramachen,eig-nensichdieBilderinderRegelnochnicht,umaufeineWebseitegestelltzuwerden.SiesolltensiezuerstineinemBildbearbeitungs-programm,wiez.B.Photoshop,nachbessern,umetwadieBild-größeanzupassenundeinwenigmehrHelligkeitundSchärfeindieBilderzubringen.DreamweaverarbeitethervorragendmitPho-toshopzusammen(sieheletztenAbschnittdiesesKapitels,13.5).

MöchtenSieabernureinigegrundsätzlicheAnpassungenvor-nehmen,sokönnenSieauch inDreamweaver IhreBilderdirektnachbearbeiten,ohnedassSiedafüreinanderesProgrammein-setzenmüssen.SiekönnenzumBeispieleinFotoausIhrerDigi-talkamera direkt mit Dreamweaver in eine Webseite einfügenunddortdasBildverkleinern,AusschnittedarausfreistellenundHelligkeitskorrekturen durchführen. Mehr dazu erfahren Sie inAbschnitt13.4,»Bildeinstellungen«.

13.2 Bildformate für das Web

BevorSieBilderineineWebseiteeinfügenkönnen,müssenSiesiezunächsterstellen,bearbeitenundineinemFormatabspeichern,daseinWebbrowserlesenkann.DieWahldesrichtigenFormatsentscheidetüberdieQualitätdesBildes.FürdasWebistjedochauchdieDateigrößerelevant.JekleinerdieDatenmengenderBil-der,destogeringer sinddieWartezeiten fürden InternetnutzerbeimLadenderSeiten.

Bilder für Texte

InderVergangenheitwaresüblich,BilderauchfürÜberschriftenundMenüszuverwenden,wenndieseSchriftenenthalten,dienichtbeijedemBenutzerinstalliertsind.

G Abbildung 13.1GIF-BilderwerdengernalsÜberschriftenineinerWebseiteverwendet,wennderTexttypografischgestaltetwerdensoll.

DieseTechnikhatu.a.denNachteil,dassdieTexteinsbesonderebeiVergrößerungderSeiteoderbeiBetrachtungaufRetina-Displays(wiez.B.beimiPadoderMacbookPro)pixeligaussehen.HeutekönnenohnePro-blemeSchriftenindieWebseitemiteingebun-denwerden.

13 Bilder einfügen

Bildformate für das Web 13.2

215

JedesGrafikformathatseineVor-undNachteile.Diedreiwich-tigsten und gebräuchlichsten Formate für Webseiten stelle ichhierkurzvor.

GIF

DasGIF-Format(GraphicsInterchangeFormat) istidealfürBilder,diehöchstens256Farbenenthalten.GezeichneteGrafikenfallenhäufig darunter, insbesondere Illustrationen ohne Farbverläufe,dieineinemGrafikprogrammwiebeispielsweiseAdobeIllustratorerstelltwurden.

Für Fotos ist das GIF-Format wegen der wenigen Farben inderRegelungeeignet.AuchFotos,diescheinbarnurwenigeFar-benenthalten,kommen fürdiesesFormatmeistnicht inFrage,dazumindesteinigeStellendarin–besondersFarbverläufe– inschlechterQualitätdargestelltwerden.

In Abbildung 13.2 sehen Sie ein Beispiel dazu: Auf der lin-kenSeitebefindetsichdasOriginalbildundaufderrechtendasFotoalsGIF-Dateimit64derverfügbaren256Farben.SelbstimSchwarzweiß-DruckistdieschlechteQualitäterkennbar.

Pixel- und Vektorgrafiken

ImGegensatzzuPixelgra-fikenbestehenVektorgra-fikennichtauseinzelnenPixeln,sondernbasierenaufelementarenFormenwieLinien,Kurven,Krei-sen,Rechteckenusw.DasBesondereanVektorgra-fikenist,dasssieauflö-sungsunabhängigimmerneuskaliertwerdenkön-nen.

H Abbildung 13.2OriginalbildundGIF-Datei

13 Bilder einfügen

216

Grafikprogramme wie Photoshop bieten Funktionen an, mitdenenSiedieQualitätderGIF-Bilderoptimierenkönnen.Aller-dingssteigtdannmeistauchdieDateigröße.

GIF-Bilder können transparente Bereiche enthalten, die denHintergrunddurchscheinenlassen.DieErgebnissesindabermeistnichtsehrhochwertig,dadieRänderdertransparentenBereicheoftpixeligaussehen.

Sie können sogar mehrere Einzelbilder innerhalb eines GIF-Bildes speichernundhintereinander in einerAnimation abspie-len.GIF-AnimationeneignensichallerdingsnurfürkleinereBil-der(biszueinerGrößevonetwa150×150Pixeln),dasonstdieDatenmengezugroßwird.FüraufwendigereAnimationensolltenSiebesserdasFlash-FormatverwendenodernochbesserHTML/CSS-Animationen wählen (siehe Abschnitt 22.3, »Adobe FlashCC«und»EdgeAnimateCC«).DaherwirddasGIF-Formatheut-zutagenurnochinwenigenAusnahmeneingesetzt.

G Abbildung 13.3EineGIF-AnimationmitihrenEinzelbildern

JPEG

DasJPEG-Format(JointPhotographicExpertsGroup)istdasmeist-verwendeteGrafikformatimWeb.DieBilderkönnendamitnatur-getreumit16,7MillionenFarbenalsJPEG-Dateigespeichertwer-den.DamitdieDateiennichtzugroßwerden,werdendieBilderkomprimiert.DieKompressionistimmermitVerlustvonBildin-formationenverbunden.DenGradderKompressionstellenSieimGrafikprogrammein.JestärkerdieKompression,destoschlechteristdieQualitätdesFotos.

DasOriginalfoto(obenlinks)inAbbildung13.4hatobenrechtseineQualitätvon80%,unten linksvon10%undunten rechtsvon50%.DasBildunten linkshatzwareinekleineDateigröße

1-Bit-Transparenz

GIFbietetnureinesoge-nannte1-Bit-Transpa-renz.Dasheißt,dieBild-punktesindentwedertransparent(durchsichtig)odernicht.GenaudassinddiebeidenZuständeeinesBits.DasPNG-For-matunterstütztsogar8-Bit-Transparenz.DamitkönnenBildpunkteauchhalbtransparenteinge-stelltwerden.Insgesamtgibtes256(2hoch8)Abstufungenzwischenvollständigsichtbarundunsichtbar.MitGIFundPNGlassensichdadurchunsichtbareStellenineinemBildfestlegen,wasetwafreigestellteBilderaufWebseitenermög-licht.

Bildformate für das Web 13.2

217

(6,28KByte),istaberaufgrundderschlechtenQualitätnichtzugebrauchen.

VieleDigitalkamerasspeicherndieFotosbereitsimJPEG-For-matab.SomitmüssenSiedieBildernichteinmalmehrumwan-deln,umsieaufeinerWebseiteeinzusetzen.TransparenteBerei-cheundAnimationenwerdenvomJPEG-Formatnichtunterstützt.

Die übliche Dateiendung von JPEG-Bildern ist nicht etwa»jpeg«,sondern»jpg«.

PNG

DasPNG-Format(PortableNetworkGraphics)vereintdieVorteilevonJPEGundGIF.EsspeichertdieBilderverlustfreimitmehrerenMillionenFarben.ImGegensatzzuGIFundJPEGunterstütztPNGsogar256Transparenzstufen(8-Bit-Transparenz).DieseTranspa-renzerlaubteszumBeispiel,BildermitweichenSchlagschattenunabhängigvomHintergrundzuerstellen.

H Abbildung 13.4Originalfoto(obenlinks)undJPEG-Versioninunterschied-lichenKompressionsstufen

13 Bilder einfügen

218

BeachtenSiedabei,dassder InternetExplorerbiseinschließlichVersion6keineTransparenzenanzeigenkann.Microsofthatdie-sesProblemerstmitdemInternetExplorer7indenGriffbekom-men.AndereBrowserherstellerwieApple,MozillaundOperasinddavorbildlicherundunterstützenTransparenzenschonlange.

DieGrößevonPNG-DateienistinderRegelhöheralsbeiGIF-und JPEG-Bildern. Daher wird das PNG-Format hauptsächlicheingesetzt,wennTransparenzennotwendigsind.

SVG

Die bisher vorgestellten Grafikformate gehören zur Gruppe derRastergrafiken,dieauseinzelnenBildpunkten(Pixeln)bestehen.

SVG(ScalableVectorGraphics)isteinVektorformat.SVG-Bil-der bestehen aus Grundobjekten, die sich aus Linien, Kreisen,Vielecken(Polygone)undTextenzusammensetzen.ImGegensatzzuRastergrafikenlassensichVektorformateverlustfreiskalieren.Außerdem haben SVG-Grafiken meist eine viel kleinere Datei-größe.

SVG-Grafiken eignen sich z.B. für Logos oder Diagramme.SVG-Formatekönnenz.B.mitAdobeIllustratorerstelltwerden.Sie werden von aktuellen Webbrowsern unterstützt. Da ältereBrowserwiederInternetExplorer8(oderkleiner)keineSVG-Gra-fikenanzeigenkönnen,setzenvieleWebdesignerlieberdasPNG-oderJPEG-Formatein.

13.3 Bilder einfügen und bearbeiten

IndererstenÜbung fügenwireinBildüberdasDateien-oderElemente-BedienfeldineineWebseiteein.

Schritt für Schritt Bild einfügen

1 Einfügemarke setzenSetzenSiedieEinfügemarkeimEntwurfsbereichandieStelle,anderdasBildeingefügtwerdensoll.

G Abbildung 13.5DerInternetExplorer(links)stelltTransparenzenvonPNG-BildernbiseinschließlichVer-sion6nichtkorrektdar.

Bild-Platzhalter

DieFunktionBild-Platz-halterwurdeinDream-weaverCCentfernt.Hier-mitkonntemanstatteinerGrafikeinRechteckeinfügen.SpäterkonntedanndasRechteckdurcheineGrafiknachträglichersetztwerden.

Bilder einfügen und bearbeiten 13.3

219

2 Bild auswählenWählenSieEinfügenNBildNBild.EserscheinteinDialogfenster,indemSiedieeinzufügendeGrafikvoranzeigenundauswählenkönnen.ImVorschaufensterfindenSieauchallewichtigenInfor-mationenzudemBild.

AlternativkönnenSieeinBildauchausdemDateien-Bedien-feldmitderMausdirektindasDokumentenfensterziehen.

NochübersichtlicheristdasElemente-Bedienfeld(MenüFensterNElemente).HierwerdendieDateienmiteinerVorschauunddieBildgrößenangezeigt.

H Abbildung 13.6DasDateien-Bedienfeld

H Abbildung 13.7DasElemente-Bedienfeld

13 Bilder einfügen

220

3 Änderungen überprüfenNachdemSiedasBildeingefügthaben,sehenSie inderTeilen-AnsichtvonDreamweaver,wieesimQuelltextmitPfadundGrö-ßenangabenangelegtworden ist. ImEigenschaften-BedienfeldkönnenSienunweitereEinstellungenvornehmen.DazukommenwirnochweiteruntenindiesemKapitel.

Bilder austauschen

UmeinbereitseingebautesBilddurcheinanderesBildzuerset-zen,löschenSieentwederdasalteBildundfügendasneueBildein,oderSiemarkierendasBildimDokumentenfensterundkli-ckenimEigenschaften-BedienfeldaufdasOrdnersymbolrechtsnebenQuelle1(sieheAbbildung13.9).WählenSiedanneinfacheineneueBilddateiaus.

Rollover-Bilder einsetzen

Rollover-Bilder können Sie über die FunktionEinfügen NBild NRollover-Bildeinsetzen.

EinRollover-BildbestehtimmerauszweiBildern.Jenachdem,ob sich der Mauszeiger über dem Rollover-Bild befindet odernicht, wird entweder das eine oder das andere Bild angezeigt.Rollover-BilderwerdengerninNavigationeneingesetzt.

FürdieFunktionRollover-BildbenötigenSiezweiBilder,diejeweilsdiegleicheHöheundBreiteaufweisen:DieAusgangsgrafiksollangezeigtwerden,wennsichderMauszeigernichtüberdemMenüpunkt befindet. Die Rollover-Grafik wird angezeigt, wennsichderMauszeigerüberdemMenüpunktbefindet.

G Abbildung 13.8MauszeigeraußerhalbdesRollover-Bildes(links)undaufdemBild(rechts)

Bilder in CSS

BilderkönnenauchineinemCascadingStyle-sheetalsHintergrundgra-fikenverwendetwerden.JenachEinstellungenkönnensiedortdannauchwiederholtaneinan-dergelegt(gekachelt)werden.

Bildeinstellungen 13.4

221

InAbbildung13.8befindet sich linksderMauszeiger außerhalbdes Rollover-Bildes, und der Button wird normal angezeigt.RechtsistderMauszeigerdirektüberdemRollover-Bild,unddasBildwechseltdieDarstellung.

DiegenauenEinstellungeninderDialogboxRollover-Bildein-fügenerkläreichinAbschnitt16.3,»Rollover-BildmitJavaScript«.

Rollover-EffektelassensichinDreamweaverCCauchmitCSS-Übergängenrealisieren(sieheKapitel12,»ArbeitenmitCSS«).

13.4 Bildeinstellungen

AuchwennmansichbereitsMühegegebenhat,einBildfüreineWebseite vorzubereiten, möchte man oft noch Kleinigkeitendaranverändern,nachdemmanestatsächlichindasLayoutein-gefügthat.InDreamweaverkönnenSiediewichtigstenArbeits-schrittedirektdurchführen,ohnedafürdasProgrammwechselnzumüssen.

KlickenSieeinfachdasBild imDokumentenfensteran–undSiefindenalleWerkzeugefürBildbearbeitungenimEigenschaf-ten-Bedienfeld.

G Abbildung 13.9Eigenschaften-BedienfeldbeiausgewähltemBild

Alternativtext eingeben

GebenSieunterAlt.2einenpassendenNamenfürdenAlter-nativtextein,derdasBildaussagekräftigbeschreibt.EineSuch-maschinewiezumBeispielGooglekanndenAlternativtextdannseinemIndexhinzufügen.DerEintragistauchfürBrowserwich-tig,diekeineBilderanzeigenkönnen,beispielsweise inVorlese-programmenfürsehbeeinträchtigteBenutzer.

a b

13 Bilder einfügen

222

WennSieeineÜberschriftalsGrafikineineWebseiteintegrieren,solltenSieunbedingtdenTextderÜberschriftalsAlternativtexteintragen.DasselbegiltfürFotos,Schaltflächen,Menüsusw.

Bildgröße einstellen

EsgibtzweiMöglichkeiten,dieGrößeeinesBildeszuverändern: E ZiehenSieentwederdenRahmendesBildesmitderMausauf

dasgewünschteFormat,oder E geben Sie die Breiten- und Höhenwerte im Eigenschaften-

Bedienfeldein.

AnschließendmussdieGrafikneuaufgelöstwerden,dasBildwirddamitandieneueGrößeangepasstunderneutgespeichert.DiealteBilddateiwirddabeiüberschrieben.Eswirdempfohlen,Bil-der nicht zu vergrößern und immer nur zu verkleinern, um dieBildqualitätnichtzubeeinträchtigen.DiebestenErgebnisseerzie-lenSiejedoch,wennSiedieBilderineinemGrafikprogrammwieFireworksoderPhotoshopbearbeiten.

Schritt für Schritt Größe eines Bildes in Dreamweaver verändern

1 Bild auswählenKlicken Sie auf das gewünschte Bild. Es wird dann ein dünnerRand um die Grafik herum angezeigt und das Eigenschaften-BedienfeldmitdenBildeinstellungeneingeblendet.

2 Größe verändernHaltenSie(ª)gedrückt,klickenSiemitderMausaufdieuntererechteEckedesBildes, und ziehenSiedanndenRahmennachlinksobenbzw.rechtsunten,umeszuverkleinernbzw.zuver-größern. Durch das Gedrückthalten der (ª)-Taste während desZiehensbleibendieProportionendesBildeserhalten,sodassesnichtgequetschtodergestauchtwird.

Bildeinstellungen 13.4

223

G Abbildung 13.10VerändernderBildgröße

3 Neue Einstellungen vornehmenSiekönnendieGrößeauchdurchEingabederBreite(B)undHöhe(H) 2 im Eigenschaften-Bedienfeld direkt bestimmen. FallsIhnendieGrößenicht gefällt, könnenSiedasBild auchwiederaufdieOriginalgrößezurücksetzen, indemSieaufdas IconAufOriginalgrössezurücksetzen3klicken.

4 Bild neu auflösenKlickenSie anschließendaufdieSchaltflächeNeuauflösen 1,damitdasBildindieneueGrößekonvertiertundgespeichertwird.

Bilder zuschneiden

Sie können inDreamweavernicht nurdieBildgröße verändern,sondernaucheinenAusschnittfreistellen,umzumBeispielüber-flüssigeRandbereichezuentfernen.

a b c

13 Bilder einfügen

224

Schritt für Schritt Bild zuschneiden

1 Bild auswählenKlickenSiewiederaufdasgewünschteBild,umesauszuwählenund das Eigenschaften-Bedienfeld für dieses Bild anzuzeigen.WählenSiehierdasZuschneiden-Werkzeug1aus.

2 Rechteck anpassenInnerhalb des Bildes im Dokumentenfenster finden Sie nun einRechteck, mit dem Sie bestimmen können, wie Sie das Bildbeschneiden.DurchZiehenaneinerderEckenverändernSiedieGrößedesBereichs,durcheinenKlickundZiehenmitgedrückterMaustasteverschiebenSiedasAuswahlrechteck.

WennSiedenrichtigenAusschnittmitdemRechteckeingestellthaben, klicken Sie doppelt in das Rechteck hinein. Das ausge-schnitteneBildwirdneuerstelltundinderBilddateigespeichert.Vorsicht:DasOriginalbildwirddabeiüberschrieben.

H Abbildung 13.11Bildausschnittfrei-stellen

1

Bildeinstellungen 13.4

225

Helligkeit und Kontrast anpassen

UmHelligkeitundKontrasteinesBildeszuverändern,klickenSieimEigenschaften-BedienfeldaufdieSchaltfläche3.Imaufklap-penden Dialogfenster können Sie dann mit den SchiebereglerndieEinstellungenvornehmen.WennSiedieVorschau2aktivierthaben,könnenSiedieVeränderungdirektimDokumentenfenstermitverfolgen.

G Abbildung 13.12KlickenSieamEndedoppeltindasRechteck.

H Abbildung 13.13VerändernvonHelligkeitundKontrasteinesBildes

3

b

13 Bilder einfügen

226

Bild scharf stellen

DieSchärfedesBildespassenSiemitderSchaltfläche1an. JeweiterSiedenReglernachrechtsbewegen,destoschärferwirddasBild.

VermeidenSie es, einen zuhohenWert fürdenReglerScharfstellen zuwählen. Es kommt sonst zur Bildung von störendenRändern,genanntArtefakte.FüraufwendigereBearbeitungenistnatürlicheinProgrammwiePhotoshopnotwendig.

13.5 Zusammenarbeit mit Photoshop CC

NebenDreamweaverbenötigenSiefürdieErstellungvonWeb-sites immer auch ein Programm für die Bildbearbeitung. DerRolls-RoyceunterdenGrafikprogrammen istAdobePhotoshop.Es istdasamhäufigsteneingesetzteBildbearbeitungsprogrammimGrafikdesign-BereichundistdortabsoluterStandard.EsbietetdiebestenFunktionenzumBearbeitenvonBildern.

DasDateiformatvonPhotoshopheißtPSD (PhotoshopDocu-ment).IndiesemFormatbleibensämtlicheEbenen,Texteingabenusw.verlustfreifürdienachträglicheBearbeitungerhalten.

Abbildung 13.14 E

DerReglerScharfstellen

Fireworks eingestellt

EineAlternativezuAdobePhotoshopistAdobeFireworks.DasGrafikprogrammistspe-ziellfürdieBearbeitungundErstellungvonWeb-grafikenkonzipiert.Lei-derhatAdobedieEnt-wicklunganFireworkseingestellt.DieletzteaktuelleVersionCS6kannabernochvonAdobebezogenwerden.

1

Zusammenarbeit mit Photoshop CC 13.5

227

FürWebseitenbenötigenSiejedochdasGIF-,JPEG-oderPNG-Format,indemdieBildinformationinkomprimierterFormgespei-chertwird.DahermussmanPSD-Dateienvorherindieentspre-chendenFormateumwandeln.

InDreamweaverkönnenSiePhotoshop-Dateiendirektimpor-tierenunddabei ineinesder gewünschtenBildformatekonver-tieren.

Schritt für Schritt Photoshop-Datei in Dreamweaver importieren

1 Photoshop-Datei einfügenFügenSiediePhotoshop-DateimitderEndung».psd«entwederüberdenMenüpunktEinfügenNBildein,oderziehenSiesieein-fachausdemFensterDateienindasDokumentenfenster.

EsöffnetsicheinFensterzurBildoptimierung,indemSieeinigeEinstellungenvornehmenkönnen,bevorSiedasBildendgültiginDreamweaverimportieren.

2 Format einstellenWählen Sie im Listenfeld Format das gewünschte Dateiformataus.FürFotoseignetsichambestendasJPEG-Format. ImFeldQualität können Sie einstellen,wie stark dasBild komprimiertwerdensoll.HoheWerteführenzwarzueinerbesserenBildqua-lität,dadurchsteigt jedochdieDateigrößean.DieWirkungderEinstellungenaufdasBildwirdunmittelbarangezeigt.

Es muss nicht immer Photoshop sein

AdobePhotoshopistdieführendeSoftwarezumBearbeitenvonFotosundBildernallerArt.Esgibtjedochauchkostengüns-tigeAlternativen,diediewichtigstenFunktionenzurBildbearbeitungbie-ten.AufdemMacistPixelmaturundAcornzuempfehlen.FürWindowsistz.B.Paint.netundPaintshopProzuemp-fehlen.DasGrafikpro-grammGimpistaufallengängigenBetriebssyste-menverfügbarundistkostenlos.AmbestenarbeitetDreamweaverjedochmitPhotoshopzusammen.

F Abbildung 13.15EinstellungenfürdieBild-optimierung

13 Bilder einfügen

228

3 Bild importierenKlickenSieaufOK,umdasBildzukonvertierenunddenImportabzuschließen. Es öffnet sich ein Dialogfenster, in dem Sie denNamenderneuenDateiundihrenSpeicherortfestlegen.

4 Bildeinstellungen bearbeitenWennSie imEigenschaften-BedienfeldaufdasZahnradsymbol1klicken,könnenSieEinstellungenfürdieBildoptimierungwie-deranpassen.

Bilder aus der Zwischenablage einfügen

AnstatteineganzePhotoshop-Datei inDreamweaverzu impor-tieren, ist es auchmöglich, inPhotoshopeinfacheinenBereichineinemBildzumarkierenunddiesenperCopy&PasteinDre-amweavereinzufügen.DazukopierenSiedenmarkiertenBereichinPhotoshopüberBearbeitenNKopierenindieZwischenablageund fügen ihn anschließend inDreamweaverüberBearbeiten NEinfügenein.

EsöffnetsichdanndasFensterBildoptimierung,mitdemSie,wie in der vorherigen Schritt-für-Schritt-Anleitung beschrieben,dasBildindasgewünschteFormatkonvertieren.

Abbildung 13.16 E

BildoptimierungändernüberdasZahnradsymbol

a

Zusammenarbeit mit Photoshop CC 13.5

229

Bilder in Photoshop bearbeiten

AuchBilder,diebereitsindieWebseiteeingefügtwurden,kön-nen Sie nachträglich in Photoshop bearbeiten. Dazu markierenSie zunächst dasBild und klicken anschließend im Eigenschaf-ten-BedienfeldaufdasPhotoshop-Symbol2.DaraufhinwirddieDateiinPhotoshopgeöffnet.

DasBesondereisthier,dassnichtdiekonvertierteJPEG-Dateiin Photoshop geöffnet wird, sondern die Original-PSD-Datei,dennbeimImportierenderPhotoshop-DateihatsichDreamwea-verdieDateigemerkt.NachderBearbeitunginPhotoshopkön-nenSiedieDateieinfachspeichernundschließen.

G Abbildung 13.17BilderkönnendurcheinenKlickaufdasPhotoshop-Symbol2direktinPhotoshopgeöffnetwerden.

NachdemSieinPhotoshopdasBildgespeicherthabenundwiederzuDreamweaverzurückgekehrtsind,werdenSiezunächstkeineVeränderungandemBild feststellen. Inderoberen linkenEckedesBildes3wirdein Indikatorsymbol eingeblendet,das Ihnenanzeigt,obdieGrafikmitderOriginal-Photoshop-Dateisynchron

b

c

13 Bilder einfügen

230

ist.ZweigrünePfeilesignalisieren,dassdieBilddateimitderOrigi-naldateiübereinstimmt.IstderunterePfeilrot,somussdieDateisynchronisiertwerden.

KlickenSieimEigenschaften-BedienfeldaufdieSchaltflächeVon Original aktualisieren2,umdieBilddateizuaktualisieren.DabeiwerdendieEinstellungenfürdieGrößeunddieBildquali-tät,dieSiebeimEinfügenderGrafikgewählthaben,automatischangewendet.

G Abbildung 13.18ÜberdieSchaltfläche2übertragenSiedieÄnderungenvonderOriginal-Photoshop-DateiaufdasBildinDreamweaver.

Voreinstellungen

Fallsbei IhnenstattdesPhotoshop-Symbols1 imEigenschaf-ten-Bedienfeld ein anderes Symbol angezeigt wird, müssen SiefolgendeEinstellungvornehmen,damitDreamweaverstattdessenmitPhotoshopzusammenarbeitet:

1 2

Zusammenarbeit mit Photoshop CC 13.5

231

Öffnen Sie in den Voreinstellungen die Kategorie Datei-typen/Editoren .KlickenSieanschließendaufdieErweiterungen.jpg .jpe .jpeg. Im Bereich Editoren stellen Sie nun PhotoshopalsPrimärein.KlickenSiedazuaufAdobePhotoshopCCundanschließendaufdieSchaltflächeZuprimäremEditormachen.WiederholenSiediesauch fürdieDateierweiterungen .gifund.Png.

G Abbildung 13.19IndenVoreinstellungenkönnenSiePhotoshopalsbevorzugtenEditoreinrichten.

Inhalt

5

Inhalt

Vorwort................................................................................. 21

TeilI Einführung

1 Ein Platz im Internet

1.1 WiekommtmeineSiteinsInternet?.......................... 26

WasisteineWebsite?.................................................. 26

EinPlatzimWWW..................................................... 27

1.2 DieeigeneDomain..................................................... 27

WasisteineDomain?.................................................. 28

Subdomains................................................................ 28

Top-Level-Domains..................................................... 29

IstmeineDomainnochfrei?........................................ 29

Domainsregistrieren................................................... 31

1.3 EinenProviderfinden................................................. 32

AuswahleinesWebhosters.......................................... 32

DaspassendeAngebotfinden..................................... 33

BraucheicheineneigenenWebserver?........................ 34

WiekonfigurierenSieIhrenWebspace?....................... 34

2 Die Sprachen des Web

2.1 WelcheSprachengibtes?.......................................... 38

2.2 HypertextMarkupLanguage...................................... 39

StrukturierenvonInhalten........................................... 40

Tag-Attribute............................................................... 41

HTML-Entities............................................................. 41

HeaderundBody........................................................ 41

DarstellungimBrowser............................................... 42

ExtensibleHypertextMarkupLanguage(XHTML)........ 42

HTML5........................................................................ 43

Inhalt

6

2.3 CascadingStylesheets................................................ 44

Inline-CSS................................................................... 44

ExterneCSS-Datei....................................................... 45

CSS3........................................................................... 46

2.4 JavaScript................................................................... 47

2.5 Ajax............................................................................ 48

2.6 PHPundMySQL......................................................... 49

2.7 WebbrowserundRendering-Engines......................... 51

3 Dreamweaver CC – los geht’s

3.1 NeuundinteressantinDreamweaverCC................... 54

DerneueCSS-Designer............................................... 55

jQueryUI.................................................................... 55

AdobeWebFonts....................................................... 56

FließendesRasterlayout.............................................. 56

ErstellungvonmobilenApplikationen........................ 57

CSS-Übergänge.......................................................... 58

Detailverbesserungen.................................................. 58

Funktionen,dieentferntwurden................................. 59

3.2 Dreamweaverinstallierenundaktualisieren............... 59

Updates...................................................................... 59

3.3 DerProgrammstart..................................................... 60

3.4 Schnellstart:ProbierenSieDreamweaveraus............ 61

4 Die Arbeitsumgebung

4.1 Dokumentenfenster................................................... 70

Entwurfsansicht........................................................... 70

Live-Ansicht................................................................ 71

Code-Ansicht.............................................................. 72

Teilen-Ansicht............................................................. 72

Statuszeile................................................................... 73

Inhalt

7

4.2 DasEigenschaften-Bedienfeld.................................... 74

HTML-Modus.............................................................. 75

CSS-Modus................................................................. 75

Bildeigenschaften........................................................ 76

WeitereEigenschaften................................................. 76

4.3 Bedienfelder............................................................... 76

Bedienfelderorganisieren............................................ 76

Bedienfeldergruppieren.............................................. 77

Das»Einfügen«-Bedienfeld.......................................... 78

Das»Dateien«-Bedienfeld........................................... 79

Das»Verlauf«-Bedienfeld............................................ 79

4.4 AnpassenderArbeitsumgebung................................ 80

Arbeitsbereiche........................................................... 80

Voreinstellungen......................................................... 80

Synchronisationseinstellungen(neuin

DreamweaverCC)....................................................... 81

VorschauinBrowser.................................................... 82

TeilII EinWebsiteprojekt

5 Eine neue Website

5.1 UnserBeispielprojekt................................................. 86

ResponsivesWebdesign.............................................. 87

Beispielwebsiteherunterladen..................................... 87

LokalerSite-Ordner..................................................... 88

5.2 NeueSiteanlegenundkonfigurieren......................... 88

5.3 Sitebearbeitenoderimportieren............................... 90

WechselnzwischenSites............................................. 91

6 Eine Vorlage anlegen

6.1 Vorlageentwerfen...................................................... 94

WasisteineVorlage?................................................... 94

BeispieleimWeb........................................................ 95

Vorlageplanen............................................................ 96

Inhalt

8

6.2 EinLayouterstellen.................................................... 97

6.3 EineVorlagemitbearbeitbarenBereichenerstellen... 101

SpeicherortfürVorlagen.............................................. 103

7 Seiten mit Inhalten füllen

7.1 NeueWebseiteerstellen............................................ 106

NeueDateienausVorlageerzeugen............................ 106

Seitentitelvergeben.................................................... 109

7.2 Seiteninhalteeinfügen............................................... 110

Texteerstellen............................................................. 111

Überschriften.............................................................. 112

Listenerstellen............................................................ 113

Bildereinfügen............................................................ 114

Tabellenerstellen........................................................ 117

8 Erstellen einer Navigation

8.1 HauptnavigationmitListenerstellen......................... 123

8.2 Fußzeilennavigation................................................... 126

8.3 Logoeinfügenundverlinken...................................... 127

8.4 VorlagespeichernundaufSeitenanwenden.............. 129

9 Das Design der Website mit CSS

9.1 DesignenmitCSS....................................................... 132

DieCSS-Datei»layout.css«.......................................... 132

CSS-Regeln................................................................. 133

Selektoren(Wassollgestaltetwerden?)....................... 133

EigenschaftenundWerte(Wiesolletwas

gestaltetwerden?)....................................................... 134

9.2 Gesamtseitegestalten................................................ 135

Inhalt

9

9.3 Kopfbereichgestalten................................................ 141

9.4 Navigationdesignen................................................... 142

HorizontaleNavigationerstellen.................................. 143

MenüelementealsSchaltflächendarstellen.................. 147

Hover-Effekt................................................................ 150

9.5 Hauptbereichdesignen.............................................. 152

9.6 Fußbereichstylen....................................................... 154

10 Websites testen, veröffentlichen und verwalten

10.1 WebsiteimBrowsertesten........................................ 158

Browservielfalt............................................................ 158

Browsershots............................................................... 160

Browserstack............................................................... 160

Browservorschaueinstellen......................................... 161

WebsiteimBrowsertesten.......................................... 163

AlleHyperlinkstesten.................................................. 163

BrowserkompatibilitätundZugänglichkeitprüfen........ 165

10.2 FTP-Übertragungkonfigurieren.................................. 165

10.3 ÜbertragenderSiteaufdenServer............................ 168

ÜbertragenüberdasFenster»Dateien«....................... 168

ÜbertragungimDokumentenfenster........................... 171

Websitesynchronisieren.............................................. 173

10.4 Websiteverwalten..................................................... 175

TeilIII DreamweaverimDetail

11 Texte eingeben und strukturieren

11.1 Textinhalteerstellen................................................... 180

Texteingeben.............................................................. 180

Sonderzeicheneingeben.............................................. 181

Leerzeicheneingeben.................................................. 182

Inhalt

10

11.2 Inhaltestrukturieren.................................................. 183

Überschriften.............................................................. 183

Absätze....................................................................... 184

Einrückungen.............................................................. 185

VorformatierteAbsätze................................................ 185

Listen.......................................................................... 186

Hervorhebungen......................................................... 188

11.3 ImportierenausWord................................................ 189

Word-HTMLoptimieren.............................................. 189

TexteausderZwischenablageeinfügen....................... 190

StylesheetsundWord................................................. 192

12 Arbeiten mit CSS

12.1 WassindCascadingStylesheets?............................... 194

VorteilevonCSS.......................................................... 195

ExterneundinterneCSS.............................................. 195

CSSinVorlageneinsetzen........................................... 196

12.2 MethodenzurCSS-Erstellung.................................... 197

CSS-RegelnüberSeiteneigenschafteneinstellen.......... 197

CSS-RegelnüberEigenschaften-Bedienfeld

einstellen.................................................................... 201

12.3 CSS-RegelnmitdemCSS-Designerverwalten........... 204

DievierBereichedesBedienfelds»CSS-Designer«....... 205

12.4 EffektemitCSS-Übergängen...................................... 208

13 Bilder einfügen

13.1 Bilderbearbeiten........................................................ 214

13.2 BildformatefürdasWeb............................................ 214

GIF.............................................................................. 215

JPEG........................................................................... 216

PNG............................................................................ 217

SVG............................................................................ 218

Inhalt

11

13.3 Bildereinfügenundbearbeiten.................................. 218

Bildereinfügen............................................................ 218

Bilderaustauschen...................................................... 220

Rollover-Bildereinsetzen............................................. 220

13.4 Bildeinstellungen........................................................ 221

Alternativtexteingeben............................................... 221

Bildgrößeeinstellen..................................................... 222

Bilderzuschneiden...................................................... 223

HelligkeitundKontrastanpassen................................. 225

Bildscharfstellen........................................................ 226

13.5 ZusammenarbeitmitPhotoshopCC........................... 226

BilderausderZwischenablageeinfügen....................... 228

BilderinPhotoshopbearbeiten................................... 229

Voreinstellungen......................................................... 230

14 Tabellen erstellen

14.1 SonderfallWebtabellen.............................................. 234

14.2 ErstelleneinerTabelle................................................ 235

14.3 EigenschaftenvonTabellen........................................ 238

Tabellenmarkieren...................................................... 238

EinstellungenfürkompletteTabellenvornehmen........ 240

HöheundBreiteanpassenundzurücksetzen............... 241

14.4 EigenschaftenvonTabellenbereichen......................... 241

Spalten,ZeilenundZellenauswählen.......................... 242

EinstellungenfürTabellenbereiche............................... 243

Tabellenzellengruppieren............................................ 244

SpaltenundZeilenhinzufügenundlöschen................. 246

14.5 Tabellensortieren....................................................... 246

14.6 TabellenmitCSSgestalten......................................... 247

15 Hyperlinks einsetzen

15.1 NavigierenmitHyperlinks.......................................... 252

FunktionsweisevonHyperlinks................................... 252

Inhalt

12

DasWichtigste:dieURL.............................................. 253

15.2 HyperlinksanlegeninDreamweaver.......................... 254

ExterneundinterneHyperlinks................................... 255

LöschenvonHyperlinks............................................... 256

SeiteinneuemFensteröffnen..................................... 256

LinksinnerhalbeinerWebseite.................................... 256

15.3 SpezielleHyperlinksanlegen...................................... 260

LeereLinks.................................................................. 260

E-Mail-Links................................................................ 260

Imagemaps.................................................................. 262

Download-Links.......................................................... 263

16 Interaktivität mit JavaScript und jQuery UI

16.1 WasistJavaScript?..................................................... 266

JavaScriptinDreamweaverintegrieren........................ 266

16.2 JavaScriptimEigenschaften-Bedienfeld..................... 267

16.3 Rollover-BildmitJavaScript........................................ 268

16.4 JavaScriptüberVerhaltenintegrieren......................... 270

FunktionsweiseeinesVerhaltens................................. 270

EinVerhalteneinfügen................................................ 271

Aktionenhinzufügen................................................... 274

Aktionenbearbeitenundlöschen................................ 275

Ereignisfestlegen........................................................ 276

16.5 jQueryUI.................................................................... 276

Widgetseinfügen........................................................ 277

DasAccordion-Widget................................................ 277

DasTabs-Widget......................................................... 280

17 Formulare erstellen

17.1 EigenschaftenvonFormularen................................... 284

17.2 ErstellenvonFormularen............................................ 285

Formularbereicheinrichten......................................... 285

Inhalt

13

AufbaueinesFormularelements.................................. 286

Formularelementeeinfügen......................................... 287

17.3 FormularfelderimÜberblick....................................... 289

EinfacheTextfelder...................................................... 289

Kennwortfelder........................................................... 290

MehrzeiligeTextfelder/Textbereich.............................. 290

Auswahllisten.............................................................. 291

Kontrollkästchen......................................................... 292

Optionsschalter........................................................... 293

Schaltflächen............................................................... 293

VersteckteFelder......................................................... 294

Dateifeld..................................................................... 295

Feldgruppe.................................................................. 295

17.4 HTML5-Formularfelder............................................... 296

E-Mail......................................................................... 296

Telefon........................................................................ 297

URL............................................................................. 297

Zahl............................................................................. 297

Datum........................................................................ 297

WeitereFelderwieFarbe,Wocheetc.......................... 298

17.5 Formularegestalten................................................... 298

FormularemitTabellengestalten................................. 299

FormularemitCSSgestalten........................................ 300

17.6 Formularevalidieren................................................... 304

ValidierungmitHTML5.............................................. 305

JavaScriptfürBrowserohneHTML5-Validierung.......... 307

17.7 KontaktformularmitPHP-Skript................................ 309

18 Mobile Websites

18.1 WebsitesfürmobileGeräteentwickeln..................... 312

18.2 ResponsivesWebdesign............................................. 313

WiefunktioniertresponsivesWebdesign?.................... 314

SeitemitflexiblemLayoutanlegen.............................. 314

LayoutfürmobileGeräte............................................ 317

Inhalt

14

LayoutfürTablet-Geräte.............................................. 319

LayoutfürDesktopgeräte............................................ 321

18.3 MobileWeb-AppsmitjQueryMobile........................ 323

CharakteristikavonmobilenWebsites......................... 323

WasistjQueryMobile?............................................... 324

EineWeb-AppmitDreamweaverCCerstellen............. 325

18.4 NativemobileAppsmitPhoneGap–einAusblick..... 332

TeilIV ÜberDreamweaverhinaus…

19 Bloggen mit WordPress

19.1 WassindWeblogs?.................................................... 338

19.2 WordPress.................................................................. 339

19.3 WeblogmitWordPresserstellen................................ 339

WordPressinstallieren................................................. 340

WordPressadministrieren............................................ 344

WordPress-Templates/Themes..................................... 346

20 Gesucht und gefunden bei Google

20.1 TippszurSuchmaschinenoptimierung........................ 353

VerwendenSieTitelund»Alt«-Attribute...................... 353

Metatags..................................................................... 354

WebsitevonanderenWebsitesverlinken.................... 355

WasSieunbedingtvermeidensollten.......................... 356

20.2 IhreWebsitemitGooglebekanntmachen................. 356

20.3 BesucherstatistikenmitGoogleAnalytics.................. 359

GoogleAnalyticseinrichten......................................... 360

20.4 AnzeigenmitGoogleAdWords.................................. 363

20.5 GeldverdienenmitGoogleAdSense.......................... 364

Inhalt

15

21 Mashups – YouTube, Facebook und Co. integrieren

21.1 YouTube-Videoseinbinden......................................... 368

21.2 GoogleMapsintegrieren............................................ 371

21.3 Twitter-Timelineintegrieren....................................... 374

21.4 EmpfehlungslinkszusozialenNetzwerken................. 375

22 Nützliche Software der Creative Cloud

22.1 DieAdobeCreativeCloud.......................................... 378

22.2 AppsfürBildverarbeitungundVerwaltung................ 380

AdobePhotoshopCC.................................................. 380

AdobePhotoshopLightroom...................................... 381

AdobeBridge.............................................................. 381

22.3 AppsfürAnimationen................................................ 382

AdobeFlashCC........................................................... 383

AdobeEdgeAnimateCC............................................. 383

22.4 AppszurBearbeitungvonWebsites........................... 383

AdobeMuse............................................................... 383

AdobeEdgeInspect.................................................... 385

AdobeEdgeReflowCC............................................... 385

AdobeEdgeCodeCC.................................................. 385

Index..................................................................................... 387

Index

387

Index

1-Bit-Transparenz ............... 216<blockquote> ..................... 185.de ....................................... 29.gov ..................................... 29@Medien .......................... 152.museum .............................. 29.org ...................................... 29

A

AbhängigeDatei ................ 103übertragen ..................... 172

Abo .................................... 378Absatz ................................ 111

HTML ............................ 184vorformatierter in

HTML ........................ 185Absatz(HTML-Tag) ............... 40Absatzschrift ...................... 154AbsoluterLink .................... 255Abstand

CSS ............................... 141Accordion-Widget ...... 277,278AdobeApplication

Manager ................... 59,379AdobeBridge ..................... 381AdobeCreativeCloud ........ 378AdobeEdgeAnimateCC ..... 58,

383AdobeEdgeCode .............. 385AdobeEdgeInspect ........... 385AdobeEdgeReflow ............ 385AdobeFireworks ................ 379AdobeFlashCC ................. 382AdobeMuse ...................... 383AdobePhotoshop .............. 379AdobePhotoshopLight-

room .............................. 380AdobeWebFonts ................ 56Ajax ..................................... 48Aktion ................................ 271

bearbeiten ..................... 275entfernen ...................... 276

hinzufügen .................... 274Aktualisieren ................ 73,176AktuellesDokument

überprüfen ..................... 165ALL-INKL.COM .................... 33Alpha ................................. 138Alt ..................................... 114Alt-Attribut ........................ 353Alternativtext ............. 114,221Android

Formulare ...................... 297Animation

erstellen ........................ 383Software ....................... 382

Ankerpunkt ................ 256,257Ansichtsmodi ....................... 70Anzeigen ............................ 363Aperture ............................ 380AppfürApplesAppStore

bereitstellen ................... 333ApplicationManager .......... 379Applikation

mobile ............................. 57Arbeitsbereiche

zusammenstellen .............. 80Arbeitsbereichlayout ............ 80Arbeitsumgebunganpassen .. 80ASP ...................................... 59Attribut ................................ 41Aufzählungspunkte ............. 113Auswahlliste ....................... 291Auszeichnungssprache .......... 39Automatisierungüberdas

Verlauf-Bedienfeld ............ 79

B

Banner ................................. 94Bannerbereich ...................... 97Barrierefreiheit ........... 195,238BearbeitbarerBereich ... 97,109Bedienfeld ............................ 76

Dateien ...................... 79, 92

Eigenschaften .................. 74Einfügen .......................... 78gruppieren ....................... 77Verlauf ............................ 79

Bedienfeldgruppe ........... 76,77Bedienfeldmenü ................... 77Beispielprojekt ..................... 86Beispielwebsite .................... 86

herunterladen .................. 87Benutzeroberflächen-

elemente ........................ 276Besucherstatistik ................ 359Bild

austauschen ............ 220, 274CSS ............................... 220einfügen ..... 64, 78, 114, 218Einstellungen ................. 221Helligkeit ....................... 225in Photoshop

bearbeiten .................. 229Kontrast ........................ 225neu auflösen .................. 116nicht angezeigtes ............ 158Proportionen ................. 222verkleinern .................... 115vorausladen ................... 275zuschneiden ................... 223

Bildeigenschaft ..................... 76Bilderordner ......................... 89Bildformat,Web ................. 214Bildgröße ........................... 214

einstellen ....................... 222Bildoptimierung ................. 227Bildschaltfläche .................. 294Bildverarbeitung,Software . 379Blindtextgenerator ............. 198Blog ................................... 338Blogger .............................. 338body ............................ 41,137boilerplate.css ............ 103,132Bookmark

Titel .............................. 109Box-Modell ........................ 153box-sizing .......................... 153Browser ............................. 158

Index

388

Browser(Forts.)Adresszeile ....................... 26in Vorschaufunktion

einbinden ................... 161Standardformatierung ...... 42

Browserfenster ................... 271öffnen ........................... 275

Browserkompatibilität ........ 165BrowserLab ........................ 161Browserliste ....................... 161Browsershots ..................... 160Browserstack ...................... 160Browservorschau ................ 161Button ............................... 294

C

Cache .................................. 90CascadingStylesheetsR CSSccTLD .................................. 29CMS .................................. 338Code-Ansicht ....................... 72Content-Management-System

R CMSCopyrighteinfügen ............ 126Copyright-Symbol .............. 126CreativeCloud ........... 377,378CS6,Rasterlayoutfunktio-

niertnicht ...................... 314CSS .............. 44,131,193,252

Abstand ......................... 141Eigenschaften ................ 133Eigenschaften-Bedien-

feld ........................... 197einbinden ........................ 46Erstellung ...................... 197externer Stil ................... 195Grundlagen .................... 193Hintergrundfarbe ........... 197Hintergrundgrafik ........... 220Hyperlink-Stil ................. 197interner Stil ................... 195in Vorlage einsetzen ....... 196mit CSS-Designer bear -

beiten ........................ 249

Rollover-Effekt ............... 197Schriftart ....................... 197Schriftfarbe ................... 197Schriftgröße ................... 197Seiteneigenschaften ........ 197Seitenrand ..................... 197Selektor ......................... 133Vorteile ......................... 195zu Tabelle hinzufügen ..... 247

CSS3 .................................... 46CSS-Datei ............................ 45

erstellen ........................ 247CSS-Designer 55,136,197,204CSS-Klassen ....................... 204CSS-Modus ........................ 201CSS-Regel .......... 111,133,194

definieren ...................... 134verwalten ...................... 204

CSS-Stil ...................... 133,194CSS-Transitions ................... 208CSS-Übergänge .... 58,197,208CSSZenGarden ................. 194

D

Dateiabhängige ...................... 103aus Vorlage .................... 106löschen .......................... 175neu ............................... 107umbenennen .................. 175

Dateien-Bedienfeld .............. 79Dateifeld ............................ 295Dateitypen/Editoren ......... 231Dateiverwaltung ................. 171Datenbank ........................... 34defaultfont ........................ 137Denic ................................... 29Design ............................... 131Desktopgröße .................... 321Digitalkamera ............. 214,217Display ............................... 143div-Tag ....................... 317,318Dokumentenfenster ............. 70Domain ................................ 27

frei? ................................ 29

IDN-Domain .................... 28TLD ................................. 29Umlaute .......................... 28

Domainname ....................... 27Download-Link .......... 252,263DreamweaverCC

neu ................................. 54Dreamweaver-Template ...... 104Druckversion ...................... 195Dummy-Link ...................... 260dwt(Dateiendung) ............. 104

E

EigenschaftenHintergrund ................... 208Layout ........................... 208Rahmen ......................... 208Text ............................... 208

Eigenschaften-Bedienfeld ..... 74Eigenschaftsinspektor ........... 74Einchecken ........................ 169Einfügen

Bild ............................... 114Tabelle ................... 118, 236

Einfügen-Bedienfeld ............. 78jQuery Mobile ............... 328

Einrückung ......................... 185HTML ............................ 185

Einstellungen ....................... 80E-Mail

Formularfeld .................. 296E-Mail-Adresse ..................... 33E-Mail-Link ................ 252,260

Betreffzeile .................... 261E-Mail-Verknüpfung ........... 261»Empfehlen«-Link .............. 375Entwurfsansicht ............ 70,180Ereignis .............................. 271

festlegen ....................... 276Erscheinungsbild(CSS) ....... 199Erscheinungsbild(HTML) ... 199Excel .................................. 234

Index

389

F

Facebookeinbinden ........... 375Fadenkreuz ................ 125,255FAQ ................................... 277Feldgruppe ........................ 295Fettschrift .......................... 111FileTransferProtocol .......... 166Firefox ............................... 159Fireworks ........................... 226Flash .................................... 43Flash-Filmintegrieren ......... 383Flash-Player ....................... 383Flash-Plugin ....................... 383FlashSWF .......................... 383Flash-Videos ....................... 368Fld.Rasterlayout .......... 97,314flexiblesLayout .................. 314FließendesRasterlayout 97,314

neues ............................ 315Format ............................... 111

einstellen ......................... 62Formular .................... 283,284

Aktion ........................... 285Beschriftung mit CSS ...... 300Danke-Seite ................... 310Eigenschaften ................ 284Element einfügen ........... 286erstellen ........................ 285gestalten ....................... 298GET ............................... 286Kennwort ...................... 290mit CSS gestalten .... 290, 300mit Tabellen gestalten .... 299Muster .......................... 306Passwort ....................... 292PHP-Skript ..................... 310Platzhalter ..................... 290POST ............................. 286Schaltflächen ................. 293Senden-Schaltfläche ....... 293überprüfen .................... 275Upload .......................... 295validieren ...................... 304Verborgen ...................... 294Versandmethode ............ 286Zurücksetzen .................. 294

Formularbereich ................. 284einrichten ...................... 285

Formulareingabenüber-prüfen ............................ 304

Formularelement ................ 286Aufbau .......................... 286Auswahlliste .................. 291Dateifeld ....................... 295einfügen ........................ 287Feldgruppe .................... 295Kennwortfeld ................. 290Kontrollkästchen ............ 292Optionsschalter .............. 293Schaltfläche ................... 294Text ............................... 289Textbereich .................... 290versteckte Felder ............ 294

FormularfeldDatum .......................... 297E-Mail ........................... 296Farbe ............................ 298Telefon .......................... 297URL .............................. 297Woche .......................... 298Zahl .............................. 297

Foto,Bildformat ................. 216FTP .................................... 253

Einstellungen ................. 165FTP-Benutzerdaten ............. 167FTP-Servereinrichten ......... 166Fußbereich ........................... 97

Design ........................... 154Fußzeilennavigation ........... 126

G

Gameserver .......................... 34GehezuURL ...................... 275Gesamttabelle .................... 238Gestaltunggestalten ........... 135GET .................................... 286GIF .................................... 215GIF-Animation ................... 216Gliederungspunkte ............. 113global ................................. 152

Google ....................... 351,355Bildersuche .................... 353URL anmelden ............... 357

GoogleAdSense ................. 364GoogleAdWords ....... 352,363GoogleAnalytics ........ 352,359

einrichten ...................... 360GoogleChrome .................. 158GoogleEarth ...................... 352Google+einbinden ............ 375Google-Index ..................... 356Google-Konto .................... 361GoogleMail ....................... 352GoogleMaps ..................... 371gradient ............................. 138Groß-/Kleinschreibungbei

Hyperlinksüberprüfen ...... 90gTLD .................................... 29

H

h1 ...................................... 207Hauptbereich ....................... 97

Design ........................... 152Hauptnavigation ................. 122

erstellen ........................ 123Header ................................. 41Head-Tag,Beschreibung ..... 354Helligkeit ........................... 225Hervorhebung,HTML ........ 188Hintergrundbild ................. 197Hintergrundfarbe ....... 197,250

CSS ............................... 152Hintergrundgrafik ............... 220Hintergrundverlauf ............. 138Home ................................ 106Homepage ........... 88,108,163HorizontaleNavigation ....... 143HostEuropeGmbH .............. 33Hotspot ............................. 262Hover-Effekt ...... 150,208,268HTML .................................. 39HTML5 ................................ 43HTML5-Boilerplate ............. 317HTML5-Formularfelder ...... 296

Index

390

HTML5-Formularvali-dierung ........................... 305

HTML5-Validierung .... 304,305HTML-Attribut

align ............................... 41HTML-Dokument ................. 26

prüfen ........................... 165HTML-Entity ................ 41,181HTML-Tag

<br> ............................... 40<em> .............................. 40<form> .......................... 284<h1> ............................... 40<img> ............................. 40in Statuszeile ................... 73<link> ............................. 46<ol> ................................ 40<p> ................................. 40<strong> ......................... 39<table> .................... 40, 239Übersicht ......................... 40<ul> ................................ 40

https .................................. 253Hyperlink ......... 26,41,75,127,

158,252,253absoluter ....................... 255anlegen ......................... 254entfernen ...................... 256externer ........................ 255Farbe ..................... 199, 200innerhalb der Website .... 256interner ......................... 255JavaScript einfügen ........ 267korrigieren ..................... 175leerer ............................ 260löschen .......................... 256Prüfung ........................... 90relativer ........................ 255testen ........................... 163Zustand ......................... 200

Hyperlinks(CSS) ................. 199Hyperlink-Stil ..................... 197HypertextTransferProtocol

(HTTP) .............................. 27

I

ICANN ................................. 29ID ...................................... 287IDN-Domain ........................ 28IDs ..................................... 133Illustrator ........................... 215Imagemap .......................... 262

erstellen ........................ 262img ...................................... 73Impressum ......................... 106Inhaltsbereich ...................... 94Inhaltstrukturieren ............ 183Inline-CSS ............................ 44Inline-Stil ..................... 45,201Innenabstand ..................... 144

CSS ............................... 152Installation ........................... 59InteraktivesMenü .............. 121InternetExplorer ........ 159,161iOS,Formulare ................... 296IP-Adresse .............. 27,28,253IP-Adressraum ...................... 29iPhone ............................... 312iPhoto ................................ 380

J

Java ...................................... 34JavaScript ............... 39,47,266

Alert-Fenster öffnen ....... 267Befehl ........................... 268in Dreamweaver inte -

grieren ....................... 266manuell ......................... 275Rollover-Bild .................. 268Syntax ........................... 268über Verhalten inte-

grieren ....................... 270Verhalten ...................... 266

JavaScript-Validierung 304,307JPEG .................................. 216jQuery ............................... 276jQueryAssets ...................... 280jQueryMobile ............ 323,324

Seite hinzufügen ............ 328

jQuery-Mobile-Projekt ....... 325jQueryUI ..................... 55,276

Accordion ...................... 277Tabs .............................. 280

JSP ....................................... 59Jumbotron ........................... 97

K

Kennwortfelder .................. 290Klassen-Selektor ................. 207Kodierungstyp .................... 286Konfigurationsdatei ............ 342Kontakt .............................. 106Kontaktformular ................. 284Kontrast ............................. 225Kontrollkästchen ................ 292

vorausgewählt ............... 293Kopfbereich ......................... 99

gestalten ....................... 141Kopfzeile ............................ 237KostenloserWebspace ......... 32Kursiv ................................ 111

L

Layouterstellen .......................... 97für Desktopgeräte .......... 321für mobile Geräte ........... 317für Tablet-Geräte ............ 319mit Tabellen ..................... 44

layout.css ........................... 132LeererLink ......................... 260Leerzeichen ................ 182,186

geschütztes .................... 182Leerzeile .................... 111,186line-height ......................... 148LinkR HyperlinkLinkpopularität ................... 355Linux-Server ......................... 34Liste ........................... 113,186

erstellen ........................ 113geordnete ...................... 113

Index

391

Liste(Forts.)ungeordnete .................. 113verschachtelte ................ 187

Listenelement .................... 146Live-Ansicht ................... 66,71Logo .............................. 94,97

einfügen ........................ 127Größe anpassen .............. 128scharf ............................ 127

LokaleInfo ........................... 89LokaleNavigation .............. 122LokalerSite-Ordner ........ 88,89

M

MarkupLanguage ................ 39Mashup ............................. 368Mashup-Sammlung ............ 368max-height ......................... 136Maximalbreite .................... 139MediaQuery .............. 206,314Medienabfrage ........... 206,314Menü ................................. 122

interaktives .................... 121MenüelementealsSchalt-

flächen ........................... 147Menüpunktverlinken ......... 125Metatag ..................... 109,354

Description .................... 354für mobile Geräte ........... 326hinzufügen .................... 354Keywords ...................... 354

min-height ......................... 136MobileApplikationen ........... 57MobileFirst ....................... 317MobilesWeb ............. 311,312MobileWeb-Apps .............. 323MobileWebsite

Charakteristika ............... 323erstellen ........................ 312

Mobilgerätgröße ................ 317Moblogs ............................ 338MySQL ........................... 34,49

N

NativeAppDefinition ...................... 323mit Phonegap ................ 332

Navigation ................... 94,122Fußbereich ..................... 126gestalten mit CSS ........... 142lokale ............................ 122mit Liste erstellen ........... 124mit Schaltflächen ........... 142

Navigationsmenü ................. 97Neuauflösen .............. 116,223neueFunktionen .................. 55NeueSite ............................. 88NeueWebseite .................. 106Nic ....................................... 31Nurverwendete ................. 144

O

Objekt ............................... 270onAbort ............................. 276onClick .............................. 276onDblClick ......................... 276onLoad .............................. 276onMouseDown .................. 276onMouseOut ..................... 276onMouseOver .................... 276onMouseUp ....................... 276Opera ................................ 159Optionsschalter .................. 293Ordnererstellen ................. 175

P

padding ............................. 153Palette ................................. 76Passwortabfrage ................. 290Passwort-Textfeld ............... 292Pattern ............................... 306PDF-Datei .......................... 264Pfadangabe ........................ 255Pflichtfeld .......................... 305

Phlogs ................................ 338PhoneGap .......................... 332Photoshop ......................... 226

aus der Zwischen- ablage ........................ 228

voreinstellen .................. 230Photoshop-Datei

einfügen ........................ 227PHP ................... 34,39,49,72Pixelgrafik .......................... 215PlaceHolder ...................... 290Platzhalter .......................... 218Pluginüberprüfen .............. 275PNG ................................... 217Polyfills .............................. 307Popup-Meldung ................. 275POST ......................... 286,287Primärbrowser ................... 162Programmstart ..................... 60Protokoll ............................ 253Provider ......................... 27,32PSD ................................... 227Punkterstellen ................... 126

R

Randstärke ................. 118,237Ranking .............................. 353Rasteransichtanschalten .... 317Rasterlayout

aus CS6 ......................... 314fließendes ................. 56, 314

Rautezeichen ..................... 133Redesign ............................ 195Registerkarten .................... 280ReguläreAusdrückein

Formularen ..................... 306RelativerLink ..................... 255Rendering-Engine ................. 51respond.min.js ................... 103ResponsivesLayouterstellen

mitAdobeEdgeReflow ............................ 385

ResponsivesWebdesign 87,313Funktionsweise .............. 314

ResponsiveWebseiten ......... 56

Index

392

Retina-Displays .................. 127Rollover-Bild .............. 220,268

vorausladen ................... 269Rollover-Effekt ................... 197RollovererstellenmitCSS-

Übergängen .................... 208RubyonRails ....................... 34

S

Safari .................................. 158Schaltfläche ................ 147,294Schrift ........................ 135,214Schriftart .................... 197,202

für Website festlegen ..... 137Schrifteigenschaften ........... 199Schriftfarbe ................ 197,202Schriftgröße ............... 197,202SecureFTP ......................... 166Seite

bei Vorlagenänderung aktualisieren ............... 107

in neuem Fenster öffnen ................. 256, 271

Seiteneigenschaften ........... 197festlegen ....................... 198

Seiteninhalt ................ 105,106einfügen ........................ 110

Seitenrand ......................... 197Seitentitel .................... 65,109Seitentyp ............................. 62Sekundärbrowser ............... 162Selektor ............. 133,207,301

erstellen ........................ 136Punkt ............................ 133Raute ............................ 133

SenchaTouch ..................... 324Senden-Schaltfläche ........... 293ServerseitigeValidierung .... 304Serververhalten .................... 59Shop .................................. 383Site

aktive .............................. 92anlegen ...................... 61, 88bearbeiten ....................... 90erstellen .......................... 88

Grundeinstellungen .......... 89importieren ..................... 90konfigurieren ................... 88synchronisieren .............. 173Web-URL ........................ 90wechseln ......................... 91

Site-Definition ..................... 89Site-Name ............................ 89Site-Ordner

Entfernt .......................... 88Lokal ............................... 88

Sitevorlagen ....................... 107Smartphone ....................... 312Sonderzeichen ............. 41,181sozialeNetzwerke,ein-

binden ............................ 375Spalte

auswählen ..................... 242einfügen ........................ 120hinzufügen .................... 246löschen .......................... 246

Spaltenbreite ...................... 119Spaltenmenü ...................... 242Spiel .................................. 383Spry ......... 48,55,59,276,304Spry-Menüleiste ................. 123SSL ..................................... 292Startfenster .......................... 60Startseite ............................ 108Startvorlagen ...................... 325Statuszeile ............................ 73STRATOAG .......................... 33StylesheetsR CSSSubdomain .......................... 28Suchmaschine ............ 109,352Suchmaschinenoptimierung 353SVG ................................... 218Synchronisationsein-

stellungen ......................... 81Synchronisieren .................. 176

T

Tabelle ............................... 234an Browserfenster an-

passen ....................... 236

auswählen ..................... 239Barrierefreiheit ............... 238Breite ............................ 241einfügen ................... 78, 118erstellen ................. 117, 235Größe ............................ 236Größe zurücksetzen ........ 241Hintergrundfarbe ........... 244Höhe ............................. 241in Tabelle erstellen ......... 236Kopfzeile ................ 237, 244Linien ............................ 238markieren ...................... 238mit CSS gestalten ........... 247Randstärke .................... 237sortieren ........................ 246Spalte ........................... 120Spalte auswählen ........... 242Spaltenbreiten verändern 119Umbruch ....................... 244Zeile ....................... 120, 236Zeile auswählen ............. 242Zellabstände .................. 237Zellauffüllung ................ 237Zelle ausrichten .............. 244Zelle auswählen ............. 243Zelle markieren .............. 243Zellen gruppieren ........... 244

Tabellenbereich .................. 241Eigenschaften ................ 243

Tabellenbreite .................... 118Tabelleneinstellungen ......... 243Tabellengröße,fest ............. 236Tabellen-ID ........................ 240Tabellen-Klasse ................... 240Tabellenlayout,Nachteile ..... 44Tabellenlinien ..................... 238Tabellenzelle

ausrichten ..................... 244gruppieren ..................... 244markieren ...................... 243

table-cell ............................ 146Tablet-PC ........................... 312Tablet-PC-Größe ................ 319Tablets ................................. 56Tabs-Widget ....................... 280

einfügen ........................ 280Tabulator ............................ 186

Index

393

Tag ....................................... 39Tag<canvas> ........................ 43Tag-Leiste ........................... 242Tag-Selektor ....................... 207Tag<video> ......................... 43Teilen-Ansicht ...................... 72Tel ...................................... 297Template .............................. 94Templates-Ordner .............. 103Text

eingeben .................. 62, 180erstellen ........................ 111

text-align ............................ 148Textbereichformatieren

mitCSS .......................... 201text-decoration .................. 148Texteigenschaften ................. 75Textfeld ...................... 285,289

Breite mit CSS be- stimmen .................... 303

mehrzeiliges ................... 290Passwortfeld .................. 292

Textinhalt ........................... 180TLD ...................................... 29Top-Level-Domain ............... 29Tracking-Code .................... 360Traffic ................................... 33Transfervolumen ................... 33Transparenz ........................ 216Twitter ............................... 374Typekit ................................. 56

U

Überschrift ......................... 112HTML ............................ 183

Überschrift(CSS) ................ 200Überschriftgröße ................ 154Überschrift(HTML-Tag) ........ 40Umbruch

harter ............................ 184weicher ......................... 184

Unicode-Zeichensatz .......... 181Update ................................. 59

URL ................................... 253Aufbau .......................... 253bei Google anmelden ...... 357

V

Vektorformat ...................... 218Vektorgrafik ....................... 215Verborgen .......................... 294Verhalten ................... 109,270

Browserfenster öffnen .... 271einfügen ........................ 271Einstellungen ................. 272Funktionsweise .............. 270neues Fenster ................. 271

Verhalten(Funktion) ............ 47Verknüpfung ...................... 199Verlauf-Bedienfeld ............... 79Versandmethode ................ 286VerschachtelteListe ............ 187Verschlüsselung .................. 292VerstecktesFeld ................. 294Video

einbinden ...................... 368VisuelleHilfsmittel ............. 238VordefinierteBetreffzeile .... 261Voreinstellungen .................. 80VorformatierterAbsatz

HTML ............................ 185Vorlage ................................ 94

anwenden ..................... 129entwerfen ........................ 94erstellen ........................ 101mit bearbeitbaren

Bereichen ................... 101öffnen ........................... 103planen ............................. 96speichern ................ 102, 129Speicherort .................... 103

Vorlagendatei ..................... 104Vorleseprogramm ............... 114Vorschaufunktion ............... 161

W

Web-AppDefinition ...................... 323mit Dreamweaver er-

stellen ........................ 325neue Seite hinzufügen .... 328Seite verlinken ............... 330

Webbrowser ................ 51,158Webhoster ..................... 27,32Weblog ...................... 337,338

mit WordPress er- stellen ........................ 339

Webseite ........................ 26,88aus Vorlage .................... 106bearbeiten ..................... 171einzeln übertragen ......... 171erstellen ........................ 106Größe .............................. 74herunterladen ................ 171mit fließendem Raster-

layout erstellen ........... 315neu ............................... 106speichern ....................... 107

Webserver ..... 27,34,168,169,174,176

Website ................... 26,85,86ändern .......................... 171auswählen .............. 164, 170erstellen mit Hyperlinks .... 61für mobile Geräte ........... 312gestalten ....................... 135in Google eintragen ........ 356prüfen ........................... 164synchronisieren .............. 173testen ........................... 158testen im Browser .......... 163übertragen ...... 168, 170, 171verwalten ............... 166, 175von anderen Websites

verlinken .................... 355Website bei Google

Analytics anmelden ..... 361Webspace ............................ 32

kostenloser ...................... 32Webstandards .................... 195Webstatistik ....................... 360

Index

394

Webtabelle ........................ 234Widget ............................... 276

einfügen ................. 277, 278Word

importieren ................... 189Zwischenablage .............. 190

Word-HTMLoptimieren ..... 189WordPress ................. 338,339

administrieren ................ 344Beiträge verwalten ......... 346Beitrag schreiben ............ 345erweitern mit Plugins ..... 350installieren .................... 340Tellerrand ...................... 345Templates ............... 339, 346Theme installieren .......... 347Themes .......................... 346Themes anpassen ............ 350

WP-Gallery ........................ 350WWW ................................. 27WYSIWYG ........................... 72

X

XHTML(ExtensibleHypertextMarkupLanguage) ............ 42

XML ..................................... 42

Y

YouTubeeinbinden ............ 368YouTube-Videoeinbetten ... 369

Z

Zeichen .............................. 126Zeile

auswählen ..................... 242einfügen bei Tabelle ........ 120

hinzufügen .................... 246löschen .......................... 246

Zeilenwechsel .................... 111Zellabstand ........................ 237Zellauffüllung ..................... 237Zelle

auswählen ..................... 242einfügen ........................ 120

Zellraum ............................ 240Zielregel ............................. 202Zitat ................................... 185Zugänglichkeit .................... 165Zurücksetzen ...................... 294Zuschneiden-Werkzeug ...... 224Zwischenablage .................. 190Zwischenspeicher ................. 90

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne dürfen Sie diese Leseprobe empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Die vorliegende Leseprobe ist in all ihren Teilen urheberrecht-lich geschützt. Alle Nutzungs- und Verwertungsrechte liegen beim Autor und beim Verlag.

Teilen Sie Ihre Leseerfahrung mit uns!

Hussein Morsy arbeitet als Berater, Trainer und Web- entwickler. Zu seinen Kunden gehören nationale und internationale Firmen wie Sales-Lentz Luxemburg, Lufthansa, BASF und T-Systems. Er ist offiziell zertifi-zierter MySQL- und PHP-Entwickler und Spezialist für Dreamweaver.

Hussein Morsy

Adobe Dreamweaver CC 394 Seiten, 2013, 29,90 € ISBN 978-3-8362-2452-9

www.galileodesign.de/3387

Know-how für Kreative.