Lektion 3 - Vorbereitung: Web Ordnerstruktur

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von Admin » Di 19. Aug 2014, 11:23

Web - Ordnerstruktur

Jedes Web wird in einer Struktur angelegt. Je nachdem, wie umfangreich es werden soll, ist es auch notwendig sich eine Struktur zu überlegen, in der die komplette Webseite angelegt werden soll. Es erleichtert die Arbeit ungemein, wenn man weiß, welche Datei wo abgelegt ist und wo man dazu die Grafiken, Download ... findet.

[col]Bevor wir also mit HTML-Dateien loslegen, legen wir erst einmal einen Verzeichnisbaum an.
  • Öffne die Eigenen Dateien und lege einen Ordner "Web" an.
    In diesem Ordner erstellst du deine Homepage.
  • Öffne den Ordner "Web" und lege einen Ordner "images" an.
    Dieser Ordner ist für die Grafiken gedacht, die du für dein Layout verwendest.
  • Lege einen Ordner "grafiken" an.
    Dieser Ordner ist für alle Grafiken gedacht, die du auf deiner Webseite veröffentlichst.
  • Lege einen Ordner "download" an.
    In diesem Ordner wirst du alle Dateien einfügen, die du zum Download anbietest.
|In deinem Web-Ordner sollte es nun so aussehen:

#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[anmerk]Bild|Achtung!
Schreibe alle Ordner- und Dateinamen in Kleinbuchstaben.
Schreibe alle Datei- und Ordnernamen ohne Umlaute ä,ö,ü,ß.
Verwende keine Satzzeichen im Datei-/Ordnernamen wie Komma, Punkt ...
Verwende keine Leerschritte im Datei-/Ordnernamen. Ersetze sie durch Minus "-" oder Unterstrich "_"
z.B. Statt "das bin ich.gif" nenne die Datei "das_bin_ich.gif"
[/anmerk]


Seitenverwaltung anlegen

[col]Damit du nun auch Zugriff auf deinen Web-Ordner im KompoZer hast, richtest du ihn in der Seitenverwaltung ein:
Öffne KompoZer, klicke in der Seitenverwaltung auf die beiden kleinen Monitore:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
Es öffnen sich die Publizierungseinstellungen. Nein, wir werden nicht über KompoZer die Seite publizieren, dafür hast du bereits ein FTP-Programm eingerichtet. Für die Seitenverwaltung richtest du nun deinen Web-Ordner lokal ein:[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion3-3.png[/popup]
[col]
  1. Im Lokalverzeichnis Seiten-Name wird der Seitenname des Webs eingetragen. Das ist der Ordnername, in unserem Fall heißt er "Web".
  2. Server Verzeichnis ist der Pfad zu deinem "Web"-Ordner auf der Festplatte.
  3. In diesem Bereich werden alle Webs angezeigt, die du in der Seitenverwaltung einstellst.
  4. Über Neue Seite richtest du die neue Seite ein. Klicke auf diesen Button. KompoZer öffnet ein Fenster, über das du dein Web heraussuchen kannst.
    Bestätige den Dateimanager mit OK.
  5. Mit der Option Als Standard festlegen kannst du ein Standard-Web auswählen, wenn du mehrere Webs in der Seitenverwaltung verwaltest.
  6. Über den Button "Seite entfernen" entfernst du ein Web aus der Seitenverwaltung.
|KompoZer füllt automatisch alle Bereiche im Publizierungsassistenten aus:
#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Bestätige die Publizierungseinstellungen mit OK.

In der Seitenverwaltung wird dein Web angezeigt. Das kleine Plus + vor Web zeigt an, dass sich weitere Ordner in deinem Web-Ordner befinden. Klickst du darauf, werden sie sichtbar:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Die erste Seite anlegen "Vorlage"

[col]Bevor du nun die erste Seite anlegst, musst du KompoZer noch einige Informationen geben, die er in den "head" - in den "META"-Daten einfügt, sodass ein Browser die Seite richtig lesen kann.

Öffne auf Linux über Menü Bearbeiten - Einstellungen und auf Windows Menü Extras - Einstellungen den Einstellungsassistenten:

Als Autor kannst du dich eintragen. Diese Information wird später von sogenannten Meta-Suchmaschinen ausgelesen. Dann gibt es noch Ländereinstellungen. Zuerst solltest du die Sprache einstellen.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]



Spracheinstellung

[col]Die Spracheinstellung gibt Auskunft darüber, für welchen Sprachraum eine Meta-Suchmaschine deine Seite indizieren soll. Also für welchen Sprachraum die Inhalte auf deiner Seite vorrangig vorgesehen sind.

Wählst du Deutsch [de], bezieht sich auf den gesamtdeutschen Sprachraum. [de-de] bezieht sich auf Deutschland, [de-li] auf deutschsprachig in Liechtenstein ... . Wähle hier [de], um den gesamten deutschen Sprachraum einzubeziehen.
Die Schreibrichtung musst du nur einstellen, wenn du deine Seite auf Arabisch oder einer anderen Sprache schreibst, die nicht wie bei lateinischen Schriftzeichen von links nach rechts geschrieben werden. Lasse dieses Feld unberührt.

Der Zeichensatz zeigt einem Browser an, welche Zeichen auf der Webseite verwendet werden. Im deutschsprachigen Raum verwenden wir Umlaute. Im französischen Sprachraum werden Akzente verwendet. Auch in Skandinavien werden Schriftzeichen verwendet, die sich von denen anderer Sprachregionen unterscheiden.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


Der Zeichensatz

Mit dem Zeichensatz liest ein Browser, wie er diese Zeichen darstellen soll. Im deutschsprachigen Raum wurde vorwiegend der Zeichensatz ISO 8859-1 verwendet. Mit diesem Zeichensatz muss im Quelltext ein Sonderzeichen oder Umlaut maskiert werden. So wird ein ä mit ä dargestellt.

Beim Zeichensatz UTF8 werden die Zeichen nicht maskiert und können vom Browser korrekt angezeigt werden. Deshalb nutzen auch wir hier im Kurs den Zeichensatz UTF8. Sollte der Zeichensatz bei dir noch auf einem ISO-Wert eingestellt sein, dann ändere ihn bitte.

[anmerk]Bild|Achtung!
Diese Einstellung muss vor dem Speichern der Seite vorgenommen werden, da eine nachträgliche Änderung nur noch über den Quelltext möglich ist.
[/anmerk]

Der Doctype
[col]Kontrolliere noch den voreingestellten Doctype, wechsele in deinem Assistenten in das Register Erweitert.

Der Doctype ist eine Darstellungsanweisung für Browser. Es gibt viele verschiedene Doctypes, welchen man verwendet, hängt immer von den Inhalten der Webseite ab. Willst du z.B. mit Inlineframes arbeiten, um externe Inhalte in deine Seite einzubinden, musst du den Doctype für Framesets verwenden. Wir werden zu einem späteren Zeitpunkt mit Inlineframes arbeiten. Als Standard für deine Seite sollte hier als HTML-Sprache HTML 4 und als Doctype (DTD) Strict eingestellt werden. Weitere Infos zu Doctypes findest du hier -->
Weiter Infos zu Doctypes|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Titel der Seite

[col]Hast du alle Einstellungen gemacht, dann speichere deine Seite: Menü Datei - Speichern unter

Es öffnet sich ein kleiner Assistent, in den du den Titel deiner Seite einträgst. Wir werden als Erstes eine Vorlage erstellen.

Schreibe in den Assistenten als Seitentitel "Vorlage".|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Bestätige den Assistenten mit OK.
Im nächsten Schritt gibst du der Seite den Namen vorlage.html (achte auf Kleinschreibung) und wähle den Web-Ordner als Speicherort.

Klicke in der Seitenverwaltung auf das Symbol mit den zwei verschlungenen Pfeilen um die Ansicht in der Seitenverwaltung zu aktualisieren. Sodass die vorlage.html in deiner Seitenverwaltung angezeigt wird:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
Wechselst du in die Quelltext-Ansicht, kannst du alle Einstellungen, die du gemacht hast im Quelltext wiederfinden:[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion3-8.png[/popup]
Übung

Lade deine Struktur auf deinen Server hoch.

Hat alles geklappt? Dann geht es gleich weiter mit Lektion 4

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von eibauoma » Di 2. Sep 2014, 17:53

Eigentlich war ich der Ansicht, dass ich auf meinem PC als Admin angemeldet bin.

Habe mir für diese Übungshomepaga bei bplaced.net ein neue Webseite anlegen lassen http://gimpfreak.bplaced.net/
und möchte aus reiner Neugier das vom Anbieter vorgegebene Heimverzeichnis verwenden.
/users/gimpfreak/www/

Beim Versuch, meine Vorlage in diesem Pfad zu speichern, werde ich auf eingeschränkte Rechte hingewiesen mit den Vorschlag, im Ordner eigene Dokumente zu speichern oder mich an den Admin zu wenden.

Wisst Ihr eine Lösung für dieses Problem, ohne den Dateipfad zu ändern?
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von eibauoma » Di 2. Sep 2014, 19:31

Mit "freigeben für ..." hat es nun scheinbar geklappt.
#
Klicke auf das Bild für die Darstellung in Originalgröße
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

camouflage1984
Beiträge: 250
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von camouflage1984 » Di 2. Sep 2014, 22:07

Hallo eibauoma
eibauoma hat geschrieben:und möchte aus reiner Neugier das vom Anbieter vorgegebene Heimverzeichnis verwenden.
/users/gimpfreak/www/
das ist schon in deinem FTP Zugang so eingestellt, da musst du nichts einstellen. Deine Adresse ist http://gimpfreak.bplaced.net/ und dort ist dein Heimverzeichnis www!
Aktuell sieht dein webspace so aus
eibauoma.jpg
eibauoma.jpg (67.55 KiB) 1030 mal betrachtet
es ist nix vorhanden.

Bitte nutze nur deine Adresse http://gimpfreak.bplaced.net/ um die Dateien hoch zu laden.

Gruß
Camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von eibauoma » Di 2. Sep 2014, 22:42

Hallo camouflage1984,
weil außer der Vorlage noch gar nichts fertig ist, bin ich auch nicht auf die Idee verfallen, das schon auf die künftige Webseite hochzuladen, denn de Überschrift heißt Vorbereitung Web Ordnerstuktur. :roll:
Hoffentlich ist das jetzt richtig geworden :oops:

Gruß
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

camouflage1984
Beiträge: 250
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von camouflage1984 » Di 2. Sep 2014, 23:47

Hallo eibauoma

Du hast alles richtig gemacht, ich war zu schnell.
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von eibauoma » Di 2. Sep 2014, 23:50

da bin ich aber jetzt beruhigt :lol:
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

Benutzeravatar
blaubaer
Beiträge: 11
Registriert: So 6. Dez 2015, 10:08
Wohnort: Regensburg
Kontaktdaten:

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von blaubaer » Di 15. Dez 2015, 07:31

Hallo Dimi,

ich habe die Lektion 3 erledigt und gehe dann zu Lektion 4!

Grüße,
Michael

camouflage1984
Beiträge: 250
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von camouflage1984 » Di 15. Dez 2015, 12:34

Hallo Michael

Alles klar
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 3 - Vorbereitung: Web Ordnerstruktur

Beitrag von Moendel » Sa 2. Jan 2016, 16:06

Lektion 3 fertig:

#
Klicke auf das Bild für die Darstellung in Originalgröße

Antworten