Benutzervorgaben
Online Dokumentation für FM4Web
Inhaltsverzeichnis
Die Kenndaten
Die Kenndaten werden für die Erstellung der Kontaktseite und dem Impressum benutzt. Die Angaben zur Firma, Person und Kontakt werden zusätzlich als Variablen in der HTML-Vorlage Kontakt verwendet. Über das Markierungsfeld "Impressum" kannst du selbst entscheiden, ob das Feld im Impressum angezeigt werden soll.
TopSeitenkopf-Bild
Das Bild für den Seitenkopf muss 800px breit sein und eine Auflösung von 72 dpi haben. Das Bild wird wie jedes andere Bild auch, über die rechte Maustaste und den Befehl "Bild einfügen" in das Feld eingefügt. Das Bild darf nicht als Verweis eingefügt werden, also kein Häkchen setzen im FileMaker Dialogfenster.
TopFußzeile-Text
Der Text für die Fußzeile darf HTML Tags enthalten. Wenn du einen Zeilenumbruch erzeugen willst, benutze bitte das <br/> Tag. Der Text wird auf jeder Seite eingesetzt.
TopFußzeile Links
Du kannst maximal fünf Links in der Fußzeile platzieren. Dazu füllst du bitte die Felder Fußzeile Link, hier gibst du den Text für den Link ein.
Fußzeile Link Href, hier gibst Du das Ziel für den Link ein, bitte immer als vollständigen Pfad ( http://www.example.com ). Einzige Ausnahme von dieser Regel ist, du willst einen relativen Pfad zu deinen eigenen Seiten erzeugen. In diesem Fall kannst du den entsprechden Pfad eintragen, zum Beispiel ../support/meineseite.html
Zusatztexte
Die Zusatztexte sind für das Impressum gedacht. Wenn dir der Umfang der Kenndaten nicht ausreicht, kannst du in das Feld "sonstige Zusätze für das Impressum" deine eigenen Texte eintragen.
In die Felder Haftungsauschluß und Datenschutzerklärung kannst du ebenfalls deine eigenen eintragen und per copy & past einsetzen.
Startseite-Standardausgabe
Die Standard Startseite wird erzeugt wenn du kein Thema als Startseite markierst, siehe dazu "Themen-Optionen". Die Standard Startseite listet alle vorhandenen Themen mit ihrem Bild und dem Einleitungstext auf. Unterhalb wird eine Link zum Kapitelindex von dem Thema eingesetzt.
Deine Aufgabe besteht dann nur darin, das du eine Seitenüberschrift, Seitentitel (Browserfenster), Keywords, eine Seitenbeschreibung und den den Einleitungstext für die Startseite einmalig hinterlegst.
Impressum
Das Impressum gehört zu den Pflichtseiten einer Webseite, Ausnahme, die Seite wird von einer Privatperson betrieben. Die notwendigen Eingaben kommen aus den Kenndaten und Zusatztexten für das Impressum. Deine Aufgabe an dieser Stelle ist es, Eine Überschrift, einen Seitentitel, Keywords und eine Seitenbeschreibung einmalig zu hinterlegen.
TopKontakt
Die Kontaktseite wird aus den Kenndaten aufgebaut, zusätzlich kann eine Anfahrtsskizze als Link von einen Dienstanbieter wie Google Maps eingefügt werden, dazu siehe bitte "Maps-Anfahrtsskizze".
Server Einstellungen
Wenn du deine Webseite auf einem Webserver betreiben möchtest, musst den vollständigen Pfad zum Webserver eintragen. Also zum Beispiel "http://www.jens-liebelt.de"
TopFTP Einstellung
Die FileMaker Datenbank kann deine Seiten auf einen Webserver kopieren. Dazu musst du den Namen von deinem Server eintragen.
Dazu sind drei Angaben notwendig:
1. Der Server, ohne irgendeinen Zusatz, zum Beispiel "jens-liebelt.de".
2. Dein Benutzername für den FTP Zugang.
3. Dein Passwort für den FTP Zugang.
Zusätzlich kannst du ein Verzeichnis auf dem Server vorgeben, in das die Dateien kopieren willst. Wenn du direkt in das Hauptverzeichnis von deinem FTP Zugang schreibst, kannst du das Feld einfach leer lassen.
Wenn Du in bestimmtes Verzeichnis schreiben willst, gibst du in das Feld den Namen für das Verzeichnis ein. Der darf nicht mit einem "/" beginnen oder enden.
Webstatistik
Wenn du den Erfolg deiner Webseiten kontrollieren willst, kannst du einen TrackerCoder für eine Websatistik, zum Beispiel Google Analystic, per copy & paste in das Feld eintragen.
TopMaps-Anfahrtskizze
Wenn du auf der Kontaktseite eine Anfahrtsskizze einfügen willst, kannst in dieses Feld den Link von einem Dienstanbieter, zum Beispiel Google Maps, per copy & paste einfügen.
TopZusatzfunktionen
Eine wichtige Zusatzfunktion für die Datenbank ist der TextWrangler. MIt Hilfe des TextWrangler kann die von FileMaker erzeugte UTF16le Codierung in das gebräuchliche UTF-8 Format konvertiert werden. Der TextWrangler kann kostenlos unter folgender Adresse heruntergeladen werden.
http://www.barebones.com/products/textwrangler/
Wenn Du das Häkchen bei "TextWrangler benutzen" setzt kann du deine Webseiten auf jeden Webserver betreiben.
Die Mootools sind ein JavaScript Framework die deine Webseite um ein paar attraktive Funktionen erweitern können. Wenn du die Mootools benutzen willst musst du zunächst das Häkchen bei "Mootools benutzen" setzen. Danach kann du auswählen welche Funktionen aktiviert werden sollen.
1. Toogler benutzen, zeigt zunächst nur die Überschriften der Textabsätze, durch einen Mausklick auf die Überschrift wird der Textabsatz ein- bzw. ausgeblendet.
2. Lightbox benutzen, diese Funktion zeigt das high Res. Bild direkt im aktuellen Fenster an, sofern du ein high Res. Bild hinterlegt hast.
3. Reflexion benutzen, zeigt unterhalb der low Res. Bilder eine Bildspiegelung an.
4. MiniCard benutzen, diese Funktion ist mit Vorsicht zu genießen, kann aber sehr hilfreich sein. Die MiniCard macht den Bereich der rechten Seitenleiste dynamisch, das heißt dieser Bereich bewegt sich immer zur aktuellen Position auf der Webseite.
Allerdings gibt es Probleme mit Seiten die einen sehr kurzen Inhalt, oder eine übermäßig lange rechte Seitenleisten haben.
Das MBS PlugIn:
Mit dem PlugIn können die Bildgrößen exakt berechnet und für das "image Tag" als "width" bzw. "height" Attribute, wie von HTML5 gefordert, eingefügt werden. Außerdem wird das PlugIn für Animationseffekte der FileMaker Masken verwendet. FM4Web arbeitet aber auch fehlerfrei ohne das PlugIn. Das PlugIn ist standardmäßig deaktiviert, und muss per Lizenzcode aktiviert werden. Dazu sind die entsprechenden Felder in der Eingabemaske vorhanden. Nach der Eingabe des Lizenzcode, muss die Datenbank geschlossen und wieder geöffnet werden, damit die Nutzung für das PlugIn aktiviert wird.
HTML-Vorlage Kontakt
Auf jeder Seite wird in rechten Seitenleiste als erstes die Kontaktinformation gezeigt. Damit du bestimmen kannst, wie dieser Bereich aussehen soll kannst du hier verschiedene Platzhalter und eigenen Quellcode verwenden.
Die Platzhalter werden mit den Inhalten aus dem Kenndaten gefüllt.
Als Platzhalter kannst du folgende Marken verwenden:
vorname,name, firma1, firma2, strasse, plz, ort, telefon, telefax, email
Jede Marke beginnt mit einer #, diese Marken können auch in den Texten für die Seiten verwendet werden, deshalb habe ich die # vor den Marken weggelassen.
Das sieht dann etwa so aus:
Jens Liebelt, Hauptstrasse 23 in 21646 Holvede
HTML-Vorlage Leistungsangebot
Die HTML-Vorlage Leistungsangebot wird nur auf der Startseite, direkt nach dem Kontaktblock angezeigt. In das Eingabefeld kannst du HTML Quellcode eingeben. Die Vorlage muss nicht zwingend das Leistungsangebot enthalten, sondern kann beliebig genutzt werden.
TopHTML-Vorlage Spezial
Die HTML-Vorlage Spezial wird direkt nach dem Leistungsangebot, und nur auf der Startseite angezeigt. In das Eingabefeld kannst du beliebigen HTML Quellcode eingeben.
TopCSS-Webseite
Über das Eingabefeld für das CSS der Webseite hast du die Möglichkeit, die Gestaltung der Webseite zu verändern. Es ist aber nicht möglich das HTML Gerüst der Seite zu verändern. In der nachfolgenden Tabelle habe ich alle Selektoren aufgelistet, die ich verwende. Diese Selektoren darfst du nicht löschen oder umbenennen. Die Inhalte der Selektoren kannst du verändern, die Ergebnisse siehst du nach der Publikation der Webseite. Damit du keine bösen Überraschungen erlebst, solltest du dir eine Kopie vom dem originalen CSS anlegen, dazu kannst du den Feldinhalt per copy & paste in ein Textdokument kopieren.
TopBeschreibung der Selektoren
Bereich / Selektor |
Beschreibung |
Seitenkopf |
|
#flags |
Bereich für Seitenkopfbild |
Seitenaufbau |
|
#warpper |
Umschließt die Bereiche Menü,
Seiteninhalt und Seitenleiste. Dieser Selektor ist extrem wichtig für
die korrekte Darstellung der Webseite. |
Menü |
|
#menu |
Die Hauptnavigation der Seite |
#menu a |
Formatierung für die Links im Menü |
Seiteninhalte |
|
#content |
Der Seitenbereich für die Texte |
#content a |
Formatierung für die Links im
Content |
#content .a_phrase |
Formatierung von Links die
Phrasen enthalten |
#anker a |
Formatierung für Ankerlinks (Top) |
Seitenleiste |
|
#contact |
Der Block für die Kontaktdaten |
#download |
Bereich für PDF Download |
Benutzervorgaben | Das Thema der Seite |
#kapitel |
Das Kapitel der Seite |
#inhalt |
Das Inhaltsverzeichnis der Seite |
#minicard | Umschließt alle Blöcke in der
Seitenleiste |
#sideContent |
Der gesamte Bereich der
Seitenleiste |
Seitenfuß |
|
#foot |
Der gesamte Seitenfuß |
#foot p |
Texte in der Fußzeile |
#foot a |
Formatierung für die Links in
der Fußzeile |
Sonstige |
|
.bu |
Bildunter- überschrift /
Bildquelle |
.picture |
Bilder Standardklasse |
.liste |
Wird von Block Thema in der
rechten Seitenleiste verwendet, einrücken vom Text. |
.news |
Ankündigung von neuen Artikeln
auf der Startseite in der rechten Seitenleiste. |
Mootools |
|
.reflect |
Low Res. Bilder Reflexion |
.toggler |
Textabsätze ein- und ausblenden |
h3.toggler |
Format für die Überschriften im
Toggler |
.element |
Textabsatz im Toggler |
.element ul |
Listen im Toggler |
.active |
Der aktive Toggler |