Auf Thema antworten 2026

JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Beitrag: <blockquote data-quote="draupnir" data-source="post: 2743544" data-attributes="member: 245968">Guten Morgen Aeon,zum Programmieren von Website ist Dreamweaver das Werkzeug. Photoshop, Illustrator oder InDesign bieten nach meinem Verständnis bestimmte unterstützende Hilfsmittel an. (Adobe hat ja vor langer Zeit Fireworks abgeschafft und nie einen echten Ersatz dafür gebracht oder dessen Funktionen in einem anderen Programm eingebaut.)Eine responsive Webseite hat bestimmte Punkte, an denen von der einen auf eine andere der Darstellung umgeschaltet wird. Diese Veränderung läuft über CSS.Mein Vorgehen für wäre, dass ich in Photoshop mir zuerst ein Dokument in der maximalen Breite anlege, z. B. 1600 px, die die Webseite haben soll. Die Höhe ergibt sich später aus dem Inhalt, hier in Photoshop würde ich ein übliche Höhe eintragen.Dann würde ich mir (verschiedenen farbige) Rechtecke erstellen für die nächsten Breiten, die die Website haben soll. Die Breiten ergeben sich aus den benutzen Endgeräten wie Laptop, Tablett und Smartphone. Die Rechtecke, die die Grenzen der kleineren Layouts anzeigen werden im Arbeitsdokument zentriert. Auf diese Grenzen kannst du nun senkrechte Hilfslinien ziehen.Nun würde ich verschiedene Ebenen anlegen und zwar für jede Bildschirmgröße eine.Dann hast Du eine Basis für Deine Gestaltung.Ich habe beim Entwerfen von Website immer erst nur mit Rechtecken gearbeitet, wobei diese den späteren div-Boxen entsprechen. Dabei hatte ich ein Farbschema: grau waren die fixen Bereiche, orange die Bereiche, die automatisch gefüllt wurden aus der Datenbank (CMS) und grün die Bereiche, die mit Text und Bild gefüllt wurden und den eigentlichen Inhalt der Seite ausmachten. Dies stammt noch aus einer Zeit von XHTML und CSS 2. Heute gibt es viele andere, schöne Möglichkeiten.<a href="https://abload.de/image.php?img=website3fj8o.png" target="_blank"><img src="https://abload.de/img/website3fj8o.png" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a># media siehe <a href="https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/" target="_blank">https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/</a>Now let’s see some common breakpoints for widths of devices:320px — 480px: Mobile devices481px — 768px: iPads, Tablets769px — 1024px: Small screens, laptops1025px — 1200px: Desktops, large screens1201px and more — Extra large screens, TVund siehe <a href="https://www.w3schools.com/css/css_rwd_mediaqueries.asp" target="_blank">https://www.w3schools.com/css/css_rwd_mediaqueries.asp</a>weitere im Web bei Tante Google.Viel Erfolg,– j.</blockquote> Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung: Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?