Ενότητα :e- Life Σχεδιασμός Ιστοσελίδων

Transcript

1 Ενότητα :e- Life Σχεδιασμός Ιστοσελίδων e-life E-LEARNING VIRTUAL CENTER FOR PEOPLE WITH PHYSICAL DISABILITIES Αυτό το έργο έχει χρηματοδοτηθεί με την υποστήριξη της Ευρωπαϊκής Ένωσης. Αυτή η έκδοση αντανακλά τις απόψεις μόνο των συγγραφέων, και η Ένωση δεν μπορεί να καταστεί υπεύθυνη για οποιαδήποτε χρήση μπορεί να γίνει από τις πληροφορίες που περιέχονται μέσα στην έκδοση.

2 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ 1. ΠΕΡΙΓΡΑΦΗ ΕΝΟΤΗΤΑΣ ΕΙΣΑΓΩΓΗ ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ Πρώτο βήμα: Καθορισμός Στόχων Σχηματίζοντας ένα Όραμα Σχεδιασμός Ιστοσελίδας Δομή Ιστοσελίδας ΧΤΙΖΟΝΤΑΣ ΤΗΝ ΙΣΤΟΣΕΛΙΔΑ ΣΟΥ ΧΡΗΣΙΜΟΠΟΙΩΝΤΑΣ JOOMLA! Joomla!Γεγονότα και Αριθμοί: Γιατί να την χρησιμοποιήσεις; Πώς να χτίσεις μια ιστοσελίδα χρησιμοποιώντας Joomla! Βήμα 1 : Σχεδιάζοντας μια ιστοσελίδα Joomla! Βήμα 2: Πώς να εγκαταστήσετε το Joomla με JSAS ή Fantastico Βήμα 3 : Χτίζοντας και ελέγχοντας το περιεχόμενο της ιστοσελίδας Joomla Βήμα 4 : Μετακινώντας την ιστοσελίδα Joomla από το JSAS σε έναν σέρβερ ΧΡΗΣΙΜΑ ΕΡΓΑΛΕΙΑ ΚΑΙ ΠΗΓΕΣ ΓΙΑ ΝΑ ΣΑΣ ΒΟΗΘΗΣΟΥΝ ΝΑ ΧΤΙΣΕΤΕ, ΤΕΛΕΙΟΠΟΙΗΣΕΤΕ ΚΑΙ ΔΙΑΤΗΡΗΣΕΤΕ ΤΗΝ ΙΣΤΟΣΕΛΙΔΑ ΣΑΣ Προτάσεις για δωρεάν Web Host Προτάσεις για επί πληρωμή Web Host Virtual Domain Name Επιλέγοντας Domain Names Ανεβάζοντας την Ιστοσελίδα Προωθώντας την Ιστοσελίδα Ελέγχοντας την κίνηση Web Traffic Κερδίζοντας εισόδημα Εξέλιξη της ιστοσελίδας Παγκόσμια Αγορά Επιλέγοντας συνέταιρους Web Analytics Banner Makers Dead Link Checkers Directory Services Domain Name Αναζητήσεις Domain Acquisition Αναζητήσεις Ανταγωνιστών Page Hit Trackers Programming Οδηγοί DREAMWEAVER CS Εξερευνώντας το Dreamweaver Δημιουργώντας ένα έγγραφο Τεστάροντας την ιστοσελίδα μας Δημιουργώντας προσδιορισμούς για την ιστοσελίδα Dreamweaver και Κείμενο Dreamweaver και Εικόνες Εισάγοντας εικόνες στο Dreamweaver μέσω του συστήματος φακέλων Εικόνες και εναλλακτικό κείμενο Placeholder εικόνες Εισάγοντας ταινίες Flash..47 2/70

3 Δομώντας το περιεχόμενο της ιστοσελίδας μας HTML και CSS προβολή του property Inspector Παράγραφοι, επικεφαλίδες και φορμαρισμένο κείμενο Μενού Στυλ Πίνακες ΕΙΣΑΓΩΓΗ ΣΤΟ ANIMATION ΜΕ ΤΟ FLASH Πλαίσια κλειδιά και Χρονολόγιο Επίπεδα Πλαίσια και πλαίσια κλειδιά Tween επίπεδα και αυτόματο keyframing Δραστηριότητες-Πλαίσιο Φτιάχνοντας απαλότερα animations ΠΑΡΑΠΟΜΠΕΣ /70

4 1. ΠΕΡΙΓΡΑΦΗ ΕΝΟΤΗΤΑΣ ΤΙΤΛΟΣ ΕΝΟΤΗΤΑΣ Δημιουργώντας ιστοσελίδες- Βασικοί Κανόνες Σχεδίασης και Οδηγός ΚΩΔΙΚΑΣ VAT2 ΛΕΞΕΙΣ ΚΛΕΙΔΙΑ Ιστοσελίδα, σχεδιασμός, βασικές δεξιότητες, δομή ιστοσελίδας, Joomla!, εγκατάσταση, web host, domain, μεταφόρτωση, προώθηση, web traffic, web banners, tracking, ranking, Dreamweaver, html ΟΜΑΔΑ ΣΤΟΧΟΣ Η ομάδα στόχος της ενότητας είναι άτομα με φυσική αναπηρία τα οποία ψάχνουν ευκαιρίες για να εισαχθούν και να παραμείνουν σε επαφή με την virtual αγορά εργασίας ΕΠΙΠΕΔΟ Μεσαίο επίπεδο ΕΥΚΑΙΡΙΕΣ ΚΑΡΙΕΡΑΣ Ανεξάρτητοι ελεύθεροι επαγγελματίες με υψηλές δεξιότητες που μπορούν να αποδώσουν μια μεγάλη ποικιλία επαγγελματικών υπηρεσιών ΣΚΟΠΟΙ ΕΝΟΤΗΤΑΣ Αυτός ο οδηγός προσφέρει γενικές οδηγίες για τα άτομα που επιθυμούν να χτίσουν μια ειδικότητα στις ιστοσελίδες από μόνοι τους, ή με ελάχιστη επαγγελματική βοήθεια, για τον σκοπό του να έχουν μια δουλειά από το σπίτι. Ο οδηγός είναι δομημένος έτσι ώστε να μπορείς εύκολα να δομήσεις μια ιστοσελίδα χωρίς καθόλου προηγούμενη τεχνική εμπειρία στον σχεδιασμό ιστοσελίδων, και επίσης προσφέρει άλλες πηγές που θα επιτρέψουν να δημιουργήσετε επιτυχημένα και αποτελεσματικά. Το βασικό σύστημα για διαχείριση περιεχομένου (CMS) για την βάση αυτού του οδηγού είναι το Joomla. Το CMS σου δίνει ένα βασικό πλαίσιο για μια ιστοσελίδα και σου επιτρέπει να την διαχειριστείς επαγγελματικά με την λιγότερη δυνατή προσπάθεια. Η βασική απαίτηση από εσένα θα είναι να παρέχεις το περιεχόμενο (κείμενο, εικόνες, βίντεο). 4/70

5 ΜΑΘΗΣΙΑΚΑ ΑΠΟΤΕΛΕΣΜΑΤΑ Με την επιτυχημένη συμπλήρωση αυτής της ενότητας, ο συμμετέχων θα έχει μάθει: 1. Να προσδιορίζει αντικείμενα και σχεδιασμό ιστοσελίδας 2. Να δομεί μια ιστοσελίδα 3. Να εντοπίζει τον κατάλληλο web host 4. Να προωθεί μια ιστοσελίδα 5. Να βρίσκει, να αξιολογεί και να διατηρεί μια ιστοσελίδα ΠΡΟΑΠΑΙΤΟΥΜΕΝΕΣ ΔΕΞΙΟΤΗΤΕΣ Χρήση βασικού ICT, χρήση βασικού HTML και βασικού CSS ΠΡΟΑΠΑΙΤΟΥΜΕΝΟ ΜΑΘΗΜΑ Κανένα ΔΙΔΑΚΤΙΚΕΣ ΩΡΕΣ 20 ώρες ΙΚΑΝΟΤΗΤΑ Δημιουργία, εφαρμογή, εύρεση και διατήρηση αποτελεσματικών ιστοσελίδων για εταιρίες ΑΞΙΟΛΟΓΗΣΗ Η αξιολόγηση θα περιλαμβάνει ένα τεστ πολλαπλών ερωτήσεων. Κάθε τεστ θα περιλαμβάνει πολλαπλές ερωτήσεις οι οποίες θα αξιολογούν την γνώση των υποψηφίων και την κατανόηση σύμφωνα με τα μαθησιακά αποτελέσματα. ΚΑΤΗΓΟΡΙΑ κόστος (βελτιστοποίηση κόστους) χρόνος (αποτελεσματική διαχείριση χρόνου) s-ποιότητα (ποιότητα υπηρεσιών) m-ποιότητα (ποιότητα διαχείρισης) ΕΠΙΠΡΟΣΘΕΤΟ ΥΛΙΚΟ Κανένα 5/70

6 2. ΕΙΣΑΓΩΓΗ Αγαπητέ Συμμετέχοντα, Καλωσήλθες σε αυτήν την ενότητα! Αυτή η ενότητα προσφέρει γενικές οδηγίες για άτομα που επιθυμούν να δημιουργήσουν μια ιστοσελίδα από μόνοι τους, ή με την λιγότερο δυνατή επαγγελματική βοήθεια, με σκοπό να ξεκινήσουν την δική τους επιχείρηση από το σπίτι. Αυτός ο οδηγός είναι έτσι δομημένος ώστε να μπορείς εύκολα να χτίσεις μια ιστοσελίδα χωρίς προηγούμενη τεχνική εμπειρία σχετικά με τον σχεδιασμό ιστοσελίδων, και επίσης προσφέρει άλλες πηγές που θα σου επιτρέψουν να δημιουργήσεις μια ιστοσελίδα επιτυχώς και αποτελεσματικά. Το κύριο σύστημα διαχείρισης περιεχομένου για την βάση αυτού του οδηγού είναι το Joomla. Τα συστήματα διαχείρισης περιεχομένου (CMS) σου δίνουν ένα ολοκληρωμένο πλαίσιο για μια ιστοσελίδα και σου επιτρέπουν να την διαχειριστείς επαγγελματικά και με την λιγότερη δυνατή προσπάθεια. Η βασική σου εργασία θα είναι να παρέχεις το περιεχόμενο (κείμενο, εικόνες, βίντεο). Με εγκάρδιους χαιρετισμούς, Η ομάδα έργου e- Life 6/70

7 3. ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ 3.1. Πρώτο Βήμα:Καθορισμός Στόχων Προτού ξεκινήσεις να φτιάχνεις μια ιστοσελίδα, είναι σημαντικό να έχεις θέσει σαφείς στόχους. Το περιεχόμενο και ο σχεδιασμός της ιστοσελίδας θα πρέπει να δείχνουν ξεκάθαρα τους στόχους σου. Πολλοί άνθρωποι φτιάχνουν ιστοσελίδες από χόμπυ, έχοντας κατά νου την δική τους προσωπική ανάπτυξη. Αλλά για αυτήν την ενότητα, εστιαζόμαστε στην δημιουργία ιστοσελίδων ως αρχή της προώθησης της δικής σου επιχείρησης από το σπίτι και ως γενικούς επαγγελματικούς στόχους. Υπάρχει επίσης η δυνατότητα να κερδίσετε εισόδημα από τις ιστοσελίδες που έχετε αναπτύξει. Αλλά ποιος είναι ο τρόπος να γίνει αυτό; Δημοσιεύοντας ιστοσελίδες με αντίκτυπο σε κοινό, σελίδες που μπορούν να προσελκύσουν μεγάλους αριθμούς επισκεπτών και έπειτα με πώληση χώρου διαφήμισης, αγαθών ή υπηρεσιών από αυτές τις ιστοσελίδες. Οι βασικοί στόχοι για εστίαση στον αρχικό προγραμματισμό είναι οι ακόλουθοι: 1. Δημιουργία μιας λίστας 2. Απόφαση εάν θα χρειαστείτε βοήθεια παραγωγής, ή εάν θα την διαχειριστείτε μόνοι σας 3. Τεχνολογία ώστε να γνωρίζετε τι απαιτείται 4. Καθορισμός προϋπολογισμού και πρόβλεψη 3.2. Σχηματίζοντας ένα Όραμα Προκειμένου να δημιουργηθεί ένας δημοφιλής και που να πουλάει ιστοχώρος, θα πρέπει να σχηματίσετε μια καλή ιδέα ή ένα καλό θέμα ιστοχώρου. Το θέμα για τον ιστοχώρο σας θα πρέπει να είναι κάτι για το οποίο ενδιαφέρεστε και έχετε μια καλή γνώση. Δεν χρειάζεται να είστε εμπειρογνώμονας στη θεματική περιοχή. Εντούτοις, θα πρέπει να ξέρετε περισσότερα για το θέμα από άλλους. Το θέμα για τον ιστοχώρο σας θα μπορούσε να είναι κάτι σχετικό με την εργασία, την προσωπική ζωή ή τα χόμπι, και δεν υπάρχει καμία ανάγκη να είναι ευρέος γενικού ενδιαφέροντος. Πάντα λάβετε υπόψη σας, ότι το πιθανό ακροατήριό σας είναι σφαιρικό και δεν περιορίζεται στην κοινότητα ή τη χώρα σας Σχεδιασμός Ιστοσελίδας Το πρώτο βήμα είναι να αποφασίσετε τι θα δημοσιεύσετε και ποιο θα είναι το κοινό-στόχος, το επόμενο βήμα είναι να αποφασίσετε το στυλ και την σχεδίαση της ιστοσελίδας σας. Σκεφτείτε την εμφάνιση (μη επίσημη, επαγγελματική ή υψηλής τεχνολογίας), τα γραφικά, τα animations, την μουσική, την δομή του κειμένου, την γραμματοσειρά, και πως οι επισκέπτες θα πλοηγούνται στην ιστοσελίδα σας. Το σημαντικότερο μέρος του ιστοχώρου σας είναι το κειμενικό 7/70

8 περιεχόμενο. Αυτό που γράφετε θα πρέπει να προσθέσει αξία και να κάνει τον επισκέπτη να θελήσει να επιστρέψει επανειλημμένως. Η έκδοση στο διαδίκτυο είναι κάτι διαφορετικό από το γράψιμο για μια εφημερίδα δεδομένου ότι είστε σε θέση να εκμεταλλευθείτε τις ικανότητες των πολυμέσων. Οι φωτογραφίες, η γραφική παράσταση, η μουσική και το βίντεο μπορούν να κάνουν την ιστοσελίδά σας ενδιαφέρουσα αλλά δεν πρέπει να το παρακάνετε, λαμβάνοντας υπόψη ότι τα γραφικά είναι μεγάλα αρχεία που παίρνουν χρόνο να μεταφορτωθούν και οι άνθρωποι δεν μπορούν να περιμένουν για πολύ ώρα για να μεταφορτωθεί μια ιστοσελίδα. Ο στόχος είναι να παραχθούν συστατικά περιεχομένου και λειτουργικός προγραμματισμός: Τα συστατικά περιεχομένου, η λεπτομερής οργάνωση περιλαμβάνουν: - Κείμενο, επεξεργασμένο και διορθωμένο - Προσδιορισμός γραφικής σχεδίασης για όλες τις σελίδες (περιβάλλον γραφικών, περίγραμμα σελίδων, κεφαλίδα/υποσέλιδο, λογότυπα, κουμπιά, φόντα) - Αναλυτικά περιεχόμενα σελίδας ή έτοιμα παραδείγματα σελίδων-κλειδιών - Σχεδιασμός περιβάλλοντος και έτοιμα υποδείγματα βασικών σελίδων - Εικονογραφίες και φωτογραφίες Λειτουργικά και λογικά περιεχόμενα: - Πίνακες βάσεων δεδομένων και προγραμματισμού, έτοιμα πρωτότυπα αλληλεπίδρασης - Σχεδιασμός και αξιολόγηση μηχανής αναζήτησης 3.4. Δομή Ιστοσελίδας Είναι σημαντικό να παραμένει η δομική συνοχή σε όλη την ιστοσελίδα σας. Κάθε σελίδα θα πρέπει να έχει τουλάχιστον κοινή κεφαλίδα, υποσέλιδο και μενού πλοήγησης. Για την δομή των ιστοσελίδων, υπάρχουν δύο μέθοδοι: η χρήση «πινάκων» ή «τμημάτων». Μπορείτε να βρείτε γραφικά στο διαδίκτυο, ψάχνοντας για: - Index αρχείων GIF - GIF βιβλιοθήκη Όταν βρείτε κάτι που σας αρέσει, αντιγράψτε το σε ένα σημείο στον σκληρό δίσκο σας, κάνοντας δεξί κλικ επάνω στο γραφικό και επιλέγοντας «Αποθήκευση εικόνας ως». Για να βρείτε την κατάλληλη μουσική, ψάξτε για "midi" και το όνομα του δημιουργού. Τα ονόματα αυτών των δύο αρχείων θα τελειώνουν με ".gif" και ".mid". Πάντα να έχετε στο μυαλό σας τα ζητήματα πνευματικής ιδιοκτησίας προτού χρησιμοποιήσετε κάτι. Η επιτυχία της ιστοσελίδας σας θα εξαρτηθεί επίσης από την ικανότητά σας να οργανώνετε πληροφορίες και αυτό σημαίνει κατηγοριοποίηση. Οι πιο βασικοί τρόποι να οργανώσετε πληροφορίες είναι οι παρακάτω: 8/70

9 1. Αλφαβητικός: Το πιο λογικό σχέδιο οργάνωσης βασιζόμενο στο αρχικό γράμμα των ονομάτων των αντικειμένων. Μερικά παραδείγματα είναι: τηλεφωνικοί κατάλογοι, λεξικά κλπ όπου οι χρήστες ξέρουν την λέξη ή το όνομα που θέλουν να αναζητήσουν. Τα αλφαβητικά συστήματα είναι απλά και οικεία στην καθημερινή ζωή. 2. Χρονολογικός: Οργάνωση με χρονολόγιο ή ιστορικά, όπου τα στοιχεία παρουσιάζονται βήμα βήμα με διαδοχικό τρόπο. Αυτό συχνά χρησιμοποιείται στην εκπαίδευση, και με αντικείμενα όπως τα αυτοκίνητα, οι αντίκες και τα κρασιά. 3. Κατηγορία: Τακτοποιήση σύμφωνα με την ομοιότητα των χαρακτηριστικών ή της σχετικότητας των αντικειμένων. Αυτή είναι μια ιδιαίτερα χρήσιμη προσέγγιση όταν όλα τα πράγματα που πρέπει να οργανωθούν είναι ίσης ή απρόβλεπτης σημασίας. 4. Γεωγραφικός: Οργάνωση σύμφωνα με τοπικές λεπτομέρειες, συχνά χρησιμοποιείται για προσανατολισμό ή κατεύθυνση. 5. Προσανατολισμένος στο έργο: Απαιτεί την τακτοποίηση του περιεχομένου ως μια διαδικασία σχεδιαγράμματος. Για παράδειγμα, επιλογή σπιτιού, επιλογή μεσίτη, επιλογή υποθήκης. 6. Θεματικός: Πιο προκλητικός από τις άλλες επιλογές, είναι σχεδιασμένος θεματικά το οποίο απαιτεί τον ορισμό ορίων μέχρι το πλάτος του περιεχομένου. Πίνακας 1: Παράδειγμα για το πώς λειτουργεί η κατηγοριοποίηση, και η σημασία της χρήσης της για την επιτυχία στην πλοήγηση μιας ιστοσελίδας 1. Ανοργάνωτα/τυχαία 2. Αλφαβητικά 3. Θεματικά+Αλφαβητικά Δώρα Baby Entertainment School Name Bed + Bath Music/Movies/Books Bed + Bath Clearence Sports Home Furnishings Clothes Fashion + Style Home Offices Electronics Accessories, Jewelery Κουζίνα Δώρα Beauty, Health Baby Health + Beauty Clothes Clothes Home Furnishings Luggage Jewelery + Accessories Home Offices Home Health + Beauty Jewelery + Accessories Bed + Bath Toys Κουζίνα Electronics Electronics Music/Movies/Books Furnishings Music/Movies/Books School Time Κουζίνα Sports + Luggage Sports + Luggage Office Clearence Toys Kids Baby School Time Toys Δώρα Clearence 9/70

10 4.ΧΤΙΖΟΝΤΑΣ ΤΗΝ ΙΣΤΟΣΕΛΙΔΑ ΣΟΥ ΧΡΗΣΙΜΟΠΟΙΩΝΤΑΣ JOOMLA! 4.1 Joomla! Στοιχεία και Αριθμοί: Γιατί να το χρησιμοποιήσετε; - Το Joomla παράγει δυναμικό περιεχόμενο - Το Joomla έχει τον δικό του τρόπο για την οργάνωση περιεχομένου, έτσι ώστε να είναι εύκολο να πλοηγηθείς. Όσο μαθαίνεις, τα πράγματα θα γίνονται όλο και πιο ξεκάθαρα. - Το Joomla χρησιμοποιεί Περιγράμματα: Με την χρήση περιγραμμάτων, όλες οι σελίδες θα έχουν μια συνοχή στην εμφάνιση. Μπορείς εύκολα να αλλάξεις ένα περίγραμμα χωρίς να χρειαστεί να αλλάξεις τον κώδικα. Μόλις εξοικειωθείς με το Joomla, μπορείς ακόμα και να δημιουργήσεις το δικό σου περίγραμμα. - Προσαρμογή ενοτήτων για να έχετε την εμφάνιση που θέλετε: Το Joomla χρησιμοποιεί ενότητες, οι οποίες μπορούν να δημοσιευτούν, να ξε-δημοσιευτούν, να μετακινηθούν σε διαφορετικές θέσεις σε μια σελίδα και να προσαρμοστούν στην εμφάνιση της ιστοσελίδας σας ώστε να δουλεύουν ακριβώς όπως θέλετε. - Ολοκληρωμένος Συντάκτης Περιεχομένου: Παρομοίως με κάθε άλλο πρόγραμμα σύνταξης κειμένου με προχωρημένα χαρακτηριστικά, μπορεί να εισάγει κείμενο, πίνακες και φωτογραφίες με ευκολία. Οι αλλαγές φαίνονται άμεσα στην ιστοσελίδά σας. 4.2 Πώς να χτίσετε μια ιστοσελίδα χρησιμοποιώντας το Joomla! Ο παρακάτω οδηγός θα σας επιτρέψει να μάθετε όλα όσα χρειάζεστε για να ξεκινήσετε την δική σας Joomla! ιστοσελίδα από την εγκατάσταση ως την δημοσίευση. Ο οδηγός είναι οργανωμένος σε 4 βήματα: Βήμα 1 Σχεδιασμός μιας ιστοσελίδας Joomla Βήμα 2 - Εγκατάσταση Joomla Βήμα 3 Χτίσιμο και Διαχείριση του περιεχομένου της Joomla Ιστοσελίδας Βήμα 4 Μεταφόρτωση και Δημοσίευση της ιστοσελίδας Joomla Βήμα 1: Σχεδιασμός μιας ιστοσελίδας Joomla! Ο πρώτος κανόνας είναι η δημιουργία ενός ενδιαφέροντος περιεχομένου για τους επισκέπτες. Θα πρέπει να αναρωτηθείτε για ποιον είναι η ιστοσελίδα, ποιος θα την χρησιμοποιήσει και/ή θα την διαβάσει. Πάρτε ένα κομμάτι χαρτί και κάντε μια γρήγορη λίστα για την ιστοσελίδα σας, γράψτε ταμπέλες ή τίτλους που θα θέλατε να καλύπτει η ιστοσελίδα. 10/70

11 Δομή μιας ιστοσελίδας Joomla Η ανάπτυξη μιας ιστοσελίδας Joomla είναι ένα σημαντικό κομμάτι του χτισίματος. Δημιουργήστε έναν πίνακα σε Word ή Excel με 5 ή περισσότερες στήλες. 1. Η στήλη αντιπροσωπεύει τα τμήματα 2. Η στήλη αντιπροσωπεύει τις κατηγορίες 3. Η στήλη αντιπροσωπεύει τα αντικείμενα περιεχομένου 4. Η στήλη είναι για το μαρκάρισμα του τύπου περιεχομένου (blog/λίστα αντικειμένων/μοναδικό αντικείμενο/στατικό περιεχόμενο) 5. Η στήλη είναι κλεισμένη για τίτλους Τώρα, πάρτε το χαρτί που χρησιμοποιήσατε νωρίτερα για ιδέες και ξεκινήστε να οργανώνετε το περιεχόμενο σε τμήματα και κατηγορίες. Μετακινήστε τα έως ότου μείνετε ικανοποιημένος. Θα έχετε κάτι σαν αυτό: Τμήματα Κατηγορίες Αντικείμενα Περιεχομένου Τύπος περιεχομένου Τίτλος Προϊόντα Για άντρες Λίστα αντικειμένων Προϊόν 1 Μαύρα παπούτσια Προϊόν 2 Καφέ παπούτσια Για γυναίκες Λίστα αντικειμένων Υπηρεσίες Σχετικά εμάς με Στατικό περιεχόμενο Σχεδιασμός Joomla και Πλοήγηση Πως θα φαίνεται το σχέδιο; Σκεφτείτε πως επιθυμείτε να φαίνεται η ιστοσελίδα σας. Μερικές επιλογές: 11/70

12 Επιλογή σχεδίου 1 Το πιο κοινό σχέδιο ιστοσελίδας: πλοήγηση στα αριστερά, περιεχόμενο στα δεξιά. Επιλογή σχεδίου 2 Άλλη επιλογή: Πλοήγηση επάνω, περιεχόμενο από κάτω με αρκετές στήλες που μοιάζουν με portal. Επιλογή σχεδίου 3 Άλλη επιλογή: διαχωρισμένη πλοήγηση στα αριστερά και επάνω, στο κέντρο το περιεχόμενο, και μια δεξιά στήλη για τοποθέτηση διαφημίσεων. Αλληλεπίδραση Το Joomla είναι μια δυναμικη ιστοσελίδα για χτίσιμο και έχει μερικά ολοκληρωμένα Περιεχόμενα τα οποία μπορούν να κάνουν την ιστοσελίδά σας να αλληλεπιδρά. Όταν αναπτύσσετε μια ιστοσελίδα Joomla, δεν θα πρέπει να ξεχνάτε ότι μπορείτε να βελτιώνετε την ιστοσελίδα σας με αναρίθμητα πρόσθετα και επεκτάσεις add-ons and extensions διαθέσιμα στην ιστοσελίδα της Joomla. Να είστε σίγουροι τι θέλετε να προσφέρετε Θα πρέπει να είστε αρκετά σίγουροι για το τι θέλετε να προσφέρετε στους επισκέπτες σας: αυτό μπορεί να είναι, για παράδειγμα, Ημερολόγιο, Γκαλερύ με Φωτογραφίες, και άλλες προχωρημένες Λειτουργίες. Υπάρχουν πολλές διαθέσιμες επεκτάσεις έτσι ώστε σχεδόν όλα να είναι πιθανά και υπάρχει μεγάλη ποικιλία επιλογών. Μετά από αυτό το βήμα, είναι πολύ σημαντικό να έχετε ένα ξεκάθαρο όραμα για το τι θα θέλατε να προσφέρετε με την ιστοσελίδα σας, έναν αναλυτικό πίνακα με την δομή της ιστοσελίδας και μια ιδέα για τον σχεδιασμό της. Τώρα, ας εγκαταστήσουμε το Joomla και ας ξεκινήσουμε να το χρησιμοποιούμε Βήμα 2 : Πώς να εγκαταστήσετε το Joomla με JSAS ή Fantastico Οι ελάχιστες απαιτήσεις συστήματος που χρειάζονται για το Joomla είναι οι εξής: * PHP 4.2.x ή παραπάνω - * MySQL 3.23.x ή παραπάνω - * Apache ή παραπάνω /70

13 Εγκατάσταση Joomla τοπικά με JSAS Αυτές οι οδηγίες είναι για Windows XP. Χρησιμοποιήστε το JSAS - Joomla Stand Alone Server για να εγκαταστήσετε το Joomla στον υπολογιστή σας. 1. Πηγαίνετε στο και κατεβάστε την εγκατάσταση JSAS στον υπολογιστή σας. 2. Τρέξτε το αρχείο που κατεβάσατε και μετά ακολουθήστε τα βήματα της εγκατάστασης. 3. Όταν εγκατασταθεί το JSAS, έχετε όλα τα εργαλεία για να τρέξετε το Joomla στον υπολογιστή σας. 4. Ανοίξτε το εικονίδιο JSAS το οποίο τοποθετήθηκε στην επιφάνεια εργασίας σας. 5. Ένα νέο παράθυρο θα ανοίξει, με συγκεκριμένες οδηγίες για να δημιουργήσετε μια ιστοσελίδα Joomla. 6. Πηγαίνετε στον έλεγχο προ-εγκατάστασης παρακάτω για να ολοκληρώσετε την εγκατάσταση Joomla. Διαδικασία Εγκατάστασης Joomla Fantastico: Πρώτα, βεβαιωθείτε ότι ο Web Host σας έχει Fantastico ή κάποιο άλλο Auto-install ενεργοποιημένο. 1. Κάντε Log in στο hosting control panel. 2. Βρείτε το εικονίδιο Fantastico και κάντε κλικ επάνω του. 13/70

14 3. Βρείτε το Joomla και κάντε κλικ επάνω του. 4. Το επόμενο βήμα είναι να βρείτε το CMS. 5. Τώρα είναι ώρα να ορίσετε το μονοπάτι της εγκατάστασης. Βεβαιωθείτε ότι το μονοπάτι εγκατάστασης του Joomla είναι ρίζα (αυτό σημαίνει ότι το Joomla θα εγκατασταθεί σε και όχι σε κάτι σαν 14/70

15 6. Επιλέξτε τον κωδικό χρήστη και το password και γράψτε τους σε ένα κομμάτι χαρτί ώστε να μην τους ξεχάσετε. 7. Συμπληρώστε το σας και το όνομα της ιστοσελίδας. 8. Αφού συμπληρώσετε όλες τις λεπτομέρειες, κάντε κλικ επάνω στο Εγκατάσταση. Τελειώσατε, το Joomla εγκαταστάθηκε! Έλεγχος προ-εγκατάστασης Joomla Όταν τρέξετε την ιστοσελίδα Joomla για πρώτη φορά, θα πρέπει να ακολουθήσετε έναν οδηγό και να συμπληρώσετε ονόματα χρήστη passwords. Εάν χρησιμοποιείτε το JSAS θα έχετε λάβει αυτήν την πληροφορία στην τελευταία οθόνη της εγκατάστασης Joomla, εάν κάνετε εγκατάσταση σε έναν web server, θα πάρετε πληροφορίες από τον host σας ή στο Fantastico προτού εγκαταστήσετε το Joomla. 1. Πηγαίνετε στην ιστοσελίδα Joomla. Εάν χρησιμοποιείτε το JSAS, ανοίξτε το και επιλέξτε ποια σελίδα Joomla θέλετε να τρέξετε. Εάν είστε online, πηγαίνετε στην αρχική σελίδα: (βεβαιωθείτε ότι το εγκαταστήσατε σωστά). 15/70

16 2. Θα πρέπει τώρα να δείτε τον έλεγχο προ-εγκατάστασης που δόθηκε από το Joomla. Βεβαιωθείτε ότι όλα στην δεξιά στήλη είναι ΠΡΑΣΙΝΑ. Κάντε κλικ στο επόμενο. 3. Μια άλλη οθόνη εμφανίζεται σχετικά με την άδεια χρήσης. Κάντε κλικ στο επόμενο. 4. Θα σας ζητηθεί τώρα να βάλετε τις λεπτομέρειες σας. 5. Πάρτε ένα κομμάτι χαρτί και γράψτε τα ακόλουθα: o Hostname (συνήθως "localhost") o MySql user name o MySql password o MySql Database Name 6. Μετά το Joomla θα σας ζητήσει να επιβεβαιώσετε τις ρυθμίσεις. Πατήστε ok. 7. Εάν έχετε βάλει σωστά τις ρυθμίσεις, θα σας ζητηθεί να βάλετε το όνομα της ιστοσελίδας σας. 8. Μια νέα οθόνη θα εμφανιστεί and you should enter your domain name, and password. 16/70

17 Βεβαιωθείτε ότι γράφετε τα πάντα σε ένα κομμάτι χαρτί! 9. Το Joomla έχει εγκατασταθεί. Όμως, θα πρέπει να κάνετε ένα τελευταίο πράγμα προτού κάνετε login. 10. Θα πρέπει να σβήσετε ένα αρχείο που ονομάζεται Εγκατάσταση στην ιστοσελίδα σας Joomla. Προσέξτε να μην σβήσετε όλη την σελίδα Joomla! 11. Πηγαίνετε στο σύστημα διαχείρισης αρχείων (εάν χρησιμοποιείτε το JSAS) ή το πρόγραμμα FTP (εάν το Joomla είναι online) και πηαγαίνετε στο αρχείο που έχει ακριβώς το ίδιο όνομα με την ιστοσελίδα που βάλατε στο βήμα Τώρα βρείτε το αρχείο εγκατάστασης και σβήστε το. Συγχαρητήρια! Μπορείτε τώρα να κάνετε log in! Βήμα 3 : Χτίσιμο και Διαχείριση του Περιεχομένου της ιστοσελίδας Το Joomla οργανώνει το περιεχόμενο διαφορετικά από ό,τι είναι οργανωμένα με μια ιστοσελίδα HTML. Η κύρια διαφορά είναι ότι ιστοσελίδες με Joomla δεν υπάρχουν. Σημαίνει ότι υπάρχουν Αντικείμενα Μενού και Ενότητες, οι οποίες επισυνάπτονται στα Αντικείμενα Μενού. Έτσι κάθε σελίδα Joomla που βλέπετε στον περιηγητή σας προέρχεται από μια βάση δεδομένων. Αυτού του είδους η οργάνωση, δίνει στο Joomla κάποια πλεονεκτήματα, και μπορείτε να κάνετε περισσότερα σε πιο σύντομο χρονικό διάστημα. Διαχείριση Περιεχομένου και Προσθήκη Τμημάτων και Κατηγοριών Το Joomla οργανώνει το Περιεχόμενο σε Τμήματα, σε αυτά τα Τμήματα υπάρχουν κατηγορίες και σε αυτές τις κατηγορίες υπάρχουν Αντικείμενα Περιεχομένου. Προσθήκη Τμήματος 1. Κάντε Log στην περιοχή διαχείρισης. 2. Πλοηγηθείτε στο Περιεχόμενο, και μετά επιλέξτε Διαχείριση Τμήματος 17/70

18 3. Κάντε κλικ επάνω στο Νέο για να δημιουργήσετε ένα Νέο Τμήμα. 4. Στο πεδίο Τίτλος εισάγετε το όνομα του τμήματος. 5. Στο πεδίο Τμήμα εισάγετε το όνομα που θέλετε να είναι ορατό από τους επισκέπτες στην κεφαλίδα της σελίδας. 6. Πατήστε Αποθήκευση. Τώρα έχετε ένα καινούργιο τμήμα. Θα πρέπει να δημιουργήσετε τουλάχιστον μια κατηγορία για κάθε τμήμα. Προσθήκη Κατηγορίας 1. Πηγαίνετε στο Περιεχόμενο, και επιλέξτε Διαχείριση Κατηγορίας 2. Κάντε κλικ επάνω στο Νέο για να δημιουργήσετε μια Νέα Κατηγορία 3. Στο πεδίο Τίτλος είσάγετε το όνομα της κατηγορίας που θα είναι ορατό από εσάς στην περιοχή διαχείρισης. 4. Στο πεδίο Κατηγορία εισάγετε το όνομα που θέλετε να είναι ορατό από τους επισκέπτες στην κεφαλίδα της σελίδας. 5. Υπάρχει ένα αναπτυσσόμενο μενού που ονομάζεται Τμήμα. Επιλέξτε σε Τμήμα θέλετε να δημιουργήσετε τη νέα σας κατηγορία. 6. Πατήστε Αποθήκευση. Τώρα έχετε μια νέα κατηγορία. Σημείωση: Τα Τμήματα και οι Κατηορίες δεν είναι άμεσα ορατά στην ιστοσελίδα σας Joomla. Κρατούν απλά χώρο για αντικείμενα Περιεχομένου (Content Items). Διαβάστε παρακάτω πως μπορείτε να τα δημιουργήσετε. Διαχείριση Περιεχομένου και Προσθήκη Αντικειμένων Περιεχομένου Τα Αντικείμενα Περιεχομένου είναι παρόμοια με το κύριο σώμα των κλασσικών σελίδων 18/70

19 HTML. Για να τα δημιουργήσετε: 1. Πλοηγηθείτε στο Περιεχόμενο, και επιλέξτε Όλα τα Αντικείμενα Περιεχομένου 2. Κάντε κλικ επάνω στο Εικονίδιο Νέου Αντικειμένου 3. Εισάγετε το νέο Τίτλο Περιεχόμενο Αντικειμένων 4. Επιλέξτε το Τμήμα και Κατηγορία που θέλετε να τοποθετήσετε το αντικείμενο περιεχομένου. 5. Προσθέστε μια Εισαγωγή και Κυρίως κείμενο. Διαχείριση Περιεχομένου και Προσαρμογή Αρχικής Σελίδας Joomla Όλα τα αντικείμενα Περιεχομένου μπορούν να ρυθμιστούν ώστε να φαίνονται στην Αρχική Σελίδα. Μπορείτε να τα προσαρμόσετε ως εξής: 1. Πηγαίνετε στο Περιεχόμενο, και επιλέξτε Όλα τα Αντικείμενα Περιεχομένου. 2. Για κάθε Αντικείμενο Περιεχομένου μπορείτε να ορίσετε αν θα δημοσιευτεί ή όχι στην Αρχική Σελίδα. Κάντε κλικ επάνω στο Κόκκινος Σταυρός ή στο Πράσινο Τικ στον πίνακα Όλα τα Αντικείμενα Περιεχομένου (Στήλη Αρχικής Σελίδας). 3. Αφού δημοσιευτούν κάποια αντικείμενα, μπορείτε να τα προσαρμόσετε και να θέσετε την σειρά εμφάνισης πηγαίνοντας στο Περιεχόμενο, και επιλέγοντας Διαχείριση Αρχικής Σελίδας Βήμα 4: Μετακίνηση της σελίδας Joomla από το JSAS σε έναν Web Server Ετοιμάστε τον Web hosting λογαριασμό σας 1. Κάντε εγκατάσταση ενός νέου αντιγράφου του Joomla στον web server σας. 19/70

20 2. Όταν τελειώσετε και μπορείτε να δείτε την Joomla ιστοσελίδα online, πηγαίνετε εκεί και συνεχίστε. Μεταφορτώστε την τοπική ιστοσελίδα στον web server 1. Ανοίξτε το πρόγραμμα FTP 2. Συνδεθείτε στον host. 3. Θα δείτε δύο παράθυρα. Το ένα είναι για τοπικούς φακέλους και το άλλο για τους online φακέλους. 4. Στους τοπικούς φακέλους, περιηγηθείτε στην ιστοσελίδα σας στον φάκελο Joomla Stand Alone Server στον σκληρό σας δίσκο. Συνήθως βρίσκεται στο C:\Program Files\JSAS\http_root\www\xxx - name of your website. 5. Εάν δείτε τον διαχειριστή, cache, και τα περιεχόμενα φακέλου, τότε είστε στον σωστό φάκελο. 6. Τώρα που έχετε και τα δύο παράθυρα έτοιμα, επιλέξτε όλους τους τοπικούς φακέλους εκτός από τον configuration.php. 7. Μεταφορτώστε τους φακέλους στον web server. Εξαγωγή της βάσης δεδομένων Joomla με τον PHP MyAdmin 1. Ανοίξτε το JSAS και κάντε κλικ επάνω στο εικονίδιο διαχειριστή (admin). Στα δεξιά θα εμφανιστούν κάποιες επιλογές. 20/70

21 2. Κάντε κλικ επάνω στο PHP MyAdmin για να το ξεκινήσετε. 3. Από τα αριστερά, επιλέξτε την βάση δεδομένων που θέλετε να εξάγετε. 4. Κάντε κλικ επάνω στο Εξαγωγή (export). 5. Τώρα θα πρέπει να επιλέξετε ποιους πίνακες θέλετε να εξάγετε. Κάντε κλικ στο επιλογή όλων. Μόλις επιλεχθούν, θα χρωματιστούν. 6. Τσεκάρετε το Προσθήκη Πίνακα (Add Drop Table). 21/70

22 7. Επιλέξτε Αποθήκευση Αρχείου ως (Save as File) και κάντε κλικ στο Go. Αυτό θα ανοίξει το Αποθήκευση σε ένα παράθυρο διαλόγου. 8. Αποθηκεύστε το στον σκληρό σας δίσκο. Εισάγοντας την βάση δεδομένων Joomla σε έναν web server με PHP MyAdmin 1. Τώρα ανοίξτε τον PHP MyAdmin στον web server σας(θα πρέπει να είναι στον πίνακα ελέγχου). 2. Από τα αριστερά, επιλέξτε την βάση δεδομένων που θέλετε να κάνετε εξαγωγή. 3. Επιλέξτε Εισαγωγή (Import). 4. Περιηγηθείτε στο αρχείο.sql που μόλις αποθηκεύσατε στον σκληρό σας δίσκο (την βάση δεδομένων σας). 5. Πατήστε στο Go. 6. Η βάση δεδομένων σας έχει τώρα εισαχθεί. Ελέγξτε την ιστοσελίδα σας. Θα πρέπει τώρα να δουλεύει online. Έχετε τώρα δημιουργήσει την ιστοσελίδα σας χρησιμοποιώντας το Joomla! 22/70

23 5 ΧΡΗΣΙΜΑ ΕΡΓΑΛΕΙΑ ΚΑΙ ΠΗΓΕΣ ΓΙΑ ΝΑ ΣΑΣ ΒΟΗΘΗΣΟΥΝ ΝΑ ΧΤΙΣΕΤΕ, ΝΑ ΤΕΛΕΙΟΠΟΙΗΣΕΤΕ ΚΑΙ ΝΑ ΣΥΝΤΗΡΗΣΕΤΕ ΤΗΝ ΙΣΤΟΣΕΛΙΔΑ ΣΑΣ 5.1 Προτάσεις δωρεάν Web Host Πολλές εταιρίες προσφέρουν δωρεάν υπηρεσίες web hosting. Αυτό περιλαμβάνει δωρεάν χώρο στον web server, βασικά εργαλεία χτισίματος μιας ιστοσελίδας, ή μια δωρεάν διεύθυνση ηλεκτρονικού ταχυδρομείου. Οι περισσότερες εταιρίες hosting απαιτούν να βάζετε ένα banner τους στο πάνω μέρος κάθε σελίδας. Επίσης, πολλές περιορίζουν την χρήση του domain name που έχετε ή σχεδιάζετε να αγοράσετε. Εάν αυτά είναι πολύ περιορισμένα για τις ανάγκες σας, ίσως να θέλετε να σκεφτείτε την αγορά υπηρεσιών hosting χαμηλού κόστους. Προτάσεις για δωρεάν web hosts: Google Sites Η Google παρέχει δωρεάν webhosting για τους πελάτες της στα Google Sites. Παρέχουν έναν αριθμό από υποδείγματα ιστοσελίδων για να σας βοηθήσουν. Οι εικόνες, τα βίντεο, τα "gadgets" και το υπόλοιπο περιεχόμενο μπορεί να προστεθεί εύκολα. Οι σελίδες μπορούν να είναι δημόσιες ή ιδιωτικές. Free Servers Το FreeServers.com παρέχει δωρεάν χώρο 20 MB. Εάν έχετε ένα "com" ή ένα διεθνές domain name (π.χ. ".ca, ".uk"),το FreeServers θα σας παρέχει υπηρεσίες δωρεάν Προτάσεις για Web Host επί πληρωμή Από το να χρησιμοποιήσετε μια δωρέαν υπηρεσία web hosting και να πρέπει να έχετε διαφημιστικά banner σε κάθε μια από τις σελίδες σας, μπορείτε να νοικιάσετε χώρο σε έναν web server από τις διάφορες εταιρίες που προσφέρουν τέτοια υπηρεσία. Χιλιάδες εταιριών στο διαδίκτυο προσφέρουν μια ποικιλία υπηρεσιών web, και τα κόστη ποικίλουν αντίστοιχα. Προτού αποφασίσετε για τον πάροχο τέτοιων υπηρεσιών, αναρωτηθείτε τα παρακάτω: 1. Παρέχει ο πάροχος αξιόπιστη υπηρεσία; 2. Υποστηρίζει το λογισμικό που χρησιμοποιείτε; 3. Παρέχεται καλή τεχνική υποστήριξη γρήγορα; 4. Παρέχει δυνατότητες e-business; 5. Πόσος χώρος και ευρωζωνικότητα θα απαιτηθούν; 6. Θα χρειαστεί ένας κανονικός server ή ένας εικονικός είναι αρκετός; 7. Τι πακέτα είναι διαθέσιμα; 23/70

24 Ο επίλογος είναι να γνωρίζεις τις ιδιαίτερες απαιτήσεις σου ώστε να επιλέξεις τον κατάλληλο παροχο. Μην πληρώσεις για υπηρεσίες που δεν χρειάζεσαι και κάνε έλεγχο στην ποιότητα του server συχνά. 5.3 Διαδικτυακά Domain Names Ένα domain name (διεύθυνση ιστοσελίδας) είναι μοναδικό για σένα ώστε οι άνθρωποι να μπορούν να δουν την ιστοσελίδα σου στο διαδίκτυο. Είναι αυτό που βλέπεις μετά από τα γράμματα www. στον περιηγητή σου αυτό που ακολουθεί μετά το στο σου. Εάν έχεις ήδη ένα domain name μπορείς να χρησιμοποιήσεις αυτό. Οι διευθύνσεις ιστοσελίδας που είναι εύκολο να τις θυμάσαι είναι ένα πολύτιμο θέμα που μπορεί να αγοραστεί και να πουληθεί. Ευτυχώς, πολλές ευφάνταστες ιστοσελίδες είναι ακόμα διαθέσιμες. Για παράδειγμα, το facebook.com είναι ωραίο και δεν έχει να κάνει με την κοινωνική δικτύωση. Πάντα, να θυμάσαι τα παρακάτω για το domain name σου: Να είναι απλό Όπου είναι δυνατόν να το καταχωρείς ως.com Να είναι σύντομο Να το καταχωρήσεις για περισσότερο από 2 χρόνια Μερικές εταιρίες παροχής web hosting παρέχουν ένα εικονικό domain name με μικρό ή καθόλου κόστος, με την προϋπόθεση ότι χρησιμοποιείς τις υπηρεσίες τους web hosting. 5.4 Διαλέγοντας το Domain Name σου Εάν θέλεις να έχεις μια παρουσία στο διαδίκτυο, το domain name (διεύθυνση ιστοσελίδας) σου είναι από τις πιο σημαντικές αποφάσεις που χρειάζεται να πάρεις. Το domain name σου θα πρέπει να είναι εύκολο για τους ανθρώπους να το θυμούνται για να μπορούν να βρουν την ιστοσελίδα σου. Ο χρυσός κανόνας είναι να κρατήσεις το domain name σου σύντομο: θα πρέπει να έχεις στο μυαλό σου ότι οι άνθρωποι θα πρέπει να είναι ικανοί να το θυμούνται.προσπάθησε να καταχωρήσεις το συντομότερο όνομα το οποίο οι πελάτες σου και οι επισκέπτες σου θα συνδυάζουν με την ιστοσελίδα σου. Υπάρχουν πολλές διαφορετικές επεκτάσεις διαθέσιμες. Για τις εταιρίες, η καλύτερη ιδέα είναι η κατάληξη.com. Είναι η πρώτη επέκταση που οι άνθρωποι δοκιμάζουν όταν περιηγούνται στο διαδίκτυο. Επίσης, αφού είναι μια από τις πιο παλιές επεκτάσεις, μια διεύθυνση.com δείχνει ότι η εταιρία σου έχει ήδη παρουσία στο διαδίκτυο. Μην ξεχάσεις να καταχωρήσεις το όνομα Domain όσο το δυνατόν συντομότερα. Πάντα να έχεις στο μυαλό σου ότι τα domain names μπορούν να χρησιμοποιήσουν μόνο γράμματα, αριθμούς, και παύλες. Τα διαστήματα και τα σύμβολα δεν επιτρέπονται. Επίσης, τα domain names δεν είναι case sensitive. 24/70

25 5.5 Μεταφόρτωση της Ιστοσελίδας Η αντιγραφή αρχείων από τον σκληρό σου δίσκο στον server είναι μια απλή διαδικασία. Ο πάροχος θα σε ενημερώσει για το όνομα του directory (καταλόγου) στον σκληρό σου δίσκο, όπου τα αρχεία είναι αποθηκευμένα και ονόματα συγκεκριμένων αρχείων πρόκειται να μεταφορτωθούν. Αφού έχετε μεταφορτώσει όλα τα αρχεία σας, θα πρέπει να ελέγξετε την σελίδα σας στον server και να βεβαιωθείτε ότι λειτουργεί σωστά και ότι όλα τα αρχεία έχουν μεταφορτωθεί κατάλληλα. 5.6 Προώθηση της Ιστοσελίδας Οι περισσότεροι developers ιστοσελίδων νομίζουν ότι εάν φτιάξεις μια ιστοσελίδα, τότε η κίνηση θα ξεκινήσει και οι άνθρωποι θα αρχίσουν να περιηγούνται στην ιστοσελίδα. Τα πράγματα δεν είναι τόσο απλά. Θα πρέπει να προωθήσεις/διαφημίσεις την ιστοσελίδα σου. Η προώθηση μιας ιστοσελίδας μπορεί να περιλμβάνει, για παράδειγμα, την καταχώρηση του URL (διεύθυνση) σε μια ή περισσότερες μηχανές αναζήτησης και πόρταλς. Οι μηχανές αναζήτησης μπορούν να είναι εθνικές, διεθνείς σε συγκεκριμένο θέμα. Αναφορικά με τους στόχους σου, ίσως να θέλεις επίσης να καταχωρήσεις σε μερικές μηχανές αναζήτησης, διεθνείς, τοπικές, ή θεματικές. Μπορείς να προσθέσεις το URL σου σε κάθε μεγάλη μηχανή αναζήτησης κάνοντας κλικ παρακάτω: 1. Προσθήκη URL στο Google 2. Προσθήκη URL σε Open Directory Εναλλακτικά, μπορείς να χρησιμοποιήσεις την υπηρεσία υποβολής URL για να καταχωρήσεις την ιστοσελίδα σου με πολλαπλές μηχανής αναζήτησης άμεσα. Οι μηχανές αναζήτησης χρησιμοποιούν διαφορετικούς αλγόριθμους, όμως, σε γενικές γραμμές η καταλογοποίηση γίνεται με βάση τον αριθμό των φορών που συγκεκριμένες λέξεις ή συνδυασμοί λέξεων βρίσκονται στον τίτλο, στην επικεφαλίδα και στο κυρίως σώμα μιας ιστοσελίδας. Ο τίτλος και η πρώτη παράγραφος στην σελίδα σου είναι σημαντικά για λόγους καταλογοποίησης. 5.7 Έλεγχος της κίνησης στο διαδίκτυο Είναι πολύ σημαντικό να ακολουθείς στατιστικά τα ίχνη των επισκεπτών σου στην ιστοσελίδα σου. Το λογισμικό παρακολούθησης κίνησης (Web tracking) παρέχει σημαντικές πληροφορίες για τους επισκέπτες της ιστοσελίδας σου, οι οποίες μπορούν να σε βοηθήσουν να να βελτιώσεις το περιεχόμενο της. Οι καλές πληροφορίες θα σε βοηθήσουν να αναπτύξεις καλές στρατηγικές οι οποίες θα μειώσουν τα έξοδα σου και θα αυξήσουν τα εισοδήματά σου. Ένας καλός μετρητής επισκέψεων απαντά στα ακόλουθα: 1. Από ποιες χώρες προέρχονται οι επισκέπτες 2. Ποια μηχανή αναζήτησης χρησιμοποιήσαν για να βρουν την ιστοσελίδα 25/70

26 3. Ποιες λέξεις ή φράσεις έψαξαν 4. Ποιες ιστοσελίδες και URLs στέλνουν κίνηση 5. Ποιες σελίδες σου είναι οι περισσότερο και λιγότερο δημοφιλείς Θα πρέπει να αναλύεις συχνά τα στατιστικά της ιστοσελίδας σου και θα ανακαλύψεις πολλά. Για παράδειγμα, πιθανόν να βρεις ότι μόνο μερικές μηχανές αναζήτησης σου στέλνουν την περισσότερη από την κίνηση επισκεπτών σου. Πιθανόν να ανακαλύψεις ότι μόνο λίγες από τις σελίδες σου λαμβάνουν το 90% των επισκέψεων. Είναι σημαντικό να χρησιμοποιήσεις αυτές τις πληροφορίες για να κάνεις βελτιώσεις και να αναπτύξεις στρατηγικές οι οποίες θα βελτιώσουν την ορατότητα της ιστοσελίδας σου στις μεγαλύτερες μηχανές αναζήτησης. 5.8 Κερδίζοντας εισόδημα Η ιδέα είναι επίσης να κερδίσεις χρήματα από μια ιστοσελίδα. Ένας εύκολος τρόπος είναι να συμμετάσχεις σε ένα πρόγραμμα affiliate και να βάζεις διαφημίσεις με banner στην ιστοσελίδα σου. Υπάρχουν πολλές εταιρίες με διαφημίσεις banner στον χώρο και πολλά μοντέλα αποζημίωσης χρησιμοποιούνται. Κάποιες εταιρίες πληρώνουν τον εκδότη της ιστοσελίδας κάθε φορά που μια διαφήμιση εμφανίζεται στην ιστοσελίδα του. Εάν ένας επισκέπτης της ιστοσελίδας σου κάνει κλικ σε μια διαφήμιση και έπειτα αγοράσει ένα προϊόν, θα λάβεις ένα ποσοστό από την τιμή πώλησης. Είναι σημαντικό να βρεις μια εταιρία με κύρος που πληρώνει λογικά ποσοστά και κάνει άμεσες πληρωμές. Για να σε δεχτούν ως affiliate, οι περισσότερες μεγάλες εταιρίες στην βιομηχανία της διαφήμισης μέσω banner θα απαιτήσουν η ιστοσελίδα σου να καλύπτει κάποιες μίνιμουμ απαιτήσεις όπως οι παρακάτω: 1. Η ιστοσελίδα να μην είναι ανεβασμένη σε κάποιον δωρεάν server. Θα πρέπει επίσης να έχει το δικό της domain name. 2. Η ιστοσελίδα να λαμβάνει έναν μίνιμουμ αριθμό επισκέψεων κάθε μήνα. 3. Το περιεχόμενο να είναι πρωτότυπο, νόμιμο και κοινωνικά αποδεκτό. Όταν θα επιλέξετε μια εταιρία με διαφημίσεις banner, οι παρακάτω ερωτήσεις θα πρέπει να ερωτηθούν: 1. Ποιο μοντέλο πληρωμής ακολουθούν; Π.χ κόστος με το κλικ (CPC), κόστος ανά 1000 προβολές, (CPM), προμήθεια με κάθε πώληση. 2. Γίνονται οι πληρωμές μηνιαία ή κρατώνται μέχρι να φτάσει ένα ορισμένο ποσό; 3. Ποιες εταιρίες αντιπροσωπεύει η εταιρία με διαφημίσεις banner; Τι προϊόντα πωλούν; Πόσο συμβατά είναι αυτά τα προϊόντα με το περιεχόμενο της ιστοσελίδας σου; 4. Τι στατιστικά παρέχουν; (π.χ. διαφημίσεις που προβάλλονται, ποσοστό κλικ, εισόδημα) 5. Πόσο γρήγοροι και αξιόπιστοι είναι οι servers που παρέχουν τα banners; 6. Τι τύπους διαφημίσεων υποστηρίζουν; (π.χ banners, κουμπιά, cubes, pop-ups) 26/70

27 7. Σου επιτρέπουν να επιλέξεις συγκεκριμένες κατηγορίες διαφημίσεων; (π.χ. αλκοόλ, τσιγάρα, τζόγος, διαφημίσεις pop-up) 5.9 Εξέλιξη της Ιστοσελίδας Η εξέλιξη της εφαρμογής πρέπει να είναι ένα βασικό κομμάτι της στρατηγικής σου για την εξέλιξη της ιστοσελίδας. Πόσες φορές έχεις επισκεφτεί μια ιστοσελίδα μόνο για να βρεις ένα γραφικό να σου λέει «υπο κατασκευή»; Φυσικά, όλες οι ιστοσελίδες είναι συνεχώς υπό κατασκευή. Το να χτίζεις μεγάλους όγκους κίνησης, είναι μια από τις πιο δύσκολες και χρονοβόρες διαδικασίες, ακόμα και αν η ιστοσελίδα σου είναι υψηλής ποιότητας και καταχωρημένη σε όλες τις μεγάλες μηχανές αναζήτησης. Συμπερασματικά, είναι ζωτικής σημασίας να δημοσιευτούν οι σελίδες σου γρήγορα, έστω και αν δεν είναι τέλειες. Υπάρχουν κάποια εκατομμύρια σελίδες οι οποίες δημοσιεύονται στο διαδίκτυο και οι αριθμοί μεγαλώνουν όλο και περισσότερο. Όσο πιο γρήγορα μεταφορτώσεις την ιστοσελίδα σου και εδραιώσεις την παρουσία σου, τόσο περισσότερη επισκεψιμότητα θα λάβεις Παγκόσμια Αγορά Για τους δημιουργούς εμπορικών ιστοσελίδων, είναι πολύ σημαντικό να σκέφτονται σφαιρικά. Πάντα να θυμάσαι ότι οι επισκέπτες της ιστοσελίδας σου ίσως να μην μιλούν καλά την αγγλική γλώσσα, ή να μην μοιράζονται την κουλτούρα σου και τις αξίες σου. Υπάρχουν πολλά εργαλεία διαθέσιμα για μετάφραση ιστοσελίδων από μια γλώσσα σε μια άλλη. Αν και οι μεταφράσεις δεν είναι τέλειες, σίγουρα παρέχουν μια πρώτη μετάφραση που μπορεί έπειτα να τελειοποιηθεί από κάποιον που χειρίζεται καλά την γλώσσα. Εάν δημοσιεύσεις μερικές σελίδες κλειδιά σε ξένες γλώσσες, θα καταλογοποιηθούν από τις μηχανές αναζήτησης με την χρήση των όρων της ξένης γλώσσας. Αυτό θα σου φέρει επιπλέον κίνηση. Μια άλλη εναλλακτική είναι να δημιουργήσεις σελίδες σε ξένες γλώσσες και αν παρέχεις links σε λογισμικό που μεταφράζει σελίδες δυναμικά από την μία γλώσσα στην άλλη Διαλέγοντας συνεργάτες Η ανάπτυξη μιας εμπορικής ιστοσελίδας μπορεί να απαιτεί διαφορετικές δεξιότητες. Για παράδειγμα, μπορεί να χρειαστείς τους παρακάτω συνεργάτες : 1. Έναν συγγραφέα για να γράψει τα περιεχόμενα της ιστοσελίδας 2. Έναν ερευνητή για να βρει πιθανές ιστοσελίδες για σύνδεσμο 3. Έναν σχεδιαστή ιστοσελίδων για να αναπτύξει γραφικά και περιήγηση 4. Έναν αναλυτή δεδομένων για να σχεδιάσει τους πίνακες στους οποίους θα αποθηκεύονται τα δεδομένα 27/70

28 5. Έναν προγραμματιστή για να γράψει Java, έγγραφα CGI ή άλλο περιεχόμενο λογισμικού 6. Έναν μεταφραστή 7. Έναν μαρκετίστα για να προωθήσει την ιστοσελίδα σου Εκτός εάν έχεις όλες τις απαραίτητες δεξιότητες για να χτίσεις μια εμπορική ιστοσελίδα, μπορείς να ψάξεις για συνεργάτες και να αναπτύξεις επιτυχημένες συνεργασίες. Μόλις έχεις εδραιώσει μια παρουσία στον ιστό και η ιστοσελίδα σου λαμβάνει μεγάλο όγκο κινήσεων, άλλοι σχεδιαστές ιστοσελίδων και εταιρίες θα σε προσεγγίσουν με ιδέες για συνεργασίες. Σε αυτήν την ταχέως μεταβαλλόμενη τεχνολογία, οι συνεργασίες είναι ιδιαίτερα σημαντικές. Είναι καλή πρακτική να ξεκινήσεις μια σχέση συνεργασίας σε μια μικρή και ανεπίσημη βάση. Εάν η συνεργασία αποδειχτεί αμοιβαία ωφέλιμη, τότε μπορεί να επεκταθεί και να γίνει πιο επίσημη. Η συνεργασία με ανθρώπους από το εξωτερικό μπορεί να είναι ιδιαίτερα αποδοτική καθώς άτομα σε αναπτυσσόμενα κράτη μπορεί να έχουν δυνατές τεχνικές δεξιότητες αλλά δεν έχουν πρόσβαση ή γνώση για πιο εξελιγμένες αγορές Web Analytics Το Web Analytics είναι μια ομάδα εργαλείων και μεθόδων που χρησιμοποιούνται για να καταλάβουμε τις αλληλεπιδράσεις μεταξύ των πελατών και την ιστοσελίδα μιας εταιρίας. Χρησιμοποιώντας δεδομένα από τον web server, βάσεις δεδομένων και άλλες πηγές, ο στόχος είναι να αναπτύξουν την επιχειρηματική νοημοσύνη σχετικά με τους πελάτες και την χρήση της ιστοσελίδας. Το Web Analytics μπορεί να χρησιμοποιηθεί για την αναγνώριση και αντιμετώπιση τεχνικών και προβλημάτων περιήγησης σε μια ιστοσελίδα. Χρησιμοποιείται επίσης για να καταλάβουμε καλύτερα τις μοναδικές ανάγκες του πελάτη, τα ενδιαφέροντα του και τις συνήθειες αγορών του. Το Web analytics μπορεί να βοηθήσει την αναγνώριση προβλημάτων στον σχεδιασμό ιστοσελίδας και τις ευκαιρίες Δημιουργοί Banner Είναι εύκολο να δημιουργήσεις ένα banner για να προωθήσεις την ιστοσελίδα σου. Μπορείς να χρησιμοποιήσεις: Animation Online Χρησιμοποιήσε το Animation Online για να δημιουργήσεις δωρεάν κινούμενα (animated) banners ή κινούμενα κουμπιά για διαφημίσεις, ανταλλαγές link, κλπ. CoolText Αυτή η σελίδα παρέχει φανταστικά εργαλεία για να δημιουργήσετε προσαρμοσμένα λογότυπα, κουμπιά, και bullets. Είναι διαθέσιμη μια μεγάλη ποικιλία από υποδείγματα και γραμματοσειρές. 28/70

29 3D TextMaker Αυτή η σελίδα δημιουργεί προσαρμοσμένα banners και κουμπία. Οι εικόνες δημιουργούνται με το 3D Text Maker και μπορούν να χρησιμοποιηθούν δωρεάν για προσωπικές ή εμπορικές σελίδες Dead Link Checkers Για να αποφύγετε την φτωχή κατάταξη στις μηχανές αναζήτησης, είναι σημαντικό να σβήσετε τους «νεκρούς συνδέσμους» από τις ιστοσελίδες. Μπορείτε να χρησιμοποιήσετε τα πακέτα λογισμικού, όπως το Microsoft FrontPage και το Expression Web, τα οποία περιλαμβάνουν την λειτουργία του να βρίσκουν «νεκρούς συνδέσμους». Ένας αριθμός δωρεάν τέτοιων ελεγκτών είναι διαθέσιμος στο διαδίκτυο, όπως: W3C Link Checker Αυτός ο ελεγκτής συνδέσμων είναι W3C's και εύκολος στην χρήση με την υπηρεσία αξιολόγησης HTML, βασιζόμενος σε SGML. Submit Express Το Submit Express προσφέρει έναν ελεγκτή νεκρών συνδέσμων και έναν αριθμό από άλλα εργαλεία για τον webmaster Υπηρεσίες Καταλόγων Εκτός από την καταχώρηση της ιστοσελίδας σου στις μεγαλύτερες μηχανές αναζήτησης, είναι σημαντικό να καταλογοποιηθεί στους μεγάλους καταλόγους του διαδικτύου. Για να βάλετε την ιστοσελίδα σας σε έναν κατάλογο, θα πρέπει να βρείτε μια κατάλληλη κατηγορία καταλόγου, να γράψετε μια σύντομη αλλά περιεκτική σύνοψη της ιστοσελίδας σας και να καταχωρήσετε το URL. Open Directory Το Open Directory αγοράστηκε από την Netscape τον Νοέμβριο του Χρησιμοποιεί εθελοντές επεξεργαστές για να καταλογοποιήσει τις καταχωρήσεις. Τα Lycos, AOL, AltaVista και HotBot χρησιμοποιούν αυτές τις λίστες καταλόγων από αυτήν την υπηρεσία. 29/70

30 Αναζητήσεις για Domain Name Checkdomain.com Το Checkdomain.com είναι ένα μέρος στον ίντερνετ για να ελέγξεις εάν το domain name (διεύθυνση/όνομα ιστοσελίδας) είναι διαθέσιμο για σχεδόν κάθε χώρα στον κόσμο. NameDroppers.com Το Namedroppers.com παρέχει μια μηχανή αναζήτησης domain name η οποία σου επιτρέπει να ψάξεις για domain names χρησιμοποιώντας πολλαπλές λέξεις κλειδιά Απόκτηση Domain (Ονόματος ιστοσελίδας) Η παρακάτω εταιρία παρέχει domain names με μικρό κόστος ή δωρεάν, με την προϋπόθεση ότι χρησιμοποιείς τις υπηρεσίες τους web hosting: Αναζητήσεις Ανταγωνισμού Όταν αναπτύσσεις μια ιστοσελίδα, είναι σημαντικό να έχεις γνώση του ανταγωνισμού. Marketleap Το εργαλείο μηχανή αναζήτησης Marketleap συγκρίνει τον όγκο των links της ιστοσελίδας σου με τον όγκο των links σε άλλες παρόμοιες ιστοσελίδες. Alexa Το Alexa είναι ένα φανταστικό εργαλείο για να αναγνωρίσεις και να μάθεις για τον ανταγωνισμό σου. Απλά πληκτρολόγησε το URL μιας σελίδας και δες πως κατατάσσεται. Backlink Watch Το εργαλείο webmaster θα σε αφήσει να δεις ποιες ιστοσελίδες συνδεόνται με συγκεκριμένες σελίδες. (π.χ backlinks) Page Hit Trackers Google Analytics Εισάγοντας λίγες γραμμές κωδικού σε κάθε σελίδα της ιστοσελίδας σου,το Google Analytics θα παράγει έναν πλούτο γραφικών και στατιστικών, συμπεριλαμβανομένων των μοναδικών επισκέψεων, τον αριθμό των μοναδικών επισκεπτών, με αναφορά στα URLs και με αναφορά στις μηχανές αναζήτησης. 30/70

31 Yahoo! Analytics Παρόμοιο με το Google Analytics, το Yahoo Analytics παρέχει χρήσιμες πληροφορίες για τις επισκέψεις στην ιστοσελίδα. Extreme Tracking Αυτό το προϊόν παρέχει βολικά αριθμούς σε σειρά, ποσοστά, στατιστικά, σύνολα και μέσους όρους. Παρέχει μια πλήρη ποικιλία από στατιστικά περιλαμβανομένων των δεδομένων σε λέξεις κλειδιά για να βρίσκουν την ιστοσελίδα σου Οδηγοί για Προγραμματισμό Υπάρχει ένας αριθμός καλών οδηγών προγραμματισμού διαθέσιμοι στο διαδίκτυο που μπορούν να σε βοηθήσουν με HTML, CGI και άλλες κοινές γλώσσες προγραμματισμού. Hypertext Mark-up Language Αυτός είναι ένας εξαιρετικός οδηγός HTML και XTML. PHP Εγχειρίδιο Η PHP είναι μια γλώσσα γραφής που ενσωματώνεται στην HTML όπως περίπου η Mirosoft's ASP (Active Server Pages). Αυτή η γλώσσα μπορεί να εκτελεί σε διαφορετικούς τύπους server, όχι μόνο σε Microsoft NT servers. Αυτό το εγχειρίδιο εξηγεί πώς να γράφεις δυναμικές ιστοσελίδες χρησιμοποιώντας αυτόν τον server και την συγκεκριμένη γλώσσα. PHP Χτίσιμο Αυτό παρέχει επιπλέον πληροφορίες για PHP developers. Μεταφραστές Ιστοσελίδων Το να παρέχεις πολύγλωσση υποστήριξη στην ιστοσελίδα σου μπορεί να είναι σημαντικό. Τα εργαλεία είναι τώρα διαθέσιμα στο διαδίκτυο για να μεταφράσεις εύκολα τις σελίδες στην αγγλική γλώσσα σε άλλες ξένες γλώσσες. Εάν και η ποιότητα της μετάφρασης δεν είναι τόσο καλή, τα εργαλεία μπορούν να παρέχουν μια πρώτη μετάφραση που μπορεί αργότερα να τελειοποιηθεί από κάποιον που έχει μητρική την γλώσσα. Yahoo's Babelfish 31/70

32 Αυτό το προϊόν μεταφράζει τις σελίδες από τα Αγγλικά σε: Γαλλικά, Ολλανδικά, Ισπανικά, Πορτογαλικά, Γερμανικά, Ιταλικά, Κινέζικα, Ιαπωνικά, Κορεάτικα, και Ρωσικά. Αυτή η υπηρεσία είναι δωρεάν. Web Page Ranking Υπάρχει μια ποικιλία από εργαλεία διαδικτύου που κάνουν έλεγχο για την κατάταξη των σελίδων στις μεγάλες μηχανές αναζήτησης. Μερικά εργαλεία κατάταξης αξιολογούν βασιζόμενα σε συγκεκριμένες αναζητήσεις. Η ανάλυση της δημοτικότητας ενός Link popularity είναι ένας από τους καλύτερους τρόπους για να «κατατάξεις» την ιστοσελίδα σου. Με λίγα λόγια, η δημοτικότητα ενός link αναφέρεται στον συνολικό αριθμό των links ή"των ψήφων" που μια μηχανή αναζήτησης έχει βρει στην ιστοσελίδα σου. LinkPopularity.com Αυτή η δωρεάν υπηρεσία παράγει ένα συνηθισμένο "Link Popularity Report (αναφορά δημοτικότητας)", αναφέροντας λεπτομερώς ποιες ιστοσελίδες συνδέονται με ένα συγκεκριμένο URL. Marketleap Visibility Index Αυτό το εργαλείο δημοτικότητας link είναι για να βοηθά τους προγραμματιστές των μηχανών αναζήτησης και τους online μαρκετίστες όχι μόνο να βρίσκουν ποιος συνδέεται με την ιστοσελίδα σου, αλλά επίσης να δημιουργήσουν μια αναφορά συγκριτικής αξιολόγησης ώστε να δείξουν πόσο γρήγορα εμφανίζεσαι στο διαδίκτυο συγκριτικά με τους ανταγωνιστές. Markup Validation Η υπηρεσία Markup Validation Service είναι ένας δωρεάν αξιολογητής από το World Wide Web Consortium (W3C) ο οποίος επιτρέπει στους χρήστες του διαδικτύου να ελέγχουν τα έγγραφα HTML και XHTML για markup. Η αξιολόγηση Markup είναι ένα σημαντικό βήμα για την βεβαίωση της τεχνικής ποιότητας των ιστοσελίδων.έχοντας κατά νου, ότι τα περισσότερα κείμενα στο διαδίκτυο είναι γραμμένα με την χρήση γλωσσών markup, αυτές προσδιορίζονται από τεχνικές προδιαγραφές, οι οποίες συνήθως περιλαμβάνουν μια επίσημη διαβαζόμενη από μηχανή γραμματική (και λεξιλόγιο). Αυτή η αξιολόγηση των εγγράφων μπορεί να βοηθήσει δραματικά, με την βελτίωση και την διασφάλιση της ποιότητάς τους, και μπορεί να σώσει πολύ χρόνο κα χρήμα. Η αξιολόγηση, δεν είναι ωστόσο, ούτε καθολικός έλεγχος ποιότητας, ούτε είναι αυστηρά ισοδύναμος με τον έλεγχο για συμμόρφωση με προδιαγραφές. 32/70

33 6 DREAMWEAVER CS4 6.1 Εξερευνώντας το Dreamweaver Τι είναι το Dreamweaver; Το Dreamweaver είναι ένα εξαιρετικό εργαλείο για κωδικοποίηση και ανάπτυξη και για νέους και για πεπειραμένους χρήστες. Παρέχει ένα δημιουργικό περιβάλλον για σχεδιαστές, και έγινε σύντομα το επιθυμούμενο πρόγραμμα για την δημιουργία και διαχείριση των ιστοσελίδων. Είτε σχεδιάζεις ιστοσελίδες, αναπτύσσεις περιεχόμενο για κινητά τηλέφωνα ή δημιουργείς πολύπλοκες εφαρμογές server-side, το Dreamweaver έχει κάτι να προσφέρει. Εικόνα 1.1 Γενική εικόνα Dreamweaver Το Dreamweaver έχει όλα όσα χρειάζεσαι για μια ολοκληρωμένη διαχείριση ιστοσελίδας, περιλαμβανομένων ικανοτήτων πρωτοκόλλου για μεταφορά built-in αρχείων, μεταξύ ενός σέρβερ και του τοπικού σου μηχανήματος, επαναχρησιμοποιούμενα αντικείμενα όπως τα υποδείγματα σελίδων και τα αντικείμενα βιβλιοθήκης, και μηχανισμούς ασφαλείας όπως οι αξιολογητές link και οι αναφορές ιστοσελίδας. Με την χρήση αυτών εργαλείων και άλλοι θα επιβεβαιώσουν ότι η ιστοσελίδα σου δουλεύει σωστά και φαίνεται ωραία. Εάν σχεδιάζεις ιστοσελίδες με Cascading Style Sheets, ο περιηγητής Compatibility Check και ο CSS Advisor θα σε βοηθήσουν να εντοπίσεις και να λύσεις οποιαδήποτε ζητήματα προβολών που μπορεί να εμφανιστούν σε σχέση με τους διαφορετικούς περιηγητές διαδικτύου. 33/70

34 Εικόνα 1.2 Προβολή κώδικα Dreamweaver Το Dreamweaver σε αφήνει να εργάζεσαι σε κώδικα code-only view ενός εγγράφου. Αυτός είναι ένας δυναμικός επεξεργαστής κειμένου. Μπορείς να επεξεργαστείς τον κώδικα HTML απευθείας, και να αλλάξεις προβολές για να δεις τα αποτελέσματα του κώδικα όσο δουλεύεις. Χαρακτηριστικά όπως κωδικός χρώματος, η οδόντωση και τα οπτικά βοηθήματα, κάνουν το Dreamweaver ένα τέλειο περιβάλλον για επεξεργασία κειμένου ή κωδικοποίηση για σχεδιαστές ιστοσελίδων σε κάθε επίπεδο. Εικόνα 1.3 Σελίδα καλωσορίσματος Dreamweaver και επιλογή τύπου αρχείου για ανάπτυξη 34/70

35 Για πιο έμπειρους developers, το Dreamweaver υποστηρίζει δημοφιλή κωδικοποίηση και γλώσσες κειμένων όπως η JavaScript, μαζί με γλώσσες σέρβερ όπως οι ColdFusion, PHP, και ASP.NET. Ειδικά μενού εισαγωγής και πινακες κωδικών σε βοηθούν να χτίσεις σελίδες και εφαρμογές στην γλώσσα της επιλογής σου. Σημείωση: Οι γλώσσες γραφής, όπως εκείνες που χρησιμοποιούνται για να χτίσουν ιστοσελίδες αλληλεπίδρασης ή ηλεκτρονικού εμπορίου, χωρίζονται σε δύο κατηγορίες: με προσανατολισμό στον πελάτη και με προσανατολισμό στον σέρβερ. Οι γλώσσες με προσανατολισμό στον πελάτη όπως η JavaScript τρέχουν στον περιηγητή, ενώ οι γλώσσες με προσανατολισμό στον σέρβερ όπως η ColdFusion απαιτούν ειδικό λογισμικό εγκατεστημένο στον σέρβερ. Χαρακτηριστικά Dreamweaver Εικόνα τύποι αρχείων του Dreamweaver Το Dreamweaver έχει τρεις διαφορετικές θεωρήσεις. Όταν επεξεργάζεσαι ένα έγγραφο, το Dreamweaver σε αφήνει να εργαστείς με Σχέδιο, Split, ή με Κώδικα. Μπορείς να αλλάξεις προβολή ανα πάσα στιγμή με ένα απλό κλικ στην μπάρα εργαλείων του εγγράφου. Η προβολή σχεδίου σε αφήνει να χτίσεις οπτικά, και να δεις τα πάντα να γίνονται πραγματικότητα όσο δημιουργείς τις σελίδες σου. Εικόνα 1.5 Ftp με Dreamweaver 35/70

36 Η ενσωματωμένη FTP σου επιτρέπει να μεταφορτώσεις εύκολα και να κατεβάσεις αρχεία σε έναν και από έναν σέρβερ χρησιμοποιώντας τον πίνακα ελέγχου drag-and-drop. Ή μπορείς να χρησιμοποιήσεις το Get/Put κουμπί ανά πάσα στιγμή για να ανεβάσεις σελίδες στις οποίες δουλεύεις. Δεν υπάρχει λόγος για ένα διαφορετικό λογισμικό. Το Dreamweaver επίσης παρέχει την λειτουργία Check In/Check Out και χαρακτηριστικά συγχρονισμού για εύκολη διαχείριση αρχείων. Οι πίνακες εισαγωγής παρέχουν εικονίδια για τα περισσότερα στοιχεία μια συνηθισμένης ιστοσελίδας σε έναν κατηγοριοποιημένο πίνακα ελέγχου. Αυτό σε αφήνει να προσθέσεις στοιχεία με ένα απλό κλικ. Οι επιπρόσθετοι πίνακες σου επιτρέπουν να βελτιώσεις κάθε στοιχείο της σελίδας ώστε να βεβαιωθείς ότι βλέπεις ακριβώς αυτό που θέλεις. Συμπεριλαμβανομένα στον πίνακα ελέγχου εισαγωγής είναι τα εργαλεία για την μορφοποίηση κειμένου, το χτίσιμο δειγμάτων και την δημιουργία σχεδίων. Μπορείς επίσης να προσαρμόσεις τα Αγαπημένα με τα πιο συχνά χρησιμοποιούμενα στοιχεία. Εικόνα 1.6 Εισαγωγή εικονιδίων για Web development 36/70

37 Τα προσαρμοσμένα σχέδια σου επιτρέπουν να αποθηκεύσεις συνδυασμούς και θέσεις των πινάκων και της μπάρας εργαλείων για εύκολη εύρεση ανά πάσα στιγμή. Μπορείς να αποθηκεύσεις πολλαπλά σχέδια για διαφορετικούς χρήστες ή να δημιουργήσεις διαφορετικά workspaces για συγκεκριμένα καθήκοντα, όπως η κωδικοποίηση ή ο σχεδιασμός σελίδων. Εικόνα 1.7 workspace layout Ο πίνακας CSS σου επιτρέπει να εκμεταλλευτείς τις επιλογές σχεδιασμού και μορφοποίησης που είναι διαθέσιμες από το Cascading Style Sheets. Αυτός ο πίνακας σου επιτρέπει να δημιουργήσεις, να επεξεργαστείς, και να διαχειριστείς στυλ on-the-fly από μια μοναδική τοποθεσία. 37/70

38 Εικόνα 1. 8 HTML και CSS πίνακας 6.2 Δημιουργία ενός εγγράφου Εικόνα 2.1 Οθόνη καλωσορίσματος Η ανάπτυξη ενός νέου εγγράφου μπορεί να γίνει όπως είδαμε μέσω της οθόνης καλωσορίσματος ή εναλλακτικά πατώντας Αρχείο Νέο. 38/70

39 Εικόνα 2.2 Δημιουργία ενός νέου αρχείου Κενή σελίδα: Αυτό σε αφήνει να επιλέξεις από 17 διαφορετικούς τύπους εγγράφων σχετιζόμενα με το διαδίκτυο. Εάν επιλέξεις <κανένα> στην στήλη σχεδιασμού, το Dreamweaver δημιουργεί μια σελίδα χωρίς περιεχόμενο άλλη από τον βασικό σκελετό του HTML που χρησιμοποιείται από κάθε ιστοσελίδα. Κενό Υπόδειγμα: Αυτό σε αφήνει να δημιουργήσεις ένα Dreamweaver υπόδειγμα από την αρχή. Σελίδα από Υπόδειγμα: Αυτό βάζει σε λίστα όλες τις σελίδες που έχεις προσδιορίσει με το Dreamweaver, μαζί με τα υποδείγματα που σχετίζονται με το καθένα. Χρησιμοποίησε αυτήν την επιλογή για να δημιουργήσεις μια παιδική σελίδα από ένα υπάρχον υπόδειγμα. Σελίδα από Δείγμα: Αυτό περιλαμβάνει μια επιλογή από φύλλα δειγμάτων στυλ που μπορούν να χρησιμοποιηθούν ως σημείο έναρξης για την δημιουργία του δικού σου. Προσφέρει επίσης μια ποικιλία από framesets. Άλλο: Αυτό δημιουργεί άλλα έγγραφα σχετιζόμενα με το διαδίκτυο, συμπεριλαμβανομένων των απλών αρχείων κειμένου Τεστάροντας την ιστοσελίδα μας Η ανάπτυξη μιας ιστοσελίδας ειδικά όταν χρησιμοποιεί δυναμική γλώσσα όπως η PHP απαιτεί πολύ τεστάρισμα. Για αυτόν τον λόγο ένα τοπικό τεστ του περιβάλλοντος βοηθάει με πολλούς τρόπους και τον developer και παρέχει πολλά πλεονεκτήματα όπως ασφάλεια, σταθερότητα, 39/70

40 ταχύτητα και βολικότητα. Υπάρχουν πολλά περιβάλλοντα για τεστάρισμα λογισμικού PHP που μπορείς να βρεις και να κατεβάσεις. Ένα από αυτά είναι το XAAMP για windows. Μπορείς να το κατεβάσεις και να το εγκαταστήσεις από εδώ here. Το λογισμικό είναι εύκολο να εγκατασταθεί και επίσης παρέχει οδηγίες για βοήθεια εάν υπάρξει πρόβλημα. Όταν εγκαθίσταται για πρώτη φορά, το Apache είναι ικανό να φιλοξενήσει μόνο μια ιστοσελίδα, η οποία αναγνωρίζεται σε ένα τοπικό περιβάλλον τέστ από το URL Για να παρακάμψουμε αυτόν τον περιορισμό, θα μπορούσαμε να αναπτύξουμε ιστοσελίδες σε υποφακέλους του βασικού σέρβερ Apache. Για παράδειγμα, εάν έχουμε δύο ιστοσελίδες που ονομάζονται σελίδα1 και σελίδα2 και δημιουργήσουμε ξεχωριστούς υποφακέλους για αυτές στον βασικό σέρβερ, θα μπορούμε να έχουμε πρόσβαση σε αυτές στο περιβάλλον τεστ στο και στο Δημιουργία προσδιορισμών για την ιστοσελίδα Αφού αποφασίσετε που θα βάλετε τα αρχεία της ιστοσελίδας σας, χρειάζεται να προχωρήσετε με την διαδικασία ρύθμισης του Dreamweaver. Η διαδικασία είναι η ίδια είτε αφορά το τεστάρισμα των φακέλων PHP τοπικά ή εξ αποστάσεως. Εικόνα 2.3 Προσδιορισμός της ιστοσελίδας Μπορούμε να ανοίξουμε το παράθυρο διαλόγου για τον προσδιορισμό της Σελίδας από το Μενού Σελίδας ή από το Εικονίδιο Σελίδας στην μπάρα Εφαρμογών. 40/70

41 Εικόνα 2.4 Προσδιορισμός σελίδας σε βασική και προχωρημένη επιλογή Είναι προτιμότερο να χρησιμοποιείτε και βασικές και προχωρημένες επιλογές στο παράθυρο διαλόγου για να προσδιορίσετε την ιστοσελίδα αφού η βασική επιλογή περιέχει μόνο τις αναγκαίες επιλογές Dreamweaver και Κείμενο Όταν δημιουργούμε μια νέα ιστοσελίδα, με ένα όνομα αρχείου.html ή.php, το Dreamweaver αυτομάτως εισάγει όλα τα απαραίτητα HTML στοιχεία για μια βασική σελίδα. Στην Προβολη Σχεδίασης, όπως μπορούμε να δούμε στην Εικόνα 2.3 μας παρουσιάζεται το πώς θα φαίνεται μια τελείως κενή σελίδα. Όμως, εάν τσεκάρουμε την προβολή Κώδικα ή Split, θα δούμε να δημιουργούνται βασικά στοιχεία σκελετού. Εικόνα 2.5 Βασικός κώδικας πίσω από μια κενή σελίδα Εάν ξεκινήσουμε να πληκτρολογούμε στην προβολή σχεδίασης το κείμενό μας, τότε αυτό θα εμφανιστεί ακριβώς όπως ένας επεξεργαστής κειμένου. Όπως μπορούμε να δούμε Εικόνα 2.4 το ίδιο κείμενο εμφανίζεται και στην προβολή κώδικα. Όταν πατήσουμε Enter, το Dreamweaver αναδιπλώνει το κείμενο <p> σε tags. 41/70

42 Εικόνα 2.6 πληκτρολόγηση κειμένου ορατού σε διαφορετικές προβολές Το κείμενο αυτόματα ευθυγραμμίζεται αριστερά και αναδιπλώνεται όταν φτάνει στην άκρη του παραθύρου εγγράφου. Φαίνεται σαν ένας επεξεργαστής κειμένου όμως χρειάζεται να πατήσουμε το enter μόνο όταν αλλάζουμε παράγραφο αλλιώς ίσως να έχουμε αφήσει κενό στην ιστοσελίδα μας από τις άδειες παραγράφους. Εικόνα 2.7 χρήση εισαγωγής και άδειων παραγράφων 42/70

43 Αντιγραφή και επικόλληση κειμένου Η αντιγραφή και επικόλληση κειμένου στο Dreamweaver μπορεί να γίνει από επεξεργασμένα αρχεία και άλλες εφαρμογές απευθείας στην προβολή σχεδίασης. Το Dreamweaver κρατά σχεδόν όλη την μορφοποιήση του κειμένου. Επίσης παρέχει επιλογές στην συμπεριφορά αντιγραφή-επικόλληση στον Πίνακα Ελέγχου. Για να το κάνουμε αυτό, χρειάζεται να πάμε στο μενού Επεξεργασία και να επιλέξουμε Προτιμήσεις. Έπειτα όπως μπορούμε να δούμε από την Εικόνα 2.6 επιλέγουμε τον τύπο επικόλλησης που θέλουμε να χρησιμοποιήσουμε. Εικόνα 2.8 Επιλογές για την αντιγραφή-επικόλληση Παρομοίως μπορούμε να εισάγουμε ολόκληρα αρχεία word στο Dreamweaver με το ίδιο αποτέλεσμα όπως η επιλογή αντιγραφή-επικόλληση. Για να το κάνουμε αυτό θα πρέπει να πάμε στο Αρχείο Εισαγωγή και να επιλέξουμε Αρχείο Word. Έπειτα ψάχνουμε στον σκληρό μας δίσκο για να βρούμε το έγγραφο που θέλουμε και επιλέγουμε να ανοίξει. Εικόνα 2.9 Εισαγωγή κειμένου από ένα ολόκληρο αρχείο word 43/70

44 6.2.4 Dreamweaver και Εικόνες Οι εικόνες εισάγονται στο HTML με ταμπέλα <img>, η οποία περιγράφει την πηγή του αρχείου της εικόνας, το ύψος του και το πλάτος του, και ένα εναλλακτικό κείμενο για μη οπτικούς περιηγητές. Όταν εισάγουμε μια εικόνα στο Dreamweaver είτε σε προβολή σχεδίασης είτε σε προβολή Κώδικα, το πρόγραμμα παράγει τον απαραίτητο κώδικα. Το μόνο πράγμα που πρέπει να κάνουμε μετά είναι να αποφασίσουμε που θα τοποθετήσουμε την εικόνα. Μπορούμε να εισάγουμε μια εικόνα στο περιβάλλον εργασίας μας με πολλούς τρόπους. Ενας συνηθισμένος είναι να σύρουμε και να αφήσουμε την εικόνα από τον πίνακα Assets. Φυσικά θα πρέπει πρώτα να προσδιορίσουμε το σημείο τοποθεσίας όπως δείξαμε στην Εικόνα 2.4. Εικόνα 2.10 Πίνακας Εναλλακτικά μπορούμε να χρησιμοποιήσουμε τον πίνακα Αρχείων για να βρούμε την εικόνα και να την σύρουμε και να την αφήσουμε στο έγγραφο. Όμως, αυτή η επιλογή δεν έχει την προεπισκόπηση σελιδοδεικτών του πίνακα Assets. Όπως μπορούμε να δούμε στην Εικόνα 2.10 μέσα στον πίνακα Assets μπορούμε να βρούμε assets χωρισμένα σε εννέα κατηγορίες. Εκτός από την προεπισκόπηση σελιδοδεικτών, ο πίνακας μας δείχνει τις διαστάσεις του αρχείου, το μέγεθος και τον τύπο. Με το κουμπί επεξεργασίας το οποίο μπορούμε να βρούμε στην κάτω δεξιά γωνία του πίνακα μπορούμε να αλλάξουμε την εικόνα προτού την βάλουμε μέσα στο έγγραφο του Dreamweaver. Το κουμπί ξεκινάει τα γραφικά του σχεδιαστικού προγράμματος που έχουμε εγκαταστήσει στον υπολογιστή μας. Μπορούμε να προσθέσουμε εικόνες ή άλλα assets στα αγαπημένα σε περίπτωση που θέλουμε να τα χρησιμοποιούμε συχνά και δεν θέλουμε να τα ψάχνουμε ανάμεσα σε πολλά άλλα 44/70

45 παρόμοια assets. Μπορούμε να αλλάξουμε τον τρόπο από τα αγαπημένα στην ιστοσελίδα επιλέγοντας τα κουμπιά στον πίνακα ελέγχου των Assets. Εκτός από το να σέρνουμε και να αφήνουμε μια εικόνα στον πίνακα ελέγχου Assets, μπορούμε να κάνουμε κλικ στο κουμπί εισαγωγής κάτω αριστερά του πίνακα ελέγχου για να εισάγουμε την εικόνα όπου είναι τοποθετημένος ο κέρσοράς μας μέσα στο παράθυρο εγγράφου Βάζοντας εικόνες στο Dreamweaver μέσου του συστήματος φακέλων Ένας άλλος τρόπος για να εισάγετε εικόνες είναι μέσω της Επιλογής Πηγής Εικόνας στο παράθυρο διαλόγου. Για να γίνει αυτό θα πρέπει να πάμε στο κεντρικό μενού του Dreamweaver και να επιλέξουμε Εισαγωγή Εικόνα. Figure 2.11 Select Image Source Dialog Box Εάν ξεκινήσαμε να αναπτύσσουμε μια ιστοσελίδα μέσω του Dreamweaver και δεν έχουμε προσδιορίσει στην ιστοσελίδα τις εικόνες που εισαγάγαμε, θα κωδικοποιηθούν κάπως έτσι: <img src="file:///c /vhosts/mywebsite/images/mountain.jpg" width="350" height="232" /> Εάν αποθηκεύσουμε αυτήν την σελίδα σε μια προσδιορισμένη ιστοσελίδα, το Dreamweaver αυτόματα θα αλλάξει την πηγή του φακέλου σε ένα σχετικό link, κάπως έτσι: <img src="../../mywebsite/images/mountain.jpg" width="350" height="232" /> Αυτή η αλλαγή θα επιτρέψει στην εικόνα να είναι ορατή όταν η ιστοσελίδα θα μεταφορτωθεί στον σέρβερ Εικόνες και εναλλακτικό κείμενο Αφού επιλέξουμε την εικόνα και πατήσουμε το κουμπί εισαγωγής, το Dreamweaver δείχνει την Εικόνα για τα στοιχεία στο παράθυρο Tag Accessibility Attributes. Αυτό το παράθυρο μας επιτρέπει να εισάγουμε εναλλακτικό κείμενο για να περιγράψουμε την εικόνα. Κάνοντας αυτό μπορούμε να βοηθήσουμε άτομα με προβλήματα όρασης τα οποία χρησιμοποιούν βοηθητική 45/70

46 τεχνολογία (όπως αναγνώστες οθόνης) να πλοηγηθούν στην ιστοσελίδα μας πιο αποτελεσματικά. Το πεδίο με την εκτενή περιγραφή με το URL συχνά χρησιμοποιείται για πολύπλοκες εικόνες ή διαγράμματα για να παρέχει μια πιο αναλυτική περιγραφή. Figure 2.12 Image Tag Accessibility Attributes Αφού συμπληρώσουμε το εναλλακτικό κείμενο πατάμε οκ και βλέπουμε την εικόνα που εισάγαμε. Εάν πατήσουμε ακύρωση, ξανά η εικόνα εισάγεται αλλά χωρίς το εναλλακτιικό κείμενο και την εκτενή περιγραφή Placeholder εικόνες Υπάρχουν πολλές περιπτώσεις όπου αναπτύσσουμε μια ιστοσελίδα και δεν έχουμε την κατάλληλη εικόνα για αυτήν. Σε αυτήν την περίπτωση χρησιμοποιούμε προσωρινά ένα placeholder. Με αυτόν τον τρόπο επιτυγχάνουμε να προσδιορίσουμε το μέγεθος της εικόνας και άλλα στοιχεία. Εμποδίζει επίσης το Dreamweaver από το να προβάλλει μια εικόνα «σπασμένη», όπως συμβαίνει εάν χρησιμοποιήσουμε το όνομα μιας εικόνας που δεν υπάρχει. Για να το κάνουμε αυτό, βάζουμε τον κέρσορα στο παράθυρο εγγράφου όπου θέλουμε να εισάγουμε την εικόνα και έπειτα επιλέγουμε Εικόνα Placeholder από το κοινό παράθυρο στην μπάρα εισαγωγής. Εικόνα 2.13 Βρίσκωντας της εικόνας το placeholder Αφού επιλέξουμε το placeholder βλέπουμε ένα παράθυρο διαλόγου με προσδιορισμούς για το placeholder. 46/70

47 Εικόνα 2.14 placeholder προσδιορισμοί Εισάγοντας ταινίες Flash Η εισαγωγή μιας ταινίας Flash στην ιστοσελίδα είναι πολύ παρόμοια με την εισαγωγή μιας εικόνας. Όμως, ο υπογραμμισμένος κώδικας είναι πολύ διαφορετικός. Η πρώτη αλλαγή είναι σχετικά μικρή. Τα υπομενού για Μέσα του μενου εισαγωγής και η κοινή μπάρα της εισαγωγής δεν αναφέρονται πλέον στο Flash, αλλά στο SWF. Αυτό συμβαίνει επειδή οι ταινίες που φτιάχνονται σε Flash ( χρησιμοποιούν την φόρμα SWF και τρέχουν τον περιηγητή Flash Player. Η προσέγγιση του Dreamweaver CS4 για flash αποφεύγει να χρησιμοποιεί την ταμπέλα <embed>, η οποία δεν είναι κομμάτι του κανονικού HTML. Ωθεί τους χρήστες να αναβαθμίσουν την έκδοσή τους του Flash Player εάν είναι αρκετά παλιά για να υποστηρίξει χαρακτηριστικά που χρησιμοποιούνται από τον φάκελο SWF. Για να εισάγουμε ένα SWF, χρειάζεται να βάλουμε τον κέρσορά μας στο παράθυρο εγγράφου όπου θέλουμε να βάλουμε την ταινία, και να επιλέξουμε SWF από το υπομενού Μέσων ή του κοινού κουμπιού της μπάρας εισαγωγής. Πλοηγηθείτε στον φάκελο SWF στον Φάκελο Επιλογής στο παράθυρο διαλόγου και πατήστε OK. Εικόνα 2.15 Εισάγοντας έναν φάκελο SWF 47/70

48 Αφού το κάνουμε αυτό βρίσκουμε τα χαρακτηριστικά προσβασιμότητας στο παράθυρο διαλόγου, όπου μπορούμε να βάλουμε έναν τίτλο, ένα κλειδί κωδικού και ένα tab index για την ταινία. Όλα τα αντικείμενα είναι προαιρετικά. Όπως με τις εικόνες, κάνοντας κλικ πάνω στο ακύρωση δεν σταματάει την εικόνα από το να εισαχθεί μέσα στην σελίδα, το μόνο που κάνει είναι να αγνοεί τα χαρακτηριστικά προσβασιμότητας. Από προεπιλογή, το Dreamweaver δείχνει ένα placeholder για το SWF. Για να δείτε πως φαίνεται η ταινία μέσα στο περιεχόμενο της σελίδας, επιλέξτε το placeholder σε Προβολή σχεδίασης και κάντε κλικ στο κουμπί Play button στην κάτω δεξιά πλευρά του Property inspector. Εικόνα 2.16 Παίζοντας ένα αρχείο flash στο Dreamweaver Όπως μπορούμε να δούμε στην εικόνα 2.16, ο Property inspector έχει πολλές επιλογές για να ελέγχει τις ρυθμίσεις των ταινιών Flash. Πάνω αριστερά, δείχνει το τύπο αρχείου και το μέγεθος του. Αμέσως από κάτω είναι ένα πεδίο χωρίς τίτλο το οποίο δείχνει το id attribute του <αντικειμένου> tag. 48/70

49 Το Dreamweaver αυτόματα δείχνει το FlashID ως την αξία για το πρώτο SWF αντικείμενο. Τελικά οι SWF ταινίες εισάγονται στην ίδια σελίδα και παίρνουν νούμερα όπως FlashID2, FlashID3, και λοιπά. Το πεδίο είναι επεξεργάσιμο, έτσι μπορούμε να βάλουμε το δικό μας νούμερο. Θα παράσχουμε μια σύντομη περιγραφή των άλλω επιλογών: W και H: Είναι το πλάτος και ύψος σε πίξελς. Αυτά συμπληρώνονται αυτόματα όταν εισάγουμε το αντικείμενο SWF. Αρχείο: Το όνομα του pathname του SWF. Το σημείο του εργαλείου αρχείου και το εικονίδιο του αρχείου δουλεύουν με τον ίδιο τρόπο όπως στις εικόνες. Src: Αυτό το πεδίο είναι για να βάλετε την τοποθεσία του αρχείου FLA από το οποίο δημιουργήθηκε μια Flash ταινία. Bg: Αυτό εισάγει μια παράμετρο στο <αντικείμενο> για να μπει tag στο χρώμα του φόντου για το SWF. Edit (Επεξεργασία): Αυτό ανοίγει το αρχείο FLA της ταινίας για επεξεργασία. Για να χρησιμοποιήσετε αυτήν την επιλογή, θα πρέπει να να βάλετε την τοποθεσία του αρχείου στο πεδίο Src. Class: Αυτό σου επιτρέπει να βάλεις μια CSS class στο <αντικείμενο>. Loop: Αυτό είναι προεπιλεγμένο. Από-επιλέξτε το εάν δεν θέλετε η ταινία να παίζει συνεχώς. Autoplay: Αυτό είναι προεπιλεγμένο. Αποεπιλέξτε το εάν δεν θέλετε η ταινία να τρέχει αυτόματα όταν η σελίδα φορτώνει για πρώτη φορά. V space και H space: Αυτά εισάγουν τα δοκιμασμένα χαρακτηριστικά vspace και hspace μέσα στο <αντικείμενο> για να προσθέσουμε κατακόρυφο και οριζόντιο χώρο μέσα στην ταινία. Ποιότητα: Αυτό ελέγχει την μορφή της ταινίας που θα παίζεται από πίσω. Επιλέξτε από τις παρακάτω ρυθμίσεις: Υψηλή: Αυτή είναι η προεπιλεγμένη ρύθμιση. Δίνει την καλύτερη εικόνα, αλλά απαιτεί μεγάλη δύναμη επεξεργαστή. Χαμηλή: Επιλέξτε αυτήν την επιλογή εάν η ταχύτητα είναι πιο σημαντική από την ποιότητα. Αυτόματη χαμηλή: Αυτή δίνει προτεραιότητα στην ταχύτητα, αλλά βελτιώνει την ποιότητα όταν είναι δυνατόν. Αυτόματη υψηλή: Αυτή δίνει ίση προτεραιότητα στην ταχύτητα και στην εμφάνιση, αλλά θυσιάζει την ποιότητα αν απαιτείται παραπάνω ταχύτητα. Scale: Αυτή αποφασίζει πως η ταινία θα χωρέσει στις διαστάσεις πλάτους και μήκους που έχουν δοθεί. Align: Αυτό εισάγει το χαρακτηριστικό align στο <αντικείμενο>. Wmode: Αυτό αποφασίζει πως η ταινία SWF αλληλεπιδρά με τα drop-down μενού και με άλλα στοιχεία που ελέγχονται από την JavaScript. Επιλέξτε από τις ακόλουθες επιλογές: 49/70

50 Opaque: Αυτό είναι προεπιλογή. Επιτρέπει στο drop-down μενού να φαίνεται κανονικά πάνω στην εικόνα. Δίνει στην εικόνα ένα φόντο opaque έτσι ώστε τα στοιχεία με ένα χαμηλότερο z-index να είναι κρυμμένα από πίσω. (το z-index είναι ένα χαρακτηριστικό CSS το οποίο ελέγχει την σειρά των τοποθετημένων στοιχείων.) Transparent: Εάν η ταινία SWF έχει διάφανα στοιχεία, αυτό επιτρέπει στα στοιχεία με ένα χαμηλότερο z-index να φαίνονται από πίσω του. Window: Αυτό μετακινεί την παράμετρο wmode από το <αντικείμενο>. Επιλέξτε αυτήν την επιλογή εάν η ταινία δεν επηρεάζεται από δυναμικά στοιχεία, όπως τα drop-down μενού. Είναι πιο αποτελεσματικό και φιλικό στον χρήστη για τους αναγνώστες οθόνης για τα άτομα με προβλήματα όρασης. Παράμετροι: Αυτό ανοίγει ένα κουτί διαλόγου για την ρύθμιση επιπλέον παραμέτρων που αναμένονται από την ταινία. Το Dreamweaver τοποθετεί ένα φωτεινό μπλε tab με ένα εικονίδιο με ανοιχτό μάτι στο πάνω αριστερό σημείο του SWF placeholder. Εάν επιλέξουμε το εικονίδιο θα έχουμε ένα εναλλακτικό περιεχόμενο που θα εμφανίζεται όταν ο χρήστης κάνει πρόσβαση στην ιστοσελίδα με έναν περιηγητή που χρησιμοποειεί παλιά έκδοση του Flash Player. Μπορούμε να επεξεργαστούμε ή να σβήσουμε αυτό το περιεχόμενο με όποιον τρόπο θέλουμε Δομώντας το περιεχόμενο της ιστοσελίδας μας Προηγούμενως είδαμε ότι το Dreamweaver αυτόματα περιλαμβάνει κείμενο που πληκτρολογείται σε προβολή σχεδίασης με <p> (παράγραφος) όταν επιλέγουμε Enter/Return. Μπορούμε επίσης να εισάγουμε κείμενο από το Microsoft Word ή να επικολλήσουμε κείμενο από άλλες εφαρμογές, και το Dreamweaver θα προσπαθήσει να διατηρήσει την δομή και την φόρμα. Το κείμενο κανονικά είναι δομημένο ώστε να χρησιμοποιεί ένα ή περισσότερα από τα παρακάτω στοιχεία. Παραγράφους (<p>) Επικεφαλίδες (<h1> έως <h6>) Προφορμαρισμένο κείμενο (<pre>) Μέσα στις γραμμές tags (για παράδειγμα, <strong>, <em>, <code>, κλπ.) Λίστες (<ul>, <ol>, ή <dl>) Block quotes (<blockquote>) Πίνακες (<table>) Υπάρχουν πέντε βασικοί τρόποι για να προσθέσουμε δομικά στοιχεία: Μέσω της προβολής HTML του Property inspector Μέσω του Κειμένου tab της μπάρας εισαγωγής (πίνακες που χρησιμοποιούν τα κοινά tabs) Διαμέσου του Μενού Φορμαρίσματος (πίνακες που χρησιμοποιούν την Εισαγωγή και το Μενού τροποποίησης) 50/70

51 Χρησιμοποιώντας συντομεύσεις του πληκτρολογίου (δεν είναι διαθέσιμο για όλα τα στοιχεία) Πληκτρολογώντας τον κωδικό απευθείας στην προβολή κωδικού HTML και CSS προβολή του property Inspector Όπως μπορούμε να δούμε στην Εικόνα 2.17 ο Property inspector μπορεί να χρησιμοποιηθεί διαφορετικά για HTML και CSS. Το πρώτο screenshot στην Εικόνα 2.17 δείχνει την προβολή HTML, και το κάτω screenshot δείχνει την προβολή CSS. Ίσως να δούμε πολλές ομοιότητες αλλά η χρήση τους να είναι τελείως διαφορετική. Εικόνα 2.17 HTML και CSS property Inspectors Η προβολή HTML αφορά κυρίως το HTML markup, αν και στο Class drop-down μενού και το κουμπί ιδιοτήτων σελίδας δίνει κάποια πρόσβαση στο CSS. Η προβολή CSS είναι αποκλειστικά αφιερωμένη στο CSS. Τα κουμπιά για Έντονα και Πλάγια γράμματα που είναι κοινά και στις δύο προβολές λειτουργούν με πολύ διαφορετικούς τρόπους. Εάν κάνετε κλικ στο κουμπί για έντονα γράμματα στην προβολή HTML, το Dreamweaver εισάγει<δυνατά>tags στον κώδικα υπογράμμισης. Κάνοντας κλικ στο ίδιο κουμπί στην προβολή CSS ξεκινάει ένα παράθυρο διαλόγου με Κανόνα Νέου Στυλ ή ανοίγει ένα υπάρχον στυλ για επεξεργασία, βασιζόμενο στην αξία που εμφανίστηκε στον στοχευμένο κανόνα του drop-down μενού Παράγραφοι, επικεφαλίδες, και διαμορφωμένο κείμενο Η μορφοποίηση του drop-down μενού πάνω αριστερά στην προβολή HTML του Property inspector (δείτε την Εικόνα 2.17) προσθέτει δομή στο κείμενο τυλίγοντας το σε παράγραφο (<p>), επικεφαλίδα (<h1> διαμέσου <h6>), ή διαμορφωμένο κείμενο (<pre>). Επίσης μετακινεί αυτά τα tags όταν επιλέγουμε Κανένα από την επιλογή. Για να καταλάβουμε πως λειτουργεί η μορφοποίηση drop-down μενού, είναι καλή ιδέα να ανοίξουμε μια προβολή διαχωρισμένη και να παρακολουθήσουμε που εισάγονται ή που μετακινούνται τα tags. Είναι σημαντικό να καταλάβουμε οτι η δομή δεν εφαρμόζεται στο επιλεγμένο κείμενο, αλλά σε όλο το τετράγωνο όπου είναι τοποθετημένος ο κέρσορας. Εάν ο κέρσορας σας είναι τοποθετημένος μέσα σε μια παράγραφο και επιλέξετε Επικεφαλίδα 2 για το φορμάρισμα από το drop-down μενού, οι <p> tags αντικαθίστανται από <h2> tags. Εάν 51/70

52 επιλέξετε κανένα, το κοντινότερο ζευγάρι <p>, <h1> διαμέσου <h6>, ή <pre> tags μετακινείται. Δεν επηρεάζονται άλλα tags. Το tab Κειμένου από την γραμμή Εισαγωγής (δείτε την Εικόνα 2.18) και το υπομενού φορμαρίσματος Παραγράφου και δουλεύουν βασικά με τον ίδιο τρόπο. Το κουμπί Παραγράφου στο tab Κειμένου της μπάρας εισαγωγής είναι το πέμπτο εικονίδιο από την αρχή. Εικόνα 2.18 Εισαγωγή Φορμαρίσματος Κειμένου Τα κουμπιά για Έντονα και Πλάγια στην προβολή HTML του Property inspector εργάζονται με τον ίδιο τρόπο όπως ένας επεξεργαστής λέξεων. Εάν κάνουμε κλικ πάνω σε ένα από τα κουμπία, δεν θα συμβεί κάτι στην προβολή κώδικα, αλλά μόλις ξεκινήσουμε να πληκτρολογούμε, το Dreamweaver εισάγει <δυνατά> ή <em> tags. Κάντε κλικ στο κουμπί πάλι. Το σημείο εισαγωγής δεν μετακινείται στην προβολή κώδικα, αλλά μόλις ξεκινήσετε να πληκτρολογείτε πάλι πηδάει έξω από το tag που κλείνει και μετατρέπεται σε κανονικό κείμενο. Μπορείτε επίσης να τονίσετε μια επιλογή του κειμένου και να την τυλίξετε σε <δυνατά> ή <em> tags. Εικόνα 2.19 Έντονο και Πλάγιο φορμάρισμα κειμένου Τα κουμπιά για έντονα και πλάγια εμφανίζονται μέσα στο έντονο ή πλάγιο κείμενο. Επιλέγοντας όλο ή ένα κομμάτι του φορμαρισμένου κειμένου και κάνοντας κλικ στο κουμπί ξανά μετακινείται από το φορμάρισμα στην επιλογή. Η χρήση αυτών των κουμπιών είναι χρήσιμη και σώζει χρόνο. 52/70

53 Μενού Στυλ Το υπομενού Στυλ του μενού Φορμαρίσματος προσφέρει πολύ μεγαλύτερη ποιλικία από τα εσωτερικά tags, πολλά από τα οποία είναι σχεδιασμένα να προσθέτουν δομή στο κείμενό μας. Όπως μπορούμε να δούμε στην Εικόνα 2.20, μαζί με τα έντονα και πλάγια, αυτό το υπομενού προσφέρει λιγότερο συχνή χρήση αλλά είναι σημαντικά τα tags όπως ο Κώδικας (<code>), πληκτρολόγιο (<kbd>), και παραπομπή (<cite>). Οι ίδιες λειτουργίες μπορούν να βρεθούν στο tab κειμένου της μπάρας εισαγωγής (δείτε την Εικόνα 2.18). Εικόνα 2.20 Μενού στυλ Το υπομενού Στυλ λειτουργεί με τον ίδιο τρόπο όπως στα έντονα ή πλάγια κουμπιά στην προβολή HTML του Property inspector. Μπορούμε να επιλέξουμε μια επιλογή, να ξεκινήσουμε να πληκτρολογούμε και να επιλέξουμε την επιλογή ξανά για να εισάγουμε το tag κλεισίματος. Εναλλακτικά, επιλέγουμε μια επιλογή για να αναδιπλώσουμε το τονισμένο κείμενο μέσα στα εσωτερικά tags, ή να μετακινήσουμε τα tags από την επιλογή. Το ίδιο υπομενού είναι προσβάσιμο από το μενού περιεχομένου όταν κάνουμε δεξί κλικ σε προβολή σχεδίασης. Κουκίδες και αριθμημένες λίστες Λίστα χωρίς τάξη: Από προεπιλογή, οι περιηγητές δείχνουν κάθε αντικείμενο σε κουκίδα. Η λίστα περιορίζεται από <ul> tags, και κάθε αντικείμενο αναδιπλώνεται μέσα σε li> tags. Λίστα με τάξη: Από προεπιλογή, ο περιηγητής δίνει σε κάθε αντικείμενο έναν αριθμό, ξεκινώντας από το 1. Η λίστα περιορίζεται από <ol> tags και κάθε αντικείμενο αναδιπλώνεται σε <li> tags. 53/70

54 Λίστα ορισμού: Αυτός ο τύπος λίστας είναι σχεδιασμένος για ένα γλωσσάριο, λίστα όρων, ή συλλογή από ονομάτα/ζευγάρια αξιών. Η λίστα περιβάλλεται από <dl> tags, κάθε όρος πρέπει να οριστεί όπως είναι αναδιπλωμένος σε tags, και οι ορισμοί αναδιπλώνονται σε <dd> tags. Εικόνα 2.21 Κουκίδες και αριθμοί Τα εικονίδια στα δεξιά του drop-down μενού στην προβολή HTML του Property inspector δημιουργούν χωρίς τάξη (κόκκινη κουκίδα) και με τάξη λίστες (μπλε κουκίδα) με άλλα λόγια, κουκίδες και λίστες αριθμών όπως φαίνεται στην εικόνα Πίνακες Σύμφωνα με τον w3c ( οι πίνακες δεν θα πρέπει να χρησιμοποιούνται αποκλειστικά ως μέσον για περιεχόμενο εγγράφων σχεδίου (layout document content) επειδή αυτό μπορεί να παρουσιάσει προβλήματα όταν μεταφερθούν σε μέσα χωρίς προβολή όπως οι screen readers. Επιπλέον, όταν χρησιμοποιούνται με γραφικά, αυτοί οι πίνακες ίσως να ωθήσουν τους χρήστες να κάνουν scroll οριζόντια για να δουν έναν πίνακα σχεδιασμένο σε ένα σύστημα με μεγαλύτερη προβολή. Για να περιοριστούν αυτά τα προβλήματα, οι συγγραφείς θα πρέπει να χρησιμοποιήσουν φύλλα στυλ για να ελέγξουν τον σχεδιασμό παρά τους πίνακες. Θεωρείται καλύτερη πρακτική να χρησιμοποιούνται πίνακες καθαρά για να παρουσιάζονται δεδομένα που χρειάζεται να στοιχηθούν σε στήλες και γραμμές. Για να εισάγουμε έναν πίνακα, χρειάζεται να βάλουμε τον κέρσορα μας εκεί όπου θέλουμε να ξεκινάει ο πίνακας και να κάνουμε κλικ στην επιλογή πίνακα είτε στο κοινό είτε στο σχέδιο tab της γραμμής εισαγωγής. Εικόνα 2.22 Εισάγοντας πίνακες σε έγγραφο Dreamweaver 54/70

55 Εικόνα 2.23 Εισάγοντας πίνακες σε έγγραφο Dreamweaver Το παράθυρο διαλόγου προσφέρει τις παρακάτω επιλογές: Γραμμές και Στήλες: Βάλτε τον αριθμό γραμμών και στηλών που θέλετε στον πίνακα. Μπορούμε να προσθέσουμε περισσότερες στήλες ή γραμμές ή να σβήσουμε αργότερα. Πλάτος πίνακα: Μπορούμε να βάλουμε το πλάτος του πίνακα είτε σε πιξελ είτε σε εκατοστά. Εάν δεν θέλουμε να ορίσουμε ένα πλάτος, μπορούμε να σβήσουμε την τιμή σε αυτό το πεδίο και να το αφήσουμε κενό. Πάχος ορίων: Αυτό θέτει το όριο στον βασικό <πίνακα> tag και εφαρμόζει το ίδο πάχος ορίων και στον πίνακα και στα κελία. Το CSS μας δίνει μεγαλύτερο έλεγχο πάνω στον πίνακα και στα όρια των κελιών. Πρέπει να αφήσουμε αυτό το πεδίο κενό ή να αφαιρέσουμε όλα τα όρια ή αν θέλουμε να χρησιμοποιήσουμε το CSS. Κελί padding: Αυτό θέτει την ιδιότητα για cellpadding στον αρχικό <πίνακα> tag και εφαρμόζει το ίδιο ποσό στο εσωτερικό padding γύρω από όλες τις πλευρές κάθε κελιού. Για καλύτερο έλεγχο, θα πρέπει να αφήσουμε αυτό το πεδίο κενό και να χρησιμοποιήσουμε το CSS. Κενό κελιών: Αυτό θέτει την ιδιότητα των κενών στα κελία στον αρχικό <πίνακα> tag και εφαρμόζει το ίδιο ποσό κενών σε όλες τις πλευρές ανάμεσα στα κελιά του πίνακα. Τίτλος: Αυτό ελέγχει τον τίτλο του πίνακα <th> στα κελιά και προσδιορίζει εάν ο τίτλος εφαρμόζεται σε μια γραμμή ή μια στήλη. Οι οπτικοί περιηγητές κανονικά δείχνουν το κείμενο σε <th> κελιά έντονα και κεντρικά. Ο σκοπός αυτής της ιδιότητας το κάνει ευκολότερο για τα άτομα με προβλήματα όρασης να περιηγούνται στον πίνακα με έναν screen reader. Μπορούμε να επιλέξουμε μια από τις τέσσερις επιλογές: Καμία, Αριστερά, Πάνω, ή και τα δύο. Λεζάντα: Εάν θέλουμε να δώσουμε στον πίνακα μια λεζάντα, βάζουμε κείμενο σε αυτό το πεδίο. Από προεπιλογή, η λεζάντα φαίνεται πάνω από τον πίνακα, αλλά μπορούμε να χρησιμοποιήσουμε το CSS για να την μετακινήσουμε στο κάτω σημείο. 55/70

56 Περίληψη: Αυτή είναι ένα πλεονέκτημα για τα screen readers για άτομα με προβλήματα όρασης. Κάθε κείμενο που μπαίνει εδώ διαβάζεται από τον αναγνώστη οθόνης, αλλά δεν εμφανίζεται στην οθόνη. Όταν κλικάρουμε OK, το Dreamweaver δημιουργεί έναν σκελετό του πίνακα και εισάγει ένα κενό που δεν σπάει ( ) σε κάθε κελί στον υπογραμμισμένο κώδικα. Αυτό εμποδίζει τα άδεια κελιά να φαίνονται περίεργα στον περιηγητή. Μόλις εισάγεις περιεχόμενο στο κελί, το Dreamweaver κανονικά σβήνει το. Ομως, εάν βρούμε κείμενο που δεν τοποθετείται σωστά στο κελί του πίνακα, είναι καλή ιδέα να τσεκάρουμε τον υπογραμμισμένο κώδικα και να μετακινήσουμε το Χειροκίνητα, αν είναι απαραίτητο. Εικόνα 2.24 Σκελετός πίνακα Εάν αφήσουμε το πλάτος του πίνακα κενό στο παράθυρο διαλόγου και το βρούμε δύσκολο να βάλουμε τον κέρσορα μέσα στα κελιά του πίνακα, τοτε επιλέγουμε το κουμπί Expanded στα αριστερά του tab σχεδιασμού στην γραμμή εισαγωγής. Εναλλακτικά, επιλέγουμε Προβολή Mode Πίνακα Επεκτεινόμενο Mode Πίνακα. Αυτό επεκτείνει τα κελιά του πίνακα σε προβολή σχεδίασης ώστε να είναι πιο εύκολο να τα επεξεργαστεί κανείς, δεν επηρεάζει το υπογραμμισμένο κώδικα ή πως ο πίνακας φαίνεται από τον περιηγητή. Αφού έχετε εισάγει το περιεχόμενο στον πίνακα, κάντε κλικ στο link εξόδου στο πάνω μέρος του πίνακα εγγράφου ή επιλέξτε το κανονικό κουμπί στο tab σχεδίασης της μπάρας εισαγωγής για να επανέλθει ο πίνακας στο κανονικό σχήμα και μέγεθος. Αφού έχουμε εισάγει τον πίνακα, μπορούμε να κάνουμε τις βασικές του ιδιότητες επιλέγοντας τον πίνακα σε προβολή σχεδίασης και χρησιμοποιώντας τον Property inspector. Για να επιλέξουμε τον πίνακα, χρειάζεται να κάνουμε κλικ σε μια από τις πλευρές του σε προβολή σχεδίασης. Εάν αυτό το βρούμε δύσκολο, μπορούμε να κάνουμε κλικ μέσα σε οποιοδήποτε κελί και έπειτα να επιλέξουμε <πίνακα> από τον επιλογέα Tag στο κάτω κομμάτι του πίνακα εγγράφου. Η εικόνα 2.25 δείχνει τις επιλογές που είναι διαθέσιμες στον Property inspector όταν ένας πίνακας έχει επιλεγεί. 56/70

57 Figure 2.25 Table options in the property inspector Οι περισσότερες από τις επιλογές είναι ίδιες όπως ο πίνακας στο παράθυρο διαλόγου. Το κενό πεδίο στα αριστερά του Property inspector όπου μπορούμε να βάλουμε μια ιδιότητα για τον πίνακα. Εάν οι κανόνες στυλ έχουν δημιουργηθεί, μια λίστα από αχρησιμοποίητα IDs μπορούν να προσπελαστούν στο drop-down μενού στο πεδίο αυτό (τα IDs πρέπει να είναι μοναδικά, έτσι τα IDs τα οποία έχουν χρησιμοποιηθεί σε άλλα στοιχεία δεν υπάρχουν στην λίστα). Εάν αυξήσουμε τον αριθμό των γραμμών και στηλών στον Property inspector, προσθέτονται στο κάτω σημείο και δεξιά στον πίνακα, αντίστοιχα. Εάν μειώσουμε τον αριθμό, μετακινούνται από κάτω προς τα δεξιά και κάθε περιεχόμενο στο αντικείμενο σβήνεται. Το drop-down μενού ευθυγράμμισης πάνω δεξιά εισάγει την ιδιότητα της ευθυγράμμισης στον αρχικό <πίνακα> tag για να ευθυγραμμίσει τον πίνακα αριστερά, δεξιά ή στο κέντρο του αρχικού στοιχείου. Η καλύτερη πρακτική είναι να το αφήσουμε αυτό προεπιλεγμένο (στοιχισμένο αριστερά) και να χρησιμοποιήσουμε το CSS για να τοποθετήσουμε τον πίνακα. Τα τέσσερα εικονίδια κάτω αριστερά του Property inspector μετακινούν το ύψος και το πλάτος από όλα τα κελιά του πίνακα και μετατρέπουν ανάμεσα σε πιξελς και εκατοστά. Μπορούμε να αναγνωρίσουμε τους ρόλους τους από τις συμβουλές εργαλείων που εμφανίζονται όταν βάλουμε το ποντίκι σε κάθε ένα από αυτά. Ο Property inspector αλλάζει όταν βάζουμε τον κέρσορα μέσα σε ένα κελί του πίνακα ή επιλέγουμε απλά ένα κομμάτι του πίνακα. Όπως δείχνει η Εικόνα 2.26, το μισό πάνω κομμάτι του Property inspector δείχνει την προβολή CSS ή HTML, ανάλογα με το ποιο κομμάτι έχει επιλεγεί στα αριστερά, και το κάτω μισό περιέχει επιλογές που σχετίζονται με τα κελιά του πίνακα. Εικόνα 2.26 Επιλογές κελιών στον property inspector 57/70

58 Το πάνω μισό εφαρμόζεται μέσα στο περιεχόμενο του κελιού, το κάτω μισό εφαρμόζεται στα επιλεγμένα κελιά. Πολλές από τις επιλογές στο κάτω μισό εισάγουν ιδιότητες (οριζόντια και κατακόρυφη ευθυγράμμιση, πλάτος, ύψος, μη αναδίπλωση κειμένου και χρώμα φόντου).αυτές οι τιμές κανονικά πρέπει να μπουν μέσω του CSS, παρά να χρησιμοποιηθεί το Property inspector. Οι χρήσιμες επιλογές στον Property inspector για τα κελιά του πίνακα είναι το Header checkbox, που οι εναλλαγές επιλέγονται μεταξύ των κελιών χρησιμοποιώντας τα <th> και <td> tags, και τα δύο εικονίδια κάτω αριστερά, που συγχωνεύουν και χωρίζουν κελιά. Στην Εικόνα 2.26, το εικονίδιο που συγχωνεύει τα κελιά χρησιμοποιώντας ιδιότητες rowspan και colspan έχει γίνει γκρι επειδή είναι ενεργό όταν παραπάνω από ένα κελιά επιλέγονται στην προβολή σχεδίασης. Από την άλλη πλευρά, το εικονίδιο διαχωρισμού είναι ενεργό μόνο όταν επιλέγεται ένα μεμονωμένο κελί. Όταν κάνουμε κλικ σε αυτό, το παράθυρο διαλόγου για διαχωρισμό κελιών εμφανίζεται, ρωτώντας εάν θέλουμε να διαχωρίσουμε το κελί σε στήλες και γραμμές και πόσες. Τα <Div> tags Το <div> tag είναι ένα απλό εργαλείο για την ομαδοποίηση στοιχείων σε μια σελίδα που θέλουμε να κρατήσουμε μαζί. Δεν έχει στυλ το οποίο το κάνει διαθέσιμο να κάνουμε όποιο στυλ επιθυμούμε. Σε συνδυασμό με την ιδιότητα attribute, είναι επίσης ένας δυνατός τρόπος να εφαρμόσουμε σταθερά στυλ σε οτιδήποτε μέσα στο ίδιο <div>. Μόλις έχουμε οργανώσει το περιεχόμενό μας σε μια λογική δομή χρησιμοποιώντας <div> tags και άλλα στοιχεία που μπλοκάρουν, μπορούμε να χρησιμοποιήσουμε το CSS για να τους δώσουμε στυλ οπτικά, προσθέτοντας εικόνες στο φόντο και χρώμα, και αλλάζοντας την θέση τους και την σχέση τους με άλλα στοιχεία προσαρμόζοντας τα όρια και το padding. Η μορφοποίηση μέσω CSS προσφέρει ένα πολύ πιο δυνατό εργαλείο από τους πίνακες, αλλά φυσικά, το να μάθει κανείς αυτό το εργαλείο είναι κάτι που αποκτάται με την εμπειρία. Εικόνα 2.27 Εισάγοντας ένα <div> tag Με σκοπό να εισάγουμε ένα <div> tag, χρειάζεται να επιλέξουμε το κουμπί Εισαγωγής Div Tag στο κοινό tab της μπάρας εισαγωγής, όπως φαίνεται στην Εικόνα Εναλλακτικά μπορούμε να χρησιμοποιήσουμε το κουμπί Εισαγωγής Div Tag στο tab σχεδιασμού της μπάρας εισαγωγής, 58/70

59 ή να επιλέξουμε Εισαγωγή Layout Αντικείμενα Div Tag. Αφού το κάνουμε αυτό, ανοίγουμε το παράθυρο διαλόγου για τη Εισαγωγή Div Tag. Εικόνα 2.28 div tag παράθυρο διαλόγου Εισαγωγή : Το drop-down μενού είναι context-sensitive. Εάν ένα περιεχόμενο επιλέγεται στο παράθυρο εγγράφου, δείχνει την επιλογή αναδίπλωσης, όπως στην Εικόνα Εάν τίποτα δεν επιλεγεί, η προεπιλεγμένη αξία είναι στο σημείο Εισαγωγής. Και οι δύο αυτές επιλογές εξηγούν από μόνες τους. Επιλέγοντας μια από τις άλλες επιλογές στο μενού Εισαγωγής ενεργοποιείται κατά μήκος το drop-down μενού. Και τα δύο μενού δουλεύουν σε συνδυασμό και εισάγουν ένα <div> στο κείμενο όπως παρακάτω: Πριν το tag: Αυτή η επιλογή είναι διαθέσιμη μόνο όταν τα στοιχεία της σελίδας έχουν ιδιότητες id. Εισάγει αμέσως το <div> προτού επιλεγεί το στοιχείο στα δεξιά του dropdown μενού. Αφού ξεκινήσουμε το tag: Αυτό εισάγει το <div> άμεσα αφού το αρχικό tag του στοιχείου επιλεγεί στο δεξί drop-down μενού. Επιπρόσθετα με τα στοιχεία στις ιδιότητες id, οι λίστες στα δεξιά του μενού είναι το <κυρίως σώμα> tag. Πριν το τέλος του tag: Αυτό εισάγει άμεσα το <div> προτού το αρχικό tag του στοιχείου επιλεγει στο δεξί drop-down μενού. Επιπρόσθετα με τα στοιχεία στις ιδιότητες id, οι λίστες στα δεξιά του μενού είναι το <κυρίως σώμα> tag. After tag: Αυτή η επιλογή είναι διαθέσιμη μόνο όταν τα στοιχεία της σελίδας έχουν ιδιότητες id. Εισάγει το <div> άμεσα μετά από το tag του στοιχείου που επιλέχθηκε στο δεξί drop-down μενού. Class: Βάλτε το όνομα της CSS class που θέλετε να εφαρμόσετε το <div>. Οι υπάρχουσες classes είναι σε λίστα σε drop-down μενού. ID: Βάλτε το όνομα της ιδιότητας id που θέλετε να βάλετε μέσα στο <div>. Τα υπάρχοντα IDs προσδιορίζονται σε στυλ που συνδέονται με την σελίδα στην λίστα όπως στο drop-down μενού. Αφού ένα ID μπορεί να χρησιμοποιηθεί μόνο μια φορά στην σελίδα, η λίστα δείχνει μόνο εκείνα τα IDs τα οποία ακόμα δεν έχουν καταχωρηθεί σε κάποιο άλλο στοιχείο. Νέος Κανόνας CSS: Αυτό σε αφήνει να προσδιορίσεις έναν νέο κανόνα στυλ που θα εφαρμοστεί στο <div>. 59/70