Ενσωμάτωση εικόνας στο background σελίδας δραστηριοτήτων του Twinspace

Ενσωμάτωση εικόνας στο background

στο Twispace

ΟΔΗΓΟΙ -TWISPACE

Εικόνα background σε σελίδα εργασιών στο νέο Twinspace

Για να μπορέσουμε να βάλουμε μια εικόνα στο background της σελίδας μας θα πρέπει να

την έχουμε ανεβάσει ήδη στο Twinspace του έργου μας. Ας δούμε τι θα κάνουμε:

1

Σε μια άδεια σελίδα ….

2

… η οποία κανονικά με την προσθήκη ενός video

από το YouTube θα έδειχνε έτσι …

3

…θα βάλουμε αυτήν την εικόνα στο background

έτσι ώστε…

4

… να δείχνει έτσι..

5

…ή ανάλογα με το project ή την

δραστηριότητα κάπως έτσι.

Ας δούμε τα βήματα αναλυτικά

Βήμα

Εικόνα Περιγραφή

1ο

Ανεβάζουμε την εικόνα που θα χρησιμοποιήσουμε σαν background στο Twinspace. Οι διαστάσεις της για να φανεί καλά στην σελίδα μας θα πρέπει να είναι το ανώτερο 860 px πλάτος ( το ύψος δεν έχει μεγάλη σημασία)

2ο

Δημιουργούμε την σελίδα της δραστηριότητας

3ο

Σε επεξεργασία html …

4ο <!-- Codes by HTML.am -->

<div style="background-image:url(http://www.html.am/images/image-

Κάνουμε επικόλληση τον διπλανό κώδικα. (

codes/milford_sound_t.jpg);width:860px;height:640px;color:black;font-size:18px;">

This text appears in front of the background image. </div>

αλλιώς σε οποιαδήποτε μηχανή αναζήτησης ψάχνουμε για background image html)

5ο

Στη συνέχεια και αφού ανοίξουμε την εικόνα μας σε προβολή πρωτοτύπου

6ο

Με δεξί κλικ αντιγράφουμε την διεύθυνση της εικόνας (URL)

7ο

<!-- Codes by HTML.am --> <div style="background-

image:url(http://www.html.am/images/image-codes/milford_sound_t.jpg);width:860px;height:640px;color:b

lack;font-size:18px;"> This text appears in front of the background image.

</div>

Και τον κάνουμε επικόλληση στον κώδικα της σελίδας ανάμεσα στις παρενθέσεις όπως φαίνεται δίπλα( στο κόκκινο κομμάτι του κώδικα, χωρίς να σβήσουμε τις παρενθέσεις ή ότι άλλο)

8ο

Επιστρέφοντας σε κανονική επεξεργασία, αν δεν κάναμε κάτι λάθος, θα πρέπει η εικόνα μας να είναι στο background της σελίδας.

9ο

Στη συνέχεια, βάζουμε και το video από το YouTube που επιθυμούμε και η σελίδα μας είναι έτοιμη.

ΚΑΛΗ ΕΠΙΤΥΧΙΑ

Για την Ε.Υ.Υ. Πέτρος Μιχαηλίδης