Background Colors And Images
It’s a basic tenet of Web design: color loads fast; images (usually) load slowly. Take this into account if your Web site uses a background image - especially a dark image with light text. Include a complimentary background color to provide an easier visual transition to the slower-loading background image.
Careful With All Page Backgrounds
A background image can be a dangerous tool in the hands of a novice designer. Think about some of the truly ghastly tiled background images you’ve seen on Web sites: plaid, psychedelic, whirlpools, etc. That’s not to say that all background images are bad. Used carefully, a visually appealing page background image enhances a site by emphasizing the site’s purpose.
For instance, a Web site that sells Fall foliage tours in New England might use a background image of autumn leaves. Since this background is rather dark, we use light-colored text for contrast.
<body background=”m50leaves2.jpg”>
<div align=”center”>
<h1>
<font color=”White”>
<b>Fall Foliage Tours</b>
</font>
</h1>
<h2>
<font color=”White”>
<i>Register Now!</i>
</font>
</h2>
<h3>
<b>
If you don’t see the solid
background color first,
<BR>
be thankful for your
fast Internet connection!
</b>
</h3>
</div>
</body>
Note there is no background color specified, so your visitors are treated to a glimpse of the standard gray background while they wait for the image to load. Avoid this by including the BGCOLOR attribute in the BODY tag. Select a complementary color (dark red, for instance) for the attribute to give visitors with slower dial-up connections a smoother visual transition from page background color to background image.
View the example here.
<body background=”m50leaves2.jpg”"
bgcolor=”#800000″>
<div align=”center”>
<h1>
<font color=”White”>
<b>Fall Foliage Tours</b>
</font>
</h1>
<h2>
<font color=”White”>
<i>Register Now!</i>
</font>
</h2>
<h3>
<b>
If you don’t see the solid
background color first,
<BR>
be thankful for your
fast Internet connection!
</b>
</h3>
</div>
</body>
Visitors with fast Internet connections may never notice your efforts, but those connecting at 28.8 or less will appreciate the easy color transition.
Table Backgrounds Also Benefit
Tables can also contain background images and colors, but Netscape resolves the BACKGROUND attribute differently than Explorer. Remember to use the BACKGROUND=” ” attribute inside nested tables to prevent Netscape browsers from repeating the background image inside every cell.
Netscape also resolves background colors differently than Explorer. The BGCOLOR attribute contained in the outer table takes precedence over the background image so the internal table cells display the BGCOLOR instead of the image. Your background image displays with big blocks of color in every cell in the internal table containing text.
Here is how that displays in Netscape:
If you’re sure that your Web site will only be viewed with Explorer - a company Intranet for example - then you can safely use complimentary background colors with a table image. In this example, we use a JPEG file as a background image for a table. For effect - not because it’s a complementary color! - the BGCOLOR attribute is set to “blue.” The table will flash blue before the image loads.
View the example here.
<body bgcolor=”#EFF0E3″>
<div align=”center”>
<table background=”background_sm.jpg”
bgcolor=”blue” cellspacing=”2″
cellpadding=”2″ border=”0″ height=”400″
width=”250″>
<tr>
<td>
<table background=”" align=”center”
cellspacing=”0″ cellpadding=”0″
border=”0″>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
Important Design Considerations
It’s hard enough for people to read on a computer monitor, so make sure your page background choice doesn’t make the task even more difficult. Look to the pros for guidance: most commercial Web sites use a white background with black text. That combination offers the highest contrast and is the easiest to read. Many beginners though, prefer tiled background images because it’s a neat trick and easy to do.
It’s also an easy way to unintentionally brand your Web site as amateurish, so be careful. Use background images sparingly and optimize them with GIFBot because images do increase your page load time. Since some of the most basic techniques often display differently across browsers - and browser versions - test your Web site thoroughly. NetMechanic’s HTML Toolbox makes this task easier by scanning your Web site and alerting you elements that may not display correctly across browsers.
___________________________________________________________________________________
Es ist ein Grundsatz von Web-Design: Farbe lädt schnell, die Bilder (in der Regel) werden langsam geladen. Nehmen Sie dies berücksichtigen, wenn Sie Ihre Web-Site verwendet ein Hintergrundbild - vor allem ein dunkles Bild mit Licht Text. Fügen Sie eine kostenlose Hintergrundfarbe, um einen leichteren Übergang zur visuellen langsamer Laden-Hintergrundbild.
Sorgfältige Seite mit allen Hintergründen
Ein Hintergrundbild kann ein gefährliches Werkzeug in den Händen eines Nachrichten-Designer. Denken Sie über einige der wirklich grausam gekachelten Hintergrund Bilder, die Sie gesehen haben, auf Web-Sites: Plaid, psychedelische, Whirlpools, etc. Das ist nicht zu sagen, dass alle Hintergründe sind schlecht. Gebraucht sorgfältig, eine optisch ansprechende Seite Hintergrundbild verstärkt durch eine Website unter Betonung der Website Zweck.
Zum Beispiel, dass eine Web-Site verkauft Herbstfarben Touren in New England kann mit einem Hintergrundbild von autumn leaves. Seit diesem Hintergrund ist recht dunkel, verwenden wir hellen Kontrast zum Text.
<body Background=”m50leaves2.jpg”>
<div Align=”center”>
<h1>
<font Color=”White”>
<b> Fall Foliage Tours </ b>
</ Font>
</ H1>
<h2>
<font Color=”White”>
<i> Registrieren Sie sich jetzt! </ I>
</ Font>
</ H2>
<h3>
<b>
Wenn Sie nicht sehen, die solide
Hintergrundfarbe erste,
<BR>
Dankbar für Ihre
Schnelle Internet-Verbindung!
</ B>
</ H3>
</ Div>
</ Body>
Hinweis: es gibt keine Hintergrundfarbe angegeben, so dass Ihre Besucher behandelt werden, um einen Einblick in die Standard-grauen Hintergrund, während sie warten, bis das Bild zu laden. Vermeiden Sie dies, indem die BGCOLOR-Attribut in der BODY-Tag. Wählen Sie eine komplementäre Farbe (dunkelrot, zum Beispiel) für das Attribut zu geben, die Besucher mit langsamer Dial-up-Verbindungen einen reibungsloseren Übergang von der visuellen Seite Hintergrundfarbe zu Hintergrundbild.
Sehen Sie sich das Beispiel hier.
<Body background = “m50leaves2.jpg” ”
Bgcolor = “# 800000″>
<div Align=”center”>
<h1>
<font Color=”White”>
<b> Fall Foliage Tours </ b>
</ Font>
</ H1>
<h2>
<font Color=”White”>
<i> Registrieren Sie sich jetzt! </ I>
</ Font>
</ H2>
<h3>
<b>
Wenn Sie nicht sehen, die solide
Hintergrundfarbe erste,
<BR>
Dankbar für Ihre
Schnelle Internet-Verbindung!
</ B>
</ H3>
</ Div>
</ Body>
Besucher mit schnellen Internet-Verbindungen kann nie bemerken Ihre Bemühungen, aber die Verbindung mit 28,8 oder weniger schätzen die einfache Farbe Übergang.
Tabelle Hintergründe auch profitieren
Tabellen können auch Hintergrundbilder und Farben, sondern löst die Netscape HINTERGRUND Attribut anders als Explorer. Denken Sie daran das BACKGROUND = “”-Attribut in verschachtelten Tabellen zu verhindern, dass Netscape-Browsern aus wiederholt das Hintergrundbild in jeder Zelle.
Netscape behebt auch Hintergrundfarben anders als Explorer. Das Attribut BGCOLOR in der äußeren Tabelle Vorrang über das Hintergrundbild, so dass die interne Tabelle zeigt die Zellen BGCOLOR anstatt des Bildes. Ihr Hintergrundbild zeigt mit großen Blöcken von Farbe in jeder Zelle in der internen Tabelle mit Text.
Hier zeigt sich, wie das in Netscape:
Wenn Sie sicher, dass Ihre Web-Site werden nur mit Explorer - Intranet eines Unternehmens zum Beispiel -, dann können Sie sicher kostenlose Nutzung Hintergrundfarben eine Tabelle mit Bild. In diesem Beispiel verwenden wir eine JPEG-Datei als Hintergrundbild für eine Tabelle. Für Wirkung - nicht, weil es sich um eine komplementäre Farbe! — BGCOLOR-Attribut ist auf “blau”. Die Tabelle blinkt blau, bevor das Bild geladen.
Sehen Sie sich das Beispiel hier.
<body Bgcolor=”#EFF0E3″>
<div Align=”center”>
<Table background = “background_sm.jpg”
Bgcolor = “blue” cellspacing = “2″
Cellpadding = “2″ border = “0″ height = “400″
Width = “250″>
<tr>
<td>
<Table background = “” align = “center”
Cellspacing = “0″ cellpadding = “0″
Border = “0″>
<tr>
<td> </ Td>
<td> </ Td>
</ Tr>
<tr>
<td> </ Td>
<td> </ Td>
</ Tr>
</ Table>
</ Td>
</ Tr>
</ Table>
</ Div>
</ Body>
Wichtige Design-Überlegungen
Es ist schwer genug für die Menschen zu lesen, auf einem Computer-Monitor, so stellen Sie sicher, dass Ihre Seite Hintergrund Wahl nicht die Aufgabe noch schwieriger. Schauen sie sich für die Vor-Orientierung: Die meisten kommerziellen Web-Sites mit einem weißen Hintergrund mit schwarzem Text. Diese Kombination bietet die höchste Kontrast und ist am einfachsten zu lesen. Viele Anfänger aber lieber gekachelten Hintergrund Bilder, weil es sich um eine saubere und einfache Trick zu tun.
Es ist auch eine einfache Möglichkeit, unabsichtlich Marke Ihrer Website als amateurhaft, also seien Sie vorsichtig. Verwenden Sie Hintergrundbilder sparsam und optimieren sie mit GIFBot, weil die Bilder zu erhöhen Ihre Seite geladen werden. Da einige der grundlegenden Techniken häufig ganz anders Browsern - und Browser-Versionen - testen Sie Ihre Web-Site gründlich. NetMechanic den HTML-Toolbox macht diese Aufgabe erleichtern, indem Sie Ihre Web-Site und Alarmieren Sie Elemente, die möglicherweise nicht allen Browsern korrekt angezeigt.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
No comments yet.
Leave a comment