Δημιουργία ενός 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

Σας ευχαριστούμε!