Tutorial Incomedia Website X5

Transkript

1 Tutorial Incomedia Website X5 Erstellt von zwoemti und Manfred58

2 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 ENDE 22

3 PDF in HTML einbinden Einfacher Link nach diesem Muster: <a href=" klicken</a> Aber es gibt sehr interessante Zusatzoptionen! Diese funktionieren nach diesem Muster: <a href=" 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)

4 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.

5 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: Bild: <a href=" <a href=" onfocus="if(this.blur)this.blur()"><img border="0" src="logo.jpg"></a>

6 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: Scrollbalken Variablen: <style type="text/css"> body{ overflow:scroll; overflow: -moz-scrollbars-vertical; } </style> 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 Ich denke das ist selbsterklärend. -moz-scrollbars-horizontal -moz-scrollbars-vertical

7 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/ OK'); header('content-type: application/pdf'); header('content-disposition: attachment; filename="'.$_get['datei'].'"'); readfile($ordner.$_get['datei']); } else header('http/ '); } else echo '<html><head><title>fehler</title></head><body><h1>fehler!</h1><hr /><p>kein Dateiname angegeben</p></body></html>';?>

8 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=" DER PDF.pdf"><img src=" ODER BUTTON.jpg"></a></a>

9 Um andere Dateien zum Download anzubieten muss man im Code folgenden Typ wechseln: Folgendes ist möglich Content-type: application/pdf 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.

10 Einbinden von externen Seiten Es gibt verschiedene Möglichkeiten verschiedene Seiten einzubinden hier mal 2 bzw. 3 Möglichkeiten. Einbinden mittels iframe: <iframe src=" 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önnen die eingebettete Seite über den folgenden Verweis aufrufen: <a href=" 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 oder www. davor angegeben werden!

11 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=" LINK" width="550" height="450"> <param name="movie" value=" /> <param name="wmode" value="transparent" /> </object> </div>

12 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" />

13 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) Im Bereich CSS folgendes: <div id="zentriert"> <a class="bild1" href=" <a class="bild2" href=" /"></a> <a class="bild3" href=" "></a><br> </div>[/code] [code]body{ text-align:center; } #zentriert { margin:0px auto; width:400px; text-align:left; } a.bild1 { display:inline-block; backgroundimage:url(' margin-left:auto; margin-right:auto;width:100px; height:100px } a.bild1:hover { background-image:url( width:100px; height:104px } a.bild2 { display:inline-block; background-image:url(' '); width:100px; height:100px } a.bild2:hover { background-image:url( width:100px; height:104px } a.bild3 { display:inline-block; background-image:url(' '); width:100px; height:100px } a.bild3:hover { background-image:url( width:100px; height:104px } Das ganze ist dann noch beliebig erweiterbar!

14 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.

15 Unter "Create an account / Einen Zugang erstellen" wird das "Account Manager / Zugänge verwalten" Fenster geöffnet.

16 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

17 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.

18 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.

19 Erwähnenswert sind noch die Properties/Eigenschaften von Dateien bzw. Verzeichnisse.

20 Hier besteht die Möglichkeit die Berechtigungen zu ändern

21 Unter Tools - Options / Erweitert - Einstellungen können die FireFTP Programmeinstellungen vorgenommen werden. Das Tutorial zu FireFTP für Mozilla Firefox wurde von Manfred58 erstellt.

22 Das war es erstmal fürs erste! Dieses Tutorial ist noch in Bearbeitung und nicht fertiggestellt! Sollten Fragen aufkommen kann man mich auch per erreichen. oder