Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.

Transcript

1 DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη γραμμών και στηλών αλλά και αλλαγή των περιγραμμάτων. Αρχικά όταν δημιουργούμε μια ιστοσελίδα όλα τα κείμενα και οι εικόνες είναι στοιχισμένα αριστερά. Με την χρήση πινάκων μπορούμε να καθορίσουμε που και πως θα εμφανίζονται κάποια στοιχεία. Μπορούμε να χωρίσουμε το κείμενο σε στήλες, να τοποθετήσουμε εικόνες δίπλα από κείμενο κτλ. Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Παρακάτω έχουμε ένα παράδειγμα πίνακα: Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table. Στο νέο παράθυρο που ανοίγει καθορίζουμε τον αριθμό γραμμών και στηλών και το πλάτος του πίνακα. Το πλάτος μπορεί να οριστεί σαν Pixels ή σαν Percent (ποσοστό). Η διαφορά είναι πως τα pixel παραμένουν σταθερά ανεξάρτητα από το μέγεθος του παραθύρου του φυλλομετρητή ενώ αν έχουμε βάλει την επιλογή Percent το μέγεθος του πίνακα θα προσαρμόζεται στο μέγεθος του παραθύρου έτσι ώστε να τηρείται το ποσοστό. Η επιλογή Border thickness καθορίζει το από πόσα pixel θα αποτελείτε το πάχος του περιγράμματος. Η default τιμή είναι 1. Η επιλογή Cell Padding καθορίζει το κενό ανάμεσα στο περιεχόμενο των κελιών και του περιγράμματος τους. Η επιλογή Cell Spacing καθορίζει το κενό ανάμεσα στα κελιά του πίνακα.

2 Οι ιδιότητες του πίνακα καθορίζονται μέσω του properties inspector. Μέσω του properties inspector είναι δυνατή η αλλαγή των default τιμών που ορίζονται κατά την εισαγωγή ενός πίνακα. Ταυτόχρονα είναι δυνατή και η αλλαγή παραμέτρων όπως η στοίχιση (Align), η αλλαγή του χρώματος στο παρασκήνιο (background color) ή η εισαγωγή μιας εικόνας για φόντο του πίνακα( background image). Αν επιλέξουμε κάποια συγκεκριμένα κελιά αλλάζει ο properties inspector έτσι ώστε να κάνουμε επιπλέον παραμετροποιήσεις στα συγκεκριμένα κελιά.

3 Στο πάνω τμήμα του properties inspector μπορούμε να καθορίσουμε τις ιδιότητες του κειμένου που θα εισάγουμε στα κελιά. Στο κάτω τμήμα μπορούμε να ορίσουμε άλλα χαρακτηριστικά όπως το χρώμα του φόντου ξεχωριστά (για το σημείο που ορίζει ο πίνακας), η background image (επίσης μόνο για το σημείο ορίζει ο πίνακας) καθώς και το χρώμα των borders του πίνακα. Δύο ιδιαίτερα χρήσιμες επιλογές είναι οι Horz και Vert, που επιρρεάζουν την εμφάνιση και το περιεχόμενο των κελιών του πίνακα οριζοντίως ή καθέτως. Το μήκος του πίνακα μπορεί να οριστεί σε pixels ή σε ποσοστό. Στον properties inspector το μήκος και το ύψος αντιστοιχούν στα πεδία W (Width) και H (Height). Εκτός από την χρήση του properties inspector μας δίνεται η δυνατότητα να τροποποιήσουμε το μήκος και το ύψος ενός πίνακα με drag and drop των περιγραμμάτων του. Templates Κάθε φορά που δημιουργούμε μια ιστοσελίδα θα πρέπει να ακολουθούμε ένα κοινό πρότυπο σε κάθε υποσελίδα. Ένας τρόπος να γίνει αυτό είναι με την χρήση των templates τα οποία ορίζουν ένα κοινό τρόπο εμφάνισης με την δυνατότητα να ορίζονται επεξεργάσιμες και μη επεξεργάσιμες ζώνες. Πέρα από τον τίτλο τις υποσελίδας δεν είναι δυνατή η επεξεργασία άλλων σημαντικών χαρακτηριστικών όπως για παράδειγμα το background colour. Αυτό πρακτικά σημαίνει πως για να αλλάζει αυτό το χαρακτηριστικό σε μερικές υποσελίδες θα χρειαστεί να δημιουργηθεί και δεύτερο template που θα εφαρμοστεί στις συγκεκριμένες υποσελίδες. Τα templates είναι αρχεία με κατάληξη DTW και αποθηκεύονται σε ειδικό φάκελο με την ονομασία Templates. Δημιουργία templates Templates μπορούν να δημιουργηθούν από το μηδέν, μπορούμε όμως να δημιουργήσουμε και να ξεκινήσουμε την επεξεργασία ενός, και μέσα από μια ήδη υπάρχουσα σελίδα. Για να δημιουργήσουμε ένα καινούργιο template ανοίγουμε το μενού Assets.

4 Το μενού Assets μπορεί να ανοιχθεί μέσω από την επιλογή Window->Assets. Εναλλακτικά πατώντας απλά F11. Ανοίγοντας το μενού Assets επιλέγουμε το πλήκτρο με το εικονίδιο. Αυτό μας επιτρέπει την χρήση templates. To Templates Assets panel έχει στο κάτω μέρος πλήκτρα όμοια με αυτά του CSS Styles panel, που είδαμε σε προηγούμενο μάθημα. Το πρώτο πλήκτρο χρησιμοποιείτε για την ανανέωση της λίστας των διαθέσιμων templates, ενώ τα υπόλοιπα επιτρέπουν την δημιουργία, επεξεργασία και την διαγραφή ενός template. Για να δημιουργήσουμε ένα νέο template πατούμε το πλήκτρο με το εικονίδιο εναλλακτικά κάνοντας δεξί κλικ στο πάνελ και επιλέγοντας New Template. ή Αφού εμφανιστεί το νέο αρχείο στην λίστα των templates μπορούμε να του δώσουμε και ένα όνομα. Για να επεξεργαστούμε το template το επιλέγουμε και πατάμε το πλήκτρο με το εικονίδιο. Για να το διαγράψουμε πατούμε το πλήκτρο με το εικονίδιο. Τα Templates αποθηκεύονται πάντα στην ιστοσελίδα μας στον φάκελο Templates που δημιουργείτε αυτόματα. Για να δημιουργήσουμε ένα template μέσω ενός ήδη υπάρχοντος αρχείου (π.χ. HTML) ανοίγουμε το αρχείο, επιλέγουμε File ->Save as template. Επιλέγουμε το όνομα με το οποίο επιθυμούμε να αποθηκευθεί και στην συνέχεια το site στο οποίο θέλουμε να αποθηκευθεί ( δηλαδή στον φάκελο templats ενός συγκεκριμένου site)

5 Επεξεργάσιμες περιοχές Τα περισσότερα στοιχεία ενός template είναι από προεπιλογή κλειδωμένα και μη επεξεργάσιμα Έτσι για να γίνει οποιαδήποτε επεξεργασία σε μια ιστοσελίδα που είναι βασισμένη στο template, θα πρέπει να γίνει ορισμός ζωνών που θα μπορεί ο χρήστης να επεξεργαστεί. Για να επεξεργαστούμε ένα template θα πρέπει να το ανοίξουμε στο Dreamweaver. Για να το ανοίξουμε το επιλέγουμε από το μενού Assets είτε με διπλό κλικ είτε επιλέγοντας το πλήκτρο με το εικονίδιο. Όταν ανοίξουμε το template μπορούμε να επεξεργαστούμε τις ιδιότητες του μέσα από το μενού Page properties. (Modify -> Page properties) As you can remember, it can be opened it this way: Για να εισάγουμε μια επεξεργάσιμη περιοχή στο template, τοποθετούμε τον κέρσορα στο επιθυμητό σημείο και επιλέγουμε Insert -> Templates objects-> Editable zone. (Εναλλακτικά με τον συνδυασμό Ctrl+Alt+V) Στο παράθυρο που ανοίγει εισάγουμε ένα όνομα για την νέα επεξεργάσιμη περιοχή, το οποίο θα πρέπει να είναι μοναδικό στο template. Μια επεξεργάσιμη περιοχή ενός template φαίνεται στο Dreamweaver σαν ένα κουτί με μπλε ετικέτα. Στην ετικέτα εμφανίζεται το όνομα της επεξεργάσιμης περιοχής. Ότι υπάρχει σε μια επεξεργάσιμη περιοχή ενός template δεν θα εμφανίζεται αυτομάτως σε κάθε site που θα δημιουργείτε και θα βασίζεται στο συγκεκριμένο template. Αντιθέτως ότι βρίσκεται έξω από την επεξεργάσιμη περιοχή θα εμφανίζεται πάντα σε όλες τις σελίδες που θα βασίζονται στο συγκεκριμένο template.