1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. In diesem Bereich findet ihr Tutorials und Reviews. Die Forenrechte zur Erstellung neuer Themen sind hier eingeschränkt, da Problemdiskussionen bitte in den übrigen Forenbereichen auf Apfeltalk zu führen sind. Wer ein Tutorial oder Review einstellen möchte, kann im Unterforum "Einreichung neuer Tutorials" ein neues Thema erstellen. Die Moderatoren verschieben den Beitrag dann in den passenden Bereich.
    Information ausblenden
  3. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Eine simple Homepage von Anfang an (WYSIWYG)(Nicht fertig)

Dieses Thema im Forum "Software-Tutorials" wurde erstellt von Felix Rieseberg, 22.03.06.

  1. Felix Rieseberg

    Felix Rieseberg Seestermüher Zitronenapfel

    Dabei seit:
    24.01.06
    Beiträge:
    6.149
    So, Versuch Nummer Zwo. Jetzt nochmal für blutende Anfänger in WYSIWYG.

    1) Rahmenbedingungen
    Webspace: Eine PN an mich sollte erst einmal genügen - für Apfeltalker.
    Editor: Meine Wahl trifft der Dreamweaver, da er sehr flexibel ist, eigenen Code zulässt und im Notfall noch akzeptablen Code selbst erstellt.

    Bitte das Tryout installieren. Mehr als 30 Tage sollte der Workshop nicht dauern :)

    KAPITEL 1: Einführung, Überschrift & Text

    2) Das Interface
    Wir klicken jetzt auf Neu Erstellen -> HTML
    Nun erkläre ich ersteinmal kurz das Interface:

    [​IMG]

    1) WYSIWYG: Das (vermutliche) Ergebniss eurer Arbeit.
    2) CSS - Stile: Ähnlich wie in Word & Pages sind CSS Klassen definierte Formatierungsklassen.
    3) Codefenster: Der HTML Code
    4) Eigenschaften des gewählten Objekts

    Wir werden hauptsächlich mit diesen vier Fenstern arbeiten.

    3) Die Seite - Die Grundeinstellungen
    Drückt STRG+J. Dieses Shortcut öffnet die allgemeinen Seiteneinstellungen (Größtenteils per CSS definiert).

    [​IMG]
    Schriftart: Die Schriftart, wenn keine andere definiert ist.
    Größe - Hintergrundbild: Dito
    Wiederholen: Wenn das Hintergrundbild zu klein ist, wird es wiederholt. Oder halt auch nicht.
    Rand: Der Seitenrand. Wenn ihr zum Beispiel ein Bild an die obere linke Kante kleben wollt, dann müsstet ihr dort überall 0 eintragen. Das lassen wir jetzt erst einmal.

    Hier mal ein paar Grundeinstellungen. Es empfiehlt sich, grundsätzlich Schwarze Schrift auf weißem Grund zu haben - auch wenn Apple es im Moment andersrum macht. Keiner ließt sich gerne lange Texte in weiß durch.

    [​IMG]

    Jetzt hat unsere Seite schon ganz nette normale Schrift. Jetzt nehmen wir uns noch den Menüpunkt "Verknüpfungen" vor.

    [​IMG]

    Ich werde mich erst einmal ein bisschen an Bordeaurot und Grautöne halten. (Änderung: Das Grau im Hintergrund ist ein bisschen Dunkel. Je nach Belieben gerne was helleres nehmen).

    4) CSS Einführung
    Nun beschäftigen wir uns mit dem schon erwähnten CSS - Fenster bzw. mit CSS Klassen. Damit wir bestimmte Formatierungen nicht immer wieder aufhändig per HTML angeben müssen, definieren wir sie in Klassen.

    In dem Fenster "Alle Regeln" sollten schon allgemeine Regeln stehen, die wir in Schritt 3 eben definiert haben. Wie der CSS - Code aussieht, ist im oberen Codefenster ersichtlich.

    Jetzt erstellen wir uns eine Klasse für die Überschrift. Dazu machen wir einen Rechtsklick in das CSS - Fenster (2) und wählen "Neu".

    [​IMG]

    Nun zu den Eigenschaften:
    Selektor - Typ
    HTML benutzt verschiedene Tags. Es gibt Tags für Bilder, kursiven Text, Aufzählungen, etc. Nun unterscheidet CSS, auf welche Tags man Klassen anwenden kann.
    Klasse: Die Standartauswahl, kann auf alles angewendet werden.
    Tag: Bezieht sich nur auf bestimmte Tags, dann aber auf alle. Wir haben einen solchen Tag schon in Schritt 3 angewendet, in dem wir definiert haben, dass alle Hyperlinks unterstrichen sind.
    Erweitert: Im Moment noch unwichtig - bezieht sich auf komplexere HTML - CSS2 Zusammenhänge.

    Name
    In unserem Fall natürlich "ueberschrift". Sicherheitshalber keine Sonderzeichen und immer klein schreiben.

    Definieren in
    Man kann CSS - Dateien anlegen, um in vielen Seiten ein und die selbe Formatierung anzuwenden. In unserem Fall macht es aber erst einmal mehr Sinn, dass CSS direkt in die Seite einzubetten.

    Also jetzt als Name "ueberschrift" eingeben und mit OK bestätigen.

    Das CSS - Eigenschaften - Fenster

    [​IMG]

    Wundert euch nicht über den Punkt vor eurer Klasse - der ist notwendig. Des weiteren gillt: Wenn ihr in einer Klasse etwas nicht verändern wollt, dann lasst es so. Dreamweaver bietet euch in jedem Fenster die Auswahl "Standart" an - das ist totaler Mist ;) .

    Ich habe jetzt Eigenschaften für eine hübsche, aber nicht übertriebene Überschrift gewählt. Spielt ruhig mal mit den anderen Eigenschaften und deren Effekten rum.

    Wenn ihr eure Klasse fertig habt, bestätigt mit "OK". Ihr könnt sie jederzeit noch ändern.

    Klasse anwenden
    Im Hauptfenster gebt ihr nun eure Überschrift ein. Anschließend markieren.
    [​IMG]

    Im unteren "Eigenschaften" - Fenster (4) wählt ihr nun bei "Stil" eure Klasse aus. Wenn ihr in diesem Fenster noch Schriftart oder Größe ändert, wird diese direkt geändert.

    [​IMG]

    Textformatierung, Umbrüche
    Unter eurer Überschrift könnt ihr jetzt ja diversen Text schreiben. Da verfügt ihr natürlich auch über die üblichen Methoden, um den Text kursiv, fett oder unterstrichen darzustellen. Fangen wir mit den Umbrüchen an.
    Wenn ihr in einfach "Enter" drückt, so fügt Dreamweaver um euren getippten Text ein <p></p> ein. Dies ist eines der bereits erwähnten Tags. Davon ist jedoch generell abzuraten, da diese Art natürlich auch einen Umbruch vor dem vorausgegangen Text einfügt. Viel praktischer ist der auch geläufigere Tag <br />, welcher einen einfach "Break" einfügt. Diesen könnt ihr direkt eingeben, in dem ihr im WYSIWYG - Fenster "Shift + Enter" drückt.

    Wenn ihr nun euren Text in der nächsten Zeile auswählt, könnt ihr in mittels "Apfel + B" fett machen. Dreamweaver benutzt dafür das HTML - Rag <strong></strong>. Kursiv erreicht ihr via "Apfel + I", was zu <em></em> führt. Für unterstrichen gibt es kein Tastenkürzel, man erreicht diesen Effekt jedoch mit dem HTML - Tag <u></u>.
    Kombinationen aus allen Tags sind möglich!

    [​IMG]

    KAPITEL 2: Fotos
    Fotos sind in HTML eigentlich keine Kunst, ich zeige jedoch auch direkt, wie man sie ein bisschen schön in den Fließtext einfügt. Nehmen wir uns also mal ein schönes Foto vor. Es wöre jetzt ein guter Zeitpunkt, eure Seite zu speichern, damit die Pfadangaben nachher auch alle korrekt sind. Speichert eure Seite als "index.html". Erstellt nun einen Unterordner namens "bilder". Ich nehme als Beispielfoto dieses schöne Foto:

    [​IMG]

    Wir werden dieses Foto nun einbinden und idealerweise auch ein bisschen nett gestalten. Macht erstmal noch zwei Breaks (<br /><<br />). Nun fügt ihr euer Bild über "Einfügen -> Bild" ein. Ein Alternativer Text ist nach Definiton notwendig und beschreibt euer Bild, etwa wenn es nicht geladen wird. Es ist gleichzeitig auch der Text, der als Tooltip erscheint. Für die Beschreibung der Höhe und Breite ist Dreamweaver zuständig. Theoretisch könnt ihr die ändern, ich rate jedoch dringend davon ab: Euer Bild nicht neu berechnet, ist deshalb pixelig und behält die gleiche Dateigröße.
    [​IMG]

    Nun kommen noch die Extras. Dafür ist, wie eigentlich so vieles, CSS zuständig. Wir erstellen also eine neue CSS-Klasse "ipod". Wir wagen uns nun in den Reiter "Rahmen" vor und erstellen dort einen für alle Seiten gleichen, weißen Rahmen (Durchgezogen, 3 Pixel breit, Weiß). Das sind schon ganz nett aus.

    [​IMG]
    [​IMG]

    Grüße, Riesenzwerg
     
    #1 Felix Rieseberg, 22.03.06
    Zuletzt bearbeitet: 24.12.06
  2. Dante101

    Dante101 Ralls Genet

    Dabei seit:
    11.10.05
    Beiträge:
    5.052
    Ja dann gute Nacht. Aber zerschiess morgen nicht wieder das Layout ;)
     
  3. plaetzchen

    plaetzchen Kaiserapfel

    Dabei seit:
    21.10.05
    Beiträge:
    1.729
    Hey super das du sowas machst! Ich glaub ich mach mal ein über Flash, wenn das gewünscht ist!?!
     
  4. franzka

    franzka Becks Apfel (Emstaler Champagner)

    Dabei seit:
    17.04.05
    Beiträge:
    339
    Hey danke, ich werd das dleich ma testen :)
     
  5. franzka

    franzka Becks Apfel (Emstaler Champagner)

    Dabei seit:
    17.04.05
    Beiträge:
    339
    Ma ne doofe frage, is das Dreamweaver kostenlos?
     
  6. plaetzchen

    plaetzchen Kaiserapfel

    Dabei seit:
    21.10.05
    Beiträge:
    1.729
    Es gibt keine doofen Fragen...
    Aber Nein, Adobe Dreamweaver ist nicht kostenlos, sonder kostet 470 Euro (Quelle: Amazon). Aber man kann es kostenlos testen!
    Unter http://www.adobe.com/support/downloads/main.html kann man eine 30 Tage Trial runterladen.
     
  7. Felix Rieseberg

    Felix Rieseberg Seestermüher Zitronenapfel

    Dabei seit:
    24.01.06
    Beiträge:
    6.149
    Bei diversen Strato und 1&1 Paketen kriegt man das aber umsonst mit dabei!
     
  8. MasterDomino

    MasterDomino Roter Eiserapfel

    Dabei seit:
    28.04.05
    Beiträge:
    1.440
    Oh. Toll. Jetzt geht's los! :)
    Habe mir das Ding gerade runtergeladen (musste man sich erst extra registrieren... o_O ) und danach als ich das Logo sah festgestellt, dass wir das Ding hier auf der Arbeit als Vollversion haben. Haha.

    Also. Ich fänd's toll, wenn du das hier weitermachst immer mal wieder ein bisschen und wir können Fragen dazu stellen usw.

    Ich probier hier aber glaube ich schon mal ein bisschen rum um die Wartezeit auf deinen nächsten Post zu verkürzen.

    Gruß, MasterDomino
     
  9. high-end-freak

    high-end-freak Herrenhut

    Dabei seit:
    16.12.05
    Beiträge:
    2.289
    wieso hat adobe eigentlich zwei websiten maker? dreamweaver und golive? welches ist denn besser. oder ist dieser dreamweaver vom aufgekauften macromedia? wieso nehmen wir hier dan dreamweaver, welche vorteile hat er gegenüber golive?
     
  10. Felix Rieseberg

    Felix Rieseberg Seestermüher Zitronenapfel

    Dabei seit:
    24.01.06
    Beiträge:
    6.149
    Dreamweaver stammt tatsächlich von Macromedia. Ich habe GoLive nur in der Version 5 ausprobiert und hielt es für schrecklich.

    So weit ich weiß, konnte man da noch Objekte wie auf einem Bild hin und her schieben, der Code war sehr eigenwillig und das Interface nicht sehr viel mehr als *naja*.
     
  11. MasterDomino

    MasterDomino Roter Eiserapfel

    Dabei seit:
    28.04.05
    Beiträge:
    1.440
    Halli hallo!

    Hoffe ihr hattet alle ein schönes Wochenende!
    Geht das hier jetzt noch weiter?

    Ich hoffe doch!

    Gruß, MasterDomino
     
  12. Felix Rieseberg

    Felix Rieseberg Seestermüher Zitronenapfel

    Dabei seit:
    24.01.06
    Beiträge:
    6.149
    Ich schreib morgen eine Matheklausur... dann gehts weiter.
     
  13. fantaboy

    fantaboy Leipziger Reinette

    Dabei seit:
    09.04.04
    Beiträge:
    1.788
    @ high-end-freak,

    dreamweaver ist tatsächlich von der aufgekauften firma macromedia.
    viele webleute schätzen dreamweaver, weil der code, den er erzeugt, halbwegs plausibel ist und leicht zu bereinigen. man kann damit viele projekte verwalten und auch mit mehreren leuten an einem projekt arbeiten.
    er ist relativ leicht zu lernen und bietet dennoch sehr viele möglichkeiten.

    golive dagegen ist so ein tool, dass adobe unbedingt haben wollte, damit sie auch ne webdesign-software in ihrem paket anbieten können. ein bischen lieblos das programm und nicht sehr überzeugend. bei weitem nicht so gut zu handeln, wie dreamweaver.
    natürlich gibt es da auch andere meinungen, aber ich kann golive überhaupt nicht leiden.

    gruss

    jürgen
     
    high-end-freak gefällt das.
  14. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.547
    Ab welcher Uhrzeit darf man Dir denn die Daumen drücken?

    Lieben Gruß,
    Nathea
     
  15. Felix Rieseberg

    Felix Rieseberg Seestermüher Zitronenapfel

    Dabei seit:
    24.01.06
    Beiträge:
    6.149
    Ab 8.00. Das ist meine Vorvorletzte Klausur... Ich muss jetzt nur noch die Zähne zusammenbeißen und gut :)

    Ich werde morgen vermutlich mit Bildern weiter machen... Dann mit Links. Das wird schon noch :) In vier Monaten machen sind wir dann bei einer PHP/MySQL/DHMTL/JS/AJAX/XML/XHTML/FLASH/AS2 angekommen und basteln ein Monstertutorial :)
     
  16. Dante101

    Dante101 Ralls Genet

    Dabei seit:
    11.10.05
    Beiträge:
    5.052
    Auch von mir alles Gute für Morgen!!!
     
  17. fantaboy

    fantaboy Leipziger Reinette

    Dabei seit:
    09.04.04
    Beiträge:
    1.788
    Auch Daumendrück!!!

    Gruß

    Jürgen
     
  18. high-end-freak

    high-end-freak Herrenhut

    Dabei seit:
    16.12.05
    Beiträge:
    2.289
    isch die klausur geschafft? gehts jetzt weiter?
     
  19. high-end-freak

    high-end-freak Herrenhut

    Dabei seit:
    16.12.05
    Beiträge:
    2.289
    ich glaub der Riesenzwerg hat den thread aus den augen verloren...:(
     
  20. Herr Sin

    Herr Sin Millets Schlotterapfel

    Dabei seit:
    05.01.04
    Beiträge:
    4.752
    Deshalb heisste es auch noch "nicht fertig" im Beitrags-Titel. Aber ehrlich: wenn man da hätte mitmachen wollen, hätte das alles auch etwas schneller gehen sollen, weil die 30 -Tage Demo von Dreamweaver schon lange abgelaufen ist.
     

Diese Seite empfehlen