Δημιουργία μίας one-page responsive πρότυπης ιστοσελίδας με χρήση Bootstrap
- 1. Δημιουργία ενός responsive template με χρήση Bootstrap ΓΕ.Λ. ΠΕΝΤΑΠΟΛΗΣ ΣΧΟΛΙΚΟ ΕΤΟΣ: 2015-16
- 2. Η εργασία υλοποιήθηκε στα πλαίσια του μαθήματος επιλογής της A’ Λυκείου Εφαρμογές Πληροφορικής. Το μάθημα
- 3. Ο στόχος Στόχος της εργασίας ήταν η δημιουργία μίας responsive πρότυπης ιστοσελίδας για παιχνίδια.
- 4. O όρος responsive Μια responsive ιστοσελίδα προσαρμόζεται αυτόματα στις διαστάσεις της οθόνης του υπολογιστή μας.
- 5. O όρος template Template είναι ένα προδιαμορφωμένο site που προορίζεται για συγκεκριμένο περιεχόμενο και εικόνες.
- 6. Εργαλείο συγγραφής Μία εφαρμογή επεξεργασίας πηγαίου κώδικα που αντικαθιστά το Σημειωματάριο και υποστηρίζει πολλές γλώσσες προγραμματισμού.
- 7. To Brackets είναι μία μοντέρνα εφαρμογή επεξεργασίας κώδικα ειδικά σχεδιασμένη για την δημιουργία ιστοσελίδων. Εργαλείο συγγραφής
- 9. H HTML Η HTML είναι η κύρια γλώσσα σήμανσης για τις ιστοσελίδες και είναι η βασική γλώσσα δόμησης των ιστοσελίδων του Ιστού.
- 10. H CSS Είναι μια γλώσσα που μας βοηθάει να ορίσουμε τον τρόπο με τον οποίο θα εμφανίζονται τα διάφορα στοιχεία στην ιστοσελίδα μας.
- 11. Το Bootstrap To Bootstrap είναι μία συλλογή εργαλείων ανοιχτού κώδικα για τη δημιουργία ιστοσελίδων και διαδικτυακών εφαρμογών.
- 12. Ο κώδικας του navigation bar
- 13. Ο κώδικας του Carousel
- 14. Ο κώδικας CSS του navigation bar Ο κώδικας αυτός θέτει το μέγιστο μέγεθος της εικόνας σε 100% ενώ το πρόγραμμα περιήγησης ρυθμίζει αυτόματα το κενό ανάμεσα στα στοιχεία (margin)
- 15. Ο κώδικας αυτός ορίζει την θέση του Footer και δημιουργεί ένα βελάκι, με κλικ στο οποίο ο επισκέπτης μεταφέρεται στο πάνω μέρος της ιστοσελίδας. Ο κώδικας του Footer
- 16. Media Queries Τα media queries χρησιμοποιούνται για να ορίσουν διαφορετικούς κανόνες στυλ για διαφορετικούς τύπους συσκευών.
- 17. Google Maps Με τον παραπάνω κώδικα προστέθηκαν Google Maps στο footer της ιστοσελίδας.
- 18. Animation Τέλος, στην ιστοσελίδα προστέθηκαν και animations για καλύτερο αισθητικό αποτέλεσμα. CSS HTML
- 23. Στιγμιότυπο #5/Η ομάδα, Download