Σχεδιασμός Web Σελίδων Με Τον KompoZer Αθανάσιος Ανδρούτσος ΟΠΑ

Παιδαγωγικές Εφαρμογές στην Εκπαίδευση
Σχεδιασμός Web Σελίδων

με τον kompoZer
Εισαγωγή στην HTML
Εισαγωγή στα CSSs
Εισαγωγή στην JavaScript
Επεξεργασία εικόνας με το GIMP
Σχεδιασμός και ανάπτυξη ενός Web Site
Αθανάσιος Ανδρούτσος 2015

1
HyperText Mark-up Language

(HTML)
1
World Wide Web
Μοντέλο Λειτουργίας Παιδαγωγικές Εφαρμογές στην Εκπαίδευση
Web Server/HTTP Server
IP Διευθ. &
αίτηση/request Hostname
Mozilla HTTP
Chrome απάντηση/reply
Safari
IE
Web Client
.html
Αποθήκη
• Αρχική Σελίδα index.htm Αρχείων
• IP Διεύθυνση 195.251.255.138
DNS
• Ονοματοδοσία (URL) http://www.aueb.gr/
2
Web Σελίδες
• Περιεχόμενο (Content) + Μορφοποίηση

• Περιεχόμενο = Πολυμεσικό περιεχόμενο + Υπερκείμενο
– Κείμενο
– Εικόνα/κινούμενη εικόνα/βίντεο Πολυμέσα
– Ήχος
– Υπερκείμενο Σύνδεσμοι
• Μορφοποίηση
– Κείμενο: Γραμματοσειρά, μέγεθος, χρώμα, στοίχιση
– Εικόνες: Διαστάσεις εικόνας, εναλλακτικό κείμενο
• Περιεχόμενο μορφοποίηση (από λογική άποψη)

• Μπορεί και από φυσική άποψη (διαφορετικά αρχεία) για ευελιξία
3
HTML
• Γλώσσα για τον ορισμό του περιεχομένου και της

μορφοποίησης των Web σελίδων
• Το συντακτικό αποτελείται από ένα σύνολο από
ετικέτες (markup tags)
• Τα tags χρησιμοποιούνται για τον προσδιορισμό και
την μορφοποίηση του περιεχομένου
Πρώτο Έγγραφο
Προσδιορίζει ότι το Επικεφαλίδα

<!DOCTYPE html> έγγραφο είναι HTML
<html>
<head>
<meta charset= ” UTF-8”>
Begin <title>Η πρώτη σελίδα μου</title>
End </head>
<body>
<h1>Η πρώτη μου επικεφαλίδα</h1>
<p>Η πρώτη μου παράγραφος</p>
</body>
</html>
• HTML tags Σώμα εγγράφου
– Ζεύγη: Opening/Closing tag
– HTML5: <!DOCTYPE html> - UTF-8 default encoding
– Not case sensitive
5
Συντάκτες κειμένου
• Για την συγγραφή HTML μπορεί να χρησιμοποιηθεί

οποιοσδήποτε απλός συντάκτης κειμένου.
• Παράδειγμα Notepad ή Notepad++
– Συγγραφή
– Αποθήκευση ως .htm ή .html
– Άνοιγμα (εμφάνιση) σε οποιονδήποτε browser
(Chrome/Mozilla/IE)
Βασικά στοιχεία HTML για τη

συγγραφή περιεχομένου Παιδαγωγικές Εφαρμογές στην Εκπαίδευση
• Επικεφαλίδες
– <h1> έως <h6>
– <h1> Η επικεφαλίδα μου</h1>
• Παράγραφοι
– <p>
– <p>Η παράγραφός μου</p>
• Σύνδεσμοι
– <a href=“http://www.aueb.gr/”>Οικ. Παν. Αθηνών</a>
• Εικόνες
– <img src=“opa.jpg” alt=“ΟΠΑ” width=“200” height=“100”>
• Τα tags μπορούν να περιέχουν και ιδιότητες (attributes)

• Μερικά στοιχεία δεν έχουν closing tag 7
Ιδιότητες (Attributes)
• Όλα τα στοιχεία HTML μπορούν να έχουν ιδιότητες για

να προσδιορίζουν επιπλέον χαρακτηριστικά
• Παραδείγματα
– <html lang=“gr“>
– <p lang=“en“>Greece<p>
– <p title=“AUEB“>Athens Univ. Econ Business<p>
– <a href=“http://www.aueb.gr/“>Οικ. Παν. Αθηνών</a>
– <img src=“opa.jpg“ alt=“ΟΠΑ“ width=“200“
height=“100“>
• Πάντα ορίζονται στο αρχικό tag
<head>
• Περιέχει metadata, δηλ. δεδομένα που προσδιορίζουν

τη μορφή των δεδομένων και δεν εμφανίζονται
– <title>
– <style> Internal CSS
– <link> External CSS
– <meta charset="UTF-8">
9
Επικεφαλίδες (Headings)
• <h1> Επικεφαλίδα πρώτου επιπέδου</h1>

• <h2> Επικεφαλίδα δευτέρου επιπέδου</h2>
• κλπ μέχρι <h6></h6>
• Χρήση και Χρησιμότητα
– Δομή Εγγράφου
– Αναζήτηση και αρχειοθέτηση από μηχανές αναζήτησης
– Όχι για μορφοποίηση (π.χ. Bold)
• <hr> οριζόντια γραμμή (horizontal rule)
10
Παράγραφοι <p>
• Ερμηνεύεται (από τους browsers) ως μία κενή γραμμή

πριν και μία μετά
• Κενά και αλλαγές γραμμής αγνοούνται (θεωρούνται ως
ένα κενό)
– Για ρητή αλλαγή γραμμής χρησιμοποιούμε το <br> (break)
– Για διατήρηση της δομής του περιεχομένου με τα κενά και
τις αλλαγές γραμμής χρησιμοποιούμε το tag <pre></pre>
• Σχόλια 
11
Μορφοποίηση
• Προεπιλεγμένο (default) στυλ

– Λευκό παρασκήνιο, μαύρα γράμματα, μέγεθος 12
• Ιδιότητα style - style=“property:value“

– Μπορούμε να ορίσουμε styles μέσα σε tags ως ιδιότητα, στο
<head> ως internal CSS και σε εξωτερικό αρχείο .css που
διασυνδέουμε με το .html
12
Βασικό Styling
• Γραμματοσειρά
– Τύπος. style=“font-family:verdana”
– Μέγεθος. style=“ font-size:30px”
– χρώμα γραμματοσειράς style=“color:red”
– style=“text-align:center”
• Bold <b></b>, italic <i></i>, underline <ins></ins>
• Παραδείγματα
– <body style="background-color:yellow">
– <h1 style="color:blue">Είμαι μπλε επικεφαλίδα</h1>
– <p style="color:green">Είμαι πράσινη παράγραφος</p>
– <p><b>Έντονα γράμματα</b>.</p>
13
Cascading Style Sheets (CSS)
• Σημεία εισαγωγής Styling

– Inline. Μέσα στα opening tags με το style ως ιδιότητα
– Internal. Μέσα στο <head>
– External. Σε εξωτερικό αρχείο CSS και στη συνέχεια link
μέσα στο <head>
• Συντακτικό CSS
– Στοιχείο html { CSS_ιδιότητα:CSS_τιμή ;
CSS_ιδιότητα:CSS_τιμή}
14
Παράδειγμα CSS - Internal

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:AliceBlue}
h1 {color:CadetBlue}
p {color:Chicolate}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
15
CSS - Μορφοποίηση κειμένων
• Γραμματοσειρά. Font-family
• Μέγεθος. Font-size
• Χρώμα γραμματοσειράς. Color
16
Παράδειγμα
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:CornflowerBlue;
font-family:serif;
font-size:300%;
}
p {
color:AliceBlue;
font-family:courier;
font-size:24px;
}
</style>
</head>
<body>
<h1>Μορφοποίηση Επικεφαλίδας με CSS</h1>
<p>Μορφοποίηση παραγράφου με CSS</p>
</body>
</html>
17
CSS - Μορφοποίηση
περιγραμμάτων κειμένου Παιδαγωγικές Εφαρμογές στην Εκπαίδευση
• Κάθε κείμενο στην HTML έχει γύρω του ένα περίγραμμα

με μέγεθος 0px (0 pixels) και επομένως δεν είναι ορατό
• border:1px κάνει το περίγραμμα ορατό με μέγεθος 1px
• Για να μορφοποιήσουμε περαιτέρω το περίγραμμα

– Μορφή γραμμής περιγράμματος: solid, dashed, κλπ
– Χρώμα περιγράμματος: black, red, blue, κλπ
– padding: κενό μεταξύ γραμμάτων και γραμμής περιγράμματος
– margin: απόσταση πριν και μετά και γύρω από το
περίγραμμα
18
Παράδειγμα Περιγραμμάτων
<!DOCTYPE html>
<html>
<head>
<style>
p {
border:1px solid red;
padding:10px;
margin:30px;
}
</style>
</head>
<body>
<p>Παράγραφος με περίγραμμα κόκκινο</p>
</body>
</html>
19
Εξειδικευμένο styling
• Ο τύπος μορφοποίησης στοιχείο_html {ιδιότητα_CSS:τιμή_CSS}

είναι γενικός γιατί εφαρμόζει τη μορφοποίηση στο σύνολο
των στοιχείων του ίδιου τύπου, δηλ. σε όλες τις
παραγράφους ή σε όλες τις επικεφαλίδες
• Για πιο εξειδικευμένο styling θα πρέπει να βρούμε κάποιο
τρόπο να μορφοποιούμε συγκεκριμένο κείμενο με
συγκεκριμένο τρόπο
• Μία λύση είναι να μπορούμε δίνουμε ένα όνομα στο
συγκεκριμένο κομμάτι κειμένου και να εφαρμόζουμε styling
στο συγκεκριμένο όνομα κειμένου
• Δύο τρόποι ονοματοδοσίας
– id
– class
20
ids & classes

• Δίνουμε ένα μοναδικό id σε ένα κομμάτι κειμένου

• Το συγκεκριμένο id δεν μπορεί να ξαναχρησιμοποιηθεί
• Παράδειγμα
<style>
p#myp { font-family:verdana; }
</style>
<p id="myp">Το όνομά μου είναι myp</p>
• Δίνουμε ένα όνομα τάξης (class) που μπορεί να

ξαναχρησιμοποιηθεί και αλλού (πιο ευέλικτο)
<style>
h1.myh1 { color:AliceBlue; font-family:courier;}
</style>
<h1 class="myh1">Επικεφαλίδα με class</h1> 21
Σύνδεσμοι - Κείμενο
• Κείμενο ή εικόνα (ή όποιο άλλο στοιχείο HTML) που

κάνουμε κλικ και πάμε σε άλλη σελίδα
• <a href="http://www.aueb.gr">ΟΠΑ</a>
– Tag Anchor
– Ιδιότητα href (hypertext reference) ορίζει την URL διεύθυνση
– Κείμενο συνδέσμου προσδιορίζει το ορατό μέρος
– Τοπικοί σύνδεσμοι href=“opanews.html”
– target=“_blank” ανοίγει τον σύνδεσμο σε νέο παράθυρο
<a href="http://www.aueb.gr" target="_blank">ΟΠΑ</a>
22
Σύνδεσμοι - Εικόνα
• Το <img> tag είναι εμφωλιασμένο μέσα στο <a> tag στη

θέση του κειμένου σύνδεσης
• <a href="http://www.aueb.gr/">
<img src="opa.jpg" alt="OPA"
style="width:42px;height:42px;">
</a>
23
Σύνδεσμοι με σελιδοδείκτες
• Σύνδεσμος σε id π.χ. href="#auebnews"

• Το id (μέσα σε anchor εμφωλιασμένο σε στοιχείο html)
προσδιορίζει το συγκεκριμένο heading π.χ.
id="auebnews"
<a href="#auebnews">Δείτε τα νέα του ΟΠΑ </a>
<h1><a id="auebnews">Τα Νέα του ΟΠΑ</a></h1>
24
Εικόνες - Images
• Ιδιότητα src (source). Αν δεν προσδιορίζεται φάκελος

τότε ο ίδιος με το index.htm
• <img src= "opa.png" alt="OPA"

• Αλλιώς πρέπει να προσδιορίζεται (υπο)φάκελος
• <img src="/images/opa.png" alt="OPA"

25
Πίνακες
• <table>
– <tr> γραμμή
– <td> δεδομένα-στήλη
– <th> επικεφαλίδες στηλών
26
Τυπική μορφοποίηση πίνακα

<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 15px;
/* An theloume aristerh stoixisi tou th
text-align: left;
}
</style>
</head>
27
Παράδειγμα πίνακα
<body>
<table style="width:100%;">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Nikos</td>
<td>Papadopoulos</td>
</tr>
</table>
</body>
28
Λίστες
• Με κουκίδες (unordered) ή Αριθμημένες (ordered)

– Κουκίδες (unordered lists) <ul>
 <ul style="list-style-type:disc"> (circle, square, none, κλπ)
– Αρίθμηση (ordered lists) <ol>
 <ol type="1"> (A, a, I,i)
29
Πολλά επίπεδα - Παράδειγμα
<body>
<h2>Lista mesa se lista</h2>
<ul>
<li>Στερεά Ελλάδα</li>
<li>Αττική
<ul>
<li>Ανατολική Αττική</li>
<li>δυτική Αττική </li>
</ul>
</li>
<li>Κρήτη</li>
</ul>
</body>
30
Οριζόντιες λίστες
<style>
ul#menu li {
display:inline;
}
</style>
31
Παράδειγμα
<style>
ul#mylist {
padding: 2em;
}
ul#mylist li {
display: inline;
}
ul#mylist li a {
background-color: rgb(0, 0, 0);
color: rgb(0, 255, 0);
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} 32
Blocks - div
• Block vs Inline αντικείμενα HTML

– Block πριν και μετά κενή γραμμή π.χ. <p>
– Inline όχι αλλαγές γραμμής π.χ. <img>
• div – χώρος που περιέχει (container) άλλα αντικείμενα
HTML
• Ιδιότητες style & class & id
33
Παράδειγμα (1/2)
<head>
<style>
.aueb {
background-color:black;
color:rgba(255, 255, 255, 0.5);
margin:1.5em;
padding:1.5em;
}
</style>
</head>
34
Παράδειγμα (2/2)
<body>
<div class="aueb">
<h2>Central Build.</h2>
<p>
AUEB Central building is located at 76
Patission st.</p>
</div>
</body>
35
HTML Entities
• &copy
• &euro
• &lt
• &gt
36
HTML Forms (1/3)

• Για εισαγωγή δεδομένων των χρηστών

• <form> </form>
• Αποτελούνται από αντικείμενα ελέγχου (controls)
– Label (ετικέτα).
Επώνυμο <br>
– Text box (εισαγωγή κειμένου) <input type="text" name=“last“
(size=“50” maxlength=“15’ readonly disabled>)
<textarea name=“details" rows="10" cols="30"></textarea>
– Combo box (drop-down list)
<select name=“fruits">
<option value=“apples">Apples</option>
<option value=“oranges">Oranges</option>
</select>
37
HTML Forms (2/3)
– Check box
<input type="checkbox" name= "fruits" value=«Apples">
<br>
<input type="checkbox" name=“fruits" value=“Oranges">
– Option box (radio button)
<input type="radio" name=“mstatus" value=«nmar" checked>
non-married
<br>
<input type="radio" name=«mstatus" value=“mar">Married
– Button
<button type="button" onclick="alert(‘AUEB!')">Πατήστε
Click</button>
38
HTML Forms (3/3)

• Date
• Time
• Number
• Calendar
• Range
39
HTML Media- Video
• <video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
• <video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
• Javascript controls
40
Audio
• <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
41
Plug-ins
• <object width="400" height="50" data="bookmark.swf">

</object>
• <embed width="400" height="50" src="bookmark.swf">
42
YouTube
• <iframe width="420" height="315"

src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
• Object & embed μπορούν επίσης να χρησιμοποιηθούν
43
Cascading Style Sheets
(CSS)
CSS
• Ορίζουν τη μορφοποίηση (πως θα φαίνεται) του HTML

περιεχομένου
• Προβλήματα πριν τα CSS
– Δυσανάγνωστος κώδικας HTML
– Πολυπλοκότητα στη διαχείριση ομοειδούς μορφοποίησης
πολλαπλών σελίδων
– Πολυπλοκότητα στη διαχείριση διαφορετικών διεπαφών
(desktops, κινητά, tablets, κλπ)
• Συνήθως οι ορισμοί σε εξωτερικό αρχείο .css
<head>
<link rel=“stylesheet“ type=“text/css“ href=“
mystyles.css“>
</head>
2
CSS Σύνταξη
h1 {
/* Με τα # και το πρότυπο rgb μπορώ και δηλώνω χρώματα*/
/* το background το κάνω μία απόχρωση του γκρι και το χρώμα
γραμματοσειράς λευκό */
background: #cccccc;
color: #ffffff;
}
CSS id & class

<style>
p#myp {
font: bold Georgia, Serif;
color: green;
}
p.myp2 {
font: bold Times, Serif;
color: #cccccc;
}
</style>
</head>
<body>
<p id="myp">AUEB Univ.</p>
<p class="myp2">AUEB Univ. II</p>
4
CSS Ομαδοποίηση
<style>
h1, p, pre {
font: italic bold 14px "Courier New";
color: yellow;
}
</style>
</head>
<body>
<h1> AUEB Univ.</h1>
<p >AUEB Univ. II</p>
<pre> Hello AUEB </pre
CSS External .css

<head>
<link rel="stylesheet" type="text/css" href="mycss.
css">
</head>
/* .mycss file */
body {
background-color: #dddddd;
}
h1 {
font: 14px Arial;
color: red;
}
6
Παράδειγμα - Εργαστήριο
• http://www.w3schools.com/html/tryit.asp?filename=tryht
ml_layout_semantic
• Αλλάξτε τα χρώματα, τις γραμματοσειρές και τα

υπόλοιπα αντικείμενα της σελίδας
• Προσθέστε συνδέσμους στο αριστερό μενού
7
Β. Εισαγωγή στον Προγραμματισμό Η/Υ με την
JavaScript
Β.1 Τύποι Δεδομένων
Όλες οι γλώσσες προγραμματισμού (πρέπει να) υποστηρίζουν πέντε (5)

πρωταρχικούς τύπους δεδομένων:
char (character)
int (integer)
float (floating point)
double (double floating point)
boolean (true/false)
Επειδή η γλώσσα JavaScript δεν είναι αυστηρά δομημένη γλώσσα (strongly typed)
--δηλ. δεν κάνει κατά την ώρα της μεταγλώττισης αυστηρό έλεγχο των τύπων που
χρησιμοποιούνται-- μπορούμε να εκχωρούμε τιμές μεταξύ διαφορετικών τύπων (δίχως ο
μεταγλωττιστής να το ελέγχει) με απρόσμενα πολλές φορές αποτελέσματα.
Η γλώσσα JavaScript υποστηρίζει τους παρακάτω πρωταρχικούς τύπους

δεδομένων:
Number (που περιλαμβάνει int, float & double)

Boolean (true/false)
String (που περιλαμβάνει και τον τύπο char)
1
Β.2 Αναγνωριστικά και Δηλώσεις μεταβλητών
Αναγνωριστικό (identifier) είναι μια ακολουθία από γράμματα και ψηφία, όπου ο
πρώτος χαρακτήρας είναι γράμμα. Στην JavaScript τα κεφαλαία γράμματα είναι
διαφορετικά από τα πεζά (case sensitive). Tα αναγνωριστικά μπορούν να έχουν
οποιοδήποτε μήκος και δεν πρέπει γενικώς να περιλαμβάνουν ειδικούς χαρακτήρες,
εκτός από ελάχιστες εξαιρέσεις, όπως η κάτω παύλα. Τα αναγνωριστικά μπορούν να
χρησιμοποιούνται στις δηλώσεις ονομάτων μεταβλητών, στην ονομασία συναρτήσεων
και γενικά σε ονόματα συμβόλων που επιλέγουν οι προγραμματιστές.
Δηλώσεις μεταβλητών μπορούν να γίνουν στο σώμα των συναρτήσεων ως τοπικές

μεταβλητές (local variables) και έξω από όλες τις συναρτήσεις ως καθολικές μεταβλητές
(global variables).
Οι δηλώσεις μεταβλητών γίνονται όπως παρακάτω:
var a=5, b;
var ch=’*’;
var m;
Όπως φαίνεται παραπάνω στη JavaScript μπορούμε να κάνουμε είτε μόνο

δηλώσεις ή ταυτόχρονα δηλώσεις και αρχικοποιήσεις μεταβλητών.
Β.3 Κυριολεκτικά (Literals)
Σταθερές τιμές μπορούμε να εκχωρούμε σε μεταβλητές, όπως φαίνεται παρακάτω:
var m = 12; //ακέραιος

var ch = "*"; //χαρακτήρας
var myF = 12.5; //δεκαδικός
Οι δηλώσεις σταθερών για αλφαριθμητικά (κυριολεκτικά αλφαριθμητικά – literal

strings) γίνονται μέσα διπλά (ή μονά) εισαγωγικά: "-----". Αριθμοί εκχωρούνται χωρίς
εισαγωγικά.
2
Στην JavaScript έχουμε κάποιες προκαθορισμένες σταθερές (ακολουθίες διαφυγής)
που χρησιμοποιούνται κυρίως μέσα σε εντολές εκτύπωσης για την εκτύπωση ειδικών
χαρακτήρων:
\n αλλαγή γραμμής
\0 Μηδενικός
χαρακτήρας (null)
\t Οριζόντιος
στηλογνώμονας (tab)
\" διπλά εισαγωγικά
\΄ απλά εισαγωγικά
\\ Ανάποδη κάθετος
(backslash)
Β.4 Πίνακες (Arrays) και Δομές (Structs)

Πίνακας (array) είναι μία διατεταγμένη ακολουθία τιμών του ίδιου πρωταρχικού
τύπου δεδομένων (αν και στην JavaScript μπορούμε να χρησιμοποιούμε και στοιχεία
διαφορετικού τύπου μέσα στον ίδιο πίνακα).
Δηλώσεις πινάκων κάνουμε ως εξής:
var dim = new Array(5); //Θέσεις από dim[0] έως dim[4]

var dim[]; // δήλωση δίχως διάσταση
var b[12,5,7,2] // αυτόματα παράγεται η διάσταση
Με την πρώτη δήλωση δηλώνουμε τον πίνακα ως αντικείμενο πίνακα ενώ με τις
δύο τελευταίες δηλώσεις δηλώνουμε πίνακες ως κυριολεκτικά.
Οι δομές (structs) περικλείουν τιμές διαφορετικών τύπων δεδομένων. Για

παράδειγμα, ο ορισμός μιας δομής πελάτη (customer) θα μπορούσε να γίνει όπως
παρακάτω:
3
var CUSTOMER = {
name: "C. Papadopoulos", // ονοματεπώνυμο
age:32, // ηλικία
height:1.90; // ύψος
};
Β.5 Τελεστές
Η JavaScript παρέχει τέσσερις τύπους τελεστών: αριθμητικούς, σύγκρισης (ή

συσχεσιακοί), λογικοί και τελεστές χειρισμού bits. Επίσης παρέχεται ο τελεστής
εκχώρησης ‘ =’, που εκχωρεί μία τιμή σε μία μεταβλητή:
Β.5.1 Αριθμητικοί τελεστές
-, +, *, /, % (mod), --, ++
Οι ++,--, αυξάνουν και μειώνουν αντίστοιχα την τιμή του τελεσταίου δηλαδή της
μεταβλητής στην οποία εφαρμόζονται κατά ένα και μπορούν να τοποθετηθούν πριν ή
μετά τον τελεσταίο. Στην περίπτωση που χρησιμοποιηθούν μπροστά τότε πρώτα
εκτελείται η πράξη και μετά η εκχώρηση, ενώ αν τοποθετηθούν μετά, τότε πρώτα
εκτελείται η εκχώρηση και μετά η πράξη.
Π.χ.:
a=1; b=--a; (Αποτέλεσμα b=0, a=0)

a=1; b=a-- (Αποτέλεσμα b=1, a=0)
Ο τελεστής + χρησιμοποιείται και ως τελεστής συνένωσης αλφαριθμητικών όταν οι

τελεσταίοι είναι strings.
Π.χ.:
a="Hello"; b=" World! "; c=a+b;
(Αποτέλεσμα c="Hello World!")
4
Β.5.2 Συσχεσιακοί τελεστές
> ΜΕΓΑΛΥΤΕΡΟ
>= ΜΕΓΑΛΥΤΕΡΟ ή ΙΣΟ
< ΜΙΚΡΟΤΕΡΟ
<= ΜΙΚΡΟΤΕΡΟ ή ΙΣΟ
== ΙΣΟ
!= ΔΙΑΦΟΡΟ
Β.5.3 Λογικοί τελεστές
&& AND (ΛΟΓΙΚΟ ΚΑΙ)

|| OR (ΛΟΓΙΚΟ Η)
! NOT (ΛΟΓΙΚΟ ΟΧΙ)
Β.5.4 Τελεστές χειρισμού bits
Οι τελεστές χειρισμού bits εφαρμόζονται στα ψηφία (bits) μιας ψηφιοσυλλαβής (byte):
& AND
| OR
^ XOR
~ συμπλήρωμα ως προς 1
>> shift left
<< shift right
Για παράδειγμα:
x=5; x: 0 0 0 0 0 1 0 1
x=x & 255; 255: 1 1 1 1 1 1 1 1
---------------
0 0 0 0 0 1 0 1
5
Β.6 Παραστάσεις
Με την χρήση των παραπάνω τελεστών μπορούμε να ορίζουμε παραστάσεις

πράξεων, όπως:
i = i + 5;
j = j - 12;
k = k * 70;
Επίσης μπορούν να χρησιμοποιούνται συντμήσεις στον κώδικα των παραστάσεων:
i += 5;
j -= 12;
k *= 70;
Β.7 Είσοδος/Έξοδος
Για την εκτύπωση σταθερών και μεταβλητών η JavaScript παρέχει τις παρακάτω
συναρτήσεις, που συντάσσονται ως εξής:
document.write("string") ή document.write(s)
document.getElementById("myp").innerHTML="string"
όπου s μεταβλητή και myp είναι το id ενός <p> tag.
Για το διάβασμα και την εκχώρηση σε μεταβλητές τιμές που δίνει ο χρήστης μπορούμε
να χρησιμοποιούμε HTML Forms και να εκχωρούμε την ιδιότητα .value των στοιχείων
της φόρμας σε JavaScript μεταβλητές.
6
Β.8 Το πρώτο πρόγραμμα στη Javascript
Στη HTML υπάρχει το tag <script> απ’ όπου το πρόγραμμα ξεκινάει να εκτελείται.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title> First Programm in JS </title>
<meta charset="UTF-8">
</head>
<body>
<script>
document.write("<h1> First JS EXAMPLE IN PED-15 </h1>");
</script>
</body>
</html>
Β.9 Δομές Ελέγχου
Οι δομές ελέγχου χρησιμοποιούνται για τον έλεγχο της ροής του

προγράμματος. Οι βασικές δομές ελέγχου είναι οι διακλαδώσεις (if – then –
else, switch) και οι επαναλήψεις (while, do-while, for).
Β.9.1 Δομή if – then – else

Σύνταξη: If (expr) {stmt; stmt; ---} else {stmt; stmt;---}
Παράδειγμα:
if (i>0) pos=i; else neg=-i;
if (sex==”Man”) expectedTimeToLive = 80;
else expectedTimeToLive = 90;
FYLO = (sex==”Man”) ? ”Άνδρας” : ”Γυναίκα” ;

// Τριαδικός τελεστής συντόμευσης if-then-else
Στη μεταβλητή FYLO εκχωρείται η τιμή ”Άνδρας” αν η συνθήκη

(sex==”Man”) είναι αληθής, αλλιώς εκχωρείται η τιμή ”Γυναίκα”.
7
Β.9.2 Δομή switch
Σύνταξη:
Switch (expr)
{
case value1: stmt; break;
case value2: stmt; break;
.............
.............
default: stmt;
}
var foo1=3, foo2=5, tmp;
var operator="+";
switch (operator)
{
case ‘+‘: tmp = foo1+foo2; break;
case ‘-‘: tmp = foo1-foo2; break;
case ‘*‘: tmp = foo1*foo2; break;
case ‘/‘: tmp = foo1/foo2; break;
default: tmp=0;
}
Document.write (tmp); // θα επιστρέψει 8
Β.9.3 Δομή while-do

Σύνταξη: While (expr) <block>
var j=1;
while (j<12)
{
document.write("*");
j++;
}
8
Β.9.4 Δομή do-while
Σύνταξη: Do <block> While (expr)
Tο <block> της Do-While εκτελείται τουλάχιστον μια φορά αντίθετα με την while-do
που μπορεί να μην εκτελεστεί καθόλου.
var i=1;
do
{
i++;
} while (i<12);
Β.9.5 Δομή for
Σύνταξη: for (αρχική συνθήκη; Συνθήκη εξόδου; βήμα) <block>
Παραδείγματα:
for (i=0; i<90; i++) document.write("*");

// Τυπώνει ένα * σε κάθε επανάληψη (loop) της for
for (i=1; i<=10; i++)

{
}
// Τυπώνει 10 αστεράκια
9
Β.10 Εντολές μεταφοράς ελέγχου
Β.10.1 Εντολή return
Έχει ως αποτέλεσμα την μεταφορά της εκτέλεσης του κώδικα από τη συνάρτηση
στο κύριο πρόγραμμα από όπου κλήθηκε η συνάρτηση. Αν το return περιέχει κάποια
τιμή ή επιστρεφόμενη μεταβλητή --π.χ. return (i), η τιμή ή η τιμή της μεταβλητής
επιστρέφεται από τη συνάρτηση.
Β.10.2 Εντολή break

Η εντολή break τερματίζει την εκτέλεση μιας επαναληπτικής συνήθως δομής
ελέγχου, όταν κάποια συνθήκη γίνει αληθής, ώστε να μην εκτελείται και ο υπόλοιπος
κώδικα της δομής ελέγχου. Μία συνηθισμένη χρήση της break είναι στο σώμα της
εντολής switch, όπου κάθε περίπτωση ελέγχου (case) έχει μία break, ώστε αν η
συνθήκη είναι αληθής να μην εκτελεστούν και τα υπόλοιπα case.
10
Σημειώσεις στην επεξεργασία εικόνας με το GIMP
1η Άσκηση - Δημιουργία εκπαιδευτικού e-Portofolio
Ένα e-Portofolio στην Εκπαίδευση είναι ένα προσωπικό Web Site (Ιστότοπος) που μπορεί να
περιλαμβάνει τα παρακάτω χαρακτηριστικά:
1. Ένα λογότυπο που να χαρακτηρίζει το πρόσωπο και να αποτελείται: από μία

φωτογραφία του προσώπου, μία συνοδευτική φωτογραφία ή ένα παρασκήνιο
(background) το όνομα του προσώπου καθώς και την ιδιότητά του.
2. Μία σελίδα βιογραφικού με στοιχεία επικοινωνίας
3. Τα έργα (projects) που επιδεικνύουν τη δουλειά του προσώπου (είτε ανεξάρτητα
είτε στο πλαίσιο μαθημάτων/προγραμμάτων ή άλλων δραστηριοτήτων)
4. Διασύνδεση με μέσα κοινωνικής δικτύωσης στα οποία έχει παρουσία
Λογότυπα
Τα λογότυπα είναι εικόνες που μπορεί να περιλαμβάνουν κείμενο(text)/
φωτογραφίες(bitmaps)/σχέδια(drawings) είτε μόνα τους είτε σε συνδυασμό. Για να
δημιουργήσουμε λογότυπα μπορούμε να χρησιμοποιήσουμε ένα πρόγραμμα επεξεργασίας
εικόνας όπως το Photoshop ή το GIMP που είναι πρόγραμμα ΕΛ/ΛΑΚ.
Στο παρακάτω παράδειγμα θα δημιουργήσουμε ένα λογότυπο με το GIMP.
Ανοίγοντας το GIMP βλέπουμε την εικ. 1. Στο αριστερό μέρος είναι η εργαλειοθήκη ενώ
δεξιά είναι κυρίως οι στρώσεις και το ιστορικό. Στο κέντρο είναι ο καμβάς, ο χώρος δηλαδή
μέσα στο οποίο μπορούμε να δημιουργήσουμε και να επεξεργαστούμε την εικόνα μας
Εικόνα 1. Το πρόγραμμα GIMP
1
Στο μενού αρχείο/δημιουργία/Λογότυποι μπορούμε να επιλέξουμε ένα πρότυπο (εικ. 2) και
να εισάγουμε το βασικό κείμενο που θέλουμε να εμφανίζεται για παράδειγμα το
ονοματεπώνυμό μας (εικ. 3).
Εικόνα 2. Δημιουργία αυτόματου λογότυπου
Εικόνα 3. Εισαγωγή κειμένου
Αφού δημιουργήσετε το λογότυπο παρατηρήστε πάνω δεξιά στο μενού ‘Στρώσεις’ (Layers)
ότι η συγκεκριμένη εικόνα λογότυπου αποτελείται από τρεις (3) στρώσεις: Δύο στρώσεις
για το κείμενο και μία στρώση το παρασκήνιο (background) (εικ. 4).
2
Εικόνα 4. Στρώσεις (Layers) στο πάνω δεξιά μενού
Μπορούμε να αλλάξουμε το όνομα των στρώσεων με διπλό κλικ πάνω στο όνομα της κάθε
στρώσης και πληκτρολόγηση της δικής μας επιλογής ονόματος στρώσης. Επίσης κάθε
στρώση έχει ένα ματάκι μπροστά από το όνομά της από όπου μπορούμε να την
ενεργοποιήσουμε/απενεργοποιήσουμε. Μία εικόνα στα προγράμματα επεξεργασίας
εικόνων αποτελείται από στρώσεις (επίπεδα/layers). Ο ρόλος των στρώσεων είναι να
προσδίδουν ευελιξία στις εικόνες ώστε να μπορούμε να μετακινούμε/
κλιμακώνουμε/περιστρέφουμε/επεξεργαζόμαστε τα αντικείμενα μιας εικόνας με
ανεξάρτητο τρόπο και τελικά να δημιουργούμε μια εικόνα ως σύνθεση των στρώσεων από
τις οποίες αποτελείται. Η θέση μιας στρώσης στην πάνω δεξιά λίστα (εικ. 4) προσδιορίζει αν
η στρώση θα εμφανίζεται στο πρώτο πλάνο (1η στρώση), στο δεύτερο πλάνο (2η στρώση),
κλπ., ή στο παρασκήνιο (background) (3η στρώση στο συγκεκριμένο παράδειγμα και γενικά
η τελευταία στρώση της λίστας είναι το παρασκήνιο).
Τέλος, μπορούμε να επιλέξουμε μία στρώση κάνοντας κλικ στο όνομα της στρώσης (γίνεται
μπλε).
Επιλέγοντας καταρχάς τη στρώση παρασκηνίου μπορούμε να την επεξεργαστούμε. Το

πρώτο που θα θέλαμε για το παρασκήνιου είναι να αλλάξουμε το χρώμα. Μπορούμε α
χρησιμοποιήσουμε: (i) ένα σταθερό χρώμα, (ii) ένα μοτίβο ή (iii) μία διαβάθμιση χρωμάτων.
3
Για τo (i) θα πρέπει πρώτα να επιλέξουμε χρώμα προσκηνίου και στη συνέχεια να το
εφαρμόσουμε με τον κουβά γεμίσματος (έχοντας πάντα επιλεγμένη τη στρώση
παρασκηνίου)
Εικόνα 5. Επιλογή χρώματος προσκηνίου
Για το (ii) επιλέγω ένα μοτίβο και εφαρμόζω πάλι με τον κουβά γεμίσματος
Εικόνα 6. Επιλογή μοτίβου και εφαρμογή με κουβά γεμίσματος
Για το (iii) επιλέγω δύο χρώματα (παρασκηνίου και προσκηνίου – π.χ. πράσινο και κόκκινο
στο παράδειγμα- ανάμεσα στα οποία θα γίνει η διαβάθμιση) και στη συνέχεια την
εφαρμόζω με το εργαλείο ανάμειξης.
4
Εικόνα 7. Επιλογή μοτίβου και εφαρμογή με κουβά γεμίσματος
Εικόνα 8. Επιλογή ανάμιξης χρωμάτων και εφαρμογή διαβάθμισης
Στη συνέχεια πάνω στη διαβάθμιση με τον κουβά γεμίσματος εφαρμόζω δύο μοτίβα σε
τυχαίες θέσεις.
5
Εικόνα 9. Επιλογή μοτίβων και εφαρμογή με κουβά γεμίσματος
Με το εργαλείο κλιμάκωσης ρυθμίζω το μέγεθος της στρώσης παρασκηνίου σε 800x150

ώστε να χωράει στη Web Σελίδα μου στην οποία σκοπεύω να ρυθμίσω 800 pixels πλάτος.
Εικόνα 10. Ρύθμιση μεγέθους στρώσης
Επίσης όμως θα πρέπει να ρυθμίσω και τον καμβά μου στο ίδιο μέγεθος (800x150) από το
μενού Εικόνα/Διαστάσεις καμβά .
6
Εικόνα 11 & 12. Ρύθμιση μεγέθους καμβά
Στη συνέχεια θα μετακινήσω το κείμενο δεξιά. Το κείμενό μου αποτελείται από δύο
στρώσεις (red και blue) και πρώτα θα μετακινήσω το red και μετά το blue με το εργαλείο
μετακίνησης αφού πρώτα επιλέξω ‘μετακίνηση ενεργής στρώσης’ καθώς και την αντίστοιχη
στρώση.
7
Εικόνα 13 & 14. Μετακίνηση κειμένου
Επειδή οι δύο στρώσεις κειμένου είναι λίγο μεγάλες για τον καμβά μου θα τις κλιμακώσω
μειώνοντας το μέγεθός στους διατηρώντας σταθερή αναλογία πλάτους/ύψους (aspect
ratio).
Κάνω πρώτα για την στρώση red και μετά για την στρώση blue την κλιμάκωση του μεγέθους
μειώνοντας το πλάτος σε 300 pixels. Το ύψος μειώνεται αυτόματα ανάλογα.
8
Εικόνα 15. Κλιμάκωση μεγέθους πλαισίων κειμένου
Στη συνέχεια μετακινώ και τις δύο στρώσεις red & blue.
Εικόνα 16. Μετακίνηση πλαισίων κειμένου
9
Στη συνέχεια θα εισάγω μία φωτογραφία. Φωτογραφίες εισάγω είτε από τα αρχεία μου με
drag&drop ή με αντιγραφή της εικόνας και ‘επεξεργασία/επικόλληση ως νέα στρώση’ στο
GIMP.
Μία αναζήτηση στο web για φωτογραφίες του Albert Einstein, στη συνέχεια δεξί κλικ πάνω
στην εικόνα και αποθήκευση εικόνας και στη συνέχεια ‘επεξεργασία/επικόλληση ως νέα
στρώση’ στο GIMP. Στο e-Portofolio θα πρέπει να εισάγουμε μία δική μας φωτογραφία.
Για να αφαιρέσω το μαύρο παρασκήνιο από τη φωτογραφία μπορώ να το επιλέξω με το

μαγικό ραβδί (ασαφής επιλογή) -αν το χρώμα περιγράμματος είναι διακριτό από τη μορφή-
και να πατήσω del (επεξεργασία/καθαρισμός) ή αλλιώς –αν δεν υπάρχει σαφής διάκριση
μορφής/πλαισίου- τότε μπορώ να χρησιμοποιήσω με προσοχή τη σβήστρα (αφού
μεγενθύνω –zoom in- την εικόνα για να μπορώ να σβήνω με προσοχή). Με τη σβήστρα
επειδή δεν μπορώ να σβήσω τέλεια στην τομή της μορφής με το παρασκήνιο μπορώ να
ρυθμίσω το μέγεθος της σβήστρας και κυρίως την αδιαφάνεια (π.χ. στο 20%) και να σβήσω
πάνω στην τομή –η αδιαφάνεια ώστε να υπάρχει ομαλή μετάβαση μεταξύ μορφής και
παρασκηνίου.
Στη συνέχεια κλιμακώνω το μέγεθος της φωτογραφίας και μετακινώ στη σωστή θέση.
Εικόνα 17. Εισαγωγή φωτογραφίας, καθαρισμός παρασκηνίου, κλιμάκωση και

μετακίνηση στη ‘σωστή’ θέση
Στα γραφικά υπολογιστών κάθε pixel απεικονίζεται μέσω τεσσάρων καναλιών: τρία κανάλια
προσδιορίζουν το χρώμα του (RGB – Red Green Blue) και ένα κανάλι προσδιορίζει τον
βαθμό διαφάνειας/αδιαφάνειας (alpha channel). Το alpha channel είναι σαν μία μάσκα που
προσδιορίζει το πώς το χρώμα του συγκεκριμένο pixel θα συγχωνευτεί με το χρώμα ενός
άλλου pixel, όταν αυτά τα δύο επικαλύπτονται.
10
Για να εισάγω κείμενο στην ήδη υπάρχουσα εικόνα μου επιλέγω το εργαλείο κειμένου και
στη συνέχεια δημιουργώ ένα χώρο στον καμβά μου για την εισαγωγή του κειμένου (τον
χώρο τον δημιουργώ –αν ερωτηθώ και δεν δημιουργηθεί από μόνος του- ως νέα στρώση).
Επιλέγω τον επεξεργαστή κειμένου και εισάγω το κείμενο. Μετά την εισαγωγή, πρέπει να
επιλέξω το κείμενο είτε εντός του παραθύρου επεξεργασίας ή μέσα το πλαίσιο κειμένου,
ώστε να το μορφοποιήσω το χρώμα/μέγεθος/γραμματοσειρά/Bold-Italic-Underline/
στοίχιση (σχετική εντός του πλαισίου κειμένου το οποίο μπορώ να μεγαλώσω/μικρύνω από
τις λαβές στις γωνίες)/κλπ.
Εικόνα 18. Εισαγωγή κειμένου και μορφοποίηση
Στη συνέχεια μπορώ να μορφοποιώ το κείμενο μου, επιλέγοντας την στρώση κειμένου, το
εργαλείο κειμένου και εν συνεχεία επιλέγοντας το κείμενό μου εντός του πλαισίου
κειμένου. Επίσης μπορώ να μετακινώ όπως όλες τις στρώσεις με το εργαλείο μετακίνησης
(την ενεργή στρώση) έχοντας επιλεγμένη τη στρώση.
Στα αντικείμενα μίας εικόνας μπορώ να εφαρμόζω φίλτρα, αφού πρώτα επιλέξω την
στρώση. Στο παρόν παράδειγμα επιλέγω την στρώση κειμένου που εισήγαγα μόλις τώρα
και επιλέγω καλλιτεχνικό φίλτρο ελαιοποίησης.
Επίσης στο background θα εισάγω ένα καλλιτεχνικό φίλτρο κυβισμού.2
11
Εικόνα 19/20/21. Φίλτρο ελαιοποίησης στο κείμενο και κυβισμού & απαλής λάμψης
στο παρασκήνιο
12
Μπορείτε να εφαρμόσετε και άλλα φίλτρα όπως παρακάτω:
Εικόνα 22/23. Καλλιτεχνικά φίλτρα Ιμπρεσιονιστής GIMP και Παράθεση γυαλιού στο
παρασκήνιο
Επίσης, μπορείτε να επεξεργαστείτε ειδικά το πρόσωπο/πορτραίτο της εικόνας δεδομένου

ότι είναι σημαντικό, ώστε να το βελτιώσετε.
Μία τεχνική είναι ο διπλασιασμός της στρώσης του προσώπου και στη συνέχεια η θόλωση
του αντιγράφου ώστε να αποφύγουμε τις ατέλειες, η ισορροπία στο άσπρο/μαύρο
(φωτεινότητα), η ρύθμιση της αδιαφάνειας καθώς και στη συνέχεια η επικάλυψη των δύο
στρώσεων ώστε να λάβουμε το επιθυμητό αποτέλεσμα που είναι η απάλειψη μικρών
ατελειών και η φωτεινότητα.
13
Εικόνα 24. Διπλασιασμός στρώσης πορτραίτου
Εικόνα 25. Θόλωση Γκάους στο αντίγραφο για άμβλυνση ατελειών
14
Εικόνα 26. Καμπύλες χρωμάτων για ισορροπία στη φωτεινότητα
Εικόνα 27. Κατάσταση: Επικάλυψη (των δύο στρώσεων)
Εικόνα 28. Ρύθμιση αδιαφάνειας του αντιγράφου
15
Εικόνα 29/30. Πριν (χωρίς ματάκι το αντίγραφο) και μετά (με ματάκι)
16
Μάσκες Στρώσης (Layer Masks)
Την προσθήκη αδιαφάνειας την είδαμε παραπάνω στο πλαίσιο μίας ολόκληρης στρώσης
όπου ρυθμίσαμε την αδιαφάνεια του αντιγράφου της εικόνας. Όταν θέλουμε επιλεκτικά να
ρυθμίσουμε την διαφάνεια/αδιαφάνεια συγκεκριμένων μερών μίας εικόνας ώστε να τα
συγχωνεύσουμε λιγότερο ή περισσότερο με το παρασκήνιο και να τα φωτίσουμε ή να τα
σκοτεινιάσουμε κλπ., τότε μπορούμε να χρησιμοποιούμε μάσκες στρώσεων.
Οι μάσκες στρώσεων είναι σαν να τοποθετούμε μία μάσκα μπροστά από την εικόνα. Αν η
μάσκα είναι μαύρη δεν φαίνεται η εικόνα (πλήρης διαφάνεια), ενώ αν η μάσκα είναι λευκή
τότε φαίνεται πλήρως η εικόνα (πλήρης αδιαφάνεια). Στη συνέχεια μπορώ με το πινέλο και
χρώμα μαύρο/άσπρο καθώς και τιμές μεταξύ άσπρου/μαύρου (αποχρώσεις του γκρι που
ρυθμίζω με την αδιαφάνεια του πινέλου) να τονίσω ή μαυρίσω συγκεκριμένες περιοχές
μιας εικόνας.
Για παράδειγμα, έστω ότι θέλω να τοποθετήσω την εικόνα της ΑΣΟΕΕ στο σημείο των δύο
μοτίβων αλλά θέλω η εικόνα-ΑΣΟΕΕ να συγχωνευτεί με τα μοτίβα τα οποία θέλω να
φαίνονται αλλού πιο πολύ και αλλού πιο λίγο. Για παράδειγμα ο τίτλος του Οικ. Παν.
Αθηνών καθώς και το κεντρικό κτίριο της εικόνας-ΑΣΟΕΕ θέλω να είναι πιο φωτεινά ενώ το
υπόλοιπο μέρος πιο σκοτεινό.
Ξεκινώ με την επικόλληση της εικόνας (που βρήκα στο google) ως νέα στρώση και τη
ρύθμιση μεγέθους. Την τοποθετώ στο χώρο των δύο μοτίβων. Όπως βλέπετε στην
παρακάτω εικόνα, η εικόνα-ΑΣΟΕΕ επικαλύπτει πλήρως το παρασκήνιο των μοτίβο.
Εφαρμόζω μαύρη μάσκα στρώσης στη στρώση της εικόνας-ΑΣΟΕΕ και επομένως καλύπτεται
πλήρως η στρώση και δεν φαίνεται η εικόνα-ΑΣΟΕΕ (βλ. εικ. 32).
Εικόνα 31. Μάσκα στρώσης στη εικόνα-ΑΣΟΕΕ
17
Εικόνα 32. Μαύρη μάσκα στρώσης (Πλήρης αδιαφάνεια)
Στη συνέχεια επιλέγω τη μάσκα στρώσης και παίρνω το πινέλο με χρώμα λευκό και
αδιαφάνεια 20% και ένα συγκεκριμένο μέγεθος ώστε να το εφαρμόσω στη μάσκα στρώσης.
Το περνάω λίγες φορές από πάνω (όσο το περνάω τόσο αυξάνει η φωτεινότητα).
Εικόνα 33. Λευκό πινέλο με αδιαφάνεια 20% πάνω στη μάσκα στρώσης
18
Αν φωτιστεί περισσότερο από ότι θέλω (επιλέγω τη μάσκα στρώσης και) παίρνω το πινέλο
με μαύρο χρώμα και αδιαφάνεια 20% και ένα συγκεκριμένο μέγεθος πινέλου ώστε να το
εφαρμόσω στη μάσκα στρώσης και να σκοτεινιάσει. Το περνάω λίγες φορές από πάνω (όσο
το περνάω τόσο μειώνεται η φωτεινότητα).
Εικόνα 34. Αύξηση της διαφάνειας με μαύρο πινέλο
Στη συνέχεια πάλι με λευκό πινέλο και μεγαλύτερη αδιαφάνεια (π.χ. 40%) τονίζω τον τίτλο
της εικόνας και το κεντρικό κτίριο.
Εικόνα 35. Αύξηση της αδιαφάνειας με λευκό πινέλο σε συγκεκριμένα σημεία της εικόνας-
ΑΣΟΕΕ
19
Επειδή φωτίστηκε πολύ και υπάρχει ασυνέχεια στα άκρα παίρνω πάλι το μαύρο πινέλο με
μικρή αδιαφάνεια και χρωματίζω τα άκρα ώστε να σκοτεινιάσουν λίγο και να υπάρχει
ομαλή μετάβαση από το κέντρο προς τα άκρα.
Εικόνα 36. Ομαλή μετάβαση από το κέντρο προς τα άκρα με ελαφρύ σκοτείνιασμα
Το αρχείο αυτό της εικόνας που δημιούργησα το αποθηκεύω (save as) με κατάληξη .xcf
ώστε να αποθηκευθούν οι λεπτομέρειες των στρώσεων για μελλοντική επανεπεξεργασία.
Για να το χρησιμοποιήσω όμως ως ανεξάρτητη εικόνα σε άλλες εφαρμογές, όπως στη Web
Σελίδα μου εξάγω ως εικόνα με κατάληξη .png ή .jpg ή άλλη μορφή που επιθυμώ.
20
Σχεδιασμός και ανάπτυξη ενός Web Site
Αθ. Ανδρούτσος
1. Εισαγωγή
Με τον όρο Web-based εφαρμογή εννοούμε ένα σύνολο τεχνολογιών με κοινό
χαρακτηριστικό την δυνατότητα επικοινωνίας μέσω του πρωτοκόλλου http (HyperText
Transfer Protocol – σ.σ. Υπηρεσία World Wide Web (WWW)).
Μία ολοκληρωμένη εφαρμογή περιλαμβάνει τρία (3) βασικά μέρη:
1. Βάση Δεδομένων
2. Λογική
3. Γραφικό Περιβάλλον – Graphical User Interface (GUI)
Βάση
Λογική GUI
Δεδομένων
MySQL Java HTML
Oracle Php Javascript
MS-SQL Python Flash
Η ΒΔ κι η λογική προσδίδουν σε ένα Web Site ένα δυναμικό χαρακτήρα, δηλ. δυνατότητες
εισαγωγής/αναζήτησης/ενημέρωσης/διαγραφής περιεχομένου καθώς και εκτέλεσης λογικών
εντολών.
Ωστόσο, απλές εφαρμογές μπορεί να μην περιλαμβάνουν ΒΔ και Λογική, παρά μόνο ένα
στατικό GUI, δηλαδή, ένα σύνολο από στατικές σελίδες.
Η βασική τεχνολογία δημιουργίας Web σελίδων είναι η γλώσσα HTML. Όπως έχουμε
αναφέρει και αλλού η γλώσσα HTML δίνει τη δυνατότητα εισαγωγής κειμένου/εικόνων-
βίντεο/ήχου καθώς και συνδέσμων προς άλλες σελίδες ή αρχεία. Επειδή η γλώσσα HTML
δεν παρέχει αλληλεπίδραση και κίνηση, έχουν υιοθετηθεί άλλες τεχνολογίες, όπως η
Javascript και Flash για αλληλεπίδραση και κίνηση. Άλλες συμπληρωματικές τεχνολογίες
αφορούν την επεξεργασία εικόνων προς χρήση στο Web Site.
1
Ο σχεδιασμός διεπαφών για τον χρήστη (GUI) απαιτεί όχι μόνο τεχνικές δεξιότητες αλλά και
γνώσεις γνωστικής ψυχολογίας ώστε οι διεπαφές να είναι λειτουργικές και να συμβάλλουν
στην αύξηση της συμμετοχής και παραγωγικότητας των χρηστών.
Ωστόσο σε ένα αρχικό στάδιο σχεδιασμού σελίδων, στο οποίο θα περιοριστούμε, αρκούν
μερικές απλές γνώσεις τεχνικών και εργαλείων ώστε να δημιουργήσουμε απλά και
λειτουργικά Web Sites.
2. GUI – Σχεδιασμός Διεπαφής

Ένα Web Site αποτελείται από ένα σύνολο διασυνδεδεμένων σελίδων. Ξεκινώντας τη
διαδικασία ανάπτυξης της διεπαφής ενός απλού στατικού Web Site θα πρέπει να σχεδιάσουμε
τη δομή του, δηλαδή ποιες σελίδες θα περιλαμβάνει και πως θα συνδέονται μεταξύ τους. Ο
σχεδιασμός είναι συνήθως top-down, δηλ. ξεκινάμε από την αρχική σελίδα και κατεβαίνουμε
προς τα επόμενα επίπεδα συνδεδεμένων σελίδων. Κάθε σελίδα έχει ένα τίτλο καθώς και ένα
όνομα αρχείου. Ο τίτλος είναι το κείμενο που εμφανίζεται πάνω-αριστερά στο παράθυρο του
browser, ενώ το όνομα αρχείου είναι το όνομα αποθήκευσης στο δίσκο.
Η αρχική σελίδα έχει ένα προκαθορισμένο όνομα αρχείου: index.html. Οι υπόλοιπες σελίδες
μπορούν να έχουν άλλα ονόματα αρχείου (με κατάληξη .html).
Με βάση τα παραπάνω, στο πλαίσιο της δημιουργία ενός e-Portofolio για την εκπαίδευση -
δηλαδή ενός Web Site με τα χαρακτηριστικά που έχουμε αναφέρει σε προηγούμενο μάθημα-
ο σχεδιασμός θα μπορούσε να είναι ο παρακάτω:
Αρχική
Σελίδα
Μάθημα Μάθημα Μάθημα Μάθημα Μάθημα

Βιογραφικό 4 5
1 2 3
Project Project Project

Project Project … … … … … … .. 1 2 1
1 2
Η ονομασία της αρχικής σελίδας, όπως αναφέραμε, είναι index.html, της σελίδας
βιογραφικού μπορεί να είναι cv.html, του μαθήματος 1 ped1.html, κλπ.
Αφού σχεδιάσουμε τη διεπαφή, στη συνέχεια μπορούμε να οργανώσουμε το υλικό μας.

Μπορούμε δηλαδή να φτιάξουμε μια δομή φακέλων που να αντανακλά τη δομή του Site μας.
Ξεκινάμε δημιουργώντας ένα βασικό φάκελο με όνομα για παράδειγμα ePortofolio_WebSite
και ως υποφακέλους μπορούμε να δημιουργήσουμε μία δομή που να αντανακλά τη δομή του
Site μας. Για παράδειγμα, μπορούμε να έχουμε έναν υποφάκελο classes για τις σελίδες των
μαθημάτων, projects για τις σελίδες των εργασιών, images για τις εικόνες, videos για τα
video ή να έχουμε υποφακέλους ανά μάθημα ή όπως αλλιώς νομίζουμε ότι μπορούμε να
οργανώσουμε καλύτερα το υλικό μας ώστε να αντανακλά χονδρικά τη δομή του Site μας
2
χωρίς αυτό να σημαίνει ότι θα πρέπει να υπάρχει ένα-προς-ένα αντιστοίχιση σελίδων και
φακέλων.
Στη συνέχεια θα πρέπει να την υλοποιήσουμε τον Ιστότοπό μας.
Για την υλοποίηση, μπορούμε να χρησιμοποιήσουμε ένα πρόγραμμα συγγραφής σελίδων. Τα

προγράμματα που εξυπηρετούν καλύτερα τον σκοπό μας –που είναι η δημιουργία γραφικής
διεπαφής- είναι προγράμματα τύπου WYSIWYG (what you see is what you get) δηλαδή
προγράμματα που μας δίνουν τη δυνατότητα να επεξεργαζόμαστε περιεχόμενο
(κείμενο/εικόνες/κλπ.) με γραφικό τρόπο ώστε να υπάρχει αντιστοιχία επεξεργασίας και
τελικής μορφής. Επομένως, σε αυτού του τύπου τα προγράμματα για Web σελίδες, εμείς
μπορούμε να εισάγουμε/τροποποιούμε/διαγράφουμε κλπ. περιεχόμενο όπως σε ένα συντάκτη
κειμένου (π.χ. Word). Ο κώδικας HTML παράγεται αυτόματα αλλά ο δημιουργός θα ήταν
χρήσιμο να έχει γνώσεις HTML ώστε να μπορεί να παρεμβαίνει όταν χρειάζεται.
Ένα τέτοιο πρόγραμμα είναι ο KompoZer, που είναι ένας open source WYSIWYG
συντάκτης Web σελίδων, ιδιαίτερα καλός για αρχάριο επίπεδο χρηστών. Για επαγγελματικό
σχεδιασμό και υλοποίηση υπάρχουν μη-δωρεάν προγράμματα όπως ο Adobe Dreamweaver.
Ωστόσο η λογική που διέπει όλα αυτού του είδους τα προγράμματα είναι παρόμοια και για
αυτό το λόγο και για εκπαιδευτικούς λόγους θα χρησιμοποιήσουμε τον kompoZer για την
επίδειξη μέσω παραδείγματος της ανάπτυξης ενός Web Site στο πλαίσιο του e-Portofolio.
3. KompoZer ( http://www.kompozer.net/download.php )
Αφού δημιουργήσουμε τουλάχιστον τον βασικό φάκελο που αναφέραμε παραπάνω με το
όνομα που επιθυμούμε (στο παράδειγμα εδώ έχει δημιουργηθεί ο φάκελος
ePortofolio_WebSite) ανοίγουμε τον kompozer (εικ. 1).
Εικ. 1: Η αρχική οθόνη του kompozer
3
Παρατηρήστε τα τρία βασικά μέρη του παραπάνω παραθύρου: 1) στο επάνω μέρος, το μενού
και οι εργαλειοθήκες, 2) αριστερά, ο site manager, που εμφανίζει τα αρχεία του φακέλου που
θα συνδέσουμε, και 3) κάτω-δεξιά, ο χώρος επεξεργασίας της σελίδας, που στην αρχή
ονομάζεται untitled.
Αρχικά πατάμε το κουμπί Edit site list (μέσα στον κόκκινο κύκλο, εικ. 1) για να συνδέσουμε
τον site manager με τον βασικό μας φάκελο και δίνουμε τα εξής στοιχεία (εικ. 2): i) ως Site
Name, το όνομα του Site μας όπως εμείς θέλουμε να εμφανίζεται στον kompozer (π.χ.
ePortofolio) και ii) ως Site Folder, πατάμε Select Directory και επιλέγουμε τον βασικό μας
φάκελο. Πατάμε ok.
Εικ. 2: Σύνδεση με το βασικό μας φάκελο
Μόλις πατήσουμε οκ, εμφανίζεται στον Site Manager το Site Name. Αν πατήσουμε τον
σταυρό στα αριστερά του ονόματος (σύμβολο ανάπτυξης δομής φακέλων/υποφακέλων)
εμφανίζονται οι υποφάκελοι και τα αρχεία του βασικού μας φακέλου. Στο παράδειγμα έχουν
δημιουργηθεί δύο υποφάκελοι (cv, images) ενώ υπάρχει και ένα σύνολο αρχείων εικόνων,
κλπ. (εικ. 3).
Εικ. 3: Εμφάνιση στον Site Manager του υλικού του βασικού φακέλου
4
Η διαδικασία που θα ακολουθήσουμε στη συνέχεια θα είναι να δημιουργήσουμε ένα αρχικό
template σελίδας με βάση την οποία θα δημιουργήσουμε όλες τις άλλες σελίδες του site μας.
Ο λόγος που όλες οι σελίδες θα βασίζονται στο template είναι για λόγους ομοιομορφίας και
λειτουργικότητας.
Το template θα αποτελείται από 5 μέρη (εικ. 4): 1) Header, 2) Footer, 3) Left Nav(igation)
Menu, 4) Global Nav Menu, 5) Section, και θα έχει πλάτος 1024 pixels. Το αριστερό μενού
μπορεί να έχει πλάτος 200 και επομένως το section 824 pixels. Το ύψος μπορεί να ρυθμιστεί
αναλόγως με βασική αρχή να ταιριάζει στο μέγεθος των περιεχομένων.
Header
Left Nav
Menu Section
Header
Global Nav Menu

Footer
Εικ. 4: Βασικό template Web Σελίδας
Το κάθε μέρος του παραπάνω σχήματος περιλαμβάνει τα παρακάτω:
‒ Η επικεφαλίδα (Header) μπορεί να περιλαμβάνει το λογότυπο (στο παράδειγμά μας θα

εισάγουμε το λογότυπο που έχουμε σχεδιάσει με το GIMP)
‒ Το αριστερό μενού πλοήγησης (Left Nav Menu) θα περιλαμβάνει συνδέσμους προς τις
σελίδες του Site σύμφωνα με τη δομή που έχουμε καθορίσει στον πίνακα 4.
‒ Το καθολικό μενού πλοήγησης (Global Nav Menu) θα περιλαμβάνει συνδέσμους προς
άλλες βασικές σελίδες του Site, όπως για παράδειγμα Συμμετοχή σε Δράσεις, Πρακτική
Άσκηση, Εθελοντική Εργασία, κλπ. και δεν θα αλλάζει.
‒ Το υποσέλιδο (Footer) θα περιέχει πληροφορίες για το site και συνδέσμους προς τα
κοινωνικά μέσα δικτύωσης, όπου έχουμε παρουσία.
‒ Το Section θα είναι ο χώρος που θα εισάγουμε το περιεχόμενο.
Ο σχεδιασμός του template όπως φαίνεται στον σχεδιασμό της εικ. 4, θα βασίζεται σε πίνακα,
ώστε να έχουμε αποτελεσματικό έλεγχο της δομής του. Επομένως, το πρώτο πράγμα που θα
εισάγουμε (στην ακόμα untitled) σελίδα του kompozer είναι ένας πίνακας 4 γραμμών
και 2 στηλών (εικ. 5). Πατάμε Table/Insert από το μενού ή το κουμπί table της
εργαλειοθήκης, πατάμε την καρτέλα Precisely και δίνουμε 4 γραμμές/2 στήλες/1024 πλάτος/1
pixel περίμετρος (δηλ. μια λεπτή γραμμή περιμέτρου του πίνακα, αν αφήναμε 0 θα ήταν
χωρίς γραμμή περιμέτρου). Το αποτέλεσμα φαίνεται στην εικ. 6.
5
.
Εικ. 5 & 6: Εισαγωγή βασικού πίνακα και αποτέλεσμα.
Για να επεξεργαστούμε περαιτέρω τον πίνακα επιλέγουμε τον πίνακα (κλικ κάπου μέσα στο
χώρο του πίνακα) και πατάμε από το μενού Table/Table Properties (εικ. 7).
Μπορώ να αλλάξω το spacing σε 0 (δηλ. μεταξύ των κελιών να μην υπάρχει απόσταση), το
padding μπορώ να το αφήσω 2 ή να το κάνω 1 ή 0 (δηλ. 2/1/0 pixels απόσταση μεταξύ
κελιών και κειμένου/εικόνας, αν δεν το κάνω 0 θα υπάρχει ένα μικρό κενό μεταξύ του
λογότυπου και του περιγράμματος, που μπορεί να μην το θέλω), το border 1 όπως το είχα
ρυθμίζει αρχικά (ή 0 αν δεν θέλω καθόλου περίγραμμα πίνακα), και επιπλέον αλλάζω το
Alignment (στοίχιση) σε Center. Πατάω οκ (εικ. 8). Παρατηρήστε στην εικ. 8 την κόκκινη
κουκίδα αριστερά από το Untitled. Σημαίνει ότι το αρχείο μου δεν έχει αποθηκευτεί ακόμα.
Στη συνέχεια θα επιλέξω File/Save As (εικ. 9).
6
Εικ. 7 & 8: Επεξεργασία πίνακα και αποτέλεσμα. Η κόκκινη κουκίδα σημαίνει ότι οι αλλαγές
στο αρχείο δεν έχουν αποθηκευτεί
Πατώντας Save As θα πρέπει καταρχάς να δώσω δύο πράγματα: Τον τίτλο της σελίδας (που
θα εμφανίζεται στο πάνω μέρος του παραθύρου του browser κατά το άνοιγμα της σελίδας)
και το όνομα του αρχείου (με κατάληξη .html). Τον τίτλο τον ονομάζω Template (εικ. 9) και
ονομάζω template.html το όνομα του αρχείου (εικ. 10).
7
Εικ. 9 & 10: Τίτλος και όνομα αρχείου σελίδας
Θα συνεχίσω και θα συγχωνεύσω τις γραμμές 1, 3 και 4 ώστε να δημιουργήσω σταδιακά τη

δομή του πίνακα 4 (εικ. 4). Συγχώνευση κάνω επιλέγοντας τα δύο κελιά κάθε γραμμής, στη
συνέχεια δεξί κλικ και Join Selected Cells (εικ. 11). Κάνω το ίδιο τρεις φορές για κάθε μία
από τις γραμμές 1/3/4.
Εικ. 11: Συγχώνευση κελιών
Στη συνέχεια θα πρέπει να ορίσω το πλάτος της πρώτης στήλης της δεύτερης γραμμής σε 200
pixels (όπως έχουμε σχεδιάσει παραπάνω στον πίνακα 4), ενώ δίνω και ένα αρχικό ύψος 400
pixels που μπορεί στη συνέχεια να αλλάξει (εικ. 12). Το αποτέλεσμα φαίνεται στην εικόνα
13. Πατάω File/Save.
8
Εικ. 12 & 13: Ρύθμιση πλάτους/ύψους κελιού και αποτέλεσμα
Στη συνέχεια εισάγω με drag & drop από το Site Manager στο Header το λογότυπό μου (εικ.
14).
Εικ. 14: Εισαγωγή λογότυπου με το ποντίκι (drag & drop)
9
Στη συνέχεια δίνω τα στοιχεία περιεχομένου των μενού και του υποσέλιδου (εικ. 15). Εισάγω
δηλαδή όλους τους συνδέσμους προς τις σελίδες που έχω σχεδιάσει στη δομή μου.
Εικ. 15: Στοιχεία περιεχομένου των μενού και του υποσέλιδου.
Το αριστερό μενού είναι αναλυτικό και περιέχει συνδέσμους μέχρι και δύο επίπεδα ώστε να
μην χρειάζεται δύο κλικ όταν κάποιος θέλει να επιλέξει ένα project. Τα εικονίδια των social
media στο υποσέλιδο έχουν αναζητηθεί και βρεθεί στο web, έχουν αποθηκευτεί στο φάκελο
του site και έχουν μπει με drag & drop σαν εικόνες. Παρότι δεν έχω δημιουργήσει τις
σελίδες, θα πρέπει να ορίσω από τώρα τα ονόματά τους ώστε να δημιουργήσω τους
συνδέσμους του template. Για παράδειγμα θα πρέπει να ορίσω από πριν:
Αρχική Σελίδα  index.html

Βιογραφικό  cv.html
Τα ‘Μάθημα 1’ θα πρέπει να αντικατασταθεί από το πραγματικό όνομα του μαθήματος, για
παράδειγμα ‘Παιδ. Εφαρμογές’ και όνομα αρχείου για παράδειγμα pedapps.html. Το μάθημα
2 επίσης θα αντικατασταθεί με το πραγματικό όνομα και το ίδιο θα γίνει και στα υπόλοιπα
μαθήματα.
Οι εργασίες μπορούν να μείνουν Εργ. 1, Εργ. 2, Εργ. 3 κλπ. στο αριστερό μενού με ονόματα
αρχείων που θα καθοριστούν από τώρα, για παράδειγμα στο Μάθημα 1 μπορώ να έχω
c1proj1.html για την Εργ. 1, c1proj2.html για την Εργ. 2, στο Μάθημα 2 μπορώ να έχω
c2proj1.html για την Εργ. 1, c2proj2.html για την Εργ. 2, και ούτω καθ’ εξής για τα υπόλοιπα
Μαθήματα και Εργασίες.
Σε κάθε περίπτωση θα πρέπει να δοθούν από τώρα ονόματα αρχείων (.html) για κάθε σελίδα
της δομής μας, ώστε να δημιουργήσω τα links στο template. Για να δημιουργήσω links στο
template επιλέγω κάθε λέξη ή λέξεις των μενού, επιλέγω link από την εργαλειοθήκη και δίνω
το όνομα του αρχείου της σελίδας που θα συνδεθεί (εικ. 16). Σε περίπτωση που το αρχείο μου
(cv.html) το τοποθετήσω σε άλλο φάκελο, π.χ. στον φάκελο cv, δίνω στο link τη διαδρομή
cv/cv.html, κλείνω το παράθυρο, ξανανοίγω το link και ξετικάρω το URL is relative to page
location. Έτσι δημιουργώ σταδιακά και τους υπόλοιπους συνδέσμους (εικ. 17).
10
Εικ. 16: Δημιουργία συνδέσμου για την Αρχική Σελίδα
Εικ. 17: Δημιουργία και άλλων συνδέσμων
Αφού εισάγουμε τους συνδέσμους και ολοκληρώσουμε το περιεχόμενο του αριστερού μενού,
του καθολικού μενού και της επικεφαλίδας/υποσέλιδου, θα πρέπει να μορφοποιήσουμε την
template σελίδα μας.
Η μορφοποίηση μπορεί να γίνει με τα κουμπιά μορφοποίησης της εργαλειοθήκης ή με CSS.

Για να χρησιμοποιήσω CSS επιλέγω το κουμπί CSS από την εργαλειοθήκη και δημιουργώ
Style rule/Style applied to all element of a class (εικ. 18). Πρώτα θα δημιουργήσω για το
αριστερό μενού. Δίνω το όνομα (π.χ. leftnav) μετά την τελεία και πατάω Create Style rule.
11
Εικ. 18: Δημιουργία CSS για το αριστερό μενού
Εικ. 19 & 20: Δημιουργία CSS για το αριστερό μενού
12
Εικ. 21: Δημιουργία CSS για το αριστερό μενού
Εικ. 22: Επιπλέον μορφοποιήσεις από την εργαλειοθήκη
Επιπλέον μπορούμε να κάνουμε μορφοποιήσεις και από την εργαλειοθήκη. Για παράδειγμα
για μορφοποιήσω περαιτέρω τα links (χρώμα/bold) επιλέγω το link και από την εργαλειοθήκη
επιλέγω χρώμα/bold και μέγεθος αν θέλω για το 2ο επίπεδο συνδέσμων που είναι οι εργασίες
και μειώνω λίγο το μέγεθος γραμματοσειράς (εικ. 22). Στην πραγματικότητα δημιουργείται
internal style:
<a style="font-weight: bold; color: rgb(255, 102, 0);" href="index.html">
Αρχική Σελίδα</a>
13
Αυτό μπορώ να το δω αν επιλέξω το κείμενο ‘Αρχική Σελίδα’ για παράδειγμα και επιλέξω
Split (εικ. 23).
Εικ. 23: Επιπλέον μορφοποιήσεις από την εργαλειοθήκη
Συνεχίζω με το επόμενο CSS για το footer (υποσέλιδο) (εικ. 24).
Εικ. 24: CSS για το υποσέλιδο
14
Ρυθμίζω Text και Background, όπως φαίνεται στο General (εικ. 25).
Εικ. 25: CSS για το υποσέλιδο
Πατάω το κουμπί Save και αμέσως μετά το κουμπί Browse ώστε να δω στον browser την
μέχρι στιγμής εικόνα της σελίδας μου (εικ. 26).
Εικ. 26: Η σελίδα μου (template) στον browser
15
Από το Format/Page Colors and Background μπορώ να ρυθμίσω το χρώμα του παρασκηνίου
όλης της σελίδας, ενώ από το Table/Table Properties/Cells ρυθμίζω το χρώμα του section cell
αφού το επιλέξω (ένα κλικ μέσα στο κελί) (εικ. 27).
Εικ. 27: Ρύθμιση του Page Background και Cell Background
Αφού ολοκληρώσω τους συνδέσμους και την μορφοποίηση του template, πατάω Format/Page
Title and Properties και εισάγω τον τίτλο της σελίδας (τον έχω ήδη εισάγει) το Character Set
(UTF-8 που περιλαμβάνει και ελληνικά) καθώς και πληροφορίες τεκμηρίωσης όπως Author
& Description (δεν εμφανίζονται πουθενά) (εικ. 28). Στη συνέχεια πατάω Save.
Εικ. 28: Ρύθμιση του Page Properties
16
Αφού λοιπόν ολοκληρώσω το σχεδιασμό της template σελίδας μου θα την αποθηκεύσω (Save
As) τόσες φόρες όσες και οι σελίδες μου και κάθε φορά θα δίνω ένα όνομα σελίδας. Έτσι, αν
έχω 30 σελίδες θα πατήσω 30 φορές Save As στο template κάθε φορά θα δίνω το όνομα
αρχείου (.html) της σελίδας που θέλω να δημιουργήσω.
Για παράδειγμα θα πατήσω Save As και θα δημιουργήσω την Αρχική Σελίδα δίνοντας όνομα
αρχείου index.html και αποθηκεύοντας στον βασικό φάκελο (εικ. 29). Για την σελίδα του
βιογραφικού κάνω την ίδια διαδικασία και Αποθηκεύω Ως cv.html στον φάκελο cv (εικ. 30)
Εικ. 29: ‘Save As’ του template για την Αρχική Σελίδα
Εικ. 30: ‘Save As’ του template για τη σελίδα Βιογραφικού
17
Με δεξί κλικ στον Site Manager και refresh (η το εικονίδιο Refresh αριστερά στον Site
Manager) ανανεώνω τη λίστα αρχείων και φακέλων και εμφανίζονται οι σελίδες που έχω
δημιουργήσει (εικ. 31).
Εικ. 31: Ανανέωση (refresh) περιεχομένων του Site Manager
Αφού δημιουργήσω μία-μία όλες τις σελίδες, θα πρέπει πάλι να τις ανοίξω μία-μία (διπλό
κλικ στο όνομα της σελίδας στον Site Manager) ώστε να τις επεξεργαστώ περαιτέρω μιας και
το μόνο που υπάρχει είναι η ίδια σελίδα του template. Θα πρέπει λοιπόν σε κάθε σελίδα να
εισάγω περιεχόμενο στο χώρο του section, να δώσω ένα τίτλο σελίδας στο Format/page
Properties της κάθε σελίδας και να την αποθηκεύσω.
Ας δούμε, για παράδειγμα, την Αρχική Σελίδα που ήδη έχω αποθηκεύσει ως index.html. Την
ανοίγω στον kompozer (εικ. 32). Είναι πανομοιότυπη με το template.
Εικ. 32: Αρχική Σελίδα
18
Ξεκινάω τις αλλαγές. Καταρχάς Format/Page Title and Properties και δίνω Τίτλο: e-
Portofolio - Θ. Ανδρ. - Αρχική Σελίδα (εικ. 33) ή ότι τίτλο επιθυμώ για την αρχική μου
σελίδα.
Εικ. 33: Αρχική Σελίδα – Τίτλος
Στο χώρο του Section μπορώ να βάλω κείμενο είτε με το χέρι ή copy/paste από απλό
συντάκτη κειμένου (π.χ. Σημειωματάριο, όχι μορφοποιημένο από Word, κλπ), εικόνες με
drag & drop αφού τις έχω αποθηκεύσει στο βασικό μου φάκελο ή στον υποφάκελο images
καθώς και βίντεο, συνδέσμους, κλπ.
Το παραπάνω περιεχόμενο μπορώ να το βάλω απευθείας ή να δημιουργήσω πίνακα μέσα στο

χώρο του section ώστε να υπάρχει πιο σαφής δομή. Στο παράδειγμα δημιουργώ ένα πίνακα
με 2x2 γραμμέςxστήλες, 0/0/0 border/spacing/padding αντίστοιχα, και διαστάσεις
πλάτος/ύψος 406x241 για κάθε κελί, ώστε να καταλάβει όλο το χώρο του section (812x482)
και εισάγω background color και περιεχόμενο με μορφοποίηση Heading 1 (εικ. 34).
Εικ. 34: Περιεχόμενο Αρχικής Σελίδας
19
Για να εισάγω στο πάνω-δεξιά κελί ένα βίντεο από το YouTube (με copy/paste τον iframe
κώδικα) κάνω κλικ στο κελί (και γενικότερα κλικ στο σημείο που θέλω να εμφανίζεται το
βίντεο) και στη συνέχεια επιλέγω Insert/HTML από το μενού, όπου κάνω paste τον iframe
κώδικα αλλάζοντας το πλάτος/ύψος του iframe, ώστε να ταιριάζει στις διαστάσεις του κελιού
(εικ. 35/36).
Εικ. 35 & 36: Insert HTML και το αποτέλεσμα σε browser
20

Σχεδιασμός Web Σελίδων Με Τον KompoZer Αθανάσιος Ανδρούτσος ΟΠΑ

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Σχεδιασμός Web Σελίδων Με Τον KompoZer Αθανάσιος Ανδρούτσος ΟΠΑ

Uploaded by

Copyright:

Available Formats

Παιδαγωγικές Εφαρμογές στην Εκπαίδευση

Σχεδιασμός Web Σελίδων

Αθανάσιος Ανδρούτσος 2015

HyperText Mark-up Language

Web Server/HTTP Server

• Περιεχόμενο (Content) + Μορφοποίηση

• Περιεχόμενο μορφοποίηση (από λογική άποψη)

• Γλώσσα για τον ορισμό του περιεχομένου και της

Προσδιορίζει ότι το Επικεφαλίδα

• Για την συγγραφή HTML μπορεί να χρησιμοποιηθεί

Βασικά στοιχεία HTML για τη

• Τα tags μπορούν να περιέχουν και ιδιότητες (attributes)

• Όλα τα στοιχεία HTML μπορούν να έχουν ιδιότητες για

• Πάντα ορίζονται στο αρχικό tag

• Περιέχει metadata, δηλ. δεδομένα που προσδιορίζουν

• <h1> Επικεφαλίδα πρώτου επιπέδου</h1>

• Ερμηνεύεται (από τους browsers) ως μία κενή γραμμή

• Προεπιλεγμένο (default) στυλ

• Ιδιότητα style - style=“property:value“

• Σημεία εισαγωγής Styling

Παράδειγμα CSS - Internal

• Κάθε κείμενο στην HTML έχει γύρω του ένα περίγραμμα

• Για να μορφοποιήσουμε περαιτέρω το περίγραμμα

• Ο τύπος μορφοποίησης στοιχείο_html {ιδιότητα_CSS:τιμή_CSS}

ids & classes

• Δίνουμε ένα μοναδικό id σε ένα κομμάτι κειμένου

• Δίνουμε ένα όνομα τάξης (class) που μπορεί να

• Κείμενο ή εικόνα (ή όποιο άλλο στοιχείο HTML) που

• Το <img> tag είναι εμφωλιασμένο μέσα στο <a> tag στη

• Σύνδεσμος σε id π.χ. href="#auebnews"

• Ιδιότητα src (source). Αν δεν προσδιορίζεται φάκελος

• <img src= "opa.png" alt="OPA"

• Αλλιώς πρέπει να προσδιορίζεται (υπο)φάκελος

• <img src="/images/opa.png" alt="OPA"

Τυπική μορφοποίηση πίνακα

• Με κουκίδες (unordered) ή Αριθμημένες (ordered)

• Block vs Inline αντικείμενα HTML

HTML Forms (1/3)

• Για εισαγωγή δεδομένων των χρηστών

HTML Forms (3/3)

• <video width="320" height="240" controls>

• <object width="400" height="50" data="bookmark.swf">

• <iframe width="420" height="315"

• Object & embed μπορούν επίσης να χρησιμοποιηθούν

• Ορίζουν τη μορφοποίηση (πως θα φαίνεται) του HTML

CSS id & class

CSS External .css

• Αλλάξτε τα χρώματα, τις γραμματοσειρές και τα

Β.1 Τύποι Δεδομένων

Όλες οι γλώσσες προγραμματισμού (πρέπει να) υποστηρίζουν πέντε (5)

float (floating point)

double (double floating point)

Η γλώσσα JavaScript υποστηρίζει τους παρακάτω πρωταρχικούς τύπους

Number (που περιλαμβάνει int, float & double)

Δηλώσεις μεταβλητών μπορούν να γίνουν στο σώμα των συναρτήσεων ως τοπικές

Οι δηλώσεις μεταβλητών γίνονται όπως παρακάτω:

Όπως φαίνεται παραπάνω στη JavaScript μπορούμε να κάνουμε είτε μόνο

Β.3 Κυριολεκτικά (Literals)

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

var m = 12; //ακέραιος

Οι δηλώσεις σταθερών για αλφαριθμητικά (κυριολεκτικά αλφαριθμητικά – literal

Β.4 Πίνακες (Arrays) και Δομές (Structs)

Δηλώσεις πινάκων κάνουμε ως εξής:

var dim = new Array(5); //Θέσεις από dim[0] έως dim[4]