Bildformate, Bilder einfügen und ausrichten, Hotspots und Platzhalter

16.05.2012 in Tutorials von Pascal Bajorat

Bildformate

Im Internet haben sich mehrere Formate etabliert. Vor allem das JPG-Format. Damit ist es möglich, Bilder und Fotos mit 16 Mio. Farben zu speichern. Jedoch nicht verlustfrei. Je höher die Kompression ist, desto schlechter wird die Qualität. Wie im Bild links oben zu sehen, wäre das Bild bei einer zu hohen Kompression leider mit Artefakten untersetzt. Darum sollte in z.B. Photoshop immer genau geschaut werden, welche Kompressionsstufe für den jeweiligen Zweck benutzt wird. Für Fotos z.B. Kompressionsstufe 60 – 70 und bei 1 – 20-farbigen Illustrationen sollte erst gar nicht das JPG-Format gewählt werden. Dafür eignet sich das GIF-Format viel besser.

(weiterlesen …)

Tabellenbearbeitung in Dreamweaver

06.05.2012 in Tutorials von Pascal Bajorat

Ganz wichtig ist, dass ich in Dreamweaver im Register Layout den Ansichtsmodus auf Standard setze, sonst steht mir die Tabellenfunktion nicht zur Verfügung:

(weiterlesen …)

Dokumenteigenschaften definieren

26.04.2012 in Tutorials von Pascal Bajorat

Um die Seiteneigenschaften festzulegen, könnt ihr z. B. durch Menü>Modifizieren>Seiteneigenschaften; durch Klick mit Strg+J oder durch einen Klick mit der rechten Maustaste und dann auf Seiteneigenschaften. Das Aussehen des Seiteneigenschaften-Fensters unterscheidet sich jedoch nach den getroffenen Voreinstellungen. Wenn im Programm eingestellt wurde, dass die Arbeit ohne CSS gewollt ist, so wird das Menü um einige Punkte weniger bestückt sein. Gehen wir von diesem Fall aus, dass kein CSS aktiviert wurde:

(weiterlesen …)

Siteverwaltung – Webseite in Dreamweaver anlegen

16.04.2012 in Tutorials von Pascal Bajorat

In diesem Workshop möchte ich erklären, wie eine Site angelegt wird und welche Vorteile das hat. Ein klein wenig Theorie:

Wenn innerhalb einer HTML-Datei (also des eigentlichen Dokuments) auf ein anderes verwiesen wird, wird ein Link gesetzt. Jetzt wird jedoch dabei unterschieden, ob ein absoluter Pfad oder ein relativer Pfad angegeben wird.

Absolute Pfade

Absolute Pfade enthalten die vollständige URL des verknüpften Dokuments und das zu verwendende Protokoll (für Webseiten in der Regel http://). http://www.macromedia.com/support/dreamweaver/contents.html ist ein Beispiel für einen absoluten Pfad.

Absolute Pfade sind erforderlich, wenn ein Hyperlink zu einem Dokument auf einem anderen Server erstellt werden soll. Es können absolute Pfade zwar auch für lokale Hyperlinks (d. h. für Hyperlinks auf Dokumente derselben Site) verwendet werden, doch wird dies nicht empfohlen. Wenn später die Site zu einer anderen Domäne verlagert wird, werden alle lokalen absoluten Pfade ungültig. Die Verwendung relativer Pfade bietet auch eine größere Flexibilität, wenn ich die Dateien innerhalb der Website verschieben muss. Außerdem wird der Quellcode so ein wenig kleiner.

Hinweis: Bilder einfügen (nicht Hyperlinks): Wenn ein absoluter Pfad zu einem Bild verwendet wird, das auf einem Remote-Server gespeichert und nicht auf der lokalen Festplatte verfügbar ist, kann das Bild nicht im Dokumentfenster angezeigt werden. Stattdessen muss eine Vorschau des Dokuments in einem Browser anzeigt werden, wenn das Bild angezeigt werden soll. Darum verwendet man möglichst dokumentrelative oder zum Site-Stammordner relative Pfade für Bilder, sofern dies möglich ist.

Relative Pfade

Relative Pfade sind Links zu Dateien auf dem eigenen Server, jedoch ohne http://www.sitenname/ sondern nur z.B. Bilder/bild1.html .

Vorteil ist, dass, wenn der Webserver bzw. die Seite sich vom Namen ändert, alle Links noch funktionieren, und das sogar, wenn die Seite auf dem PC getestet wird! Darum unbedingt immer relative Pfade benutzen, außer, es wird eine Datei von einer fremden Seite verlinkt.

Dreamweaver erstellt standardmäßig Hyperlinks zu anderen Seiten in der angelegten Site mithilfe dokumentrelativer Pfade. Bei kleineren Seiten können alle Dateien in einem Ordner gelagert werden. Jedoch sollte bei jeder ordentlich geführten Seite ein Unterordner mit den Bildern und dann z.B. ein Unterordner mit den Downloads angelegt werden, damit alles schön seine Ordnung hat. Im Hauptordner werden dann nur die HTML- / PHP-Dateien abgelegt. So sind auch die meisten CMS-Systeme aufgebaut.

Hier ein kleines Beispiel, wie es bei einer ordnungsgemäßen HTML-Webseite aufgebaut sein sollte:

(weiterlesen …)

Erweitern mit dem Extension Manager und Befehle hinzufügen durch das Verlaufsprotokoll

06.04.2012 in Tutorials von Pascal Bajorat

Befehle hinzufügen durch das Verlaufsprotokoll

Im ersten Teil habe ich gezeigt, wie wir Dreamweaver durch die Voreinstellungen noch besser an die eigenen Bedürfnisse anpassen können. Jetzt kommen wir zum Erweitern von Dreamweaver. Aber bevor ich den Extension Manager erkläre, möchte ich noch einen kleinen Tipp geben, wie Arbeitsabläufe, die immer wieder benötigt werden (Ebenen erstellen und ausrichten + Formatieren) als Aktion abgespeichert werden können.

(weiterlesen …)

Vorteile von Dreamweaver und dessen Voreinstellungen

27.03.2012 in Tutorials von Pascal Bajorat

Dreamweaver wurde von der Firma Macromedia erstellt. Diese Firma wurde Ende 2006 von Adobe aufgekauft. Darum läuft das Produkt jetzt unter dem Namen Adobe Dreamweaver und ist einzeln bzw. im CS-Paket erhältlich. Der Preis für die aktuelle 8.0 Version liegt bei ca. 550,00 Euro und für das Update bei 280,00 Euro. Für Schüler und Studenten kostet diese Version ca. 100,00 Euro.

Eigentlich ist der Preis für einen HTML-Editor doch recht teuer. Hier möchte ich erklären, warum dieser Preis gerechtfertigt ist. In ca. 15-20 Workshops werde ich alle Funktionen von Dreamweaver vorstellen.

Die Vorteile von Dreamweaver in einer kleinen Übersicht:

• Quellcode von Dreamweaver ist valide und kann durch Voreinstellungen in den Programmoptionen beeinflusst werden
• Sehr gute CSS-Unterstützung + einfaches Anlegen neuer CSS-Stile
• Mehrere Ziel-Browser lassen sich einrichten und es werden typische Fehler in dem jeweiligen Browser aufgeschlüsselt
• Java-Script-Beispiele, die mit nur einem Klick eingebunden werden können
• Datenbankanbindung sehr bequem möglich
• Unterstützung neuester Techniken wie XML, XHTML und ASP.NET
• Code-Vorlagen, die öfters benötigt werden, können angelegt werden
• Durch Plugins bzw. mithilfe des Extension Managers kann das Programm beliebig erweitert werden
• Es gibt mehrere Ansichtsoptionen (Code, Teilansicht oder nur die Entwurfsansicht)
• Fehlerhafter Code bzw. unnötige Fragmente können durch nur einen Befehl bereinigt werden (z.B. der Code von MS Word ist absolut nicht zu gebrauchen, und diesen kann man mit Dreamweaver wieder entrümpeln)

Die Oberfläche

Dreamweaver bietet mehrere Dokumentansichten:

• Für Designer gibt es die Entwurfsansicht, die keinen Code anzeigt (somit kann man Elemente wie in Word einfügen und verschieben/formatieren).
• Für Coder gibt es die Codeansicht, die nur HTML-/PHP- usw.- Code anzeigt.
• Teilansicht: Diese Ansicht bevorzuge ich persönlich; dort kann ich, wenn ich bestimmte Elemente einfüge, genau sehen, wie sich daraufhin der Code ändert. So kann jeder die Schreibweise des Codes schnell lernen, ohne lange nachschlagen zu müssen.

(weiterlesen …)

Hallo Welt!

16.03.2011 in Allgemein von Pascal Bajorat

Willkommen bei 4eck Media GmbH & Co. KG Blogs. Dies ist der erste Artikel. Du kannst ihn bearbeiten oder löschen. Und jetzt nichts wie ran ans Bloggen!