Τα πλαίσια του InDesign είναι τόσο απλά όσο το drag-and-drag. Τα στρώματα του Photoshop επιτρέπουν στους ζωγράφους χρωματιστά εικονοστοιχεία οπουδήποτε επιθυμούν. Αλλά η διάταξη με το HTML και το CSS είναι ένα παιχνίδι του nudging και του cascading.

Συμβαίνει κάθε μέρα: οι καλλιτεχνικοί διευθυντές του Photoshop καταλαβαίνουν τα σχέδια, τις λεπτές αποστάσεις τους, επιλέγοντας προσεκτικά τις κατάλληλες γραμματοσειρές και χρώματα. Παρέχουν τη δουλειά τους σε έναν πρόθυμο προγραμματιστή HTML, ο οποίος ανακοινώνει ότι ο σχεδιασμός πιθανόν να διαρκέσει ημέρες για να μετατραπεί σε HTML / CSS εργασίας. Ακόμα χειρότερα, θα κάνουν αλλαγές για να λάβουν υπόψη διαφορετικά μεγέθη οθόνης. Ο χρόνος είναι ένα μυστήριο και για τα δύο μέρη. Θα πάρει τον προγραμματιστή μια ώρα ή μια εβδομάδα για να μετατρέψει το PSD σε HTML / CSS;

Τα βασικά στοιχεία της διαμόρφωσης ιστού - οι πιθανές, οι πρακτικές, οι δυνατότητες - είναι εύκολα κατανοητές. Όπως και ο ίδιος ο σχεδιασμός, η κατανόηση των αρχών θα βοηθήσει κάθε σχεδιαστή να παράγει καλύτερα σχέδια και να επιταχύνει τη διαδικασία κατασκευής ενός χώρου.

Στοιχείο μπλοκαρίσματος στοίβα, ροή εσωτερικών στοιχείων

Τα πάντα σε μια ιστοσελίδα, από παραγράφους σε εικόνες σε συνδέσμους σε έντονα κείμενα, βρίσκονται σε αόρατα πλαίσια. Αυτά τα κουτιά έχουν δύο ποικιλίες: μπλοκ και εν σειρά. Η διαφορά μεταξύ inline και block βρίσκεται στη συμπεριφορά τους.

• Στοιχεία μπλοκ είναι ορθογώνια. Τους αρέσει να γεμίζουν οριζόντιο χώρο.
• Τα στοιχεία γραμμής είναι ορθογώνια, εκτός από το ότι μπορούν να τυλιχτούν.

Στοιχεία μπλοκ στοιβάζονται το ένα πάνω στο άλλο. Εκτός αν δηλώνεται διαφορετικά, καταλαμβάνουν όσο το δυνατόν περισσότερο οριζόντιο χώρο, πιέζοντας τα πάντα γύρω ή πάνω τους. Για το σχεδιασμό, τα στοιχεία μπλοκ είναι το κύριο εργαλείο διαμόρφωσης.

Τα ενσωματωμένα στοιχεία βασίζονται στη μορφοποίηση κειμένου. Δεν σπάνε τη ροή του κειμένου και οι διαστάσεις τους επεκτείνονται ώστε να ταιριάζουν στο περιεχόμενό τους. Η αναφορά ενός στοιχείου inline για να διατηρηθεί ένα πλάτος 200 εικονοστοιχείων δεν θα λειτουργήσει. Το γεμίζει με κείμενο.

Από προεπιλογή, κάθε στοιχείο στο είναι ένα στοιχείο γραμμής ή μπλοκ. Οι σχεδιαστές μπορούν να αλλάξουν τη φύση τους με ένα μικρό CSS - ας πούμε, μετατρέποντας μια στοίβα από στοιχεία λίστας (natively blocks) σε μια σειρά ή μια σειρά από οριζόντιους συνδέσμους (natively inline) σε μια κάθετη στοίβα. Αυτό σημαίνει ότι οποιοδήποτε ορατό στοιχείο μπορεί να χρησιμοποιηθεί για τη διάταξη. Το κατά πόσο θα πρέπει να εξαρτάται από τη σχετική διάταξη.

Τα εγγενή στοιχεία μπλοκ περιλαμβάνουν:

• Τμήματα
• Παράγραφοι

• Τόπος αγώνων
  • Στοιχεία σε μια λίστα
  • Επικεφαλίδες

    -

  • Πίνακες
    Αποκλεισμός προσφορών

    Οργανωτές σε HTML5

    , ,
    Το ίδιο το σώμα

    Ενσωματωμένα στοιχεία περιλαμβάνουν:

    • Άγκυρες (υπερσυνδέσεις)
    • Τολμηρός και
    • Italic και
    • Εικόνες
    • Αναφορές
    • Πληκτρολογήστε στυλ
    • Ετικέτες φόρμας
    • Μέχρι σας

    Συνηθισμένες ετικέτες που δεν είναι ούτε μπλοκ ούτε ενσωματωμένες:

    • Ο τίτλος του εγγράφου