Eigenes Design verwenden (Logo einbauen)
Das Markenzeichen eines Unternehmen
Ist meist ein Logo. Dieses kann als Symbol oder als Schriftzug dargestellt werden.Hier möchten wir Ihnen zeigen, wie Sie Ihr Logo auf an die gewünschte Position wie z.B. dem Header platzieren können.
Für unsere Mustermann Firma haben wir ein Beispiel-Logo erstellt.
Logo Formate wie z.B. (.jpg .gif .png) können verwendet werden.
Jetzt geht´s aber los ;)
Schauen wir uns nochmals die index.html an, dort werden wir Ihr Logo platzieren.Wir werden für das Logo eine neue CSS Classe definieren. Nur so ist es später einfacher Ihr Logo auf Ihrer Webseite zu positionieren.
Sie finden die index.html unter /Meine Webseiten/_Projektname_/template/_Designwahl_/index.html
<!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">
<head>
<title>{title} - {bereich}</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content="{keywords}" />
<meta name="description" content="{description}" />
<meta http-equiv="classification" content="General" />
<meta http-equiv="pragma" content="No-Cache" />
<meta http-equiv="expires" content="0" />
<meta name="language" content="de" />
{head}
<link rel="stylesheet" type="text/css" href="{template}/_css/stylesheet.css" media="screen" />
<link rel="stylesheet" type="text/css" href="{template}/_css/lightbox.css" media="screen" />
<link rel="shortcut icon" href="{baseURL}{template}/favicon.ico" type="image/ico" />
<link rel="home" href="{baseURL}" title="Home" />
</head>
<body>
<div id="banner">
<div id="banner_title">{title}</div><div id="banner_titleshadow">{title}</div>
<div id="banner_desc">{schriftzug}</div><div id="banner_descshadow">{schriftzug}</div>
</div>
<div id="navi">
{navigation}
</div>
<div id="contentwhite">
<div id="content">
<div class="wrap"></div>
<div id="contentinside">
<div id="titel">{bereich}</div>
{index}
</div>
<div class="wrap">
</div>
</div>
</div>
<div id="footer">
<div id="footerinside">
<div id="footer_links">
<span id="footertitel" >{title} - {schriftzug}</span><br />
{navigation}
</div>
<br class="clear"/>
</div>
</div>
</body>
</html>
In der Zeile 22 zwischen der id="banner", werden wir Ihr Logo platzieren und müssen nun dem Layer (div) eine CSS Classe zuweisen. In unserem Fall "meinlogo".
/* Zeile 22 */
<div id="banner">
<div class="meinlogo"> </div>
<div id="banner_title">{title}</div><div id="banner_titleshadow">{title}</div>
<div id="banner_desc">{schriftzug}</div><div id="banner_descshadow">{schriftzug}</div>
</div>
Nachdem Sie die gewünschte Änderung vorgenommen haben, speichern Sie das Dokument auf dem Webserver ab.
Jetzt definieren wir die CSS Classe "meinlogo".Wichtig hierbei ist, unsere Werte wie "height" und "width" haben wir von unserem Logo entnommen. Sollte Ihr Logo ein anderes Format haben so tragen Sie diese Werte entsprechend ein.
Nun öffnen wir die stylesheet.css mit dem Editor und schreiben z.B. in der Zeile 28 folgendes...
/* Zeile 28 */
.meinlogo{
height: 118px;
width: 116px;
float: left;
margin-top: 17px;
background: url('../images/meinlogo.png') no-repeat center bottom;
}
Der Zwischenstand
Hmmm
Das sieht jetzt noch etwas schräg aus.Kein Problem, nun müssen wir noch den Titel des Homepage Baukasten verschieben.
Dies macht man ebenfalls in der stylesheet.css.
Nun suchen wir die Classen:
#banner_title
#banner_titleshadow
#banner_desc
#banner_descshadow
Dort steht jeweils der padding-left: xxxx px Wert. Schauen wir uns nun die aktuellen Werte der oben genannten Classen an.
Aktuelle Titel Position
#banner_title => Ist der Titel der Homepage #banner_titleshadow => Ist der Schatten Titel der Homepage #banner_desc => Ist die der Homepage #banner_descshadow => Ist der Schatten Titel der HomepageGut zu erkennen sind die jeweiligen Werte padding-left: 60px; + padding-left: 62px; und padding-left: 100px; + padding-left: 102px;
#banner_title {
position: absolute;
padding-left: 60px;
padding-top: 35px;
z-index: 4;
font: 42px georgia, arial;
color: #ffffff;
}
#banner_titleshadow {
position: absolute;
padding-left: 62px;
padding-top: 37px;
font: 42px georgia, arial;
color: #00335f;
z-index: 3;
}
#banner_desc {
position: absolute;
padding-left: 100px;
padding-top: 90px;
z-index: 2;
font: 22px georgia, arial;
color: #ffffff;
}
#banner_descshadow {
position: absolute;
padding-left: 102px;
padding-top: 92px;
font: 22px georgia, arial;
color: #00335f;
z-index: 1;
}
Passend zum ausgewähltem Design ändern wir jetzt die jeweiligen Werte in:padding-left: 140px;
padding-left: 142px;
#banner_title {
position: absolute;
padding-left: 140px;
padding-top: 35px;
z-index: 4;
font: 42px georgia, arial;
color: #ffffff;
}
#banner_titleshadow {
position: absolute;
padding-left: 142px;
padding-top: 37px;
font: 42px georgia, arial;
color: #00335f;
z-index: 3;
}
#banner_desc {
position: absolute;
padding-left: 140px;
padding-top: 90px;
z-index: 2;
font: 22px georgia, arial;
color: #ffffff;
}
#banner_descshadow {
position: absolute;
padding-left: 142px;
padding-top: 92px;
font: 22px georgia, arial;
color: #00335f;
z-index: 1;
}
Der Zwischenstand
Der Artikel wurde erfolgreich in den Warenkorb gelegt.