Css Html Einbinden Beispiel Essay


Sie sehen hier Auszüge und Screenshots aus älteren Versionen der Jimdo-Handbücher. Viele Informationen und der Jimdo-Siteadmin wurden mittlerweile aktualisiert. Alle Titel finden Sie stets voll aktualisiert auf jimdo-handbuch.de.

Wenn Sie sich für das Thema Suchfunktion auf Jimdo interessieren, besuchen Sie bitte unsere Seite suchfunktion.website.

Die Technik CSS-Einträge per Head-Eintrag zu überschreiben oder zu ergänzen ist selbstverständlich nicht auf Jimdo begrenzt. Hier sind einige wichtige Grundregeln für diese Arbeitsmethode die Sie – teilweise ganz speziell für Jimdo – berücksichtigen können:

1. Gruppieren von Einträgen
Sie können Einträge im Head untereinander aufführen:

<style type="text/css">
/*<![CDATA[*/
div#number-one {color: #FF0000 !important;}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
div#nummer-zwei {padding-right: 24px;}
/*]]>*/
</style>

Schöner noch und weniger Code: Sie fassen die Einträge zusammen:

<style type="text/css">
/*<![CDATA[*/
div#number-one {color: #FF0000 !important;}
div#nummer-zwei {padding-right: 24px;}
/*]]>*/
</style>

Das gilt insbesondere und noch kürzer, wenn beide Einträge (oder mehr) das selbe Merkmal (hier die „background-color“) fixieren. Hier kommt das Komma zum Einsatz:

<style type="text/css">
/*<![CDATA[*/
#layer-eins, #layer-zwei {background-color: #FFFFFF !important;}
/*]]>*/
</style>

3. DIV-Bezeichnungen und Layout-Wechsel
Was im Layout F460 bei Jimdo eben noch den Namen

div#cc-tp-nav-top

trägt, heißt im Layout F4245 vielleicht

div.cc-nav-action-wrapper

obwohl es dieselbe Funktion hat. Andere DIVs heißen vielleicht immer gleich wie z.B. der Warenkorb, Bestandteile der Navigation usw.

Bei Jimdo wird aus vielen Gründen und historisch bedingt in den Layouts (derzeit noch) eine uneinheitliche Benamung vieler Layout-Elemente verwendet, was für den User weder Vor- noch Nachteile hat. Als Coder kann man hier Verwirrung stiften. Wichtig dabei ist zu erkennen, dass man bei einem Layout-Wechsel überprüfen muss, ob vielleicht hinterlegte CSS-Einträge im Head in die Gestaltung des neu ausgesuchten Layouts „hineinfunken“.

Ein Layoutwechsel bedeutet demnach auch immer eine Überprüfung der im Head hinterlegten Einträge, damit der Jimdo-Support solche selbst verursachten Fehler hinterher nicht ausbaden muss. Wenn Sie die Headeinträge für ein bestimmtes Layout vorübergehend nicht mehr benötigen, speichern Sie den kompletten Headeintrag unter Einstellungen > Head bearbeiten für eine spätere Verwendung in einer TXT-Datei unter der Nummer des Layouts einfach ab. Dann löschen Sie (nur) diese Layout-relevanten Bestandteile aus dem Head, speichern und schalten auf das neue Layout um.

4. Ausblenden und Austausch von Grafiken
Manche Jimdo-Layouts verwenden zentral gehostete Grafiken als Bestandteil des Designs. Das betrifft häufig Schattenelemente, abgerundete Bereiche oder kreative Elemente der festen Layouts: Sie haben die Möglichkeit diese Aufrufe mit eigenen Grafiken zu übersteuern, oder die hinterlegten Grafiken auszublenden.
Ein Beispiel am Jimdo-Layout F4097 Hier wurde als kreatives Element ein Rotkehlchen unten links hingesetzt, welches wir einmal ganz unromantisch gegen ein ordentliches Motorrad austauschen werden.


Mit der rechten Maustaste im z.B: Firefox-Browser (Element untersuchen) identifizieren wir folgenden Eintrag:

Das Element heißt also

div#cc-tp-bird

und sein grafischer Hintergrund wird – gemäß Syntax – gespeist aus folgender Quelle

http://u.jimdo.com/www65/o/layout/l1f27bad9ed593363/img/bird.png

Wollten wir nun dieses Bild-Element einfach verschwinden lassen (ausblenden), so würden wir jetzt folgende Syntax für den Headbereich erstellen:

<style type="text/css">
/*<![CDATA[*/
div#cc-tp-bird
{background:none !important;}
/*]]>*/
</style>

5. Integration von fehlenden DIVs
Man kann nur DIVs und IDs ändern, die auch tatsächlich im HTML Ihres Jimdo-Layouts hinterlegt sind. Wenn Sie bestehende (feste) Jimdo-Layouts mit dieser Methode bearbeiten, werden Sie feststellen, dass es immer wieder einmal den Wunsch nach Elementen gibt, die im HTML (an welches Sie ja nicht wirklich herankommen) nicht definiert wurden.

Hierfür können Sie hervorragend das Element „Widget/HTML“ verwenden, mit dem Sie einfach ein neues DIV definieren. Und zwar in der Sidebar, wenn Sie das Element auf jeder Seite benötigen oder im Content, wenn Sie es nur auf bestimmten einzelnen Seiten verwenden möchten.

Als Beispiel: Sie hätten gerne im Kopf Ihrer Seite (sichtbar auf jeder Seite) ein Element, das auf Ihre bestehenden Betriebsferien hinweist. Erstellen Sie dazu mit dem Element „Widget/HTML“ in der Sidebar folgenden Eintrag:

<div id="zeiten">
Achtung: Betriebsferien!!!
</div>

Den Inhalt dieses Feldes (Text) haben Sie bereits in diesem Eintrag hinterlegt.


Wenn der Eintrag so gespeichert wird, macht er da rechts in der Sidebar (verwendet wird im Beispiel das Layout F381) einen recht unspektakulären Eindruck:

2. Ergänzung von Einträgen

Manche Einträge sind im Original-CSS bereits für Ihre Wünsche korrekt definiert, benötigen aber nur eine Ergänzung. In diesem Fall reicht es nur den ergänzenden Wert im Head zu hinterlegen. Unnötig wäre demnach folgender Eintrag im Head:

<style type="text/css">
/*<![CDATA[*/
ul.mainNav1, ul.mainNav2, ul.mainNav3 {text-align: left; list-style-type: none;font-weight: bold;}
/*]]>*/
</style>

es reicht der Wert:

<style type="text/css">
/*<![CDATA[*/
ul.mainNav1, ul.mainNav2, ul.mainNav3 {font-weight: bold;}
/*]]>*/
</style>

da nur der Wert („font-weight“) vorher noch nicht definiert wurde.

Der Befehl "!important" wird hier benötigt, da unser neue Eintrag für die Anzeige wichtiger (bzw. mächtiger) sein soll, als der bereits definierte Eintrag für den „background“ des

div#cc-tp-bird

Hier das sichtbare Ergebnis:

Da wir ja eigentlich eine andere Grafik (Motorrad) anstelle der verwendeten (Rotkehlchen) hinterlegen wollen, erstellen wir nun eine neue Grafik motorrad.png, die wir sinnigerweise genau so groß machen wie die Grafik des Rotkehlchens.

Anschließend fügen wir diese Datei motorrad.png zum Beispiel auf einer versteckten Unterseite unserer Jimdo-Page als Element „Bild“ ein.

Wir finden jetzt über die rechte Maustaste den Bildpfad des hochgeladenen Bildes heraus um ihn im nächsten Schritt gegen den Bildpfad des in unserem Layout F4097 ja fest hinterlegten Rotkehlchen-Bildes auszutauschen.

Dieser Pfad lautet zum Beispiel:

http://u.jimdo.com/www65/o/s7c2498edf25bfcd6/img/i54f79b4e825/1334849084/std/image.png

also bauen wir nun folgende Syntax für den Head mit der wir den Pfad zum Original-Rotkehlchen-Bild (bei gleichbleibenden Bildattributen wie „no-repeat scroll 0px 0px transparent“) mit dem Bildpfad zu unserer Motorrad-Grafik überschreiben werden:

<style type="text/css">
/*<![CDATA[*/div#cc-tp-bird
{background: url(“http://u.jimdo.com/www65/o/s7c24/img/25/984/std/image.png”)!important;}
/*]]>*/
</style>

Nach dem Abspeichern des Heads wird dann folgende neue Seitengestaltung sichtbar:

Aktion „Tausche Rotkehlchen gegen Bike“ war also ein voller Erfolg.

Anhand dieses Beispiels können Sie „gegen“ alle im CSS hinterlegten Grafiken in Jimdo-Layouts vorgehen.

6.   Neugestaltung

Also werden wir das von uns begründete DIV #zeiten im nächsten Schritt per CSS formatieren und diesen Eintrag im Head hinterlegen. Zum Beispiel so:

<style type="text/css">
/*<![CDATA[*/
#zeiten {position: fixed;
top: 30px; margin-left: -100px;
font-size: 22px; color: rgb(255, 255, 255);
background-color: rgb(228, 12, 27);
padding: 10px; width: 300px;
font-weight: normal;}
/*]]>*/
</style>

Mit dieser Definition weisen wir dem DIV nicht nur einen auffälligen, sondern auch stabil positionierten Platz innerhalb der Webseite zu. Die Sidebar bleibt damit – obwohl sie den HTML-Aufruf für

#zeiten

enthält auch frei für andere Inhalte. Die Position des HTML-Elements in Sidebar oder Content sollte nach Möglichkeit stabil sein (zu oberst), da die hiermit verbundenen Elemente – wenn sie nicht auf position:fixed stehen auf den Seiten je nach weiterem Content umherwandern.

Es ist toll, wenn Sie Jimdo für sich entdeckt haben. Die Vorteile liegen klar auf der Hand, wenn es darum geht ein eigenes Webprojekt auf die Beine zu stellen, das Sie vollständig selbst steuern können. Der schlimmste Feind einer guten und erfolgreichen Webseite ist aber mangelnde Planung. Es lohnt sich ein wenig Zeit darin zu investieren. Jimdo-Expert Alexander Kerscher (u.a. Referent für Webkonzeption) sagt Ihnen, was die wesentlichen Punkte sind: Dies ist ein Kapitel für Freunde solider Planung. So können Sie sich für Ihre Webseite einen inhaltlichen und strategischen Überblick über das verschaffen, was Sie eigentlich gerne erschaffen möchten. Nicht nur optisch.

Das geschieht mit Grundfragen einer Webkonzeption, an denen Sie sich inhaltlich entlang strukturieren können. Auch wenn es sich hier noch nicht um Fragen zum Design dreht, führen die Antworten auf die nachfolgenden Fragen letztlich auch zum Design und machen Ihre Webseite so viel besser, als manche andere Seite.

Fangen Sie also möglichst nicht damit an, einfach „loszudesignen“, sondern nehmen Sie sich die Zeit und beantworten Sie die nachfolgenden Punkte möglichst einfach und präzise für sich selbst. Erläuterungen zu den einzelnen Punkten finden Sie im Anschluss.

Die offenen Fragen

  1. Zielsetzung – Was möchten Sie erreichen und wen möchten Sie erreichen?
    1. Nutzerszenario
    2. Nutzungsszenario
  1. Wie sieht die Prozesskette dahinter aus?
  2. Über welche Informationen verfügen Sie bereits?
    1. Einfache „Konkurrenzanalyse“
    2. Planungsunterlagen
  3. Was muss Ihr Besucher über Ihre Firma, Produkte oder Dienstleistungen wissen?
  4. Inhaltliche Vorgaben
  5. Eigene Ressourcen und Quellen
    1. Mitarbeiter
    2. Analysen / Ergebnisse Web-Controlling
    3. Eigene Webhistorie
    4. Externe Ressourcen
  6. Wen möchten Sie in das Projekt mit einbinden?
  7. Wen müssen Sie in das Projekt mit einbinden?
  8. Budgetplanung

1. ZIELSETZUNG – WAS MÖCHTEN SIE ERREICHEN UND WEN MÖCHTEN SIE ERREICHEN?

Erstellen Sie für sich eine klare Vision davon, wie das von Ihnen geplante Webprojekt einmal funktionieren und aussehen soll.

Zum Beispiel so:

  • Der Nutzer sucht über Google das Stichwort „Markisen“ und wird vielleicht innerhalb der ersten 10 Suchergebnisse von Google Deutschland auf unsere Webseite aufmerksam. Natürlich unterstützen wir unseren Webauftritt mit einer Adwords-Kampagne. Zusätzlich unterstützen wir unsere Internetaktivitäten mit einer teuer bezahlten Onlinekooperation bei einem Bauspar-Portal namens xyz.
  • Der Nutzer steigt auf unserer Homepage ein und bekommt dort die Möglichkeit
  • … unser gesamtes Produktportfolio in Text und Bild, Video etc. anzusehen.
  • … Kontakt mit einem Fachberater bzw. Händler vor Ort zwecks Vereinbarung eines Vor-Ort-Termins aufzunehmen. Wir garantieren eine Terminabsprache innerhalb von 12 Stunden.
  • … sich unser Produkt-PDF herunterzuladen und unser Kundenmagazin (Print) zu bestellen. Die dabei generierten Adressdaten verwenden wir zur Kontaktaufnahme für unseren Produktvertrieb.
  • In unserem permanenten Gewinnspiel gibt es monatlich einen Bausparvertrag mit einem Startkapital von 1.000 Euro zu gewinnen. Um daran teilzunehmen, muss der Nutzer unsere Webseite einem „Freund“ weiterempfehlen oder unser „facebook-Freund“ werden. Die Möglichkeit zur Teilnahme wird jedem Nutzer bei Abschluss des Kontakt- oder Bestellvorgangs auf der Danke-Seite zusätzlich angeboten.
  • Die daraus resultierenden Kontaktdaten werden monatlich für den Newsletter verwendet.
  • Anschließend beantworten Sie die Frage, wen genau Sie erreichen möchten:

a.   Nutzerszenario

Versuchen Sie auf Basis bestehender Informationen über Ihre typische Zielkundschaft zu definieren, an wen sich die geplante Webaktivität richtet und überführen Sie diese Information in klare Statements wie:

  • „männlich, besser verdienend, Wohnungseigentümer oder Hausbesitzer, familiär orientiert, Alter 35 bis 45“
  • „weiblich, häuslich orientiert, Mutter, Alter ~ 36“

b.   Nutzungsszenario

Welche Nutzungsszenarien mögen aus der Verwendung Ihrer zukünftigen Webseite entstehen? Versuchen Sie typische Anforderungs- und Ergebnis-Fälle zu definieren:

  • Ein Hausbesitzer fragt sich, wie lange unsere Produkte im Durchschnitt halten und Instandhaltungskosten damit verbunden sind. Wir bilden daraus ein Garantieversprechen, das wir auf jeder Seite in Form eines Qualitätssiegels mitlaufen lassen. Bei Klick auf dieses Siegel findet er eine Liste unserer Garantieversprechen und eine Musterkalkulation für Anschaffung und Instandhaltung.
  • Eine Mutter sucht nach Informationen zum UV-Schutz unserer Markisen und zum Thema Kindersicherung. Wir bedienen diese Anfrage durch einen der Hauptmenüpunkte „Sicherheit“ innerhalb dessen wir ein familiäres Szenario abbilden und eine Liste unserer Sicherheitsmerkmale, UV-Schutz und UV-Beständigkeit definieren.
  • Auch unsere Ergebnisse der Stiftung Warentest werden hier abgebildet.
  • Potenzielle Mitarbeiter sollen von unserem positiven Image, unseren vielseitigen hochqualitativen Produkten und unserem Wachstum angezogen werden. Wer als Mitarbeiter auf unsere Seite kommt, findet einen andersfarbigen Hauptmenüpunkt „Arbeiten Sie mit uns“ in der Hauptnavigation.

Solche Darstellungen sind extrem hilfreich für die Erarbeitung einer eigenen Vorstellung des zukünftigen Onlinegeschehens.

2. WIE SIEHT GGF. DIE PROZESSKETTE DAHINTER AUS?

Was passiert mit den Daten, Kontaktformularen, Bestellungen, Downloadzahlen und weiteren Vorgängen auf Ihrer Webseite? Versuchen Sie ein realistisches Szenario für die Weiterverarbeitung der damit verbundenen Erkenntnisse und Transaktionen zu definieren.

Zum Beispiel folgendermaßen:

  • Die Abruf- und Nutzungszahlen unserer Webseite werden ab sofort als PDF-Daten monatlich gesammelt. Basis des Reports sind die Ergebnisse aus Google Analytics sowie die Entwicklung der Suchbegriffe mit denen unsere Webseite gesucht/gefunden wird.
  • Die Bestellungen aus dem Online-Shop werden sich anfangs in Grenzen halten, da nur ein Teilsortiment wirklich für den Versandhandel geeignet ist. Daher erreichen uns Bestellungen aus dem Online-Shop zunächst per System-E-Mail die händisch in unsere Auftragsverarbeitung eingegeben wird. Die Erwartungen an die Liefergeschwindigkeit von Online-Bestellungen sind hoch, daher muss eine zeitnahe Verarbeitung gewährleistet sein. E-Mail-Adresse für die Shopbestellungen wird onlineshop@unsere-domain.de.
  • Terminanfragen, die uns zentral per E-Mail erreichen, müssen innerhalb der Geschäftszeiten und dort innerhalb von 3 Stunden direkt an den Kunden beantwortet werden. Die Anfragen werden vom Sekretariat gesichtet und ggf. nach Postleitzahlen dem Vertrieb vorgelegt.

3. ÜBER WELCHE INFORMATIONEN VERFÜGEN SIE BEREITS?

a. Konkurrenzanalyse

  1. An welchen Mitbewerbern oder Zielwebseiten orientieren Sie sich stark?
  2. Was schätzen Sie an deren Online-Aktivitäten und was halten Sie für nicht so gelungen?
  3. Aber auch Unternehmen, mit denen Sie nicht unmittelbar in Konkurrenz stehen, Marktführer aus anderen Ländern und Webseiten, die Sie in Bezug auf bestimmte Funktionen oder Darstellungen überzeugt haben, sind hilfreich.

Eine solche Analyse hilft Ihnen ungemein sich ein Bild von den gewünschten Online-Aktivitäten zu erstellen, Ihr eigenes Konkurrenzumfeld wahrzunehmen und zu verstehen, wie die gemeinsamen Kunden „ticken“. Haben Sie vielleicht bereits mehrere Webseiten? Was funktioniert gut an Ihren Webseiten und was weniger? Stehen Ihre eigenen Webaktivitäten in Konkurrenz zueinander? Lernen Sie aus eigenen Stärken und Fehlern.

b. Planungsunterlagen

Welche Unterlagen sind für Ihr Projekt hilfreich und können erstellt werden? Gibt es bereits einen groben Zeit- oder Projektplan? Hier sind mögliche Planungsunterlagen:

  • Zeit-/Projektplan
  • Bestehende oder gewünschte Domains für das Projekt
  • Eigene Logos
  • Hausschriften, Farben etc.

c. Was muss Ihr Besucher über Ihre Firma, Produkte oder Dienstleistungen wissen?

Die Antwort ist: so viel wie möglich und so wenig wie nötig. Definieren Sie kurz und bündig an wen sich Ihre Produkte richten, welche Zielkundschaft Sie anstreben und über alles, was Sie gerne Ihre Kundschaft wissen lassen möchten.

4. INHALTLICHE VORGABEN

  1. Verfügen Sie bereits über eine „Sitemap“ (also über einen strukturierten Navigationsplan) für das entstehende Webprojekt? Mit Excel lässt sich leicht ein solcher erstellen.
  2. Diese Sitemap darf auch Lücken enthalten. Existieren vielleicht sogar Grob- oder Feinkonzepte?
  3. Gibt es bereits eine Quelle oder einen Ansprechpartner, der mit der Erstellung der Inhalte Text/Bild beauftragt ist? Wichtig ist, dass die zu verwendenden Texte individuell für diesen Internetauftritt erstellt und zusammengestellt werden und dass keine Kopien von bereits im Internet verwendeten Texten zum Einsatz kommen sollen. Das führt ggf. zu immensen Abwertungen durch Google wegen „dublicate content“ und zu brutalen Abmahnungen. Lenken Sie die Erstellung der Inhalte frühzeitig in zuständige und erfahrene Bahnen, wenn Sie glauben, es zeitlich oder inhaltlich nicht bewerkstelligen zu können. Es ist die schwierigste und langfristigste Arbeit am ganzen Webprojekt.
  4. Gibt es bereits lizenziertes Bildmaterial?
  5. Welche Printunterlagen (Broschüren, Flyer etc.) stehen Ihnen ggf. als PDF-Datei bereits zur Verfügung?

5. EIGENE RESSOURCEN UND QUELLEN

Personal / Unterstützung

Haben Sie Mitarbeiter, Kollegen oder Freunde die Sie unterstützen? Siend diese kompetent in Sachen Internet? Wer arbeitet zuverlässig am Projekt mit? Wer entscheidet? Webseiten sind ein enormer zeitlicher Aufwand! Wie groß ist die Zeitmenge, die Sie selbst realistisch einsetzen können?


Analysen / Ergebnisse Web-Controlling

Wie viele Besucher konnte Ihre Webseite in den letzten beiden Jahren verzeichnen, und haben Sie Informationen über die beliebtesten Einzelseiten, Suchworte und vielleicht sogar die Webtechnik (Browser, Bildschirmeinstellungen, Betriebssysteme, Anteil mobiler Geräte etc.) Ihrer User?

Eigene Webhistorie

Was haben Sie bisher im Internet (auch in anderen Firmen) so angestellt? Wo lagen die Erfolge? Was waren Reinfälle? Lernen Sie aus gemachten Fehlern, denn darin liegt der Nutzen von Fehlern.

6. EXTERNE RESSOURCEN

 a. Wen (z.B. Texter, Berater etc.) möchten Sie in das Projekt mit einbinden?

Haben Sie Leute im Kopf, die Ihnen spontan einfielen, als Sie begannen sich mit Ihrem neuen Onlineprojekt zu beschäftigen?

 b. (In Unternehmen) Wen müssen Sie ggf. in das Projekt mit einbinden?

7.

BUDGETPLANUNG

Last but not least und egal ob Sie Ihre Webseite im Alleingang stemmen oder mit externer und bezahlter Hilfe: Was darf die ganze Aktion intern und extern kosten?

Übrigens, so sehr Sie auch für Ihre Webseite einen zeitlichen Druck verspüren, seien Sie sich bitte bewusst, dass Zeitdruck sich nicht positiv auf die Qualität Ihres Projekts auswirkt. Selbstverständlich gibt es wichtige Projekte die zu einem exakten Fertigstellungstermin online sein müssen.

Grundsätzlich gilt auch bei Online-Projekten die gute alte Regel aus dem Straßenverkehr: Eilig? Früher losfahren!

Formen Sie auch durch die Beantwortung der vorangegangenen Fragen ein Bild von Ihrer zukünftigen Webseite, deren Inhalten und dem Benutzer für den sie gedacht ist.

Und dann ...legen Sie los.

0 thoughts on “Css Html Einbinden Beispiel Essay”

    -->

Leave a Comment

Your email address will not be published. Required fields are marked *