In meiner Praktikumszeit erhielt ich die Möglichkeit neben der eigentlichen Tätigkeit, dem digitalisieren von Büchern und anschliessenden Drucken, Schneiden und Binden auch die Aufbereitung der Webseite des Verlages. Es gab einige Designtechnische Erneuerungen sowie die vereinfachung bei der Druckausgabe. Auch das künftige erstellen des Halbjahreskataloges für Buchhandlungen und den Vertrieb, sollte nahezu vollständig aus der [...]
die komplette Seite wird erst statisch erzeugt
Aufbau und Layout
Formatierung
CSS Stilregeln definieren
CSS Datei zuweisen
Stilregeln anwenden
Bilder einfügenEmpfehlung: spätere dynamische Inhalte kennzeichnen (DummyBild, Kommentarzeilen)
HTML Kommentare: <!– Hinweistext –>
PHP Kommentare: /* Hinweistext */
dynamische Inhalte durch PHP ersetzen
Beispiel:
<td><?php echo($variable); ?></td>
<?php echo(’<td>’.$variable.‘</td>; ?>
<?php echo(‘<td bgcolor=”‘.$farbe.‘“>Inhalt</td>‘);
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Ausgabe Standard HTML
HTML, Link, Besuchter Link, Aktiven Link
standardlink = blau
standard besuchter Link, aktiver Link = weinrot,lila
weitere Ausgaben mit CSS Stile möglich
mehr Möglichkeiten als Standard HTML
Mausberührung möglich
Anwendung (Selektor)
a:zustand
a:link
a:selektor
a:hover
a:active
Anwendung (Block)
Hintergrund+Kasten
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Das heutige aktuelle Verfahren ist das Boxmodell (heute nur noch Box, früher Tabellen)
Box Modell
<div> = Absatz Tag
Eigenschaftszuweisung (Breite, Höhe, Hintergrund, Positionierung oder Abstände durch CSS Stile)
<div id=”name”>Inhalt</div>
#name{Eigenschaften}
Boxen in Dreamweaver
<div> Box,Ebenen, Layer, CSS, AP Elemente (Bedienfelder und Verwaltung der Boxen)
Varianten zur Erzeugung von Boxen
In-Design Variante - zeichnen
- Box wird gezeichnet die anschließend benutzt wird (Rahmen wird [...]
unterschiedliche CSS Dateien anlegen
Datei mit Inhalt festlegen
Strukturierung vornehmen
Inhaltsdatei mit CSS Datei verknüpfen
<link href=”datei.css” … medium=”screen”>
in Dreamweaver:
Ansicht > Symbolleisten > Stilwiedergabe
auf der Symbolleiste das entsprechende Gerät auswählen
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Stilregel verwalten
Anlegen einer Stilregel
Stilregel aus dem Dokument exportieren
Dokument zur Vorbereitung nutzen
Stile testen und danach exportieren
Stile im CSS Bedienfeld auswählen
Optionsmenü > CSS Stil verschieben >
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Klassen = Stil muß zugewiesen werden. Erscheint im Fenster Stil unter Eigenschaften
.hinweis{}
HTML Tag = Stil wird automatisch angewendet wenn z.B. <h1> auftaucht. Erscheint nicht unter Stil bei Eigenschaften
h1{}
Erweitert
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Anlegen einer neuen Stildefinition mittels CSS in Dreamweaver
Neue CSS Regel - Symbol anklicken
im Bedienfeld > Optionsmenü > Neu…
Menüleiste > Text > CSS Stile > Neu >
Assistenten für Stilregeleigenschaften
Typen der Regel (Klassen, HTML-Tag, ID, #, Selector, Pseudoklasse)
Speicherort der Stile
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Anzeige im Entwurf wie HTML Text
Stil wird angelegt: innerhalb des Textes
<span class=”stil1″>Text</span>
<head><style type=”text/css”> .stil1{format} </head>
Stil umbenennnen
Eigenschaftsleiste: stil umbenennen
gegebenfalls Stil wiederverwenden!
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Vorteile:
in Containern arbeiten
Position durch Umrandung nicht notwendig
<div id=”Rahmen”>
<div id=”kopf></div>
<div id=”inhalt”></div>
</div>
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
in der HTML Datei werden Tabellen mit einer Box versehen
Box Model
<div id=”Bezeichnung”></div> (id=”oben”, id=”links”, id=”unten”, id=”inhalt”, id=”unten”,
in der externen CSS oder im Kopf wird eine Raute gesetzt
#Bezeichnung { font-family:arial; }
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
HTML Tags nutzen:
alle, die bekannt sind (p,h1,table, a)
automatisch beim Einsatz - alle HTML Tags mit einem neuen Look versehen
HTML Tag { Formate;} im Beispiel: p {font-family: Arial}
eigene “Klassen” definieren
eigene Bezeichner verwendbar, MengenText
Stelle an der die Formatierung definiert wird - Klassen müssen zugewiesen werden (im Dokumentkopf oder in externer css Datei )
Punkt muß vorher [...]
Gallery News
Acrobat
Audio/Video
BWL
Digitalmedien
Downloads
Dreamweaver
Druck
EDV
Excel
Flash
Gestaltung
Illustrator
In Design
Integration
Klassenprojekt
Med.Management
Photoshop
Proj.Management
Tips & Tricks
Typografie
VWL
Wirtschaftrecht
Word
Stephan Kahmann on 
