Εντολή
Πρώτα προσπαθήστε να βρείτε την εικόνα με μηχανές αναζήτησης. Εισαγάγετε ένα ερώτημα και, στη συνέχεια, επιλέξτε την καρτέλα ρυθμίσεων αναζήτησης. Η Google, για παράδειγμα, έχει ένα κουμπί "Εργαλεία αναζήτησης", ενώ το Yandex έχει ένα εικονίδιο με ρυθμιστικά. Αφού πρέπει να επιλέξετε το στοιχείο "Μέγεθος" και να καθορίσετε τις ακριβείς τιμές. Ή, για παράδειγμα, εάν χρειάζεστε μια φωτογραφία με καλή ανάλυση, επιλέξτε "Large".
Εάν δεν υπάρχει εικόνα με το επιθυμητό μέγεθος, τότε μπορείτε να την προσαρμόσετε μόνοι σας στο πλαίσιο. Υπάρχουν τρόποι. Το πρώτο είναι ότι πρώτα δημιουργείτε ένα έγγραφο με το επιθυμητό μέγεθος και, στη συνέχεια, αλλάζετε την εικόνα. Το δεύτερο είναι το αντίθετο - ανοίξτε την εικόνα και αλλάξτε το μέγεθος. Ουσιαστικά δεν υπάρχει διαφορά: όλα εξαρτώνται από τις προτιμήσεις και τους στόχους σας. Παραδείγματα θα ληφθούν υπόψη στο πρόγραμμα Adobe Photoshop, αλλά μπορείτε να χρησιμοποιήσετε και άλλους επεξεργαστές γραφικών.
Πρώτος τρόπος. Κάντε κλικ στο "Αρχείο" - "Δημιουργία ..." ή στο συνδυασμό πλήκτρων Ctrl + N. Ένα παράθυρο με ρυθμίσεις θα εμφανιστεί μπροστά σας. Καθορίστε εκεί τις παραμέτρους πλάτους, ύψους και απαιτούμενης ανάλυσης χρώματος. Στη συνέχεια, ανοίξτε την εικόνα που σας αρέσει στο πρόγραμμα περιήγησης, κάντε κλικ δεξί κουμπίποντίκι και επιλέξτε Αντιγραφή εικόνας. Στη συνέχεια, επιστρέψτε στο πρόγραμμα και πατήστε τον συνδυασμό Ctrl + V.
Η εικόνα θα εμφανιστεί στο παράθυρο του προγράμματος επεξεργασίας γραφικών. Στη συνέχεια, κάντε κλικ στο "Επεξεργασία" - "Δωρεάν μετασχηματισμό" ή στον συνδυασμό Ctrl + T. Θα εμφανιστούν βασικά σημεία, με τη βοήθεια των οποίων μπορείτε να προσαρμόσετε την εικόνα στο μέγεθος του παραθύρου εργασίας. Μόλις λάβετε το επιθυμητό αποτέλεσμα (παρεμπιπτόντως, μπορείτε να πάτε πέρα από τα όρια της περιοχής εργασίας), κάντε κλικ στο "Αρχείο" - "Αποθήκευση ως ..." ή στο συνδυασμό πλήκτρων Ctrl + S.
Ο δεύτερος τρόπος. Πρέπει πρώτα να μεταβείτε στον υπολογιστή, στη συνέχεια να κάνετε κλικ στο "Αρχείο" - "Άνοιγμα ..." (ή στον συνδυασμό Ctrl + O) και να επιλέξετε την επιθυμητή εικόνα. Στη συνέχεια, επιλέξτε "Εικόνα" - "Μέγεθος εικόνας ..." ή πατήστε Alt + Ctrl + I. Καταργήστε την επιλογή "Διατήρηση αναλογίας διαστάσεων" και επιλέξτε το επιθυμητό μέγεθος. Στη συνέχεια, πατήστε το πλήκτρο ΟΚ.
Για να αλλάξετε το μέγεθος μιας εικόνας χρησιμοποιώντας HTML για μια ετικέτα παρέχονται χαρακτηριστικά πλάτος (πλάτος) και ύψος (ύψος). Τα εικονοστοιχεία χρησιμοποιούνται ως τιμή και τα ορίσματα πρέπει να ταιριάζουν με τις φυσικές διαστάσεις της εικόνας. Για παράδειγμα, στο σχ. Το 10.6 δείχνει μια εικόνα που έχει διαστάσεις 100x111 pixel.
Ρύζι. 10.6. εικόνα αρχικού μεγέθους
Αντίστοιχα, ο κώδικας HTML για την τοποθέτηση αυτού του σχήματος φαίνεται στο παράδειγμα 10.4.
Παράδειγμα 10.4. Διαστάσεις σχεδίασης
Εάν οι διαστάσεις της εικόνας καθορίζονται ρητά, τότε το πρόγραμμα περιήγησης τις χρησιμοποιεί για να εμφανίσει την κενή περιοχή που αντιστοιχεί στην εικόνα κατά τη φόρτωση του εγγράφου (Εικ. 10.7). Διαφορετικά, το πρόγραμμα περιήγησης περιμένει να φορτώσει πλήρως η εικόνα πριν αλλάξει το πλάτος και το ύψος της εικόνας (Εικόνα 10.8). Σε αυτήν την περίπτωση, ενδέχεται να προκύψει αναδιαμόρφωση κειμένου, καθώς αρχικά το μέγεθος της εικόνας δεν είναι γνωστό και ορίζεται αυτόματα σε μικρό.
Ρύζι. 10.7. Το μέγεθος της εικόνας δεν έχει καθοριστεί και δεν έχει φορτωθεί ακόμα
Ρύζι. 10.8. Η εικόνα μεταφορτώθηκε, το κείμενο επαναμορφοποιήθηκε
Το πλάτος και το ύψος της εικόνας μπορούν να αλλάξουν προς τα πάνω και προς τα κάτω. Ωστόσο, αυτό δεν επηρεάζει με κανέναν τρόπο την ταχύτητα λήψης της εικόνας, καθώς το μέγεθος του αρχείου παραμένει αμετάβλητο. Επομένως, μειώστε την εικόνα με προσοχή, γιατί. Αυτό μπορεί να προκαλέσει σύγχυση στους αναγνώστες, γιατί ένα τόσο μικρό σχέδιο διαρκεί τόσο πολύ για να φορτώσει. Αλλά η αύξηση του μεγέθους οδηγεί στο αντίθετο αποτέλεσμα - το μέγεθος της εικόνας είναι μεγάλο, αλλά το αρχείο φορτώνεται πιο γρήγορα σε σχέση με την εικόνα του ίδιου μεγέθους.
Στο σχ. Το 10.9 δείχνει την ίδια εικόνα όπως φαίνεται στην εικ. 10,6, αλλά διπλασιάστηκε σε πλάτος και ύψος.
Ρύζι. 10.9. Προβολή της εικόνας σε μεγέθυνση στο πρόγραμμα περιήγησης
Ο κωδικός για ένα τέτοιο σχέδιο θα παραμείνει σχεδόν αμετάβλητος και φαίνεται στο Παράδειγμα 10.5.
Παράδειγμα 10.5. Αλλαγή μεγέθους εικόνας
Αυτή η αλλαγή μεγέθους ονομάζεται επαναδειγματοληψία και ο αλγόριθμος του προγράμματος περιήγησης είναι κατώτερος ως προς τις δυνατότητές του από τους επεξεργαστές γραφικών. Επομένως, είναι απαραίτητο να αυξήσετε την εικόνα με αυτόν τον τρόπο μόνο σε ειδικές περιπτώσεις, διαφορετικά η ποιότητα της εικόνας υποβαθμίζεται πάρα πολύ. Είναι καλύτερα να χρησιμοποιήσετε κάποιο είδος προγράμματος γραφικών. Η εξαίρεση είναι σχέδια που περιέχουν ορθογώνιες περιοχές. Στο σχ. Το Σχήμα 10.10 δείχνει ένα αρχείο μοτίβου που παίρνει 54 byte και έχει αρχικό μέγεθος 8 επί 8 εικονοστοιχεία, με κλίμακα έως 150 εικονοστοιχεία.
Ρύζι. 10.10. Μεγεθυσμένη εικόνα
Τα προγράμματα περιήγησης χρησιμοποιούν δύο αλγόριθμους για επαναδειγματοληψία - δικυβικό (δίνει λείες άκρες και ομαλή τονική γκάμα χρωμάτων) και πλησιέστερα σημεία (διατηρεί το αρχικό σύνολο χρωμάτων και αιχμηρές άκρες). Τελευταίες εκδόσειςτα προγράμματα περιήγησης χρησιμοποιούν έναν δικύβικο αλγόριθμο και τα παλαιότερα προγράμματα περιήγησης, αντίθετα, χρησιμοποιούν έναν αλγόριθμο πλησιέστερου σημείου.
Το μέγεθος της φωτογραφίας θα αλλάξει στο καθορισμένο μέγεθος σε εκατοστά (χιλιοστά, ίντσες) καθώς και στο καθορισμένο μέγεθος σε DPI, σύμφωνα με τα πρότυπα εκτύπωσης σε χαρτί. Οι διαστάσεις σε cm, mm και ίντσες μπορούν να καθοριστούν με ακρίβεια χιλιοστών, για παράδειγμα, αντί για τη μορφή 15x10, μπορείτε να ορίσετε 15,201x10,203 cm.
Πίνακας με τυπικά μεγέθη φωτογραφιών σε κάθετη (πορτραίτο) θέση:
| Μορφή φωτογραφίας σε εκατοστά (cm) | Μέγεθος σε χιλιοστά (mm) | Μέγεθος σε pixel (για εκτύπωση 300dpi) |
Αναλογία απεικόνισης (σε οριζόντιο προσανατολισμό) |
| 3x4 (μετά από χειροκίνητη κοπή) | 30Χ40 | 354x472 | 4:3 (1.33) |
| 3,5x4,5 (μετά από χειροκίνητη κοπή) | 35Χ45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10Χ15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13Χ18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15Χ20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15Χ21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20Χ30(≈A4) | 203x305 | 2362x3543 | 3:2 (1.5) |
| 30Χ40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30Χ45 | 305x457 | 3543x5315 | 3:2 (1.5) |
Τυπικό μέγεθος φύλλου χαρτιού Μορφή Α4- 21x29,7 cm ή 2480x3508 pixel στα 300 dpi. Οι διαστάσεις άλλων μορφών φύλλων εμφανίζονται στη σελίδα της Wikipedia, αλλά απλώς μην ξεχνάτε ότι οι διαστάσεις αναφέρονται εκεί σε χιλιοστά και ίντσες, δηλ. στις ρυθμίσεις αυτής της σελίδας, πρέπει να επιλέξετε την κατάλληλη τιμή.
Εάν πρέπει να αλλάξετε το μέγεθος μιας φωτογραφίας χωρίς να λάβετε υπόψη το DPI (κουκκίδες ανά ίντσα), δηλαδή, τηρώντας μόνο τις αναλογίες της καθορισμένης μορφής, τότε πρέπει να ορίσετε την παράμετρο "Size in DPI" σε "0" στις ρυθμίσεις.
Η αρχική εικόνα δεν αλλάζει με κανέναν τρόπο. Θα σας δοθεί μια άλλη επεξεργασμένη εικόνα.
Αυτό το μάθημα είναι ένα είδος συνέχειας του προηγούμενου, στο οποίο εξετάσαμε, τώρα ήρθε η ώρα να εμβαθύνετε τις γνώσεις σας και να εξετάσετε τις ιδιότητες CSS της εικόνας.
Διαστάσεις εικόνας σε CSS
Ας δούμε τι νέο υπάρχει εδώ, δημιούργησα μια κλάση img στην οποία ορίζω τις διαστάσεις της εικόνας, το πλάτος είναι το πλάτος και το ύψος είναι το ύψος μας, υπέδειξα τις διαστάσεις περισσότερο από τις αρχικές, ώστε να μπορείτε να δείτε καθαρά πώς είναι η εικόνα θα αλλάξει.
Για λόγους σαφήνειας, θα δώσω ένα παράδειγμα όπου θα υπάρχει πολύ κείμενο και θα δείτε ποιες εσοχές υπάρχουν στην εικόνα αυτό το παράδειγμαθα χρησιμοποιήσουμε την ιδιότητα περιθωρίου που θα σας δώσει την ευκαιρία να αξιολογήσετε τις δυνατότητές της.
Για λόγους σαφήνειας, θα δώσω ένα παράδειγμα όπου θα υπάρχει πολύ κείμενο και θα δείτε ποιες είναι οι εσοχές από την εικόνα σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε μια εικόνα χωρίς να ορίσουμε εσοχές, ώστε να μπορείτε να δείτε καθαρά τη διαφορά.
Στο πρόγραμμα περιήγησης βλέπουμε τα εξής:
Σε αυτό το παράδειγμα, έκανα εσοχές από την εικόνα χάρη στην παράμετρο περιθωρίου, η οποία μας έδωσε εσοχές και από τις τέσσερις άκρες των 20 pixel. Εδώ μπορείτε να κάνετε πιο δύσκολο χειρισμό, μπορείτε να ορίσετε την εσοχή από μια συγκεκριμένη άκρη, για παράδειγμα:
- margin-top - περιθώριο από την επάνω πλευρά
- margin-right - περιθώριο από τη δεξιά πλευρά
- margin-bottom - περιθώριο από την κάτω πλευρά
- margin-left - περιθώριο από την αριστερή πλευρά
Αντίστοιχα, εδώ μπορείτε να προσαρμόσετε τα πάντα πιο λεπτά ή να ορίσετε την εσοχή μόνο από μία ή δύο πλευρές χωρίς να αγγίξετε τις άλλες.
Στο πρόγραμμα περιήγησης:
Ρυθμίζουμε το πλαίσιο γύρω από την εικόνα, χάρη στην παράμετρο περιγράμματος, ορίζουμε πρώτα το πλάτος του πλαισίου χρησιμοποιώντας το πλάτος περιγράμματος, το ορίζουμε σε pixel και μετά το στυλ του πλαισίου, δηλαδή την εμφάνισή του σε στυλ περιγράμματος, εκεί υπάρχουν πολλές τιμές για να επιλέξετε:
Και η τελευταία παράμετρος που θα προσαρμόσουμε είναι το χρώμα του περιγράμματος, το οποίο ορίζεται από την παράμετρο χρώματος περιγράμματος.
Στο πρόγραμμα περιήγησης βλέπουμε:
Όπως καταλαβαίνετε, αντιστοιχίσαμε το φόντο στο body tag χάρη στον επιλογέα ετικετών, αφού καταλαμβάνει ολόκληρο το έγγραφο, μπορούμε να το αντιστοιχίσουμε και σε άλλες ετικέτες. Η παράμετρος φόντου έκανε το φόντο μια εικόνα για εμάς, τη διεύθυνση στην οποία γράφουμε σε παρένθεση. Μπορείτε επίσης να χειριστείτε το φόντο, για παράδειγμα:
φόντο: url(proba.png) repeat-x;
Το φόντο θα επαναλαμβάνεται μόνο κατά μήκος του άξονα Χ, δηλαδή οριζόντια σε μία γραμμή.
φόντο: url(proba.png) repeat-y;
Το φόντο θα επαναλαμβάνεται μόνο κατά μήκος του άξονα Υ, δηλαδή κάθετα σε μία γραμμή.
φόντο: url(proba.png) no-repeat;
Το φόντο δεν θα επαναληφθεί, αλλά θα εμφανιστεί μόνο μία εικόνα.
Μέγεθος φόντου: 500px 200px;
το πρόσθετη παράμετρος A που ορίζει το μέγεθος φόντου, το πλάτος και το ύψος της εικόνας.
Διαφάνεια εικόνας με CSS
Στο πρόγραμμα περιήγησης βλέπουμε τα εξής:
Αυτή η ιδιότητα ήρθε με την εμφάνιση του CSS3 και στην πραγματικότητα έλαβε αρκετά εκτεταμένη χρήση. Εφαρμόζεται χρησιμοποιώντας την παράμετρο αδιαφάνειας ορίζει τη διαφάνεια της εικόνας, τις τιμές από 0 έως 1 και τη δεύτερη παράμετρο φίλτρου: άλφα (Αδιαφάνεια=50). κάνει το ίδιο για περιηγητής διαδυκτίουΕξερευνήστε γιατί οι παλαιότερες εκδόσεις δεν υποστηρίζουν την παράμετρο αδιαφάνειας, τιμές από 0 έως 100. Στο παράδειγμα, έφτιαξα ειδικά δύο εικόνες για να μπορείτε να δείτε καθαρά τη διαφορά.
Αυτό ολοκληρώνει το μάθημα CSS Image Properties, ελπίζω ότι αυτό το μάθημα ήταν χρήσιμο για εσάς και σας ενέπνευσε να μελετήσετε περαιτέρω τη γλώσσα και να αποκτήσετε νέες γνώσεις.
Ημερομηνία έκδοσης: 2014-04-22
Πριν απαντήσετε στην ερώτηση πώς να εισάγω εικόνα σε html;”, θα πρέπει να σημειωθεί ότι η επαναφόρτωση ιστοσελίδων τεράστιο ποσόΤο γραφικό υλικό δεν αξίζει τον κόπο, καθώς αυτό όχι μόνο θα βελτιώσει την οπτική αντίληψη του πόρου από τον χρήστη, αλλά και θα αυξήσει τον χρόνο φόρτωσης της σελίδας.
Κατά τη δημιουργία ιστοσελίδων, τα γραφικά χρησιμοποιούνται συχνότερα. Μορφές PNG, GIF και JPEG και για εργασίες σχεδίασης με εικόνες - επεξεργαστής γραφικώνΤο Adobe Photoshop, το οποίο διαθέτει πλούσιες επιλογές για συμπίεση και αλλαγή μεγέθους εικόνων χωρίς απώλεια ποιότητας, κάτι που είναι απίστευτα σημαντικό για την ανάπτυξη ιστού.
Πώς να εισαγάγετε μια εικόνα σε HTML;
Για να εισαγάγετε μια εικόνα σε μια σελίδα HTML, χρησιμοποιείται μια απλή ετικέτα:
,
όπου xxx είναι η διεύθυνση της εικόνας. Σε περίπτωση που η εικόνα βρίσκεται στον ίδιο κατάλογο με τη σελίδα, η ετικέτα θα μοιάζει με αυτό:
Ωστόσο, το υψηλής ταχύτητας και σταθερό Διαδίκτυο δεν έχει φτάσει ακόμη σε όλες τις γωνιές του πλανήτη και συμβαίνει ότι η εικόνα στον ιστότοπο απλά δεν φορτώνει. Για τέτοιες περιπτώσεις, υπάρχει η έννοια του εναλλακτικού κειμένου.
Εμφανίζεται στη θέση της εικόνας τη στιγμή της μη διαθεσιμότητας, φόρτωσης ή στη λειτουργία "χωρίς εικόνες" του προγράμματος περιήγησης. Προστίθεται χρησιμοποιώντας το χαρακτηριστικό alt της ετικέτας. .
Ένα παράδειγμα προσθήκης εναλλακτικού κειμένου σε ένα αρχείο γραφικών:
Εκχώρηση μεγεθών εικόνας σε HTML
Για να αλλάξετε τις διαστάσεις εμφάνισης ενός αρχείου εικόνας, χρησιμοποιήστε τις ετικέτες ύψους και πλάτους, όπου το ύψος είναι το ύψος και το πλάτος το πλάτος, μετρημένο σε pixel.
Όταν χρησιμοποιεί αυτά τα χαρακτηριστικά, το πρόγραμμα περιήγησης αρχικά εκχωρεί χώρο για γραφικό περιεχόμενο, προετοιμάζει τη γενική διάταξη της σελίδας, εμφανίζει το κείμενο και, στη συνέχεια, φορτώνει την ίδια την εικόνα.
Η εικόνα τοποθετείται σε ένα ορθογώνιο με καθορισμένες διαστάσεις και εάν οι παράμετροι είναι μικρότερες ή μεγαλύτερες από τις αρχικές, η εικόνα τεντώνεται ή συμπιέζεται.
Εάν δεν χρησιμοποιούνται τα χαρακτηριστικά ύψους και πλάτους, το πρόγραμμα περιήγησης φορτώνει την εικόνα αμέσως, καθυστερώντας την εμφάνιση κειμένου και άλλων στοιχείων σελίδας.
Αυτές οι παράμετροι μπορούν να καθοριστούν τόσο σε pixel (το μέγεθος της εικόνας είναι σταθερό και δεν εξαρτάται από την ανάλυση της οθόνης του χρήστη) όσο και σε ποσοστά (το μέγεθος της εικόνας εξαρτάται από την ανάλυση της οθόνης).
Για παράδειγμα:
Θα πρέπει να θυμόμαστε ότι τη στιγμή που αλλάζετε το αρχικό μέγεθος της εικόνας, είναι απαραίτητο να διατηρήσετε τις αναλογίες της.
Για να γίνει αυτό, αρκεί να καθορίσετε την τιμή μόνο μιας από τις παραμέτρους ( πλάτος ή ύψος), και η τιμή του δεύτερου προγράμματος περιήγησης θα υπολογιστεί αυτόματα.
Τοποθεσία εικόνας σε HTML
Όπως και με πολλούς Ετικέτες HTML, προς την εφαρμόστε το χαρακτηριστικό align, το οποίο ευθυγραμμίζει την εικόνα:
- η εικόνα βρίσκεται πάνω από το κείμενο.
- η εικόνα βρίσκεται κάτω από το κείμενο.
- η εικόνα βρίσκεται στα αριστερά του κειμένου.
- η εικόνα βρίσκεται στα δεξιά του κειμένου.
Σύνδεσμος εικόνας
Αυτό γίνεται ως εξής:
Όπως μπορείτε να δείτε, ένα γραφικό ένθετο μπορεί να είναι ένας σύνδεσμος και, όταν κάνετε κλικ, να ανακατευθύνει σε οποιαδήποτε διεύθυνση γραμμένη σε πλήρη ή συντομευμένη μορφή.
Πώς μπορώ να κάνω μια εικόνα φόντο σε HTML;
Μια εικόνα δεν μπορεί μόνο να εισαχθεί σε μια σελίδα ως ορατό αντικείμενο, αλλά και να γίνει μια εικόνα φόντου. Για να ορίσετε μια εικόνα ως φόντο, πρέπει να προσθέσετε το χαρακτηριστικό background=”xxx” στην ετικέτα, όπου xxx είναι η διεύθυνση της εικόνας, που προσδιορίζεται με τον ίδιο τρόπο όπως στα παραπάνω παραδείγματα.
Για παράδειγμα, ας ορίσουμε την παρακάτω εικόνα υφής ως εικόνα φόντου:
Αποθηκεύστε την εικόνα στο φάκελο με τη σελίδα προετοιμασμένη εκ των προτέρων και γράψτε τις ακόλουθες γραμμές:
Φόντο με κείμενο.
Η εικόνα φόντου στη σελίδα έχει οριστεί.