Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
1 Einleitung
2 Projektablauf für die Buchwebsite
3 Programmgrundlagen
4 Dreamweaver erweitern
5 Eine Site erstellen
6 Grundlegende Dokumenteinstellungen
7 Tabellen in Dreamweaver
8 Bilder im Web
9 Framesets
10 Aktionen
11 Die Zeitleiste
12 CSS in Dreamweaver
13 Ebenen
14 Hyperlinks
15 Vorlagen und Bibliotheken
16 Formulare
17 Quelltext de Luxe
18 Dreamweaver und Flash
19 Office-Daten einfügen
20 Dynamische Websites – eine Einführung
21 Einführung in PHP
22 Lokalen Webserver installieren
23 Dynamische Sites in Dreamweaver einrichten
24 MySQL-Grundlagen
25 Datenbanken mit Dreamweaver anbinden
26 PHP und Dreamweaver
27 Datenbanken abfragen
28 Daten einfügen und dynamische Formulare
29 Datensätze bearbeiten
30 Benutzer authentifizieren und Zugriffsrechte festlegen
31 Fortgeschrittene Techniken
32 Dreamweaver 8 und XML
33 Menüs für dynamische Verhalten
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Dreamweaver 8 von Richard Beer, Susann Gailus
Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
Buch: Dreamweaver 8

Dreamweaver 8
mit CD
639 S., 39,90 Euro
Rheinwerk Design
ISBN 978-3-89842-739-5
gp 12 CSS in Dreamweaver
  gp 12.1 Ein wenig Theorie zum Einstieg
  gp 12.2 CSS-Voreinstellungen
  gp 12.3 Neue CSS-Werkzeuge auf einen Blick
    gp 12.3.1 Medientypen
    gp 12.3.2 Layout-Hilfsmittel
  gp 12.4 Vorgehensweise und Regeln
  gp 12.5 Arten von CSS-Stilen
    gp 12.5.1 Interne CSS-Stile
    gp 12.5.2 Externe CSS-Stile
    gp 12.5.3 CSS-Syntax
  gp 12.6 Selektor-Typen
    gp 12.6.1 Klassen-Selektoren
    gp 12.6.2 Tag-Selektoren
    gp 12.6.3 Kontext-Selektoren
    gp 12.6.4 ID-Selektoren
  gp 12.7 Erstellen und Bearbeiten von CSS–Stilen
    gp 12.7.1 Das CSS-Bedienfeld
    gp 12.7.2 Neue CSS-Regeln erstellen
    gp 12.7.3 CSS-Regeln bearbeiten
    gp 12.7.4 CSS-Regel für Texte
    gp 12.7.5 Zuweisen von CSS im Eigenschafteninspektor
    gp 12.7.6 Verknüpfen externer CSS-Dateien
    gp 12.7.7 CSS-Regeln für unterschiedliche Ausgabemedien
  gp 12.8 CSS-P-Layout ohne Tabellen
    gp 12.8.1 CSS-P für barrierefreies Webdesign
    gp 12.8.2 Das CSS-Boxmodell
    gp 12.8.3 CSS-Stile und Div-Elemente
  gp 12.9 Besondere CSS-Anwendungen
    gp 12.9.1 Browserleisten mit CSS-Stilen verändern
    gp 12.9.2 Verschiedene CSS-Stile anbieten


Rheinwerk Computing

12.8 CSS-P-Layout ohne Tabellen  downtop

Mit den Möglichkeiten von CSS 2.0, HTML-Elemente beliebig im Layout zu platzieren, steigen die gestalterischen und programmiertechnischen Möglichkeiten bei der Website-Erstellung deutlich.

Mit CSS-P ist eine vollständige Trennung von Layout und Inhalt realisierbar. Dreamweaver 8 ermöglicht – dank der neuen CSS-Renderengine – ein wesentlich einfacheres Arbeiten mit dieser Layoutmethode als je zuvor.

Exaktes Layouten | Einige Basics sind erforderlich, um ohne Frustration gute Arbeitsergebnisse zu erzielen: Die Vorgehensweise beim Arbeiten mit CSS-P unterscheidet sich vom klassischen Tabellenlayout erheblich. Wichtig ist, dass Sie bereits im Vorfeld genau wissen, wie Ihre fertige Website aussehen soll. Das Layout können Sie wie gewohnt vorher in Photoshop anlegen. Beim klassischen Tabellenlayout müssen Sie sich im Allgemeinen nicht um die exakten Abmessungen einzelner Bereiche und Abstände kümmern, da sich diese aus den einzelnen Grafiken ergeben und später einfach übernommen werden.

Bei CSS-P verfügen Sie oft nicht über Grafiken, sondern arbeiten mit Browserfarben oder 1 x 1 Pixel-Grafiken, um Farben zu definieren. Daher ist eine exakte Bemaßung des Entwurfs sehr wichtig. Nur so wissen Sie, welche Positionierungen angelegt werden müssen.

Eine große Hilfe ist in diesem Fall das Arbeiten mit einem Tracing-Bild.

Kombination mit Tabellen | Selbstverständlich muss ein Layout nicht ausschließlich mit CSS-P aufgebaut werden. Häufiger anzutreffen ist eine Mischform zwischen klassischem Tabellenlayout und CSS-P-Layout. Besonders beliebt ist die Positionierung von Navigationselementen mit CSS-P.

Einsatz von JavaScript | Da sich CSS-P Elemente über JavaScript ansprechen lassen, können diese ein- bzw. ausgeblendet und in ihrer Position verändert werden. Hierzu werden die Werte im CSS-Stil für einen bestimmten Parameter nicht »fest« codiert, sondern zur Laufzeit mit JavaScript oder anderen Skriptsprachen generiert. An dieser Stelle verlassen wir allerdings CSS-P und nähern uns bereits DHTML.

Fehlerhafte Darstellung | Leider rühren die häufigsten Kompatibilitätsprobleme vieler Skripte dann auch von den verwendeten CSS-Stilen her. Generell – auch wenn es schön aussieht – muss man sich jedoch beim Einsatz solcher Navigationen fragen, ob es zu verkraften ist, dass ein Teil der User fehlerhafte oder gar keine Navigationen sieht. Bei einer verkaufsorientierten Website für ein sehr breites Publikum wird man daher sicherlich intensiv über den Einsatz einer DHTML oder CSS-P-Navigation nachdenken müssen.


Rheinwerk Computing

12.8.1 CSS-P für barrierefreies Webdesign  downtop

Die Positionierung von Layoutelementen mit CSS hat gegenüber dem klassischen Tabellenlayout entscheidende Vorteile beim barrierefreien Webdesign, das für diverse Angebote der öffentlichen Hand seit Juli 2002 in der Verordnung für barrierefreie Informationstechnik (BITV) gefordert wird.

Wird CSS-P zusammen mit dem <p>-Tag genutzt, zeigt der Browser oder das Bildschirmlesegerät (wie auch immer dieses geartet ist) bei fehlender CSS-Fähigkeit einen durch den Absatz formatierten Fließtext an. Der Inhalt wird in diesem Fall wie in einem Browser der ersten Generation dargestellt. Ein gestalterisches Highlight ist dies sicherlich nicht, erleichtert aber die Ausgabe für diverse Bildschirmlesegeräte oder als Brailleschrift enorm.

Hierbei wird der Lesefluss dieser Geräte nicht durch Tabellen o. Ä. gestört. Setzen Sie zusätzlich die Navigation in Absätzen am Anfang des Dokumentes – und Ihr Dokument ist auf allen Geräten dieser Welt darstell- und bedienbar.


Rheinwerk Computing

12.8.2 Das CSS-Boxmodell  downtop

Das CSS-Boxmodell ist die Grundlage der Positionierung mit CSS. Welche Auswirkungen die einzelnen Parameter haben, sehen Sie in den folgenden Abbildungen.

Die Positionierungen für das in Abbildung 12.15 dargestellte CSS-Boxmodell sehen Sie in Abbildung 12.16 im CSS-Bedienfeld. Die Nummern in der oberen Abbildung entsprechen den Einstellungen in der unteren.

Abbildung 12.14 CSS-Boxmodell

Abbildung 12.15 Einstellungen für das Boxmodell

DOC-Type immer angeben | Wenn Sie mit den Layoutmöglichkeiten von CSS-P arbeiten, sollten Sie unbedingt einen strikten DOC-Type angeben, damit die Browser gezwungen sind, auf Eigenheiten zu verzichten und die Darstellung gemäß den Spezifikationen vorzunehmen. Ohne DOC-Type stellen Firefox und Internet Explorer das Boxmodell völlig unterschiedlich dar.

Es würde den Rahmen des Buches sprengen, wenn wir auf alle Einzelheiten dieses Modells und von CSS eingingen. Wir möchten Ihnen an dieser Stelle das Buch »CSS-Praxis« von Kai Laborenz, erschienen bei Galileo Press (ISBN 3 – 89842 – 577 – 0), nahe legen. In diesem Buch finden Sie alle Informationen und unzählige Tricks und Kniffe sowie Browserhacks.

Einige weitere Möglichkeiten finden Sie auch in diesem Buch, im Kapitel 13 über Ebenen.


Rheinwerk Computing

12.8.3 CSS-Stile und Div-Elemente  toptop

Div-Elemente sind so genannte Blockebenen-Elemente. Diese umschließen ganze Bereiche innerhalb von HTML-Dokumenten. Seine eigentliche Bedeutung erhält das Div-Element erst durch die Eigenschaften, die ihm der Programmierer zuweist. Besonders wichtig wird dies später bei dynamischen Websites. Mit einem Div-Element kann man ganze Blöcke in einem Dokument umschließen, ohne die späteren Inhalte zu kennen, und diesem Block ein Format zuweisen. Abbildung 12.18 zeigt ein einfaches mit Div-Elementen aufgebautes HTML-Dokument.

Abbildung 12.16 DIV-Elemente ohne CSS

Die Inhalte der Div-Elemente können aus einem CMS (Content Management System) generiert sein oder auf beliebigen anderen dynamischen Wegen in das Dokument gelangen.

Formatierung von Div-Elementen | Div-Elemente werden mit CSS formatiert und können so beliebige Darstellungseigenschaften annehmen. Für die Formatierungen werden folgende CSS-Regeln angelegt:

Listing 12.9 CSS-Regeln für ein CSS-P-Layout

<style type="text/css">
<!--
.links {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 line-height: 16px;
}
.rechts {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-style: italic;
 line-height: 16px;
}
.mitte {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 line-height: 16px;
}
.headline {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 50px;
 font-style: italic;
 font-weight: bold;
 color: #333333;
}
#teaser {
 position:absolute;
 left:0px;
 top:0px;
 width:740px;
 height:90px;
 z-index:1;
 background-color: #FFCC00;
 padding: 5px;
}
#spalte_links {
 position:absolute;
 left:0px;
 top:110px;
 width:150px;
 height:400px;
 z-index:2;
 background-color: #FFFFCC;
 padding: 10px;
}
#spalte_mitte {
 position:absolute;
 left:180px;
 top:110px;
 width:380px;
 height:400px;
 z-index:3;
 background-color: #CCCCCC;
 padding: 10px;
}
#spalte_rechts {
 position:absolute;
 left:590px;
 top:110px;
 width:140px;
 height:400px;
 z-index:4;
 background-color: #FFCC00;
 padding: 10px;
}
body {
 background-color: #CC0000;
 margin-left: 0px;
 margin-top: 0px;
}
-->
</style>

Im Anschluss daran weisen wir die IDs und die Klassen den jeweiligen Elementen zu. Wie Sie in Abbildung 12.19 sehen, wird das Layout vollständig mit CSS aufgebaut, ohne Eingriff in die Dokumentinhalte.

Abbildung 12.17 Das fertige Layout mit den zugewiesenen CSS-Regeln



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Dreamweaver CC






 Adobe
 Dreamweaver CC


Zum Rheinwerk-Shop: Adobe Dreamweaver CC Einstieg






 Adobe Dreamweaver
 CC Einstieg


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern