Erstellen eines HTML-Templates mit externer CSS-Datei

Save this PDF as:
 WORD  PNG  TXT  JPG

Größe: px
Ab Seite anzeigen:

Download "Erstellen eines HTML-Templates mit externer CSS-Datei"

Transkript

1 Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden Arbeitsschritte Anlegen einer Seite mit Unterseiten Einrichten des Menüs im Template Anlegen und Einbinden einer HTML-Vorlage Anlegen einer CSS-Datei Hinzufügen der CSS-Angaben ins Template Anlegen einer Seite mit Unterseiten Um zu erfahren wie Seiten und Unterseiten angelegt werden, sehen Sie sich noch einmal den Abschnitt Seiten Einrichten an. Version 1.0 Seite 1/7

2 Einrichten des Menüs im Template # Der Anfang page = PAGE page.typenum = 0 page.10 = TEMPLATE page.10.template = fileadmin/ordnername/html_template.html # unser HTML Template page.10.workonsubpart = DOCUMENT # unser definierter Arbeitsbereich page.10.marks.inhalt = CONTENT # unser SubPart ###INHALT### page.10.marks.inhalt { table = tt_content select.orderby = sorting select.where = colpos=0 page.10.marks.navigation= HMENU # unser SubPart ###NAVIGATION### page.10.marks.navigation.1 = TMENU page.10.marks.navigation.1.no { allwrap = <tr><td class="menu_1-1-no"> <tr> page.10.marks.navigation.1.act = 1 page.10.marks.navigation.1.act{ allwrap = <tr><td class="menu_1-1-act"> <tr> page.10.marks.navigation.2 = TMENU page.10.marks.navigation.2.no { allwrap = <tr><td class="menu_1-2-no"> <tr> page.10.marks.navigation.2.act = 1 page.10.marks.navigation.2.act{ allwrap = <tr><td class="menu_1-2-act"> <tr> Die rot markierten Wörter geben die Markierung für den jeweiligen Inhalt an. Der blau markierte Bereich gibt das Unterverzeichnis von Fileadmin und den Namen des HTML- Templates an. Die grün markierten Bereich sind schließlich die Klassen für das CSS-Template. Version 1.0 Seite 2/7

3 Anlegen und Einbinden einer HTML-Vorlage Im Template wurden schon die Bereiche definiert, die den entsprechenden Inhalt haben werden. Nun muss dies auch in dem HTML-Template geschehen. Zunächst muss eine HTML-Seite angelegt werden. Dort definieren wir dann durch ###MARKIERUNGSNAME### welcher Inhalt an diese Stelle stehen soll. In einigen Dokumentationen wird diese Markierung in einem HTML-Kommentar dargestellt. Ich persönlich bin der Meinung, dass man durch Deaktivieren der Markierungen im Typo3-Template der Seite noch einmal gut sehen kann, wo dieser Inhalt stehen soll. Bei einem Kommentar bleibt dies jedoch aus. Version 1.0 Seite 3/7

4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>template</title> </head> <body> ###DOCUMENT### <table align="left" width="100%" height="95%" align="left" cellpadding="0" cellspacing="0" border="0"> <tr height="50"> <td bgcolor="black"><img src="fileadmin/logo.jpg" height="50" width="69" alt="dlr- logo"> <td bgcolor="black"><img src="fileadmin/swaci_headline_0.jpg" alt="swacilogo"> <tr valign="top"> <td width="10%" style="background-color:#000000" border="0"> <table id="menu_1" valign="top" cellpadding="0"> <tr> ###NAVIGATION### <br> ###LANG### </table> <table id="inhalt" valign="top" cellpadding="20"> <tr> ###INHALT### ###PHP### </table> </table> <br> ###DOCUMENT### </body> </html> Version 1.0 Seite 4/7

5 Nun muss noch das Template eingebunden werden. Als Voraussetzung brauchen wir innerhalb des Verzeichnisses Fileadmin ein Unterverzeichnis mit Schreibzugriff. 1. Nun im Typo3-BE-Bereich zum Modul Dateiliste wechseln. 2. Jetzt das Verzeichnis wählen. 3. Datei Hochladen Falls eine Datei schon existiert, wird die neue mit einer laufenden Nummer gekennzeichnet. Daher Steht die Funktion zum Überschreiben zur Verfügung. Version 1.0 Seite 5/7

6 Anlegen einer CSS-Datei <!-- hintergrund { color: #red --> body { background-color:#ffcb8c;.menu_1-1-no { background-color:#ffffff; font-weight:bold;.menu_1-1-act { background-color:grey; font-weight:bold;.menu_1-2-no { background-color:#eaeaea;.menu_1-2-act { background-color:# Auch diese Datei muss anschließend hochgeladen werden. So das Typo3-Template ist bisher so konfiguriert, dass es auch gut ohne ein CSS-Template funktioniert. Aber da die Funktionen von CSS genutzt werden sollen, erweitern wir das Template nun. Version 1.0 Seite 6/7

7 page = PAGE page.stylesheet = fileadmin/stylesheet.css page.typenum = 0 page.10 = TEMPLATE... Die rote Zeile muss dem Template hinzugefügt werden. Version 1.0 Seite 7/7

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

Mehr

Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation.

Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation. Die neue Internetseite mit Typo3 (Stand vom 25.12.2015) Ein Anfang Also, ich habe längst nicht alles verstanden, einige Befehlsketten einfach rein kopiert und deshalb sicher auch sinnlose Programmteile

Mehr

Publizieren im Internet

Publizieren im Internet Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund

Mehr

Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben...

Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben... 1 Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben... Möglichst in Zweierteams! 1. Aufgabe: Notepad++ als Editor einrichten (für Windows) 2 Notepad++ für zuhause: Download von

Mehr

Erste Schritte mit XHTML

Erste Schritte mit XHTML Sascha Frank SS 2005 www.saschafrank.de 3.3.05 Eigene Homepage Rechte am $HOME ändern Eigene Homepage Rechte am $HOME ändern chmod 701 /home/login Eigene Homepage Rechte am $HOME ändern chmod 701

Mehr

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung HTML - Tabellen

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung HTML - Tabellen VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer Kommunikation I (Internet) Übung HTML - Tabellen SS 2004 Inhaltsverzeichnis 1. HTML - Tabellen...1 1.1. Aufgabe 1 - Einfache Tabelle...1 1.2. Aufgabe 2 - Tabelle

Mehr

Installationsanleitung - creative templates -

Installationsanleitung - creative templates - - - Fertige TYPO3 Templates auf Basis des CSS- Framework. Stand 2013 INHALTSVERZEICHNIS 1. Voraussetzungen... 3 1.1. Voraussetzungen für eine erfolgreiche Installation... 3 2. Installation... 3 2.1. Entpacken

Mehr

Signatur mit Formatierung

Signatur mit Formatierung Bedienungstip: Signatur mit Formatierung Seite 1 Signatur mit Formatierung Es können Signaturen hinterlegt werden, die beim Erstellen von Nachrichten automatisch angehängt werden. Das ist sehr praktisch,

Mehr

WordPress. - ein kleines Tutorial von C. Oberweis, inf-schule.de -

WordPress. - ein kleines Tutorial von C. Oberweis, inf-schule.de - WordPress - ein kleines Tutorial von C. Oberweis, inf-schule.de - Begriffe: Beiträge (posts, Blog-Inhalte): regelmäßige Artikel, chronologisch geordnet, Kategorien, Autoren usw. zugeordnet Seiten (pages,

Mehr

DOKUMENTATION. ClubWebMan Photoalbum. mit dem Photobook Plugin erstellen.

DOKUMENTATION. ClubWebMan Photoalbum. mit dem Photobook Plugin erstellen. ClubWebMan Photoalbum mit dem Photobook Plugin erstellen. geeignet für TYPO Version 4.0 und 4. G.K.M.B. GmbH Lutherstraße D-7596 Nöttingen T: 07-755 F: 07-757 E: info@gkmb.de W: www.gkmb.com Die Arbeitsschritte

Mehr

TYPO3 und TypoScript

TYPO3 und TypoScript TYPO3 und TypoScript Webseiten programmieren, Templates erstellen, Extensions entwickeln von Tobias Hauser, Christian Wenz, Daniel Koch 1. Auflage Hanser München 2005 Verlag C.H. Beck im Internet: www.beck.de

Mehr

Frames oder Rahmen im Browserfenster

Frames oder Rahmen im Browserfenster In dieser Ausbildungseinheit zeigen wir Ihnen, wie Frames oder auch Rahmen im Browserfenster erstellt werden. Dabei möchten wir anmerken, dass zu Frames bereits sehr viel Gegensätzliches geschrieben wurde.

Mehr

In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können.

In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können. Eine HTML-Seite mit blinden Tabellen strukturieren In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können. Legen Sie in ihrem

Mehr

Hier mal einige Tipps zum Einbau vom "Anfy" Applets. Hier die Seite von "Anfy" und zum Download des Programms: http://www.anfyteam.

Hier mal einige Tipps zum Einbau vom Anfy Applets. Hier die Seite von Anfy und zum Download des Programms: http://www.anfyteam. Hier mal einige Tipps zum Einbau vom "Anfy" Applets. Hier die Seite von "Anfy" und zum Download des Programms: http://www.anfyteam.com/... ich habe "Version 2.1" und zeige hier Bilder und Beschreibungen

Mehr

PDF. PDF-Generierung aktivieren. Methode zum Erzeugen der PDFs. PDF-Format. Seitengröße. Anzunehmende Browserbreite

PDF. PDF-Generierung aktivieren. Methode zum Erzeugen der PDFs. PDF-Format. Seitengröße. Anzunehmende Browserbreite PDF Einstellungen zur PDF-Generierung. PDF-Generierung aktivieren Aktiviert die PDF-Generierung für diesen Mandanten. Der Link - über welchen auf der Website das PDF erzeugt wird - muss manuell ins Template

Mehr

Einrichten der BASE Projektbasis

Einrichten der BASE Projektbasis Einrichten der BASE Projektbasis So installieren Sie Weblication Laden Sie sich die Setup-Datei herunter und entpacken Sie diese auf Ihrem Webserver. Die aktuelle Setup-Datei erhalten Sie von http://www.dev5.weblication.de.

Mehr

Inhaltsverzeichnis. jetzt lerne ich. Ein Wort vorab 15

Inhaltsverzeichnis. jetzt lerne ich. Ein Wort vorab 15 Inhaltsverzeichnis jetzt lerne ich Ein Wort vorab 15 1 Installation und Einrichtung oder 1-2-3 TYPO3 17 1.1 Überlegungen zur Installation 17 1.1.1 TYPO3 stellt Ansprüche 18 1.1.2 Wie sollten Sie vorgehen?

Mehr

Was muss gesichert werden? -Ihre angelegten Listen und Ihre angelegten Schläge.

Was muss gesichert werden? -Ihre angelegten Listen und Ihre angelegten Schläge. Datensicherung : Wenn Ihr PC nicht richtig eingestellt ist, und die Datensicherung in der Ackerschlag deshalb nicht richtig funktioniert, dann zeige ich Ihnen hier den Weg Daten zu sichern. Was muss gesichert

Mehr

HTML-Report mit Papyrus - So geht s

HTML-Report mit Papyrus - So geht s HTML-Report mit Papyrus - So geht s Ja, ich gebe es zu: Ich bin ein fauler Mensch! Ich bin Projektleiter der Webseite Chem-Page.de und auf dieser befinden sich Vorschriften für chemische Experimente. Die

Mehr

Internetseiten selbst erstellt

Internetseiten selbst erstellt Internetseiten selbst erstellt Vorüberlegungen: Übersichtsplan aller geplanten Seiten zeichnen und bereits logische Dateinamen überlegen. Inhalt der Seite Willkommen/Was gibt es zu sehen und was will ich

Mehr

Templates für CMSMadeSimple

Templates für CMSMadeSimple 1. EINLEITUNG Templates für CMSMadeSimple Original von Jan Czarnowski piratos@coftware.de modifiziert von Andreas Just cyberman@gmx.ch Templates für CMSMadeSimple sind zur Zeit nur spärlich vorhanden.

Mehr

Einrichten eines News-Systems in Typo3

Einrichten eines News-Systems in Typo3 Einrichten eines News-Systems in Typo3 Generelles: tt_news ist eine der beliebtesten Erweiterungen für Typo3 und wir bereits auf vielen Sites Vorarlberger Schulen verwendet: Beispiele: http://www.vobs.at/hsl

Mehr

Homepage-Funktionen für Vereinsmitglieder

Homepage-Funktionen für Vereinsmitglieder Homepage-Funktionen für Vereinsmitglieder Inhaltsverzeichnis 1. Voraussetzung: Mitgliederdaten 2. Eigenes Profil (mit Bild) einrichten und Passwort ändern 3. Möglichkeiten sich an Homepage-Inhalt zu beteiligen

Mehr

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen

Mehr

Template Voila Tutorial German

Template Voila Tutorial German Template Voila Tutorial German Extension Key: doc_tv_de Copyright 2000 2002, Andreas Jonderko, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

Angewandte Informatik

Angewandte Informatik Angewandte Informatik Teil 9.1 Web Seiten V1.3 12.03.2011 1 von 37 Inhaltsverzeichnis 3... Welche Browser werden verwendet? 4... Mit welchen Browser surft die Welt? 5... Wie kommt der Browser zur Seite?

Mehr

hotelanfrage_sample