Vergleich von Inhalten

...

Mit dem Google-Developer-Tool hat der Anwender die Möglichkeit das Frontend, die Html und die CSS gleichzeit 

Frontend

Html

Css 

Alles auf einen Blick.

Responsive testen verschiedene Geräte simulierengleichzeitig zu betrachten.

Grundlagen zur CSS

In den CSS-Dateien werden alle Styling-Informationen einer Website gespeichert.

CSS                                                              HTML                                                                                              Frontend

Image Added                 Image Added                    Image Added

Der Multishop verwendet verschiedene CSS-Dateien.
Beispielsweise in der style.css ist Standard-Design definiert.
Die layout.css kann vom Shop-Admin im Backend bearbeitet werden. Hier definierte Stylings „überschreiben“ das Standard-Design.

Style.css                                                                                                                    Layout.css

Image Added                               ^{Image Added}

^{Der grundsätzliche Aufbau der Syntax ist immer gleich:}

#footer {

Image Added

Wie finde ich heraus, was ich ich in die CSS schreiben muss und wozu brauche ich die Google-Developer-tools?

Mit einem Rechtsklick auf der Maus öffnet man ein Popup-Fenster.

In diesem Fenster hat man mehrere Optionen, welche man wählen kann.

Die für Sie interessante Option ist  "Untersuchen".

Image Added

Wenn Sie auf "Untersuchen" geklickt haben, öffnet sich meist am rechten Rand auf der Website das Developer Tools Menü.

Jetzt haben Sie einen Überblick über die CSS, die HTML und das Frontend der Website.

Sie haben nun die Möglichkeit zu sehen, wie die Website strukturiert und designet ist.

Image Added

Mit dem Google Developer Tool können sie z.B anschauen wie sich die Website auf verschieden Geräten darstellt.

So kann das responsive Design der Website getestet werden.

PC

Image Added

Mobilgeräte

Image Added

Nur temporäre Änderungen 

...