Dreamweaver Mini-Tutorials

**Tobias** · 01.02.2006 15:49

Dies ist der Start einer kleinen Sammlung von Mini-Tutorials, die den Arbeitsalltag mit Dreamweaver ein wenig erleichtern sollen.

Jeder der mitmachen möchte, ist natürlich gerne dazu eingeladen.

Falls Fragen zu den Tutorials bestehen, bitte seperat ein neues Thema erstellen, um die Übersichtlichkeit ein wenig zu wahren.

**Tobias** · 01.02.2006 16:16

Nehmen wir einmal an, wir haben Fragmente eines Quellcodes, den wir immer wieder benötigen. Innerhalb eines Projekts könnte man sicherlich auch mit der Bibliothek arbeiten, aber leider beschränkt sich der Zugriff auf die Bibliothek immer nur auf das aktuelle Projekt in der Site-Verwaltung.

Das schreit eigentlich förmlich nach einer der praktischsten Dreamweaver Goodies, die Macromedia in den letzten Jahren uns Anwendern spendiert hat: Codefragmente

Als Beispiel haben wir ein Startdatei mit XHTML Transitional 1.0 Doctype und Meta-Angaben:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="Titel"/>
<meta name="keywords" content="Keywords, was auch immer"/>
<meta name="audience" content="All"/>
<meta name="author" content="Autor"/>
<meta name="publisher" content="Herausgeber"/>
<meta name="copyright" content="Urheberrecht"/>
<meta name="Robots" content="index,follow"/>
<meta name="Language" content="Deutsch"/>
<meta name="revisit-after" content="7 Days, oder was auch immer"/>
<meta name="Content-Language" content="de"/>

<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<!-- Hier gehts los! -->
</body>
</html>

Um uns das Leben ein wenig zu erleichtern, könnten wir nun diesen Quelltext in die Zwischenablage kopieren und damit ein frisches HTML Dokument überschreiben.

Im nächsten Schritt markieren wir den gesamten Quellcode und wählen über das Menü Fenster die Codefragmente aus (Shift+F9).
Im Fenster Codefragmente wählen wir dann das Symbol für Neues Codefragment aus.
Der Quelltext wurde bereits unter Einfügen vor eingesetzt, man braucht also nur noch ein Namen und eine Beschreibung eingeben und den Button Block einfügen auswählen. Als vorschautyp empfiehlt sich Code.
Nur noch einen Klick auf Ok und wir finden im Fenster Codefragmente nun unser Startdokument.

Um es Anzuwenden, erstellt man in Dreamweaver eine neue Datei, markiert diese über das Tastenkürzel Strg+A und löscht zunächst den alten Inhalt.

Anschließen zieht man einfach das Codefragment in den leeren Arbeitsbereich via Drag and Drop.

Codefragmente eignen sich für fast jeden nur erdenklichen Quellcode-Auszug, den man häufiger und projektübergreifend benötigt.

**Torsten** · 20.02.2006 21:44

Wer kennt das nicht:
Man muß einen Codeausschnitt aus einem anderen Dokument übernehmen und die ganze Codeformatierung die man in DW eingestellt hat ist dahin.

Ab DW 8 ist dies kein Problem mehr.
Selbst komplette HTML-Seiten welche mit anderen Editoren erstellt wurden lassen sich mit einem Mausklick formatieren.

Man wechselt in die Code-Ansicht un öffnet den Dialog Quellcode formatieren in der linken Symbolleiste: Kodierung.
Jetzt klickt man nur auf Quellenformatierung übernehmen und fertig

Um das ganze zu verdeutlichen, wie gewohnt ein selbsterklärender Screenshot.

LG, Torsten

**Torsten** · 04.07.2006 18:27

Wer kennt das nicht, jedes Projekt benötigt eine CSS-Datei.

Nichts liegt näher als das neue Stylesheet eines Projektes mit Dreamweaver zu erstellen, denn nicht umsonst ist in Dreamweaver ein CSS-Editor integriert.

Im normalfall gehen wir über Datei Neu und wählen CSS aus (siehe Screenshot)

Dreamweaver generiert eine leere Stylesheet Datei die völlig ohne Inhalt ist.
Ärgerlich denn die meisten Formatierungen sind ähnlich.

Hier gibt es die Möglichkeit eine modifizierte CSS-Datei in Dreamweaver zu hinterlegen, nämlich in jenem Verzeichnis in dem die Default-Vorlagen für Standard-Dokumente gespeichert sind.

Wie erstellen uns eine CSS-Muster-Datei wie z.B. im folgenden Bsp:

HTML-Code:

/* - - - - - - - - - - - - - - - - - - - - -

Title : PROJECT-NAME
Author : Your Name
URL : http://www.domain.com/

Description : Stylesheet Media Screen

Created : Date
Modified : Date

- - - - - - - - - - - - - - - - - - - - - */

/* ----- CSS ----- */

*{
}    
html{
}    
body{
}

/* ----- IDS ----- */

#container{
}    
#primaryContent{
}    
#secondaryContent{
}    
#navigation{
}    
#footer{
}

/* ----- CLASSES ----- */

.hide{
}
.show{
}

/* ----- HEADINGS ----- */

h1{
}
h2{
}
h3{
}
h4{
}

/* ----- PARAGRAPHS ----- */

p{
}
#primaryContent p{
}
#secondaryContent p{
}

/* ----- QUOTES ----- */

blockquote{
}
blockquote p{
}
cite{
}
blockquote cite{
}

/* ----- CODE ----- */

pre{
}
code{
}
p code{
}
pre code{
}

/* ----- LISTS ----- */

li{
}
li p{
}
ol{
}
ul{
}
ol li{
}
ul li{
}

#navigation li{
}

#navigation ul{
}

#navigation ul li{
}

#navigation ol{
}

#navigation ol li{
}

/* ----- IMAGES ----- */

img{
}
img a{
}
img a:hover{
}

/* ----- BREAK ----- */

hr{
}

/* ----- TEXT FORMATTING ----- */

strong{
}
em{
}
b{
}
i{
}

/* ----- LINKS ----- */

a{
}
a:hover{
}
a:visited, a:active, a:focus{
}
a:visited{
}
a:active{
}
a:focus{
}

p a{
}
cite a{
}
li a{
}
dt a{
}
dd a{
}

/* ----- TABLES ----- */

table{
}
caption{
}
thead{
}
tbody{
}
tfoot{
}
tr{
}
tr .alt{
}
th{
}
td{
}

/* ----- FORMS ----- */

form{
}
fieldset{
}
legend{
}
label{
}
input{
}
textarea{
}
input, textarea{
}
select{
}
optgroup{
}
option{
}

/* ----- DEFINITIONS ----- */

dl{
}
dt{
}
dd{
}

Diese Datei speichern wir unter dem Namen: Default.css in folgendem Verzeichnis ab:
D:\Programme\Macromedia\Dreamweaver 8\Configuration\DocumentTypes\NewDocuments\

Wenn wir nun den Dialog Datei Neu eine neue CSS auswählen bekommen wir unsere selbst angelegt Musterdatei.

Viel Spass!

**pathunt** · 17.01.2008 14:38

hallo torsten,
ich weiß jetzt nicht ob ich bei meiner frage zu deinem beitrag überhaupt richtig bin, aber ich versuchs einmal: bin absolut neuling bei dreamweaver, marke hoffnungsloser patient also. habe versch. videos angsehen (sehr gut!) zur einführung, aber komme trotzdem nicht weiter. bin nach dem video datei bei indesign erstellen u in dw importieren vorgegangen (meine einzige chance, nur in id kenne ich mich aus!), aber ich komme nicht weiter: bei den stilen steht dann div.group, - image, story, aber nicht wie es in dem video dargestellt wird mit den css dateien. habe das bei id mit leere css kl.deklaration gespeichert, wenn ich ext. datei speichere wird gar nichts angezeigt. wie kann ich also meinen import formatieren das es so aussieht wie in id?
dank für hilfe patrick

**Torsten** · 07.02.2009 17:24

DWCS4 - Endlich kann man Link-Titel ganz simpel & einfach eintragen

**Torsten** · 04.06.2009 19:57

Dreamweaver bietet eine ganz einfache Möglichkeit an, Element/Tags/Objekte mittels CSS zu formatieren und den eigenen Vorstellungen anzupassen.

Einfach in der Design-Ansicht das entsprechende Element markieren im Tag-Selektor kontrollieren und gegebenenfalls korrigieren und danach in der CSS-Palette eine neue CSS-Regel erstellen. Siehe Screen Nr.1

Daraufhin öffnet sich ein Fenster in dem man verschiedene Einstellungen vornehmen kann oder man übernimmt die Einstellungen. Hier kann man z.B. festlegen wo die Regel hineingeschrieben werden soll. Bei Templates welche man nicht selbst erstellt hat empfiehlt es sich eine eigene CSS-Datei anzulegen... siehe Screen Nr.2

Nach Bestätigung kommt das bekannte Fenster um die Regeln zu erstellen, hat man dies erledigt, klickt man auf Okay und Dreamweaver schreibt die neue Regel an das Ende der jeweiligen CSS-Datei... siehe Screen Nr.3

Viel Spaß beim Designen

zur Startseite vom TP

Thema: Dreamweaver Mini-Tutorials

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Dreamweaver Mini-Tutorials

[DW 8] Mit Codefragmenten arbeiten

[Dreamweaver 8] Source-Code formatieren

[Dreamweaver] Modifizierte CSS-Default Datei

Tags und Elemente mit CSS bequem formatieren

LinkBacks (?)

CSS a:hover list-type; square IE zeigt nicht an nur Firefox - Adobe Dreamweaver - HilfDirSelbst.ch - Forum

Aktive Benutzer

Aktive Benutzer