Οι επαγγελματίες σχεδιαστές ιστοσελίδων αναπτύσσουν πρότυπα ιστότοπου, συνήθως σε ισχυρά προγράμματα επεξεργασίας γραφικών όπως το Adobe Photoshop. Το αποτέλεσμα της εργασίας είναι ένα αρχείο με εικόνα, το οποίο σε αυτήν τη φόρμα παρέχεται στον πελάτη. Για να χρησιμοποιήσετε την έτοιμη σχεδίαση, δηλαδή για να σχεδιάσετε μια ιστοσελίδα, πρέπει να κόψετε το πρότυπο.
Απαραίτητη
πρόγραμμα επεξεργασίας γραφικών raster Adobe Photoshop
Οδηγίες
Βήμα 1
Ανοίξτε το αρχείο προτύπου στο πρόγραμμα επεξεργασίας γραφικών Adobe Photoshop. Επιλέξτε Αρχείο και Άνοιγμα από το μενού ή πατήστε το συνδυασμό πλήκτρων Ctrl + O. Στο παράθυρο διαλόγου που εμφανίζεται μετά, μεταβείτε στον κατάλογο με το αρχείο, επιλέξτε το στη λίστα και κάντε κλικ στο κουμπί "Άνοιγμα".
Βήμα 2
Επιλέξτε μια βολική κλίμακα για προβολή της εικόνας προτύπου. Χρησιμοποιήστε τα στοιχεία μενού Zoom Tool ή περιβάλλοντος. Επιλέξτε μια κλίμακα που σας επιτρέπει να τοποθετήσετε τον κέρσορα με ακρίβεια pixel. Αυτό είναι απαραίτητο για τον ακριβή καθορισμό των γραμμών αναφοράς.
Βήμα 3
Σχηματίστε ένα σύνολο γραμμών αναφοράς πάνω από την εικόνα προτύπου. Ενεργοποιήστε την οθόνη των χάρακα στα παράθυρα εγγράφων εάν δεν είναι ήδη ενεργοποιημένη. Για να το κάνετε αυτό, πατήστε Ctrl + R ή επιλέξτε Προβολή και κανόνες από το μενού.
Βήμα 4
Μετακινήστε τον κέρσορα του ποντικιού πάνω από τον επάνω χάρακα για να προσθέσετε μια οριζόντια γραμμή αναφοράς. Πατήστε και κρατήστε πατημένο το αριστερό πλήκτρο. Μετακινήστε τον κέρσορα του ποντικιού προς τα κάτω στην περιοχή της εικόνας. Ομοίως, χρησιμοποιώντας το σωστό χάρακα, μπορείτε να προσθέσετε οριζόντιες γραμμές.
Βήμα 5
Προσθέστε τον απαιτούμενο αριθμό γραμμών αναφοράς και τοποθετήστε τις κατά μήκος των ορίων της διαίρεσης των περιοχών του προτύπου. Οι γραμμές πρέπει να περνούν από όλα τα μέρη όπου θέλετε να κόψετε το πρότυπο. Θα πρέπει να περιορίζουν όλες τις εικόνες και τις λογικές περιοχές (λογότυπο, κεφαλίδα ιστότοπου, οριζόντια και κατακόρυφα μενού κ.λπ.) που θα εμφανίζονται σε μια ιστοσελίδα.
Βήμα 6
Ενεργοποιήστε το Slice Tool. Το κουμπί του βρίσκεται στην κάθετη γραμμή εργαλείων.
Βήμα 7
Δημιουργήστε τον απαιτούμενο αριθμό περιοχών κοπής χρησιμοποιώντας το Slice Tool. Επιλέξτε μια βολική κλίμακα για την εμφάνιση του προτύπου. Χρησιμοποιήστε το ποντίκι για να ορίσετε τα όρια των περιοχών. Οι οδηγίες που προστίθενται στο τρίτο βήμα θα παρέχουν ακριβή τοποθέτηση των ορίων των αντικειμένων που δημιουργείτε. Προσαρμόστε τις υπάρχουσες περιοχές, εάν είναι απαραίτητο, χρησιμοποιώντας το Slice Select Tool.
Βήμα 8
Αλλάξτε τις ιδιότητες των περιοχών κοπής όπως απαιτείται. Ενεργοποιήστε το Slice Select Tool. Κάντε δεξί κλικ στην επιθυμητή περιοχή. Στο μενού περιβάλλοντος, επιλέξτε το στοιχείο Επεξεργασία επιλογών φετών. Στο παράθυρο διαλόγου Επιλογές φετών που εμφανίζεται, επιλέξτε τον τύπο της περιοχής (εικόνα, κενή περιοχή, πίνακας), τη λειτουργία πλήρωσης φόντου, καθορίστε, εάν είναι απαραίτητο, το όνομα, τη διεύθυνση URL προορισμού, το περιεχόμενο του χαρακτηριστικού alt="Image" και άλλες τιμές. Κάντε κλικ στο OK.
Βήμα 9
Κόψτε το πρότυπο. Επιλέξτε Αρχείο και Αποθήκευση για Web & Συσκευές από το μενού ή πατήστε Shift + Ctrl + Alt + S. Στο παράθυρο διαλόγου Αποθήκευση για Web & Συσκευές καθορίστε τη μορφή και τις παραμέτρους συμπίεσης εικόνας στις οποίες θα κοπεί το πρότυπο. Κάντε κλικ στο κουμπί Αποθήκευση. Θα εμφανιστεί ο διάλογος Save Optimized As.
Βήμα 10
Επιλέξτε HTML και Εικόνες (*.html) στην αναπτυσσόμενη λίστα Τύπος αρχείου και στο πεδίο Όνομα αρχείου εισαγάγετε το όνομα του αρχείου όπου θα τοποθετηθεί η σήμανση HTML προτύπου. Στη λίστα Slices, επιλέξτε All Slices. Καθορίστε τον κατάλογο για την έξοδο και κάντε κλικ στο κουμπί "Αποθήκευση".
Βήμα 11
Ένα αρχείο HTML θα τοποθετηθεί στον κατάλογο προορισμού, ο οποίος στην πραγματικότητα είναι ένα έτοιμο πρότυπο ιστοσελίδας. Ο υποκατάλογος εικόνων θα περιέχει το σύνολο εικόνων στο οποίο κόπηκε το αρχικό πρότυπο.
