Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Δημιουργία ενός responsive
template με χρήση Bootstrap
ΓΕ.Λ. ΠΕΝΤΑΠΟΛΗΣ
ΣΧΟΛΙΚΟ ΕΤΟΣ: 2015-16
Η εργασία υλοποιήθηκε στα
πλαίσια του μαθήματος
επιλογής της A’ Λυκείου
Εφαρμογές Πληροφορικής.
Το μάθημα
Ο στόχος
Στόχος της εργασίας ήταν η
δημιουργία μίας responsive
πρότυπης ιστοσελίδας για
παιχνίδια.
O όρος responsive
Μια responsive ιστοσελίδα
προσαρμόζεται αυτόματα
στις διαστάσεις της οθόνης
του υπολογιστή μας.
O όρος template
Template είναι ένα
προδιαμορφωμένο site που
προορίζεται για συγκεκριμένο
περιεχόμενο και εικόνες.
Εργαλείο συγγραφής
Μία εφαρμογή επεξεργασίας
πηγαίου κώδικα που
αντικαθιστά το Σημειωματάριο
και υποστηρίζει πολλές
γλώσσε...
To Brackets είναι μία
μοντέρνα εφαρμογή
επεξεργασίας κώδικα ειδικά
σχεδιασμένη για την
δημιουργία ιστοσελίδων.
Εργαλείο συ...
Οι γλώσσες προγραμματισμού
H HTML
Η HTML είναι η κύρια
γλώσσα σήμανσης για τις
ιστοσελίδες και είναι η
βασική γλώσσα δόμησης
των ιστοσελίδων του Ιστο...
H CSS
Είναι μια γλώσσα που μας
βοηθάει να ορίσουμε τον
τρόπο με τον οποίο θα
εμφανίζονται τα διάφορα
στοιχεία στην ιστοσελ...
Το Bootstrap
To Bootstrap είναι μία συλλογή
εργαλείων ανοιχτού κώδικα
για τη δημιουργία ιστοσελίδων
και διαδικτυακών εφαρμ...
Ο κώδικας του navigation bar
Ο κώδικας του Carousel
Ο κώδικας CSS του navigation bar
Ο κώδικας αυτός θέτει το
μέγιστο μέγεθος της εικόνας
σε 100% ενώ το πρόγραμμα
περιήγησης ...
Ο κώδικας αυτός ορίζει την θέση του Footer και
δημιουργεί ένα βελάκι, με κλικ στο οποίο ο επισκέπτης
μεταφέρεται στο πάνω ...
Media Queries
Τα media queries
χρησιμοποιούνται για να
ορίσουν διαφορετικούς
κανόνες στυλ για
διαφορετικούς τύπους
συσκευώ...
Google Maps
Με τον παραπάνω κώδικα προστέθηκαν
Google Maps στο footer της ιστοσελίδας.
Animation
Τέλος, στην ιστοσελίδα
προστέθηκαν και animations
για καλύτερο αισθητικό
αποτέλεσμα.
CSS HTML
Στιγμιότυπο #1/Carousel
Στιγμιότυπο #2/Πληροφορίες
Στιγμιότυπο #3/Επιπλέον δράσεις
Στιγμιότυπο #4/Χαρακτηριστικά
Στιγμιότυπο #5/Η ομάδα, Download
Στιγμιότυπο #6/ Eπικοινωνία
Στιγμιότυπο #7/Χάρτες Google
Στιγμιότυπο #8/ Footer
Σας ευχαριστούμε!
Upcoming SlideShare
Loading in …5
×

Δημιουργία μίας one-page responsive πρότυπης ιστοσελίδας με χρήση Bootstrap

575 views

Published on

Εργασία μαθητών για το 8ο Μαθητικό Συνέδριο Πληροφορικής. Αφορά τη δημιουργία μίας one-page responsive πρότυπης ιστοσελίδας με χρήση Bootstrap

Published in: Education
  • Be the first to comment

  • Be the first to like this

Δημιουργία μίας one-page responsive πρότυπης ιστοσελίδας με χρήση Bootstrap

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

×