Η τρέχουσα κατάσταση της διάταξης θα πρέπει να είναι περίπου όπως στην παρακάτω εικόνα:
Μέχρι στιγμής έχουν προστεθεί ένα λογότυπο και το επάνω μενού. Συνεχίζουμε με μια μεγαλύτερη γραφική παράσταση, η οποία θα πρέπει να εμφανίζεται αμέσως κάτω από την πλοήγηση.
Το αρχή της δημιουργίας νέων επιπέδων έχει ήδη περιγραφεί στο προηγούμενο εκπαιδευτικό εγχειρίδιο. Γι' αυτό θα ήθελα να σας δείξω κάτι άλλο εδώ. Ακριβώς κάτω από το επάνω μενού, θα πρέπει να εμφανιστεί μια μεγαλύτερη εικόνα. Το αποτέλεσμα θα είναι όπως φαίνεται παρακάτω:
Η εικόνα θα πρέπει - όταν την εισάγετε - να έχει τις σωστές διαστάσεις. Συνεπώς, επεξεργαστείτε την αναγκαία. Στη συνέχεια, πηγαίνετε σε Αρχείο>Άνοιγμα και επιλέξτε την εικόνα. Η επιλεγμένη εικόνα θα εμφανιστεί στο νέο παράθυρο. Πατήστε Ctrl+C, για να αντιγράψετε την εικόνα στο πρόχειρο. Έτσι, τώρα μπορείτε να εισάγετε την εικόνα ως νέο επίπεδο, το οποίο θα έχει τις σωστές διαστάσεις, πηγαίνοντας σε Επεξεργασία>Επικόλληση ως>Νέο Επίπεδο. Έτσι, το νέο επίπεδο θα έχει αυτόματα τις διαστάσεις της εικόνας και μπορείτε εύκολα να το τοποθετήσετε στη σωστή θέση. Με αυτόν τον τρόπο, μπορείτε τώρα να ενσωματώσετε όλες τις εικόνες που θέλετε να εισάγετε στη διάταξη και να τις τοποθετήσετε εκεί.
Στη συνέχεια, εισάγετε τα κείμενα στα σημεία όπου πρόκειται να εμφανιστούν στη συνέχεια πραγματικά. Κατά την φάση σχεδίασης, χρησιμοποιείται συνήθως το ονομαστικό κείμενο. Για να αποφύγετε να καθίσετε τώρα και να γράψετε άσκοπα "δοκιμές, δοκιμές, δοκιμές", σας συνιστώ να επισκεφτείτε τη σελίδα http://www.blindtextgenerator.de/.
Εκεί μπορείτε να δημιουργήσετε αυτόματα ονομαστικά κείμενα - επιπλέον, διαφορετικών ειδών. Έπειτα, τα κείμενα μπορούν να εισαχθούν εύκολα με Αντιγραφή & Επικόλληση στο σχεδιασμό. Σε συνδυασμό με αυτό, να σας συστήσω επίσης τη σελίδα http://dummyimage.com/. Σε αυτή τη σελίδα μπορείτε να δημιουργήσετε ψευδο-εικόνες σε οποιοδήποτε μέγεθος. Αυτές οι ψευδο-εικόνες μπορούν στη συνέχεια να χρησιμοποιηθούν ως αντικαταστάτες για γραφικές που δεν έχουν δημιουργηθεί ακόμα.
Το πρόβλημα με τα διαφανείς επίπεδα
Όταν εισάγετε κείμενα, αυτά θα περιλαμβάνουν πολλά στοιχεία όπως τίτλους, παραγράφους κ.λπ. Έτσι, θα πρέπει να συγκεντρώσετε τα συσχετισμένα κείμενα σε δικά τους επίπεδα. Έτσι, μπορείτε να τα μετακινείτε μαζί εύκολα. Γι' αυτό, πηγαίνετε σε Επίπεδα>Νέο Επίπεδο. Στη συνέχεια, εκχωρείτε τις επιθυμητές διαστάσεις και, αν χρειάζεται, του πίσω χρώματος. Συνήθως, θα χρειαστείτε μια διαφανή φόντο. Το πρόβλημα τώρα είναι ότι τα διαφανή επίπεδα είναι δύσκολο να μετακινηθούν εύκολα. Συνήθως, θα "πιάσετε" κατά λάθος ένα υποδοχικό επίπεδο. Αυτό το πρόβλημα λύνεται απλά. Καθοριστικές είναι οι ρυθμίσεις στο παράθυρο Εργαλειοθήκης. Ενεργοποιήστε το Εργαλείο Μετακίνησης. Στη συνέχεια, στο κάτω μέρος του παραθύρου, ενεργοποιήστε την επιλογή Μετακίνηση Ενεργού Επιπέδου.
Με αυτόν τον τρόπο, μπορείτε επίσης να μετακινήσετε τα διαφανή επίπεδα σε οποιαδήποτε θέση εύκολα.
Αποκοπή στοιχείων
Αφού είστε ικανοποιημένοι με τη διάταξη, πρέπει να προχωρήσετε στην πρακτική εφαρμογή ως ιστοσελίδας HTML. Εδώ έρχεται σε πρώτο πλάνο το Slicing, δηλαδή η αποκοπή. Αυτό το Slicing δεν είναι τίποτα άλλο παρά το να χωρίσετε τη διάταξη σε κομμάτια, τα οποία στη συνέχεια θα επανασυντηρηθούν μέσω HTML και CSS. Θα πρέπει να αποκόψετε όλα τα στοιχεία που θα πρέπει να εμφανιστούν ξεχωριστά. Εξαιρούνται φυσικά τα γραφικά στοιχεία που ήδη υπάρχουν ξεχωριστά. Πρώτα απ' όλα, θα σας δείξω πώς να αποκόψετε τα στοιχεία. Δημιουργήστε βοηθητικές γραμμές γύρω από το εν λόγω στοιχείο. Οι βοηθητικές γραμμές αποτελούν στην τελική ανάλυση τις γραμμές κοπής. Να είστε λοιπόν προσεκτικοί στην τοποθέτησή τους.
Αφού επιλέξετε την επιθυμητή περιοχή, πατήστε τον συνδυασμό πλήκτρων Ctrl+Shift+C. (Αυτό ισχύει τόσο για το GIMP όσο και για το Photoshop). Στη συνέχεια, δημιουργήστε ένα νέο αρχείο. Στο Photoshop, αυτό θα έχει αμέσως τις σωστές διαστάσεις. Στο GIMP, δεν λειτουργεί τόσο εύκολα. Εδώ, δημιουργείτε απλά ένα αρχείο με επαρκείς διαστάσεις. Μέσω του Ctrl+V, η περιεχόμενα από το πρόχειρο εισάγονται.
Στη συνέχεια, έρχεται σε πλάνο το Εργαλείο Αποκοπής. Με αυτό, ορίστε την περιοχή που θα αποκοπεί, και στη συνέχεια πατήστε το πλήκτρο Enter-. Η εικόνα θα αποκοπεί στην επιθυμητή περιοχή. Μέσω του Αρχείο>Αποθήκε
