Νέα διάταξη πλέγματος υγρών Dreamweaver CS6

• Ενδέχεται 20, 2024

Αν αναπτύσσετε απλούς ιστότοπους ή σύνθετο CMS, έχετε πάντα αυτό το κακό ερώτημα στο μυαλό σας - κάνω ό, τι μπορώ να στοχεύσω σε όλους τους τύπους ακροατηρίων και ψηφιακών ψηφισμάτων; Λοιπόν, το Dreamweaver^R Το CS6 διαθέτει νέες λειτουργίες που καθιστούν αυτή την εργασία ευκολότερη.

Στο παρελθόν, θα χρειαζόταν να δημιουργήσετε ένα διαφορετικό αρχείο CSS για κάθε διαφορετική ανάλυση οθόνης και να χρησιμοποιήσετε ερώτημα μέσων για να αντιστοιχίσετε το απαιτούμενο αρχείο CSS. Αυτό ήταν πολύ χρονοβόρο και προστέθηκε στο συνολικό κόστος ανάπτυξης ιστοσελίδων, το οποίο ήταν κακή είδηση ​​τόσο για τον προγραμματιστή όσο και για τον πελάτη. Το Dreamweaver CS6 έχει πάρει μεγάλο μέρος της εργασίας από τη δημιουργία προσαρμοστικών ιστοσελίδων.

Αυτή η νέα διαδικασία ροής εργασίας εξαρτάται από τη νέα διάταξη υγρού πλέγματος που είναι κάπως σαν ένα πρότυπο εκκίνησης με προεπιλεγμένες διατάξεις και τυπογραφία για κάθε ανάλυση οθόνης για τον ιστότοπό σας.

1. Απλά κάντε κλικ στο File - New Fluid Grid Layout από το Menubar.
   
   
2. Στο παράθυρο διαλόγου Νέο έγγραφο, θα δείτε τις προεπιλογές για αυτήν τη νέα προσαρμοσμένη ιστοσελίδα. Το πλάτος είναι σταθερό για κάθε μία από τις διαφορετικές αναλύσεις οθόνης.
   
   Κινητό 480 px
   Πίνακας 768px
   Desktop 1232px
   
   
3. Έχετε την επιλογή να αλλάξετε τον προεπιλεγμένο αριθμό στηλών και το ποσοστό του πλάτους της στήλης για κάθε ανάλυση οθόνης. Οι προεπιλογές είναι:
   
   Κινητά 5 στήλες - 91%
   Ταμπλέτες 8 - 93%
   Desktop 10 στήλες - 90%
   
   
4. Ο προεπιλεγμένος χώρος εργασίας μπορεί να εμφανίσει τον κώδικα και τις προβολές του σχεδίου. Όπως μπορείτε να δείτε στην προβολή σχεδίου, το νέο αρχείο έχει ήδη μια ετικέτα div. Μπορείτε να αλλάξετε το προεπιλεγμένο αναγνωριστικό και την κλάση για το div στον πίνακα Ιδιότητες.
   
   Φυσικά, η ιστοσελίδα σας θα χρειαστεί περισσότερα από ένα div. Μπορούμε λοιπόν να προσθέσουμε περισσότερα διαχυτικά για την κεφαλίδα, την πλοήγηση, την κύρια, την άκρη και το υποσέλιδο.
   
   
5. Για να προσθέσετε νέο div, επιλέξτε Εισαγωγή ετικέτας Div Lay Grid Layout στο πλαίσιο Insert.
   
   
6. Στο παράθυρο διαλόγου, μπορείτε να ονομάσετε το αναγνωριστικό για την ετικέτα.
   
   
7. Όταν προσθέσαμε όλα τα μεγάλα divs για τη σελίδα μας, μπορούμε να τα χτυπήσουμε και να τα σύρεψουμε για να τα επανατοποθετήσουμε μέσα στο πλέγμα.
   
   

Προτείνεται να αρχίσουμε να κατασκευάζουμε την κινητή έκδοση του ιστότοπού μας και να ανεβούμε στα μεγαλύτερα μεγέθη. Μπορείτε εύκολα να συγκρίνετε τα οπτικά αποτελέσματα με την εργασία σας χρησιμοποιώντας το Resolution Switcher για αναλύσεις για κινητά, tablet και επιφάνεια εργασίας.

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

* Η Adobe μου έδωσε ένα αντίγραφο αυτού του λογισμικού για σκοπούς αναθεώρησης.

Πνευματικά δικαιώματα 2018 Adobe Systems Incorporated. Ολα τα δικαιώματα διατηρούνται. Οι φωτογραφίες της οθόνης του προϊόντος Adobe ανατυπώνονται με την άδεια της Adobe Systems Incorporated. Adobe Photoshop, Adobe Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, είναι / είναι είτε [ή] καταχωρισμένο εμπορικό σήμα ή εμπορικό σήμα της Adobe Systems Incorporated στις Ηνωμένες Πολιτείες ή / και σε άλλες χώρες.

Οδηγίες Βίντεο: SRT Tomahawk Vision Gran Turismo (Greek subs) (Ενδέχεται 2024).