Tipps und Tricks

GoLive,
Neue HTML-Seite mit eigenem Code

Wenn man in GoLive eine neue HTML-Seite erstellt, wird der Code zu Beginn von Adobe erstellt. Wer seine eigene Standardseite haben möchte, die mit eigenem Code erscheint (besonders auch wenn man auf Neu klickt), muss dies in den Einstellungen selber eingeben. Praktisch ist dies beim Autoren-Tag oder wenn man eine grössere Homepage zu bearbeiten hat, in der man mit einer vordefinierten Standardseite arbeiten möchte. Um in GoLive den eigenen Code zum Standard zu machen, muss man zuerst den gewünschten Code in einer HTML-Seite speichern. Diese gibt man dann über die Menüpunkte General als «New Document» an. Somit wäre der Geister-Code von Adobe ausgeschaltet.

WebDesign,
Bilder schnell laden

Beim Ausfüllen eines Formulars oder in anderen Situationen, wo die nächste Webseite genau vorgegeben ist, können Grafiken im Voraus geladen werden, so dass sie auf der Seite sofort erscheinen. Der Trick: auf der vorherigen Seite das Bild mit der Grösse 1 x 1 Pixel einfügen und am Seitenende oder einem passenden Ort (irgendwo in einer Ecke) verstecken. Dann sollte das kleine Bild nicht stören.
Der ganze Trick funktioniert, weil die Browser einmal geladene Dateien in der Regel im Festplatten-Cache verwahren und bei einem wiederholten Gebrauch nicht mehr neu vom Server laden, sondern direkt aus dem Cache holen.

WebDesign,
Ansprechende Rahmen mit Stylesheets

Mit Hilfe von Stylesheets lassen sich grafisch anspruchsvolle Rahmen für Webseiten erstellen. Durch individuelle Formatierung der verschiedenen Rahmenlinien sind der Gestaltung von Tabellen, Formularen und Schaltflächen fast keine Grenzen gesetzt.
Als Beispiel für die Möglichkeiten, die einem Stylesheets bieten, soll der folgende Quelltext dienen, der den oben abgebildeten Rahmen beschreibt:
<input type=“TEXT“ name=“Rahmen“ size=“40“ style=“BORDER-RIGHT: red 50 solid; BORDER-LEFT: green 50 solid; BORDER-TOP: yellow 50 solid; BORDER-BOTTOM: purple 50 solid\>

WebDesign
Formular-Schaltflächen gestalten

Da Formularbuttons immer genau gleich grau und langweilig aussehen, könnte man meinen, ihr Aussehen lasse sich nicht verändern. In Wirklichkeit sind die Möglichkeiten sehr vielfältig. Der obige Rahmentrick funktioniert beispielsweise auch mit Formularbuttons, man muss nur "TEXT" durch "SUBMIT" ersetzen. Auch die Hintergrund- und Schriftfarbe kann über CSS-Angaben gesteuert werden:

Es ist sogar möglich, die Schaltfläche durch ein Bild zu ersetzen:

WebDesign
Vertikale Linien

Vertikale Linien sind mit Blindgifs schnell zusammengebaut. Diese sind aber nicht in der Lage, sich wechselnden Inhalten anzupassen. Beim folgenden Trick wird eine vertikale Linie durch ein farbiges Tabellenfeld mit minimaler Breite 1 ("width=1") dargestellt. Der Spacer-Tag erzeugt wie die Width-Angabe einen Leerraum, wird aber nur von Netscape interpretiert.

Der abgedruckte Code erzeugt eine Tabelle mit drei Spalten, wovon zwei eine senkrechte Linie darstellen.

GoLive
Source Code schützen

GoLive verändert auch von Hand geschriebenen Code, wenn man in den Layout-Modus wechselt. Dies kann in Einzelfällen ärgerlich werden, da auch GoLive nicht unfehlbar ist. Der Ausweg: Codeblöcke, die von einem \-Tag umschlossen sind, werden vom Programm in Ruhe gelassen. Allerdings kann dann auch im Layoutmodus nichts mehr verändert werden.

WebDesign
Dunkler Hintergrund

Auf jeder Webseite kann ein Hintergrundbild definiert werden. Ist dieses dunkel, so sollte die Schrift hell sein. Das ist wohl jedem klar. Gleichzeitig sollte aber auch eine entsprechende Hintergrundfarbe (BGCOLOR) für die Seite definiert werden. Die Farbe wird nämlich schon angezeigt, bevor das Bild vollständig geladen ist. Das sieht dann viel besser aus, man kann den Text früher lesen und sieht die Inhalte der Seite schneller. Zudem können so auch Surfer, die sich Hintergrundbilder nicht anzeigen lassen, die Seite einigermassen lesen.

WebDesign
Neues Browserfenster öffnen

Mit der folgenden JavaScript-Funktion, die im Head-Bereich einer Seite platziert werden muss, kann für einen Link ein neues Fenster geöffnet werden. function fenster(url){ newWin=window.open (url,"openWin","dependent=yes, width=790,height=380,menubar=yes, screenX=0,screenY=0,scrollbars, status=yes,resizable"); newWin.focus();}

Die Methode window.open hat eine ganze Anzahl Argumente, von denen aber nur die ersten zwei obligatorisch sind. Die ganze Anweisung sollte auf einer einzigen Zeile stehen, ohne Leerzeichen zwischen den Argumenten. screenX und screenY legen die Koordinaten der linken oberen Ecke fest, wobei der Explorer diese Angaben ignoriert. Status=yes besagt, dass das neue Fenster eine eigene Status-Zeile (die Zeile am unteren Rand des Browserfensters) haben soll. Um die Funktion aufzurufen, wird als Link

angegeben. Dadurch, dass die Adresse nicht im JavaScript-Teil festgelegt ist, kann die Funktion für jeden Link gebraucht werden. Auf dieselbe Art kann das Script auch andere Angaben, z.B. die Fenstergrösse, von Fall zu Fall festlegen. Der Aufruf würde dann

lauten und die Funktion

WebDesign
Hintergrundbild ohne Kacheleffekt

Ist das Browserfenster grösser als das im Browser angezeigte Hintergrundbild, füllt der Browser den restlichen Platz durch Wiederholen des Bildes aus. Bei kleineren Bildern ist ein solcher Kacheleffekt wohl erwünscht, bei grossen hingegen störend. Das Problem lässt sich beheben, indem man rund um das Bild soviel Leerraum lässt, dass das Bild selbst den grössten Monitor vollständig bedeckt. Dies ist die uneleganteste, aber sicherste Abhilfe, da sie auch in Version 3 von Explorer und Netscape funktioniert. Für CSS-taugliche Browser empfiehlt es sich, folgende Angabe in den Headteil zu schreiben:

Wer mit Layers oder den explorerkompatiblen Floatingboxes arbeitet, kann einfach das Bild im ersten Layer (mit dem tiefsten z-Index) einfügen (als normales Bild, nicht als Hintergrundbild!) und dann die anderen Layer darin platzieren.