Website Workshop

Es gibt 21 Antworten in diesem Thema, welches 3.911 mal aufgerufen wurde. Der letzte Beitrag (20. Mai 2011 um 21:14) ist von OrangeGoblin.

    Für alle die sich eine Website erstellen oder überarbeiten möchten, habe ich hier einen Website Workshop aufgebaut.

    Er besteht aus insgesamt sechs Teilen. Es fängt ganz einfach mit einer Bleistiftskizze an und erklärt die grafische Umsetzung. Weiter geht es mit der Erstellung eines Grundgerüstes in xhtml. Beschreibt anschließend wie man der Seite per CSS (Cascading Style Sheets) Form und Farbe gibt.

    Zum Schluß bauen wir dann noch eine Photogalerie ein, die mit einer Slideshow und Betitelung versehen ist. Genau das richtige für alle GFX'ler, Designer und 3D-Künstler um die eigenen Bilder auch angemessen zu präsentieren.

    Den Workshop kann man auch als Tutorial verstehen und stellt eine Art fertiges Template zur Verfügung. Zum Nachbau gibt es am Schluß alle Workshop Dateteien zum Download. Viel Erfolg und Spaß wünsche ich Euch! :)

    << Live Demo >>

    Bei Fragen zu diesem Workshop beantworte ich dieser gerne hier.

    Gruß littleMonster

    3 Mal editiert, zuletzt von littleMonster (12. Mai 2011 um 06:50)

    Hi, hab grad Dein Tut angesehen und festgestellt, dass von Seite 5 der "Weiterlink" wieder auf Seite 1 verweist, anstelle auf Seite 6.

    VG,
    Ridpath

    Nil dificile volenti.
    (Nichts ist zu schwer für den, der will.)

    :thumbup: - Davon kann ich mit Sicherheit einiges gebrauchen für meine "in die Jahre" gekommene Seite - Vielen Dank!
    (bleibt blos noch die Frage, wo finde ich die Zeit dafür ?( )

    Sehr informativer Workshop. Macht Lust selbst was zu basteln.
    Vielleicht solltest du noch deine bevorzugten Programme ansprechen(HTML-Editor, FTP etc) damit komplette Anfänger auch dort einenAnsatzpunkt haben.
    Aber ansonsten sehr saubere Arbeit. :)

    Wie schon einst König Dezmond sagte als er , nach dessen Benutzung , in seinen Nachttopf blickte : "Das rationale Bewusstsein kann DAS niemals wirklich fassen ."

    Hi Patrick,

    Die Frage des Editors ist immer Geschmackssache. Persönlich nutze ich unter Windows die bordeigene Minimalausrüstung Notepad. Unter Linux (Ubuntu) gedit.
    Aber für den Anfang möchte ich ausdrücklich (von den meist kostenpflichtigen) WYSIWYG Editoren abraten. 1. lernt man damit nichts und ist in der gestalterischen Ausführung beschränkt und 2. produzieren diese einen grauenhaften, fehlerhaften, unübersichtlichen und aufgeblähten Code, der zudem die Ladezeit der Seite erhöht.

    Wie wäre es mit UltraEdit oder Notepad++. Da gibt es eine Menge, einfach ausprobieren welcher am besten gefällt.

    Als FTP-Client (zum hochladen auf den Webspace meines Providers) benutze ich Filezilla ...

    Hm :nachdenklich: , ich glaube du meintest ich sollte das in meinem Workshop noch schreiben. Naja jetzt stehts eben hier. :)

    Gruß littleMonster

    Ich nutze zB. PSPad als Editor. Früher hatte ich FirstPage verwendet. Die alte Version enthält aber nen Trojaner und die neuere Version nervt ständig mit einem PopUp.

    Von WYSIWYG Editoren rate ich ebenso wie littleMonster ab, da hier oft die Kontrolle über den geschriebenen Code fehlt und der erzeugte Code mit sehr viel Ballast aufgebläht wird.

    VG
    LeFender

    also ich finde dreamweaver am besten, auch dial wenn man dann die bilder mit photoshop macht und mit fireworks zuschneidet ^^

    PS: bei mir geht der link nicht

    <-- alter neugierieger css,php,mysql und html hase

    Nach ein wenig einarbeitungszeit muss ich sagen dass es ganz schön aufwendig ist eine Seite selbst zu schreiben. Das klappt alles mehr schlecht als recht. Vor allem die Positionierung von Elementen innerhalb der Container macht mir Schwierigkeiten. Den , im Workshop angesprochenen, Cu3er einzufügen ist auch ne Sache für sich. Auch die Validation-Seiten machen zicken. Sie zeigen unvollständige Tags an obwohl diese vorhanden sind.
    Aber, es macht einen Haufen Spass. Und man bekommt jede Menge Ideen während des Schreibens. Ist auf jeden Fall auch flexibler als mit einem Baukasten. Außerdem bekommt man so erstmal mit warum man eigentlich Firefox nutzt. :D
    Vielleicht haben die Cracks unter euch mal Lust drüber zu sehen und etwas Kritik zu hinterlassen. Hier lang bitte.

    Wie schon einst König Dezmond sagte als er , nach dessen Benutzung , in seinen Nachttopf blickte : "Das rationale Bewusstsein kann DAS niemals wirklich fassen ."

    Hallo Patrick,

    würde ja gerne drüber schauen, aber der Link von Dir geht nicht!

    Positionierung von Elementen in einem Container kannst Du per margin und padding vornehmen. Ich habe meinem Post noch eine PDF angehangen. Darin habe ich beschrieben, wie man Absätze, Überschriften, Bilder ausrichtet. Hoffe es hilft weiter!

    Der Validator prüft das HTML Dokument anhand des Doctypes. Da gibt es Unterschiede zwischen HTML 4 und XHTML (CSS 2, CSS 2.1) Dokumenten.
    Das ganze Doctype Theater ist jetzt vereinfacht worden, kannst schon ruhig den neuen HTML 5 doctype

    HTML
    <!DOCTYPE html>
<html>
<head>
...
...
...


    schreiben, was den Browser auch in den standardkonformen Modus setzt.

    Häufige Fehlermeldungen im Validator beruhen auf der Tatsache das man alte html 4 Tags benutzt hat. So möchte xhtml, html 5 beim IMG Tag den alt="" Wert haben.
    Häufig wird auch ein Blank mit Backslash als Beendigung bei manchen Tags vergessen. Beispiele was man bei xhtml ergänzen sollte (rot markiert.

    <br />
    <img src="beispielbild.jpg" alt="Beschreibung des Bildes" />

    Aber gebe mir einfach den Link, dann jage ich die Seite über den Validator und schaue wie wir das gefixt kriegen.

    Hab ganz vergessen bescheit zu geben das sauf oben gepostetem Link nichts mehr liegt.
    Habe alles nochmal überarbeitet und ein paar Buttons gebastelt.Derzeitiges Problem ist der Hintergrund . Er will enfach keine Farbe annehmen. Die Ausrichtng der Buttons bereitet auch Probleme. Das wird sich aber ändern nachdem ich dein PDF gelesen habe. :)
    Danke dafür.
    Aktuell sieht die Seite so aus. http://orangegoblin.bplaced.net/index.html

    Wie schon einst König Dezmond sagte als er , nach dessen Benutzung , in seinen Nachttopf blickte : "Das rationale Bewusstsein kann DAS niemals wirklich fassen ."

    Hi Patrick,

    rücken wir ert mal den Validator Fehlern zu Leibe.
    Im Head Bereich lauern einige Tücken, der xhtml Doc-Type ist unvollständig, die Stylesheet Angabe an der falschen Stelle (muss innerhalb des head Bereiches sitzen) und die Meta Tags noch mit einem /> abschließen. Blau & durchgestrichen bitte entfernen, rot bitte ergänzen!

    Hier die Korrektur:

    Die Farbangaben im body Text hat dir wahrscheinlich Phase 5 reingesetzt. Das sind aber alte HTML 4 Angaben. Die Linkfarben kannst du später in der style.css definieren.
    Zumal sich hier eine Tücke verbirgt. Zuerst lädt der Browser die style.css. Dort steht background: none, somit durchsichtig. Wahrscheinlich macht der Browser hier eh ein Fallback und nimmt den Standard weiß. Mit bgcolor="#FFFFFF" überschreibst du, das dann aber wieder mit weiß. Ich gehe davon aus, dass du orange haben möchtest. Schreibe dann doch in der style.css bei body gleich background: #f56200;

    Nun zu den img Tags, wie erwähnt noch den Backslash /> ergänzen, denke aber an das Leerzeichen vor den Slash, gilt auch für die Meta Tags oben.

    Die border="0" Anweisung könntest du auch raus schmeißen. Schreibe dazu in der style.css einfach folgendes
    img {
    border: none;
    }

    Oh, was ist dass?

    Zitat

    <p>Willkommen auf meiner kleinen Homepage. Hier findet ihr Galerien zu den Themen Fotografie und CGI.<br clear="all"/>
    Au&szlig;erdem gibt es Tutorials und einen News-Bereich. Des Weiteren wird es irgendwann Musik geben. Das dauert aber noch.</p>


    Das clear="all" wird der Browser nicht beachten, weil er damit nichts anfangen kann.
    Richtig wäre es so: <br style="clear: all" /> Wobei man das auch in die style.css auslagern kann.
    Aber du hast hier kein Element gefloatet, so daß du es auch nicht clearen musst. Zeilenumbruch einfach mit <br />

    Es ist grundsätzlich deine Seite, möchte aber ein paar designtechnische Aspekte anmerken.
    Die Schriftart Comic Sans MS ist unter Designern verpönt. Man benutzt das wenn überhaupt nur für Kinderseiten.
    Die Buttons wären mir auch etwas zu mächtig und der Text ist auch in die Grafik eingebunden. Da hast du immer einen Aufwand, wenn du die Menütext mal ändern willst.

    Gruß littleMonster

    Kleine Anmerkung von mir:

    meta (description) -> die Seitenbeschreibung sollte optimal mindestens 135, maximal 160 Zeichen haben (Leerstellen inklusive)
    meta (keywords) -> findet bei den Suchmaschinen keine Beachtung mehr und ist damit veraltet, da einige Portale Diese dennoch als Tags auslesen, kannst Du Dich hier an den alten Standard halten und hier maximal 10 Begriffe stehen haben.

    Für beide Meta-Angaben gilt, sie sollten in jeder Seite angepasst definiert werden, also je nach Rubrik und Thema der Unterseite in Deiner Struktur eine entsprechende Seitenbeschreibung formulieren.

    Desweiteren gilt was littleMonster schon beschreibt, die Menüführung sollte textbasiert sein und keine grafischen Button enthalten, da hier die Suchmaschinen gern hängen bleiben. Umgehen kannst Du es, wenn Du im Fuß der Seite Dein Menü noch einmal textbasiert definierst.

    Wenn es interessiert, stelle ich einmal ein paar Hinweise für Suchmaschinenoptimierung zusammen (onpage-Optimierung).

    VG
    LeFender

    Hallo Leute. Danke für eure Antworten.
    Werde gleich mal versuchen das umszusetzen. Das Problem daran ist: Ich hab hier nur einen IE7.0 mit Servicepack 2 zur Verfügung. Zu hause arbeite ich mit dem Firefox 4.0. Es ist ein Unterschied wie Tag und Nacht was die Darstellung betrifft.

    zu den Buttons: Die Beschriftung in Photoshop schon aufzubringen ist auf den ersten Blick bequem muss ich sagen. Keine Schreibarbeit und freie Fontauswahl. Auf den zweiten Blick ist es aber wohl doch besser ich mache es per Script. Angedacht war halt eine zum Header passende Optik. Da habe ich auch ComicSans genutzt da ich keine Font gefunden habe der zu dem Orange-Logo passt. Mit den Buttons an sich hab ich aber auch noch ein anders Problem. Erstens sind sie schon recht wuchtig wied du sagst littleMonster(auf der Seite sind sie sogar schon 25% runterskaliert). Und zweitens passt die Hintergrundfarbe der Buttons nicht zu der Farbe der Homepage obwohl es der gleiche Code ist (F56200). Vieleicht mach ich die nochmal neu.

    Ansonsten: Phase5 scheint nicht so der Hammer zu sein. Es schreibt schon merkwürdige Sachen zusammen. Vielleicht sollte ich doch Notepad++ mal antesten. Naja hier hab ich eh nur den Editor von Windows :)
    LeFender Ich würde gern etwas über die SEO hören.Nur raus damit :)

    Wie schon einst König Dezmond sagte als er , nach dessen Benutzung , in seinen Nachttopf blickte : "Das rationale Bewusstsein kann DAS niemals wirklich fassen ."

    @Orange...
    Ok, ich mach ein neues Thema auf und editiere hier nachträglich einen Verweis hinein. Dauert aber etwas, denn heute komme ich definitiv nicht mehr dazu.

    VG
    LeFender

    Danke LeFender.
    Es eilt auch nicht. Kannst dir ruhig Zeit lassen.

    Wie schon einst König Dezmond sagte als er , nach dessen Benutzung , in seinen Nachttopf blickte : "Das rationale Bewusstsein kann DAS niemals wirklich fassen ."

    Ich wunder mich immer wieder wie ihr die Codes so locker aus dem Ärmel schütteln könnt. :)
    Habe alles nochmal umgeschrieben und Buttons mit generiertem Text im Vordergrund eingebaut. Nur gibt es da anscheinend wieder neue Probleme. In der Blcok-Darstellung kann ich so lange mitPadding und Margin sowie width und Height herumspielen bis es in etwa passt. Wobei letztere abstrakte Werte in relation zur eigentlichen Größe der Buttons annehemen.
    Inline allerdings wollen die Buttons garnicht ganz dargestellt werden. Es fehlt immer ein Teil davon. Auch eine explizite Höhe für den Menue -Container auszuweisen bringt nichts ausser dass sich die gesamte Seite verzerrt. Ich werde die Buttons eh nochmal neu zeichnen da sie doch arg groß geraten sind.
    Hier mal die Index.html und die style.css. An der css kann man sicher noch einiges entschlacken.

    HTML
    <!DOCTYPE html><html><head><title>Orange Goblin&acute;s Portfolio und mehr</title><meta name="description" content="Orange Goblin&acute;s Seite mit Tutorials im bereich CGI, Bildergalerien und so weiter" /><meta name="keywords" content="Cinem4D, C4D, Foto, Galerie, Tutorial" /><meta name="author" content="Patrick" /><meta name="editor" content="html-editor phase 5" /><link rel="stylesheet" href="style.css" type="text/css" /></head><body><div id="toprow"><div id="header"><img src="header3.jpg" alt="Amp" title="AMP" /></div></div><div id="menue"><p>   <a href="#">Home</a>   <a href="#">News</a>   <a href="#">Galerie</a>   <a href="#">Tutorial</a>   <a href="#">Links</a>   <a href="#">Impressum</a>  </p><div id="middlerow"><div id="content"><p>Willkommen auf meiner kleinen Homepage. Hier findet ihr Galerien zu den Themen Fotografie und CGI.<br clear="all"/>Au&szlig;erdem gibt es Tutorials und einen News-Bereich. Des Weiteren wird es irgendwann Musik geben. Das dauert aber noch.</p></div></div></div><div id="bottomrow"><p>Online seit 12.05.2011|letztes Update 16.05.2011|&copy; PatDra 2011</p></div></body></html>


    Wie schon einst König Dezmond sagte als er , nach dessen Benutzung , in seinen Nachttopf blickte : "Das rationale Bewusstsein kann DAS niemals wirklich fassen ."

    Zitat

    Ich wunder mich immer wieder wie ihr die Codes so locker aus dem Ärmel schütteln könnt.

    Hey Patrick,
    ich habe doch noch überhaupt nicht geschüttelt! Nur kurz mit dem kleinen Finger gezuckt ... :D

    Aber schauen wir was kommt wenn ich jetzt schüttel, schüttel ...
    Ich war so frei da paar klitze kleine Änderungen an deinem Code vorzunehmen. Durch den Validator gejagt und et voila 100% valide. Ich bin auf den xhtml doc-type zurück gegangen. Mag sein das der IE 7 den html 5 doc-type noch nicht mag und evtl. in den alten quirks modus umschaltet.

    Die Seite habe ich unter
    - Win XP, IE 8
    - Win7, IE 9
    - Win7, Firefox 4
    - Ubuntu, Firefox 4
    getestet und wird bei mir überall gleich angezeigt.

    So sieht es bei mir aus (Screenshot):

    orange_t.jpg

    Du findest das totale Kacke, na dann musst du weiter hart dran arbeiten.
    Es gefällt dir, dann bediene dich einfach (siehe Dateianhang)

    In der Zip ist ein Unterverzeichnis /images wo die Grafiken drin sind, das bitte auch so bei dir übernehmen, anlegen, da die Querverweise auf dieses Verzeichnis auch in der style.css drin steht (bei den background Tags). Falls es dir gefällt würde ich mich über einen Partnerlink auf meine Seite youmonster.de freuen.

    Viel Spaß

    Wow
    ziemelich beeindruckend. Da liegt ja noch einiges an Arbeit vor mir. Werd das erstmal so übernehmen und die Seite erweitern.
    Danke fürs "unter die Amre greifen". :)

    Wie schon einst König Dezmond sagte als er , nach dessen Benutzung , in seinen Nachttopf blickte : "Das rationale Bewusstsein kann DAS niemals wirklich fassen ."