Zuerst entsteht in einem Grafikbearbeitungsprogramm ein Design-Entwurf. Dies hat den Vorteil, dass Änderungen schnell und einfach umgesetzt, neue Elemete hinzugefügt und andere entfernt werden können. So kann man einfach und schnell auf Kundenwünsche eingehen.
Als Beispiel nehmen wir den Designentwurf für die Webseite “www.webnfoto.com”.
Ist der Design Entwurf fixiert, geht es daran dieses für die Homepage umzusetzen. Die Aufgabe des Webdesigners ist es dabei Texte, Bilder und Grafiken voneinander zu trennen und in ein neues Webspezifisches Format zu bringen, das HTML (XHTML) heißt. Die Texte und die Struktur der Seite kommen dabei in die HTML Dateien. Die Designelemente stehen in einer CSS Datei, die Bilder und Grafiken liegen in einem eigenen Verzeichnis.
Hier ein Beispiel für eine XHTML Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>www.webnfoto.com // Fotografie // </title>
<meta name="description" content="Mit der Fotografie verbindet mich eine große Leidenschaft und ich betrachte Sie als stilvolle Möglichkeit zur Darstellung von Visionen und Kreationen." />
<meta name="keywords" content="webdesign, foto, web, photo, webnfoto, design, designs, fotografien, photographie, webseitenerstellung, grafik, flyer, andreas, hafenscher" />
<meta name="copyright" content="Copyright - All Rights Reserved 2007 Andreas Hafenscher www.webnfoto.com" />
<meta name="author" content="Andreas Hafenscher" />
<meta name="zipcode" content="7000" />
<meta name="city" content="Eisenstadt" />
<meta name="country" content="Austria" />
<meta name="robots" content="All" />
<meta name="robots" content="ODP (Default)" />
<meta name="googlebot" content="All" />
<meta name="cache-control" content="public" />
<meta name="pragma" content="public" />
<link href="css/css.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/print.css" type="text/css" rel="stylesheet" media="print" />
<link rel="shortcut icon" type="image/x-icon" href="pics/favicon-webnfoto.ico" />
<script type="text/javascript" src="js/dropdown.js"></script>
</head>
<body class="foto">
<div id="wrapper">
<div class="clearfix">
<div id="content">
<h1 class="foto">Fotografie</h1>
<p>Mit der Fotografie verbindet mich eine große Leidenschaft und ich betrachte Sie als stilvolle Möglichkeit zur Darstellung von Visionen und Kreationen.</p>
<p>Das Foto ist für mich oft die Basis kreativen Schaffens, der Ausdruck eines Momentes, der real oder verfremdet inszeniert werden kann, wie z.B. bei einer Fotomontage Realität und kreative Umgestaltung ein neues "Ganzes" ergeben. Hierin finde ich mein "verspielt sein" wieder, das sich in der Liebe für Details ausdrückt und meinen besonderen Schwerpunkt in der Fotografie bildet.</p>
<p>Einen weitereren Bereich bildet die Dokumentation für Webseiten und deren gestalterische Abstimmung mit Layout und Design, wie sie auch für Flyer und Poster benötigt werden.</p>
<p><a href="kontakt.php">Kontaktieren</a> Sie mich und beschreiben Sie mir ihr bildlich festzuhaltendes Anliegen. Details, Machbarkeit und weitere Fragen können so einfach und schnell geklärt werden.</p>
<p class="top-margin2"><a href="fotos/index.html">Fotoalbum</a></p>
</div>
<div id="menu"><img id="menu_parent" src="pics/navigation.gif" alt="Dieses Bild öffnet das Menü/Navigation" height="37" width="129" /><br /><img src="pics/back_foto3.jpg" alt="Symbolbild für Fotografie" height="426" width="129" /></div>
</div>
<div id="footer"><div class="menuefooter"><?php { echoMenue(); } ?></div></div>
<div id="menu_child"><div class="menueintern"><?php { echoMenue(); } ?></div></div>
<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "y", "pointer");
</script>
</div>
</body>
</html>
In dieser XHTML Datei stehen nur Verweise auf Grafiken, die erst der Browser beim Aufruf dieser Seite anzeigt und in das Layout einbindet.
Die Formatierung, wie Schriftgröße und Farbe einer Webseite befindet sich in der CSS Datei.
* {
margin:0;
padding:0;
border: 0;
font-size: 100%;
}
body {
background-color: white;
color: #646464;
height: 100%;
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 170%;
letter-spacing: 0.14em;
}
h2 { font-size: 130%; font-weight: bold; }
p, h2 { margin-bottom: 10px; }
div#content ul { margin-bottom: 20px; }
h2 { margin-top: 30px; }
li a:visited, li a:link { color: #808080; text-decoration: none; }
li a:hover, li a:focus { color: red; text-decoration: underline; }
li a:active { color:blue; text-decoration: none; }
a:visited, a:link { color: #646464; text-decoration: underline; }
a:hover, a:focus { color: red; text-decoration: none; }
a:active { color:blue; text-decoration: none; }
#intro {
position: absolute;
top: 50%; height: 250px;
margin-top: -125px;
left: 50%;
width: 730px;
margin-left: -365px;
}
#wrapper {
font-size: 120%;
position: relative;
left: 50%;
width: 700px;
margin-top: 5px;
margin-left: -350px;
background: no-repeat url(../pics/webnfoto_top.jpg);
padding-top: 67px;
}
#menu_child {
position: absolute;
visibility: hidden;
top: 0px;
width: auto;
padding: 12px;
border: solid #646464 1px;
background-color: white;
}
.menueintern { background-color: #f4f4f4; padding: 14px; }
.menueintern ul, menuefooter ul { list-style: none; }
.menueintern ul li { line-height: 1.45em; }
.menueintern ul li a { font-weight: bold;}
.menuefooter ul li { display: inline; margin: 0 10px; font-size: 80%; letter-spacing: 0;}
#menu {
float: left;
width: 129px;
}
#content {
float: right;
width: 496px;
background: no-repeat url(../pics/webnfoto_content.gif);
padding: 0 36px;
}
#menu, #content { margin-bottom:30px; }
#content h1 { text-indent: -2500px; height:28px; margin-bottom: 28px;}
#content h1.webnfoto { background: no-repeat url(../pics/about_webnfoto.gif); }
#content h1.foto { background: no-repeat url(../pics/fotografie.gif); }
#content h1.webdesign { background: no-repeat url(../pics/webdesign.gif); }
#content h1.kontakt { background: no-repeat url(../pics/kontakt.gif); }
#content h1.flyer { background: no-repeat url(../pics/flyer-grafik-design.gif); }
#content h1.preise { background: no-repeat url(../pics/preise.gif); }
#content h1.andreas-hafenscher { background: no-repeat url(../pics/ueber_mich.gif); }
#content h1.network { background: no-repeat url(../pics/network.gif); }
.top-margin { margin-top: 15px; }
.top-margin2 { margin-top: 30px; }
.org { font-style: italic; }
.small { letter-spacing: normal; }
.italic { font-style: italic; }
div#content ul li {
list-style-position: outside;
margin-left: 35px;
line-height: normal;
}
#footer {
position: relative;
clear: both;
width: 100%;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
padding: 10px 0px 5px 0px;
text-align: center;
margin-bottom: 15px;
}
body.webnfoto a.webnfoto2, body.foto a.foto2, body.webdesign a.webdesign2, body.kontakt a.kontakt2, body.flyer a.flyer2, body.preise a.preise2 { color: red; }
.clearfix:after { content: "."; display: block; height: 0; clear:both; visibility: hidden; }
.clearfix { display: inline-block; }
/* hide from ie \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* ende hide ie */
Erst die Kombination von einer richtig formatierten XHTML-, einer CSS-Datei und den einzelnen Bildern und Grafiken ergibt eine ganze Webseite.
Die Länge der einzelnen Dateien hängt davon ab wie aufwendig das Design ist. Über den Daumen kann man sagen, dass je Detailreicher ein Design ist - umso länger die Datei und damit der Aufwand wird. Die hier beschriebene Vorgehensweise ist sowohl barrierefrei als auch uchmaschinengerecht optimiert.
Die größte Herausforderung beim Umsetzten des Designs in XHTML + CSS ist, es gleich auf allen Computern aussehen zu lassen. Am PC sieht es in der Regel anders aus als am MAC und der Internet Explorer stellt es ganz sicher anders dar als der Mozilla/Firefox Browser. (Mehr dazu in: )
Genau das ist auch ein sehr zeitaufwendiges Problem. Denn der Internet Explorer stellt es leider meistens falsch dar, da er sich nicht an Normen und Webstandars hält. Dies erhöht auch unweigerlich den Aufwand bei der Umsetzung eines Designs.
Meine Bitte als Designer an euch, bitte aktualisiert/updatet eure Browser wie Internet Explorer, Firefox, Opera und Co., bzw. mein Tipp ist: Verwendet den Mozilla Firefox als Browser. Der alles bietet was das Surferherz verlangt und sich an die Standards hält. Download Mozilla/Firefox. Auf Download klicken und danach ausführen und die Anweisungen mit WEITER bestätigen. Fertig.
