Κατασκευή ιστοσελίδων για αρχάριους ΜΑΘΗΜΑ 4ο – Τελευταίο

Κατασκευή ιστοσελίδων για αρχάριους

ΜΑΘΗΜΑ 4ο – NVU(http://net2.com/nvu/) – Τελευταίο

 

Θα προσπαθήσουμε να συγκεντρώσουμε όλα όσα παρουσιάσαμε στα προηγούμενα τρία μαθήματα έτσι ώστε να δημιουργήσουμε ένα ολοκληρωμένο παράδειγμα κατασκευής ιστοσελίδων όσο αυτό μπορεί να γίνει στα πλαίσια τεσσάρων μαθημάτων. Επομένως, θα δημιουργήσουμε μια πολύ απλή ιστοσελίδα αφιερωμένη στη πόλη της Θεσσαλονίκης.

Το έργο μας θα αποτελείται από δύο αρχεία, το index.html και το contact.html. Το πρώτο θα παρουσιάζει κάποιες πληροφορίες για τη Θεσσαλονίκη και το δεύτερο θα περιέχει μια φόρμα επικοινωνίας.

Ξεκινώντας από το πρώτο αρχείο, θα δημιουργήσουμε ένα πίνακα διαστάσεων 2×2 ο οποίος θα χρησιμεύσει στη διάταξη των περιεχομένων της ιστοσελίδας μας. Ο πίνακας αυτό έχει ύψος 500 pixels και πλάτος 950 pixels, πάχος περιγράμματος(border) 1 pixel και η απόσταση μεταξύ του περιεχομένου και του περιγράμματος των κελιών(padding) αλλά και η απόσταση μεταξύ των κελιών είναι 2 pixels (Εικόνα 1).

 

Το κελί στη πρώτη γραμμή και στήλη περιέχει μια εικόνα της πόλης η οποία θα είναι το logo της ιστοσελίδας μας. Στη συνέχεια, το κελί στη πρώτη γραμμή και δεύτερη στήλη περιέχει το τίτλο “Θεσσαλονίκη”. Προσαρμόζουμε κάθε φορά το μέγεθος των κελιών έτσι ώστε να είναι σχετικό με τα περιεχόμενα των κελιών (Εικόνα 2).

 

Το κελί στη δεύτερη γραμμή και πρώτη στήλη περιέχει το μενού  με τους συνδέσμους οι οποίοι αποτελούν τον τρόπο μετάβασης από το ένα αρχείο στο άλλο. Το μενού περιλαμβάνει τις λέξεις “Αρχική” και  “Επικοινωνία” στις οποίες θα εισάγουμε υπερσυνδέσεις (links), η πρώτη θα δείχνει στο αρχείο index.html και η δεύτερη contact.html. Το επόμενο κελί που βρίσκεται στη δεύτερη γραμμή και στήλη περιέχει τις πληροφορίες για τη πόλη της Θεσσαλονίκης. Οι πληροφορίες αυτές περιλαμβάνουν κείμενο και μια εικόνα. Επομένως, μέσα σε αυτό το κελί θα δημιουργήσουμε και έναν ακόμα πίνακα με δύο γραμμές και δύο στήλες. Στη πρώτη γραμμή και στήλη του ένθετου πίνακα εισάγουμε την εικόνα που μας ενδιαφέρει. Στο διπλανό κελί θα εισάγουμε τις πληροφορίες που επιθυμούμε, το κείμενο δηλαδή. Επειδή το κείμενο μας είναι αρκετά μεγάλο και αυξάνεται για το λόγο αυτό αρκετά το μέγεθος της τρέχουσας γραμμής, μπορούμε να μεταφέρουμε κομμάτι από το κείμενο αυτό στην επόμενη γραμμή. Συνεπώς, στη δεύτερη γραμμή συγχωνεύουμε τα δύο κελιά και εισάγουμε το κείμενο που επιλέξαμε πριν να μεταφέρουμε. Κάτω από το συγκεκριμένο πίνακα θα εισάγουμε ακόμα ένα πίνακα 9 γραμμών και 2 στηλών. Σε αυτό το πίνακα θα εισάγουμε κατάλληλα κάποιες γενικές πληροφορίες για τη Θεσσαλονίκη, οι οποίες φαίνονται παραπάνω. Όπως καταλαβαίνουμε ο ρόλος των πινάκων στο σχεδιασμό ιστοσελίδων είναι καθοριστικός, όλη η διάταξη της ιστοσελίδας μας βασίζεται σε πίνακες.

Στο δεύτερο αρχείο θα δημιουργήσουμε μια φόρμα επικοινωνίας μέσω της οποίας οι χρήστες θα μπορούν να αποστείλουν τα σχόλια τους σε κάποιο e-mail που θα ορίσουμε εμείς. Για εξοικονόμηση χρόνου αλλά και κόπου μπορούμε να δημιουργήσουμε ένα αντίγραφο του αρχικού μας αρχείου και να το μετονομάσουμε σε contact.html. Θα διατηρήσουμε την δομή του αρχικού αρχείου και το μόνο που θα κάνουμε είναι να διαγράψουμε τα δεδομένα του κελιού της δεύτερης γραμμής και στήλης του κεντρικού πίνακα της ιστοσελίδας μας. Σε αυτό το κελί θα εισάγουμε πρώτα μια φόρμα όπως κάναμε στο 3ο μάθημα και μέσα στη φόρμα αυτή θα εισάγουμε ένα πίνακα 6 γραμμών και 2 στηλών. Συγχωνεύουμε τα κελιά της πρώτης γραμμής και γράφουμε μέσα στο κελί αυτό το κείμενο “Συμπληρώστε τα στοιχεία σας” (Εικόνα 3).

 

Στη συνέχεια στα κελιά της πρώτης στήλης του καινούριου πίνακα εισάγουμε κατάλληλους τίτλους έτσι να είναι ξεκάθαρα τα στοιχεία που επιθυμούμε να συμπληρώσει ο χρήστης. Τα στοιχεία αυτά αφορούν το όνομα, επίθετο, e-mail του χρήστη και τέλος υπάρχει η δυνατότητα για τη προσθήκη σχολίων από το χρήστη. Επομένως, στη δεύτερη στήλη εισάγουμε τα πεδία τύπου textbox ενώ το τελευταίο είναι textarea έτσι ώστε ο χρήστης να έχει τη δυνατότητα να εισάγει σχόλια τα οποία εκτείνονται σε παραπάνω από μια γραμμή. Τέλος, συγχωνεύουμε τα κελιά της τελευταίας γραμμής και εισάγουμε ένα πλήκτρο(button) με τίτλο “Αποστολή”.

Στόχος μας είναι όταν ο χρήστης θα κάνει κλικ στο πλήκτρο αυτό να αποστέλλεται e-mail με τα στοιχεία που έχει συμπληρώσει.

Για να γίνει αυτό θα πρέπει να μεταφερθούμε σε προβολή κώδικα (Source View) στο NVU και να αναζητήσουμε τη γραμμή:

<form name=”form1″ method=”post” action=” “> και τη συμπληρώνουμε κατάλληλα

<form name=”form1″ method=”post”  action=”mailto:glavelis@pc-news.gr“> (Εικόνα 4).

 

Πλέον ανοίγει το προεπιλεγμένο πρόγραμμα ηλεκτρονικής αλληλογραφίας του χρήστη και στο σώμα κειμένου έχει τις επιλογές του χρήστη (Εικόνα 5). Αν συμπληρώσετε τα πεδία της φόρμας και κάνετε κλικ στο πλήκτρο “Αποστολή” και έχετε για προεπιλεγμένο πρόγραμμα ηλεκτρονικής αλληλογραφίας το Thunderbird τότε θα δείτε κάτι σαν και αυτό. Ελπίζω αυτή η μικρή σειρά μαθημάτων για κατασκευή ιστοσελίδων να ήταν δημιουργική και ευχάριστη όσο ήταν και για μένα.

 

 

Θεμιστοκλής Γλαβέλης

Υποψήφιος Διδάκτωρ Πληροφορικής

glavelis@pc-news.gr

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *