Nachdem Sie in Dreamweaver eine neue Seite mit einem CSS-Layout erstellt haben, stehen Ihnen scheinbar unendlich viele Möglichkeiten zur Bearbeitung zur Verfügung. Zunächst müssen Sie jedoch feststellen, welche Stile im Stylesheet den Elementen entsprechen, die Sie bearbeiten möchten.
Wie Sie sich wahrscheinlich vorstellen können, können Sie die Stile in einem CSS-Layout auf viele Arten bearbeiten, um Ihre eigenen Designs zu erstellen.
Nachdem Sie die vorhandenen Stile so angepasst haben, dass das grundlegende Seitendesign Ihren Wünschen entspricht, können Sie beliebig viele zusätzliche Stile erstellen.
Sie können diese grundlegenden Anweisungen für jedes CSS-Layout verwenden, das in Dreamweaver enthalten ist. Gehen Sie folgendermaßen vor, um Stile in einem CSS-Layout zu bearbeiten:
Öffnen Sie eine Seitendatei, die auf einem Dreamweaver-CSS-Layout basiert, und wählen Sie Fenster→CSS-Stile (oder klicken Sie auf die Registerkarte CSS-Designer, um das Bedienfeld zu erweitern).
Das CSS Designer-Bedienfeld wird geöffnet oder erweitert.
Klicken Sie auf den Namen des Stylesheets im Bedienfeld „Quellen“ oben in CSS Designer.
Alle Stile, die der neuen Seite zugeordnet sind, werden im Selektoren-Bedienfeld aufgelistet.
Wählen Sie den Namen eines beliebigen Stils aus, der im Bedienfeld „CSS Designer-Auswahlen“ aufgeführt ist.
Die entsprechenden CSS-Regeln, die für den Stil definiert sind, werden im Bedienfeld „Eigenschaften“ unten im Bedienfeld „CSS Designer“ angezeigt. Wenn Sie sich durch die Liste der Stile klicken und die entsprechenden Regeln überprüfen, erhalten Sie einen schnellen Überblick über das Design und sehen, wo die verschiedenen Seitenformatierungsoptionen gespeichert sind.
Die HTML5-Header-, .nav- und Footer-Tags steuern die Hauptabschnitte der Seite. Der Kopfzeilenstil enthält beispielsweise eine Regel, die die Hintergrundfarbe grün macht. Um also die Farbe des Kopfbereichs oben auf der Seite zu ändern, ändern Sie die Einstellung der Hintergrundfarbe in der Kopfzeilenregel.
Gehen Sie wie folgt vor, um seitenweite Einstellungen zu bearbeiten, z. B. die Hintergrundfarbe der Seite oder die Hauptschrift, Größe und Farbe des auf der Seite verwendeten Textes:
Wählen Sie im CSS Designer-Auswahlbedienfeld den Stil mit dem Namen body aus.
Die in der ausgewählten Stilregel definierten Eigenschaften werden im Eigenschaftenbedienfeld angezeigt.
Klicken Sie oben im Eigenschaftenfenster auf das T-Symbol und ändern oder fügen Sie die gewünschte Schriftart und andere Texteinstellungen hinzu.
Sie können das Schriftbild, die Größe, den Stil und das Gewicht ändern. Um den Abstand zwischen den Textzeilen zu ändern, ändern Sie die Zeilenhöhe.
Scrollen Sie nach unten zum Bereich Hintergrund des Eigenschaftenbedienfelds und verwenden Sie das Farbfeld im Feld „Hintergrundfarbe“, um eine Farbe für den gesamten Hintergrund der Seite anzugeben.
Alternativ können Sie einen beliebigen hexadezimalen Farbcode in das Feld Hintergrundfarbe eingeben oder mit der Pipette eine beliebige Farbe abtasten. Um ein Hintergrundbild hinzuzufügen, klicken Sie in das URL-Feld im Abschnitt Hintergrund und dann auf die angezeigte Schaltfläche Durchsuchen und wählen Sie das Bild aus, das als Hintergrund dienen soll. Verwenden Sie die Symbole für Hintergrund-Wiederholung, um festzulegen, wie das Hintergrundbild auf der Seite wiederholt werden soll.
Nehmen Sie alle anderen Änderungen oder Ergänzungen an der Stilregel vor.
Änderungen an Stilregeln im Eigenschaftenfenster werden automatisch gespeichert und auf Inhalte angewendet, die mit der Regel formatiert wurden.
Gehen Sie folgendermaßen vor, um die Breite oder andere Einstellungen der Hauptinhaltsbereiche zu ändern, die die Gesamtgröße der Seite sowie der Kopf-, Fuß- und Seitenleiste steuern:
So ändern Sie die Breite des gesamten Hauptdesignbereichs:
Klicken Sie im Bedienfeld „Selektoren“ des Bedienfelds „CSS Designer“ auf den .container-Stil.
Die Eigenschaften der .container-Stilregel werden im Eigenschaftenbedienfeld angezeigt, wo Sie auch den Stil bearbeiten können.
Ändern Sie die Größe im Feld Breite oder geben Sie eine neue Zahl für die gewünschte Seitenbreite ein.
Die Breite des Seitendesigns wird automatisch basierend auf der von Ihnen eingegebenen Größe geändert. Wenn Sie die Breite des .container-Stils ändern, ändern Sie die Breite des gesamten Designs, da alle
Tags und andere Elemente sind in der
mit dem .container-Stil formatiert – und sie sind alle so eingestellt, dass sie erweitert werden, um den .container . zu füllen
.
Um die Größe des Inhaltsbereichs der Seite zu ändern, wählen Sie den Stil namens .content aus und geben Sie die gewünschte Größe und andere gewünschte Optionen im Bedienfeld „Eigenschaften“ an.
Wenn Sie die Breite des Inhaltsbereichs in einem Layout ändern, das eine Seitenleiste enthält, müssen Sie auch die Breite der Seitenleiste ändern.
Um die Hintergrundfarbe eines beliebigen Stils auf der Seite zu ändern, klicken Sie auf den Namen des entsprechenden Stils und ändern Sie die Einstellungen im Abschnitt Hintergrund des Eigenschaftenbedienfelds.
In den CSS-Layouts in Dreamweaver ist die Seitenleiste beispielsweise in einem Stil namens .sidebar1 definiert. Um die Hintergrundfarbe zu ändern, klicken Sie also auf .sidebar1 im Selektorenbedienfeld, wählen Sie die Hintergrundkategorie im Eigenschaftenbedienfeld und wählen Sie die gewünschte Farbe aus. Um die Hintergrundfarbe der Kopfzeile zu ändern, wählen Sie auf ähnliche Weise den Stil mit der Bezeichnung Kopfzeile im Selektorbedienfeld aus und verwenden Sie das Farbfeld.
So fügen Sie der Kopfzeile ein Bild hinzu:
Wählen Sie das Platzhalterbild mit der Bezeichnung Logo einfügen aus und drücken Sie die Entf- oder Rücktaste.
Wählen Sie Einfügen →Bild→Bild und wählen Sie im Dialogfeld Bildquelle auswählen ein Bild aus.
Ersetzen Sie Text und fügen Sie Bilder in die Seitenleiste und die Hauptinhaltsbereiche ein.
Sie können auf jeder Seite, die aus einem CSS-Layout erstellt wurde, wie auf jeder anderen Webseite Text hinzufügen oder ersetzen und Bilder einfügen.
Wählen Sie Datei→Alle speichern, um die Seite und die Stile zu speichern.
Sie können das Snapshot-Tool in Adobe Acrobat CS5 verwenden, um sowohl Text als auch Bilder auszuwählen und ein Bild eines bestimmten Bereichs innerhalb einer PDF-Datei zu erstellen. Das Ergebnis wird allgemein als Screenshot eines Abschnitts in einer PDF-Datei bezeichnet. Das Ergebnis ist ein Bild, und Ihr Text ist kein […]
Die Messfunktionen von Photoshop CC wurden für Forscher und Wissenschaftler entwickelt und sind ziemlich leistungsstark. Sie können so ziemlich alles messen und die Anzahl der Dinge in einem technischen Bild zählen, vielleicht von einem Mikroskop oder Teleskop. Wenn Sie die genaue Größe eines Elements in einem Bild kennen, können Sie so ziemlich alles entdecken, […]
Wenn Sie die Verflüssigungswerkzeuge in Adobe Creative Suite 5 (Adobe CS5) Illustrator verwenden, können Sie Objekte biegen – also wellig, klebrig oder spitz machen – indem Sie einfache bis komplexe Verzerrungen erzeugen. Die Verflüssigungswerkzeuge können alle möglichen kreativen oder verrückten (je nachdem, wie Sie es betrachten) Verzerrungen an Ihren Objekten bewirken. Du […]
Wenn Ihr Adobe XD-Projekt Text enthält, können Sie die Texteigenschaften ändern. Zu diesen Eigenschaften gehören Schriftfamilie, Schriftgröße, Schriftstärke, Ausrichtung, Zeichenabstand (Kerning und Nachführung), Zeilenabstand (voreilend), Füllung, Rahmen (Strich), Schatten (Schatten) und Hintergrundunschärfe. Sehen wir uns also an, wie diese Eigenschaften angewendet werden. Über Lesbarkeit und Schriftart […]
Sie können InDesign verwenden, um QR-Code-Grafiken zu erstellen und zu ändern. QR-Codes sind eine Form von Barcodes, die Informationen wie Wörter, Zahlen, URLs oder andere Datenformen speichern können. Die Benutzerin scannt den QR-Code mit ihrer Kamera und Software auf einem Gerät wie einem Smartphone, und die Software verwendet […]
Genau wie in Adobe Illustrator bieten Photoshop-Zeichenflächen die Möglichkeit, separate Seiten oder Bildschirme innerhalb eines Dokuments zu erstellen. Dies kann besonders hilfreich sein, wenn Sie Bildschirme für eine mobile Anwendung oder eine kleine Broschüre erstellen. Sie können sich eine Zeichenfläche als eine spezielle Art von Ebenengruppe vorstellen, die mit dem Ebenenbedienfeld erstellt wurde. Es ist […]
Das Einwickeln von Text in Adobe Illustrator CC ist nicht dasselbe wie das Einwickeln eines Geschenks – es ist einfacher! Ein Textumbruch erzwingt einen Textumbruch um eine Grafik, wie in dieser Abbildung gezeigt. Diese Funktion kann jedem Stück ein wenig Kreativität verleihen. Die Grafik zwingt den Text, um ihn zu umbrechen. Erstellen Sie zunächst […]
Beim Entwerfen in Adobe Illustrator CC müssen Sie häufig eine Form mit einer genauen Größe haben (z. B. 2 x 3 Zoll). Nachdem Sie eine Form erstellt haben, können Sie die Größe am besten auf genaue Maße ändern, indem Sie das in dieser Abbildung gezeigte Bedienfeld „Transformieren“ verwenden. Lassen Sie das Objekt ausgewählt und wählen Sie dann Window→Transform to […]
Erfahren Sie, wie Sie in Illustrator Transparenz auf SVG-Grafiken anwenden. Erfahren Sie, wie Sie SVGs mit transparentem Hintergrund ausgeben und Transparenzeffekte anwenden.
Nachdem Sie Ihre Bilder in Adobe XD importiert haben, haben Sie nicht viel Kontrolle über die Bearbeitung, aber Sie können Bilder wie jede andere Form in der Größe ändern und drehen. Sie können die Ecken eines importierten Bilds auch ganz einfach mit den Ecken-Widgets abrunden. Maskieren Ihrer Bilder Durch das Definieren einer geschlossenen Form […]
