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 6 Grundlegende Dokumenteinstellungen
  gp 6.1 Seiteneigenschaften festlegen
  gp 6.2 Seiteneigenschaften festlegen ohne CSS
  gp 6.3 Seiteneigenschaften festlegen mit CSS
    gp 6.3.1 Verknüpfungen
    gp 6.3.2 Titel/Kodierung
    gp 6.3.3 Tracing-Bild – warum und wann?
    gp 6.3.4 Metaangaben
    gp 6.3.5 Layouttricks mit Hintergrundbildern


Rheinwerk Computing

6.3 Seiteneigenschaften festlegen mit CSS  downtop

Wenn Sie die Voreinstellung immer CSS verwenden aktivieren, sieht das Fenster für die Seiteneigenschaften etwas anders aus. Die eingestellten Eigenschaften werden dann in einem CSS-Stil im Head des Dokuments abgelegt.

Abbildung 6.2 Fenster zum Einstellen der Seiteneigenschaften mit CSS

Listing 6.2 CSS-Stil mit Seiteneinstellungen

<style type="text/css">
<!--
body {
     background-image:  url(pics/ACBC3C.gif);
     background-color: #ABBC40;
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
}
-->
</style>

Anpassungen für ältere Browser | Leider unterstützen ältere Browser (Netscape 4x) diese Art der Seiteneinstellung nicht und würden mit einer nicht definierten Randbreite reagieren. Um dies zu vermeiden, können Sie die Attribute des <body>-Tags von Hand hinzufügen (Listing 6.1) oder diese im Tag eingeben. Öffnen Sie dazu die Bedienfeldgruppe TAG und wählen Sie Attribute aus. Wenn Sie jetzt in das Dokument klicken, sehen Sie die möglichen Attribute des <body> im Fenster angezeigt und können diese auf 0 stellen.

Abbildung 6.3 <body>-Attribute im Tag-Inspektor


Rheinwerk Computing

6.3.1 Verknüpfungen & Überschriften  downtop

Sie können hier bereits Kontext-Selektoren für Verknüpfungen anlegen. Diese werden ebenfalls in einem CSS im Head des Dokuments abgelegt. Dasselbe gilt für Absatzformate. Näheres zu Kontext-Selektoren finden Sie im Kapitel 12 über CSS-Stile ab Seite 196.

Abbildung 6.4 Einstellen von Kontext-Selektoren für Verknüpfungen

Abbildung 6.5 Absatzformatierungen über CSS in den Seiteneigenschaften

CSS exportieren | Wenn Sie, wie wir vorschlagen, externe CSS-Stile verwenden, können Sie diese nach dem Anlegen des ersten Dokuments exportieren und somit gleich die externe Datei erstellen, auf die alle weiteren Dokumente zugreifen können. Sie finden den entsprechenden Befehl unter Datei • Exportieren • CSS Stile…


Rheinwerk Computing

6.3.2 Titel/Kodierung  downtop

Das Internet ist international. Trotz allem werden es in erster Linie Besucher aus Ihrem »Kulturkreis« sein, die auf Ihre Seiten zugreifen. Browser und Betriebsysteme unterstützen verschiedene Zeichensätze. Vielleicht haben Sie einmal versucht, auf eine japanische Seite zuzugreifen. Üblicherweise bietet Ihnen dann der Browser einen Zeichensatz zum Download an.

Abbildung 6.6 Titel und Zeichensatz

Zeichensatz angeben | Der Browser kann nur wissen, welchen Zeichensatz er benötigt, wenn ihm das eindeutig mitgeteilt wird. Aus diesem Grund sollten Sie immer einen bestimmten Zeichensatz vorgeben. Im mitteleuropäischen Raum ist dies der Zeichensatz ISO-8859 – 1 (westeuropäisch Latin 1). Er ist bei der deutschen Dreamweaver-Version auch als Standard definiert.

In unserem Beispiel ist die Kodierung des Dokuments auf HTML 4.01 Transitional eingestellt. Mit der Kodierung legen Sie fest, ob und wie sich ein Browser bei der Interpretierung des Dokuments verhalten soll. Die Kodierung Transitional erlaubt etwas mehr als Strict.

Vergabe eines Titels | Geben Sie Ihren Seiten immer einen aussagekräftigen Titel. Nichts ist peinlicher, als Kundenseiten in den Suchmaschinen mit der Bezeichnung »Unbenanntes Dokument« zu finden. Für die Suchmaschinen ist das zudem ein wichtiges Kriterium, um die Seiten zu indizieren. Achten Sie möglichst auch darauf, nicht für jede Unterseite denselben Titel zu verwenden. Dennoch ist es sinnvoll, bei der ersten Seite bereits einen Titel anzugeben. Sie können diesen dann immer noch verändern, aber nicht mehr vergessen.


Rheinwerk Computing

6.3.3 Tracing-Bild – warum und wann?  downtop

Das Tracing-Bild ist eine Vorlage im Hintergrund des Dokuments, um auf ihm Tabellen, Layer usw. zu platzieren. Dieses Bild wird im Browser nicht dargestellt. Wir selbst haben dieses Feature in der Praxis bislang kaum genutzt. Wenn Sie Seiten erstellen wollen oder müssen, die sich beispielsweise am Layout von Printmedien ausrichten, kann es durchaus sinnvoll sein, dies einzusetzen.

Abbildung 6.7 Tracing-Bild einfügen


Rheinwerk Computing

6.3.4 Metaangaben  downtop

Metaangaben für Suchmaschinen gehören ebenfalls zu den grundlegenden Seiteneigenschaften. Es ist sinnvoll, diese Angaben bereits beim Anlegen des Grundlayouts einzugeben. Sie haben die Metaangaben dann auf allen weiteren, aus dem ersten Dokument erstellten Seiten gleich zur Verfügung und können diese gegebenenfalls modifizieren.


Infos im Web
Eine sehr gute Einführung in die Suchmaschinen-Thematik finden Sie unter http://www.webmasterplan.de.

Sie können einige Metaangaben in Dreamweaver direkt eingeben. Uns ist allerdings nicht ganz klar, nach welchen Kriterien Macromedia die Head-Tags integriert hat. Nur zwei von ihnen sind für uns wirklich relevant und andere Wichtige erscheinen gar nicht erst. Ein vollständiger und für Suchmaschinen ausreichender Satz Metaangaben sieht folgendermaßen aus:

Listing 6.3 Vollständiger Satz an Metaangaben

<title>Ihr Titel</title>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859–1">
<meta name="robots"content="index">
<meta name="robots" content="follow">
<meta name="language" content="Deutsch">
<meta name="keywords" content="Ihre, Suchbegriffe, durch, Komma, getrennt">
<meta name="description" content="Eine Beschreibung der Seite">
<meta name="distribution"content="global">
<meta name="robots"content="all">
<meta name="revisit-after" content="10 days">

Dublin-Core | Es gibt noch eine Reihe Metaangaben mehr. Für die allermeisten Fälle sollten diese jedoch ausreichen. Falls Sie für wissenschaftliche Publikationen eine Website erstellen oder generell im wissenschaftlichen Bereich arbeiten, legen wir Ihnen nahe, sich mit Metaangaben nach Dublin-Core zu befassen. Dies ist ein Standard, um wissenschaftliche Publikationen in einem ähnlichen Sinne wie ISBN-Nummern bei Büchern zu erfassen und zu indizieren.


Rheinwerk Computing

6.3.5 Layouttricks mit Hintergrundbildern  toptop

Wie bereits beschrieben, werden im Browser als Hintergrund definierte Grafiken gekachelt. Dies kann man sich für Layouts zu Nutze machen. Es müssen nicht immer Tabellen oder aufwändige Framesets sein, um bestimmte Effekte zu erzielen. Vieles kann oft bereits durch geschickte Hintergrundgrafiken erreicht werden. In Abbildung 6.8 bis Abbildung 6.10 wurden die jeweiligen Grafiken zum besseren Verständnis etwas hervorgehoben.

Abbildung 6.8 Durchlaufender Balken links

Abbildung 6.9 Durchlaufender Balken oben

Abbildung 6.10 Durchlaufender Balken in der Bildschirmmitte

Schritt für Schritt: Dokumenteinstellungen für die Buchwebsite

Abbildung

1 Vorlage entwickeln

Erstellen Sie in der Siteverwaltung ein neues Dokument mit dem Namen dummy.htm. Dieses Dokument dient uns zum Anlegen der Tabellen und aller gleich bleibenden Layoutelemente. Aus diesem Dokument werden alle Folgedokumente abgeleitet.

2 Seiteneigenschaften festlegen

Legen Sie die Seiteneigenschaften wie in den Abbildungen gezeigt an. Wir haben uns für eine XHTML 1.0-Kodierung entschieden. Sie können gern auch eine andere verwenden.

3 Seitenränder einstellen

Öffnen Sie das Bedienfeld Tag und tragen Sie die Seitenränder für ältere Browser als HTML-Stil ein. Auch diese Eintragung müssen Sie für die Funktion der Site nicht zwingend anlegen.



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