Sie sind hier
E-Book

Webseiten-Layout mit CSS

Der perfekte Einstieg in Cascading Style Sheets

AutorClemens Gull
VerlagFranzis
Erscheinungsjahr2012
Seitenanzahl312 Seiten
ISBN9783772350092
FormatePUB/PDF
KopierschutzWasserzeichen/DRM
GerätePC/MAC/eReader/Tablet
Preis19,99 EUR
Keine Angst vor CSS! Auch in Zeiten von Joomla! und WordPress sorgen Cascading Style Sheets für unverwechselbares Webseitendesign. Anhand von 23 Praxisbeispielen zeigt der erfahrene Webentwickler, Dozent und Trainer Clemens Gull, wie Sie CSS gezielt einsetzen und welche Designeffekte Sie damit erzielen können. Ob Überschriften, Texte, Navigationselemente oder komplette und gleichzeitig flexible Weblayouts - CSS ist der Schlüssel für effektives Webdesign. Inklusive des neuen Standards CSS 3!

Clemens Gull studierte Informationstechnologie und Systemmanagement. Er arbeitete als Programmierer und Netzwerkadministrator, unter anderem für die Salzburger Sparkasse. Heute leitet er das Webdesign-Unternehmen Byte Brothers, darüber hinaus ist Gull als Dozent für die Fachhochschule Salzburg und andere Institute tätig. Sein Weblog 'Guru 2.0' zählt zu den meistgelesenen deutschsprachigen Blogs zum Thema Internetprogrammierung.

Kaufen Sie hier:

Horizontale Tabs

Leseprobe

3  Eclipse

3.1  Installation der Entwicklungsumgebung

Bis jetzt kamen wir mit einem simplen Texteditor aus. Nun brauchen wir eine funktionierende Entwicklungsumgebung, um mit HTML und CSS arbeiten zu können. Es gibt unzählige Applikationen am Markt, die alle ihre Vor- und Nachteile in der Entwicklung von Software oder auch Websites haben.

Über die letzten Jahre hat sich Eclipse als sehr gute Lösung herausgestellt. Es ist eine kostenlos verfügbare integrierte Entwicklungsumgebung (IDE), die auf Basis der Sprache Java programmiert ist. Da sie durch die verschiedensten Erweiterungen (auch Plug-Ins genannt) angepasst werden kann, ist sie für fast jede Programmieraufgabe geeignet. Durch das Verwenden der plattformübergreifenden Sprache Java ist sie auf jedem Betriebssystem lauffähig, und dadurch ändert sich das Aussehen der IDE auch nicht von System zu System. Zudem sind die Tastenkombinationen für die einzelnen Befehle immer gleich. Da sich Eclipse durch verschiedene Module anpassen lässt, erhalten wir in kürzester Zeit eine komplette Entwicklungsumgebung für HTML und CSS. In späterer Folge können wir sie auch für Sprachen wie JavaScript und PHP benutzen. Wir müssen also nicht zwischen verschiedenen Editoren wechseln.

Einen Nachteil müssen wir aber auch kennen. Da es sich um eine textorientierte Entwicklungsumgebung handelt, lassen sich Websites nicht grafisch erstellen, sondern müssen mit HTML und CSS umgehen können. Dafür integriert die IDE die im System installierten Browser als Vorschaufenster für die erstellten Websites.

Download der Software

Da die meisten Windows-Rechner kein Java installiert haben, müssen wir hier zuerst das aktuelle Java Runtime Environment (JRE) mit der Version 6.14 auf der Website von Sun[1] herunterladen. Das JRE ist eine Software, die uns gestattet, in Java geschriebene Programme auf unserem Rechner auszuführen.

Benutzer von Mac OS X sind bei Java im Vorteil. Da dieses Betriebssystem Java bereits integriert hat, muss nur das Software-Update aufgerufen werden, um die aktuellste Version zu erhalten.

Das nächste Paket, das wir benötigen, ist Eclipse. Dieses finden wir auf der Website der Eclipse Foundation[2]. Ganz am Ende der Website findet sich die Version Eclipse Classic 3.5.0, auch Galileo genannt. Rechts daneben finden wir einen Hyperlink für Windows-Systeme und direkt darunter den Link für das Apple-Betriebssystem.

Um die Oberfläche auf Deutsch zu erhalten, benötigen wir das Babel-Sprachpaket[3] für die Galileo-Version.

Installation für Windows-Systeme

Hier beginnen wir mit der Installation von Java. Dazu rufen wir das Paket zur Installation des JRE mit einem Doppelklick auf. Windows 7 und Vista zeigen vor der eigentlichen Installation noch eine Warnung an, dass die Installationssoftware Änderungen am Betriebssystem vornehmen wird. Diese bestätigen wir mit dem Knopf Ja. Danach wird die Willkommensseite für die Installation von Java angezeigt. Da wir hier den Zielordner für alle drei Windows-Varianten XP, Vista und 7 gleich lassen können, klicken wir auf den Knopf Installieren. Nun dauert es einige Minuten, bis die komplette Installation durchgeführt wird. Am Ende zeigt das Setup-Programm noch den Erfolg der Installation an. Dieses Fenster können wir mit dem Knopf Schließen bestätigen.

Bild 3.1  Java-Setup bei Windows-Systemen

Installieren von Eclipse

Nun können wir mit der Installation von Eclipse fortfahren. Nach dem Entpacken der Installationsdatei erhalten wir ein Verzeichnis Eclipse. Dieses verschieben wir in den Anwendungsordner bei Mac OS X oder in den Programme-Ordner bei den Windows-Systemen. Damit ist die Grundinstallation für die IDE abgeschlossen. Natürlich ist es sinnvoll, dass wir uns unter Windows eine Verknüpfung am Desktop, in der Schnellstartleiste oder bei Apple im Dock ablegen.

Als nächster Schritt folgt die Anpassung der Sprache. Eclipse liegt in der Grundinstallation in englischer Sprache vor. Um eine deutschsprachige Version zu erhalten, entpacken wir jetzt das Babel-Sprachpaket. Dieses enthält eine fast vollständige Übersetzung von Eclipse.

Nach dem Entpacken erhalten wir ein Verzeichnis eclipse/ mit zwei Unterordnern. Diese beiden Ordner müssen jetzt verschoben werden. Dazu öffnen wir den Ordner, in dem Eclipse installiert ist. Er findet sich unter Windows im Programme-Verzeichnis. Dort existiert ein Unterverzeichnis dropins/, in das wir den Inhalt – die beiden Verzeichnisse features/ und plugins/ – des Sprachpaketes verschieben.

Nun können wir mit einem Doppelklick auf das Programmsymbol von Eclipse die Entwicklungsumgebung starten.

Bild 3.2  Startfenster von Eclipse

Kurz danach sehen wir das Fenster für den Arbeitsbereich[4] vor uns. Hier werden wir nach dem Pfad zum Arbeitsbereich gefragt. Dies ist das Verzeichnis, in dem alle Dateien gespeichert werden. Idealerweise legen wir ihn bei Apple-Systemen auf das Verzeichnis Websites[5] aus der Seitenleiste oder auf ein eigenes Verzeichnis /eclipse auf dem Desktop bzw. auf einem USB-Stick.

Bild 3.3  Workspace-Launcher von Eclipse

Dazu klicken wir auf den Knopf Browse, wählen danach aus der Seitenleiste Websites aus und bestätigen dies mit dem Knopf Open. Wenn wir die Option Diesen Wert als Standardwert verwenden und nicht erneut anfragen aktivieren, werden wir beim nächsten Start nicht mehr nach dem Workspace gefragt. Nun klicken wir noch auf Ok und Eclipse startet endgültig.

Installieren der Plug-Ins für Eclipse

Da Eclipse in der Grundinstallation eine Entwicklungsumgebung für die Programmiersprache Java ist, müssen wir sie jetzt so anpassen, dass wir eine IDE für die Webentwicklung erhalten.

Aptana Studio installieren

Als erstes installieren wir das Plug-In »Aptana Studio« in der Version 1.5. Auch diese Software ist kostenlos verfügbar, sollte aber über eine Internetverbindung direkt installiert werden.

Dazu öffnen wir das Menü Hilfe und klicken auf den Befehl Install New Software…. In dem nächsten Fenster müssen wir im Datenfeld Work with: die URL http://update.aptana.com/install/studio eintragen. Mit dem Knopf Add… fügen wir die Internetadresse zur Liste der verfügbaren Software hinzu.

Bild 3.4  Eintragen der Internetadresse von Aptana

Nun müssen wir für die eingetragene Adresse noch einen Namen im Feld Name: eingeben. Damit wir das Plug-In später wieder identifizieren können, verwenden wir Aptana Studio Plug-In und bestätigen dies mit dem Knopf Ok.

Bild 3.5  Festlegen des Namens für das neue Plug-In

Nun verbindet sich Eclipse mit dem Internet und sucht unter der angegebenen URL nach verfügbarer Software. Sobald die Daten verfügbar sind, zeigt das Installationsprogramm das Aptana-Plug-In an. In der Liste aktivieren wir das Kontrollkästchen vor dem Eintrag Aptana Studio und klicken auf den Knopf Next.

Bild 3.6  Aktivieren der zu installierenden Software

Jetzt wird ein Fenster mit zusammenfassenden Informationen zur Installation angezeigt, das wir mit dem Knopf Next bestätigen. Nun zeigt uns Eclipse die Lizenzvereinbarung für das Plug-In. Dieses bestätigen wir, indem wir die Option I accept the terms of the license agreements aktivieren und auf den Knopf Finish klicken.

Bild 3.7  Lizenzvereinbarung für Aptana Studio anerkennen

Nun wird die Installation durchgeführt. Das sehen wir an dem Fenster, das den Verlauf anzeigt. Wir lassen es im Vordergrund, damit wir erkennen können, wann die Installation abgeschlossen ist. Sobald dies geschehen ist, meldet uns ein Hinweisfenster, dass Eclipse neu gestartet werden muss. Dieses bestätigen wir mit dem Knopf Yes.

Bild 3.8  Eclipse neu starten

Nachdem Eclipse wieder gestartet ist, werden wir auf Windows-Rechnern wegen der Zugriffe der Software auf das Gesamtsystem gewarnt. Einerseits greift die Windows-Firewall ein, um den Internetzugriff zu regeln. Wir erlauben ihn natürlich, indem wir auf Zugriff zulassen bzw. Nicht mehr blocken klicken. Bei Windows 7 und Vista...

Blick ins Buch

Weitere E-Books zum Thema: Internet - Intranet - Webdesign - Security

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

TCP/IP-Praxis

E-Book TCP/IP-Praxis
Dienste, Sicherheit, Troubleshooting Format: PDF

Netzwerke modernen Standards verlangen weniger nach Rezepten für Neu - Design als vielmehr nach Wegen, Maßnahmen zur Integration in eine bestehende Infrastruktur aufzuzeigen. Diesem Aspekt trägt TCP/…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

Weitere Zeitschriften

BEHINDERTEPÄDAGOGIK

BEHINDERTEPÄDAGOGIK

Für diese Fachzeitschrift arbeiten namhafte Persönlichkeiten aus den verschiedenen Fotschungs-, Lehr- und Praxisbereichen zusammen. Zu ihren Aufgaben gehören Prävention, Früherkennung, ...

CE-Markt

CE-Markt

CE-Markt ist Pflichtlektüre in der Unterhaltungselektronik-Branche. Die Vermarktung von Home und Mobile Electronics mit den besten Verkaufsargumenten und Verkaufsstrategien gehören ebenso zum ...

crescendo

crescendo

Die Zeitschrift für Blas- und Spielleutemusik in NRW - Informationen aus dem Volksmusikerbund NRW - Berichte aus 23 Kreisverbänden mit über 1000 Blasorchestern, Spielmanns- und Fanfarenzügen - ...

Das Hauseigentum

Das Hauseigentum

Das Hauseigentum. Organ des Landesverbandes Haus & Grund Brandenburg. Speziell für die neuen Bundesländer, mit regionalem Schwerpunkt Brandenburg. Systematische Grundlagenvermittlung, viele ...

Deutsche Hockey Zeitung

Deutsche Hockey Zeitung

Informiert über das nationale und internationale Hockey. Die Deutsche Hockeyzeitung ist Ihr kompetenter Partner für Ihren Auftritt im Hockeymarkt. Sie ist die einzige bundesweite Hockeyzeitung ...

VideoMarkt

VideoMarkt

VideoMarkt – besser unterhalten. VideoMarkt deckt die gesamte Videobranche ab: Videoverkauf, Videoverleih und digitale Distribution. Das komplette Serviceangebot von VideoMarkt unterstützt die ...

FileMaker Magazin

FileMaker Magazin

Das unabhängige Magazin für Anwender und Entwickler, die mit dem Datenbankprogramm Claris FileMaker Pro arbeiten. In jeder Ausgabe finden Sie von kompletten Lösungsschritten bis zu ...