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