Tutorial Incomedia Website X5 - Schützenverein Tangendorf von

Tutorial
Incomedia Website X5
Erstellt von
zwoemti
und
Manfred58
Inhaltsverzeichnis
Titel
Seiten
Inhaltsverzeichnis
2
PDF in HTML einbinden
3-4
Linkrahmen entfernen
5
Scrollbalken erzwingen
bzw.
unterdrücken
6
Echter Download
7–9
Einbinden von externen Seiten
10
Einbinden von Youtoube Videos
11
Internet Explorer 8
Kompatibiltätsmodus erzwingen
12
Mouseover mit CSS
13
FireFTP - externer FTP-Client
14 - 21
ENDE
22
PDF in HTML einbinden
Einfacher Link nach diesem Muster:
<a href="http://www.domain.de/datei.pdf">hier klicken</a>
Aber es gibt sehr interessante Zusatzoptionen!
Diese funktionieren nach diesem Muster:
<a href="http://www.domain.de/datei.pdf#page=72&view=FitView">hier klicken</a>
Also für die erste Option eine Raute (#) direkt hinter die URL und dann die Option. Ab
der zweiten Option
wird ein & als Trenner verwendet.
Optionsliste:

Zu einer Seite springen
page=Seitennummer
(Seitennummer ist eine Ganzzahl z.B. 72)

Seite in Viewerfenster einpassen (Zoom)
view=FitView
(FitView heißt Seitenanpassung an Viewerfenster)

Seitenbreite an Viewerfenster anpassen
view=FitB
(FitB paßt die Seitenbreite an das Viewerfenster an)

Anzeigemodus
pagemode=mode
(mode kann die Werte thumbs, bookmarks und none haben, je nach dem,
was angezeigt werden soll)

Scroll-Leisten aus- oder einblenden
scrollbar=wert
(wert kann entweder true oder false sein, je nachdem, ob die Scrollbalken angezeigt
werden sollen oder nicht)

Symbolleiste ein- oder ausblenden
toolbar=wert
(wert kann entweder true oder false sein, je nachdem, ob die Symbolleiste angezeigt
werden sollen oder nicht)
Außerdem kann man PDF-Dateien auch noch in die Seite
"embedden" mit dem <OBJECT>- oder dem <EMBED>-Tag,
wobei letzteres durch seine Netscape-Kompatibilität zu
bevorzugen ist.
Allerdings können Netscape-User nur die erste Seite des
Dokuments sehen und nicht im Dokument navigieren.
Aber darauf wird ich hier nicht weiter eingehen!
Was man noch wissen sollte:
Die Optionen werden in der Reihenfolge "abgearbeitet", wie man sie im Link verwendet.,
Also wird erst das Dokument geladen, dann wird z.B. zu der angegebenen Seite
gesprungen, dann die Anzeigegröße angepasst.
Linkrahmen entfernen
Jeder kennt sie, keiner mag sie....
Linkrahmen im IE
(besonders nervig bei grafischen Menüs!)
Erklärung: Jedesmal wenn man im IE einen Link
klickt (egal ob Bild oder Text) kommt ein
dünner,grauer Rahmen um das Bild/den Text.
In diesem Tutorial lernt ihr, wie man die Linkrahmen
enfernt!
Dazu müsst ihr einfach in den A-Tag folgenden Code einfügen:
onfocus="if(this.blur)this.blur()"
Das ganze müsste dann ungefähr so aussehen:
Text:
<a href="http://www.w33k.de"onfocus="if(this.blur)this.blur()">Link</a>
Bild:
<a href="http://www.w33k.de" onfocus="if(this.blur)this.blur()"><img
border="0" src="logo.jpg"></a>
Scrollbalken erzwingen
bzw.
unterdrücken
Für gewöhnlich treten sie immer paarweise auf:
Rollbalken lassen sich zwar abschalten, doch
wenn ein Internet Explorer zum Einsatz kommt ist es möglich,
aus dem Pärchen einen Einzelgänger zu machen.
Der Code kommt in den Head Teil der Seite.
Scrollbalken erzwingen:
<style type="text/css">
body{
overflow:scroll;
overflow: -moz-scrollbars-vertical;
}
</style>
Scrollbalken Variablen:
Das ganze kann man dann auch noch
beliebig verändern folgende Möglichkeiten stehen
zur Verfügung (natürlich nicht alles verwenden sondern nur das
was man wirklich braucht):
Für Internet Explorer
overflow:scroll;
overflow-x: auto;
overflow-x: hidden;
overflow-y: auto;
overflow-y: hidden;
Für Mozilla Firefox
-moz-scrollbars-horizontal
-moz-scrollbars-vertical
Ich denke das ist selbsterklärend.
Echter Download
Hier die vorgehensweise wie man eine PDF (oder jede andere Datei auch) zum „echten“
Download bereit stellen kann ohne sie
vorher in ein Archiv zu packen!
Man erstellt sich eine Datei im Windows Editor (Notepad) oder einem anderen Text
Programm.
Diese nennt man
download.php
Der Inhalt der Datei sollte so aussehen:
<?php
$ordner='PDF/'; #wichtig: / am ende!
if($_GET['datei'])
{
if(file_exists($ordner.$_GET['datei']))
{
header('HTTP/1.1 200 OK');
header('Content-type: application/pdf');
header('Content-Disposition: attachment; filename="'.$_GET['datei'].'"');
readfile($ordner.$_GET['datei']);
}
else header('HTTP/1.1 404');
}
else echo
'<html><head><title>Fehler</title></head><body><h1>FEHLER!</h1><hr
/><p>Kein Dateiname angegeben</p></body></html>';
?>
Danach geht man in sein FTP Programm auf den Websspace und erstellt einen Ordner
mit den Namen PDF
Soll der Ordner anders heißen muss man es oben im Code verändern siehe:
$ordner='EUER ORDNERNAME/'; #wichtig: / am ende!
Danach kopiert man die eben erstellte download.php in das root (Stammverzeichnis)
Verzeichnis des Webspaces!
Bei der Erstellung der Seiten in Website X5 muss darauf geachtet werden das die
erstellte Datei nicht genauso heißt sonst wird sie
logischerweise überschrieben!
Jetzt geht es los mit der Erstellung der Seite mit den Inhalt der PDF Dateien!
Dazu einfach in WS X5 die Seite erstellen wo die Links drin sein sollen.
Ich erstelle immer PHP Seiten wem das nicht gefällt kann ja mal probieren ob es auch
mit dem HTML geht.
HTML CODE FELD einfügen
Und den folgenden Code einfügen falls man es mit Bildern machen möchte man kann
sich selbstverständlich
auch einen Button erstellen und den dann so nutzen!
<a href="http://www.DOMAIN.de/download.php?datei=DATEINAME DER
PDF.pdf"><img src="http://www.DOMAIN.de/PDF/BILD ODER
BUTTON.jpg"></a></a>
Um andere Dateien zum Download anzubieten muss
man im Code folgenden Typ wechseln:
Content-type: application/pdf
Folgendes ist möglich









text – für Text
image – für Grafiken
video – für Videomaterial
audio – für Audiodaten
application – für uninterpretierte binäre Daten, Mischformate (z. B.
Textdokumente mit eingebetteten nichttextuellen Daten) oder Informationen, die
von einem bestimmten Programm verarbeitet werden sollen
multipart – für mehrteilige Daten
message – für Nachrichten, beispielsweise message/rfc822
model – für Daten, die mehrdimensionale Strukturen repräsentieren
example – Beispiel-Medientyp für Dokumentationen
Auf die einzelnen Dateiendungen werde ich jetzt
nicht eingehen das würde den Rahmen sprengen.
Einbinden von externen Seiten
Es gibt verschiedene Möglichkeiten verschiedene
Seiten einzubinden hier mal 2 bzw. 3 Möglichkeiten.
Einbinden mittels iframe:
<iframe src="http://www.deine Seite.de/ORDNER/SEITE.html" frameborder="0"
style="width:100%;height:1000px;overflow:auto;" name="DER NAME DES
FRAMES">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
aufrufen: <a href="http://www.deine
Seite.de/ORNDER/SEITE.html">SELFHTML</a></p>
</iframe>
Einbinden mittels include:


Bei einer PHP Seite
<? include ("./Ordner falls nötig/SEITE.php"); ?>
Bei einer HTML Seite
<?php include './SEITE.html'; ?>
Es darf kein http:// oder www. davor angegeben werden!
Einbinden von Youtube Videos
Mit Website X5 ist es möglich auch Videos von Youtube
einzubinden. Leider hat der Standard Code von Youtube einen
unschönen Nebeneffekt. Bei der Aktivierung des
Menüs/DropDown/Popup verschwindet das aufgeklappte Menü
hinter dem Video.
Abhilfe schafft hier folgender Code der an den Videolink
anzupassen ist.
<div>
<object type="application/x-shockwave-flash"
data="http://www.youtube.com/DER LINK" width="550" height="450">
<param name="movie" value="http://www.youtube.com/DERLINK" />
<param name="wmode" value="transparent" />
</object>
</div>
Internet Explorer 8
Kompatibiltätsmodus erzwingen
Da es immer wieder Probleme mit dem Internet Explorer 8 und der Anzeige gibt habe ich
hier mal einen Code der die Kompatibiltätsansicht erzwingt ohne das der Besucher dies
ändern muss!
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Mouseover mit CSS
Ich habe hier mal ein kleines Beispiel wie man einen MOUSEOVER EFFEKT per CSS
lösen kann.
HTML Objekt erstellen
Im Bereich HTML folgendes eingeben (natürlich noch anpassen)
<div id="zentriert">
<a class="bild1" href="http:// www.DOMAIN.de/"></a>
<a class="bild2" href=" http:// www.DOMAIN.de /"></a>
<a class="bild3" href=" http:// www.DOMAIN.de "></a><br>
</div>[/code]
Im Bereich CSS folgendes:
[code]body{
text-align:center;
}
#zentriert {
margin:0px auto;
width:400px;
text-align:left;
}
a.bild1 { display:inline-block; backgroundimage:url('http://www.DOMAIN.net/test/navi/Arrow_Left.jpg'); margin-left:auto;
margin-right:auto;width:100px; height:100px }
a.bild1:hover { background-image:url(http:// www.DOMAIN.net/test/navi/Arrow_up.jpg);
width:100px; height:104px }
a.bild2 { display:inline-block; background-image:url('http://
www.DOMAIN.net/test/navi/Arrow_up.jpg '); width:100px; height:100px }
a.bild2:hover { background-image:url(http:// www.DOMAIN.net/test/navi/Arrow_up.jpg);
width:100px; height:104px }
a.bild3 { display:inline-block; background-image:url('http://
www.DOMAIN.net/test/navi/Arrow_up.jpg '); width:100px; height:100px }
a.bild3:hover { background-image:url(http:// www.DOMAIN.net/test/navi/Arrow_up.jpg);
width:100px; height:104px }
Das ganze ist dann noch beliebig erweiterbar!
FireFTP - externer FTP-Client
FireFTP ist ein AddOn für Firefox und ist hier herunter zu laden
Der Vorteil liegt in der geringen Dateigrösse (584 KB) und darin, dass kein Programm extra geöffnet
werden muss.
Nachteilig ist, dass der Firefox Browser am PC installiert sein muss (und sinnigerweise auch
verwendet werden sollte).
Wem die englischen Version nicht gefällt, der kann auch mit der deutschen Version arbeiten
(allerdings ist die 961 KB gross und wirklich nicht unbedingt notwendig).
Nach dem Firefox-Neustart steht unter "Extras" FireFTP zur Verfügung.
Unter "Create an account / Einen Zugang erstellen" wird das
"Account Manager / Zugänge verwalten" Fenster geöffnet.




Unter Main - Accountname / Grundeinstellungen - Zugangsname sollte ein
aussagekräftiger Profilname verwendet werden.
Unter Main - Host / Grundeinstellungen - Host wird die vom Webhoster erhaltene
FTP Adresse eingetragen
Unter Main - Loggin / Grundeinstellungen - Benutzername kommt der vom
Webhoster vergebene Benutzername rein
Unter Main - Password / Grundeinstellungen - Passwort kommt das Passwort
hinein.
Diese Daten könnten auch in X5 stehen
Unter Account Manager - Connection - Connection Type / Zugänge verwalten –
Verbindungen - Verbindungsart "passive Mode / passiver Modus" aktivieren, den
voreingestellen Port 21 nicht ändern
Sollte der Webhoster eine gesicherte Verbindunsart anbieten, kann sie unter Account Manager –
Connection - Security / Zugänge verwalten - Verbindungen - Sichere Verbindung eingestellt werden.
Mit [OK] werden die getätigten Einstellungen gespeichert.
Mit "Connect / Verbinden" werden die Einstellungen überprüft und die Verbindung mit
dem Server hergestellt.
In der linken Fensterhälfte wird das Quellverzeichnis gewählt, in der Rechten das
Zielverzeichnis. Es können sowohl einzelne wie auch mehrere Dateien/Verzeichnisse
markiert werden. Durch betätigen des Pfeiles nach rechts werden die Dateien
hoch-, durch den Pfeil nach links werden die Dateien heruntergeladen.
Erwähnenswert sind noch die Properties/Eigenschaften von Dateien bzw. Verzeichnisse.
Hier besteht die Möglichkeit die Berechtigungen zu ändern

Unter Tools - Options / Erweitert - Einstellungen können die FireFTP
Programmeinstellungen vorgenommen werden.
Das Tutorial zu FireFTP für Mozilla Firefox wurde von Manfred58 erstellt.
Das war es
erstmal fürs erste!
Dieses Tutorial ist noch in Bearbeitung und nicht
fertiggestellt!
Sollten Fragen aufkommen kann man mich auch
per Email erreichen.
[email protected]
oder
[email protected]