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

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

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

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

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

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

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


Περιγραφή και Επιπλέων Οδηγίες για διαδικασίες που προβλέπονται στο παρόν μάθημα

Εισαγωγή εικόνας στην μακέτα μας.

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

Πως δημιουργούμε Mask

Πρώτα, δημιουργούμε ένα αντικείμενο στην μακέτα μας, έπειτα τοποθετούμε πάνω του μια εικόνα ή ένα άλλο γραφικό (σημ. η εικόνα πρέπει να είναι μεγαλύτερη από το αντικείμενο μας), έπειτα από τα layers τοποθετούμε το layer του αντικειμένου μας πάνω από αυτό της εικόνας μας. Τα συλλέγουμε και τα δύο και έπειτα από το κύριο μενού του προγράμματος επιλέγουμε Modify > Mask > Group As mask.

Τοποθέτηση Αντικειμένου σε συγκεκριμένο σημείο

Όταν επιλέξουμε το αντικείμενο της αρεσκείας μας, τότε στο πάνελ που εμφανίζετε στο κάτω μέρος (Properties) θα δούμε δίπλα από τις μεταβλητές των διαστάσεων (W,H) τις μεταβλητές X,Y όπου Χ Οριζόντια τοποθέτηση και Υ κάθετη τοποθέτηση.

Μάθημα 1α. Δημιουργία της μακέτας μας.

1. Ανοίξτε το αρχείο που δημιουργήσατε στο πρώτο μάθημα.

2. Εισάγετε ένα νέο τετράγωνο (Rectangle Tool) και τοποθετήστε το στην θέση X:0 – Y:150, έπειτα αλλάξτε τις διαστάσεις σε W:1100 – H:700 όλα αυτά θα τα κάνετε από το πάνελ Rectangle Properties. (εάν αντιμετωπίζετε δυσκολίες διαβάστε το πρώτο μάθημα)

3. Τώρα επιλέξτε το τετράγωνο που έχετε δημιουργήσει και προσθέστε τις παρακάτω ιδιότητες
Texture : Piano Keys – 79%
Color : #F2F2F2
Εικόνα

4. Δημιουργήστε ένα νέο τετράγωνο το οποίο θα έχει τις ακόλουθες ιδιότητες
Διαστάσεις : W:1000 H:250
Τοποθέτηση : X:50 Y:150
Texture : Όχι (εάν σας εμφανίζετε είναι λόγο της αυτόματης ρύθμισης του προγράμματος, άρα κατεβάστε το capacity σε 0%)
COLOR : #CCCCCC
Εικόνα

5. Δημιουργήστε ένα νέο τετράγωνο το οποίο θα έχει τις ακόλουθες ιδιότητες
Διαστάσεις : W:800 H:220
Τοποθέτηση : X:65 Y:165
Texture : Όχι (εάν σας εμφανίζετε είναι λόγο της αυτόματης ρύθμισης του προγράμματος, άρα κατεβάστε το capacity σε 0%)
COLOR : #333333
Εικόνα


6. Δημιουργήστε ένα νέο τετράγωνο το οποίο θα έχει τις ακόλουθες ιδιότητες
Διαστάσεις : W:780 H:200
Τοποθέτηση : X:75 Y:175
Texture : Όχι (εάν σας εμφανίζετε είναι λόγο της αυτόματης ρύθμισης του προγράμματος, άρα κατεβάστε το capacity σε 0%)
COLOR : #FFFFFF (άσπρο)

7. Τώρα εισάγετε μια φωτογραφία της αρεσκείας σας πάνω από το τελευταίο τετράγωνο που έχετε δημιουργήσει και ακολουθήστε την διαδικασία που περιγράφετε πιο πάνω για δημιουργία MASK. (χρησιμοποιήστε την εικόνα και το τελευταίο τετράγωνο). Εικόνα


8. Δημιουργήστε ένα νέο τετράγωνο το οποίο θα έχει τις ακόλουθες ιδιότητες
Διαστάσεις : W:1100 H:150
Τοποθέτηση : X:0 Y:0
Texture : Όχι (εάν σας εμφανίζετε είναι λόγο της αυτόματης ρύθμισης του προγράμματος, άρα κατεβάστε το capacity σε 0%)
COLOR : # 0185ΒΒ (ή ένα χρώμα της αρεσκείας σας)
Σε αυτό το τετράγωνο θα προσθέσουμε και ένα εφέ, το Glow, προσθέστε το Glow με αυτή την διαδικασία Rectangle Properties > Filters > Shadow And Glow > Glow
Έπειτα εισάγετε τις εξής ιδιότητες στο νέο παραθυράκι
Halo Offset : 5%
Color : #333333
Opacity :65%
Softness : 30
Offset : 0
Εικόνα


9. Τώρα εισάγετε το λογότυπο της αρεσκείας σας πρέπει να το τοποθετήσετε μεταξύ Χ:50-1050 και Υ:0-150, Αυτό θα είναι το Header σας.

10. Τέλος μαθήματος

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

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

Στο επόμενο μάθημα και τελευταίο χρησιμοποιώντας το πρόγραμμα Fireworks θα κόψουμε τα γραφικά μας, και έπειτα με την χρήση HTML και CSS θα φτιάξουμε την δική μας ιστοσελίδα.

Επόμενο μάθημα Τετάρτη 17 Νοε. 2010

Απάντηση

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

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

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