×
Κατασκευή Ιστοσελίδων WordPress Joomla wordpress vs html/css
×
Κατασκευή Eshop Woocommerce Opencart Magento Shopify
×
Προώθηση Ιστοσελίδων Digital Marketing Μαθήματα Facebook Σεμινάρια Linkedin Μαθήματα Instagram Σεμινάρια Twitter Μαθήματα Pinterest
×
Κατασκευή web εφαρμογών Σεμινάρια JAVA Μαθήματα PHP Σεμινάρια MySQL Προγραμματισμός Παιχνιδιών
×
Μαθήματα Excel Σεμινάρια VBA Σεμινάρια Photoshop Μαθήματα PowerPoint Σεμινάρια Word Μαθήματα Προγραμματισμού Πληροφορική στο δημοτικό

balatsoukas logo balatsoukas.com

Κατασκευή ιστοσελίδας με το photoshop

Κατασκευή ιστοσελίδας με το photoshop. Αξιοποιήστε τις δυνατότητες του photoshop για τη δημιουργία εντυπωσιακών και γρήγορων ιστοσελίδων και e-shop.

Εκπαιδευτής Ενηλίκων Νικόλαος Μπαλατσούκας Τηλ. (+30) 6977676785

Σε αυτό το άρθρο δείχνουμε τον τρόπο με τον οποίο μπορεί να χρησιμοποιηθεί το Photoshop για τη δημιουργία ιστοσελίδας. Συνήθως δεν είναι απαραίτητο να χρησιμοποιήσετε το Photoshop για την κατασκευή ιστοσελίδων. Ο πιο εύκολος τρόπος είναι να αγοράσετε ένα έτοιμο theme για το Content management system που έχετε επιλέξει. Στην αγορά υπάρχουν πολλά theme που μπορείτε να χρησιμοποιήσετε για την κατασκευή ιστοσελίδων. Εάν δεν σας καλύπτει κάποιο από αυτά τότε η χρήση του photoshop για την κατασκευή της ιστοσελίδας αποτελεί μια καλή επιλογή. Θα πρέπει όμως να γνωρίζετε ότι η χρήση του Photoshop ανεβάζει το κόστος κατασκευής της ιστοσελίδας διότι προστίθεται σε αυτό το κόστος της γραφιστικής εργασίας καθώς και το κόστος της δημιουργίας του κώδικα html, css και JavaScript.

Βήματα κατασκευής ιστοσελίδας με το photoshop

1. Δημιουργούμε ένα αρχείο διαστάσεων 1200 Χ 1500 pixel. Αυτή είναι μια καλή διάσταση για εμφάνιση ιστοσελίδας σε υπολογιστή. Αργότερα θα πρέπει να κάνουμε τη σχεδίαση της ιστοσελίδας για tablet και για κινητά.

μαθήματα photoshop κατασκευη ιστοσελίδας

2. Στη συνέχεια θα πρέπει να τοποθετήσουμε τους οδηγούς:.

μαθήματα κατασκευη ιστοσελίδας photoshop

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

μαθήματα photoshop για την κατασκευη ιστοσελίδας

4. Τελος τοποθετούμε ενδεικτικά κείμενα.

μαθήματα photoshop δημιουργία ιστοσελίδας

5. Εδώ βλέπουμε το τελικό αποτέλεσμα.

μαθήματα photoshop για τη δημιουργία ιστοσελίδας

6. Στη συνέχεια μπορούμε να χρησιμοποιήσουμε το slice tool για να επιλέξουμε τα κομματια στα οποία θα χωρίσουμε την εικόνα:

μαθήματα photoshop για τη δημιουργία ιστοσελίδας

7. Όταν κάνουμε "save for web" τότε θα αποθηκευτεί το κάθε κομμάτι σε ξεχωριστό αρχείο εικόνας:

μαθήματα photoshop για τη δημιουργία ιστοσελίδας

Βήματα δημιουργίας button με το photoshop

Στη συνέχεια δείχνουμε με ποιο τρόπο μπορείτε να δημιουργήσετε τα μπατόν που θα τοποθετηθούν στην ιστοσελίδα:

1. Δημιουργούμε Rounded Rectangle με διαστάσεις 300 Χ 75:

μαθήματα photoshop κατασκευή button ιστοσελίδας

2. Προσθέτουμε Bevel & Emboss:

σεμινάρια photoshop κατασκευή button ιστοσελίδας

3. Προσθέτουμε Contour:

μαθήματα photoshop κατασκευή button ιστοσελίδας

4. Προσθέτουμε Gradient Overlay:

σεμινάρια photoshop δημιουργία button ιστοσελίδας

5. Προσθέτουμε Drop Shadow:

μαθήματα photoshop δημιουργία button ιστοσελίδας

6. Και εδώ βλέπουμε το τελικό αποτέλεσμα:

σεμινάρια photoshop σε δημιουργία button ιστοσελίδας

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

Για την κατασκευή ιστοσελίδων υπάρχουν πολλές τεχνολογίες που μπορούν να χρησιμοποιηθούν. Ο πιο οικονομικός τρόπος είναι να δημιουργηθεί μία ιστοσελίδα με τη γλώσσα html. Όμως απαιτείται να έχετε κάποιες βασικές γνώσεις html διότι τόσο η κατασκευή όσο και η ενημέρωση καθώς και η συντήρηση της ιστοσελίδας γίνονται με τη γλώσσα html. Ο πιο εύκολος τρόπος για να δημιουργήσετε μια ιστοσελίδα είναι να χρησιμοποιήσετε το wordpress. Καθεμία από τις τεχνολογίες που χρησιμοποιούνται για την κατασκευή ιστοσελίδων έχει πλεονεκτήματα και μειονεκτήματα. Άλλωστε αν υπήρχε μέθοδος δημιουργίας ιστοσελίδων που να έχει μόνο πλεονεκτήματα τότε όλοι θα χρησιμοποιούσαν αυτή τη μέθοδο. Ο σκοπός και οι απαιτήσεις καθορίζουν τον τρόπο με τον οποίο ενδείκνυται να γίνει η κατασκευή της κάθε ιστοσελίδας.

Κατασκευή ιστοσελίδων με τη γλώσσα html

Όταν ολοκληρωθεί η σχεδιαστής ιστοσελίδας στο photoshop στη συνέχεια θα πρέπει να τη σπάσω είσαι μικρότερος εικόνες οι οποίες θα εμφανιστούν στον υπολογιστή του πελάτη. Σίγουρα θα πρέπει να υπάρχει διαφορετική εικόνα για το header για το footer. Επίσης καλό θα είναι να υπάρχουν διαφορετικές εικόνες για τα button links καθώς και για τα banner. Η γλώσσα html μας επιτρέπει να ενώσουμε μεταξύ τους τις διαφορετικές εικόνες στις οποίες θα διασπαστεί η μεγάλη εικόνα που δημιουργήσαμε με το photoshop. Με τη γλώσσα html μπορούμε να διατηρήσουμε σταθερό το header και το footer και να τοποθετήσουμε διαφορετικό περιεχόμενο στο εσωτερικό κάθε μεμονωμένης σελίδας.

Εάν επιθυμείτε να εμβαθύνετε σε αυτό τον τρόπο κατασκευής ιστοσελίδων τότε μπορείτε να παρακολουθήσετε μαθήματα html.

Πλεονεκτήματα της γλώσσας html

Τα πλεονεκτήματα της κατασκευής ιστοσελίδας με τη γλώσσα html είναι:

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

Προώθηση ιστοσελίδων

Η διαδικασία με την οποία δημιουργούμε τις συνθήκες ώστε ένας ιστότοπος να εμφανίζεται στην πρώτη στις πρώτες θέσεις των μηχανών αναζήτησης ονομάζεται προώθηση ιστοσελίδων ή αλλιώς seo (search engine optimization). Με απλά λόγια η προώθηση ιστοσελίδων περιλαμβάνει τη δημιουργία περιεχομένου συναφώς με τις λέξεις κλειδιά, τη βελτίωση της ταχύτητας της ιστοσελίδας καθώς και τη δημιουργία περιεχόμενο σε άλλους ιστότοπους οι οποίοι αποτελούν τα backlinks. Κάποιες επο τις ενέργειες προώθησης ιστοσελίδων γίνονται στον ίδιο τον ιστότοπο και αφορούν τη βελτιστοποίηση καθεμιάς από τις σελίδες. Κάποιες άλλες ενέργειες προώθησης ιστοσελίδων γίνονται σε τρίτους ιστότοπους. Η ομάδα μας διαθέτει μεγάλη εμπειρία στην προώθηση ιστοσελίδων.

Βελτιστοποίηση ιστοσελίδων

Η κατασκευή ιστοσελίδων με τη γλώσσα html δημιουργεί τις ιδανικές συνθήκες για την βελτιστοποίηση ιστοσελίδων. Ολόκληρος ο κώδικας html που χρησιμοποιήθηκε για την κατασκευή της ιστοσελίδας είναι διαθέσιμος ώστε να εφαρμόσουμε κατά γράμμα όσες τεχνικές βελτιστοποίησης ιστοσελίδων επιθυμούμε. Εάν το επιθυμεί ο ιδιοκτήτης του ιστότοπου τότε έχουμε τη δυνατότητα να κατασκευάσουμε μια ιστοσελίδα στην οποία όλες οι σελίδες θα είναι 100% βελτιστοποιημένες. Εδώ δείχνουμε πως γίνεται η βελτιστοποίηση ιστοσελίδων.

Κατασκευή ιστοσελίδων wordpress

Συνήθως οι ιστοσελίδες κατασκευάζονται με το wordpress. Ουσιαστικά τα τελευταία χρόνια όταν αναφερόμαστε στην κατασκευή ιστοσελίδων τότε ουσιαστικά εννοούμε τη δημιουργία ιστοσελίδας με το wordpress. Παλαιότερα κυρίαρχο content management system για τη δημιουργία ιστοσελίδων ήταν το joomla. Η ευκολία και η ευελιξία που προσφέρει το wordpress του έδωσε τη δυνατότητα να κερδίσει τη συντριπτική πλειοψηφία ίσως ασχολούνται με κατασκευή ιστοσελίδων. Εάν επιλέξετε την πλατφόρμα του wordpress για την κατασκευή της ιστοσελίδας σας τότε πρώτα θα πρέπει να επιλέξετε theme και στη συνέχεια να χρησιμοποιήσετε το Photoshop για να προσαρμόσετε τις εικόνες του θέματος. Συνήθως όμως στα επαγγελματικά θέματα περιλαμβάνονται τα αρχεία psd επομένως η γνώση του photoshop μας επιτρέπει να δημιουργήσουμε μια εντυπωσιακή ιστοσελίδα.

Σύγκριση μεθόδων κατασκευής ιστοσελίδων

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

Κατασκευή ιστοσελίδων με το joomla

Η πλατφόρμα κατασκευής ιστοσελίδων joomla δεν έχει φύγει ακόμα από την αγορά. Πολλές ιστοσελίδες είναι κατασκευασμένες με τη Joomla και απαιτείται να υπάρχει κόσμος που να γνωρίζει την πλατφόρμα ώστε να αναλάβει την ενημέρωση και τη συντήρηση. Όσον αφορά το γραφιστικό κομμάτι η χρήση του photoshop μας δίνει τη δυνατότητα να διαμορφώσουμε τα αρχεία εικόνας όπως επιθυμούμε. Εάν έχετε αγοράσει κάποιο επαγγελματικό θέμα joomla τότε κατά πάσα πιθανότητα σε αυτό περιλαμβάνονται τα αρχεία psd του photoshop. Η κατασκευή ιστοσελίδας με τη joomla δίνει περισσότερες δυνατότητες μορφοποίησης σε σύγκριση με το wordpress. Εάν θέλετε να εμβαθύνετε και να κατανοήσετε πως λειτουργεί η πλατφόρμα τότε μπορείτε να παρακολουθήσετε μαθήματα joomla.

Η χρήση του css

Η ίδια η γλώσσα html δεν διαθέτει πολλές επιλογές μορφοποίησης. Άλλωστε η γλώσσα html δημιουργήθηκε κυρίως για την τοποθέτηση των στοιχείων στην οθόνη και όχι για τη μορφοποίηση αυτών. Η γλώσσα που φτιάχτηκε για μορφοποίηση των ιστοσελίδων είναι η css. Αφού ολοκληρωθεί η σχεδίαση της ιστοσελίδας με το Photoshop στη συνέχεια το css θα μας επιτρέψει να κάνουμε τόσο τη στοίχιση των στοιχείων όσο και τη μορφοποίηση αυτών. Επίσης με το css μπορούμε να ρυθμίσουμε το εφέ και το χρώμα των υπερσυνδέσμων (links). Όλα αυτά διδάσκονται στα μαθήματα css.

Η χρήση της γλώσσας JavaScript

Αφού ολοκληρωθεί η σχεδίαση της ιστοσελίδας στη συνέχεια μπορούμε να χρησιμοποιήσουμε τη γλώσσα JavaScript για να δώσουμε κίνηση. Η γλώσσα JavaScript δίνει τη δυνατότητα ανίχνευσης κάποιον event όπως για παράδειγμα mouseover, mouseout, click, doubleclick και άλλα. Όταν ο χρήστης εκτελέσει κάποιο από αυτά τα event τότε θα εκτελεστεί η εντολή της JavaScript όπως για παράδειγμα το άνοιγμα ενός pop-up window ή η εναλλαγή εικόνων η το animation ενός button. Οι εικόνες που θα εμφανιστούν και θα το εφέ θα πρέπει να έχουν δημιουργηθεί με το Photoshop. Για παράδειγμα μπορούμε να φτιάξουμε την εικόνα ενός button σε απαλό κόκκινο χρώμα. Στη συνέχεια να δημιουργήσουμε την εικόνα ενός δεύτερου button σε έντονο κόκκινο χρώμα. Η δεύτερη εικόνα θα εμφανιστεί όταν ο χρήστης κάνει κλικ η κουνήσει το ποντίκι πάνω από το button. Συνήθως οι πολλές διαφορετικές εικόνες για ένα button έχουν τις ίδιες διαστάσεις και διαφοροποιούνται ελαφρά στο χρώμα ή σε κάποιο άλλο εφέ.

Κατασκευή e-shop

Η κατασκευή e-shop γίνεται πάντα με έτοιμα content management systems. Η πιο δημοφιλής πλατφόρμα για τη δημιουργία e-shop είναι το wordpress. Άλλες δημοφιλείς επιλογές δημιουργίας e-shop περιλαμβάνουν το Opencart και το Magento. Το Opencart ενδείκνυται για ηλεκτρονικά καταστήματα μεσαίου μεγέθους ενώ το Magento μπορεί να ικανοποιήσει οποιεσδήποτε απαιτήσεις σε traffic και όγκο προϊόντων. Στην ιστοσελίδα μας μπορείτε να γνωρίσευε όλους τους τρόπους κατασκευής e-shop: