MENOY
ΣΧΕΔΙΑΣΜΟΣ ΙΣΤΟΤΟΠΩΝ
Βήματα Σχεδιασμού Σχολικού ιστότοπου


BHMA 4o: Εισαγωγή περιεχομένου στις σελίδες

Για εισαγωγή περιεχομένου στις σελίδες, επιλέγετε την ετικέτα «Pages/Edit Page» και με τη βοήθεια του μενού εργαλείων επεξεργασίας (toolbar) που φαίνεται πιο κάτω, μπορείτε να εισάγετε και να επεξεργαστείτε κείμενο, φωτογραφίες ή άλλο υλικό που επιθυμείτε να παρουσιάζεται στη σελίδα.



Σημείωση: Για κάθε νέα προσθήκη, αλλαγή ή τροποποίηση, πατήστε «Save updates» για αποθήκευση.

4.1. Εισαγωγή Κειμένου:

Get Simple (8) Εισαγωγή περιεχομένουΓια να εισάγετε κείμενο, πληκτρολογείτε το κείμενο στον κενό χώρο κάτω από το μενού εργαλείωνεπεξεργασίας και το μορφοποιείτε χρησιμοποιώντας τις επιλογές «Formatting Styles», «Paragraph Format», «Font Name» και «Font Size». Όταν ολοκληρώσετε την εισαγωγή κειμένου, πατήστε «Save updates».

4.2. Εισαγωγή Πίνακα:
Get Simple (8) Εισαγωγή περιεχομένουΓια να εισάγετε πίνακα, επιλέξτε το εικονίδιο και από το αναδυόμενο παράθυρο στην ετικέτα «Table Properties» επιλέξτε τον αριθμό των γραμμών (rows) και των στηλών (columns), καθώς και το μέγεθος του περιγράμματος του πίνακα (border). Όταν ολοκληρώσετε την εισαγωγή πίνακα, πατήστε «Save updates».



Get Simple (16) Οδηγίες Χρήσης του Word to Clean HTMLΣημείωση: Σε περίπτωση που έχετε έτοιμο πίνακα με περιεχόμενο σε αρχείο Word (.doc, .docx) ή σε excel (.xls, .xlsx) και επιθυμείτε να τον εισάγετε σε μια σελίδα, μπορείτε να χρησιμοποιήσετε ένα πρόγραμμα μετατροπής σε κώδικα html. Ένα τέτοιο δωρεάν πρόγραμμα υπάρχει διαθέσιμο διαδικτυακά και μπορείτε να το χρησιμοποιήσετε αντιγράφοντας και επικολλώντας το περιεχόμενο του αρχείου word (.doc, .docx) ή excel (.xls, .xlsx) στο παράθυρο «Paste your document here» του διαδικτυακού προγράμματος μετατροπής σε κώδικα html. Το πρόγραμμα θα κάνει την μετατροπή σε κώδικα html και εσείς θα πρέπει να αντιγράψετε τον κώδικα αυτό στο παράθυρο "Source" στη σελίδα που επιθυμείτε να εισάγετε τον πίνακα.
Σχετική βιντεοπαρουσίαση υπάρχει στην ιστοσελίδα "Βοηθήματα για Ιστότοπους".

4.3. Εισαγωγή Φωτογραφίας:
Get Simple (8) Εισαγωγή περιεχομένουΓια να εισάγετε φωτογραφία, επιλέξτε το εικονίδιο και από το αναδυόμενο παράθυρο, στην ετικέτα «Image Info», επιλέξτε «Browse Server» για να προσδιορίσετε την τοποθεσία της φωτογραφίας που θα εισάγετε. Στο παράθυρο «Uploaded Files», επιλέγετε τον φάκελο που έχετε φυλάξει τις φωτογραφίες σας (π.χ. fotografies ή photos) και στη συνέχεια τη φωτογραφία προς σύνδεση. Κάνοντας διπλό κλικ στη φωτογραφία, μπορείτε να δώσετε ρυθμίσεις σχετικά με τις διαστάσεις της (πλάτος, ύψος) και τη θέση της (alignment). Όταν ολοκληρώσετε την εισαγωγή φωτογραφίας, πατήστε «Save updates» για αποθήκευση.



Σημειώσεις:
  • Get Simple (17) Μείωση μεγέθους φωτογραφιών με το Light Image ResizerΚατά την προετοιμασία του υλικού, θα πρέπει να έχετε μειώσει το μέγεθος των φωτογραφιώνσας σε περίπου 800 Χ 600 pixels πριν τις ανεβάσετε στον ιστοχώρο. Ένα δωρεάν πρόγραμμα μείωσης του μεγέθους των φωτογραφιών είναι το Light Image Resizer, το οποίο μπορείτε να κατεβάσετε από τη σελίδα "Χρήσιμα Λογισμικά". Για βοήθημα χρήσης του εν λόγω προγράμματος, συμβουλευθείτε τη βιντεοπαρουσίαση στη ιστοσελίδα "Βοηθήματα για ιστότοπους".
  • Θα πρέπει να έχετε φυλάξει τις φωτογραφίες σε ξεχωριστό φάκελο «photos» ή «fotografies», ενώ όλες τις εικόνες σε ξεχωριστό φάκελο «images».
  • Εννοείται ότι θα πρέπει να έχετε ήδη ανεβάσει τις φωτογραφίες σας στον ιστοχώρο είτε μέσω του Get Simple ή του FTP (βλ. σημείο 4.4), για να μπορέσετε να τις συνδέσετε σε κάποια σελίδα.

4.4. Εισαγωγή Συνδέσμου:

Get Simple (10) Τροποποίηση Sidebar και SplashΓια να συνδέσετε μια λέξη/φράση/φωτογραφία με αρχείο/εικόνα/ιστοτόπο, επιλέγετε τη λέξη/φράση/φωτογραφία και στη συνέχεια το εικονίδιο «Link» .
Στο παράθυρο που εμφανίζεται, στην ετικέτα «Link Info», επιλέγω τον αντίστοιχο τύπο συνδέσμου («Link Type»).


  • Για σύνδεση με αρχεία, στο πεδίο «Link Type» επιλέγετε «URL» και «Browse server». Από το παράθυρο «Uploaded files» που παρουσιάζεται, επιλέγετε το φάκελο (folder) όπου έχετε φυλάξει τα αρχεία σας και στη συνέχεια το αρχείο προς σύνδεση. Για να ανοίγει το αρχείο σε νέο παράθυρο, επιλέξτε την ετικέτα «Target» και στο πεδίο «Target», επιλέξτε «New Window (_blank)». Τέλος, πατήστε «ΟΚ».



  • Για σύνδεση με σελίδα που δημιουργήσατε, στο πεδίο «Link Type» επιλέγετε από το αναδυόμενο μενού «Link to local page» και στο πεδίο «Select Page» επιλέγετε τη σελίδα που θα γίνει η σύνδεση. Τέλος, πατήστε «ΟΚ».



  • Για σύνδεση με ιστότοπο/ιστοσελίδα στο διαδίκτυο, στο πεδίο «Link Type», επιλέγετε URL και στο πεδίο «URL» εισάγετε την ηλεκτρονική διεύθυνση (URL) της ιστοσελίδας στο διαδίκτυο. Για να ανοίγει η ιστοσελίδα σε νέο παράθυρο, επιλέξτε την ετικέτα «Target» και στο πεδίο «Target», επιλέξτε «New Window (_blank)».



  • Για σύνδεση με ηλεκτρονικό ταχυδρομείο, στο πεδίο «Link Type», επιλέγετε «Email» και στο πεδίο «Email Address» εισάγετε το email που θέλετε να γίνει η σύνδεση.



Όταν ολοκληρώσετε την εισαγωγή συνδέσμων, πατήστε «Save updates» για αποθήκευση.

4.5. Προεπισκόπηση σελίδων: Για προεπισκόπηση των σελίδων κάθε φορά που κάνετε κάποια αλλαγή ή/και προσθήκη, επιλέγετε «View».



4.6. Τροποποίηση component sidebar και splashes:
Get Simple (10) Τροποποίηση Sidebar και SplashΤα περισσότερα Πρότυπα ιστότοπου που παρέχονται από την Υπηρεσία περιλαμβάνουν πλαϊνό μενού (sidebar), το οποίο μπορείτε να επεξεργαστείτε. Επιλέγοντας την ετικέτα «Theme», εμφανίζεται η σελίδα «Edit Components» όπου μπορείτε να επεξεργαστείτε τα components «sidebar» και «splashes» τροποποιώντας ή/και εισάγοντας τον σωστό κώδικα στο αντίστοιχο παράθυρο.



  • Για εισαγωγή συνδέσμου σε σελίδα εντός του ιστότοπου του σχολείου, μπορείτε να αντιγράψετε και να επικολλήσετε μέρος του κώδικα που παρέχεται στο sidebar και να κάνετε τις απαραίτητες τροποποίησεις.

    Π.χ. Για προσθήκη νέου συνδέσμου (στο sidebar) στη σελίδα «Σύνδεσμος Γονέων» (εντός του ιστότοπου του σχολείου), ο κώδικας που πρέπει να εισάγετε είναι ο εξής (τον αντιγράφετε από προϋπάρχον κώδικα του sidebar και τον επικολλάτε εκεί που θέλετε να παρουσιάζεται):

    <a href="index.php?id="syndesmos_goneon">Σύνδεσμος Γονέων </a>

    Σημείωση: Το μέρος με έντονα γράμματα αλλάζει ανάλογα με τον τίτλο και το URL της σελίδας που θέλετε να συνδέσετε.

  • Για εισαγωγή συνδέσμου σε ιστότοπο/ιστοσελίδα στο Διαδίκτου, ακολουθείτε τις ίδιες οδηγίες με πιο πάνω, αλλά ανάμεσα στα “ ” θα πρέπει να εισάγετε την ηλεκτρονική διεύθυνση (URL) της ιστοσελίδας που θέλετε.
    Στην περίπτωση αυτή ο κώδικας θα είναι:


    <a href="http://www.syndesmos_goneon.org/index.html" target="_blank">Σύνδεσμος Γονέων</a>

  • Σημείωση: Ο κώδικας target=”_blank” δηλώνει ότι η σελίδα θα ανοίγει σε νέο παράθυρο.
  • Για εισαγωγή κειμένου, απλά πληκτρολογείτε το κείμενο σας στον κενό χώρο.
  • Αφού κάνετε τις απαραίτητες αλλαγές πατήστε «Save Components».

ΕΠΟΜΕΝΟ ΒΗΜΑ

Υπουργείο Παιδείας και Πολιτισμού - Υπηρεσία Διαδικτύου και Επικοινωνίας