Webdesign- und Freeware-Tipps
Versteckte DIVs, Layer, Tabellen und weitere Elemente sichtbar machen
Manchmal kann es für dich als Webdesigner sehr interessant sein, wie eine Internetseite auf Grund von Tabellen oder DIV-Elementen aufgebaut ist und wie und wo diese überhaupt verwendet werden.
Tabellen mit dem typischen Rand anzeigen lassen:
Internet Explorer
Im Internet Explorer ist es relativ einfach sich die auf einer Webseite befindlichen unsichtbaren Tabellen anzeigen zu lassen. Dazu ist es nur notwendig einen Favoriten zu erstellen. Gehe folgendermaßen vor:
1.
Öffne deinen Internet Explorer und klicke auf "Favoriten" » "Zu Favoriten hinzufügen..."
2.
Im neuen Dialogfeld gibts du einen Namen für den Knopf ein, mit dem du Tabellen anzeigen lassen willst, z.B. "Tabellen anzeigen". Danach klickst du auf "OK". Jetzt hast du eine Verknüpfung zu der Seite angelegt, die aktuell bei dir angezeigt wurde.
3.
Klicke nun im Internet Explorer auf "Favoriten", dann mit der rechten Maustaste auf "Tabellen anzeigen" und schließlich auf "Eigenschaften". Im Feld URL fügst du dann folgenden Javascript-Code ein. Am besten hier aus dem grauen Feld kopieren (Strg+C).
javascript:if(document.all.tags('table').length>0){if(document.all.tags
('table')[0].border>0){border=0}else{border=1};for(i=0;i<document.all.
tags('table').length;i++){document.all.tags('table')[i].border=border;}};
void(null);
4.
Letztlich nur noch auf "OK" bestätigen und schon kannst du dir mit einem Klick auf "Tabellen anzeigen" im Internet Explorer auf allen Webseiten unsichtbare Tabellen anzeigen lassen.
DIV-Layer, Tabellen und andere Elemente umrahmen lassen:
Internet Explorer
Es gibt für den Internetexplorer, sowie für den Firefox eine Erweiterung, die nützliche Features für das Web-Developing bereit hält.
Hier geht es zum Download der DevToolBar bei microsoft.com. Die Leiste ist zwar auf Englisch, aber das ist nicht weiter schlimm.
Nachdem man das Paket installiert hat, kann man im Internet Explorer auf nützliche Funktionen, wie z.B. Umrandung von DIVs, Tabellen, Bildern etc. zurückgreifen. Hier lassen sich selbstdefinierte HTML-Tags umrahmen, indem man unter "Outline" » "Any Element ..." eigene Tags hinzufügt und die Farben dafür bestimmt.
Firefox
Im Firefox benötigt man auch eine Erweiterung für den Browser, um von diesen nützlichen Funktionen Gebrauch machen zu können.
1.
Öffne diese Seite am besten erst einmal mit dem Firefox. Dann klickst du ganz einfach auf folgenden Link http://ftp.mozilla.org/pub/mozilla.org/extensions/web_developer/... . Wähle dann den aktuellsten Link mit ... -fx.xpi aus. Es sollte nun ein neues Dialogfenster erscheinen.
2.
Klicke dort auf "Jetzt installieren". Nach der Installation solltest du den Browser schließen.
3.
Beim nächsten Öffnen erscheint eine neue Menüleiste mit vielen Optionen. Mit dieser Leiste hat man Zugriff auf viele hilfreiche Tools. Man kann sich fast alles, was im Code versteckt ist anzeigen lassen, z.B. die Namen der CSS-Klassen und CSS-Ids. Man kann sich die Webseite auch ohne Bilder ansehen oder JavaScript mit einem Mausklick deaktivieren.
Meiner Ansicht nach ist das beste Tool allerdings die Anzeigemöglichkeit von HTML-Tags. So werden auf Wunsch alle DIV-Container umrahmt oder eben auch alle Tabellen und Tabellenzellen. Diese Funktionen findest du unter "Outline". Sie sind eine geniale Hilfe bei der Fehlersuche, wenn etwas im Layout verrutscht ist. Um spezielle Elemente umrahmen zu lassen und das auch noch in der Lieblingsfarbe gibt es die Funktion "Outline Custom Elements...". Gib dort einfach alle Elemente ein, die angezeigt werden sollen, z.B. span oder div.
