Εισαγωγή στο Dreamweaver. Σταύρος Πολυβίου

Σχετικά έγγραφα
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο


ΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙ ΑΣ ΣΤΟ MICROSOFT WORD

ΥΠΗΡΕΣΙΑ WEBMAIL ΚΥΠΕΣ

Εισαγωγή και επεξεργασία δεδοµένων

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Version X. Οδηγίες χρήσης

ζωγραφίζοντας µε τον υπολογιστή

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να

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

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

Οδηγίες για την κατασκευή του αρχείου «Ταυτότητα (α+β) 2» 1. Αποκρύπτουµε τους άξονες και το παράθυρο άλγεβρας: Παράθυρο προβολή

Γνωριµία µε τη Microsoft Access

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Σχεδιασμός εκτυπώσεων ERG

Εργαστηριακή Άσκηση 4 Μορφοποίηση Κειμένου μέσω του

EΞΟΙΚΕΙΩΣΗ ΜΕ ΤΟ MOVIE MAKER

2 Ο Ε.Κ.Φ.Ε. ΗΡΑΚΛΕΙΟΥ. Οδηγίες χρήσης PDFCreator

Σχεδιασμός εκτυπώσεων ERG

ηµιουργία γραφικών πινάκων στο Word

3. Σηµειώσεις Access. # Εισαγωγή ψηφίου ή κενού διαστήµατος. Επιτρέπονται τα ση-

ΤΕΙ ΠΕΙΡΑΙΑ Τµήµα Μηχανολογίας

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

ΕΙΣΑΓΩΓΗ ΣΤΟ MICROSOFT POWERPOINT

Εγκατάσταση. Εγκατάσταση του Wamp

Shift+γράμμα. Πατάμε τον τόνο (δί[λα στο L) και μετά το φωνήεν. Πως βάζουμε διαλυτικά; Πατάμε το Shift+ τόνο και μετά το φωνήεν (ι ή υ)

ηµιουργία παρουσιάσεων (Power Point)

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Π.Τ..Ε. Σηµειώσεις Σεµιναρίου «Τα µήλα των Εσπερίδων», Η ζωγραφική (Paint) Τα µενού της ζωγραφικής

Αρχική σελίδα. Κατάσταση. Άµεση πρόσβαση

Εισαγωγή στο πρόγραμμα Microsoft word 2003

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML

ηµιουργία Β.. ανειστική Βιβλιοθήκη Μάθηµα 5 Ορισµός σχέσεων - Σύνδεση πινάκων

Τεχνικό εγχειρίδιο εφαρµογής διαχείρισης διαδικτυακού κόµβου: INNET

<a href=" στο κείμενο</a>.

ΣΥΝΤΟΜΟΣ Ο ΗΓΟΣ ΧΡΗΣΗΣ ΤΟΥ ΠΡΟΓΡΑΜΜΑΤΟΣ WINDOWS MOVIE MAKER

Το Ηλεκτρονικό Ταχυδροµείο ( ) είναι ένα σύστηµα που δίνει την δυνατότητα στον χρήστη να ανταλλάξει µηνύµατα αλλά και αρχεία µε κάποιον άλλο

Τοµέας Εϖιµόρφωσης & Κατάρτισης

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Κεφάλαιο 1 Χρήση προτύπου 2. Κεφάλαιο 2 Τροποποίηση μιας παρουσίασης 9. Κεφάλαιο 4 Προσθήκη αντικειμένων 26. Κεφάλαιο 5 Ειδικά εφέ 35

Περιεχόμενα. Περιεχόμενα...v

ΓΡΗΓΟΡΗ ΜΑΝΑΡΙΩΤΗ Ερωτήσεις Εµπέδωσης Αξιολόγησης για το EXCEL

Επεξεργασία κειμένου: Word 2003

ΤΜΗΜΑ ΕΠΙΧΕΙΡΗΜΑΤΙΚΟΥ ΣΧΕΔΙΑΣΜΟΥ & ΠΛΗΡΟΦΟΡΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΤΕΙ ΠΑΤΡΑΣ ΤΕΙ ΠΑΤΡΑΣ ΣΗΜΕΙΩΣΕΙΣ ΜΑΘΗΜΑΤΟΣ ΕΠΙΧΕΙΡΗΣΙΑΚΏΝ ΠΑΙΓΝΙΩΝ- ΠΡΟΓΡΑΜΜΑ GAMBIT

Πίνακες, περιγράµµατα και σκίαση

Οδηγίες. Xρήση της Υπηρεσίας Φιλοξενίας Προσωπικών Ιστοσελίδων (Private Web hosting)

Visual Basic Γλώσσα οπτικού

Οδηγίες για το Βιβλίο Κοστολογίου στα Γ κατηγορίας βιβλία

ΕΝΟΤΗΤΑ 04 Δημιουργία φύλλου εργασίας

8. Σηµειώσεις Access. Κατηγορίες φόρµας ως προς τον τρόπο προβολής των δεδοµένων

Εισαγωγή 3D αντικειµένων. 'Εκδοση 7

Τελεστές σύγκρισης. Τελεστής Παράδειγµα Η τιµή που παίρνει το πεδίο. Λογικοί τελεστές. And <10 And >20 Μικρότερη από 10 και µεγαλύτερη από 20

2. Κάντε κλικ στο παράθυρο όψης Top για να το ενεργοποιήσετε, ώστε να σχεδιάσετε το πάτωµα του δωµατίου.

να ακολουθήσουμε Έναρξη Όλα τα Προγράμματα και να ενεργοποιήσουμε την επιλογή Microsoft Word.

Microsoft Excel Κεφάλαιο 1. Εισαγωγή. Βιβλίο εργασίας

αν γνωρίζουµε ότι η εν λόγω επιχείρηση αγόρασε στο χρονικό διάστηµα έως ΦΠΑ Προµήθεια αγοράς Μεταφορικά αγοράς % (δρχ/κιλό)

Δημιουργία ενός κενού πίνακα

MESSAGE EDITOR FOR WINDOWS Ο ΗΓΙΕΣ ΧΡΗΣΕΩΣ

Ο ΗΓΙΕΣ DOCUMENT DESIGNER

Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003

Όλα τα αντικείµενα διαθέτουν εναλλακτικό κείµενο Με το εναλλακτικό κείµενο, οι χρήστες κατανοούν τις πληροφορίες που παρουσιάζονται στις εικόνες και σ

Άσκηση 6 Ανύψωση Σχηµάτων. Στόχος της άσκησης

1. Ανοίξτε το 3D Studio MAX ή επιλέξτε File Reset. ηµιουργήστε µια σφαίρα µε κέντρο την αρχή των αξόνων και ακτίνα 20 µονάδων και χρώµα πράσινο.

Εγκατάσταση και βασική διαχείριση ενός ιστοτόπου

Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver.

Αναγνώριση υποθεµάτων αρχείων Αντιγραφή κειµένου Αντιγραφη εικόνων Αντιγραφή video

ιαµόρφωση σελίδας Προεπισκόπηση Εκτύπωση

του και από αυτόν επιλέγουµε το φάκελο εµφανίζεται ένα παράθυρο παρόµοιο µε το ακόλουθο:

Κεφάλαιο Χρήση κειµενογράφου. 4.1 Εισαγωγή Σκοπός Τι θα µάθεις

Άσκηση 5 Ανύψωση Σχηµάτων. Στόχος της άσκησης

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Εισαγωγή στη Χρήση της Εφαρµογής Compaq Visual Fortran & του Microsoft Developer Studio

ιαχείριση Πληροφοριών στο ιαδίκτυο

Ο ΗΓΙΕΣ ΓΙΑ ΤΟ ΚΛΕΙΣΙΜΟ ΧΡΗΣΗΣ ΣΤΟ DYNAMICS NAV INNOVERA ERP

1. Ανοίξτε το 3D Studio MAX ή επιλέξτε File Reset. ηµιουργήστε µια σφαίρα µε κέντρο την αρχή των αξόνων και ακτίνα 20 µονάδων.

Περιεχόµενα. Λίγα λόγια από τους συγγραφείς...9. Για τον εκπαιδευτή και το γονέα Αριθµοί και Υπολογισµοί (Numbers and Calculations)

Κατασκευή ιστοσελίδων (FrontPage)

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Excel (dashboards, συγκεντρωτικοί πίνακες)

Cascading Style Sheets

Έτος Ετήσιος ιακινηθέντα Μερίδιο Τζίρος Κεφάλαια Αγοράς

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

ΟΜΗ ΤΗΣ ΕΦΑΡΜΟΓΗΣ... 3 ΕΡΩΤΗΣΕΙΣ... 5 ΕΡΕΥΝΕΣ... 8

ΧΡΗΣΙΜΟΠΟΙΩΝΤΑΣ ΤΟ ARIS

ΗΜΙΟΥΡΓΙΑ ΜΟΝΤΕΛΟΥ (1 ος ΤΡΟΠΟΣ)

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

Ν Ι Κ Ο Λ Α Ο Σ Π. Κ Υ Ρ Α Ν Α Κ Ο Σ ΤΟΠΟΓΡΑΦΟΣ ΜΗΧΑΝΙΚΟΣ Ε.Μ.Π. Εργολ. ηµοσίων Eργων ΜΗΧΑΝΙΚΟΣ ΛΟΓΙΣΜΙΚΟΥ ΕΛ.ΚΕ.ΠΑ. ΕΠΙΜΕΤΡΗΣΕΙΣ ΤΕΧΝΙΚΩΝ ΕΡΓΩΝ

Tiles Editor. 'Εκδοση 7

ΣΕΛΙ Α 1 ΚΕΦΑΛΑΙΟ 1 - ΑΡΧΙΚΑ


Πώς εισάγουμε μια νέα έννοια χρησιμοποιώντας το εργαλείο Create

ΕΡΩΤΗΜΑΤΟΛΟΓΙΟ. α) pbrush β) brush γ) pbush δ) pbrus. α) ctrl + enter β) ctrl + esc γ) alt + ctrl δ) alt + enter

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2

Transcript:

Εισαγωγή στο Dreamweaver Σταύρος Πολυβίου

Σχέδιο µαθήµατος Γενική εισαγωγή Τί είναι το Dreamweaver Τί είναι η XHTML ηµιουργία µίας απλής σελίδας µε πίνακα Τοποθέτηση πίνακα µε το ανάρτηµα (tag) <center> Προβλήµατα Μικρή εισαγωγή στο CSS Τοποθέτηση πίνακα µε τοανάρτηµα <div> και το CSS Προβλήµατα Τοποθέτηση πίνακα µε το CSS για τη διασφάλιση της ορθής απόδοσης της σελίδας από διάφορους φυλλοµετρητές ηµιουργία και χρήση σχεδιότυπων (templates) Οµαδική συγγραφή, συντονισµός µε εξυπηρετητή/συνεργάτες Για περισσότερες πληροφορίες...

Τί είναι το Dreamweaver Περιβάλλον συγγραφής στατικών ή δυναµικών σελίδων Υποστηρίζει αρκετές τεχνολογίες όπως JSP, PHP, ASP, ColdFusion κ.α. Τόσο ο κώδικας, όσοκαιηεµφάνιση των σελίδων µπορούν να επιθεωρηθούν Συντονισµός της µηχανής υλοποίησης µε τον εξυπηρετητή δοκιµών ή των εξυπηρετητή δηµοσίευσης ιευκόλυνση συνεργασίας µε άλλους προγραµµατιστές/σχεδιαστές (check in/check out) Και πολλά άλλα...

Τί είναι η XHTML Τα αρχικά σηµαίνουν extensible Hypertext Markup Language (Επεκτάσιµη Γλώσσα Υπερκειµενικής Σήµανσης) ΣίγουραθαέχετεακούσειγιατηνHTML (Γλώσσα Υπερκειµενικής Σήµανσης) Η XHTML είναι µία πιο καθαρή έκδοση της HTML µε στόχο το διαχωρισµό της δοµής µίας σελίδας από την εµφανισή της (περισσότερα γι αυτο στη συνέχεια...)

Γλώσσες σήµανσης Προέκυψαν από τον τοµέα της στοιχειοθέτησης εγγράφων (typesetting) Το κέιµενο προς εκτύπωση σχολιαζόταν (annotated) µε αναρτήµατα (tags) τα οποία υποδηλούσαν τα σηµεία ώπου έπρεπε να αλλάξει λ.χ. η γραµµατοσειράήτοχρώµα στο εκτυπωµένο κείµενο Για την ηλεκτρονική στοιχειοθέτηση εγγράφων δηµιουργήθηκε η SGML (Πρότυπη Γλώσσα Γενικευµένης Σήµανσης )

Γλώσσες σήµανσης (2) Στην πραγµατικότητα η SGML είναι µία µέτα-γλώσσα (metalanguage) για τη δηµιουργία εξειδικευµένων γλωσσών σήµανσης για συγκεκριµένες εφαρµογές Η HTML είναι µία τέτοια γλώσσα για τη δηµιουργία υπερκειµένων Σε µία σωστή γλώσσα σήµανσης τα αναρτήµατα υποδηλώνουν το ρόλο του στοιχείου το οποίο περιγράφουν π.χ. Τίτλος, Επικεφαλίδα κ.ο.κ. Για τη στοιχειοθέτηση του εγγράφου χρησιµοποιείται ξεχωριστό φύλλο τεχνοτροπίας (style sheet) Π.χ. Οι τίτλοι εµφανίζονται σε γραµµατοσειρά Arial µεγέθους 14 pt

Γλώσσες σήµανσης (3) υστυχώς κατά καιρούς η HTML επεκτάθηκε από τους κατασκευαστές φυλλοµετρητών µε τρόπο ανεξέλεγκτο και µε την πρόσµιξη αναρτηµάτων που σχετίζονταν µε τηνεµφάνιση και όχι µε τηδοµή των ιστοσελίδων Η XML (Επεκτάσιµη Γλώσσα Σήµανσης) είναι µία απλοποιηµένη σε σχέση µε τηνsgml µέτα-γλώσσα για τη δηµιουργία γλωσσών σήµανσης για την ηλεκτρονική ανταλλαγή ή δηµοσίευση πληροφοριών Η XHTML είναι µία αναθεωρηµένηέκδοσητηςhtml µε µόνο δοµικά στοιχεία και βασισµένη πλέον στην XML

Η διεπιφάνεια του Dreamweaver

Με τα βελάκια µπορούµε να συµπτύξουµε ήνα αναπτύξουµε ταδιάφορα πλάνα. Σελίδες πάνω στις οποίες έχουµε δουλέψει πρόσφατα. Επιλογές γύρω από τον τύπο της σελίδας που θέλουµε να υλοποιήσουµε. Απόαυτήτηλίστα επιλέγουµε τονιστιακό χώρο πάνω στον οποίο θα δουλέψουµε. Απόαυτήτηλίσταεπιλέγουµε το κατά πόσο θέλουµε να δούµε τα αρχεία στον υπολογιστή υλοποίησης ή στον εξυπηρετητή δηµοσίευσης ή δοκιµής. Μπορούµε ακόµη να δούµε ολόκληρο τον ιστιακό χώρο διαγραµµατικά.

Επιλέγουµε τηδηµιουργία µίαςστατικήςσελίδαςhtml.

Αρχικό ανάρτηµα (start tag) για το στοιχείο (element) µε όνοµα html. Τελικό ανάρτηµα (end tag) για το στοιχείο (element) µε όνοµα html. Το στοιχείο body είναι εµφωλευµένο µέσα στο στοιχείο html. Το στοιχείο meta είναι κενό (empty element) γι αυτό και κλείνει χωρίς τελικό ανάρτηµα. Γνωρίσµατα (attributes) για το στοιχείο µε όνοµα meta.

Νόηµα στοιχείων <html>: περικλείει ολόκληρη τη σελίδα <head>: περικλείει ορισµένες πληροφορίες για τη σελίδα οι οποίες δεν εµφανίζονται στην οθόνη <body>: περικλείει το ορατό µέρος της σελίδας

Επιλέγουµε την προσθήκη ενός πίνακα στη σελίδα. Μεταφερόµαστε αυτόµατα στην όψη σχεδιασµού (design view), όπου βλέπουµε πως θα εµφανιστεί η σελίδα µας στην οθόνη του φυλλοµετρητή. Σε αυτό το παράθυρο καθορίζουµε τά χαρακτηριστικά του πίνακα.

Το συγκεκριµένο είναι µία αναφορά σε οντότητα (entity reference). Υποδηλώνει την προσθήκη σε αυτό το σηµείο ενός nonbreaking space, ενός διαστήµατος δηλαδή το οποίο δεν επιτρέπει τη διάσπαση µίας γραµµής στο σηµείο που βρίσκεται. Τέτοιου είδους αναφορές γενικά χρησιµοποιούνται για να προσθέσουµε χαρακτήρες που είναι δεσµευµένοι στην HTML ή πουδεν υπάρχουν στο πληκτρολόγιο. Μεταφερόµαστε πίσω στην όψη κώδικα (code view), όπου βλέπουµε τονhtml κώδικα της σελίδας µας. Αυτός είναι ο κώδικας που πρόσθεσε ο Dreamweaver στο σηµείο που βρισκόταν ο δροµέας µας βάσει των επιλογών µας για το νέο πίνακα.

Εδώ βλέπουµε κάποιες πληροφορίες γύρω από τον πίνακα που είναι επιλεγµένος. Πατώντας τα βελάκια παίρνουµε ένα µενού επιλογών γύρω από ολόκληρο τον πίνακα ή την κάθε στήλη ξεχωριστά. Πίσω στην όψη σχεδιασµού (design view), βλέπουµε πως θα εµφανιστεί ο πίνακας στη σελίδα µας.

Στη διπλή όψη (split view), µπορούµε να δούµε τόσο τον κώδικα, όσο και την εµφάνιση της σελίδας µας.

Επιλέγοντας τον κώδικα του πίνακα επιλέγεται και ο ίδιος ο πίνακας στην όψη σχεδιασµού και αντίστροφα. Για το εκάστοτε επιλεγµένο στοιχείο πάνω στη σελίδα µας, ο επιθεωρητής χαρακτηριστικών (property inspector) εµφάνίζει τις κατάλληλες επιλογές.

Εδώ εντοπίζουµε οµαδοποιηµένα όλα τα αναρτήµατα της HTML. Επιλέγοντας αυτό το εικονίδιο, φέρνουµε στο προσκήνιο τον κατάλογο αναρτηµάτων (tag chooser)

Κάνοντας διπλό κλικ, επιλέγουµε τοανάρτηµα center. Κάνοντας κλικ εδώ παίρνουµε περισσότερες πληροφορίες για το επιλεγµένο ανάρτηµα. Το ανάρτηµα πουδιαλέξαµε περικλείει τώρα τον κώδικα που είχαµε προηγουµένως επιλέξει.

Επιλέγοντας αυτό το εικονίδιο, παίρνουµε µία λίστα από φυλλοµετρητές µε τους οποίους µπορούµε ναελέγξουµε τηνεµφάνιση της σελίδας µας. Για συντοµία πατάµε το πλήκτρο F12.

Το στοιχείο center όπως υποδηλεί το όνοµά του, τοποθετεί το περιεχόµενό του, στην προκειµένη περίπτωση τον πίνακα που είχαµε σχεδιάσει, στο κέντρο της σελίδας.

Προβλήµατα µε τοστοιχείο <center> Το ανάρτηµα αυτό υποδηλεί όχι το κέντρο της σελίδας από πλευρά δοµής αλλά τον τρόπο µε τον οποίο θα εµφανιστεί το τµήµα τηςσελίδαςτο οποίο περικλείει στην οθόνη Ας υποθέσουµε ότι θέλουµε να τοποθετούµε στο κέντρο της σελίδας τόσο τους τίτλους των διαφόρων τµηµάτων όσο και τις λεζάντες των εικόνων καθώς επίσης και τις ίδιες τις εικόνες Αν µετά αποφασίσουµε ναστοιχίσουµε αριστερά τους τίτλους; Αν θέλουµε οι λεζάντες επιπλέον να εµφανίζονται µε διαφορετική γραµµατοσειρά;

ιαδοχικά φύλλα τεχνοτροπίας (Cascading Style Sheets) Οι αποφάσεις που αφορούν την τεχνοτροπία της σελίδας συγκεντρώνονται σε ένα αρχείο ή σε συγκεκριµένα σηµεία της σελίδας Ξεχωριστό αρχείο: external style sheet Ενσωµατοµένες στη σελίδα: internal style sheet

Τρόποι επιλογής στοιχείων στο CSS Θυµηθείτε ότι το κάθε στοιχείο έχει κάποια χαρακτηριστικά (attributes) Βάσει της κλάσης του στοιχείου Μέσω του χαρακτηριστικού class Π.χ. Το κείµενο που περιέχεται σε κάθε γνώρισµα που ανήκει στην κλάση important να είναι µπλέ Βάσει της ταυτότητας του στοιχείου Μέσω του χαρακτηριστικού id

Θα µπορούσαµε να κεντράρουµε το περιεχόµενο του στοιχείου div µε το γνώρισµα align, ωστόσο είναι προτιµότερο να χρησιµοποιήσουµε ένα φύλλο τεχνοτροπίας (style sheet) για να διαχωρήσουµε τηδοµή της σελίδας από την εµφάνισή της. Το στοιχείο div είναι ο καλύτερος τρόπος για να διαχωρίσουµε διάφορατµήµατα του κειµένου µας.

Όταν επιχειρήσουµε να προσθέσουµε τοστοιχείο div στον κώδικά µας εµφανίζεται το παράθυρο καθορισµού των γνωρισµάτων για το εν λόγω στοιχείο. Σε αυτή την κατηγορία θα βρούµε τα γνωρίσµατα που έχουν σχέση µε τα φύλλα τεχνοτροπίας. Σε αυτό το παράδειγµα επιλέγουµε να καταχωρήσουµε το συγκεκριµένο στοιχείο κάτω από την κλάση centered.

Το γνώρισµα class περιέχει το όνοµα της κλάσης στην οποία εντάξαµε το συγκεκριµένο div στοιχείο. Θα πρέπει τώρα να συσχετίσουµε αυτή την κλάση µε κάποιο κανόνα τεχνοτροπίας (style).

Πατώντας Ctrl-N εµφανίζεται ο διάλογος δηµιουργίας καινούργιου αρχείου. Επιλέγουµε τοντύπο αρχείου CSS.

Επιλέγοντας αυτό το εικονίδιο µπορούµε να δηµιουργήσουµε ένα νέο κανόνα µέσα στο παρόν φύλλο τεχνοτροπίας. Ονοµάζοντας τον κανόνα χρησιµοποιούµε το όνοµα της κλάσης για την οποία ισχύει αφού πρώτα βάλουµε µία τελεία. Αυτό ισχύει για όλους τους κανόνες που αφορούν κλάσεις. Παράλληλα προσδιορίζουµε ότιο κανόνας που θα δηµιουργήσουµε αφορά µία κλάση στοιχείων και όχι ένα τύπο στοιχείων ή κάποιο συγκεκριµένο στοιχείο.

Στοπαράθυροπου εµφανίζεται βρίσκουµε κατηγοριοποιηµένα όλαταστοιχείατης εµφάνισης ενός στοιχείου τα οποία µπορεί να καθορίσουµε βάσει ενός κανόνα. Ο κανόνας που προσθέτουµε αφορά το στοιχείο εµφάνισης text-align που καθορίζει τη στοίχιση των περιεχοµένων ενός στοιχείου. Επιλέγουµε τηντιµή center για τη στοίχιση.

Έχουµε φυλάξει το φύλλο τεχνοτροπίας στο αρχείο my_style.css Θα πρέπει τώρα να συσχετίσουµε τη σελίδα µας µε το φύλλο τεχνοτροπίας. Κάνουµε δεξί κλικ πάνω στη σελίδα, και απότοεµφανιζόµενο µενού κάνουµε τις εικονιζόµενες επιλογές.

Επιλέγουµε το κουµπί Attach

ιαλέγουµε την επιλογή link για τη χρήση external style sheet. Επιλέγουµε το κουµπί Browse Στοπαράθυροπου εµφανίζεται επιλέγουµε το φύλλο που δηµιουργήσαµε.

Προβλήµατα συµβατότητας µεταξύ φυλλοµετρητών Ως σχεδιαστές ή προγραµµατιστές ιστοσελίδων θα πρέπει να συνηθίσετε στην ιδέα ότι η σελίδα σας πιθανόν να µην εµφανίζεται το ίδιο σε όλους τους φυλλοµετρητές ιαφορετικοί κατασκευαστές δυνατόν να ερµηνεύσουν διαφορετικά διάφορα κοµµάτια ενός προτύπου όπως το CSS Για λόγους συµβατότητας µε προηγούµες εκδόσεις µπορεί συνειδητά να επιλέξουν την παραβίαση του προτύπου υνατό ακόµη να µην έχουν υλοποιήσει ολόκληρο το πρότυπο Στο δικό µας παράδειγµα µερικοί φυλλοµετρητές δε θα µας εµφανίσουν τον πίνακα στο κέντρο της σελίδας Για ασφάλεια, χρειάζεται να καθορίσουµε επιπρόσθετους κανόνες που να διασφαλίζουν την ορθή εµφανιση της σελίδας µας Καλό θα είναι να ελέγχετε τη σελίδα σας µε όσοτοδυνατό περισσότερους φυλλοµετρητές

ηµιουργούµε και πάλι ένα κανόνα κλάσης, αυτή τη φορά για το στοιχείο table. Επειδή η σελίδα µας έχει τώρα συσχετιστεί µε ένα φυλλο τεχνοτροπίας, µπορούµε τώρανα δηµιουργήσουµε νέους κανόνες σε αυτό.

Όταν επιχειρήσουµε να δακτυλογραφήσουµε το όνοµα της κλάσης στην οποία ανήκει το στοιχείο µας, εµφανίζετάι µία λίστα µε όλους τους κανόνες που αφορούν κλάσεις στο φύλλο τεχνοτροπίας που έχουµε καθορίσει για τη σελίδα µας. Προσέξτε το σύνδεσµο που συνδέει τη σελίδα µε το εξωτερικό φύλλο τεχνοτροπίας.

Με το CSS µπορούµε επίσης να καθορίσουµε ταχρώµατα µε ταοποίαθαεµφανιστεί κάποιο στοιχείο στην οθόνη. Ο Dreamweaver µας βοηθά δίδοντάς µας µία παλέτα µε τα 256 web safe χρώµατα, χρώµατα που µπορούν να εµφανιστούν σε όλα τα λειτουργικά συστήµατα.

Σχεδιότυπα (templates) Τα σχεδιότυπα µας επιτρέπουν να δηµιουργήσουµε ιστιακούς τόπους µε πολλές σελίδες οι οποίες να έχουν µεγάλη συνέπεια και οµοιοµορφία µεταξύ τους Επιπλέον, ως σχεδιαστές και προγραµµατιστές µπορούµε να δώσουµε τη δυνατότητα σε κάποιον που δεν έχει απαράιτητα κάποια πείρα µε την HTML να δηµιουργήσει µία επαγγελµατική σελίδα Το σχεδιότυπο είναι µία κανονική σελίδα της οποίας κάποια µέρη µπορεί να τροποποιηθούν, ενώ άλλα παραµένουν προστατευµένα Αποφεύγονται έτσι οι αθέµιτες αλλαγές σε βασικά σηµεία της σελίδας

Για να µετατρέψουµε τη σελίδα µας σε σχεδιότυπο, επιλέγουµε την ανάλογη επιλογή από το µενού που κρύβεται πίσω από αυτό το εικονίδιο.

ίνουµε έναόνοµα στο καινούργιο σχεδιότυπο.

Προσέξτε την αλλαγή στην επέκταση που υποδηλεί ότι το παρόν αρχείο είναι σχεδιότυπο και όχι σελίδα. Τοποθετούµε το δροµέα µας στα σηµεία που θέλουµε να επιτρέψουµε αλλαγέςστη σελίδα µας και τα σηµειώνουµε µε την κατάλληλη επιλογή από το µενού.

Κάθε εγγράψιµο σηµείο (editable region) του σχεδιότυπού µας θα πρέπει να έχει ένα µοναδικό όνοµα.

Εδώ βλέπουµε πως ο Dreamweaver σηµειώνει την έκταση της εγγράψιµης περιοχής.

Το σχεδιότυπο που έχουµε δηµιουργήσει εµφανίζεται πλέον ως ένα από τα στοιχεία (assets) του ιστιακού µας χώρου.

Κάνοντας δεξί κλικ πάνω στο σχεδιότυπο µπορούµε να δηµιουργήσουµε καινούργιες σελίδες που να βασίζονται σε αυτό.

Στη νέα σελίδα µόνο τα σηµεία που δεν εµφανίζονται µε γκρίζο χρώµα µπορούν να τροποποιηθούν. ΠΡΟΣΟΧΗ: µόνο ο Dreamweaver αναγνωρίζει και διαχειρίζεται σωστά τα σχεδιότυπά του.

Συντονισµός µε άλλους προγραµµατιστές και µε τον εξυπηρετητή Καλό είναι να υλοποιούµε και να δοκιµάζουµε αλλαγές σε µία ιστοσελίδα σε διαφορετικό υπολογιστή από αυτόν που παίζει το ρόλο του εξυπηρετητή µέσω του οποίου δηµοσιεύεται η σελίδα Πως συγχρονίζουµε τις αλλαγές στον υπολογιστή υλοποίησης µε ταπεριεχόµενα του εξυπηρετητή; Πολλές φορές χρειάζεται να συνεργαστούµε µε άλλους προγραµατιστές για την υλοποίηση ενός µεγάλου ιστιακού τόπου Τί γίνεται όταν δύο προγραµµατιστές επιχειρήσουν να τροποποιήσουν την ίδια σελίδα;

Από το µενού επιλογής ιστιακού τόπου επιλέγουµε τη διαχείριση τόπων.

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

Κάτω από τον στηλοθέτη (tab) Advanced επιλέγουµε την κατηγορία Remote Info. Πρωτόκολλο επικοινωνίας µε τον εξυπηρετητή. ιεύθυνση εξυπηρετητή. Ευρετήριο ρίζας (root directory) για τον ιστιακό τόπο στον εξυπηρετητή. Όνοµα χρήστη και κωδικός πρόσβασης.

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

Μη ξεχνάτε την επιλογή που µας επιτρέπει να δούµε τα αρχεία που βρίσκονται τόσο στον υπολογιστή υλοποίησης όσο και στο εξυπηρετητή. Τοποθέτηση αποκλειστικού αρχείου στον εξυπηρετητή (Check In). Απόκτηση αρχείου από τον εξυπηρετητή (Get File). Αποκλειστική απόκτηση αρχείου από τον εξυπηρετητή (Check Out). Τοποθέτηση αρχείου στον εξυπηρετητή (Put File).

Για περισσότερες πληροφορίες... http://www.itsu.vt.edu/workshops/dreamweavermx_basics/html/screen.htm http://www.siteownersdesign.com/design-tutorials/dreamweaver-mx-tutorial/ http://www.learnthat.com/computers/learn.asp?id=362&offset=53&index=54 http://t3.k12.hi.us/t302-03/tutorials/dw/