Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1 : Fireworks)

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1 : Fireworks)

Δημοσίευση από Joakim » 15 Νοέμ 2010 01:22

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 1 : Fireworks)

Περιγραφή μαθήματος:

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

Εργαλεία που θα χρειαστούμε:

Pointer
Εικόνα
Το εργαλείο αυτό, είναι φαντάζομαι γνωστό σε όλους μας, αλλά ας δούμε τι μπορεί να κάνει. Μέσω αυτού, μπορούμε να μετακινήσουμε οποιοδήποτε αντικείμενο βρίσκετε στην μακέτα μας. Να το επεξεργαστούμε αλλά και να το επιλέξουμε (κάτι πολύ βασικό). Η διαφορά του εν λόγο εργαλείου με το αντίστοιχο του Photoshop είναι πως μέσω αυτού μπορούμε να επιλέξουμε όποιο αντικείμενο εμείς θέλουμε χωρίς να αναγκαζόμαστε να επιλέγουμε το Layer του.

Rectangle tool
Εικόνα
Αυτό το εργαλείο όπως και τα περισσότερα βρίσκετε στην αριστερή πλευρά της οθόνης σας, στην εργαλειοθήκη. Υπάρχουν δύο τρόποι, που μπορούμε να το χρησιμοποιήσουμε, πρώτα απλά δημιουργώντας ένα τετράγωνο της αρεσκείας μας εκεί όπου θέλουμε, ή σχεδιάζοντας ένα απλό τετράγωνο σχήμα οπουδήποτε και έπειτα να το επεξεργαστούμε και να το τοποθετήσουμε, να το μεγαλώσουμε ή το αντίθετο, να του προσθέσουμε γραφικά κτλ. Μέσω των ιδιοτήτων του, που βρίσκονται στο κάτω μέρος της οθόνης μας.

Text Tool
Εικόνα
Το εργαλείο αυτό μας χρησιμεύει , για να γράψουμε ότι εμείς θέλουμε στην μακέτα μας, βεβαίως εμείς θα το χρησιμοποιήσουμε μόνο εκεί που θέλουμε το κείμενο μας να συμπεριλαμβάνετε στο γραφικό.

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

Rulers
Εικόνα
Για δική μας ευκολία στον σχεδιασμό, θα πρέπει να εμφανίσουμε τις ρίγες, Αυτό γίνετε απλά πατώντας View > Rulers.

Layers Window
Εικόνα
Μέσω αυτού του παραθύρου είμαστε σε θέση να επεξεργαστούμε τις ιδιότητες ενός Layer. Δηλαδή μπορούμε να το τοποθετήσουμε πάνω ή κάτω από ένα άλλο ( αυτό που είναι από επάνω καλύπτει αυτά που είναι από κάτω του), να επεξεργαστούμε την αντίθεση χρωμάτων του και την μεταβλητή διαφάνειας του.

Crop Tool
Εικόνα
Μέσω αυτού του εργαλείου μπορούμε να κόψουμε την μακέτα μας, και να αποθηκεύσουμε το κάθε κομμάτι της ξεχωριστά, ή να επεξεργαστούμε ένα συγκεκριμένο μέρος χωρίς να ενοχλήσουμε την υπόλοιπη σελίδα μας.

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

Rectangle Properties
Εικόνα
Επιλέγουμε ένα τετράγωνο και έπειτα βλέπουμε στο κάτω μέρος της οθόνης μας, αυτό το παράθυρο.
Σε αυτό το μάθημα θα μάθουμε τα εξής
W: το μέγεθος του αντικειμένου οριζοντίως
Η: το ύψος του αντικειμένου
Color: Εδώ θα μπορείτε να αλλάξετε το χρώμα του αντικειμένου σας
Texture: Στο μάθημα θα το χρησιμοποιήσουμε για να δώσουμε μια ξεχωριστή αφή στο φόντο μας.

Filters
Εικόνα
Στο μάθημα αυτό θα δούμε το Shadow and Glow.

Παράθυρο ιδιοτήτων
Εικόνα



Μάθημα 1. Προετοιμασία της μακέτας μας, για το επόμενο και πρώτο ουσιαστικό μάθημα κατασκευής της ιστοσελίδας μας.

1. Ανοίξτε ένα νέο αρχείο
2. Τροποποιήστε το Canvas Size σε 1100x1000 (πλάτος – ύψος) (πως? Canvas Properties)
3. Ενεργοποιήστε της ρίγες σας (Rulers)
4. Επιλέξτε το εργαλείο Pointer, πηγαίνετε στα νέα πεδία που θα εμφανιστούν με τις ρίγες σας στο πάνω μέρος, κάντε αριστερό συνεχόμενο click και σύρετε μια ρίγα στην σελίδα σας, Έπειτα στην γραμμή που θα εμφανιστή κάντε διπλό κλικ και στην μεταβλητή Position γράψτε 150.
Εικόνα
5. Επαναλάβετε το στάδιο 4 ακόμα δύο φορές με διαφορά της μεταβλητής Position σε 400 και 850 αντίστοιχα .
6. Επαναλάβετε την διαδικασία αυτή την φορά από την ρίγα που βρίσκετε κάθετα στα αριστερά της μακέτας μας. Με μεταβλητή Position στα 50 και 1050 αντίστοιχα.
7. Αλλάξετε το χρώμα του φόντου (Canvas Properties) σε ένα σκούρο γκρίζο #333333.
8. Αποθηκεύστε το αποτέλεσμα σε μορφή png (η στάνταρ μορφή του προγράμματος)
9. Τέλος πρώτου μαθήματος.

Τι μάθαμε σήμερα

Σε αυτό το πρώτο μάθημα, μάθαμε τις βασικές λειτουργίες του προγράμματος, και προετοιμάσαμε την μακέτα μας, την χωρίσαμε σε τέσσερα οριζόντια μέρη, τα οποία είναι με σειρά Header, Slider, Main και Footer.

Στο επόμενο μάθημα θα δημιουργήσουμε την σελίδα μας.


Επόμενο μάθημα Δευτέρα 15 Νοε. 2010

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης