εταιρική εικόνα ως σύνθετη διαδικασία, απόδειξης και τοποθέτησης διαμέσου μίας μελέτης περίπτωσης,
Δημιουργία μίας one-page responsive πρότυπης ιστοσελίδας με...
Transcript of Δημιουργία μίας one-page responsive πρότυπης ιστοσελίδας με...
Δημιουργία ενός 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% ενώ το πρόγραμμα
περιήγησης ρυθμίζει αυτόματα το κενό ανάμεσα
στα στοιχεία (margin)
Ο κώδικας αυτός ορίζει την θέση του Footer και δημιουργεί ένα βελάκι, με κλικ στο οποίο ο επισκέπτης
μεταφέρεται στο πάνω μέρος της ιστοσελίδας.
Ο κώδικας του 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
Σας ευχαριστούμε!