Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες"

Transcript

1 Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις!! Οδηγίες Στο σημερινό εργαστήριο συνεχίζεται η παρουσίαση των οδηγιών μορφοποίησης. Ειδικότερα, μαθαίνετε βασικές τεχνικές τοποθέτησης (layout) των διαφόρων στοιχείων HTML σε μαι ιστοσελίδα. Η κατασκευή μιας πραγματικής (επαγγελματικής) ιστοσελίδας απαιτεί συνδυασμένη γνώση γραφιστικής και μεθόδων αλληλεπίδρασης ανθρώπου-υπολογιστή. Στο εργαστήριο αυτά δεν καλύπτονται απλά μαθαίνετε τα τεχνικά εργαλεία που επιτρέπουν την κατασκευή τέτοιων ιστοσελίδων! 1. Το μοντέλο κουτιού (box model) κάθε στοιχείου HTML κατά το πρότυπο CSS είναι πολύ σημαντικό για την κατανόηση των μεθόδων τοποθέτησης: διαβάστε για αυτό στο Παράρτημα Α! 2. Διαβάστε το Παράρτημα Β για να μάθετε για τις διάφορες μεθόδους τοποθέτησης (positioning) των στοιχείων HTML που παρέχει το πρότυπο CSS. 3. Διαβάστε το Παράρτημα Γ για βασικές οδηγίες στησίματος ιστοσελίδων (page layouts). Στη συνέχεια, χρησιμοποιήστε το υλικό του 3 ου εργαστηρίου: Δημιουργήστε ένα σταθερό σχήμα (fixed layout) για την αρχική σελίδα. Δημιουργήστε ένα ρευστό σχήμα (fluid layout) για τις υπόλοιπες ιστοσελίδες, με μια στήλη πλοήγησης αριστερά, μια στήλη κυρίως κειμένου, header και footer. (Ε9) 1

2 height Τμήμα Πληροφορικής Παράρτημα A: CSS Box Model. Όπως φαίνεται στο σχήμα 1, κάθε στοιχείο HTML περιβάλλεται κατά το πρότυπο CSS από το παραγέμισμα (padding), το περίγραμμα (border) και το περιθώριο (margin). παραγέμισμα (padding) width περιεχόμενο (content) συγχώνευση κάθετου περιθωρίου περίγραμμα (border) περιθώριο (margin) Παρατηρήστε ότι: Σχήμα 1 1. Οι διαστάσεις (width x height) ενός στοιχείου καθορίζονται από τις διαστάσεις του περιεχομένου, δεν προσμετράται δηλαδή ο χώρος που προσθέτουν τα padding, border, margin. 2. Στην εξ'ορισμού (default) τοποθέτηση των στοιχείων, το κάθετο περιθώριο συγχωνεύεται (σχήμα 1). 3. Για κάθε στοιχείο HTML, ο browser έχει προκαθορισμένα padding και margin, τα οποία μπορείτε να αλλάξετε μέσω κανόνων CSS. Μέγεθος του περιθωρίου (margin) Μπορείτε να ρυθμίσετε το μέγεθος του περιθωρίου ενός στοιχείου σε σταθερό νούμερο, σε διάφορες μονάδες μέτρησης: π.χ. σε pixels (px) ή σε σχέση με το μέγεθος της γραμματοσειράς (em). Επίσης μπορείτε να καθορίσετε το μέγεθος ως ποσοστό (%) του πλάτους (width) του στοιχείου-πατέρα. Τέλος, μπορείτε να δώσετε την τιμή auto, για την οποία θα μιλήσουμε αργότερα. Μπορείτε να δώσετε ξεχωριστές τιμές για τα 4 περιθώρια π.χ.: (Ε9) 2

3 body { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; } Εναλλακτικά μπορείτε να ορίσετε όλα τα περιθώρια με μία ιδιότητα: body { margin: 2em } /* all 2em */ body { margin: 1em 2em } /* top&bottom 1em, right&left 2em */ body { margin: 1em 2em 3em } /* top 1em, right&left 2em, bottom 3em */ body { margin: 1em 2em 3em 4em } /* top 1em, right 2em, bottom 3em, left 4em */ Μέγεθος του παραγεμίσματος (padding) Το παραγέμισμα (padding) δημιουργεί χώρο μεταξύ του περιεχομένου και του περιγράμματος. Εμφανίζει το ίδιο χρώμα φόντου με το περιεχόμενο. Ρυθμίζετε το μέγεθος του παραγεμίσματος ακριβώς όπως με το περίγραμμα: οι αντίστοιχες ιδιότητες ονομάζονται padding-top, padding-right, padding-bottom, padding-left και padding. Ιδιότητες του περιγράμματος (border) Για το περίγραμμα ενός στοιχείου HTML μπορείτε να ρυθμίσετε: Το πάχος (width) του περιγράμματος σε κάποιο νούμερο (px, em, κλπ) ή στις τιμές [thin, medium, thick], μέσω της συγκεντρωτικής ιδιότητας border-width (όπως ακριβώς το παράδειγμα με την ιδιότητα margin) ή των ξεχωριστών border-top-width, border-right-width, border-bottom-width, και borderleft-width. Παράδειγμα: h2 { border-width: 1px 2px 1px 2px; } Το στυλ (style) του περιγράμματος, σε κάποιο από τα [none, solid, hidden, dotted, double, dashed, groove, ridge, inset, outset]. Η συγκεντρωτική ιδιότητα ονομάζεται border-style και οι ανεξάρτητες border-top-style, border-right-style, border-bottom-style, border-left-style. Παράδειγμα: p { border-style: solid dotted; } (Ε9) 3

4 Το χρώμα (color) του περιγράμματος μέσω της συγκεντρωτικής ιδιότητας border-color ή των αντίστοιχων ανεξάρτητων border-top-color, borderright-color, border-bottom-color, border-left-color. Παράδειγμα: p { border-color: #7f0000; } Για το περίγραμμα, υπάρχει και η ιδιότητα border που επιτρέπει να θέσουμε όλες τις ιδιότητες μαζί, στη σειρά πάχος στυλ χρώμα: p { border: 2px solid red; } (η ιδιότητα border δεν επιτρέπει να θέσουμε ανεξάρτητες τιμές για τα 4 περιγράμματα) Παράρτημα Β: CSS και μέθοδοι τοποθέτησης (positioning). Μέχρι τώρα έχουμε δει τη μέθοδο τοποθέτησης που χρησιμοποιεί εξ'ορισμού ένας browser: ονομάζεται static και τοποθετεί τα στοιχεία HTML στην κανονική ροή (normal flow) τους. Τα στοιχεία HTML εμφανίζονται σε δύο βασικές κατηγορίες: Ως στοιχεία inline, που παρατίθενται στην κανονική ροή το ένα δίπλα στο άλλο, συγκροτώντας το περιεχόμενο της ιστοσελίδας. Τέτοια στοιχεία είναι το απλό κείμενο, οι σύνδεσμοι (<a>), οι εικόνες (<img>), κλπ. Ως block στοιχεία, τα οποία μπορούν να περιέχουν άλλα block ή inline στοιχεία. Στην κανονική ροή εμφάνισης, ο browser τοποθετεί κάθε block στοιχείο μόνο του, χωρίς άλλα block στοιχεία αριστερά και δεξιά του. Τέτοια στοιχεία είναι π.χ. οι παράγραφοι (<p>) και οι επικεφαλίδες (<h...>). Τα στοιχεία div και span Εκτός από τα κανονικά HTML στοιχεία, υπάρχουν δύο στοιχεία γενικής χρήσης που παρέχονται για να βοηθήσουν στο στήσιμο της ιστοσελίδας. Τα στοιχεία αυτά δεν έχουν σημασιολογική ερμηνεία (semantics) και θα πρέπει να τα χρησιμοποιούμε μόνο όταν δεν μπορούμε να χρησιμοποιήσουμε τα κανονικά : Το block στοιχείο div. Το inline στοιχείο span. Συχνά, για να επιλέξουμε στοιχεία div ή span, χρησιμοποιούμε κλάσεις ή ids (βλ. προηγούμενο εργαστήριο). (Ε9) 4

5 Εναλλακτικές Μέθοδοι Τοποθέτησης Το πρότυπο CSS, εκτός από τη μέθοδο static, παρέχει τις εξής εναλλακτικές μεθόδους τοποθέτησης, οι οποίες ενεργοποιούνται μέσω της ιδιότητας position: Α) Τοποθέτηση relative. Πρώτα υπολογίζεται η θέση του στοιχείου με την κανονική ροή και μετά το στοιχείο μετατοπίζεται σε σχέση με την κανονική του θέση. Ο χώρος που έπιανε το στοιχείο στην κανονική ροή δεν καλύπτεται από άλλο στοιχείο. Στη νέα του θέση, το στοιχείο μπορεί να υπερκαλύπτει (overlap) άλλα γειτονικά στοιχεία. Σύμφωνα με τα προηγούμενα, η τοποθέτηση relative έχει περιορισμένη χρησιμότητα σχεδόν πάντα χρησιμοποιείται για άλλον σκοπό (βλ. επόμενη μέθοδο τοποθέτησης). Στο επόμενη παράδειγμα, ένα στοιχείο p με id testpar τοποθετείται 40 pixels δεξιότερα και 10 pixels πιο κάτω από την κανονική του θέση: p#testpar { position: relative; top: 10px; left: 40px; } B) Τοποθέτηση absolute. Εδώ το στοιχείο βγαίνει τελείως έξω από την κανονική ροή : δεν εξαρτάται από την κανονική του θέση ούτε κρατείται κενός ο χώρος που έπιανε αρχικά. Η θέση του καθορίζεται από (κάποιες από) τις ιδιότητες top, right, bottom και left σε σχέση με το περιβάλλον στοιχείο αναφοράς. Εξ'ορισμού, το περιβάλλον στοιχείο αναφοράς (πού είναι το αρχικό σημείο, στο οποίο προστίθενται τα left, top κλπ) είναι η συνολική ιστοσελίδα (στοιχείο body). Αν θέλετε να έχετε ως αναφορά ένα άλλο στοιχείο πατέρα του τρέχοντος, τοποθετήστε τον πατέρα με τη μέθοδο relative (χωρίς να προσδιορίζετε μέγεθος μετατόπισης για τον πατέρα). Το ίδιο συμβαίνει αν ο πατέρας τοποθετηθεί ως absolute. Τα περιθώρια ενός στοιχείου με τοποθέτηση absolute δεν συγχωνεύονται ποτέ. Η μέθοδος τοποθέτησης absolute χρησιμοποιείται συχνά για το στήσιμο ιστοσελίδων, όπου ανεξάρτητα τμήματα κειμένου ή εικόνες πρέπει να πάνε σε συγκεκριμένη θέση (βλ. και Παράστημα Γ). Γ) Τοποθέτηση fixed. Παρόμοια τοποθέτηση με τη μέθοδο absolute, με τη διαφορά ότι το σημείο αναφοράς είναι πάντα το παράθυρο του browser αυτό έχει ως συνέπεια το στοιχείο να είναι ακίνητο κατά το scrolling. Η μέθοδος τοποθέτησης fixed χρησιμοποιείται σε ειδικές μόνο περιπτώσεις, π.χ. για να κρατάει την κορυφή μιας ιστοσελίδας (header) ακίνητη, ανεξάρτητα από το scrolling του χρήστη. (Ε9) 5

6 Δ) Η χρήση των floats. Αν και δεν αποτελούν μία ακόμα μέθοδο τοποθέτησης (positioning), τα floats χρησιμοποιούνται ευρέως για το στήσιμο ιστοσελίδων! Σε προηγούμενο εργαστήριο χρησιμοποιήσαμε την ιδιότητα float για να μετακινήσουμε εικόνες αριστερά ή δεξιά του κειμένου. Το ίδιο μπορεί να γίνει με κάθε στοιχείο HTML, αρκεί να ορίσουμε το μέγεθός του (οι εικόνες έχουν εξ'ορισμού μέγεθος, ενώ π.χ. μια παράγραφος όχι απλώνεται όσο περισσότερο γίνεται). p#test { float: left; width:200px; } Float γίνεται αριστερά ή δεξιά: ένα στοιχείο float αριστερά (δεξιά) βγαίνει από την κανονική ροή και μετατοπίζεται όσο αριστερότερα (δεξιότερα) είναι δυνατόν. Τα επόμενα στοιχεία ρέουν στα δεξιά (αριστερά) του στοιχείου float. Τα περιθώρια ενός στοιχείου float δεν συγχωνεύονται ποτέ. Η ιδιότητα clear με τιμές [left, right, both] περιγράφει ποια πλευρά ενός στοιχείου δεν μπορεί να είναι γειτονική με ένα προηγούμενο στοιχείο float. Και η ιδιότητα αυτή χρειάζεται για το στήσιμο ιστοσελίδων (βλ. Παράρτημα Γ). Παράρτημα Γ: Βασικές τεχνικές στησίματος ιστοσελίδων. Όσο κι αν ακούγεται απίστευτο, το πρότυπο CSS δεν έχει καταλήξει (ακόμα) στον οριστικό τρόπο στησίματος ιστοσελίδων. Έτσι, πρέπει να αρκεστούμε στα εργαλεία που είδαμε στα Παραρτήματα Α και Β. Οι τεχνικές που χρησιμοποιούνται είναι πάρα πολλές εδώ παρουσιάζονται κάποιες βασικές παραλλαγές μόνο! στοιχείο 1 στοιχείο 2 στοιχείο 3 πλοήγηση header στήλη κειμένου βοηθητική στήλη ιστοσελίδα Α Σχήμα 2 ιστοσελίδα Β Πάρα πολλές ιστοσελίδες έχουν μία από τις δύο μορφές του σχήματος 2: Η πρώτη μορφή (A) εμφανίζεται σε αρχικές ιστοσελίδες. Οι σελίδες αυτές είναι το σημείο εισόδου προς άλλες σελίδες περιεχομένου. Εδώ μας ενδιαφέρει κυρίως η στυλιστική αισθητική κι όχι το περιεχόμενο. Πρέπει να έχουμε απόλυτο έλεγχο της εμφάνισης (συχνά σε επίπεδο pixel). Στην ιστοσελίδα εμφανίζονται μεμονωμένα στοιχεία: εικόνες, πολύ σύντομο (Ε9) 6

7 κείμενο, logos κ.οκ. Οι σελίδες αυτού του τύπου πρέπει να δείχνουν όλα τα στοιχεία σε μία οθόνη και να μην απαιτούν scrolling. Η δεύτερη μορφή (B) αντιπροσωπεύει σελίδες κειμένου. Είναι διατεταγμένη σε στήλες: μία κεντρική με το περιεχόμενο κείμενο, μία δεύτερη στήλη με μενού πλοήγησης και ενδεχομένως μια τρίτη στήλη με βοηθητικούς συνδέσμους και μικρά κομμάτια κειμένου. Σχεδόν πάντα υπάρχει ένα τμήμα στην κορυφή (header) και ένα αντίστοιχο στο τέλος (footer). Στις σελίδες αυτού του τύπου μας ενδιαφέρει πιο πολύ η ευχρηστία. Ο λεπτομερής έλεγχος θέσης των στοιχείων δεν είναι αναγκαίος, ενώ το scrolling για την εμφάνιση περισσότερου κειμένου είναι σύνηθες. A) Σταθερό σχήμα (fixed layout). Σύμφωνα με την τεχνική αυτή, θεωρούμε ότι όλα τα βασικά block στοιχεία της ιστοσελίδας (συνήθως χρησιμοποιούνται στοιχεία div) έχουν σταθερό και προκαθορισμένο μέγεθος (width, height, σε pixels ή %) και θέση. Η τοποθέτηση είναι absolute και οι ιδιότητες left, top χρησιμοποιούνται για κάθε στοιχείο. Τα πάντα βρίσκονται μέσα σε ένα στοιχείο div ( main container ), το οποίο έχει τοποθέτηση relative (ώστε να αποτελεί το περιβάλλον στοιχείο αναφοράς) και σταθερό μέγεθος (συνηθίζεται να είναι 760 ή 960 pixels). Η δήλωση των περιθωρίων για το στοιχείο αυτό είναι: #main-container { margin: 0 auto; } κάτι που σημαίνει χωρίς περιθώριο πάνω και κάτω, κεντραρισμένο αριστερα-δεξιά. Το περιβάλλον αυτό στοιχείο προσφέρει πάντα σταθερό συνολικό μέγεθος και αποτελεί το πλαίσιο αναφοράς για τα μεγέθη των στοιχείων μέσα σε αυτό. Επιπλέον, επειδή κάθε browser έχει τη δική του ιδέα για τα εξ'ορισμού margins και paddings κάθε στοιχείου (ακόμα και του body), συχνά φροντίζουμε πριν από κάθε άλλο να εξουδετερώσουμε τα προκαθορισμένα αυτά νούμερα: * { margin: 0; padding: 0; } position: absolute; top:...px; left:...px; width:...px; height:...px; margin: 0 auto; position: relative; width:...px; στοιχείο main-container ιστοσελίδα Σχήμα 3 (Ε9) 7

8 Συνοπτικά η ιδέα φαίνεται στο σχήμα 3. Το σταθερό σχήμα μας επιτρέπει τον απόλυτο έλεγχο τοποθέτησης και είναι κατάλληλο για αρχικές ιστοσελίδες. Από την άλλη πλευρά, προσαρμόζεται πολύ δύσκολα σε οθόνες με διαφορετικές διαστάσεις, ιδίως σε πολύ μικρές συσκευές. Β) Ρευστό σχήμα (fluid layout). Στο σχήμα αυτό χρησιμοποιούνται float στοιχεία (div) και τα μεγέθη προσαρμόζονται στο τρέχον μέγεθος του παραθύρου. Δεν έχετε τον απόλυτο έλεγχο τοποθέτησης και τα διάφορα στοιχεία παρουσιάζονται ως στήλες περιεχομένου. Το σχήμα είναι ιδιαίτερα κατάλληλο για ιστοσελίδες κειμένου. float: left; width:...px; header πλοήγηση στήλη κειμένου clear: both; footer main-container ιστοσελίδα margin-left:...px; margin: 0 auto; width:...%; Σχήμα 4 Το σχήμα 4 δείχνει πώς μπορεί να κατασκευαστεί ένα σχήμα με 2 στήλες, header και footer. Η στήλη πλοήγησης είναι float:left και έχει σταθερό μέγεθος. Η προσαρμοστικότητα του σχήματος οφείλεται στο πλάτος της κύριας στήλης κειμένου που μπορεί να αυξομειώνεται. Δώστε το κατάλληλο αριστερό περιθώριο στο κυρίως κείμενο (left-margin) για να το εμποδίσετε να τυλιχτεί κάτω από τη στήλη πλοήγησης. Εφόσον υπάρχουν στοιχεία float, είναι σημαντικό το στοιχείο footer να έχει την ιδιότητα clear: both για να αποφύγει πιθανή τοποθέτηση στα δεξιά του στοιχείου float. Το ίδιο σχήμα επεκτείνεται στις 3 στήλες, με το αντίστοιχο στοιχείο float δεξιά. Μπορείτε να περιορίσετε την κύρια στήλη με τις ιδιότητες ελάχιστου ή/και μέγιστου μήκους (min-width και max-width αντίστοιχα). Μια δεύτερη παραλλαγή χρησιμοποιεί το float:left για όλες τις στήλες (στοιχεία div), με μέγεθος σε ποσοστά (%). Στην περίπτωση αυτή θα πρέπει να θυμάστε ότι το περιβάλλον στοιχείο, αν περιέχει μόνο floats, δεν τα περικλείει στο ύψος! Αυτό ίσως δημιουργήσει προβλήματα, όπως π.χ. όταν περιμένετε ότι το χρώμα φόντου του (Ε9) 8

9 περιβάλλοντος στοιχείου θα φαίνεται έως το τέλος των στηλών που περικλείει (αυτό δεν θα συμβεί!). Υπάρχουν διάφορες λύσεις για το θέμα: ψάξτε στο διαδίκτυο για css containing floats. Μια σημασιολογική προσθήκη... Στις διάφορες μεθόδους τοποθέτησης, τα στοιχεία που χρησιμοποιούνται σχεδόν αποκλειστικά είναι τύπου div. Η νεώτερη έκδοση της HTML όμως, προσφέρει τα παρακάτω στοιχεία με σημασιολογική ερμηνεία: nav, για στοιχεία που περιέχουν συνδέσμους πλοήγησης στην σελίδα/site header, για στοιχεία στην κορυφή της σελίδας και footer, για τα στοιχεία που βρίσκονται στο τέλος. Αν και η υποστήριξη από όλους τους browsers δεν είναι ακόμα πλήρης (http://caniuse.com/#feat=html5semantic), μπορείτε να τα χρησιμοποιήσετε αντί των γενικών στοιχείων div! (Ε9) 9

Το απεικονιστικό μοντέλο μορφοποίησης των CSS

Το απεικονιστικό μοντέλο μορφοποίησης των CSS Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει

Διαβάστε περισσότερα

Στοιχεία ορισμού θέσης (Positioning Elements)

Στοιχεία ορισμού θέσης (Positioning Elements) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Διάλεξη 6η CSS Advanced

Διάλεξη 6η CSS Advanced Διάλεξη 6η CSS Advanced Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e. (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Block & Inline elements Advanced

Διαβάστε περισσότερα

Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS

Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr

Γαβαλάς Δαμιανός dgavalas@aegean.gr Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Διάλεξη 4η CSS intermediate

Διάλεξη 4η CSS intermediate Διάλεξη 4η CSS intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Κλάσεις & Ids Εμφώλευση &

Διαβάστε περισσότερα

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

Διαβάστε περισσότερα

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

Διαβάστε περισσότερα

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

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!). Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική

Διαβάστε περισσότερα

Εισαγωγή στο CSS Από: Λία Βέρου

Εισαγωγή στο CSS Από: Λία Βέρου Εισαγωγή στο CSS Από: Λία Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο θα εμφανίζονται

Διαβάστε περισσότερα

Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου

Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο

Διαβάστε περισσότερα

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

Διαβάστε περισσότερα

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

Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. 37 Αφού καθορίσετε τα βασικά στοιχεία του νέου κανόνα css, όπως είδαµε στις προηγούµενες διαφάνειες,

Διαβάστε περισσότερα

Εμφάνιση και κρύψιμο στοιχείων

Εμφάνιση και κρύψιμο στοιχείων Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #6η: HTML: ετικέτες ΜΕΤΑ, Cascading Style Sheet (CSS) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

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

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table. DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη

Διαβάστε περισσότερα

12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή».

12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή». 12. HTML και CSS Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στην τεχνολογία Cascading Style Sheets (CSS), η εξοικείωση με τις βασικές αρχές και χρήσεις της και τη

Διαβάστε περισσότερα

Περιεχόμενα. Γαβαλάς Δαμιανός

Περιεχόμενα. Γαβαλάς Δαμιανός Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα

Διαβάστε περισσότερα

Γραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις

Γραπτή εξέταση. Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Δικτυακά Πολυμέσα ΙΙ Διάλεξη #12 η : Επανάληψη, προετοιμασία για τις γραπτές εξετάσεις Γαβαλάς Δαμιανός dgavalas@aegean.gr Γραπτή εξέταση H διάρκεια της εξέτασης θα είναι 2 ώρες και 15 Θα απαντήσετε σε

Διαβάστε περισσότερα

Εργαστήριο #10 (Ε10) 1

Εργαστήριο #10 (Ε10) 1 Εργαστήριο #10 Από τα προηγούμενα εργαστήρια......θα χρειαστείτε ορισμένες από τις οδηγίες μορφοποίησης CSS (ανατρέξτε στις εκφωνήσεις του 8 ου και 9 ου εργαστηρίου).! Οδηγίες Στη δυναμική δημιουργία ιστοσελίδων

Διαβάστε περισσότερα

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

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

ΕΠΛ 012. Φύλλα Στυλ (ΙΙ)

ΕΠΛ 012. Φύλλα Στυλ (ΙΙ) ΕΠΛ 012 Φύλλα Στυλ (ΙΙ) Τροποποίηση χρωµάτων Color: "όνοµα χρώµατος" rgb (rr,gg,bb) #RRGGBB RGB συνιστώσες όπου rr,gg,bb είναι ακέραιοι από το 0 255 H1 {color: rgb(255,0,0)} κόκκινες επικεφαλίδες background-colorcolor

Διαβάστε περισσότερα

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

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ

ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ 4.1. Εισαγωγή Το παρόν κεφάλαιο πραγματεύεται τις αρχές του προσαρμοστικού σχεδιασμού στον ιστό. Εξηγεί την ανάγκη που οδήγησε στην επινόηση του προσαρμοστικού σχεδιασμού

Διαβάστε περισσότερα

Η Βίβλος των CSS. Εισαγωγή στα CSS

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

Διαβάστε περισσότερα

ΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ:

ΜΑΘΗΜΑ Στοίχιση Παραγράφων. 2. Εσοχές Παραγράφων ΣΤΟΧΟΙ: ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Στοίχιση Παραγράφων 2. Εσοχές Παραγράφων 3. Διάστημα Μεταξύ Γραμμών (Διάστιχο) 4. Απόσταση Μεταξύ Παραγράφων 5. Καθορισμός Στηλοθετών (Tabs) 6. Μετακίνηση Στηλοθετών 7. Διαγραφή Στηλοθετών

Διαβάστε περισσότερα

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

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

Διαβάστε περισσότερα

CSS 2. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ

CSS 2. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ CSS 2 Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ Σηόρνο ηεο ώξαο Δπέθηαζε ησλ γλώζεσλ ηνπ CSS 1 Κιάζεηο θαη id Δκθώιεπζε

Διαβάστε περισσότερα

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

Δημιουργία ενός κενού πίνακα 3.4.1.1 Δημιουργία ενός κενού πίνακα Ένας πίνακας αποτελείται από έναν αριθμό γραμμών και στηλών που δημιουργούν ένα πλέγμα. Σε αυτό το πλέγμα είναι πιθανή η ύπαρξη ή μη περιθωρίων. Κάθε κελί του πίνακα

Διαβάστε περισσότερα

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

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο

Διαβάστε περισσότερα

Σημασιολογικός Ιστός (Semantic Web) - XML

Σημασιολογικός Ιστός (Semantic Web) - XML Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Σημασιολογικός Ιστός (Semantic Web) - XML 8/11/2016 Δρ. Ανδριάνα Πρέντζα Αναπληρώτρια Καθηγήτρια aprentza@unipi.gr Πανεπιστήμιο Πειραιά Τμήμα Ψηφιακών Συστημάτων

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

CSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης

CSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης CSS Cascading Style Sheets CSS Τα Cascading Style Sheets ορίζουν τις ιδιότητες παρουσίασης των στοιχεία της HTML. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά

Διαβάστε περισσότερα

ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ. Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ. Αρ. Μητρώου: 04/2557

ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ. Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ. Αρ. Μητρώου: 04/2557 ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ Της φοιτήτριας Τσαντοπούλου Βαΐα- Αικατερίνη Επιβλέπων καθηγητής Βασίλης Κώστογλου Αρ. Μητρώου: 04/2557 Θεσσαλονίκη

Διαβάστε περισσότερα

CSS. Προγρ/σμός Εφαρμογών Διαδικτύου. (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών. Τμήμα Μηχανικών Πληροφορικής ΤΕ.

CSS. Προγρ/σμός Εφαρμογών Διαδικτύου. (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών. Τμήμα Μηχανικών Πληροφορικής ΤΕ. CSS Cascading Style Sheets Προγρ/σμός Εφαρμογών Διαδικτύου (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών Τμήμα Μηχανικών Πληροφορικής ΤΕ ΤΕΙ Θεσσαλίας Τι Είναι τα CSS; 2 Cascading (στοιβαγμένα) Style

Διαβάστε περισσότερα

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

Coding Bootcamp. Εισαγωγή στo CSS

Coding Bootcamp. Εισαγωγή στo CSS Εισαγωγή στo CSS CSS (Cascading Style Sheets) Η Html σχεδιάστηκε αρχικά για να προβάλλει κείμενο και είχε σκοπό να «ορίσει» το περιεχόμενο μιας σελίδας υπό την έννοια ποιο κείμενο είναι επικεφαλίδα, ποιο

Διαβάστε περισσότερα

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

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 Μάθαµε στο προηγούµενο µάθηµα πώς να δίνουµε ονόµατα στις ιστοσελίδες µας, να βάζουµε χρώµα και γραφικά, ή ακόµα να δηµιουργούµε υπερσυνδέσµους σε κείµενο και εικόνες. Σήµερα µεταξύ

Διαβάστε περισσότερα

Επεξεργαστής Κειμένου: (Microsoft Word)

Επεξεργαστής Κειμένου: (Microsoft Word) Επεξεργαστής Κειμένου: (Microsoft Word) Στο περιβάλλον εργασίας του επεξεργαστή κειμένου Microsoft Word εκτελούμε τις παρακάτω λειτουργίες: 1) Δημιουργία Νέου Εγγράφου: Η Δημιουργία ενός Νέου Εγγράφου

Διαβάστε περισσότερα

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

Διαβάστε περισσότερα

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

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

Διαβάστε περισσότερα

1 ο ΓΥΜΝΑΣΙΟ ΘΕΡΜΗΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ ΧΑΡΑΚΤΗΡΩΝ. Μάθημα: Πληροφορική Α' Γυμν. Ενότητα: Επεξεργασία κειμένου

1 ο ΓΥΜΝΑΣΙΟ ΘΕΡΜΗΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ ΧΑΡΑΚΤΗΡΩΝ. Μάθημα: Πληροφορική Α' Γυμν. Ενότητα: Επεξεργασία κειμένου 1 ο ΓΥΜΝΑΣΙΟ ΘΕΡΜΗΣ Μάθημα: Πληροφορική Α' Γυμν. Ενότητα: Επεξεργασία κειμένου ΜΟΡΦΟΠΟΙΗΣΕΙΣ Τα κυριότερα είδη μορφοποιήσεων είναι: Μορφοποιήσεις Χαρακτήρων Μορφοποιήσεις Παραγράφων Οι Μορφοποιήσεις Χαρακτήρων

Διαβάστε περισσότερα

Εγχειρίδιο για τη δημιουργία Newsletter στο Word

Εγχειρίδιο για τη δημιουργία Newsletter στο Word Εγχειρίδιο για τη δημιουργία Newsletter στο Word Παράδειγμα Εικόνας Πρόλογος Αυτό το πρότυπο του Word θα σας δώσει τη δυνατότητα να δημιουργήσετε τα προσωπικά σας Newsletter στο MS Word. Μπορείτε να επιλέξετε

Διαβάστε περισσότερα

ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ

ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΤΜΗΜΑ ΕΠΙΣΤΗΜΗΣ ΥΠΟΛΟΓΙΣΤΩΝ ΜΑΘΗΜΑ ΕΠΙΛΟΓΗΣ ΗΥ-464 ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ Διδάσκων: Κωνσταντίνος Στεφανίδης Εισαγωγή HTML Στοιχεία HTML Παράμετροι

Διαβάστε περισσότερα

Προγραμματισμός Παγκόσμιου Ιστού

Προγραμματισμός Παγκόσμιου Ιστού Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 7 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 04 Απριλίου 2016 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Σύνοψη Ιεραρχία

Διαβάστε περισσότερα

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

Πίνακες, περιγράµµατα και σκίαση Πίνακες, περιγράµµατα και σκίαση Οι πίνακες Οι πίνακες είναι ορθογώνια πλαίσια που χωρίζονται σε γραµµές και στήλες. Η τοµή µιας γραµµής µε µια στήλη προσδιορίζει ένα κελί. Τα στοιχεία, που παρουσιάζουµε,

Διαβάστε περισσότερα

Μενού Προβολή. Προβολές εγγράφου

Μενού Προβολή. Προβολές εγγράφου Μενού Προβολή Προβολές εγγράφου Το Word παρέχει πέντε διαφορετικού είδους προβολές στον χρήστη, οι οποίες και βρίσκονται στο μενού Προβολή (View). Εναλλακτικά μπορούμε να επιλέξουμε το είδος προβολής που

Διαβάστε περισσότερα

ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL

ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL ΓΡΑΦΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ ΜΕ ΕXCEL 1. Εισαγωγή δεδομένων σε φύλλο εργασίας του Microsoft Excel Για να τοποθετήσουμε τις μετρήσεις μας σε ένα φύλλο Excel, κάνουμε κλικ στο κελί στο οποίο θέλουμε να τοποθετήσουμε

Διαβάστε περισσότερα

Εισαγωγή στο Word. Κεντρική οθόνη του Word

Εισαγωγή στο Word. Κεντρική οθόνη του Word Εισαγωγή στο Word Το Word είναι το δημοφιλέστερο πρόγραμμα επεξεργασίας κειμένου. Τα κύρια χαρακτηριστικά του είναι η εύκολη και γρήγορη δημιουργία και επεξεργασία εγγράφων. Κεντρική οθόνη του Word Το

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Οδηγός γρήγορης εκκίνησης

Οδηγός γρήγορης εκκίνησης Οδηγός γρήγορης εκκίνησης Το Microsoft Word 2013 έχει διαφορετική εμφάνιση από προηγούμενες εκδόσεις. Γι αυτό το λόγο, δημιουργήσαμε αυτόν τον οδηγό για να ελαχιστοποιήσουμε την καμπύλη εκμάθησης. Γραμμή

Διαβάστε περισσότερα

Σενάρια ανάκτησης πληροφορίας στο «παραδοσιακό» Internet

Σενάρια ανάκτησης πληροφορίας στο «παραδοσιακό» Internet Δικτυακά Πολυμέσα ΙΙ Διάλεξη #10 η : Σχεδιασμός web sites για κινητές συσκευές Γαβαλάς Δαμιανός dgavalas@aegean.gr Σενάρια ανάκτησης πληροφορίας στο «παραδοσιακό» Internet 1o επίπεδο (1-tier) HTTP αίτηση

Διαβάστε περισσότερα

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

Εργαστηριακή Άσκηση 4 Μορφοποίηση Κειμένου μέσω του Μορφοποίηση χαρακτήρων Όταν ανοίγουμε το Word η γραμματοσειρά που υπάρχει είναι προκαθορισμένη. Το πλαίσιο διαλόγου Γραμματοσειρά μας επιτρέπει να κάνουμε περισσότερες μορφοποιήσεις. Επιλέγουμε Μορφή Απόσταση

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή

Διαβάστε περισσότερα

Θέματα 2,3 ης εβδομάδας. Αρχιγράμματα Σύμβολα Κεφαλίδες & Υποσέλιδα Λίστες Περιγράμματα & Σκίαση Ορθογραφικός έλεγχος

Θέματα 2,3 ης εβδομάδας. Αρχιγράμματα Σύμβολα Κεφαλίδες & Υποσέλιδα Λίστες Περιγράμματα & Σκίαση Ορθογραφικός έλεγχος ΠΛΗΡΟΦΟΡΙΚΗ Ι Θέματα 2,3 ης εβδομάδας Αρχιγράμματα Σύμβολα Κεφαλίδες & Υποσέλιδα Λίστες Περιγράμματα & Σκίαση Ορθογραφικός έλεγχος Αρχιγράμματα (1/2) Μπορούμε να βάλουμε αρχιγράμματα στην αρχή παραγράφων

Διαβάστε περισσότερα

ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007

ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007 1. ΓΡΑΜΜΗ ΜΕΝΟΥ ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007 2. ΓΡΑΜΜΗ ΕΡΓΑΛΕΙΩΝ Κάθε μενού έχει τις δικές της δυνατότητες, όπως για παράδειγμα μόλις πατήσετε το κουμπί κεντρική βγαίνουν τα εικονίδια των δυνατοτήτων που

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο.

Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο. Εργαστήριο #12 Από τα προηγούμενα εργαστήρια: Το εργαστήριο αυτό είναι ανεξάρτητο από τα προηγούμενα επειδή όμως ασχολείται με τη γλώσσα JavaScript, βεβαιωθείτε ότι έχετε διαβάσει το εισαγωγικό Παράρτημα

Διαβάστε περισσότερα

Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας

Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά κειμένου Με την CSS ιδιότητα

Διαβάστε περισσότερα

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

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

Αλλαγή προσανατολισμού εγγράφου σε κατακόρυφο ή οριζόντιο, αλλαγή μεγέθους σελίδας

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

Διαβάστε περισσότερα

Προαπαιτούμενες Ρυθμίσεις: Για την σωστή εκτύπωση των προσφορών απαιτούνται οι εξής ρυθμίσεις στο φυλλομετρητή (browser) που χρησιμοποιείτε:

Προαπαιτούμενες Ρυθμίσεις: Για την σωστή εκτύπωση των προσφορών απαιτούνται οι εξής ρυθμίσεις στο φυλλομετρητή (browser) που χρησιμοποιείτε: Ελάχιστες Απαιτήσεις Εφαρμογής Η εφαρμογή για να λειτουργήσει σωστά απαιτεί τα εξής: Internet Explorer 6.0 ή νεότερο / Mozilla Firefox 1.5 ή νεότερο / Safari Οποιοδήποτε συνδυασμό υπολογιστή (PC/MAC/Linux/Unix)

Διαβάστε περισσότερα

Βασικά Στοιχεία Μορφοποίησης

Βασικά Στοιχεία Μορφοποίησης Βασικά Στοιχεία Μορφοποίησης Φύλλων Εργασίας 3 ΚΥΡΙΑ ΣΗΜΕΙΑ ΤΟΥ ΚΕΦΑΛΑΙΟΥ Επιλογή διαφόρων στοιχείων ενός φύλλου Αλλαγή μεγέθους γραμμών και στηλών Εισαγωγή και διαγραφή γραμμών και στηλών Εισαγωγή και

Διαβάστε περισσότερα

Σχεδιαζόμενη Απόδειξη Πληρωμής

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

Διαβάστε περισσότερα

Εγχειρίδιο χρήσης Print2PDF σελ. 1 από 32

Εγχειρίδιο χρήσης Print2PDF σελ. 1 από 32 Πρόγραμμα Print2PDF (Εκτύπωση κειμένου και εικόνων σε αρχεία PDF) Πρόλογος Η εφαρμογή Print2PDF (Print to PDF Εκτύπωση σε αρχεία PDF) σας επιτρέπει να εκτυπώσετε το δικό σας κείμενο πάνω σε ένα έντυπο

Διαβάστε περισσότερα

Microsoft PowerPoint 2007

Microsoft PowerPoint 2007 Information Technology Services and Solutions Σύμβουλοι Μηχανογράφησης και Εκπαίδευσης Στεφ. Σκουλούδη 27, Καλλίπολη, Πειραιάς 210 45 38 177 http://www.itss.gr/ Microsoft PowerPoint 2007 Κωνσταντίνος Κωβαίος

Διαβάστε περισσότερα

Θέματα Ψηφιακής Οικονομίας

Θέματα Ψηφιακής Οικονομίας Θέματα Ψηφιακής Οικονομίας Ενότητα 3: Δημιουργία mockup δικτυακής επιχείρισης Μανώλης Τζαγκαράκης, Βικτωρία Δασκάλου Σχολή Οργάνωσης και Διοίκησης Επιχειρήσεων Τμήμα Οικονομικών Επιστημών Σκοποί ενότητας

Διαβάστε περισσότερα

1. Βασικές Λειτουργίες του MS- Word

1. Βασικές Λειτουργίες του MS- Word 1. Βασικές Λειτουργίες του MS- Word Το MS-Word, που είναι και αντικείμενο αυτών των σημειώσεων είναι ένα πρόγραμμα επεξεργασίας κειμένου, που στις σελίδες του μπορεί να περιέχει εκτός από κείμενο, εικόνες

Διαβάστε περισσότερα

HTML... 1. Εισαγωγή στην HTML και τα CSS

HTML... 1. Εισαγωγή στην HTML και τα CSS HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα

Διαβάστε περισσότερα

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

Περιεχόμενα. Περιεχόμενα...v Περιεχόμενα Περιεχόμενα...v Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...1 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...18 Κεφάλαιο 3: Εύρεση, αντικατάσταση, και μετάβαση σε συγκεκριμένο στοιχείο...35

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 5.0

Εξεταστέα Ύλη (Syllabus) Έκδοση 5.0 Εξεταστέα Ύλη (Syllabus) Έκδοση 5.0 Πνευματικά Δικαιώματα 2007 Ίδρυμα ECDL (ECDL Foundation www.ecdl.org) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

5.1.1 Περιγραφή των συστατικών τμημάτων ενός γραφήματος

5.1.1 Περιγραφή των συστατικών τμημάτων ενός γραφήματος 5. Γραφήματα 5.1 Εισαγωγή 5.1.1 Περιγραφή των συστατικών τμημάτων ενός γραφήματος Το Discoverer παρέχει μεγάλες δυνατότητες στη δημιουργία γραφημάτων, καθιστώντας δυνατή τη διαμόρφωση κάθε συστατικού μέρους

Διαβάστε περισσότερα

ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ ΣΧΟΛΗ ΜΗΧΑΝΙΚΗΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΗΛΕΚΤΡΟΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΗΣ

ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ ΣΧΟΛΗ ΜΗΧΑΝΙΚΗΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΗΛΕΚΤΡΟΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΗΣ ΤΕΧΝΟΛΟΓΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ ΣΧΟΛΗ ΜΗΧΑΝΙΚΗΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΗΛΕΚΤΡΟΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΗΣ Πτυχιακή εργασία ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΔΗΜΙΟΥΡΓΙΑ ΕΦΑΡΜΟΓΗΣ

Διαβάστε περισσότερα

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς Εργασία-3: Παρουσίαση Εργασίας Ομάδα Α. Προετοιμασία Αναφοράς Αρκετοί πιστεύουν πως η επιτυχία μιας παρουσίασης είναι δεδομένη εάν ο παρουσιαστής κατέχει το θέμα που πρόκειται να παρουσιάσει και είναι

Διαβάστε περισσότερα

ΕΦΑΡΜΟΓΕΣ ΔΙΑΔΙΚΤΥΟΥ ΓΙΑ ΚΟΙΝΩΝΙΚΗ ΚΑΙ ΨΥΧΟΛΟΓΙΚΗ ΥΠΟΣΤΗΡΙΞΗ ΦΟΙΤΗΤΙΚΩΝ ΠΛΗΘΥΣΜΩΝ

ΕΦΑΡΜΟΓΕΣ ΔΙΑΔΙΚΤΥΟΥ ΓΙΑ ΚΟΙΝΩΝΙΚΗ ΚΑΙ ΨΥΧΟΛΟΓΙΚΗ ΥΠΟΣΤΗΡΙΞΗ ΦΟΙΤΗΤΙΚΩΝ ΠΛΗΘΥΣΜΩΝ Καμαράκης Χριστόδουλος Παπαγεωργίου Αλέξανδρος ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΕΦΑΡΜΟΓΕΣ ΔΙΑΔΙΚΤΥΟΥ ΓΙΑ ΚΟΙΝΩΝΙΚΗ ΚΑΙ ΨΥΧΟΛΟΓΙΚΗ ΥΠΟΣΤΗΡΙΞΗ ΦΟΙΤΗΤΙΚΩΝ ΠΛΗΘΥΣΜΩΝ Η ΠΕΡΙΠΤΩΣΗ ΤΟΥ Α.Π.Θ. Επιβλέπων: Επίκουρος Καθηγητής

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ

ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ 1. ΠΕΡΙΒΑΛΛΟΝ ΗΛΕΚΤΡΟΝΙΚΟΥ ΥΠΟΛΟΓΙΣΤΗ 1.1. Βασικές Λειτουργίες και Ρυθµίσεις 1.1.1 Εκκίνηση, Τερµατισµός, Επανεκκίνηση του Η/Υ ακολουθώντας τις κατάλληλες διαδικασίες 1.1.2

Διαβάστε περισσότερα

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

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2009-2012 -SYSTEM- All rights reserved 2/133 Μάθημα 1 ο Εισαγωγή ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 14 ο Συμβουλές Μορφοποιήσεων Μάθημα 2 ο Δημιουργία & Αποθήκευση Μάθημα 3 ο Διατάξεις Μάθημα 4 ο Το εργαλείο

Διαβάστε περισσότερα

www.costaschatzinikolas.gr

www.costaschatzinikolas.gr ECDL CORE ΕΝΟΤΗΤΑ 3 Επεξεργασία Κειμένου Microsoft Word Επαναληπτικές Ερωτήσεις Εξετάσεων ECDL CORE ΕΝΟΤΗΤΑ 3 Επεξεργασία Κειμένου Microsoft Word Επαναληπτικές Ερωτήσεις Εξετάσεων Δημιουργία - Συγγραφή

Διαβάστε περισσότερα

ΥΠΟΧΡΕΩΤΙΚΕΣ ΓΝΩΣΕΙΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΕΡΟΣ ΙΙ

ΥΠΟΧΡΕΩΤΙΚΕΣ ΓΝΩΣΕΙΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΕΡΟΣ ΙΙ Κωδικός Πακέτου ACTA CCU/2-012 Τίτλος Πακέτου Εκπαιδευτικές Ενότητες ΥΠΟΧΡΕΩΤΙΚΕΣ ΓΝΩΣΕΙΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΕΡΟΣ ΙΙ Χρήση Η/Υ και ιαχείριση Αρχείων - Windows Περιβάλλον Η/Υ - Βασικές Λειτουργίες και Ρυθµίσεις

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων

Σχεδίαση ιστοσελίδων Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

Βοηθητικό Εγχειρίδιο

Βοηθητικό Εγχειρίδιο AGFN EXPERT LITE Χρηµατιστήριο Αθηνών Χρηµατιστήριο Αξιών Κύπρου Βοηθητικό Εγχειρίδιο Version 7.5.0.322 ΠΕΡΙΕΧΟΜΕΝΑ 1. ΕΙΣΑΓΩΓΗ... 2 1.1. ΕΚΚΙΝΗΣΗ ΕΦΑΡΜΟΓΗΣ AGFN EXPERTLITE... 2 2. ΣΥΝ ΕΣΗ (LOGIN)... 3

Διαβάστε περισσότερα

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

Shift+γράμμα. Πατάμε τον τόνο (δί[λα στο L) και μετά το φωνήεν. Πως βάζουμε διαλυτικά; Πατάμε το Shift+ τόνο και μετά το φωνήεν (ι ή υ) Βασικές λειτουργίες του πληκτρολογίου Αλλαγή μεταξύ Αγγλικών και Ελληνικών Όταν γράφουμε σε πεζά (μικρά) και θέλουμε να γράψουμε ένα γράμμα κεφαλαίο Όταν γράφουμε συνέχεια Κεφαλαία Για να γράψουμε ένα

Διαβάστε περισσότερα

Website Builder Βασικές Οδηγίες Χρήσης

Website Builder Βασικές Οδηγίες Χρήσης Website Builder Βασικές Οδηγίες Χρήσης 1 Περιεχόμενα: Διαλέγοντας τον τύπο του website...3 Δημιουργώντας το Εικαστικό του website σας...4 Επιλέγοντας Εικαστικό Σχέδιο...5 Αφαιρώντας το Εικαστικό Πρότυπο

Διαβάστε περισσότερα

Εργοστάσιο Ανακύκλωσης

Εργοστάσιο Ανακύκλωσης World Robot Olympiad 2016 Κατηγορία Regular (Κανονική) Λύκειο Περιγραφή πρόκλησης, κανονισμοί και βαθμολόγηση Εργοστάσιο Ανακύκλωσης Έκδοση: 15 Ιανουαρίου 2016 Επιμέλεια: Κλαδογένης Δημήτρης & Δανελλάκης

Διαβάστε περισσότερα

SITEBUILDER ΠΛΑΤΦΟΡΜΑ ΑΥΤΟΝΟΜΗΣ ΚΑΤΑΣΚΕΥΗΣ & ΔΙΑΧΕΙΡΙΣΗΣ ΔΙΚΤΥΑΚΩΝ ΤΟΠΩΝ (WEBSITE) ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ. Version 2.0

SITEBUILDER ΠΛΑΤΦΟΡΜΑ ΑΥΤΟΝΟΜΗΣ ΚΑΤΑΣΚΕΥΗΣ & ΔΙΑΧΕΙΡΙΣΗΣ ΔΙΚΤΥΑΚΩΝ ΤΟΠΩΝ (WEBSITE) ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ. Version 2.0 SITEBUILDER ΠΛΑΤΦΟΡΜΑ ΑΥΤΟΝΟΜΗΣ ΚΑΤΑΣΚΕΥΗΣ & ΔΙΑΧΕΙΡΙΣΗΣ ΔΙΚΤΥΑΚΩΝ ΤΟΠΩΝ (WEBSITE) ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ Version 2.0 Περιεχόμενα 1. Οδηγίες πρόσβασης... 3 2. Οδηγίες Σχεδιασμού Website... 4 2.1. Έναρξη...

Διαβάστε περισσότερα

Singular Report Generator. Σχ 1 ηµιουργία Καταστάσεων SRG

Singular Report Generator. Σχ 1 ηµιουργία Καταστάσεων SRG Μια από τις πιο σηµαντικές ανάγκες που αντιµετωπίζει µια επιχείρηση κατά την εγκατάσταση ενός λογισµικού «πακέτου» (Οικονοµικής & Εµπορικής ιαχείρισης), είναι ο τρόπος µε τον οποίο πρέπει να ανταποκριθεί

Διαβάστε περισσότερα

Μέρος 2ο (Συγχωνεύοντας Multimedia & Animation)

Μέρος 2ο (Συγχωνεύοντας Multimedia & Animation) Μέρος 2ο (Συγχωνεύοντας Multimedia & Animation) Timeline Menu Timeline Behaviors Animated pop-up menu Προσθήκη video στην ιστοσελίδα Media players Embedding Videos Ιδιότητες embeding video Προσθέτοντας

Διαβάστε περισσότερα

3 ο Εργαστήριο Μεταβλητές, Τελεστές

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

Διαβάστε περισσότερα

Δημιουργώντας γραφικά στο περιβάλλον 3Ds Max χρησιμοποιώντας βασικά εργαλεία

Δημιουργώντας γραφικά στο περιβάλλον 3Ds Max χρησιμοποιώντας βασικά εργαλεία Δημιουργώντας γραφικά στο περιβάλλον 3Ds Max χρησιμοποιώντας βασικά εργαλεία Στην άσκηση αυτή θα μάθετε πώς να χρησιμοποιήσετε βασικά εργαλεία στο περιβάλλον 3Ds Max για να δημιουργήσετε ένα τρισδιάστατο

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

Σε αυτή τη σειρά διαφανειών θα παρουσιαστούν πρακτικά θέματα σχεδίασης μίας ιστοσελίδας που περιέχει css.

Σε αυτή τη σειρά διαφανειών θα παρουσιαστούν πρακτικά θέματα σχεδίασης μίας ιστοσελίδας που περιέχει css. Σε αυτή τη σειρά διαφανειών θα παρουσιαστούν πρακτικά θέματα σχεδίασης μίας ιστοσελίδας που περιέχει css. 1 Σε αυτή τη σειρά διαφανειών αρχικά θα αναφερθούμε στην επιλογή χρώματος σχεδίασης και τους συνήθεις

Διαβάστε περισσότερα

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

ΕΙΣΑΓΩΓΗ ΣΤΟ MICROSOFT POWERPOINT ΕΙΣΑΓΩΓΗ ΣΤΟ MICROSOFT POWERPOINT 1 Εισαγωγή Το PowerPoint είναι µια ισχυρή εφαρµογή για τη δηµιουργία παρουσιάσεων και µπορεί να χρησιµεύσει στη δηµιουργία διαφανειών, καθώς και συνοδευτικών σηµειώσεων

Διαβάστε περισσότερα