1. Hintergrundanalyse
Für professionelle Webseitenproduzenten, die komplexe Webseiten in einer visuellen Umgebung erstellen möchten, hat sich Dreamweaver nach und nach zu einem Tool zur Bearbeitung von Webseiten entwickelt und ist für Profis die beste Wahl zum Schreiben von Webseiten. Laut einer Umfrage von Macromedia hat Dreamweaver derzeit mehr als 700.000 Nutzer und liegt damit gemessen am Marktanteil an erster Stelle unter den Web-Editing-Tools und lässt Konkurrenten wie „Adobe GoLive“ und „NetObjects Fusion“ weit hinter sich. Daher ist allgemein damit zu rechnen, dass die Zahl der Dreamweaver-Nutzer weiter steigen wird.
Angesichts dieser überwältigenden Beliebtheitsrate ist es denkbar, dass die integrierten Funktionen von Dreamweaver immer umfangreicher, reichhaltiger und vollständiger werden. In unserer Einführung dieses Mal gibt es einige neue Funktionen, die Webseitenerstellern schnelleres Design, einfachere Codierung und integriertere Funktionen bieten. Ohne weitere Umschweife stellen wir hier vor, wie Sie einige Funktionen in Dreamweaver sinnvoll nutzen können. Nachfolgend finden Sie zwölf Geheimtechniken, die in vier Themenbereiche unterteilt werden können. Dies sind: Entwerfen von Webseiten (Dreamweaver verfügt über flexible Seitendesignfunktionen), Verwenden von Dreamweaver mit anderen Macromedia-Produkten (Erstellen von Animationen und Bildern ohne Hilfe), Anpassen der Benutzeroberfläche (Genießen einer personalisierten Benutzererfahrung) und schließlich Beitritt zu Dreamweaver Extensions ( Laden erweiterter erweiterter Funktionen in Webseiten).
2. Tipps zum Entwerfen von Webseiten:
Ob Sie die ursprüngliche HTML-Syntax zum Wort-für-Wort-Schreiben von Webseiten verwenden oder standardisierte Fenster für die visuelle Gestaltung von Webseiten verwenden möchten, die folgenden Tipps können nützlich sein.
Tipp 1: Machen Sie die Webseitengröße flexibler.
Einige Webentwickler nennen die unten vorgestellte Technik „flüssig“, hier nennen sie sie jedoch die „elastische Erweiterungstechnik“. Dabei handelt es sich um eine Technik, die die Größe der Webseite anpasst, wenn sich die Größe des Browserfensters des Besuchers ändert. Wenn das Fenster zu groß ist, entsteht daher kein Leerraum, da sich das Fenster nach oben und unten bewegt An den Rändern erscheinen keine Balken. Tatsächlich passen die meisten einfachen Webseiten die Seitengröße automatisch an die Größe des Browserfensters an. Wenn jedoch viele verschiedene Frames und Tabellen auf der Webseite verwendet werden, ist es schwierig, die Webseitengröße automatisch anzupassen flexibel anpassbar. Normalerweise verwenden Webdesigner eine Mischung aus Frames mit fester Breite und GIF-Bildern als Intervalle zum Entwerfen von Webseiten. Auf diese Weise bleibt die Seitengröße unabhängig davon, ob sie Internet Explorer oder Netscape Navigator verwenden, fest und läuft nicht weg. Mit Dreamweaver 4.0 können Sie ganz einfach Webseiten entwerfen, die sich automatisch flexibel anpassen. Wie geht das?
★Spezifische Methode: Öffnen Sie die Webseite über die Schaltfläche in der Werkzeugpalette (Objektpalette) und wechseln Sie zur „Layout-Ansicht“. Zu diesem Zeitpunkt können Sie die Spaltenbreite des Textfelds sehen. In der Mitte des Felds befindet sich über jeder Spalte ein kleiner Pfeil. Klicken Sie auf den kleinen Pfeil über der Spalte, für die Sie die flexible Anzeige festlegen möchten Wählen Sie „Spalte als Spalte automatisch strecken“ festlegen. (Stellen Sie die Spaltenbreite für die automatische Anpassung so ein, dass sie auf eine Spalte beschränkt ist.) Zu diesem Zeitpunkt erscheint über dem Spaltenfeld eine Wellenlinie anstelle der ursprünglichen Zahl, die die Spaltenbreite angibt. Dreamweaver erstellt automatisch ein leeres Bild mit festem Layout, das durch zwei lange leere Tabellen über der Spalte dargestellt wird. Auf diese Weise wird das Layout automatisch ausgefüllt und die flexible Layouteinstellung abgeschlossen. (Wenn Sie zum ersten Mal ein leeres Bild hinzufügen, wird ein Dialogfeld angezeigt, in dem Sie gefragt werden, ob Sie ein integriertes Bild verwenden möchten. Für den besten Effekt empfehlen wir, dass Sie Dreamweaver automatisch eines erstellen lassen, andernfalls nicht (Sie müssen ein leeres Bild verwenden, um das Layout auszufüllen.)
Tipp 2: Erstellen Sie eine persönliche Palette.
Das neue „Assets-Bedienfeld“ (Eigenschaften-Bedienfeld) von Dreamweaver ist ein neues Tool, mit dem Dateien nach Dateiformaten wie Bildern, Stilen usw. verwaltet werden können. , beim Bearbeiten einer Website.
★Spezifische Methode: Wenn Sie eine neue Site definieren (klicken Sie auf Site Neue Site), werden alle Arten von Objekten automatisch den entsprechenden Tabellenfeldern im „Asset-Bedienfeld“ hinzugefügt. Dieses neu hinzugefügte Eigenschaftskontrollfeld „Assets-Bedienfeld“ verfügt außerdem über ein Farbfeld, in dem alle auf Ihrer Website verwendeten Farben gespeichert werden, einschließlich Textfarbe, Hintergrundfarbe und Hyperlink-Farbe. Dies ist eine Farbpalette für die Website-Navigation, die auf Benutzer zugeschnitten ist. Starten Sie einfach das „Assets-Bedienfeld“ (wählen Sie zuerst „Fenster“ aus und klicken Sie dann auf „Assets“), klicken Sie dann auf die kleine Farbrolle auf der linken Seite und Sie sehen eine Vielzahl von Farboptionen für Ihre Website. Natürlich können Sie diese Farben auf bestimmte ausgewählte Texte übertragen. Selbst wenn Sie eine bestimmte Farbe auswählen, werden der Hexadezimalwert der Farbdichte und die drei Primärfarbkontrastcodes (RGB) auf dem Bildschirm angezeigt. Wenn Sie die Symbolleiste der Palette verkleinern möchten, können Sie sogar nur bestimmte Farben zu den „Favoriten“ der Palette hinzufügen. Markieren Sie einfach die ausgewählte Farbe und klicken Sie im Fenster auf die Schaltfläche „Zu Favoriten hinzufügen“ (die Schaltfläche unten rechts), und schon sind Sie fertig.
Tipp 3: Erstellen eines Popup-Menü-Navigationssystems
Ursprünglich erforderte die Erstellung eines Popup-Menü-Navigationssystems eine Menge JavaScript-Syntax und -Techniken, aber wenn Sie über Dreamweaver und Fireworks Studio verfügen, können Sie dies ganz einfach und schnell tun.
★Spezifische Methode: Starten Sie zunächst in „Fireworks“, wählen Sie ein Bild aus und klicken Sie dann im Dialogfeld „Popup-Menü festlegen“ auf „Popup-Menü einfügen“. Sie können den Namen der Elemente (Elemente) eingeben und auf klicken Klicken Sie auf die Schaltfläche „Plus“, um den Artikel hinzuzufügen. In der sich öffnenden Informationsbox können Sie weiterhin detaillierte Einstellungen vornehmen, wie z. B. die für das Projekt zu verwendenden Texte und Hyperlinks festlegen. Natürlich können Sie auch Untermenüs hinzufügen und die Einstellungen für die nächste Ebene neu anordnen. Wenn Sie fertig sind, klicken Sie auf „Weiter“, um mit der Einstellung verschiedener Parameterwerte wie Farbe, Schriftart usw. fortzufahren. Nachdem das Menü fertiggestellt ist, können Sie eine Vorschau sowohl der HTML-Syntax als auch der Bilder anzeigen. Klicken Sie erneut auf „Fertig stellen“. Wenn sich die Maus zu diesem Zeitpunkt zum Originalbild bewegt, wird eine Liste mit den Inhalten des Menüsystems angezeigt. Wenn Sie dann die erstellte Datei exportieren, erstellt „Fireworks“ automatisch alle HTML-, Javascript- und Bilddateien, die Dreamweaver verwenden muss.
Tipp 4: Bringen Sie die Bilder in Bewegung.
Wenn Sie Dreamweaver und Fireworks Studio gleichzeitig installiert haben, werden Sie von der perfekten Kombination dieser beiden Softwareprogramme begeistert sein. Auch wenn Sie kein professioneller Bilddesigner sind, möchten Sie möglicherweise einige GIF-Bilder ändern, um sie beim Entwerfen von Webseiten lebendiger zu gestalten. Mit Dreamweaver können Sie Animationen erstellen, ohne Hilfe anfordern zu müssen.
★Spezifische Methode: Wählen Sie das zu ändernde Bild im Standardfenster aus und klicken Sie dann im „Eigenschafteninspektor“ auf „Bearbeiten“. Wenn Sie Dreamweaver mit „Fireworks“ installiert haben, ist „Fireworks“ der Standard-Bildeditor von Dreamweaver und die Bilder werden automatisch in „Fireworks“ geladen. (Wenn Sie genau hinschauen, werden Sie feststellen, dass Text und Grafiken wie „Bearbeiten aus Dreamweaver“ auf dem Fireworks-Bildschirm erscheinen, was darauf hinweist, dass Sie Bilder in Dreamweaver bearbeiten können.) Okay, klicken Sie jetzt auf das Bild, das Sie bearbeiten möchten in „ Feuerwerk“, wählen Sie „Animate-Animate-Auswahl ändern“. Vervollständigen Sie als Nächstes die Einstellungen im „Dialogfeld „Animieren““ und wählen Sie die Anzahl der Frames der Animation, die Richtung der Animationsbewegung, die Transparenz und andere Einstellungen aus. Sie können auch auf das Werkzeug „Rahmen“ klicken, um die Bewegungsgeschwindigkeit festzulegen, und das Bedienfeld „Objekt“ auswählen, um die Einstellungen zu ändern. Wenn Sie eine Datei exportieren möchten, klicken Sie einfach auf die Symbolleiste „Optimieren“ und wählen Sie als Dateityp „Animiertes GIF“ aus. Nach Abschluss exportiert „Fireworks“ das Bild automatisch mit optimierten Einstellungen, aktualisiert das GIF-Bild automatisch und zeigt das aktualisierte Bild in Dreamweaver an. Klicken Sie auf „Dateivorschau im Browser“, um eine Vorschau des schönen Bildes anzuzeigen, das Sie gerade im Browser erstellt haben.
Tipp 5: Sorgen Sie dafür, dass die Schaltfläche einen blinkenden Effekt hat.
In Dreamweaver können Sie ein Flash-Schaltflächenobjekt mit einem blinkenden Effekt erstellen, ohne über Blitze zu verfügen. Dreamweaver verfügt über mehrere integrierte Flash-Schaltflächenobjekte, mit denen verschiedene Schaltflächenformen erstellt werden können.
★Spezifische Methode: Klicken Sie auf „Flash-Schaltfläche für interaktive Bilder einfügen“, um die integrierten Schaltflächen anzuzeigen. Sie können sogar mit der Maus auf die Schaltflächenform zeigen, die Sie im Dialogfeld verwenden möchten, und dann sehen, wie sie im Browser funktioniert. Wählen Sie mit dem Mauszeiger die zu verwendende Schaltflächenform aus und geben Sie dann nacheinander Parameter wie Text, Schriftart, Farbe, Hyperlink usw. auf der Schaltfläche oder einen benutzerdefinierten Dateinamen ein. Drücken Sie OK. Als nächstes wird eine Datei im „SWF“-Format generiert und die Datei automatisch in Ihre Webseite importiert. Klicken Sie auf die fertige Datei und Sie sehen die Eigenschaften der Datei im „Eigenschafteninspektor“. Wenn Sie beim Anzeigen von Dateiattributen die Liste der Dateiattribute erweitern, wird „Abspielen“ angezeigt. Nach dem Klicken können Sie den Blinkeffekt der Schaltfläche in der Vorschau anzeigen, ohne den Browser zu öffnen.
Tipp 6: Fließtext erstellen
Das Hinzufügen von Fließtext zu einer Webseite ist so einfach wie das Hinzufügen der Flash-Schaltfläche, die wir gerade eingeführt haben. Auch ohne die Installation von Flash können Sie dies mit den neuen Funktionen von Dreamweaver problemlos tun. Webseitenersteller, die häufig HTML-Syntax zum Schreiben von Webseiten verwenden und keine Erfahrung mit interaktiven Medien haben, können in Flash problemlos kompakte Fließtexte erstellen. Diese neue Funktion kann den Webseiten eine gewisse Interaktivität beim Surfen hinzufügen, ohne dass es zu Kompatibilitätsproblemen kommt. ★Spezifische Methode: Klicken Sie auf „Flash-Text für interaktive Bilder einfügen“ und geben Sie dann nacheinander die Parametereinstellungen ein (z. B. Text, Schriftstil, Schriftfarbe und Schriftgröße, deren Effekt Sie ändern möchten usw.).
Tipp 7: Tastaturkürzel ändern
Dreamweaver ermöglicht es Benutzern, die Benutzeroberfläche anzupassen, und dieses Design ist sehr flexibel. Benutzer können beispielsweise das Menü ändern, indem sie selbst Programme schreiben oder Objekte hinzufügen. Sie müssen kein Experte sein, um Tastaturkürzel zu ändern, da Dreamweaver über eine grafische Benutzeroberfläche namens „Tastaturkürzel-Editor“ verfügt.
★Spezifische Methode: Klicken Sie einfach auf „Tastaturkürzel bearbeiten“. Das Dialogfeld lädt und listet die änderbaren Tastenkombinationen auf, sodass Sie die Tastenkombinationen auf die Einstellungen ändern können, die Sie gewohnt sind. Um eine Tastenkombination zu ändern, verwenden Sie einfach das Dropdown-Menü des aktuellen Satzes und der Befehlsleiste, suchen Sie unter den vorhandenen Befehlen den Befehl, den Sie ändern möchten, und wählen Sie dann die aktuelle Tastenkombination aus. Diese wird in der Liste der Tastenkombinationen angezeigt. in der Liste. Wenn Sie außerdem Tastenkombinationseinstellungen hinzufügen möchten, können Sie auf „Plus“ klicken, die neue Tastenkombination eingeben, die Sie auf der Tastatur verwenden möchten, und auf „Ändern“ klicken. Gleichzeitig können Sie auch eine Tastenkombination auswählen und auf „Minus“ klicken, um eine Tastenkombination zu entfernen.
Tipp 8: Setzen Sie die Spalte „Site-Fenster“ zurück.
★ Spezifische Methode: Klicken Sie einfach im „Site-Fenster“ auf „Spalten der Dateiansicht anzeigen“, um die Größe und das Erscheinungsbild der Spalte „Site-Ansicht“ anzuzeigen. Wählen Sie einen Feldnamen aus und verwenden Sie die Aufwärts- und Abwärtspfeile, um die Größe zu ändern, oder deaktivieren Sie „Feld anzeigen“, um das Feld auszublenden. Darüber hinaus können Sie auch Spalten hinzufügen und eigene Spaltennamen erstellen, indem Sie auf die Schaltfläche „Plus“ klicken. Alternativ können Sie eine Spalte mit einer „Design-Notiz“ verknüpfen, indem Sie im Dropdown-Menü eine vorhandene „Notiz“ auswählen.
Tipp 9: Sehen Sie sich den Originalcode der Webseite an
★ Spezifische Methode: Wenn Sie „Reilly Code Reference“ (Fensterreferenz) öffnen, um Eigenschaften oder Browserkompatibilität zu überprüfen, wird im Standardfenster „Reference Settings“ in kleinen Schriftarten angezeigt. Wenn Sie jedoch die rechte Taste in der oberen rechten Ecke des Fensters (direkt unter der Schaltfläche „Schließen“) drücken, wird eine Reihe von Dropdown-Menüs angezeigt, in denen Sie die ursprüngliche Code-Schriftgröße (klein bis mittel und groß) auswählen können. Die Wahl großer Schriftarten ist für die Augen weniger „missbräuchlich“, da Sie beim Lesen des ursprünglichen HTML-Codes keine Lupe halten müssen, um auf den Bildschirm zu schauen.
Tipp 10: Fügen Sie eine Flash-Schaltfläche hinzu
. In Tipp 5 haben wir vorgestellt, wie Sie 20 voreingestellte Schaltflächentypen verwenden, um Flash-Schaltflächen in Dreamweaver zu erstellen. Dies ist eine Methode, die keine Installation zusätzlicher Dateien oder Programme erfordert. Im Folgenden finden Sie eine weitere Methode, nämlich die Installation von „Fireworks-Buttons“. Diese Erweiterung hat den gleichen Effekt wie Tipp 5.
★Spezifische Methode: Gehen Sie zu „Exchange for Dreamweaver“ (Dreamweaver Extension Exchange Center), geben Sie das Stichwort „InstaGraphics Extensions for Dreamweaver“ ein und laden Sie dann diese ca. 577 KB große Datei herunter. Wechseln Sie zu Dreamweaver, wählen Sie „Befehle, Erweiterungen verwalten“ und dann „Datei, Erweiterung installieren“, um die Installation zu starten. Sobald Sie „Dreamweaver“ neu starten, gibt es sechs neue und interessante Schaltflächenformate, darunter „Surfboard“ und „Bulletbar“. Verwenden Sie zu diesem Zeitpunkt einfach den Befehl „Interaktive Bilder-Feuerwerksschaltfläche einfügen“, um eine coole Schaltfläche zu erstellen. Sie können auch „Befehle „Aufzählungszeichen in Bilder konvertieren““ und „Befehle „Text in Bilder konvertieren“ verwenden. Beide oben genannten Methoden können „Fireworks“ automatisch ausführen.
Tipp 11: Fügen Sie die Funktion „Als Favoriten festlegen“ zur Webseite hinzu. ★ Spezifische Methode: Suchen Sie in „Exchange“ und Sie finden die erweiterte Funktion „Zu Favoriten hinzufügen“. Diese kleine Datei belegt nur 3 KB und der Download dauert nicht allzu lange. Befolgen Sie dann die gleichen Schritte, um sie über den „Erweiterungsmanager“ zu laden (Befehle „Erweiterungen verwalten“, „Erweiterung installieren“). Starten Sie dann Dreamweaver neu. Diese neu geladene Erweiterungsdatei fügt Dreamweaver eine neue Funktion hinzu. Wenn Sie diese Funktion „Zu meiner Sammlung hinzufügen“ zu Ihrer Webseite hinzufügen, kann der Benutzer, wenn er Ihre Website sieht, Ihre Website einfach mit nur einem Klick zu „Meine Sammlung“ (oder persönlichen Lesezeichen) seines Browsers hinzufügen. Das Coolste ist außerdem, dass Sie auch den Namen „Meine Favoriten“ und das kleine Symbol anpassen können, das vor dem Namen „Meine Favoriten“ angezeigt wird (normalerweise das kleine Symbol vor „Meine Favoriten“) IE ist der Standardwert von IE. Wenn Sie ein kleines Symbol selbst entworfen haben, wird es schillernder. Beachten Sie, dass diese Funktion nur Browser mit IE 4.0 und höher unterstützt. Wählen Sie einfach das Bedienfeld „Verhalten“ im Menü „Windows“, gehen Sie dann zum Dropdown-Menü „IE-Funktion“ und klicken Sie auf diese Funktion, um diese coole Funktion ganz einfach zu aktivieren.
Tipp 12:
Wenn Sie ein Formular erstellen möchten, müssen Sie sich noch die Zeit nehmen, den Originalcode der Webseite wörtlich zu schreiben, es gibt bereits eine vorgefertigte
Methode: Gehen Sie zu Tauschen Sie die „Form Builder-Erweiterung“ aus und laden Sie sie herunter. Es gibt vorgefertigte Tabellen, mit denen Sie Tabellen sofort kopieren können, die Folgendes umfassen: Land, Geschlecht, Familienstand, Altersgruppe und andere Kategorien. Gehen Sie zu Exchange, um diese kleine (nur 11 KB) Datei herunterzuladen, und installieren Sie sie dann über den „Extension Manager“ (Befehle „Erweiterungen verwalten“, „Datei installieren Erweiterung“). Dann starten Sie Dreamweaver einfach neu, klicken Sie auf „FormBuilder einfügen“ und Sie finden die erweiterte Funktion unter (FormBuilder einfügen). Nach dem Klicken erscheint ein Dialogfeld, in dem alle anwendbaren Formatmenüs angezeigt werden, was sehr praktisch ist.