Diesmal gehen wir etwas professioneller an die Analyse des Beispiels heran. Schauen wir uns aber zunächst erst einmal das erweiterte Beispiel der Webpräsenz an. Dazu klicken sie den vorstehenden Link mit der Kombination Strg + ' an, um ihn in einem neuen Tab zu öffnen.
Download: 04_erweiterte_Webpraesenz.zip
Wie sie bereits wissen, können sie in Firefox (aber beispielsweise auch Chrome) mit der Strg + U den Quelltext der Seite öffnen. Wenn sie die Web Developer Erweiterung installiert und dort in den Optionen das Anzeigen von Quellcode in einem Tab aktiviert haben, können sie den Quelltext mit Shift + Alt + U in einem Tab anzeigen. Der Übersicht wegen, sollte das unser Standard werden.
Wenn sie jetzt den Quelltext geöffnet haben, können sie mit Strg + ' im Quelltext die weiteren Dateien (layout.css, funktionen.css) in neuen Tabs öffnen. Um auch die Dateien standard.css und erweitert.css zu sehen, benutzen sie die Webdeveloper Funktion "CSS / View CSS" (Shift + Alt + C) jeweils mit umgeschalteten Stylesheet. (s. Anhang: Tastaturkommandos)
Mit dieser Methode können sie den Quellcode einer interessanten Website schnell und einfach analysieren. Das Verwenden von Tabs erleichtert dabei die Übersicht ganz erheblich, da sich die Dateien nicht auf mehrere Fenster verteilen.
Übung:
Vollziehen sie dieses Vorgehen zur Analyse einer Webseite nach (beispielsweise diese).
Anmerkung: Ab sofort werde ich dieses Vorgehen als bekannt voraussetzen und nur noch anmerken, dass wir beispielsweise den Quellcode oder eine bestimmte Datei anschauen wollen.
Widmen wir uns jetzt Schritt für Schritt den Neuerungen in unserem Beispiel. Öffnen sie sich dazu zunächst die Dateien des Beispiels, wie oben beschrieben. Alle relevanten Neuerungen sind mit doppelt unterstrichenen Kommentaren versehen, die mit den Überschriften hier im Buch korrellieren.
(Siehe dazu die folgenden Seiten).