Ένα διάγραμμα δέντρου ιστοτόπου δείχνει τον τρόπο οργάνωσης των σελίδων σε έναν ιστότοπο. Οι γονικές σελίδες εμφανίζονται πάνω ή αριστερά των θυγατρικών σελίδων, υποδεικνύοντας τις σχέσεις μεταξύ των ιστοσελίδων και του τρόπου με τον οποίο έχουν πρόσβαση. Οι ομάδες ανάπτυξης Ιστού χρησιμοποιούν τα διαγράμματα κατά τη δημιουργία ή τον επανασχεδιασμό ιστότοπων. Τα διαγράμματα δέντρων ιστότοπου μπορεί να είναι απλά ή περίπλοκα, ανάλογα με το μέγεθος του ιστότοπου και τις ανάγκες της ομάδας ανάπτυξης.
Βήμα 1
Δημιουργήστε μια λίστα με τις ιστοσελίδες που περιέχει ή θα περιέχει ο ιστότοπος. Βεβαιωθείτε ότι κάθε στοιχείο που αναφέρεται θα είναι μια σελίδα στον ιστότοπό σας. Ανάλογα με το μέγεθος του ιστότοπού σας, εκχωρήστε μια αριθμητική αναφορά σε κάθε σελίδα για να σας βοηθήσει να δημιουργήσετε το διάγραμμα του ιστότοπού σας και να παρακολουθείτε την πρόοδο καθώς αναπτύσσετε τον ιστότοπό σας.
Βήμα 2
Χρησιμοποιώντας λίστες με κουκκίδες, οργανώστε το περίγραμμα για να δείξετε τις σχέσεις γονέα-παιδιού μεταξύ κάθε σελίδας στον ιστότοπό σας. Για παράδειγμα, ένας ιστότοπος διαδικτυακού καταστήματος ενδυμάτων μπορεί να έχει σελίδες γονικών ανώτερου επιπέδου που οδηγούν σε ανδρικά, γυναικεία και παιδικά ρούχα. Κάθε μία από αυτές τις σελίδες θα έχει είδη ένδυσης όπως μπλουζάκια και παντελόνια που περιλαμβάνονται στο περίγραμμα, οδηγώντας τελικά σε σελίδες για μεμονωμένα προϊόντα.
Βήμα 3
Αρχίστε να δημιουργείτε το διάγραμμά σας σχεδιάζοντας ένα ορθογώνιο για κάθε κατηγορία στην κορυφή ενός εγγράφου. Εισαγάγετε έναν σύντομο τίτλο για κάθε ιστοσελίδα ανώτατου επιπέδου στο διάγραμμα σας. Συμπεριλάβετε τον αριθμό αναφοράς της σελίδας, ώστε να μπορείτε να αναζητήσετε επιπλέον λεπτομέρειες σχετικά με τη σελίδα στα άλλα έγγραφα προγραμματισμού του ιστότοπού σας.
Βήμα 4
Σχεδιάστε ορθογώνια για κάθε υποκατηγορία κάτω από μία από τις κατηγορίες ανώτερου επιπέδου σας. Για παράδειγμα, σχεδιάστε τέσσερα ορθογώνια στην κατηγορία ανώτερου επιπέδου ανδρικών ενδυμάτων για πουκάμισα, παντελόνια, σορτς και παλτά. Ευθυγραμμίστε αυτά τα ορθογώνια δίπλα-δίπλα για να δείξετε ότι οι σελίδες που αντιπροσωπεύουν βρίσκονται στο ίδιο επίπεδο με τη δομή του ιστότοπού σας.
Βήμα 5
Συνδέστε τις σελίδες υποκατηγοριών στην κατηγορία ανώτατου επιπέδου που ανήκουν σαν να δημιουργούσατε ένα γράφημα ιεραρχίας ενός οργανισμού. Για παράδειγμα, σχεδιάστε γραμμές από τις σελίδες πουκάμισων, παντελονιών, σορτς και παλτών στην κατηγορία γονέων ανδρικών ενδυμάτων. Κάντε ευθείες γραμμές παρόμοιες με εκείνες σε ένα οργανόγραμμα για να αυξήσετε την αναγνωσιμότητα του διαγράμματος του ιστότοπού σας.
Βήμα 6
Συνεχίστε να διακλαδίζετε το διάγραμμά σας σε υποκατηγορίες έως ότου το δέντρο δεν περιέχει το ποσό των λεπτομερειών που χρειάζεστε για την αποτελεσματική ανάπτυξη του ιστότοπού σας. Για παράδειγμα, σχεδιάστε κουτιά από πουκάμισα και casual πουκάμισα στην ενότητα πουκάμισα της ανδρικής κατηγορίας ενδυμάτων. Ενδέχεται, ωστόσο, να μην είναι απαραίτητη η συμπερίληψη της σελίδας για κάθε casual ανδρικό πουκάμισο στο διάγραμμα του ιστότοπού σας.
Βήμα 7
Συμπληρώστε τις ενότητες διαγράμματος για όλες τις κατηγορίες ανώτερου επιπέδου του ιστότοπού σας με τον ίδιο τρόπο. Για παράδειγμα, συμπληρώστε τις ενότητες γυναικών και παιδιών στον ιστότοπο ένδυσης.
Τροποποιήστε τα σύμβολα που χρησιμοποιούνται στο διάγραμμα δέντρων σας για να υποδείξετε τις πληροφορίες που πρέπει να μεταφέρετε στην ομάδα σας. Για παράδειγμα, χρησιμοποιήστε στρογγυλεμένα ορθογώνια για δυναμικές ιστοσελίδες και μια απεικόνιση πολλών ιστοσελίδων που στοιβάζονται μαζί για να δείξει μια ομάδα παρόμοιων ιστοσελίδων που δεν αναφέρονται μεμονωμένα. Συμπεριλάβετε έναν θρύλο στο διάγραμμα σας για να εξηγήσετε τις συμβάσεις σας.
