Dreamweaver Mini-Tutorials

Tobias · 01.02.2006, 14: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, 15: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, 20: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, 17: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, 13: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