Welches CSS-Tools (Rahmen, Gitter-System, IDE, ..) brauche ich für Web-Design zu beginnen?

StackOverflow https://stackoverflow.com/questions/1612398

  •  06-07-2019
  •  | 
  •  

Frage

Ich bin der Aufbau eine neue Website auf Basis von Grails-Technologie.

In Bezug auf die grafische Gestaltung meiner Website, ich plane Dienstleistungen von einem professionellen Web-Designern zu verwenden, aber in der Zwischenzeit, ich brauche einige Grundlagen zu tun graphical selbst entwerfen, um eine „benutzerfreundliche“ Beta-Version zu haben.

Ich habe durch die stackoverflow.com Seite gelesen, aber kann mich nicht entschließen. Hier ist, was ich herausgefunden haben: wie-do-you-choose-a-CSS-Framework what-is-the-best-css-Grid-Framework can-jemand-empfehlen-a-Glocken-und-whistles- CSS-Framework what-is-the-best- CSS-Rahmen-und-sind-sie-wert-the-Aufwand

Aber leider gibt es viele widersprüchliche Antworten. Erstens, einige sagen, dass CSS-Framework ist rückwärts-Authoring und nicht eine gute Sache. Andere Beratung YUI Grids, Blueprint, 960 gs, YAML ... Und viele sagen, dass Compass ermöglicht CSS-Layouts einfach und wiederverwendbar zu entwickeln.

Berücksichtigung Damit:

  • Ich bin neu in der CSS-Welt und ich beabsichtige nicht, ein Web-Designer
    • sein
  • sollte mein Layout benutzerfreundlich sein (aber nicht notwendig, fantastisch L & F)
  • Es sollte maintanable und leicht verbesserungsfähig sein (durch einen professionnal Web-Designer)
  • Easy (um schnell etwas zu haben) zu implementieren

Was tun Sie mich beraten, um mit dem Web-Design von meiner Seite der ersten Schritte?

Vielen Dank für Ihre Ratschläge.

Fabien

War es hilfreich?

Lösung

Erstens, wenn Sie nicht beabsichtigen, einen Web-Designer zu sein, würde ich vorschlagen, Ihre CSS-Outsourcing. Es gibt mehrere Websites, auf denen Sie href="http://www.rapidxhtml.com/order.html" rel="nofollow noreferrer"> Versorgung HTML oder eine Photoshop-Design gut codiert up unter einem großen (1k). Oder get HTML / CSS-Designs frei .

Dann ist es eine Sache, die Sie wissen müssen und zwei weitere Sie müssen heraus:

  1. alle HTML sollten in einer semantischen und gültigen Weise geschrieben werden: semantic = richtig geordnete Überschriften, Listen, keine übermäßige divs etc .; gültig = wird WC3 Validierung Tests bestehen. Nichts davon ist Hexenwerk, aber es ist immer noch eine Fähigkeit, die gelernt werden muss. Andy Clarke Transcending CSS ist ein großes Buch auf semantische HTML / CSS. Zur Erleichterung der Wartung sollten die HTML und CSS ordentlich sein und konsequent eingerückt, etc.

  2. Sie müssen entscheiden, ob Sie für die Verwaltung von Inhalten einen Admin-Backend und Datenbank werden benötigen, oder wenn Sie nur den Aufbau eine Website, bestehend aus statischen Seiten (zB HTML und CSS-Dateien, Bilder und andere Medien usw. .). Wenn es die ehemaligen ist, das ist eine ganz andere Lernkurve: -)

  3. Was sind Ihre besten Fähigkeiten? Wenn Sie ein guter Designer sind, andere Menschen, die HTML / CSS zu schreiben, oder verwenden Sie eine fertige Vorlage (es gibt viele auf dem Netz) und anpassen. Hier ein guter Start für mehrspaltige Layouts . Wenn Sie ein Programmierer sind, lernen, ein Framework wie Django (Python), Titan (Perl), etwas kleiner in Ruby oder einen in Ihrer bevorzugten Sprache (weil Ruby on Rails ein wenig zu groß für den Anfang ist).

Good CSS ist ein Handwerk, und der Einfachheit ist das Wesen, aber wenn Sie genug lernen wollen, um loszulegen, mein Rat wäre zu:

  1. verstehen Vererbung (die ‚Kaskade‘ in CSS) und die Tatsache, dass alles kann ein ‚Block‘ sein, also nicht viele verschachtelte divs verwenden nur einen Stil anzuwenden. Stattdessen nutzen Sie den Stil auf das HTML-Element selbst oder auf das Element nur, wenn es erscheint in einem übergeordneten Block (wie ein Menü ungeordnete Liste in einer Seitenleiste div enthielt);

  2. erfahren Sie Block und Inline-Elemente ( Web Design von Grund auf neu eine große Lernressource ist und ich würde empfehlen es), und dass CSS können dieses Verhalten ändern;

  3. Test in Firefox, dann Test im Internet Explorer. > = IE7 ist nicht so schlecht (aber halten Sie Ausschau nach hasLayout ). Was kann man nicht direkt im Internet Explorer erhalten optimieren, verwenden Sie bedingte Kommentare CSS hinzufügen dass nur IE sehen - nie verwenden CSS-Hacks - .htc Dateien hinzufügen, dass fehlende IE Funktionalität (zB Roll Stile auf ein beliebiges Element) zur Verfügung;

  4. erfahren Sie CSS Positionierung und Verwendung 'fixed' sparsam;

  5. setzen alle Ihre CSS in einer Datei (für den Anfang) und nicht Inline-CSS in HTML verwenden;

  6. Styling Formen und Formularfelder sind fast eine separate Fertigkeit: -)

Hintergrundbilder verwenden Stil hinzuzufügen, sondern auch verstehen, dass Sie Bilder Positionierung unter Verwendung von Offset- und überlappen. Sie müssen PNGs für schöne Transparenz verwenden, though. Ach ja, und Opazität sieht nett aus, aber erfordert nicht-Standard-CSS für jetzt. obwohl das flexiblere RGBA (a = alpha) Methode wird weit unterstützt. Wie do abgerundeten Ecken , aber beide lohnt sich der Einsatz.

würde ich CSS-Frameworks und setzt jetzt vermeiden - sie Dinge in diesem Stadium erschweren würde noch ein weitere DSL, indem zu lernen (aber lesen sie die Argumente und die Vor-und Nachteile ). Um lästige Standardränder und Polsterung zu vermeiden, ich zurückgesetzt alles immer tun html *, body * {margin: 0; padding 0;} baut dann Polsterung und Margen zurück in wo immer nötig - noch nie so weit ein Problem gewesen: -)

Andere Tipps

  

Was tun Sie mich beraten, um mit dem Web-Design von meiner Seite der ersten Schritte?

Firebug Plugin für Firefox jetzt!

Primary CSS verwendet:

  • Sie, welche CSS-Regeln gelten
  • CSS Änderung in Echtzeit und sehen Sie die Auswirkungen auf
  • anderen Websites Überprüfen Sie, um zu sehen, wie sie Dinge tun,

Ich würde nicht in der Lage sein, CSS zu entwickeln (und andere Web-bezogenen Technologien) ohne dieses Werkzeug

Werfen Sie einen Blick auf YUI CSS-Reset / base / font / grid

http://developer.yahoo.com/yui/3/cssreset/

Und Gitter 960 hat auch ein paar schöne Layouts (für ihre Website in Google-Suche)

Ich weiß nicht, was OS Sie laufen lassen, aber wenn Sie ein Mac-Benutzer sind, schlage ich ein großes kostenloses Tool für CSS: Xyle Scope . Es ist nicht ein Editor, sondern ein CSS-Viewer / Scanner, es können Sie ganz einfach den CSS-Code von einer beliebigen Web-Seite zu sehen, so dass Sie besser, wie CSS-Arbeiten lernen können und Sie können jede gut gemacht Layout im Web analysieren.

CSSEdit (nur Mac) für das Schreiben von Cascade Blättern eine gute Lösung ist, einfach zu bedienen, nicht teuer und erreicht von Funktionen.

Feuerwerk: Ich denke, dass ist eine großartige Software Ihre Layouts zu entwerfen und einige gute grafische Arbeiten machen

Dreamweaver: es ist ein all in one Lösung für Web-Entwicklung ... es ist ein wirklich großartiges Werkzeug, um bequem Ihre Remote-Version der Website mit dem lokalen einem synched maintain

.

Coda (nur Mac) ist eine sehr gute Alternative zu Dreamweaver, auch wenn es nicht Sie lassen verwalten und bearbeiten Sie die .htaccess-Dateien!

Ihre Website Zum Codieren schlage ich Dreamweaver oder Coda, aber eine andere gute Alternative ist BBEdit (Mac nur).

Bootstrap, Es ist der beste CSS-Framework ich vorschlagen kann, gibt es eine anderen genannte Stiftung auch, aber ich ziehe es Bootstrap mehr, da es unter den Entwicklern beliebt und ist verlängerbar. Es gibt noch einige andere Frameworks, ich einen Blog darüber geschrieben hat, es hier lesen auch, wenn Sie wollen,

Nicht verbunden mit StackOverflow
scroll top