.
Με το πρόγραμμα Hot Patatoes μπορούμε να φτιάξουμε ασκήσεις, κουίζ, σταυρόλεξα κτλ. Ένα πράγμα που δε μου άρεσε σ' αυτή την εφαρμογή είναι ότι δεν είναι και πολύ παραμετροποιήσιμη σε ό,τι αφορά την εμφάνιση της ιστοσελίδας που παράγει. Μέσα από την εφαρμογή μπορούμε να αλλάξουμε μόνο μερικά χρώματα και την εικόνα (background) της σελίδας γύρω από το πλαίσιο της άσκησης.
Στα τόσα παραδείγματα ασκήσεων που έχω βρει στο δίκτυο, τα περισσότερα είναι ψυχρά και άχαρα. Κακά τα ψέματα. Αν δεν είναι και λίγο ελκυστική η δραστηριότητα από άποψη εμφάνισης, ο μαθητής θα βαρεθεί γρήγορα. Βέβαια δεν είμαστε όλοι σχεδιαστές για να φτιάξουμε το σούπερ design αλλά από τη γκριζάδα που έχει εξ' ορισμού το πρόγραμμα, σίγουρα θα τα καταφέρουμε καλύτερα.
Με δυο - τρεις μικρές αλλαγές μπορούμε να επέμβουμε δραστικά στην εμφάνιση της άσκησης - ιστοσελίδας μας, παρόλο που το πρόγραμμα δε μας δίνει πάντα αυτή τη δυνατότητα.
Κάντε κλικ εδώ για να δείτε ένα παράδειγμα.
Πώς γίνεται αυτό;
Ανοίγουμε το "Σημειωματάριο" των Windows, πάμε Αρχείο > Άνοιγμα, ψάχνουμε, βρίσκουμε και ανοίγουμε τη σελίδα htm που φτιάξαμε με το Hot Patatoes. Δε θα καθήσω να εξηγήσω τι σημαίνουν όλα αυτά τα "κινέζικα" που θα δείτε (λες και τα ξέρω κι εγώ; με τη μέθοδο της δοκιμής και πλάνης τα βρίσκω) αλλά θα πάμε κατευθείαν στο "ψητό".
Το πρώτο που έψαξα να βρω ήταν το πώς θα κάνω σταθερό το πλάτος της σελίδας (του "παραθύρου" της άσκησης). Ο λόγος είναι ότι με σταθερό πλάτος, το κείμενο ή οι εικόνες αναδιπλώνονται σε όλες τις οθόνες στο ίδιο σημείο, κρατώντας έτσι παντού την ίδια εμφάνιση, που καθορίζουμε εμείς. Το επόμενο ήταν να μπορέσω να βάλω μια εικόνα μέσα στο πλαίσιο της άσκησης μπας και το ομορφύνω λιγάκι.
1) Με τις παρακάτω εντολές αλλάζουμε το μέγεθος του παραθύρου της άσκησης:
Κάτω από την ενότητα "body" (κάπου πιο κάτω από τη γραμμή 30) βάζουμε τις παρακάτω εντολές:
width: 800px;
margin: 0 auto;
Η πρώτη εντολή ρυθμίζει το πλάτος του πλαισίου της άσκησης ώστε να παραμένει σταθερό στα 800 pixels (αν θέλετε το αλλάζετε) ενώ η δεύτερη το κεντράρει.
Λεπτομέρεια:
Αν στην ενότητα "body" υπάρχουν δύο γραμμές σαν τις παρακάτω:
margin-right: 5%;
margin-left: 5%;
τις διαγράφουμε ή (πιο σωστά) τις καθιστούμε ανενεργές. Για να καταστήσουμε ένα τμήμα του κώδικα ανενεργό, βάζουμε στην αρχή του τμήματος το /* και στο τέλος του τμήματος το αντίστροφο */ Δηλ. στο συγκεκριμένο παράδειγμα καθιστούμε τον κώδικα ανενεργό έτσι:
/*margin-right: 5%;
margin-left: 5%;*/
με αυτόν τον τρόπο η εφαρμογή ανάγνωσης ιστοσελίδων (IExplorer ή Firefox) θεωρεί το τμήμα αυτό ως "σχόλιο" και δεν το εκτελεί.
2) Τώρα μπορούμε να ανοίξουμε την ιστοσελίδα μας με ένα πρόγραμμα κατασκευής ιστοσελίδων όπως το Kompozer (free), το Front Page ή το Dreamweaver και να αλλάξουμε μέγεθος, στιλ ή χρώμα στο κείμενο, να πειραματιστούμε αλλάζοντας κάποιες τιμές σε περιθώρια, κάδρα, να βάλουμε κάποια εικόνα μέσα στο πλαίσιο της άσκησης, να την κεντράρουμε κτλ. μέχρι να πετύχουμε το αποτέλεσμα που μας ικανοποιεί.
Αρκετά από αυτά γίνονται και μέσα από την εφαρμογή Hot Potatoes από τη "Διαμόρφωση επιλογών", όπως π.χ. η εικόνα που περιβάλλει το πλαίσιο της άσκησης (ταπετσαρία), μπορεί να καθοριστεί και μέσα απ΄το πρόγραμμα Hot Potatoes πολύ εύκολα από το μενού Επιλογές > Διαμόρφωση επιλογών > Εμφάνιση > στο σημείο που λέει "URL γραφικού φόντου" γράφουμε το όνομα της εικόνας μας που (πάντα) θα πρέπει να βρίσκεται στον ίδιο φάκελο που θα έχουμε και τη σελίδα htm που θα δημιουργήσουμε.
Το ίδιο γίνεται και με την εικόνα μέσα στο παράθυρο της άσκησης: Πηγαίνετε στο μενού Εισαγωγή > Εικόνα.
Σε ό,τι αφορά αρχεία στο Internet, να προτιμάτε να γράφετε τα ονόματα των αρχείων με λατινικούς χαρακτήρες (δια παν ενδεχόμενο) και χωρίς κενά.
Το παρακάτω είναι για μια πιο εξειδικευμένη επέμβαση:
3) Με την παρακάτω αλλαγή βάζουμε εικόνα - ταπετσαρία μέσα στο πλαίσιο της άσκησης:
Κάτω από την ενότητα "div.StdDiv{" (κάπου πιο κάτω από τη γραμμή 80), στην πρώτη γραμμή της ενότητας προσθέτουμε τον κώδικα για την εικόνα μας όπως στο παρακάτω παράδειγμα:
background: url(heikonamas.jpg) repeat;
Στο σημείο που λέει heikonamas.jpg βάζουμε το όνομα της εικόνας η οποία θέλουμε να εμφανίζεται μέσα στο πλαίσιο της άσκησης (θα πρέπει να είναι στον ίδιο φάκελο με την σελίδα της άσκησης). Αν θέλουμε οριζόντια επανάληψη της εικόνας γράφουμε : repeat-x; ή για κάθετη: repeat-y , για τις δύο κατευθύνσεις : repeat; σκέτο. Το no-repeat; σημαίνει χωρίς επανάληψη.
Βέβαια αν είναι να μην λειτουργεί σαν ταπετσαρία η εικόνα μας (με επαναλήψεις), τότε είναι καλύτερα να την βάλουμε "χειροκίνητα" με σύρσιμο και απόθεση στο σημείο που θέλουμε μέσα από ένα πρόγραμμα κατασκευής ιστοσελίδων όπως το Kompozer.
Δείτε το παράδειγμα που ανέφερα και παραπάνω. Η διαφορά με τις προτηγανισμένες πατάτες του προγράμματος είναι εμφανέστατη. Η σελίδα έγινε από αποκρουστική που ήταν, πολύ πιο ευχάριστη.
Ντιζαϊνάτες πατάτες
.
και... προτηγανισμένες πατάτες
.
Όλα τα αρχεία είναι διαθέσιμα για κατέβασμα (παρακάτω). Είναι zip και για να λειτουργήσει πρέπει να αποσυμπιέσετε τα περιεχόμενά του και να ανοίξετε (με διπλό κλικ) το "contents.htm" που βρίσκεται μέσα στο φάκελο "Hpeiros".
Αν ανοίξετε τη σελίδα "01vouna1.htm" με το σημειωματάριο και κοιτάξετε μέσα στον κώδικα τα σχόλια που έχω βάλει στα ελληνικά , θα καταλάβετε πολλά πράγματα.
Ο φάκελος για κατέβασμα: Ντιζαϊνάτες πατάτες.
Είναι ανανεωμένη έκδοση σε σύγκριση με την εικόνα που βλέπετε παραπάνω.
Καλές δημιουργίες
...κι αν τηγανίσετε τίποτα νόστιμες πατάτες, πετάξτε καμία και προς τα δω.
Με το πρόγραμμα Hot Patatoes μπορούμε να φτιάξουμε ασκήσεις, κουίζ, σταυρόλεξα κτλ. Ένα πράγμα που δε μου άρεσε σ' αυτή την εφαρμογή είναι ότι δεν είναι και πολύ παραμετροποιήσιμη σε ό,τι αφορά την εμφάνιση της ιστοσελίδας που παράγει. Μέσα από την εφαρμογή μπορούμε να αλλάξουμε μόνο μερικά χρώματα και την εικόνα (background) της σελίδας γύρω από το πλαίσιο της άσκησης.
Στα τόσα παραδείγματα ασκήσεων που έχω βρει στο δίκτυο, τα περισσότερα είναι ψυχρά και άχαρα. Κακά τα ψέματα. Αν δεν είναι και λίγο ελκυστική η δραστηριότητα από άποψη εμφάνισης, ο μαθητής θα βαρεθεί γρήγορα. Βέβαια δεν είμαστε όλοι σχεδιαστές για να φτιάξουμε το σούπερ design αλλά από τη γκριζάδα που έχει εξ' ορισμού το πρόγραμμα, σίγουρα θα τα καταφέρουμε καλύτερα.
Με δυο - τρεις μικρές αλλαγές μπορούμε να επέμβουμε δραστικά στην εμφάνιση της άσκησης - ιστοσελίδας μας, παρόλο που το πρόγραμμα δε μας δίνει πάντα αυτή τη δυνατότητα.
Κάντε κλικ εδώ για να δείτε ένα παράδειγμα.
Πώς γίνεται αυτό;
Ανοίγουμε το "Σημειωματάριο" των Windows, πάμε Αρχείο > Άνοιγμα, ψάχνουμε, βρίσκουμε και ανοίγουμε τη σελίδα htm που φτιάξαμε με το Hot Patatoes. Δε θα καθήσω να εξηγήσω τι σημαίνουν όλα αυτά τα "κινέζικα" που θα δείτε (λες και τα ξέρω κι εγώ; με τη μέθοδο της δοκιμής και πλάνης τα βρίσκω) αλλά θα πάμε κατευθείαν στο "ψητό".
Το πρώτο που έψαξα να βρω ήταν το πώς θα κάνω σταθερό το πλάτος της σελίδας (του "παραθύρου" της άσκησης). Ο λόγος είναι ότι με σταθερό πλάτος, το κείμενο ή οι εικόνες αναδιπλώνονται σε όλες τις οθόνες στο ίδιο σημείο, κρατώντας έτσι παντού την ίδια εμφάνιση, που καθορίζουμε εμείς. Το επόμενο ήταν να μπορέσω να βάλω μια εικόνα μέσα στο πλαίσιο της άσκησης μπας και το ομορφύνω λιγάκι.
1) Με τις παρακάτω εντολές αλλάζουμε το μέγεθος του παραθύρου της άσκησης:
Κάτω από την ενότητα "body" (κάπου πιο κάτω από τη γραμμή 30) βάζουμε τις παρακάτω εντολές:
width: 800px;
margin: 0 auto;
Η πρώτη εντολή ρυθμίζει το πλάτος του πλαισίου της άσκησης ώστε να παραμένει σταθερό στα 800 pixels (αν θέλετε το αλλάζετε) ενώ η δεύτερη το κεντράρει.
Λεπτομέρεια:
Αν στην ενότητα "body" υπάρχουν δύο γραμμές σαν τις παρακάτω:
margin-right: 5%;
margin-left: 5%;
τις διαγράφουμε ή (πιο σωστά) τις καθιστούμε ανενεργές. Για να καταστήσουμε ένα τμήμα του κώδικα ανενεργό, βάζουμε στην αρχή του τμήματος το /* και στο τέλος του τμήματος το αντίστροφο */ Δηλ. στο συγκεκριμένο παράδειγμα καθιστούμε τον κώδικα ανενεργό έτσι:
/*margin-right: 5%;
margin-left: 5%;*/
με αυτόν τον τρόπο η εφαρμογή ανάγνωσης ιστοσελίδων (IExplorer ή Firefox) θεωρεί το τμήμα αυτό ως "σχόλιο" και δεν το εκτελεί.
2) Τώρα μπορούμε να ανοίξουμε την ιστοσελίδα μας με ένα πρόγραμμα κατασκευής ιστοσελίδων όπως το Kompozer (free), το Front Page ή το Dreamweaver και να αλλάξουμε μέγεθος, στιλ ή χρώμα στο κείμενο, να πειραματιστούμε αλλάζοντας κάποιες τιμές σε περιθώρια, κάδρα, να βάλουμε κάποια εικόνα μέσα στο πλαίσιο της άσκησης, να την κεντράρουμε κτλ. μέχρι να πετύχουμε το αποτέλεσμα που μας ικανοποιεί.
Αρκετά από αυτά γίνονται και μέσα από την εφαρμογή Hot Potatoes από τη "Διαμόρφωση επιλογών", όπως π.χ. η εικόνα που περιβάλλει το πλαίσιο της άσκησης (ταπετσαρία), μπορεί να καθοριστεί και μέσα απ΄το πρόγραμμα Hot Potatoes πολύ εύκολα από το μενού Επιλογές > Διαμόρφωση επιλογών > Εμφάνιση > στο σημείο που λέει "URL γραφικού φόντου" γράφουμε το όνομα της εικόνας μας που (πάντα) θα πρέπει να βρίσκεται στον ίδιο φάκελο που θα έχουμε και τη σελίδα htm που θα δημιουργήσουμε.
Το ίδιο γίνεται και με την εικόνα μέσα στο παράθυρο της άσκησης: Πηγαίνετε στο μενού Εισαγωγή > Εικόνα.
Σε ό,τι αφορά αρχεία στο Internet, να προτιμάτε να γράφετε τα ονόματα των αρχείων με λατινικούς χαρακτήρες (δια παν ενδεχόμενο) και χωρίς κενά.
Το παρακάτω είναι για μια πιο εξειδικευμένη επέμβαση:
3) Με την παρακάτω αλλαγή βάζουμε εικόνα - ταπετσαρία μέσα στο πλαίσιο της άσκησης:
Κάτω από την ενότητα "div.StdDiv{" (κάπου πιο κάτω από τη γραμμή 80), στην πρώτη γραμμή της ενότητας προσθέτουμε τον κώδικα για την εικόνα μας όπως στο παρακάτω παράδειγμα:
background: url(heikonamas.jpg) repeat;
Στο σημείο που λέει heikonamas.jpg βάζουμε το όνομα της εικόνας η οποία θέλουμε να εμφανίζεται μέσα στο πλαίσιο της άσκησης (θα πρέπει να είναι στον ίδιο φάκελο με την σελίδα της άσκησης). Αν θέλουμε οριζόντια επανάληψη της εικόνας γράφουμε : repeat-x; ή για κάθετη: repeat-y , για τις δύο κατευθύνσεις : repeat; σκέτο. Το no-repeat; σημαίνει χωρίς επανάληψη.
Βέβαια αν είναι να μην λειτουργεί σαν ταπετσαρία η εικόνα μας (με επαναλήψεις), τότε είναι καλύτερα να την βάλουμε "χειροκίνητα" με σύρσιμο και απόθεση στο σημείο που θέλουμε μέσα από ένα πρόγραμμα κατασκευής ιστοσελίδων όπως το Kompozer.
Δείτε το παράδειγμα που ανέφερα και παραπάνω. Η διαφορά με τις προτηγανισμένες πατάτες του προγράμματος είναι εμφανέστατη. Η σελίδα έγινε από αποκρουστική που ήταν, πολύ πιο ευχάριστη.
Ντιζαϊνάτες πατάτες
.
και... προτηγανισμένες πατάτες
.
Όλα τα αρχεία είναι διαθέσιμα για κατέβασμα (παρακάτω). Είναι zip και για να λειτουργήσει πρέπει να αποσυμπιέσετε τα περιεχόμενά του και να ανοίξετε (με διπλό κλικ) το "contents.htm" που βρίσκεται μέσα στο φάκελο "Hpeiros".
Αν ανοίξετε τη σελίδα "01vouna1.htm" με το σημειωματάριο και κοιτάξετε μέσα στον κώδικα τα σχόλια που έχω βάλει στα ελληνικά , θα καταλάβετε πολλά πράγματα.
Ο φάκελος για κατέβασμα: Ντιζαϊνάτες πατάτες.
Είναι ανανεωμένη έκδοση σε σύγκριση με την εικόνα που βλέπετε παραπάνω.
Καλές δημιουργίες
...κι αν τηγανίσετε τίποτα νόστιμες πατάτες, πετάξτε καμία και προς τα δω.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου