webRookie » All Posts

FTP-Programme

Tom — Sat, 28 Apr 2012 08:26:05 +0000

FTP-Programme :

Webspace-Anbieter verfügen über keinen “Hochlade-Button”,
wie man es von Baukasten-Anbietern her kennt.

Egal welchen WebHoster ihr wählt, zum Hochladen der Seiten (und Dateien) benötigt ihr ein FTP-Programm . Das Programm “Filezilla” (für Linux,Mac- und Windows) haben wir bereits hier beschrieben :

zwei Alternativen findet ihr hier :

- “Ruff-FTP” (deutsch) / zum Download: http://ruffftp.ru.funpic.de/ (Windows)
- “Cyberduck” (deutsch) / zum Download: http://cyberduck.ch/ (Mac + Windows)

Kostenloser Webspace

wolle — Sat, 28 Apr 2012 08:38:13 +0000

Kostenlose Webspace-Anbieter :

bplaced.net (2 GB Speicher – werbefrei)
Beachte: Nach Registrierung kann es 30 Min. dauern, bis hochgeladene Homepage auch sichtbar ist

lima-city.de (unbegrenzt Speicher – werbefrei)
jabry.net (1 GB Speicher – werbefrei)
tipido.com (500 MB Speicher – werbefrei)
redio.info (500 MB Speicher – werbefrei)
cwcity.de (unbegrenzt Speicher – werbefrei bei Foren-Beteiligung)

kostenlos mit Werbe-Layer:
square7.ch (7 GB Speicher – 1 Layer-Werbung)
pytal.de (unbegrenzt Speicher – 1 Layer-Werbung)
ohost.de (2,5 GB Speicher – 1 Layer-Werbung)
funpic.de (5 GB Speicher – 1 Layer-Werbung)

Einige Anbieter bieten auch Domains (.de Adresse) an.
- z.B. lima-city.de : wunschname.de für 7.99 Euro / Jahr
- z.B. pytal.de: wunschname.de für 5.99 Euro / Jahr

Alternativ bekommt ihr hier eine Wunsch-Domain :
united-domains.de (ab 15 Euro im Jahr)
strato.de (ab 12,78 Euro im Jahr)
prosite.de (ab 8,18 Euro / Jahr)
internetagentur-was.de (ab 6 Euro / Jahr)

Weitere Anbieter dürfen hier gepostet werden :-)

CSS Eigenschaften zusammenfassen

wolle — Sat, 28 Apr 2012 08:40:23 +0000

CSS Eigenschaften zusammenfassen :

Beispiel 1
für Schrift-Eigenschaften. Nehmen wir an, unser Text soll
die Größe 12 Pixel, Schriftart “arial” und Textfarbe schwarz bekommen:

p { font-family: arial; font-size: 12px; color: #000000;}

Den selben Effekt erreichen wir mit weniger Angaben :

p { font: arial 12px; color:#000000;}

Beispiel 2
Eigenschaften für Hintergründe. Nehmen wir an, ein Hintergrundbild
im Seiteninhalt soll sich nicht wiederholen und fest fixiert sein :

#content { background-color: #000000; background-image: url(bildname.jpg); background-repeat: no-repeat; background-attachment: fixed;}

Den selben Effekt erreichen wir mit weniger Angaben:

#content { background: #000000 url(bildname.jpg) no-repeat fixed;}

Damit lassen sich CSS-Dateien um einige KB verkleinern ;)

CSS Code auslagern

wolle — Sat, 28 Apr 2012 08:43:06 +0000

CSS Code im Quellcode

Die CSS Formatierung wird im Quellcode zwischen und platziert. Ein Quellcode-Beispiel :

Titel der Seite

User die das HTML-Grundgerüst selbst schreiben, wird empfohlen, den CSS-Code NICHT (wie oben) im head auszuschreiben. Diese Vorgehensweise schadet dem Suchmaschinen-Ranking und kann (bei langen CSS-Codes) auch Ladezeiten erzeugen. Weiterer Nachteil : Wenn die Homepage 10 Seiten hast, müsste die Änderung auf 10 Seiten erfolgen.

Empfohlen wird das Auslagern der CSS-Datei :
Vorteil : Man muss nur 1 Datei ändern
und die Änderung wird für alle Dateien (Seiten) übernommen.

CSS-Datei auslagern :

- Inhalt zwischen ausschneiden.
- einen Editor öffnen, Ausschnitt einfügen
- speichern mit der Endung .css.

Diese .css – Datei hochladen auf Webspace. Die .css – Datei nun noch Verknüpfen,
im Quellcode zwischen und :

dateiname.css" rel="stylesheet" type="text/css">

Siehe auch unsere Beispiele für das HTML-Grundgerüst.

In fertigen Templates (Designs zum downloaden) ist die CSS-Datei in der
Regel im Quellcode ausgelagert :-)

CSS: Browser-Kompatibilität

wolle — Sat, 28 Apr 2012 08:53:32 +0000

Browser-Kompatibilität

Standard-Browser und CSS2-Eigenschaften :
css4you.de/browsercomp.html/standardbrowser

Standard-Browser und CSS3-Eigenschaften:
Viele tolle Effekte mit weniger Code können durch die neuen CSS3-Eigenschaften erreicht werden. Welche Browser CSS3 unterstützen, listet diese Seite auf :
webmasterpro.de/coding/article/css3.html

Die Seite az.io ermittelt deinen Browser und zeigt
Dir an, was Dein Browser aktuell darstellen kann : haz.io

PHP-Extras einbinden (Gästebuch / Kontaktformular u.s.w.)

wolle — Sat, 28 Apr 2012 08:57:39 +0000

PHP-Extras :

Gästebuch, Kontaktformular, Linkliste, Umfragen, Galerie u.s.w. sind in fertigen Templates
(Designs zum downloaden) nicht enthalten. Diese “Extras” müssen wir uns ebenfalls “downloaden”.

Schritt 1:
- die entsprechende Datei downloaden
- Du hast nun eine .zip Datei auf dem Rechner
- die Datei entpacken / entzippen
- Ordner öffnen + deren Inhalt auf webspace hochladen
- lese auch immer die Installations-Anleitung, die jeder Download enthält
- folge der Beschreibung in der Anleitung

Schritt 2:
- wir erstellen eine neue Seite für das Extra
- öffne z.B. Deine index.html mit dem Editor
- ändere im Quellcode zunächst den Titel der Seite.
- entferne den Seiteninhalt
- hier wird nun das Gästebuch, Kontaktformular oder anderes Extra eingebunden

Schritt 3: Das Extra einbinden
- wir haben 3 Möglichkeiten
- mit PHP-Script (include) einbinden (wird empfohlen)
- oder einbinden via “object-tag”
- oder einbinden via “iframe-tag” (nur Notlösung, nicht empfohlen)

Einbinden via PHP:
/ordnername/index.php"); ?>

Einbinden mit dem “object-tag”:
/ordnername/index.php" width="99%" height="600"> Ihr Browser kann das Objekt leider nicht anzeigen!

Einbinden mit “iframe-tag”:
600px; height:800px;" src="/ordnername/index.php frameborder="0" marginwidth="0" marginheight="0" scrolling="no">

Wie die korrekte Pfad-Angabe lautet, kannst du dem Ordner entnehmen, den Du hochgeladen hast. Öffne den Ordner und suche die index-datei vom Gästebuch. Schaue welchen Namen der Ordner trägt, in dem sich die index befindet.

Beispiel 1:
Die index-Datei hat die Endung .html und befindet sich im Ordner mit Namen “gbook”.
Der korrekte Pfad lautet dann /gbook/index.html

Beispiel 2:
Die index-Datei hat die Endung .php und befindet sich im Ordner mit Namen “gaestebuch”. Und diese befindet sich im Ordner mit Namen “gbook”. Der korrekte Pfad lautet dann /gbook/gaestebuch/index.php

Schritt 4: Seite speichern
- im Editor nun oben links auf “Datei”
- wähle aus: “Speichern unter”
- wenn Extra mit PHP eingebunden wurde, Speichern mit Endung .php
- zum Beispiel als “gaestebuch.php speichern

Wenn Du per “object-tag” oder “iframe-tag” eingebunden hast, kannst Du die
Seite mit der Endung speichern, die deine anderen Seiten auch haben.

Im Seitenquellcode auch die Verlinkung in der Navigation anpassen.
Entweder gaestebuch.php">Gästebuch
oder gaestebuch.html">Gästebuch

Bei Fragen (oder Probleme) einfach hier im Forum melden :-)

Testen, ob PHP auf Server funktioniert

Tom — Sat, 28 Apr 2012 09:02:39 +0000

PHP Funktion auf Server (Webspace) testen:

Um zu testen, ob auf deinem Server PHP zur Verfügung steht, lege eine Text-Datei mit dem Namen test.php an (z. B. mit dem Windows Editor oder einem anderen Texteditor – bitte nicht Word oder ähnliches verwenden) und schreibe in diese Datei:

phpinfo(); ?>

Diese Datei lädst du dann auf deinen Server hoch und rufst sie über die Adresszeile deines Browsers auf. Du solltest dann eine ziemlich lange Auflistung aller PHP-Konfigurationen angezeigt bekommen.

Java-Effekte (z.B. lightbox / thickbox / Slider) einfügen

Tom — Sat, 28 Apr 2012 09:06:33 +0000

Javascript im Quellcode einbinden
Einige Templates beinhalten bereits einen Java-Effekt.
Zum Beispiel einen “Slider-Effekt” (Bild- oder Textwechsel) auf der Startseite
oder einen “Lightbox-Effekt” (für Bildergalerie).

Wer ein Template (Design) ohne Effekte verwendet, wird bald auf der Suche
nach diversen Möglichkeiten sein . Hier zwei Javascript-Möglichkeiten :

Die Brainbox :
- Effekt für das Vergrößern von Bildern. Zur Demo
- Beschreibung und Download der Brainbox:

Videolightbox :
- Effekt für das Vergrößern von Videos. Zur Demo
- Beschreibung und Download der Videolightbox:

Wie binde ich Javascript-Effekte im Quellcode ein ?

Schritt 1
- gewünschte Script wie gewohnt downloaden
- Ordner (.zip) auf dem Rechner entpacken
- Ordner öffnen
- die Inhalte im Ordner hochladen auf Webspace
- z.B. den Ordner “css” und den Ordner “js”

Schritt 2
- mit dem Editor nun die Seite öffnen, welche den Effekt benötigt
- wir suchen die Kopfdaten zwischen und
- hier werden die Javascript-Dateien (.css und .js) mit eingebunden

Beispiel für Brainbox. Diese Zeilen vor dem mit einfügen
css/brainbox.css" type="text/css" media="screen" />