30Jun

Πώς να χρησιμοποιήσετε τα εργαλεία προγραμματιστή ιστού του Firefox για να προβάλετε τις δομές ιστοτόπων σε 3D

click fraud protection
Το

Firefox 11 πρόσθεσε δύο νέα εργαλεία ανάπτυξης ιστού στο ήδη εντυπωσιακό οπλοστάσιο του Firefox.Το χαρακτηριστικό Tilt απεικονίζει τις δομές ιστοτόπων σε 3D, ενώ ο επεξεργαστής στυλ μπορεί να επεξεργάζεται τα φύλλα στυλ CSS σε κίνηση.

Το 3D χαρακτηριστικό, γνωστό ως Tilt, είναι ένας τρόπος προβολής του DOM του δικτυακού τόπου.Ενσωματώνεται με τον υπάρχοντα Έλεγχο εγγράφων και χρησιμοποιεί το WebGL για την εμφάνιση πλούσιων γραφικών 3D στο πρόγραμμα περιήγησης.

Tilt - 3D απεικόνιση ιστοσελίδας

Μπορείτε να έχετε πρόσβαση στο Tilt από τον Επιθεωρητή σελίδας του Firefox.Για να ξεκινήσετε, ανοίξτε το Page Inspector επιλέγοντας το "Inspect" από το μενού Web Developer.Μπορείτε επίσης να κάνετε δεξί κλικ στην τρέχουσα σελίδα και να επιλέξετε "Inspect Element" για να ξεκινήσετε τον επιθεωρητή σε ένα συγκεκριμένο στοιχείο.

Κάντε κλικ στο κουμπί "3D" στη γραμμή εργαλείων επιθεωρητών.

Θα δείτε τη δομή της σελίδας μετά την ενεργοποίηση της λειτουργίας 3D, αλλά θα φαίνεται επίπεδη μέχρι να την περιστρέψετε.

instagram viewer

Περιστρέψτε το μοντέλο κάνοντας αριστερό κλικ, μετακινήστε την εικόνα κάνοντας δεξί κλικ και μεγεθύνετε και εξάγετε χρησιμοποιώντας τον τροχό του ποντικιού.

Αυτή η προβολή είναι ενσωματωμένη στα άλλα εργαλεία του επιθεωρητή.Εάν έχετε ανοίξει τα πλαίσια HTML ή στυλ, μπορείτε να κάνετε κλικ σε ένα στοιχείο στη σελίδα hte για να δείτε τον κώδικα HTML του στοιχείου ή τις ιδιότητες του CSS.

Περισσότερα 3D Χαρακτηριστικά

Η λειτουργία απεικόνισης 3D βασίστηκε στην επέκταση Tilt, αλλά δεν διαθέτει όλα τα χαρακτηριστικά της επέκτασης Tilt.αν θέλετε να προσαρμόσετε τα χρώματα ή ακόμα και να εξάγετε την απεικόνιση ως αρχείο μοντέλου 3D για χρήση με ένα πρόγραμμα επεξεργασίας 3D, θα χρειαστεί να εγκαταστήσετε το πρόσθετο Tilt 3D.Μόλις το έχετε, θα έχετε μια νέα επιλογή "Tilt" στο μενού Web Developer.

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

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

Editor στυλ CSS

Για να προβάλετε και να επεξεργαστείτε φύλλα στυλ CSS μιας σελίδας, ανοίξτε το Editor στυλ από το μενού Web Developer.

Ο επεξεργαστής στυλ παραθέτει τα φύλλα στυλ στην τρέχουσα σελίδα.Κάντε εναλλαγή μεταξύ ενός φύλλου στυλ και κάνοντας κλικ στο εικονίδιο ματιού στα αριστερά του ονόματος του φύλλου στυλ.Επεξεργαστείτε ένα φύλλο στυλ επιλέγοντάς το και τροποποιώντας τον κώδικα.

Οι αλλαγές αντικατοπτρίζονται αμέσως στη σελίδα.Εάν αλλάξετε το φύλλο στυλ, η σελίδα θα χάσει τις πληροφορίες στυλ.Εάν επεξεργαστείτε ένα φύλλο στυλ, θα δείτε τις αλλαγές να εμφανίζονται στη σελίδα ενώ πληκτρολογείτε.

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

Η λειτουργία τρισδιάστατης απεικόνισης παρακολουθεί τις αλλαγές στην τρέχουσα σελίδα και τις ειδοποιήσεις όταν συμβαίνουν αλλαγές.Όταν χρησιμοποιείτε τον επεξεργαστή στυλ με τον ανοιχτό επιθεωρητή 3D, οι αλλαγές σας θα προβληθούν αμέσως στην προβολή 3D.Αυτό λειτουργεί επίσης με επεκτάσεις τρίτων που τροποποιούν ιστοσελίδες, όπως το Firebug.