Installationsbeschreibung des Homepagekalenders

Transkript

1 Installationsbeschreibung des Homepagekalenders Bitte beachten Sie: Um den Homepagekalender (im Folgenden HPK) als kostenlosen Service installieren zu können, müssen Sie registrierter Anbieter im Umweltkalenders Berlin ( sein. Inhaltsverzeichnis 1. Kopieren des HTML-Codes des HPK-I-Frames 2. Einbau des HTML-Codes in Ihre Homepage und Verknüpfung mit dem Umweltkalender Berlin 3. Layoutänderungen über den HTML-Code 4. Layout- und Designänderungen über das HPK-Stylesheet 4.1. Verknüpfen des HPK-Stylesheets mit Ihrem Homepagekalender 4.2. Allgemeine Hinweise zur Bearbeitung des HPK-Stylesheets 4.3. Hinweise zur Bearbeitung der Stylesheet-Befehle 1. Kopieren des HTML-Codes des HPK-I-Frames Öffnen Sie die Internetseite des Umweltkalenders Berlin und loggen Sie sich mit Ihrem Benutzernamen und Passwort als Anbieter ein. Notieren Sie sich Ihre vierstellige Anbieternummer, die Sie in der grünen Berlin-Silhouette hinter Ihrem Benutzernamen finden. Kopieren Sie anschließend folgenden HTML-Code des HPK-I-Frames, den Sie auch auf der Unterseite Homepagekalender im Anbieterbereich finden: <iframe src= allowtransparency="true" scrolling="no" frameborder="0" height="600" width="380"></iframe> 2. Einbau des HTML-Codes in Ihre Homepage und Verknüpfung mit dem Umweltkalender Berlin Öffnen Sie im Backend (Administrationsoberfläche) die Seite Ihrer Homepage, in die der Homepagekalender eingebaut werden soll. Kontaktieren Sie ggf. zuvor Ihren Webdesigner, um einen Zugriff zum Backend Ihrer Internetseite zu erhalten. Fügen Sie den kopierten HTML-Code des HPK-I-Frames in den HTML-Code der gewünschten Unterseite ein. Bearbeiten Sie anschließend den eingefügten HTML-Code in folgender Zeile: <iframe src= NUMMER...></iframe> Anstelle von ANBIETER-NUMMER fügen Sie Ihre persönliche vierstellige Anbieternummer ein. Der Inhalt des HPK-I-Frames ist nun mit Ihrem Anbieterprofil und Ihren Angeboten des Umweltkalenders Berlin verknüpft.

2 3. Layoutänderungen über den HTML-Code Der HTML-Code des HPK-I-Frames erlaubt es Ihnen, grundlegende Veränderungen am Layout Ihres Homepagekalenders durchzuführen, wie zum Beispiel die Anpassung von Größe, Rahmenbreite sowie Transparenz und Scrolling. Größe: Im HTML-Code finden Sie die Befehle < height="600" width="340" >. Diese Befehle definieren die Höhe (Height) und Breite (Width) des HPK-I-Frames in Pixeln. Passen Sie Ihren persönlichen Homepagekalender durch das Ändern der Zahlenwerte Ihren Vorstellungen an. Wir empfehlen, eine Mindestbreite und höhe von 300 Pixeln nicht zu unterschreiten, da andernfalls die Lesbarkeit Ihrer Angebote darunter leidet. Sie können die Werte jederzeit wieder ändern. Probieren Sie einfach aus, welches Größenverhältnis den Veranstaltungskalender auf Ihrer Website am besten zur Geltung bringt. Transparenz: Der Befehl allowtransparency="true" definiert, dass transparente Darstellungen in Ihrem Homepagekalender grundsätzlich möglich sind. Wird der Wert auf false gesetzt, verhindert der Befehl das Vorhandensein von Transparenz. Wir empfehlen Ihnen, den Wert true beizubehalten. Scrolling: Der Befehl scrolling="no" definiert, dass der HPK-I-Frame keinen zusätzlichen, eigenen Scrollbalken erhält. Unabhängig von diesem Befehl erhält die Angebotsliste Ihres Homepagekalenders automatisch einen Scrollbalken, wenn viele Angebote vorhanden sind. Wir empfehlen Ihnen, den Wert no beizubehalten, da Sie ansonsten gegebenenfalls zwei nebeneinander liegende Scrollbalken erzeugen. 4. Layout- und Designänderungen über das HPK-Stylesheet Das Design des Homepagekalenders wird über eine Formatvorlage, das sogenannte CSSbasierte Stylesheet festgelegt. Das Stylesheet setzt sich aus mehreren HTML-Befehlen zusammen. Der Dateiname endet auf.css. Die im Stylesheet enthaltenen Befehle definieren zum Beispiel Farbe, Schriftart/-stärke/-größe oder Linienstärken/-farben/- größen der einzelnen Elemente. Es stehen zwei verschiedene Varianten des Stylesheets zur Auswahl bereit. Das erste, rahmenlose Layout empfehlen wir Ihnen, wenn Sie den HPK in den Hauptteil ihrer Seite einbauen wollen. Sollten Sie den HPK als zusätzliches Element z.b. am linken oder rechten Rand positionieren wollen, empfehlen wir Ihnen ein Layout mit Rahmen und eigenständiger Hintergrundfarbe. Die Möglichkeit, den HPK anschließend individuell anzupassen besteht in beiden Fällen. Um die Datei bearbeiten zu können, benötigen Sie ein Programm, das CSS-Dateien umschreiben und speichern kann, wie zum Beispiel Adobe Dreamweaver oder z.b. das Programm CSS-Designer, das Sie kostenfrei im Internet (z.b. unter herunterladen können Verknüpfen des HPK-Stylesheets mit Ihrem Homepagekalender Bevor Sie konkrete Änderungen im Stylesheet vornehmen können, muss die entsprechende CSS-Datei mit Ihrem Homepagekalender verknüpft werden. Sobald Sie

3 ein entsprechendes Programm zur Bearbeitung von CSS-Dateien installiert haben, laden Sie eine der beiden Vorlagen herunter (Rechtsklick auf den Dateinamen und Ziel speichern unter). CSS_Stylesheet_Vorlage_mit_Rahmen.css (Beispiel für einen Homepagekalender mit Rahmen - Quelle: eigene Darstellung) CSS_Stylesheet_Vorlage_ohne_Rahmen.css (Beispiel für einen Homepagekalender ohne Rahmen - Quelle: // Stand 20.Feb 2011) Speichern Sie die Datei auf Ihrer Festplatte und laden Sie diese anschließend auf den Server Ihrer Internetseite hoch. Öffnen Sie an dieser Stelle die CSS-Datei in einem neuen Tab. Kopieren Sie aus der Adresszeile dieses Tabs die URL, welche auf.css endet. Fügen Sie diese ULR in das Feld Homepagekalender CSS-URL der Eingabemaske Ihres Anbieterprofils im Umweltkalender Berlin ein. Damit ist gewährleistet, dass Ihr Homepagekalender mit Ihrem Stylesheet verknüpft ist. Um Änderungen an Ihrem Stylesheet vorzunehmen, öffnen Sie die CSS-Datei mit dem entsprechenden CSS-Bearbeitungsprogramm. Der dort dargestellte Code definiert das Aussehen der einzelnen Elemente Ihres Homepagekalenders. Sie können das Stylesheet nun Ihren Vorstellungen anpassen. Konkrete Erläuterungen zur Umgestaltung des Stylesheets finden Sie unter 4.2. Speichern Sie anschließend Ihre Änderungen und

4 überschreiben Sie die CSS-Datei im Backend Ihrer Internetseite mit der aktualisierten Dateiversion. Dieses Verfahren können Sie beliebig oft wiederholen, um Veränderungen im Layout auszutesten. Achten Sie darauf, dass der Dateiname unverändert bleibt, damit die Verknüpfung zwischen Ihrem (im Umweltkalender Berlin angegebenen) Stylesheet und Ihrem Homepagekalender bestehen bleibt Allgemeine Hinweise zur Bearbeitung des HPK-Stylesheets Grundsätzlich ist das Stylesheet in einzelne Elemente eingeteilt, auf die verschiedene HTML-Befehle angewendet werden können. Die Elemente entsprechen bestimmten Bereichen im Homepagekalender, zum Beispiel den Angebotstiteln, der oberen Box oder dem Namen der Institution. Ein Element wird durch die Zeile #hoka # NAME DES ELEMENTS sowie einer geschweiften Klammer { eröffnet und endet mit einer geschlossenen, geschweiften Klammer }. Ein HTML-Befehl besteht grundsätzlich aus dem Namen der entsprechenden Eigenschaft (z.b. background-color, padding etc.), einem Doppelpunkt, dem zugewiesenen Wert (Attribute oder Zahlen mit entsprechender Einheit) und einem, den Befehl schließenden Semikolon. Die HTML-Befehle des Stylesheets wurden mit Kommentaren versehen, die Ihnen eine rasche und unkomplizierte Bearbeitung erleichtern. Kommentare beginnen bzw. enden mit der Zeichenkombination /* bzw. */. Farben: Farbwerte in HTML werden in Hexadezimal definiert, einem Code bestehend aus dem Rautensymbol # und einem 6-stelligen Buchstaben- und Zahlencode (z.b. #2D6538 entspricht dem Corporate-Design-Grün des Umweltkalenders Berlin). Die Website hilft Ihnen dabei, den Farb-Code für Ihre Wunschfarbe zu ermitteln. Vergessen Sie die # vor dem 6-stelligen Code nicht! Bereits bestehende Farbpaletten im HTML-konformen Hexadezimal finden Sie z.b. unter Einige vordefinierte Farben können auch direkt per Eingabe des Namens (anstelle des Hexadezimal Codes und ohne das Rautensymbol) generiert werden. Eine gute Übersicht über bestehende HTML-Farben finden Sie unter Handling: Um einen konkreten Befehl im Stylesheet zu suchen, benutzen Sie bitte die Suchfunktion (Strg-F). Bedenken Sie bitte, dass Sie Ihr Stylesheet jederzeit umschreiben können, so dass Sie Veränderungen solange testen können, bis Ihnen das Design zusagt. Wir empfehlen Ihnen, Kopien fertiger CSS-Dateien als Backup anzulegen. Weiterführende Links: Die Website bzw. liefert bei vielen Unklarheiten bezüglich HTML bzw. CSS-Stylesheets hilfreiche Antworten. 4.3 Hinweise zur Bearbeitung der HTML-Befehle im Stylesheet Höhe einzelner Elemente: Der Befehl height: px; definiert die Höhe eines bestimmten Elements in Pixeln, zum Beispiel die Höhe des oberen Rechtecks mit den drei Angebotsrubriken oder des unteren

5 Rechteckes, das die Trefferliste beinhaltet. Bitte achten Sie bei Veränderungen der Höhe einzelner Elemente auf eine gleichmäßige Verteilung entsprechend der Gesamthöhe (siehe HTML-Code des HPK-I-Frames). Abstand zwischen den Elementen: Der Befehl padding: px; definiert den Abstand eines Elementes zu einem anderen Element. Unterschieden wird dabei zwischen den Befehlen padding-top: px; (Abstand nach oben), padding-bottom: px; (Abstand zum unteren Element), padding-left: px; (Abstand nach links) und padding-right: px; (Abstand nach rechts). Linienstärke/-art/-farbe: Der Befehl border: 3px solid #78C840; definiert die Stärke, die Art und die Farbe einer Rahmen- oder Trennlinie. Der erste Teil des Befehls bezieht sich auf die Stärke der Linie in Pixeln, wobei der kleinstmögliche Wert bei 1px liegt. Der zweite Teil des Befehls bezieht sich auf die Art der Linie. Der voreingestellte Wert solid beschreibt eine durchgehende Linie (in der vorher definierten Stärke). Weitere mögliche Werte sind: none = kein Rahmen (bzw. unsichtbarer Rahmen) hidden = kein Rahmen (bzw. unsichtbarer Rahmen) dotted = gepunktet dashed = gestrichelt solid = durchgezogen double = doppelt durchgezogen groove = 3D-Effekt ridge = 3D-Effekt inset = 3D-Effekt outset = 3D-Effekt (Quelle: Stand ) Der dritte Teil des Befehls bezieht sich auf die Farbe der Linie. Hier können Sie per Eingabe des Namens oder Hexadezimal-Codes die Farbe der Linie ändern (vgl. 4.2). Schriftarten/Schriftfamilien: Am Anfang des Stylesheets können Sie mithilfe des Befehls font-family: ; festlegen welche Schriftarten bzw. Schriftfamilien verwendet werden sollen. Da unterschiedliche Browser unterschiedliche Schriften unterstützen, empfiehlt es sich, mehrere Schriftarten anzugeben. Der Browser arbeitet die angegebenen Schriftarten von links ab, bis er eine Schrift findet, die er darstellen kann. Somit ist es sinnvoll, als letztes den Namen einer Schriftgruppe (serif, sans-serif, monospace) anzugeben, damit der Browser aus der Schriftenliste des Betriebsystems eine passende Schrift auswählen kann. Voreingestellt ist die Kombination: Verdana, Geneva, Arial, Helvetica, sans-serif. Farbe des Hintergrundes: Die Zeile background-color: ; definiert die Farbe des Hintergrundes. Sie können hier statt der voreingestellten background-color: #F2F3F7; jeden beliebigen Farbwert (vgl. 4.2) eintragen. Möchten Sie den HPK-Hintergrund ganz ohne eigene Farbe darstellen, so wählen Sie background-color: transparent;. Mit dieser Einstellung scheint die Farbe Ihrer Internetseite durch den Homepagekalender hindurch. Hintergrundbild einfügen:

6 Möchten Sie statt einer einheitlichen Farbe ein Bild oder Muster als Hintergrund einfügen, so ergänzen Sie im Abschnitt des betreffenden Elementes folgende Zeile: background: url( no-repeat; Mit dem Befehl background-position:px px; können Sie die Position des Hintergrundbildes anpassen. Schriftfarben: Der Befehl color: ; im Bereich Content: Farben, Schriftinformationen (ab Zeile 37) definiert die Farbe der einzelnen Schriftelemente. Um welches Schriftelement es sich handelt, entnehmen Sie den Kommentaren der Stylesheet-Vorlage. Sie können die entsprechenden Schriftfarben ändern, indem Sie den Namen oder den Hexadezimal-Code der Schrift in den Befehl color: ; eintragen. Weitere Informationen zu HTML-Farbwerten finden Sie unter 4.2. Beispiel: #hoka h3 a{color: #2D6538;} Die Schriftfarbe der drei Zeilen der oberen Box entspricht dem Farbwert des Codes #2D6538 (Corporate-Design-Grün des Umweltkalenders Berlin). Größe der Schrift: Der Befehl font-size: em; definiert die Größe eines Schriftelements. Bei der Einheit em handelt es sich um eine relative Skala. Der Befehl font-size: 2em; verdoppelt die Schriftgröße (200%), wohingegen der Befehl font-size: 1em; der normalen Schriftgröße (100%) entspricht. Der Befehl font-size: 1.2em; vergrößert somit die Schrift um 20%. Schriftgewicht: Der Befehl font-weight: ; definiert, wie fett ein Schriftelement dargestellt wird. Zur Auswahl stehen die Werte normal (normales Schriftgewicht), bold (fette Schrift) und lighter (dünne Schrift). Zeilenabstand: Der Befehl line-height: pt; definiert den Abstand der Zeilen innerhalb eines Elementes. Text-Transformation: Mit Hilfe des Befehls text-transform: ; können Sie in einem Textbereich Klein- oder Großbuchstaben oder Kapitälchen definieren, unabhängig davon, wie die einzelnen Buchstaben tatsächlich eingegeben wurden. Folgende Angaben sind möglich: capitalize = Wortanfänge als Großbuchstaben uppercase = nur Großbuchstaben lowercase = nur Kleinbuchstaben none = normal (keine Text-Transformation) Stand: