Ich habe zur zeit praktikum und soll was in typo3 machen. im internet stehen sachen die ich meistens nicht verstehe. (ok mittlerweile mehr).
ich soll da eine vorlage für eine webseite machen. nur hab ich keine ahnung wie ich die machen kann da im internet keine gescheite anleitung finde. ich hoffe ihr könnt mir helfen. sie soll so aussehen
Hallo Kinged,
hast du denn grundsätzlich Ahnung von HTML und CSS oder fangen wir hier bei null an?
Typo3 hast du schon ans Laufen bekommen oder hängst du da noch?
Wenn nein, soll es unter Unix oder Windoof laufen?
Generell würde ich dir empfehlen hier im Forum in der Sidebar links den Schalter "TYPO3 Dokumentation" anzuklicken. In der Dokumentation findest du alles für den Einstieg, da ist auch alles ganz toll erklärt.
Ohne gemein sein zu wollen:
Natürlich könnte ich dir jetzt eine Schritt-für-Schritt-Anleitung zu geben, aber ich vermute mal, Sinn der Aufgabe die dir gestellt wurde ist nicht, einfach etwas abzuschreiben sondern deine Selbtsständigkeit und Eigeninitiative zu testen.
Was ist es denn für ein Praktikum? Hast du Aussicht auf Anstellung oder ist es ein reines Schnupperpraktikum? Von der Schule aus oder einfach so?
Hallo chrissli. Ich habe nur ein bisschen Kenntnisse in HTML. CSS sagt mir nur ein bisschen was. TYPO3 hab ich zwar zum Laufen gebracht aber trotzdem sagt es mir nach 10 stunden immer noch nicht viel.
Dein Tipp mit den vorlagen bringt mich vielleicht weiter. Ich habe keine Ahnung wie man ein Menü macht bzw wie man die größen bestimmt.
Mein Praktikum hat was mit der Web Entwicklung zu tun. Das ist für die Schule.
Und ich benutze Windows.
Hi,
Du musst zunächst eine HTML-Datei erstellen. Statisch mit allem was man braucht, CSS, etc. Oder man nimmt fertige CSS-Frameworks wie YAML.de . Dann musst du in dieser Datei sogenannte Marker einsetzen. Einmal damit Typo3 sieht, wo der Content rein soll:
<!-- ###DOCUMENT_ALL### start//-->
<!-- ###DOCUMENT_ALL### end//-->
(direkt nach dem Body-Tag und vor dem schließenden body-Tag)
Und dann noch Marker an denen der Inhalt steht. Das sieht dann z.B. so aus ###TITLE### (immer drei Rauten am Anfang und am Ende). Diese Marker dienen als Platzhalter und man kann sie mit Inhalten füllen. Dazu braucht man dann TypoScript.
Du musst in der root-Seite einen Template-Datensatz anlegen und dort rein kommt der Code, der die HTML-Vorlage lädt und mit Inhalten füllt. Das sieht dann im Template-Datensatz ungefähr so aus:
(muss in das Setup-Feld)
page = PAGE
page {
typeNum = 0
includeCSS {
file1 = fileadmin/templates/screen-start.css
file1.media = screen,print
}
meta.description.field = description
meta.keywords.field = keywords
bodyTag = <body>
}
# Template füllen
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/vorlage.tmpl
workOnSubpart = DOCUMENT_ALL
marks.TITLE = TEXT
marks.TITLE.field = title
marks.LEFTCOL < styles.content.getLeft
marks.INHALT < styles.content.get
marks.RIGHTCOL < styles.content.getRight
marks.BORDERCOL < styles.content.getBorder
# Footer - Daten
marks.LASTCHANGE < styles.content.lastUpdate
marks.LASTCHANGELABEL < usr.naci.lastchange
}
(styles.content.get sind in "CSS Styleed Content" vordefinierte "Funktionen", die den Inhalt einer Spalte dieser Seite holen. Dieses CSS Styled Content war früher eine Extension wird nun aber immer mit Typo3 mitgeliefert.)
Es gibt viele Tutorials im Internet:
Modern Template Building
http://typo3.org/documentation/document-library/tutorials/doc_tut_templsel_de/current/
ist zwar alt, aber ok. Gibt es auch in Deutsch.
TypoScript braucht man mittelfristig auch bei Typo3:
http://typo3.org/documentation/document-library/
(TypoScript Referenz ist ein MUSS.)
Und wenn das alles nicht hilft oder man keine Zeit für langes Lesen hat:
Eine Schulung machen, da kommt man am schnellsten ins Thema rein. Die gibt es auch als Online-Schulung ;-) siehe Signatur. Damit ist man unabhängig von jedem Ort und Tageszeit (neben der Arbeit): http://www.akademie.de/online-workshops/typo3-einsteiger
Wer lieber selbst lernt, im eigenen Tempo oder am Projekt, kommt mit den offiziellen Tutorials oder Büchern besser zurecht:
http://www.amazon.de/Einstieg-TYPO3-4-5-Installation-TemplaVoil%C3%A0/dp/3836217554
http://www.amazon.de/TYPO3-Kochbuch-Christian-Trabold/dp/389721430X
bis bald
netty4711
also danke euch mal. die vorlagen links haben mir nicht geholfen... sie waren zu kompliziert für micht.
und noch was. eine seite habe ich aber wie man ein menü reintut bzw. oben ein logo da hab ich keine ahnung. hier sind meine daten (sorry wenn was falsch ist, ich hab ein foto gemacht und es zu hause dann abgeschrieben):
Seite = PAGE
#seite.typeNum = 0
#seite.config.doctype 0 xhtml_trans
#seite.stylesheet = fileadmin/templates/stylesheet.css
seite.1 TEMPLATE
seite.bodyTag = <body bdcolor = "#0000FF">
seite.1 {
template = FILE
templaze.file = fileadmin/templates/index.html
#workOnSubpart = DOKUMENT
#Linke Spalte
marks.LINKS < styles.content.getLeft
# Inhalt
marks.INHALT < styles.content.get
#Header
marks.HEADER < styles.content.getBorder
# Rechte Spalte
marks.Rechts <styles.content.getRight
}
marks.LEFTCOL < styles.content.getLeft
marks.INHALT < styles.content.get
marks.RIGHTCOL < styles.content.getRight
marks.BORDERCOL < styles.content.getBorder
# Footer - Daten
marks.LASTCHANGE < Styles.content.lastupdate
marks.LASTCHANGELABEL < usr.naci.lastchange
}
mit css meine ich html. ich hatte nur keine ahnung wo das war 🙂
<div in=content">###INHALT###</div>
<div style=widht:100%;float:left; background-color:white;">
</div>
<div style=widht:100%;float:left; background:white;">
<div style="float:left;margin:5px">
<div id="left">###LINKS###</div>
</div>
<div style="float:right;">
<div id="right">###RECHTS###</div>
</div>
</div>
<div style="width:100%;float:left; background-color:blue; height: 80px">
</div>
Hallo Kinged,
deine Kamera ist wohl nicht die Beste.
Typoscript ist
1) case-sensitive d.h. Gross-/kleinschreibung ist wichtig ( auch wenn der Generation Handy etwas schwer fällt )
2) Gleichheitszeichen ( "=" ) sind Zuordnungen und müssen an den entsprechenden Stellen vorhanden sein
Will sagen dein Typoscript strotzt nur so vor Rechtschreibe und Syntax-Fehlern
Styleangaben gehören übrigens immer ins Stylesheet ( xyz.css ) und haben im HTML nichts verloren.
So, ausgekotzt!!!
Im Backend solltest du einen Eintrag haben mit einer Weltkugel davor.
Darunter legts du ein paar Seiten an, z.B. so:
(O) < das ist die Weltkugel
- Home
-- Seite 1
-- Seite 2
--- Seite 2.1
-- Seite 2.2
-- Seite 3
--- Seite 3.1
Klicke in der Sidebar auf auf Template und bearbeite das Typoscript von Home im Bereich "Setup"
Da kommt dieser Code rein:
page = PAGE
page {
typeNum = 0
config.doctype = xhtml_trans
includeCSS {
1 = fileadmin/style.css
}
meta {
description.field = description
keywords.field = keywords
}
}
# holt ein Bild aus den Ressourcen
temp.headerbild = IMAGE
temp.headerbild {
file.import = uploads/media/
file.import.field = media
file.import.listNum = 0
}
#Bildet die Seitenstruktur in der Sidebar ab ( 3 Ebenen )
temp.sidebar = HMENU
temp.sidebar {
special = directory
special.value = 1
1 = TMENU
1 {
NO = 1
NO.wrapItemAndSub = <li>|</li>
ACT < .NO
ACT.wrapItemAndSub = <li class="active">|</li>
wrap = <ul>|</ul>
}
2 < .1
3 < .2
}
#holt Inhalte aus Spalte "Normal"
temp.inhalt < styles.content.get
page {
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/default.html
marks {
HEADERBILD < temp.headerbild
SIDEBAR < temp.sidebar
INHALT < temp.inhalt
}
}
}
Dann speicherst du.
Klicke nochmals auf die Home-Seite und bearbeite diesmal nicht das Setup sondern klicke auf "Gesamten Template-Eintrag bearbeiten" ( oder so ähnlich )
Klicke auf den 3. Reiter ( in english heisst der "Includes" ).
Nun solltest du u.a. 2 Listen sehen, die Linke ist leer und in der Rechten stehen einige Einträge
Klicke auf CSS Style Content in der Liste rechts, dieser Eintrag sollte nun nach links rutschen ( das erleichtert das Anzeigen der Inhalte ungemein )
Speichere
Lege in deinem Typo3-Verzeichnis im Ordner "fileadmin" eine neue Textdatei an mit dem Namen "default.html"
Darin soll stehen:
<div id="main">
<div id="pageheader">###HEADERBILD###</div>
<div id="pagebody">
<div id="sidebar">###SIDEBAR###</div>
<div id="content">###INHALT###</div>
</div>
</div>
Dann legst du noch eine Datei mit dem Namen "styles.css" an
Darin soll stehen:
#main { width: 1000px; margin: 0 auto; }
#pagebody { overflow: hidden; }
#sidebar { width: 300px; float: left; }
#sidebar LI.active A { font-weight: bold; }
Dorthin kommen in Zukunft alle deine Styleangaben
Im Typo3-Backend klickst du nun auf in der Sidebar links auf "Seite" ( oder Page )
Klicke mit der rechten Maustaste auf "Home" und wähle "bearbeiten"
Hier kannst du Seitentitel und Navigationstitel nachträglich ändern
Klicke auf den Reiter "Ressourcen" ganz rechts.
Dort hast du gleich als erstes ein Feld "Files" mit einem "Durchsuchen"-Button darunter.
Wähle mit dem Button eines deiner Headerbilder aus und Speichere die Seite, das Bild wird in Typo3 gespeichert
Das erste Bild in dieser Liste wird als Headerbild auf deiner Seite angezeigt und kann individuell für alle Seiten angegeben werden.
Klicke nun normal auf die Home-Seite und du solltest 4 Spalten sehen.
Aktuell ist nur die Spalte "Normal" interessant.
Lege in dieser Splate einen neuen Eintrag an und Spiele etwas mit dem Editor.
Speichere die Seite ( immer ans Speichern denken, Typo3 gibt KEINE Warnmeldung wenn etwas geändert wurde )
Rufe die URL deiner Seite auf, du solltest nun die ersten Inhalte sehen mit Header-Bild und Sidebar
Ich hoffe damit kommst du klar.
Mann mann, die Jugend von heute... 😉