Οι φόρμες χρησιμοποιούνται για τη συλλογή πληροφοριών από τον χρήστη και όχι μόνο. Υπάρχουν πολλά αντικέιμενα που μπορούμε να εισάγουμε σε μία φόρμα τα οποία θα δούμε παρακάτω. Τα αντικέιμενα της φόρμας βρίσκονται στην καρτέλα forms. Κάθε αντικείμενο έχει και τις δικές του ιδιότητες. Σε όλα τα αντικέμενα το όνομα του είναι αυτό που βλέπει ο παραλήπτης σαν ετικέτα και κατόπιν ακολούθει το value δηλαδή αυτό που έχει εισάγει ο χρήστης.



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



Form name: Ορίζουμε το όνομα της φόρμας
Action: Εισάγουμε μία εντολή με την οποία θα επεξεργαστεί η φόρμα σε ένα αρχείο που βρίσκεται στον server. Μία ενδεικτική τέτοια εντολή είναι: /cgi-bin/FormMail.pl
Target: Ορίζουμε το πλαίσιο που θα ανοίγει η φόρμα. Αυτό θα το δούμε αναλυτικά σε επόμενο κεφάλαιο. Για την ώρα λέμε ότι η επιλογή blank ανοίγει τη φόρμα σε νέο παράθυρο του browser.
Method: Ορίζουμε αν η φόρμα θα διαβάζει απλά τα δεδομένα ή θα τα εισάγει σε ειδικές εντολές. Κρατάμε την επιλογή post.
Enctype: Επιλογή εκτέλεσης φόρμας με έτοιμα πρότυπα.

TextField
Το TextField χρησιμοποιείται αν θέλουμε ο χρήστης να εισάγει μόνο μία γραμμή κειμένου (όνομα, διεύθυνση κ.α.)



TextField: Ορίζουμε το όνομα του textfield. Είναι απαραίτητο διότι αν έχουμε πολλά TextFields δεν θα μπορούμε να ξεχωρίσουμε το τι ακριβώς θα γράφεται μέσα.
Char Width: Ορίζουμε το μήκος του TextField βάση των πόσων χαρακτήρων θέλουμε να είναι ορατοί.
Max Chars: Ορίζουμε το πλήθος των χαρακτήρων που μπορεί να γράψει ο χρήστης. Αν είναι περισσότεροι από το Char Width τότε αυτοί δεν εμφανίζονται αλλά εκτυπώνονται στο αποτέλεσμα της φόρμας.
Type: Single line το textfield έχει μία μόνο γραμμή.
Multiline το textfield έχει πολλαπλές γραμμές.
Password το textfield εμφανίζει αστερίσκους κατά την πληκτρολόγηση.
Init Val: Ορίζουμε ένα κείμενο το οποίο θα φαίνεται κατά την φόρτωση από τον browser μέσα στο textfield

HiddenField



Το HiddenField ορίζει παραμέτρους αποστολής της φόρμας. Συνήθως χρησιμοποιούμε 3:
Hiddenfield name:recipient Value: Ορίζουμε σε ποιο e-mail θα αποσταλεί η φόρμα μετά την εκτέλεση της.
Hiddenfield name:subject Value:Ορίζουμε τι θέλουμε να γράφει στο θέμα του επεξεργαστή e-mail.
Hiddenfield name: redirect Value: Ορίζουμε σε ποια διεύθυνση θα κατευθυνθεί ο browser μετά την αποστολή της φόρμας.
Τα HiddenFields μπορεί να είναι τοποθετημένα οπουδήποτε αρκεί να είναι μέσα στα πλαίσια της φόρμας.

Textarea
Το Textarea χρησιμοποιείται αν θέλουμε ο χρήστης να εισάγει μεγάλα μπλοκ κειμένου (σχόλια, σημειώσεις κ.α.) Το Textarea έχει τις ίδιες ιδιότητες με το textfield μόνο που ενεργοποιείται και η επιλογή wrap, δηλαδή η αναδίπλωση του κειμένου όταν αυτό φτάσει στα όρια του Textarea. Οι επιλογές που υπάρχουν είναι:
Off : Το κείμενο δεν αναδιπλώνεται και συνεχίζει να γράφεται στην ίδια γραμμή.
Virtual: Το κείμενο αναδιπλώνεται μόλις φτάσει στα όρια του Textarea αλλά στην πραγματικότητα αυτό είναι εικονικό αφού ο παραλήπτης βλέπει τα περιεχόμενα του Textarea σε μία συνεχόμενη γραμμή.
Physical: Το κείμενο αναδιπλώνεται μόλις φτάσει στα όρια του Textarea και ο παραλήπτης βλέπει αυτό ακριβώς που έγραψε ο χρήστης σε ξεχωριστές γραμμές
Επίσης ενεργοποιείται και η επιλογή Num Lines που σημαίνει πόσες γραμμές θα έχει το Textarea.

Checkbox



Το Checkbox χρησιμοποιήται αν θέλουμε ο χρήστης να έχει τη δυνατότητα να επιλέξει πολλές από τις επιλογές που θα του έχουμε θέσει.
Checkbox name: Ορίζουμε το όνομα του ενός ή της ομάδας των Checkboxes που θα τοποθετήσουμε. Αν πρόκειται για ομάδα ομοειδών επιλογών τότε χρησιμοποιύμε το ίδιο όνομα.
Checked Value: Ορίζουμε την τιμή που θα έχει το Checkbox ανάλογα την ετικέτα που θα έχει.
Initial State: Ορίζουμε αν το Checkbox θα είναι τσεκαρισμένο ή όχι.

Radiobutton



Το Radiobutton έχει ακριβώς τις ίδιες ιδιότητες με το Checkbox μόνο που ο χρήστης μπορεί να επιλέξει μόνο μία από τις επιλογές που θα του έχουμε θέσει.

Radiobutton Group



Στο RadioButton Group ορίζουμε ότι και στο Radiobutton μόνο που εδώ επιλέγουμε πόσα Radiobutton θα τοποθετηθούν και με ποιο τρόπο.

List/Menu



Στο List/Menu έχουμε τη δυνατότητα να δημιουργήσουμε μία σειρά από επιλογές που θα εμφανίζονται με τη μορφή αναπτυσσόμενου μενού ή κουτί λίστας. Η διαφόρα είναι ότι στη λίστα μπορούμε να τσεκάρουμε περισσότερες από μία επιλογές.
List/Menu Name: Ορίζουμε το όνομα του List/Menu.
Type: Ορίζουμε αν θα είναι λίστα ή μενού.
Height: Ενεργοποιήται μόνο στη λίστα και ορίζουμε από πόσες γραμμές θα αποτελείται η λίστα.
Selections: Ενεργοποιήται μόνο στη λίστα και ορίζουμε και ορίζουμε αν ο χρήστης θα έχει δυνατότητα πολαπλών επιλογών.
Initially Selected: Ορίζουμε αν θα είναι κάποια επιλογή προεπιλεγμένη.

List Values: Ορίζουμε την ετικέτα της επιλογής στο label δηλαδή αυτό που θα βλέπει ο χρήστης και την τιμή στο value δηλαδή αυτό που θα παραλαμβάνει ο παραλήπτης.



Jumpmenu



Με το Jumpmenu δημιουργούμε ένα μενού από επιλογές έτσι ώστε όταν ο χρήστης επιλέγει μία από αυτές τις επιλογές να τον κατευθύνει σε ένα άλλο URL.

Image Field
Με το Image Field εισάγουμε μία εικόνα η οποία λειτουργεί ως κουμπί για να εκτελεί κάποιες εντολές.

File Field



Με το File Field τοποθετούμε ένα πεδίο μέσα από το οποίο ο χρήστης θα μπορέσει να κάνει αναζήτηση κάποιου αρχείου του από τον σκληρό του δίσκο ώστε να το ανεβάσει στον server.

Button



Με τα Buttons ο χρήστης εκτελεί κάποιες ενέργειες της φόρμας.
Button Name: Ορίζουμε το όνομα του Button.
Label: Ορίζουμε την ετικέτα δηλαδή τι θα γράφει πάνω του το button.
Action: Ορίζουμε την ενέργεια που θα εκτελέσει το Button. Submit-Αποστολή, Reset-Καθαρισμός της φόρμας, None-καμία ενέργεια.

Validate Form / Επικύρωση της φόρμας



Η επικύρωση της φόρμας, μας βοηθάει στο να βεβαιωθούμε ότι ο χρήστης έχει συμπληρώσει τη φόρμα σωστά. Πρέπει να προσαρτήσουμε την συμπεριφορά (behavior) πάνω στο κουμπί αποστολής ώστε πριν φύγει η φόρμα να ελεγχθεί. Πρώτα επιλέγουμε το κουμπί αποστολής και έπειτα πηγαίνουμε στο μενού Window – Behaviors. Εκεί πατάμε το κουμπί add behavior που συμβολίζεται με ένα +. Από τη λίστα επιλέγουμε Validate form. Στο παράθυρο που ανοίγει βλέπουμε όλα τα text box που έχουμε χρησιμοποιήσει στη φόρμα.
Η επιλογή Required σημαίνει ότι αυτό το πεδίο πρέπει υποχρεωτικά να συμπληρωθεί. Η επιλογή accept ορίζει τι πρέπει να πληκτρολογήσει ο χρήστης στα πεδία:
Anything: Σημαίνει ότι μπορεί να πληκτρολογήσει οποιονδήποτε χαρακτήρα.
Number: Σημαίνει ότι πρέπει υποχρεωτικά πρέπει να πληκτρολογήσει αριθμό σ’ αυτό το πεδίο.
Email Address: Σημαίνει ότι πρέπει υποχρεωτικά πρέπει να πληκτρολογήσει ένα email σ’ αυτό το πεδίο. Εδώ ελέγχεται ο χαρακτήρας @ εάν υπάρχει.
Νumber from … to …: Σημαίνει ότι πρέπει υποχρεωτικά πρέπει να πληκτρολογήσει αριθμό μέσα σε ένα εύρος αριθμών που θα έχουμε ορίσει.
Έτσι τώρα μόλις πατήσει το κουμπί αποστολής ο χρήστης η φόρμα θα ελεγχθεί. Αν κάποιο πεδίο δεν πληρεί τις προϋποθέσεις που έχου ορίσει τότε θα βγάλει μήνυμα λάθους και θα ενημερώνει το χρήστη που έχει κάνει λάθος. Συνήθως τα υποχρεωτικά πεδία Required τα σημειώνουμε με ένα αστερίσκο δίπλα τους.

Ιδιότητες / Properties

Κάθε αντικείμενο που χρησιμοποιούμε στο Dreamweaver έχει ιδιότητες. Αυτές βρίσκονται στο κάτω μέρος του παραθύρου. Βασική προϋπόθεση επεξεργασίας είναι το αντικείμενο να είναι επιλεγμένο για να εμφανιστούν οι αντίστοιχες ιδιότητες. Παρακάτω θα αναλύσουμε όλες τις ιδιότητες των αντικειμένων.

Panels

Τα panels είναι βοηθητικά παράθυρα που εμφανίζονται στην δεξιά πλευρά του παραθύρου και εκτελούν διάφορες λειτουργίες. Για να εμφανίσουμε ένα panel το επιλέγουμε από το μενού window.

Menus

Τα menus περιέχουν όλες τις λειτουργίες του Dreamweaver. Ενδεικτικά το μενού insert εισάγει αντικείμενα και το μενού modify τροποποιεί τα αντικείμενα.

Tools

Τα tools μας επιτρέπουν να εκτελόυμε συνηθισμένες εντολές χρησιμοιώντας κάποια κουμπάκια.

Χάρακες και πλέγμα
Οι χάρακες και το πλέγμα ενεργοποιούνται από το μενού view.

Εναλλαγή παραθύρου σχεδίασης και κώδικα

Το πρώτο εικονίδιο μας βάζει σε επεξεργασία κώδικα HTML της σελίδας.
Το δεύτερο εικονίδιο χωρίζει τη οθόνη στα δύο και πάνω δείχνει τον κώδικα HTML και κάτω τη σχεδίαση.
Το τρίτο εικονίδιο μας επαναφέρει στο παράθυρο της σχεδίασης.
Αυτό μας βοηθάει και να δούμε πως λειτουργεί η γλώσσα HTML αλλά και για να κάνουμε διάφορες αλλάγες που δεν γίνονται από το παράθυρο της σχεδίασης.

Προεπισκόπηση / Preview

Αφού δουλεύουμε σε μία σελίδα θα θέλουμε να την δούμε όπως ακριβώς θα φαίνεται στον browser. Πατάμε το παραπάνω εικονίδιο και επιλέγουμε τον browser που θέλουμε να κάνουμε προεπισκόπηση. Για να το κάνουμε πολύ γρήγορα αυτό πατάμε το πλήκτρο F12.

Περισσότεροι browsers
Για να εισάγουμε στο dreaweaver περισσότερους browsers πατάμε Edit-->Preferences-->Preview in browser και πατάμε το σύμβολο +. Έπειτα ακολουθούμε την διαδρομή όπου βρίσκεται το αρχείο .exe για τον εκάστοτε browser. Επίσης μπορούμε να ορίσουμε τον πρωτεύον και τον δευτερεύον browser.

Περισσότερος χώρος
Οποιαδήποτε στιγμή μπορούμε να πατήσουμε το πλήκτρο F4 για να δούμε το παράθυρο του Dreamweaver χωρίς τις περιττές πληροφορίες.

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



1. Ορίζουμε το μέγεθος της επικεφαλίδας.
2. Ορίζουμε τη γραμματοσειρά.
3. Ορίζουμε το μέγεθος της γραμματοσειράς.
4. Ορίζουμε το χρώμα της γραμματοσειράς.
5. Έντονο κείμενο.
6. Πλάγιο κείμενο.
7. Εικονίδια στοίχησης.
8. Ορίζουμε το σύνδεσμο που θα έχει το επιλεγμένο κείμενο.
9. Ανοίγει το παράθυρο browse για να επιλέξουμε το σύνδεσμο.
10. Ορίζουμε το πλαίσιο που θα ανοίγει ο σύνδεσμος. Αυτό θα το δούμε αναλυτικά σε επόμενο κεφάλαιο. Για την ώρα λέμε ότι η επιλογή blank ανοίγει το σύνδεσμο σε νέο παράθυρο του browser.
11. Αρίθμηση και κουκίδες.
12. Εσοχές κειμένου και εξοχές.

Αυτές οι επιλογές μπορούν να λειτουργήσουν μόνο αν υπάρχει επιλεγμένο κείμενο.

Αλλαγές γραμμών και παραγράφων
Στο Dreamweaver όπως και στο Word για να αλλάξουμε μία παράγραφο πατάμε το πλήκτρο Enter ενώ για να αλλάξουμε γραμμή πατάμε τον συνδυασμό Shift+Enter. Στο σημείο αυτό το Dreamweaver τοποθετεί ένα κίτρινο σημαδάκι που γράφει BR και σημαίνει Break. Το σημαδάκι αυτό είναι αόρατο στον Browser.

Σύνδεσμοι / Links
Τα links είναι οι τοποθεσίες εκείνες οι οποίες θα οδηγηθεί ο browser αφού επιλεχθεί η λέξη ή η εικόνα που έχει εντολή link. Τα links χωρίζονται σε 4 κατηγορίες:
• Τα τοπικά links τα οποία είναι σελίδες οι οποίες βρίσκονται στον σκληρό μας δίσκο στον ίδιο φάκελο.
• Τα απομακρυσμένα links τα οποία είναι διευθύνσεις στο Internet και πρέπει να γράφονται στο πεδίο link με όλη τους τη μορφή http://www.somewhere.com.
• Τα e-mail links τα οποία μας οδηγούν σε μία ηλεκτρονική διεύθυνση. Έτσι επιλέγοντας τα ο χρήστης ανοίγει ο επεξεργαστής e-mail που έχει (outlook) και μπορεί να συντάξει e-mail. Για να γίνει αυτό γράφουμε στο πεδίο link mailto:someone@yahoo.com όλο μαζί χωρίς κενά.
• Τα εσωτερικά links ή άγκυρες που θα δούμε παρακάτω.

Άγκυρες / Anchors
Οι άγκυρες μας βοηθάνε να συνδέσουμε τοποθεσίες οι οποίες βρίσκονται μέσα στην ίδια σελίδα. Αυτό γίνεται για να αποφύγουμε να μετακινούμαστε στη σελίδα χρησιμοποιόντας την scrollbar. Οι άγκυρες ορίζονται στο Dreamweaver με ένα κίτρινο αόρατο σημαδάκι με μία άγκυρα πάνω του. Τα βήματα είναι τα εξής:
• Τοποθετούμε μία άγκυρα στο σημείο που θέλουμε να οδηγηθεί ο δείκτης όταν επιλέξουμε τον σύνδεσμο, από το μενού insert-name anchor.
• Ονομάζουμε την άγκυρα με κάτι χαρακτηριστικό της τοποθεσίας.
• Επιλέγουμε το κείμενο ή την εικόνα που θα γίνει σύνδεσμος και στο πεδίο link γράφουμε το όνομα της άγκυρας με μία # μπροστά (#name_of_anchor)
Προσέχουμε να γράψουμε ακριβώς το όνομα της άγκυρας αλλιώς δεν θα λειτουργήσει.
Συνήθως οι σύνδεσμοι βρίσκονται στο πάνω μέρος της σελίδας.
Αφού δούμε ότι δουλεύει τότε πρέπει να δημιουργήσουμε μία άγκυρα που θα μας επιτρέπει να επιστρέψουμε στο πάνω μέρος της σελίδας από εκεί που βρισκόμαστε. Για να γίνει αυτό βάζουμε στο τέλος της τοποθεσίας που βρισκόμαστε μία λέξη που να λέει «πίσω» ή ένα γραφικό με ένα βελάκι που να δείχνει προς τα πάνω. Τοποθετούμε μία άγκυρα με τον ίδιο τρόπο στο πάνω μέρος της σελίδας και της δίνουμε το όνομα «top». Μετά συνδέουμε τη λέξη ή το γραφικό γράφοντας στο πεδίο link «#top»

Τα πλαίσια (frames) μας βοηθάνε να κάνουμε μία διάταξη της σελίδας μας ώστε κάποια από τα περιεχόμενα της σελίδας μας να παραμένουν σταθερά χωρίς να χρειάζεται να ξαναφορτωθούν από τον Browser.
Για να εισάγουμε κάποιο πλαίσιο πηγαίνουμε στην κατρέλα Layout και έπειτα στο προτελευταίο κουμπί.



Έπειτα επιλέγουμε κάποια από τις έτοιμες διατάξεις του Dreamweaver.



Τα πλαίσια αποτελούνται από ξεχωριστές σελίδες, μία για κάθε πλαίσιο συν μία που περιέχει τη διάταξη τους (Frameset). Π.χ. αν έχουμε επιλέξει την 5η περίπτωση τότε θα έχουμε 4 αρχεία HTML. Ένα για αριστερά ένα για δεξιά ένα για κάτω και ένα που θα περιέχει τις πληροφορίες για τη διάταξή τους.



Κάθε πλαίσιο έχει δικές του ιδιότητες καθώς και η διάταξη της σελίδας.



Η παραπάνω εικόνα δείχνει τις ιδιότητες ενός Frameset που έχει οριζόντια διάταξη.
Border: Ορίζουμε αν το Frameset θα έχει ορατά περιγράμματα.
Borders Width: Το πλάτος των περιγραμμάτων
Border Color: Το χρώμα του περιγράμματος.
Row Value: Ορίζουμε το μέγεθος των πλαισίων κατά pixel ή κατά σχετικότητα (Relative). Αν ορίσουμε κατά σχετικότητα τότε το μέγεθος θα αίναι ανάλογο του περιεχομένου της σελίδας. (Όσο πιο πολύ περιεχόμενο τόσο πιο μεγάλο πλαίσιο)
RowCol Selection: Επιλέγουμε για πιο πλαίσιο θα ορίσουμε τις διαστάσεις και τις ιδιότητες.
Τα ίδια ισχύουν και για διάταξη με κάθετη διάταξη
Πλαίσια μπορούμε να δημιουργήσουμε και σύροντας με το ποντίκι από τις άκρες του εγγράφου μας. Η μόνη προϋπόθεση είναι να έχουμε επιλέξει πρώτα μία διάταξη από το Dreamweaver.
Για να διαγράψουμε ένα πλαίσιο αρκεί να επιλέξουμε το περίγραμμά του και να το σύρουμε έξω από το έγγραφο.

Ιδιότητες Πλαισίων



Frame name: Ορίζουμε το όνομα του πλαισίου
Src: Τοποθεσία αποθήκευσης του πλαισίου
Scroll: Ορίζουμε αν θα βγάλει Scrollbar αν τα περιεχόμενα του υπερβαίνουν το μέγεθός του.
No resize: Αν τσεκάρουμε απαγορεύουμε στον χρήστη να του αλλάξει το μέγεθος.
Borders: Ορίζουμε αν το πλαίσιο θα έχει περίγραμμα.
Border color: Ορίζουμε το χρώμα του περιγράμματος
Margin width: Ορίζουμε το περιθώριο του πλαισίου από αριστερά.
Margin height: Ορίζουμε το περιθώριο του πλαισίου από πάνω.
Έτσι αφού έχουμε δημιουργήσει τα πλαίσια μας τότε μπορούμε να δώσουμε στα link μας τα εξής:

Στην επιλογή 10 έχουμε τις εξής επιλογές:



_Blank: Ανοίγει μία συνδεδεμένη ιστοσελίδα σε ένα νέο παράθυρο του Browser.
_Top: Ανοίγει μία συνδεδεμένη ιστοσελίδα σε όλο το παράθυρο του Browser.
_Self: Ανοίγει μία συνδεδεμένη ιστοσελίδα ίδιο παράθυρο ή πλαίσιο που περιέχει τον σύνδεσμο.
_Parent: Αυτή η επιλογή έχει να κάνει όταν έχουμε δημιουργήσει πολλά ένθετα πλαίσια
Επίσης μέσα σε αυτό το μενού υπάρχουν και όλα τα ονόματα των πλαισίων που έχουμε δημιουργήσει. Επιλέγοντας ένα από αυτά η συνδεδεμένη σελίδα θα ανοίξει στο συγκεκριμένο πλαίσιο. (π.χ. αν έχουμε μία σελίδα με ένα πλαίσιο δεξιά ένα αριστερά και ένα πάνω και το αντικείμενο που έχουμε επιλέξει να είναι ο σύνδεσμός μας βρίσκεται στο αριστερό πλαίσιο τότε αν επιλέξουμε η νέα σελίδα να ανοίξει στο δεξιό πλαίσιο ο browser θα ανανεώσει μόνο την δεξια σελίδα και θα εμφανίσει εκεί τη σύνδεσή μας. Όλες οι άλλες σελίδες δεν θα ανανεωθούν.)

Το Dreamweaver είναι ένας επεξεργαστής HTML (Hypertext Markup Language) μέσα στον οποίο μπορούμε να δημιουργήσουμε μία τοποθεσία WEB χωρίς να χρειαστεί να δούμε καθόλου την γλώσσα HTML. Βέβαια αν θέλουμε μας δίνει την δυνατότητα ανά πάσα στιγμή να ελέγχουμε την HTML ώστε να έχουμε μία άποψη για το τι γράφεται εκεί. Το Dreamweaver λειτουργεί με τη μορφή WYSIWYG (What You See Is What You Get) δηλαδή αυτό που βλέπετε, αυτό παίρνετε. Στις παρακάτω σελίδες θα ασχοληθούμε με στατικές σελίδες HTML μια και οι δυνατότητες του προγράμματος είναι απεριόριστες.
Πρώτα απ’ όλα θα ρίξουμε μία ματιά στο παράθυρο του Dreamweaver:



1. Στη γραμμή τίτλου εμφανίζεται το όνομα του προγράμματος, ο τίτλος της σελίδας και το όνομα του αρχείου HTML.
2. Στη γραμμή menu θα βρούμε όλες τις εντολές του προγράμματος.
3. Εδώ εμφανίζονται οι καρτέλες με τις κατηγορίες των αντικειμένων που μπορούμε να εισάγουμε στην σελίδα μας.
4. Εδώ εμφανίζονται τα εικονίδια των κατηγοριών.
5. Εδώ εμφανίζονται όλα τα ανοιχτά έγγραφα που έχουμε.
6. Κουμπιά ελέγχου για τα ανοιχτά έγγραφα.
7. Ειδικά κουμπιά εντολών.
8. Εδώ εμφανίζονται οι χάρακες.
9. Εδώ εμφανίζεται το πλέγμα τοποθέτησης.
10. Εδώ εμφανίζεται η περιοχή εργασίας.
11. Εδώ εμφανίζονται τα κουμπιά εμφάνισης και απόκρυψης των βοηθητικών panels.
12. Εδώ εμφανίζεται ο επιλογέας σήμανσης της γλώσσας HTML.
13. Εδώ εμφανίζονται στατιστικά στοιχεία φόρτωσης και διαφορετικές εμφανίσεις σχετικά με την οθόνη.
14. Εδώ εμφανίζονται οι ιδιότητες των αντικειμένων που χρησιμοποιούνται.
15. Εδώ εμφανίζονται τα βοηθητικά panels.

Ένα HTML αρχείο έχει δύο βασικά κομμάτια
- την Κεφαλή <head>
- το Σώμα <body>
πχ.

Στο <HEAD> βάζουμε ότι έχει σχέση με τον τύπο και την περιγραφή της σελίδας μας, όπως τον τίτλο, την περιγραφή, την κωδικοσελίδα, τις λέξεις κλειδιά, κ.α.

Στο <BODY> βάζουμε όλα όσα θέλουμε να εμφανίσουμε στην οθόνη του επισκέπτη μας.

πχ.
 

Για να αλλάξουμε ή για να εξαλείψουμε το περιθώριο που αφήνει γύρο - γύρο η σελίδα μας θα πρέπει να κάνουμε κάποιες αλλαγές στο tag <body>

Προσθέτουμε αυτό στο <body>

δηλαδή εάν το <body> tag της σελίδας μας δεν είχε τίποτα άλλο θα πρέπει να έχει γίνει

με αυτόν τον τρόπο θα έχουμε περιθώριο 5 pixels στο πάνω και στο αριστερό μέρος ( το κάτω και το δεξή μέρος δεν μπορούμε να τα πειράξουμε )

εάν θέλουμε να εξαλείψουμε το περιθώριο θέτουμε τις παραμέτρους σε 0 δηλ.

Πώς θα κάνω με css, ΜΟΝΟ τα images που είναι links να μην έχουν border; Αν γράψω:

θα πιάσει σε όλα...

Στο head:

Στο κάθε στοιχείο της φόρμας:

πχ:

EDIT:
Ο 3dots μου έδωσε έναν καλύτερο τρόπο που όταν ξαναπατήσεις έξω από τη φόρμα εμφανίζεται το αρχικό value:

πχ:

Η εντολή base ενα χρήσιμο tip
Οταν έχουμε στην σελίδα μας αρκετά links και θέλουμε να ανοίγουν σε νέο παράθυρο.

Όσοι χρησιμοποιούν ΧΗΤΜL και θέλουν να κάνουν validation μπορούν να χρησιμοποιήσουν τον παρακάτω κώδικα αντί του target="_blank"

Δεν είναι τίποτα σημαντικό, απλά είναι ωραίο και χρήσιμο να περνάτε στο email κατευθείαν το Θέμα !

Όταν κάποιος θα πατήσει στο Link για να σας στείλει κάποιο email μέσα απο την σελίδα σας, θα περαστεί αυτόματα το θέμα με τον παρακάτω κώδικα :

Μπορείτε επίσης να βάλετε παραπάνω απο ένα παραλήπτες :

Να στείλετε κάπου ένα αντίγραφο χωρίς να φαίνεται:

Μπορείτε ακόμα να περάσετε κάποιο συγκεκριμένο κείμενο στο body του email :

Και τέλος, άν θέλετε να συνδιάσετε όλα τα παραπάνω, χρησιμοποιήστε το σύμβολο & για να χωρίσετε τις εντολές !

Παράδειγμα :

Η παράμετρος "bordercolor" δεν έχει νόημα μέσα στην οδηγία img, πρέπει να γίνει με ccs.

Αν χρησιμοποιείτε εξωτερικό stylesheet, γράψτε για παράδειγμα:

ή μπορείτε να το βάλετε μέσα στην κεφαλίδα του αρχείου

Χρησιμοποιούμε το όνομα, για να μην ισχύει σε όλες τις εικόνες της σελίδας, αλλά μόνο σε όσες θέλουμε εμείς
- και μπορούμε βεβαια να ορίσουμε διαφορετική εμφάνιση για κάποιο όλλο όνομα/τύπο
εικόνας μέσα στο ίδιο αρχείο
 

Αυτός θα έχει ανοιχτο γκρί (~ασημι/silver) περίγραμμα παχους 2 στιγμών με διακεκομένη γραμμή.

Ο αντίστοιχος κώδικας για τις εικόνες είναι :

και

Μπορούμε ακόμα να βάλουμε το στυλ μέσα στη οδηγία της εικόνας,
.. αν ειναι μόνο μια που θέλουμε έτσι..

Ξερετε καλύτερα γιατί και πότε προτιμάμε εξωτερικο αρχείο ccs - όταν το θέλουμε σε
περισσότερες σελίδες, ή/και επίσης είναι πιο εύκολο να το αλλάξουμε στο μέλλον
ή προτιμάμε να ορίσουμε το στυλ στην κεφαλίδα - όταν το χρησιμοποιούμε μόνο μέσα σε μια σελίδα .. και παλι δεν ειναι τόσο δύσκολο να αλλάξει, αλλά μονο γι αυτή τη σελίδα..

Αν η εικόνα είναι και σύνδεσμος, μπορεί να έχει διαφορετική εμφάνιση πλαισίου (την ρύθμιση για τους συνδέσμους) - ανάλογα με τις προτεραιότητες των ρυθμίσεων.
Νομίζω ότι υπερισχύει η ρύθμιση μέσα στην οδηγία <img ..
αλλά καλύτερα να συμπληρώσει την συγκεκριμένη πληροφορία όποια/ος την ξέρει με σιγουριά.


Τί το θέλουμε το πλαίσιο στις εικόνες ?

Δοκιμάστε να βάλετε μια φωτογραφία που αγαπάτε, με ένα καλό παχύ πλαίσιο (τουλάχιστο 10 στιγμες, εφόσον η φωτογραφία εχει διαστάσεις πάνω από 100.. κι όσο για το χρώμα του πλαισίου.. ή γενικά περίπου 1/10 της μικρότερης διάστασης της φωτό)
Αν η φωτογραφία έχει πολλά ζωηρά χρώμματα δοκιμάστε ένα ουδέτερο γκρι, σε
αντίθεση με τη φωτεινότητα της εικόνας (ανοιχτο αν η εικόνα είναι εντονη/σκούρα, ή σκούρο αν η εικόνα είναι πολυ φωτεινή) - ή όποιο άλλο χρώμα αγαπάτε.. που να μην είναι εχθρικο στην εικόνα.
- ή βεβαια θα ξέρετε τη διαφορα στην εμφάνιση κάθε εικόνας όταν την καδράρουμε..
Δεν είναι για όλες τις εικόνες που θα βάλουμε στις σελίδες μας φυσικά.. αλλα μπορεί να
αναδείξει ορισμένες αγαπημένες μας εικόνες !


Μπορείτε να ορίσετε το χρώμα και ως #ΧΧΨΨΖΖ για λεπτές αποχρώσεις.



Καλά πειράματα !

Πολλές σελίδες όπως και το designhost όταν τις εισάγεις στα «Αγαπημένα» ή στις «Συνδέσεις» εμφανίζουν ένα εικονίδιο από αριστερά διαφορετικό από αυτό του browser σας. Και όταν επισκεφτεί κανείς αυτή τη σελίδα το εικονίδιο φαίνεται και στη γραμμή της διεύθυνσης.



Σ’ αυτό το άρθρο θα δούμε πως μπορούμε να βάλουμε ένα εικονίδιο στη δική μας σελίδα. Έτσι αυτό το άρθρο είναι χωρισμένο σε δύο μέρη: Πρώτον, τη δημιουργία του εικονιδίου και δεύτερον την ενσωμάτωσή του στη σελίδα μας.
Προτού αρχίσετε όμως πρέπει να είστε σίγουροι ότι ο server που φιλοξενεί τη σελίδα σας υποστηρίζει αυτή τη δυνατότητα.

Μέρος Α: Δημιουργία του εικονιδίου

• Τα εικονίδια είναι αρχεία με κατάληξη .ico και έχουν το δικό τους format. Αν και πολλοί πιστεύουν ότι ένα εικονίδιο είναι ένα μετονομασμένο αρχείο bitmap αυτό είναι λάθος. Για τη δημιουργία, λοιπόν, ενός εικονιδίου πρέπει να χρησιμοποιήσουμε το κατάλληλο πρόγραμμα. Εδώ θα χρησιμοποιήσουμε, ίσως, το πιο γνωστό πρόγραμμα στην κατηγορία του, που δεν είναι άλλο από το Axialis IconWorkshop 5.0. Δοκιμαστική έκδοση του προγράμματος θα βρείτε στην ιστοσελίδα του κατασκευαστή http://www.axialis.com.
   
• Αφού ανοίξουμε το IconWorkshop θα επιλέξουμε File -> New -> Icon Project και θα μας ανοίξει ένα νέο παραθυράκι στο οποίο θα εισάγουμε τις εξής ρυθμίσεις:
  
  
  (οι ρυθμίσεις είναι ίδιες ανεξάρτητα με ποιο πρόγραμμα χρησιμοποιείτε)
   
• Το περιβάλλον του IconWorkShop δεν διαφέρει σχεδόν καθόλου από το περιβάλλον οποιουδήποτε προγράμματος ζωγραφικής: Στο κέντρο θα βρείτε τον «καμβά» σας, εκεί δηλαδή όπου θα ζωγραφίσετε το εικονίδιό σας και δεξιά θα βρείτε την παλέττα με τα χρώματα και τα εργαλεία που θα χρησιμοποιήσετε.
   
• Τώρα αφήστε την φαντασία σας ελεύθερη και σχεδιάστε το εικονίδιό σας. Μόνο να θυμάστε πως καλό θα ήταν να χρησιμοποιήσετε τα ίδια χρώματα με αυτά του site σας και ότι το λογότυπο σας θα ήταν ό,τι καλύτερο σ’ αυτή τη περίπτωση. Τα εργαλεία που θα χρησιμοποιήσετε κυρίως είναι το Flood Fill και το Pencil.
   
• Μόλις τελειώσετε αποθηκεύστε το εικονίδιό σας επιλέγοντας File -> Save as. Αποθηκεύστε το σε φάκελο της προτιμήσεώς σας δίνοντάς του όνομα favicon.
  
  Μέρος Β: Ενσωμάτωση στη σελίδα σας
   
• Αρχικά θα χρειαστεί να ανεβάσετε το εικονίδιο στο server που φιλοξενεί τη σελίδα σας. Ανεβάστε το στον βασικό φάκελο στον οποίο έχετε πρόσβαση, ο οποίος συνήθως είναι ο φάκελος που περιέχει το αρχείο index.
   
• Στον Internet Explorer καθώς και στους πιο πολλούς browsers η ύπαρξη του εικονιδίου αρκεί για την εμφάνισή του στα Αγαπημένα. Για πλήρη συμβατότητα όμως με όλους τους browsers εισάγετε αυτό τον κώδικα

  κώδικας:

  <LINK REL="SHORTCUT ICON" HREF="/favicon.ico">

  
  στο head κομμάτι κάθε σελίδας σας.

Αυτά ήταν τα βασικά σημεία που πρέπει να ξέρει κανείς για να βάλει εικονίδιο στη σελίδα του. Καλή επιτυχία!

ΠΟΥ ΝΑ ΒΡΙΣΚΕΤΑΙ ΤΟ ΜΟΥΣΙΚΟ ΑΡΧΕΙΟ
Το καλύτερο και πιο σίγουρο είναι να ανεβάσεις το κομμάτι που θέλεις στον server
που φιλοξενεί το site. Το upload γίνεται όπως γίνεται για οποιοδήποτε άλλο αρχείο
(με την προϋπόθεση πως επαρκεί ο χώρος που σου διατίθεται γιατί η μουσική
είναι "απαιτητική" από την άποψη μεγέθους των αρχείων).
Μιλάω πάντοτε για μουσική σε μορφή mp3.
Σε μορφή mid τα αρχεία είναι μικρά αλλά η μουσική μοιάζει "παιδική".
Αυτό είναι θέμα γούστου.


ΜΕΓΕΘΟΣ ΤΟΥ ΑΡΧΕΙΟΥ
Το να θέλεις να έχεις ένα ολόκληρο μουσικό κομμάτι σαν μουσική υπόκρουση
είναι ουτοπικό για τις σημερινές ταχύτητες του internet. Μπορείς να μειώσεις το
μέγεθος του αρχείου (σε βάρος της ποιότητας) αλλά και πάλι συνήθως το μέγεθος είναι
αρκετά μεγάλο με αποτέλεσμα να χρειάζεται αρκετός χρόνος για να κατεβεί στον
υπολογιστή του επισκέπτη και να το ακούσει.

ΕΠΕΞΕΡΓΑΣΙΑ
Γιαυτό μπορείς να "κόψεις" το κατάλληλο κομμάτι και να το επεξεργαστείς ώστε να ακούγεται
όμορφο και συνεχές (fade in και fade out) και στη συνέχεια να το μετατρέψεις σε mp3
σε συμπίεση 80-120 Kbps ώστε και το μέγεθος να είναι μικρό (να μην υπερβαίνει τα 80-100 KB)
και η ακουστική ποιότητα να είναι αρκετά καλή.
Τώρα πως γίνονται όλα αυτά;
Η επεξεργασία μπορεί να γίνει με τα προγράμματα που συνοδεύουν οποιαδήποτε κάρτα ήχου
(π.χ. για τις κάρτες SoundBlaster είναι το wave studio).
Η μετατροπή σε mp3 μπορεί να γίνει με... άπειρα προγράμματα και μάλιστα freeware.
Το πιο πιθανόν είναι να έχεις το Windows Media Player. Μπορείς μέσα από αυτό
να κάνεις την μετατροπή. Σε περίπτωση όμως που δεν έχεις κανένα κατάλληλο πρόγραμμα
γράφω μερικές διευθύνσεις από όπου μπορείς να κατεβάσεις κάποιον freeware
μετατροπέα σε mp3.
Για το πρόγραμμα FreeRIP 2.51
http://www.tucows.gr/preview/305350.html
Στις παρακάτω διευθύνσεις θα βρεις πολλά προγράμματα που κάνουν γρήγορη εξαγωγή
από CD και μετατροπή σε mp3
http://www.webattack.com/freeware/gmm/fwcdrip.html
http://www.freewarefiles.com/results.php?categoryid=6&subcategoryid=81
Μπορείς βέβαια να ψάξει κανείς λίγο και μόνος του σε site download στην κατηγορία
multimedia-rippers & encoders

ΚΩΔΙΚΑΣ σε htm ή html ΓΙΑ ΜΟΥΣΙΚΗ BACKGROUND
Ο κώδικας για να ακούγεται η μουσική είναι

<bgsound src="ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΒΡΙΣΚΕΤΑΙ ΤΟ ΑΡΧΕΙΟ" loop="-1">

Αυτό το γράφουμε στο τμήμα head της σελίδας htm ή html

Οδηγίες για το "ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΒΡΙΣΚΕΤΑΙ ΤΟ ΑΡΧΕΙΟ"
Αν το μουσικό αρχείο ΔΕΝ βρίσκεται στο ίδιο site τότε πρέπει να γράψουμε
την απόλυτη διεύθυνση. Για παράδειγμα αν βρίσκεται στο www.freestuff.gr στον φάκελο
music και είναι το κομμάτι sasa1 σε μορφή mp3 γράφουμε
"htpp://www.freestuff.gr/music/sasa1.mp3"

Δεν θα πρότεινα όμως αυτή τη λύση για τους παρακάτω λόγους:
1) Συνήθως δεν είναι εύκολο στους πολλούς να ξέρουν την ακριβή απόλυτη διεύθυνση.
Η διεύθυνση δεν είναι πάντοτε αυτή που φαίνεται στη γραμμή διευθύνσεων του browser.
Συνήθως λειτουργεί το εξής: Κάνουμε δεξί κλικ στο αρχείο μουσικής και επιλέγουμε ιδιότητες.
Είναι πιθανόν να φανεί τότε η σωστή απόλυτη διεύθυνση που βρίσκεται το αρχείο.
2) Χρειάζεται επιπλέον χρόνος για να συνδεθεί η σελίδα μας με το άλλο site.
3) Δεν γνωρίζουμε το μέγεθος του μουσικού αρχείου και αυτό σημαίνει πως αν είναι
μεγάλο θα χρειάζεται και μεγάλος χρόνος για να ακουστεί.

Αν το μουσικό αρχείο βρίσκεται στο site μας πρέπει να γράψουμε την σχετική διαδρομή.
Για παράδειγμα αν βρίσκεται στο ίδιο φάκελο που βρίσκεται και η σελίδα html
και είναι το αρχείο sasa1.mp3 γράφουμε
"sasa1.mp3"
Αν βρίσκεται σε άλλο φάκελο (π.χ. στο φάκελο music) και κάτω από τη σελίδα html γράφουμε
"music/sasa1.mp3"
Αν βρίσκεται σε άλλο φάκελο και ένα επίπεδο πάνω από τη σελίδα html
γράφουμε:
"../sasa1.mp3" για δύο επίπεδα πάνω "../../sasa1.mp3" κ.ο.κ.
Για να μην μπερδευτεί βέβαια κάποιος το πιο απλό είναι να βάλει το αρχείο ήχου
στον ίδιο φάκελο με την σελίδα html.

Οδηγίες για το loop="-1"
Εδώ δηλώνουμε πόσες φορές θα παίξει το μουσικό κομμάτι.
Με την τιμή "-1" παίζει συνεχώς. Για να παίξει μία φορά γράφουμε "1", για 2 φορές "2" κ.λ.π.

ΠΩΣ ΘΑ ΠΑΙΖΕΙ Η ΜΟΥΣΙΚΗ ΣΕ ΟΛΕΣ ΤΙΣ ΣΕΛΙΔΕΣ ΤΟΥ SITE
Ένα από τα πιο σημαντικά θέματα.
Ο κώδικας που έδωσα παραπάνω αφορά μόνο τη σελίδα που είναι γραμμένος.
Όσο αυτή εμφανίζεται στην οθόνη μας η μουσική θα παίζει.
Όταν όμως πάμε σε μια άλλη σελίδα (και ένα site είναι μάλλον απίθανο να αποτελείται
από μία μόνο σελίδα) η μουσική θα σταματήσει.
Μια απλή λύση είναι να γράψουμε τον κώδικα σε όλες τις σελίδες. Έτσι θα ακούγεται
η μουσική σε όλες αλλά είναι λύση "κακόγουστη" γιατί με το άνοιγμα κάθε νέας σελίδας
η μουσική ξεκινάει από την αρχή.
Το πρόβλημα λύνεται απλά αλλά απαιτεί μια μικρή εξοικείωση με τα frames.
Μπορούμε να φτιάξουμε ένα αρχικό frame μέσα στο οποίο θα εμφανίζεται η αρχική μας
σελίδα και όλες οι υπόλοιπες σελίδες του site. Για να γίνει αυτό πρέπει στις συνδέσεις
που θα οδηγούν στις άλλες σελίδες να δίνουμε σαν target το same frame (_self).
Τον κώδικα τον γράφουμε στο τμήμα head της σελίδας Frame Page.
Κι επειδή πολλοί έχουν μια "αντιπάθεια" για τα frames η λύση που προτείνω
δεν έχει κανένα από τα μειονεκτήματα που μέχρι τώρα λένε οτι έχουν.
Απλά όλο το site θα εμφανίζεται μέσα σε ένα και μοναδικό frame χωρίς
να αντιλαμβάνεται τίποτα ο επισκέπτης.

Ελπίζω με τα παραπάνω να βοηθήσω κάποιους ή κάποιες.
Αν χρειάζονται διευκρινήσεις με ευχαρίστηση θα προσπαθήσω να απαντήσω.

Να ένας τρόπος για να δίνετε την δυνατότητα στους επισκέπτες σας να κάνουν αυτόματα την σελίδα σας home page ή να την βάζουν αυτόματα στα αγαπημένα τους. (μόνο για Internet Explorer)

Home page

add to favorites