Home > Technologie > Erstellen Sie Ihre eigene Website mit Dreamweaver

Erstellen Sie Ihre eigene Website mit Dreamweaver

Advertisement

Erstellen Sie Ihre eigene Website mit Dreamweaver

So habe ich vorher über dieses vorher geschrieben, das alte ist lesenswertes zuerst, es enthält Anweisungen auf photoshop und dreamweaver, das dieses nicht tut, aber es verfehlt viele Punkte heraus, die mit diesem verglichen werden.

Heutzutage gibt es Tonnen von Dienstleistungen für den Aufbau von Websites mit und es gibt auch eine Menge von Websites und Communities gut geeignet für diejenigen, die nicht durch die Anstrengung der Aufbau einer ganzen Website von Grund auf gehen wollen.

Wenn Sie nur eine Website, um Ihr Zeug präsentieren müssen, dann sind die Chancen können Sie eine zusammen über einen Nachmittag, für eine komplexere Website wird es mehr Zeit in Anspruch nehmen.

Ich habe meine Website seit überarbeitet - jetzt ist es an http://killerjackalope.com/

Meine eigentliche Website ist hier - killerjackalope.co.nr
Welches ist eine Umleitung von - killerjackalope.zxq.net

gh

Schritt 1: Werkzeuge, Materialien, Fertigkeiten

Werkzeuge
- Ein Computer läuft
- Photoshop oder Ihr Bild-Editor der Wahl (Sie müssen möglicherweise Plugins für die Ausgabe von HTML-Downloads)
- Dreamweaver oder Ihr Editor und FTP-Client der Wahl
- Eine anständige Internetverbindung
- Eine E-Mail-Adresse, wenn Sie nicht über ein Ich bezweifle, Sie werden es durch diese
- Du brauchst wahrscheinlich eine Kamera
- Stifte und Papier

Werkstoffe
- Inhalt - Ich werde später darüber sprechen, aber Sie müssen sicherlich Ihre Website mit etwas füllen
- Speicherplatz auf der Festplatte
- Zeit und Geduld.

Grundfertigkeiten
- Ein grundlegendes Wissen, wie Sie Ihren Computer, das Internet verwenden
- Die Mehrheit dieser erfordert sehr wenig Codierung Wissen, also nicht eingeschüchtert werden
- Sinn für Design
- Wissen, wie man Photoshop verwenden, wäre schön, paint.NET oder GIMP

Schritt 2: Planen Sie Ihre Website

Erstellen Sie Ihre eigene Website mit Dreamweaver

Bevor Sie schlagen den Computer, auf der Suche nach Design-Cues und Klopfen zusammen Ideen und Vorlagen, setzen Sie sich mit einem Stück Papier, erarbeiten alles, was Sie wollen in Ihrer Website und wie Sie es bekommen.

Meine Index-Seite ist die gleiche wie meine Homepage, eine persönliche Wahl, Intro-Animationen sind nicht ich. Die Top-Level-Seiten - Home, Projekte, Fotografie, Über, Kontakt sind alle im Header verbunden - Sie können diese von überall auf der Website zu bekommen.

Kommen aus diesen sind Sätze von Seiten, von Projekten jedes Projekt hat eine Seite, die von der Projektseite erhalten werden können. (Sie sind auch in der Seitenleiste jeder Projektseite verlinkt, aber das ist jetzt nicht relevant)

Unterhalb der Kontaktseite habe ich Seiten für Links - einfach darzustellen, dass der Besucher irgendwo von dort aus gehen kann.

Dies ist ein ziemlich normales und einfaches Modell, aber es hilft Ihnen, herauszufinden, was Sie setzen wollen, wo in Ihrer Website - es ist auch eine nützliche Möglichkeit, um sicherzustellen, dass Ihre Website leicht navigierbar ist.

Versuchen Sie nicht, und ziehen Sie jeden Link in, das Problem ist, dass schafft eine rekursive und infininite Schleife, die Dreamweaver-Karte Ansicht nass macht, egal Ihr Stück Papier.

Schritt 3: Designentscheidungen

Erstellen Sie Ihre eigene Website mit Dreamweaver

Bevor Sie in die Farben, Schriften und was nicht müssen Sie ein Layout zu betrachten.

Wie viele Spalten wird Ihre Website haben? Ich ging mit drei auf der Homepage, Projekt-und Fotografie-Seiten mit Bildern als Links, meine Navigationsleiste ist horizontal, entlang der Unterseite des Headers.

Sie können auch ein Navigationsmenü, das senkrecht entlang der linken oder rechten Seite sitzt wie eine Spalte.

Mein Projekt, Blog und Fotografie Seiten haben zwei Spalten - eine Haupt-mit Inhalt und ein kleineres auf der rechten Seite mit einer Anzeige und entsprechenden Links, in der Blog-Seite hat es neue Beiträge auf der linken Seite.

Je mehr Spalten und Zeilen Sie über das Layout haben, desto mehr riskieren Sie einen unübersichtlichen Look, obwohl ich mit einem recht spärlichen und minimalen Design insgesamt ging.

Spalten und Zeilen können brillante Formatierung Werkzeuge, können Sie hinzufügen und subtrahieren Whitespace, um Ihre Seiten besser aussehen, separate Blöcke von Text und Bildern, sicherlich die Zeit nehmen, um mit ihnen zu experimentieren, manchmal das Hinzufügen einer kleinen Zelle, die einen Speicherplatz schafft, ist die Perfekte Sache, um zwei Stück Inhalt auseinander.

Schritt 4: Farben, Schriftarten und Bilder

Erstellen Sie Ihre eigene Website mit Dreamweaver

Dies alles hängt von der Art von Vibe, die Sie möchten Ihre Website zu geben.

Schriftarten

Ich habe zwei Fonts über die Website gewählt, eine ich wirklich wie genannt acht-eins und für den Inhalt Text eine einfache, lesbare Franklin Gothic Book. Ihre Header-und Nav-Links können eine Signatur-Schriftart, etwas, das Sie mögen, dass Eyecatching und ein bisschen anders ist, sollte es immer noch viel lesbar sein.

Ihr Inhalt Schriftart sollte sauber, sehr lesbar und attraktiv.

An keinem Punkt werden Sie komische Sans oder Papyrus verwenden, einfach nicht.

Farben

Sie sollten sich an ein paar Hauptfarben, sie sollten sich gegenseitig ergänzen und nicht zu grell, meine Entscheidungen, wo weiß, schwarz, rot und ein Hauch von grau.

Bilder

In Ihrem Kopf und Hintergrund können Sie Bilder - gut können Sie sie irgendwo wirklich setzen, wenn Sie ein Bild in Ihrem Kopf haben, würde ich vorschlagen, etwas abstrakt und interessant oder etwas einfach und repräsentativ für Ihre Website, wie meine ickle jackalope ...

Achten Sie auf Ihre Verwendung von Bildern, wenn sie richtig gemacht werden, können sie wirklich effektiv, mehrere Bilder in einem Header funktioniert nicht oft aber ein großes Bild für die Website kann wirklich gut funktionieren, können Hintergrundbilder wirklich effektiv verwendet werden, aber Bild-Auswahl ist wichtig, etwas natty oder zu beschäftigt für eine visuell verwirrende Website zu machen.

Schritt 5: Entwerfen.

Erstellen Sie Ihre eigene Website mit Dreamweaver

Feuern Sie herauf photoshop ...

Starten Sie klopfen einige Ideen.

Um dies zu tun machen eine neue Datei, verwende ich 1024 X 786 für diese Seite, weil es 1024 Pixel breit ist. Mit dem Raum unten können Sie mehr von einer Vorstellung davon, wie Ihre Seite purzeln könnte.

So machen Sie ein neues Dokument so breit wie die Website.

Füllen Sie den Hintergrund mit Ihrer Hintergrundfarbe, machen Sie nun eine neue Ebene und benennen Sie den Ebenenkopf.

Ziehen Sie das Auswahl-Tool und machen Sie ein Feld die Größe, die Sie Ihre Kopfzeile zu sein, wird als Hinweis, es sollte nicht zu groß sein, meine Nav-Bar und Header kommen in nur schüchtern von 150px zusammen, würde ich sagen, 200-250 würde Die Obergrenze ...

Wenn Ihr Header die gleiche Farbe wie Ihr Hintergrund noch füllen Sie es mit der Farbe. So gibt es ...

Titel Ihrer Header, wählen Sie Ihre Schriftart aus dem letzten Schritt, können Sie dies ziemlich groß - es sollte lesbar sein und erkennbar über jemandes Schulter am wenigsten. Ich würde versuchen, ein paar Farben mit der Text-Ebene vor dem Stecken zu einem. Legen Sie es, wo es gut aussieht und verknüpfen Sie es mit der Header-Ebene - wir tun dies, so dass, wenn Sie eine bewegen Sie beide, durch die Verknüpfung von Schichten zusammen können Sie sie in Ordnung leicht zu halten. Alternativ können Sie Schichtgruppen verwenden.

Schritt 6: Erstellen Sie Ihre Designs contd.

Erstellen Sie Ihre eigene Website mit Dreamweaver

Fügen Sie alle Bilder, die Sie in Ihrem Header haben, versuchen Sie es bewegen und testen Sie verschiedene Positionen - ursprünglich mein Jackalope war am Ende des Header-Text, ich glaube, es endete schauen viel besser auf der rechten Seite.

Nun richten Sie Ihre Navigationsleiste, neue Ebene, wählen Sie den Bereich, den Sie für sie wollen - füllen Sie es mit der gewünschten Farbe, jetzt eine Text-Ebene, wählen Sie Ihre Schriftart und schreiben Sie in jedem Ihrer Links, versuchen Sie verschiedene Aufträge zu sehen, was Funktioniert am besten, Ihr Home-Link sollte immer zuerst auf der linken Seite sein, es sei denn, es ist in einer Sprache, wo das Schreiben von rechts nach links gelesen wird.

Tun Sie ein wenig bewegen, versuchen und erarbeiten das beste Layout. Jetzt speichern als .PSD.

Beginnen Sie nun - neue Farbkombinationen, leicht unterschiedliche Layouts und Schriften, machen Sie ein paar verschiedene Vorlagen.

Nach der Herstellung ein paar verschiedene, verlassen Sie den Computer und etwas anderes für eine Weile tun, auch darauf schlafen - kommen Sie zurück und wählen Sie Ihre Lieblings-, suchen Sie nach Möglichkeiten, es könnte verbessert werden, bevor ...

Schritt 7: Nehmen von Photoshop zu Dreamweaver

Erstellen Sie Ihre eigene Website mit Dreamweaver

Oder was auch immer Programme, die Sie machen den Sprung mit ...

Öffnen Sie Ihre Lieblings-Vorlage und mit dem Slice-Tool arbeiten, machen Sie ein Slice, das den gesamten Header umfasst.

Jetzt schneiden Sie Ihre Navigationsleiste, schneiden Sie jeden Link als Scheibe, schneiden Sie die Enden auf beiden Seiten zu, um einen schönen sauberen Ausschnitt zu schaffen - lassen Sie das große leere Stück an der Unterseite dort für jetzt.

Zum Exportieren der Seite müssen Sie gehen, um für Web zu sparen, verwenden Sie gif-Einstellungen (Größe ist am besten kleinere), und wenn Sie auf Speichern schlagen, um das Dropdown-Bild zu schlagen, um Bilder und HTML zu speichern.

An dieser Stelle sollten Sie haben oder ein Dokument in meinen Dokumenten - nennen Sie diesen Ordner "killerjackalope Website" als Beispiel, speichern Sie die Seite hier, PS wird automatisch ein Bild Ordner, was praktisch ist.

Schritt 8: Machen Sie Ihre Website

Erstellen Sie Ihre eigene Website mit Dreamweaver

Starten Sie das gewählte Editier- und Site-Management-Programm.

Jetzt gehen Sie zur Website> Neue Website, klicken Sie darauf.

Legen Sie Ihren lokalen Stammordner zu dem, den Sie erstellt haben, und Ihrem Standardordner für den Ordner, der für Ihr Basisdesign erstellt wurde.

Von nun an, alles, jedes Bild und andere Datei im Zusammenhang mit Seiten in Ihrer Website geht in diesen Ordnern, Ich mache einen Ordner für Vorlagen, eine für Seiten und eine andere genannt Skripte für alle Skripte DW muss oder irgendwelche, die ich hinzufügen müssen Seiten.

Für mein eigenes Projekt, Blogposts und Fotoseiten gibt es Unterordner im Seitenordner.

Mein Bildordner hat Unterordner für Projektbilder, Fotomappen und einen Ordner mit dem Namen inpage, wo ich eine von Bildern behalte.

Schritt 9: Ihre ersten Vorlagen

Erstellen Sie Ihre eigene Website mit Dreamweaver

Öffnen Sie diese Base-Seite in Ihrem Editor, löschen Sie das große leere Platz unter dem Header für einen Start.

Nun für Ihre Haupt-Vorlage würde ich vorschlagen, eine bearbeitbare Region namens Inhalte, speichern sie als Vorlage und rufen sie an, dass dies die Vorlage, die Sie tun können, was Sie wollen mit.

Machen einige mehr fokussiert Vorlagen sinnvoll - zum Beispiel meine Blog-Vorlage hat eine Tabelle in ihr, mit einer Hauptspalte für Inhalte, gibt es eine bearbeitbare Region gibt, ein Anzeigenfeld auf der rechten Seite und unten, dass Links zu allen meinen letzten Beiträge, so dass jeder Zeit Ich füge eine neue ein Ich aktualisiere nur meine Vorlage.

Ich habe ein ähnliches Setup für Projekte.

Für jede Art von Vorlage müssen Sie es einrichten, bevor Sie Ihre Content-Seiten, das wird Ihnen eine Menge Trauer später sparen, können Sie sagen, ich muss alle meine Blog-Seiten zu aktualisieren und tun es mit einer Vorlage .

Schritt 10: Hauptseiten

Sie sollten eine neue Datei aus der entsprechenden Vorlage für jede Ihrer Hauptseiten - machen Sie sich keine Sorgen über das Hinzufügen von Inhalten noch, wir brauchen nur die Dateien, um dort zu sein.

Öffnen Sie nun die Vorlagen und verknüpfen Sie die Dateien mit den entsprechenden Navigationsbildern.

Speichern Sie die Vorlagen und sagen Sie Ja zum Aktualisieren von Seiten.

Beim Öffnen Ihrer Seiten sehen Sie die Links wurden hinzugefügt ...

Schritt 11: Erstellen Ihrer Seiten

Erstellen Sie Ihre eigene Website mit Dreamweaver

Sie müssen Zeit für diese, nicht nur werfen alle alten Müll in Ihre Homepage, sollte es eine Seite voll der besten Ihrer Website - die beliebtesten oder interessant Themen auf Ihrer Website.

Hier sind einige allgemeine Inhaltsregeln:

- Überprüfe deine Rechtschreibung
- Verwenden Sie Absätze
- Brechen Sie Text mit entsprechenden Bildern
- Link-Inhalt zusammen, wenn Sie eine Seite auf Kekse und eine andere auf Tee dann verknüpfen sie mit einer Linie wie "schauen Sie sich diese Seite über Tee, wenn Sie etwas zu dunk diese ehrfürchtigen Kekse in"
- Sie haben die Verwendung von kursiv, fett, tiefgestellt, hochgestellt, alles, nicht automatisch auf Caps lock.
- Machen Sie Ihre Inhalte interessant, aber machen es Ihre eigenen

Schritt 12: Indexseite

Erstellen Sie Ihre eigene Website mit Dreamweaver

Sie sollten eine Index-Seite in Ihrem Root-Ordner, kann es einfach eine Kopie der Homepage sein, oder Sie könnten eine Intro-Animation oder einige solcher haben.

Um eine Kopie der Homepage zu erstellen, öffnen Sie einfach die Homepage, klicken Sie auf Speichern unter und navigieren Sie zum Seitenstamm, rufen Sie den Index an und speichern Sie sie. Vergewissern Sie sich, dass Sie auf Ja klicken, wenn Sie nach Links suchen - dies erspart Ihnen die Änderung Alle Links relativ.

Schritt 13: Hinzufügen von Bildern und Bildverwaltung.

Erstellen Sie Ihre eigene Website mit Dreamweaver

Bilder sind ein großer Teil einer Website, sollten Sie einen Griff auf sie zu halten.

Ich würde vorschlagen , Ändern der Bildgröße Tool wie das Herunterladen PIXresizer mit diesem zu helfen.

Für meine Website sind die Bilder nicht breiter als 720px, das ist, weil meine breitesten Inhalt Spalten sind, dass breite, Größe sie auf diese Größe ist logisch.

Wenn Sie die Größe eines Bildes in einem WYSIWYG-Editor fast alle von ihnen das Bild auf die neue Größe, aber Ihre Besucher noch eine größere Datei herunterladen, um es zu sehen, die hart ist, auf Ladezeiten und eine Verschwendung von Ihrer Bandbreite.

Denken Sie daran, was ich schon sagte, über die Website-Ordner? Das ist wirklich wichtig, alles außerhalb es wird nicht auf Ihre Website zapped und Sie werden mit einem defekten Bild Link links.

Schritt 14: Einbetten von Video und anderen Inhalten

Erstellen Sie Ihre eigene Website mit Dreamweaver

Einbettung von Video, instructables und alle Inhalte ist ziemlich einfach.

Setzen Sie den Cursor an die Stelle, an der Sie das Video in der Entwurfsansicht benötigen, jetzt in die Codeansicht wechseln und in den Einbettungscode für Ihren Inhalt einfügen.

Wenn Sie zur Designansicht zurückkehren, sehen Sie ein Kästchen, in dem sich das Video befinden sollte, wenn Sie es einfach überprüfen möchten, klicken Sie einfach darauf und unten in den Eigenschaften sehen Sie ein Kästchen mit einem grünen Pfeil, das mit einem Klick markiert ist Dass und das Video sollte laden, wird es ziemlich langsam in den Editor, weil es nicht ein Web-Browser.

Wenn Sie das Video ein bisschen verschieben müssen, können Sie es einfach in der Entwurfsansicht ziehen, da es dort ist.

Schritt 15: Einrichten von Hosting und FTP

Erstellen Sie Ihre eigene Website mit Dreamweaver

Einrichten eines Host ist ziemlich einfach, ich bin mit Zymic im Moment 110mb.com gestorben, die ich früher, ala meine ältere Webseite instructable.

Sobald Sie Ihre Details von ihnen erhalten, werden sie irgendwo in Ihrem Konto angezeigt, das Sie zum Geschäft erhalten können.

Öffnen Sie den Seitenbereich und klicken Sie auf Bearbeiten, jetzt gehen Sie zu Remote-Info und fügen Sie Ihre Info in der Einrichtung.

Sie sehen unten die Box, die ich meine, ich habe einige Felder ausgeblendet, aber es ist eine ziemlich einfache Login-Box.

Schritt 16: Hochladen der Website

Erstellen Sie Ihre eigene Website mit Dreamweaver

Hochladen Ihrer Website ist relativ einfach, klicken Sie mit der rechten Maustaste auf die Website oder klicken Sie auf die Schaltfläche mit nichts markiert.

Sie erhalten eine Aufforderung "möchten Sie die gesamte Website?" Hit ja und gehen Sie für einen Spaziergang oder etwas.

Wenn es etwa zehn Minuten später ist, können Sie Ihre Website auf den Servern sehen, kann es länger dauern, je nachdem, wie schnell sie aktualisieren, wenn es nicht geändert wird nach einer halben Stunde leeren Sie Ihren Web-Cache und versuchen Sie dann.

Schritt 17: Zusätze und kleine Berührungen

Erstellen Sie Ihre eigene Website mit Dreamweaver

Es gibt viele kleine Dinge, die eine Website ein wenig mehr, Sie machen können. Sie können auch Social-Media-Plugins auf Ihre Website hinzufügen, um zu werben, oder fügen Sie Werbung hinzu.

- Fügen Sie eine benutzerdefinierte 404-Fehlerseite hinzu

- Füge ein Facebook-Profil-Abzeichen hinzu
- Fügen Sie eine Facebook-ähnliche Schaltfläche
- Google AdSense-Anzeigen hinzufügen

Diese drei sind im Wesentlichen nur die Einrichtung auf ihrer Website und Einfügen von Code in.

Related Reading