Anastasis

Οι φόρμες χρησιμοποιούνται για τη συλλογή πληροφοριών από τον χρήστη και όχι μόνο. Υπάρχουν πολλά αντικέιμενα που μπορούμε να εισάγουμε σε μία φόρμα τα οποία θα δούμε παρακάτω. Τα αντικέιμενα της φόρμας βρίσκονται στην καρτέλα 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»

New Δημιουργία νέου εγγράφου Open Άνοιγμα ενός εγγράφου Open Recent Άνοιγμα ενός από τα τελευταία έγγραφα που έχουμε επεξεργαστεί Open in Frame Άνοιγμα ενός εγγράφου μέσα σε ένα πλαίσιο Close Κλείσιμο του τρέχοντος εγγράφου Close All Κλείσιμο όλων των ανοιχτών εγγράφων Save Αποθήκευση ενός εγγράφου Save as Αποθήκευση ενός εγγράφου με διαφορετικό όνομα Save All Αποθήκευση όλων των ανοιχτών εγγράφων Save to Remote Server Αποθήκευση του εγγράφου κατευθείαν στο server Save as Template Αποθήκευση του εγγράφου ως πρότυπο Revert Επαναφορά του εγγράφου μετά την τελευταία αποθήκευση Print Code Εκτύπωση του κώδικα HTML Import Εισαγωγή δεδομένων από εξωτερική πηγή Export Εξαγωγή δεδομένων Convert Μετατροπή της σελίδας σε μορφή XHTML Preview in Browser Προεπισκόπιση της σελίδας μας στον Browser Check Pages Έλεγχος των σελίδων μας για λάθη Design Notes Σημειώσεις του σχεδιαστή Exit Έξοδος από το Dreamweaver Undo Αναίρεση της τελευταίας ενέργειας Redo Αναίρεση της αναίρεσης Cut Αποκοπή του επιλεγμένου στοιχείου Copy Αντιγραφή του επιλεγμένου στοιχείου Paste Επικόλληση του περιεχομένου του πρόχειρου Clear Διαγραφή του επιλεγμένου στοιχείου Copy HTML Αντιγραφή κομματιού κώδικα Paste HTML Επικόλληση του παραπάνω κώδικα Paste Text Επικόλληση κείμενου που υπάρχει στο πρόχειρο Select All Επιλογή όλων των στοιχείων του εγγράφου Select Parent Tag Επιλογή της πατρικής ετικέτας Select Child Επιλογή ένθετης ετικέτας Find and Replace Εύρεση και αντικατάσταση κειμένου Find Next Εύρεση επόμενου Go to Line Ενεργοποιείται μόνο στην προβολή κώδικα και πηγαίνει τον κέρσορα στην γραμμή που θα του πούμε Show Code Hints Εμφανίζει κάποια Hints στον κώδικα Indent code Προσθέτει στον επίλεγμένο κώδικα μία εσοχή Outdent code Προσθέτει στον επίλεγμένο κώδικα μία εξοχή Balance Braces Επιλογή για διόρθωση στην HTML Tag Libraries Βιβλιοθήκες με τις ετικέτες της HTML Keyboard Shortcuts Συντομεύσεις πληκτρολογίου Preferences Ρυθμίσεις του Dreamweaver Code Προβόλη σε μορφή κώδικα Design Προβολή σε μορφή σχεδίασης Code and Design Προβολή και των δύο παραπάνω με την οθόνη χωρισμένη στη μέση Switch Views Διακόπτης εναλλαγής προβολών Refresh Design View Ανανέωση της προβολής σχεδίασης Head Content Προβολή περιεχομένου του Head Noscript Content Επιλογή να μην εμφανίζει τα περιεχόμενα ενός Script Table Mode Μορφή ένος πίνακα Visual Aids Προβολή κρυφών στοιχείων (Διαστάσεις πίνακα, διαστάσεις περιγραμμάτων, αόρατα στοιχεία κ.α.) Code View Options Επιλογές προβολής στοιχείων στον κώδικα Rulers Εμφάνιση και απόκρυψη του χάρακα Grid Εμφάνιση και απόκρυψη του πλέγματος Tracing Image Επιλογή για το Tracing Image που βρίσκεται στο Page Properties Plugins Επιλογές για διάφορα πρόσθετα προγραμματάκια (Plugins) Hide Panels Απόκρυψη των βοηθητικών panels Toolbars Εμφάνιση και απόκρυψη των γραμμών εργαλείων Tag Εισαγωγή ετικέτας Image Εισαγωγή εικόνας Image Objects Εισαγωγή αντικειμένων εικόνας (εικόνες εναλλαγής, στοιχείο κράτησης θέσης για εικόνα κ.α.) Media Εισαγωγή αντικειμένων Flash, Applets, Plugins κ.α. Table Εισαγωγή πίνακα Table Objects Εισαγωγή αντικειμένων πίνακα Layout Objects Εισαγωγή επιπέδων (Layers) Form Εισαγωγή φόρμας και αντικειμένων φόρμας Hyperlink Εισαγωγή υπερσυνδέσμου Email Link Εισαγωγή υπερσυνδέσμου που οδηγεί σε κάποιο E-mail Name Anchor Εισαγωγή άγκυρας Date Εισαγωγή ημερομηνίας Comment Εισαγωγή σχολίου HTML Εισαγωγή στοιχείων HTML (Οριζόντια γραμμή, πλαίσια, στοιχεία κειμένου, στοιχεία Head, αντικείμενα Scripts, ειδικούς χαρακτήρες) Templates Objects Επιλογές για τη διαμόρφωση ενός προτύπου Customize Favorites Επιλογές για πρόσθεση και αφαίρεση εντολών σε αυτό το μενού Get More Objects Σύνδεση με το www.macromedia.com για download περισσότερων αντικειμένων Page Properties Επεξεργασία των ιδιοτήτων της σελίδας Template Properties Επεξεργασία των ιδιοτήτων ενός πρότυπου Selection Properties Εμφάνιση και απόκρυψη των ιδιοτήτων του επιλεγμένου στοιχείου στο κάτω μέρος του Dreamweaver Edit Tag Επεξεργασία μιας επιλεγμένης ετικέτας Quick Tag Editor Γρήγορη επεξεργασία μιας επιλεγμένης ετικέτας Make Link Δημιουργία υπερσύνδεσμου στο επιλεγμένο στοιχείο Remove Link Κατάργηση υπερσυνδέσμου εάν υπάρχει Open Linked Page Άνοιγμα της συνδεδεμένης σελίδας Link Target Επιλογές για το άνοιγμα της νέας τοποθεσίας Table Εντολές επεξεργασίας ενός πίνακα Image Εντολές επεξεργασίας μίας εικόνας Frameset Εντολές επεξεργασίας ενός Frameset (σύνολο πλαισίων) Arrange Εντολές επεξεργασίας επιπέδων (Layers) Align Εντολές στοίχισης των στοιχείων Library Εντολές επεξεργασίας των βιβλιοθηκών Templates Εντολές επεξεργασίας πρότυπων σελίδων Indent Προσθέτει στο επιλεγμένο κείμενο μία εσοχή Outdent Προσθέτει στο επιλεγμένο κείμενο μία εξοχή Paragraph Format Δίνει στη επιλεγμένη παράγραφο μορφή επικεφαλίδας Align Στοιχίζει την επιλεγμένη παράγραφο List Πρόσθεση κουκίδων και αρίθμηση στο επιλεγμένο κείμενο Font Αλλάζει τη γραμματοσειρά στο επιλεγμένο κείμενο Style Αλλάζει το στυλ στο επιλεγμένο κείμενο CSS Styles Εφαρμόζει ένα στυλ στο επιλεγμένο κείμενο Size Αλλάζει το μέγεθος στο επιλεγμένο κείμενο Size Change Αλλάζει το μέγεθος στο επιλεγμένο κείμενο με μέτρηση του Dreamweaver Color Αλλάζει το χρώμα στο επιλεγμένο κείμενο\ Check Spelling Εκτελεί τον ορθογράφο (μόνο Αγγλικά) Start Recording Αρχίζει η εγγραφή μίας μακροεντολής Play Recorded Command Εκτελεί τη εγγεγραμένη μακροεντολή Edit Command List Επεξεργασία της λίστας των εντολών Get More Commands Σύνδεση με το www.macromedia.com για download περισσότερων commands Manage Extensions Διαχείριση πρόσθετων λειτουργιών Apply Source Formatting Εντολή σε περίπτωση που γράφουμε εμείς τον κώδικα HTML Apply Source Formatting to Selection Εντολή σε περίπτωση που γράφουμε εμείς τον κώδικα HTML Clean Up HTML Εντολή σε περίπτωση που γράφουμε εμείς τον κώδικα HTML Clean Up Word HTML Εντολή σε περίπτωση που γράφουμε εμείς τον κώδικα HTML Add/Remove Netscape Resize Fix Εντολή συμβατότητας με τον Netscape Optimize Images in Fireworks Εντολή επεξεργασίας φωτογραφίας στο Fireworks Create Photo Album Δημιουργία Photo Album (απαραίτητο το Fireworks) Set Color Scheme Ορισμός συδυασμού χρωμάτων της σελίδας Format Table Εντολή μορφοποίησης ενός πίνακα Sort Table Εντολή ταξινόμησης ενός πίνακα Manage Sites Εντολή διαχείρησης των υπαρχόντων Sites Get Εντολή κατεβάσματος αρχείων από τον server Check Out Εντολή αν δουλεύουμε σε τοπικό δίκτυο Put Εντολή ανεβάσματος αρχείων στον server Check In Εντολή αν δουλεύουμε σε τοπικό δίκτυο Undo Check Out Αναίρεση της εντολής Check Out Reports Εντολή για αναφορές Check Links Sitewide Έλεγχος των Links του Site Change Link Sitewide Αλλαγή των Links του Site Advanced Εντολές για προχωρημένους Όλες οι εντολές αυτού του μενού αφορούν την εμφάνιση και απόκρυψη των βοηθητικών Panel στη δεξιά πλευρά του εγγράφου καθώς και όλων των extra παραθύρων που χρησιμοποιούμε στο Dreamweaver Το μενού αυτό περιέχει εντολές σχετικά με τη βοήθεια του Dreamweaver στον τοπικό δίσκο ή στο Internet

Τα πλαίσια (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 θα ανανεώσει μόνο την δεξια σελίδα και θα εμφανίσει εκεί τη σύνδεσή μας. Όλες οι άλλες σελίδες δεν θα ανανεωθούν.)

1. Ξεκινάμε το Dreamweaver MX. 2. Επιλέξτε SITE > NEW SITE από τα μενού. 3. Το παράθυρο Site Definition εμφανίζεται. Σιγουρευτείτε ότι είναι επιλεγμένη η καρτέλα Basic. 4. Έδω ορίζουμε το όνομα του web site που πρόκειται να κατασκευάσουμε . Προσπαθήστε να βάλετε ένα όνομα μικρό και να αποτελείται από μία λέξη. Δεν θα είναι μόνο το όνομα του site αλλά και το όνομα του φακέλου που θα αποθηκευθεί. Έπειτα κάνουμε κλικ στο κουμπί επόμενο. 5. Το server technology επιτρέπει στις σελίδες με φόρμες να χρησιμοποιηθούν στο site. 6. Σιγουρευτείτε ότι έχετε επιλέξει "Edit local copies on my machine, then upload to server when ready." για να δημιουργήσει το site σας στον δίσκο σας και έπειτα να το “ανεβάσετε” στον web server. 7. Γεμίστε τη φόρμα όπως παρακάτω, με τα στοιχεία του web server. Αν δεν τα έχουμε παραλείπουμε αυτό το βήμα. 8. Επιλογές αν δουλεύουμε μόνοι μας αυτό το site ή με συνεργάτες. 9. Θα εμφανιστεί μία συνολική αναφορά με τις επιλογές που έχουμε κάνει. Αν συμφωνούμε πατάμε το κουμπί Finish. Το site σας έχει στηθεί και εμφανίζεται στο Files Panel στη δεξιά πλευρά της οθόνης.

Το 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> πχ. κώδικας: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Στο <HEAD> βάζουμε ότι έχει σχέση με τον τύπο και την περιγραφή της σελίδας μας, όπως τον τίτλο, την περιγραφή, την κωδικοσελίδα, τις λέξεις κλειδιά, κ.α. Στο <BODY> βάζουμε όλα όσα θέλουμε να εμφανίσουμε στην οθόνη του επισκέπτη μας. πχ. κώδικας: <HTML> <HEAD> <title>Γεια σου Επισκέπτη</title> </HEAD> <BODY> αυτό το κείμενο θα εμφανιστεί στον επισκέπτη... </BODY> </HTML>

Για να αλλάξουμε ή για να εξαλείψουμε το περιθώριο που αφήνει γύρο - γύρο η σελίδα μας θα πρέπει να κάνουμε κάποιες αλλαγές στο tag <body> Προσθέτουμε αυτό στο <body> κώδικας: topmargin="5" leftmargin="5" δηλαδή εάν το <body> tag της σελίδας μας δεν είχε τίποτα άλλο θα πρέπει να έχει γίνει κώδικας: <body topmargin="5" leftmargin="5"> με αυτόν τον τρόπο θα έχουμε περιθώριο 5 pixels στο πάνω και στο αριστερό μέρος ( το κάτω και το δεξή μέρος δεν μπορούμε να τα πειράξουμε ) εάν θέλουμε να εξαλείψουμε το περιθώριο θέτουμε τις παραμέτρους σε 0 δηλ. κώδικας: <body topmargin="0" leftmargin="0">

Πώς θα κάνω με css, ΜΟΝΟ τα images που είναι links να μην έχουν border; Αν γράψω: κώδικας: img {border:0px} θα πιάσει σε όλα...

Στο head: κώδικας: <script> function clearDefault(el) { if (el.defaultValue==el.value) el.value = "" } </script> Στο κάθε στοιχείο της φόρμας: κώδικας: ONFOCUS="clearDefault(this)" πχ: κώδικας: <input type="text" name="name" value="το όνομα σας" ONFOCUS="clearDefault(this)"> EDIT: Ο 3dots μου έδωσε έναν καλύτερο τρόπο που όταν ξαναπατήσεις έξω από τη φόρμα εμφανίζεται το αρχικό value: κώδικας: onblur="if(this.value=='') this.value='otinanai';" onfocus="if(this.value=='otinanai') this.value='';" πχ: κώδικας: <input type="text" name="name" value="otinanai" onblur="if(this.value=='') this.value='otinanai';" onfocus="if(this.value=='otinanai') this.value='';">

Η εντολή base ενα χρήσιμο tip Οταν έχουμε στην σελίδα μας αρκετά links και θέλουμε να ανοίγουν σε νέο παράθυρο. κώδικας: <head> <base target="_blank"> </head>

Όσοι χρησιμοποιούν ΧΗΤΜL και θέλουν να κάνουν validation μπορούν να χρησιμοποιήσουν τον παρακάτω κώδικα αντί του target="_blank" κώδικας: <a onclick="window.open(this.href,'_blank');return false;" href="http://www.freestuff.gr">FreeStuff.gr</a>

Δεν είναι τίποτα σημαντικό, απλά είναι ωραίο και χρήσιμο να περνάτε στο email κατευθείαν το Θέμα ! Όταν κάποιος θα πατήσει στο Link για να σας στείλει κάποιο email μέσα απο την σελίδα σας, θα περαστεί αυτόματα το θέμα με τον παρακάτω κώδικα : κώδικας: <a href="mailto:email@here.com?subject=Εδώ βάλτε το κείμενο που θέλετε να περνάει στο θέμα αυτόματα">Επικοινωνία</A> Μπορείτε επίσης να βάλετε παραπάνω απο ένα παραλήπτες : κώδικας: mailto:myname@mysite.net?cc=anotehraddress@asite.com Να στείλετε κάπου ένα αντίγραφο χωρίς να φαίνεται: κώδικας: mailto:myname@mysite.net?bcc=anotehraddress@asite.com Μπορείτε ακόμα να περάσετε κάποιο συγκεκριμένο κείμενο στο body του email : κώδικας: mailto:myname@mysite.net?body=Κείμενο που θέλετε να περαστεί αυτόματα στο body του email Και τέλος, άν θέλετε να συνδιάσετε όλα τα παραπάνω, χρησιμοποιήστε το σύμβολο & για να χωρίσετε τις εντολές ! Παράδειγμα : κώδικας: <a href="mailto:myname@mysite.net?subject=Email από σελίδα&cc=anotehraddress@asite.com&body=Κείμενο που μπαίνει αυτόματα στο body του email !">

Θέλετε να εμφανίζετε μία Fake IE information bar? sto Header.php meta apo to: κώδικας: ################################################## # Include some common header for HTML generation # ################################################## βάζουμε αυτο¨ κώδικας: echo "<html dir=\"ltr\" lang=\"en\">\n"; echo "<link rel=\"stylesheet\" href=\"E:\Documents and Settings\stealthGR\My Documents\My Received Files\infobar.css\" type=\"text/css\" />\n"; echo "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n"; echo "<tr>\n"; echo "<td width=\"100%\">\n"; echo "<div id=\"infobar\"><a href=\"/forums/register.php?do=signup\">It appears you have not yet registered with our community. To register please click here...</a><embed src=\"/forums/infobar.wav\" autostart=\"true\" loop=\"0\" hidden=\"true\"></embed></div>\n"; echo "</td>\n"; echo "</tr>\n"; echo "</table> \n"; echo "</html>\n"; αλλάζυομε το HREF του infobar.css στην αρχή με το ανάλογο path μας to infobar να είναι καλύτερα στο ιδιο folder με τό Header.php infobar.zip Description: infobar Download Filename: infobar.zip Filesize: 573 Bytes Downloaded: 874 Time(s)

Η παράμετρος "bordercolor" δεν έχει νόημα μέσα στην οδηγία img, πρέπει να γίνει με ccs. Αν χρησιμοποιείτε εξωτερικό stylesheet, γράψτε για παράδειγμα: κώδικας: img.special {border: 3px red solid;} ή μπορείτε να το βάλετε μέσα στην κεφαλίδα του αρχείου κώδικας: <style> img.special {border: 7px red solid;} </style> Χρησιμοποιούμε το όνομα, για να μην ισχύει σε όλες τις εικόνες της σελίδας, αλλά μόνο σε όσες θέλουμε εμείς - και μπορούμε βεβαια να ορίσουμε διαφορετική εμφάνιση για κάποιο όλλο όνομα/τύπο εικόνας μέσα στο ίδιο αρχείο κώδικας: <style> img.asimi {border: 2px silver dotted;} </style> Αυτός θα έχει ανοιχτο γκρί (~ασημι/silver) περίγραμμα παχους 2 στιγμών με διακεκομένη γραμμή. Ο αντίστοιχος κώδικας για τις εικόνες είναι : κώδικας: <img src="eikona1.jpg" width="100" height="75" alt="κοκκινο-πλαίσιο" class="special"> και κώδικας: <img src="eikona1.jpg" width="100" height="75" alt="ασημι-διακεκομένο-πλαίσιο" class="asimi"> Μπορούμε ακόμα να βάλουμε το στυλ μέσα στη οδηγία της εικόνας, .. αν ειναι μόνο μια που θέλουμε έτσι.. κώδικας: <img src="eikona1.jpg" width="100" height="75" alt="κοκκινο-πλαίσιο" style="border: 3px red solid;""> Ξερετε καλύτερα γιατί και πότε προτιμάμε εξωτερικο αρχείο 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 κώδικας: <a onClick = "this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.your_page.gr');" href=""><b>Κάντε την σελίδα μας την αρχική σελίδα του Internet Explorer!</b></a> add to favorites κώδικας: <a href="" onclick="window.external.AddFavorite(window.location.href,document.title);">add to Favorites</a>