Struktur in unserer Webseite. // Der Weg zur eigenen Webseite! - Guide.
deutsch·@domii.net·
0.000 HBDStruktur in unserer Webseite. // Der Weg zur eigenen Webseite! - Guide.
<html>
<p><strong>Der typische Besucher: Durchschnittlich bleiben Besucher erstmal nicht länger als drei Sekunden auf unserer Seite. Wenn der Besucher danach nichts findet, dass ihm interessiert oder die Seite ganz einfach noch nicht geladen ist, dann wechselt er die Seite. Du glaubst, das gibt es nicht? Dann beobachte dich selbst: Ziemlich jeder verfällt in dieses Muster. Was können wir dagegen tun?</strong></p>
<p><a href="https://steemitimages.com/DQmXyrEX9ifsmwcvqY7fqMTtMwD6xwrvddhVMMXtqzKv9sc/titelbild.jpg"><img src="https://steemitimages.com/DQmXyrEX9ifsmwcvqY7fqMTtMwD6xwrvddhVMMXtqzKv9sc/titelbild.jpg"/></a></p>
<p>Heute geht es, wie die Überschrift schon sagt, um Struktur innerhalb unserer Webseite. Nicht nur unserer Startseite, sondern alles, alles was auf dem Server liegt. Dies ist vor allem wichtig, wenn wir große Projekte umsetzen möchten, da es schnell unaufgeräumt werden kann.</p>
<p><strong>Das Beste:</strong> Wenn wir eine übersichtliche Verzeichnisstruktur erstellen. Dies hilft uns, Inhalte nicht nur Seitenweise zu strukturieren, sondern auch die <i>globale Webseite</i>. </p>
<p>Aus unserer erarbeiteten Struktur <a href="https://steemit.com/deutsch/@domii.net/planung-and-zielgruppe-der-weg-zur-eigenen-webseite-guide">(auf dem vorherigen Beitrag)</a> erstellen wir die „Verzeichnisstruktur“. Dabei müssen wir auch bedenken, dass wir diese so gestalten sollen, dass jederzeit neue Inhalte dazukommen können. (Da wir unsere Seite ja nicht für immer gleich lassen und diese durchgehend optimieren/erweitern werden.)</p>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<p><a href="https://steemitimages.com/DQmRk3JAGpcsc3BLtt2rtkREuzCBVmcjepEkyxetRKQ49jG/platzhalterbild.jpg"><img src="https://steemitimages.com/DQmRk3JAGpcsc3BLtt2rtkREuzCBVmcjepEkyxetRKQ49jG/platzhalterbild.jpg"/></a></p>
<h2>Flache Verzeichnisstruktur.</h2>
<p>Jede Webseite liegt ja auf einem Webserver. Dieser hat für jede Domain ein „Stammverzeichnis“. Beispielsweise für „<a href="http://domii.net/">domii.net</a>". Sobald wir diese aufrufen gelangen wir auf die Datei „index.html“.</p>
<p>Wenn man also auf <em>domii.net/index.html</em> befindet man sich auf der Startseite. Danach kann man sich im Menü weiter navigieren zu den verschiedenen Themen. Natürlich gibt es für viele Themen weitere Unterpunkte. Diese Unterseiten können danach auf der URL <i>domii.net/Inhalt1/unterseite1/</i> erreicht werden. Oder aber auch <i>domii.net/inhalt2/seite1</i>.</p>
<p>Diese Art von Struktur hört sich schonmal sehr gut an. </p>
<hr>
<h4>Welche Schwachstellen hat dieses Verzeichnisstruktur?</h4>
<ul>
<li><p>Dafür stellen wir uns für, dass wir den <i>Inhalt2</i> beispielsweise dem <i>Inhalt6</i> aus irgendeinem Grund unterordnen müssen, da es dort vom Thema/Inhalt her besser passt.</p></li>
<li><p>Dafür legen wir bei Inhalt6 noch ein Unterverzeichnis an. Und so verschachteln wir unsere Themen immer weiter. Gehen wir davon aus, dass wir im Menü aber keine „Sub-Navigation“ haben, also keine Unterpunkte im Menü sehen.</p></li>
<li><p>Um also zu <i>Inhalt2</i> zu kommen, müssen wir erst auf <i>Inhalt6</i> gehen und haben dann die Möglichkeit zum Inhalt2 und dessen Unterpunkte zu gelangen. Dies kann schnell unübersichtlich werden, also ACHTUNG.</p></li>
</ul>
<p>Bei der Planung sollte man also beachten, dass wirklich ausreichend Platz für alle Menüpunkte vorhanden ist. Nachdem wir unsere Inhalte ausgearbeitet haben und wir wissen, welche Inhalte dort sein sollen, brauchen wir ein Verzeichnis, indem diese Seite aufscheinen.</p>
<p><br><b>Dabei sollten wir beachten, dass wir eine flache Verzeichnisstruktur haben. Es sollten alle Inhalte für den Besucher gut erkennbar sein. Wir haben ja nur ca. 3 Sekunden Zeit, um den Besucher diese zu zeigen. Sollte da etwas für ihn dabei sein, wird er sicherlich länger verbleiben.</b></p>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<h2>Unsere Struktur</h2>
<p>Um dir die Verzeichnisstruktur besser zu erklären, hab ich für unser „erste-Webseite“ mal eine Verzeichnisstruktur erstellt. <br>
Das Bild ist zwar nicht das allerschönste, ich hoffe aber trotzdem, dass es anschaulich ist. </p>
<p><a href="https://steemitimages.com/DQmZGvaVhr1syJ4K8CynV6ACtVPL2XizjiL2a4z4qPD7vDh/verzeichnisstruktur-unsere-erste-webseite.jpg"><img src="https://steemitimages.com/DQmZGvaVhr1syJ4K8CynV6ACtVPL2XizjiL2a4z4qPD7vDh/verzeichnisstruktur-unsere-erste-webseite.jpg"/></a></p>
<h4>Meine kurze Erklärung:</h4>
<p>Wir sehen links das Hauptverzeichnis auf dem Webserver. Da habe ich mal ein Schema der Ordner. Im Hauptverzeichnis haben wir folgende Ordner/Dateien: </p>
<table>
<tr>
<th></th>
<th>Bedeutung</th>
</tr>
<tr>
<td>index.html</td>
<td>Startseite unserer Webseite</td>
</tr>
<tr>
<td>src</td>
<td><b>src = source = Quelle.</b><br>Dies ist ein Ordner für unsere Dateien, wie Bilder/Grafiken, CSS-Dateien, Javaskript-Dateien (Was das ist kommt später)</td>
</tr>
<tr>
<td>Portfolio</td>
<td>Ein Ordner für unsere Inhalte. Beispielhaft eben für <b>Portfolio/Galerie</b>. Er muss aber nicht vorhanden sein.</td>
</tr>
<tr>
<td>Rechtliches</td>
<td>Ordner für <b>mpressum, Kontakt und eventuell AGB's</b>. Damit unser Impressum dann auf domii.net/rechtliches/kontakt.html zu finden ist.</td>
</tr>
<tr>
<td>Themen</td>
<td>Ordner für <b>weitere Inhalte</b>. Natürlich können wir alle Ordner anders nennen. Ein Beispiel für eine URL wäre dann: domii.net/themen/<i>steemit.html</i></td>
</tr>
</table>
<p>Natürlich können wir alle Ordner auch anders nennen. Damit wollte ich dir nur eine Richtung zeigen, wie ich meine "erste-Webseite" organisieren würde.</p>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<h2>Der src-Ordner</h2>
<table>
<tr>
<th></th>
<th>Bedeutung</th>
</tr>
<tr>
<td>img</td>
<td>Ablage für unsere <b>Bilder und Grafiken</b>. Hier können wir alle Bilder abspeichern. In unseren HTML-Seiten können wir diese dann jederzeit einbinden.</td>
</tr>
<tr>
<td>js</td>
<td>Ablage für unsere <b>JavaSkript-Dateien</b>. Natürlich haben wir bisher noch kein JavaSkript gebraucht, dies werden wir erst in späteren Beiträgen lernen. Trotzdem können wir uns schon einen Platz reservieren und den Ordner schonmal anlegen.</td>
</tr>
<tr>
<td>style</td>
<td>Ablage für unsere <b>CSS-Dateien</b>. Hier kommt unsere style.css-Datei hin. Wenn wir mehrere HTML-Dateien haben, können wir jedes Mal auf diese Datei verweisen.</td>
</tr>
</table>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<h4>Für viele Webdesigner ist die Verzeichnisstruktur nicht sehr wichtig. Ich jedoch halte sehr viel davon. Wenn man sich erstmal eine zurechtlegt hat man es später viel einfacher. Die Seite ist dadurch später viel leichter erweiterbar und für Fremde (oder für den "Autor" selbst) sehr leichter nachvollziehbar.</h4>
<p><img src="https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg" /></p>
<h2>Mehr Wissen!</h2>
<p>Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas Interessantes für dich dabei:</p>
<ul>
<li><a href="https://steemit.com/deutsch/@domii.net/planung-and-zielgruppe-der-weg-zur-eigenen-webseite-guide">Planung und Zielgruppe.</a> - Internet-Basics #12</li>
<li><a href="https://steemit.com/deutsch/@domii.net/farben-was-muss-man-dabei-beachten-der-weg-zur-eigenen-webseite-guide">Farben: Was muss man dabei beachten?</a> - Internet-Basics #11</li>
<li><a href="https://steemit.com/deutsch/@domii.net/html-and-css-bilder-der-weg-zur-eigenen-webseite-guide">HTML&CSS: Bilder</a> - Internet-Basics #10</li>
<li><a href="https://steemit.com/deutsch/@domii.net/html5-elemente-header-nav-footer-uvm-der-weg-zur-eigenen-webseite-guide-3">HTML5-Elemente: header, nav, footer uvm. ...</a> - Internet-Basics #9</li>
<li><a href="https://steemit.com/deutsch/@domii.net/html-div-und-span-elemente-der-weg-zur-eigenen-webseite-guide-3">HTML: DIV und SPAN-Elemente</a> - Internet-Basics #8</li>
</ul>
<p><br></p>
<p><img src="https://steemitimages.com/DQmeCckejeGavvf2XqS6AHAfhmRmPVuaEivscesyxHQiEgo/signatur.jpg" width="1600" height="795"/></p>
<sup><i>Meine Schlussworte:</i> Wie immer würde ich mich riesig über<b> Feedback in einem Kommentar</b> freuen.<br>Ich hoffe natürlich, dass dir mein Beitrag gefallen hat. Leider habe ich letztens eine Rückmeldung bekommen, dass ich mehr Praxis vom "Webdesign" machen soll. Keine Sorge, es wird sehr bald wieder mehr davon geben. Ich wollte heute einfach zeigen, wie wichtig die Verzeichnisstruktur ist.</sup><p><b>DANKE!</b>
</html>👍 domii.net, razu788, sakibarifin, whitewarlike, romz410, dr-boo, johnny-appleseed, wanderingartist, wylde, sergey44, perfectsense, dakster, ryacha21, mackcom, spirits4you, azzurra92, chaka321, ivrmakers, ambmicheal, vj1309, elmadriles, synace, olegnator, dshelton32, themanualbot, gurmax, bibekstha75, smartmarket, santana33, waphilip, ilyastarar, korsah, chris1993, tbaumer2, umer01, natusya, galoisconnection, megamindz79, drookyn, zihad16, inlakech, niduroki, alejandromata, zulama28, yahoobot, darryljonesjr, eldontang, ppktech, levieuxours, lekosvapenglass, gutenmorgen, samir1993, tofe, limelightmg, aemgomez, dillagr, deniran, darksideofmoon, skylarhkim, ottto, arryan338, tdogvoid, pierre-anna28, ahuff412, gabrielawrites, jaredlang, lexorka, moshitunes, molinacarlos, steemlibs, geekscience, kennybeans, itzackt, fishbones78, canadianbacon, africandruid, hayleyuk, tonmoyks, m3morito, upvoting-bot, antonioscore, ehondorhumble, stirpe, abuhuraira, kuroiwa, btcsam, dagmardeeke, clasesgnosis, helal120, tapur-tupur, yusrimahenra, tolo, smartforex, alfredscot, valzen, maxil, kurdsteem, miguelsanchezz, public.library, woogle, enero, maniactiller, thachthao, atalfx, va2099, geld-verdienen, ladyh, b-a-r-b-a-r-a, fangcan888, chiaraluzia,