Εργαστήριο  4: CSS

Άσκηση 1: Background

Να δημιουργήσετε μία σελίδα όπως την παρακάτω:

Η σελίδα χρησιμοποιεί ως background μία φωτογραφία την όποια μπορείτε να βρείτε εδώ. Δεξιά να δημιουργηθεί ένα div με ένα μήνυμα όπως παρουσιάζεται παραπάνω. To html αρχείο σας μπορείτε να το βρείτε εδώ. Εσείς πρέπει να δημιουργήσετε το κατάλληλο CSS.

Άσκηση 2: Διαμόρφωση Πίνακα

Να δημιουργήσετε μία σελίδα στην οποίο θα εμφανίζονται οι πίνακες της κλάσης datatable όπως παρουσιάζεται παρακάτω. Μέσα στην σελίδα, δημιουργείστε και 2ο πίνακα ο οποίος να μην είναι της κλάσης datatable. Ο 2ος πίνακας δεν θα πρέπει να επηρεάζεται από την κλάση datatable.

Μπορείτε να κατεβάσετε τον html κώδικα της datatable από εδώ.

Να ξεχωρίσετε τον css κώδικα και να τον τοποθετήσετε σε ξεχωριστό αρχείο tabledata.css το οποίο θα καλείτε στην σελίδα.

Άσκηση 3: Δημιουργία μενού

Να κατεβάσετε τον κώδικα και τις συνοδευτικές φωτογραφίες που θα βρείτε εδώ και το οποίο βρείτε εδώ και να δημιουργήσετε ένα μενού όπως εμφανίζεται παρακάτω δίνοντας επιλογές τα 8 εξάμηνα σπουδών (πχ. sem1.html, sem2.html κτλ.) σε μία σελίδα που θα ονομάσετε template.html

Σημείωση: Τον κώδικα css θα τον καλείτε ως εξωτερικό αρχείο.

Άσκηση 4: Δημιουργία layout.

Να κατεβάσετε τον κώδικα css τον οποίο βρίσκεται εδώ και να δημιουργήσετε μία σελίδα με την παρακάτω διαμόρφωση χρησιμοποιώντας τον κώδικά του αρχείου css που κατεβάσετε (δεν χρειάζεται επιπλέον κώδικα, ίσως χρειαστεί να τροποποιήσετε 1-2 οδηγίες).

Να ενσωματώσετε τον κώδικα της προηγούμενης άσκησης ώστε να δημιουργηθεί το οριζόντιο μενού στο επάνω μέρος της σελίδας.