Unternehmensrechnung II. Jahrgang Teil 1 Mag. Helmut Bauer BHAK 1 Salzburg [email protected].
© Seite 1 © Mag. Helmut Bauer [email protected] Macromedia Dreamweaver MX 1.
-
Upload
lewenhart-rehder -
Category
Documents
-
view
110 -
download
3
Transcript of © Seite 1 © Mag. Helmut Bauer [email protected] Macromedia Dreamweaver MX 1.
Seite 1 © www.bauerpoint.com
© Mag. Helmut Bauerwww.bauerpoint.com
Macromedia Dreamweaver MX
1
Seite 2 © www.bauerpoint.com
VorbereitungsarbeitenVorbereitungsarbeiten
Erstellen Sie im MS-Explorereinen Hauptordner „Web“ undfolgende Unterordner:
Starten Sie Dreamweaver
Seiten definieren
Version 4
Seiten definieren
Version 4
11
22
Notizen:
Seite 3 © www.bauerpoint.com
VorbereitungsarbeitenVorbereitungsarbeiten
Erstellen Sie im MS-Explorereinen Hauptordner „Web“ undfolgende Unterordner:
Starten Sie Dreamweaver
Seiten definieren
MX Version
Seiten definieren
MX Version
Notizen:
Site – Neue Site:
Name der Site
Seite 4 © www.bauerpoint.com
Seiten definieren MX
Version
Seiten definieren MX
Version
Auswahl des Hauptordners „Web“
Fertig
Seite 5 © www.bauerpoint.com
Seiten definierenSeiten definieren
Name der neuen Homepage (frei wählbar)
Wo liegt der Ordner auf der Festplatte?Klick auf das Ordnersymbol und Ordnerauswählen.
33
44
55
66
Notizen:
Seite 6 © www.bauerpoint.com
Das Site FensterDas Site Fenster
Diese Ansicht bietet einen Überblick über sämtlicheDateien und Ordner der Homepage.
Wichtig:Änderungen der Dateinamen und der Ordner bzw. Verschiebungen von Dateien und Ordnern solltennur in diesem Fenster durchgeführt werden! Es werdensämtliche Links automatisch aktualisiert.
MXVersion:
Seite 7 © www.bauerpoint.com
Aufbau der ersten SeiteAufbau der ersten Seite
Öffnen einer neuen Seite:Datei – Neues Fenster
Hilfslinien einblenden:Ansicht – Hilfslinien anzeigen
11
22
Ergebnis: 33
44 Einblenden des Eigenschaften-Inspektors (für Formatierungen)
Seite 8 © www.bauerpoint.com
Exkurs: Der Eigenschaften InspektorDer Eigenschaften Inspektor ist, eines der wichtigsten "Tools" in Dreamweaver. Mit ihm kann man Eigenschaften von z.b. Tabellen, Bildern, Ebenen usw ändern. Wenn das Fenster nicht geöffnet ist einfach Strg + F3 drücken.
Inspektor zum Formatieren: Schriftart, Größe, Schrift-, Hintergrund- und Rahmenfarbe können hier eingestellt werden.
Inspektor für Layer: Größe, Hintergrund- und Rahmenfarbe können hier eingestellt werden.
Inspektor für Links: Ziel, Zusatztext und Abstände können hier eingestellt werden.
Seite 9 © www.bauerpoint.com
Einfache TextformatierungEinfache Textformatierung
- Überflüssige Fenster schließen (Ausnahme: Eigenschafteninspektor)- Text eingeben - markieren - Formatieren (Text - Zeichen...)
Auswahl der SchriftartAchtung: Nur einfache
Schriftarten verwenden!
(Fenster – Eigenschaften)
Auswahl der SchriftgrößeStandard: Größe 3
Schriftfarbe
Fett
Kursiv
Absatzformatierunglinks-, rechtsbündig, zentriert
Seite 10 © www.bauerpoint.com
Hintergrundfarbe oder Hintergrundbild auswählenWählen Sie einen hellblauen Hintergrund.
Titel der Seite - Statuszeile
rechte MaustasteSeiteneigenschaften
Seitenformatierung – HintergrundSeitenformatierung – Hintergrund
Seite 11 © www.bauerpoint.com
Arbeiten mit TabellenArbeiten mit Tabellen
Problem:Einrückungen, beliebige Platzierung des Textes ist auf diese Art und Weisenicht möglich.
Seite 12 © www.bauerpoint.com
Tabelle einfügenTabelle einfügen
Einfügen einer Tabelle:Einfügen - Tabelle
11
22
Festlegen der Spalten- und Zeilenanzahl
33Ergebnis
Seite 13 © www.bauerpoint.com
TabelleneigenschaftenTabelleneigenschaften
33
Mit Hilfe des Tabelleneigenschaften – Inspektors können verschiedene Einstellungen vorgenommen werden: (Ctrl + F3)
Anzahl Reihen/SpaltenNachträgliche Änderung
möglich
Seitenbreite der TabelleSinnvoll: 100%
Breite zwischenden Spalten
Farbe derZellen Breite der
Linien0 = unsichtbar
Seite 14 © www.bauerpoint.com
Beispiel Zoo: Aufbau der 1. SeiteBeispiel Zoo: Aufbau der 1. Seite
Ziel ist eine Einsteigerseite mit einem Begrüssungstext, einer Graphik und verschiedenenLinks zu den Tieren. Sie soll am Ende nachfolgendes Aussehen haben:
Hinweise:Graphik: buttrfly.jpgGraufarbe: #CCCCCC
Seite 15 © www.bauerpoint.com
Aufbau der 1. SeiteAufbau der 1. Seite
Es wird eine Tabelle mit 3 Spalten und 6 Zeilen eingefügt, anschließend werden die Zellen der ersten Zeile verschmolzen.
Schritte: 3 Zellen per Maus markieren
-
11
22
Rechte Maustaste – Tabelle – Zellen verbinden
Nun werden auch die mittleren 4 Zellen verschmolzen – Ergebnis:
Seite 16 © www.bauerpoint.com
Aufbau der 1. SeiteAufbau der 1. Seite
Einfügen der ersten Graphik Schritte – Cursor wird an die entsprechende Stelle gesetzt:
22
11
Einfügen - Bild
Bild auswählen – Öffnen (Select)
Seite 17 © www.bauerpoint.com
Aufbau der 1. SeiteAufbau der 1. Seite
Rahmen ausblenden – Rahmenbreite = 0:
Äußeren Rahmen mit einem Klick markieren
22
11
Rahmen auf „0“ stellen:
Seite 18 © www.bauerpoint.com
Aufbau der 1. SeiteAufbau der 1. Seite
Zellen mit Farbe füllen:
Gewünschte Zellen markieren (mehrere markieren mit Strg. + Einzelklick)
22
11
Hintergrundfarbe „Grau“ einstellen (#CCCCCC):
Seite 19 © www.bauerpoint.com
Formatieren der 1. SeiteFormatieren der 1. Seite
Texte eingeben und formatieren:
Schriftart: ArialSchriftgröße allgemeiner Text: 3Schriftfarbe: schwarzÜberschrift: fett, Schriftgröße 5
Regelmäßige Vorschau mit
F12
Seite 20 © www.bauerpoint.com
Speichern der 1. Seite immer unter dem Namen: index
Zusatz „htm“ wird automatisch zugewiesen!
Dateispeichern
Speichern der 1. SeiteSpeichern der 1. Seite
Wichtige Regeln für Dateinamen im Web:
- keine Leerzeichen- generelle Kleinschreibung- keine Umlaute
Seite 21 © www.bauerpoint.com
Aufbau der 2. SeiteAufbau der 2. Seite
Erläuterung:Tabelle: 2 Zeilen, 3 Spalten, Rahmengröße: 1Bilder: kaefer.jpg & bug288.jpgText stammt aus der Textdatei im Ordner Sonstiges – text_insekten.docEinfügen des Textes: Text im Word Document markieren – Bearbeiten kopieren – in DreamweaverBearbeiten – Einfügen.
Titel der Seite: Insekten
Speichern im Ordner Pages unter dem Namen „insekten“
Seite 22 © www.bauerpoint.com
Aufbau der 3. SeiteAufbau der 3. SeiteTitel der Seite: Fische
Speichern im Ordner Pages unter dem Namen „insekten“
Erläuterung:Tabelle: 3 Zeilen, 2 Spalte, Rahmengröße: 1Bilder: fisch.jpg & fisch1.jpgText stammt aus der Textdatei im Ordner Sonstiges – text_fische.doc
Spe
iche
rn im
Ord
ner
Pag
es u
nter
dem
Nam
en „
inse
kten
“
Seite 23 © www.bauerpoint.com
Aufbau der 4. SeiteAufbau der 4. SeiteTitel der Seite: Geflügel
Erläuterung:Tabelle: 3 Zeilen, 1 Spalte, Rahmengröße: 0Bilder: duck2a.jpg Text stammt aus der Textdatei im Ordner Sonstiges – text_gefluegel.doc
Spe
iche
rn im
Ord
ner
Pag
es u
nter
dem
Nam
en „
geflu
egel
“
Seite 24 © www.bauerpoint.com
Aufbau der 5. SeiteAufbau der 5. SeiteTitel der Seite: Geflügel
Spe
iche
rn im
Ord
ner
Pag
es u
nter
dem
Nam
en „
haus
tiere
“
Erläuterung:Tabelle: 7 Zeilen, 1 Spalte, Rahmengröße: 1Bilder: cat.jpg & dog.jpgText stammt aus der Textdatei im Ordner Sonstiges – text_haustiere.doc
Seite 25 © www.bauerpoint.com
Link zu den einzelnen SeitenLink zu den einzelnen Seiten
11 Wort (oder Bild) markieren
22 Zieldatei suchen
33 Zieldatei auswählen
44 Fertig: Link zu „Insekten“
F12Testen der Links mit
Seite 26 © www.bauerpoint.com
Link zu den einzelnen SeitenLink zu den einzelnen Seiten
Links zu den übrigen Seiten festlegen
Ergebnis: (Links sind unterstrichen)
Testen der Links mit
F12
Seite 27 © www.bauerpoint.com
Link auf eine andere HomepageLink auf eine andere Homepage
11 Wort (oder Bild) markieren
22 Eingabe der gesamten Adresse (inkl. http://)
Seite wird in einem eigenen Explorerfenster geöffnet!(Empfehlenswert bei externen Links)
Seite 28 © www.bauerpoint.com
Link auf eine andere HomepageLink auf eine andere Homepage
Auf den einzelnen Unterseiten sollte jeweils ein Retourlink zur Hauptseite festgelegt werden
Ziel: index.htm
Seite 29 © www.bauerpoint.com
Link aus einem Bild festlegenLink aus einem Bild festlegen
11 Bild markieren
22 Hotspot auf das Bild setzen und Link festlegen
Zusatztext – erscheintbei Kontakt mit der Maus
Seite 30 © www.bauerpoint.com
E-Mail Adresse festlegenE-Mail Adresse festlegen
Objekt oder Text markieren und Eingabe: mailto:[email protected]
Hyperlink: „mailto:[email protected] - Test über F12 – Outlook Expresswird dadurch automatisch geöffnet.
11
2 Möglichkeiten:
Objekt oder Text markieren und „Einfügen – E-Mail“:22
oder:
Seite 31 © www.bauerpoint.com
Site Map – für den ÜberblickSite Map – für den Überblick
Änderungen nur in der Site Map durchführenLinks werden automatisch aktualisiert!
F8Aufruf:
Seite 32 © www.bauerpoint.com
Bild oder Text einfügen
Achtung: Format „.jpg“ verwenden
EinfügenBild
LayertechnikLayertechnik
11
22
Größe festlegen
Position festlegen
Seite 33 © www.bauerpoint.com
Von der Tabelle zum LayerVon der Tabelle zum Layer
Text wird damit völligfrei beweglich!
EinfügenTabelle
ÄndernLayout ModusTabellen in Ebenen konvertieren
Übersetzung:
Seite 34 © www.bauerpoint.com
Quickfinder - FeldlisteQuickfinder - Feldliste
Einfügen – Formularobjekt – Jump Menü
11
Festlegen der Links
22
Ergebnis:33
Seite 35 © www.bauerpoint.com
Gästebuch und CounterGästebuch und Counter
Auf diesen Seiten werden gratis Gästebücher bzw. Zähler angeboten. Eine einmaligeAnmeldung ist notwendig. Der Einbau in die Homepage erfolgt über Links.
Für Interessierte:Kostenlosen Webspace gibt es bei folgenden Adressen:www.8ung.atwww.heim.atwww.kostenlos.de
Seite 36 © www.bauerpoint.com
Ordner für die Quelle der Fotos und das Ziel(Hauptordner) angeben
Zielordner auf Server übertragen: thumbnails, pages, images
Fotoalbum einfügenFotoalbum einfügen
Doppelklick zur Vergrößerung
Ergebnis:
Seite 37 © www.bauerpoint.com
File Transfer per FTPFile Transfer per FTP
Eingabe:FTP Host – ServerHost Direcotory – Ort am Server – (kann meist ignoriert werden)
Login NamePasswort
Zuvor Anmeldung bei einemGratisserver. z.B. www.8ung.at
Seite 38 © www.bauerpoint.com
File Transfer per FTPFile Transfer per FTPDreamweaver
MX
12
Zuvor Anmeldung bei einemGratisserver. z.B. www.8ung.at
Folgende Daten müssen vorhanden sein:
FTP Hostname
Anmeldename
Kennwort
Daten werden nach Anmeldung bei einem Server per E-Mail übermittelt.
Seite 39 © www.bauerpoint.com
Zusatzinfos über...
• Sonderzeichen
• Fertige Buttons
• Anker setzen
• Bibliothek
• Frames
• Vorlagen
• CSS