Home-theater-designers
Ο σχεδιασμός ιστοσελίδων είναι πιο προσιτός από ποτέ, αλλά χρειάζεται ακόμα πολλή δουλειά - και αρκετή ικανότητα - για να επιτύχετε επαγγελματικά αποτελέσματα.
Ευτυχώς, δεν χρειάζεται να ξεκινάτε από το μηδέν κάθε φορά. Υπάρχουν χιλιάδες δωρεάν πρότυπα CSS διαθέσιμα στο διαδίκτυο, όλα αγκαλιάζοντας τις σύγχρονες τάσεις και τεχνολογίες σχεδιασμού. Μπορείτε να τα χρησιμοποιήσετε στην αρχική τους μορφή ή να τα προσαρμόσετε για να τα κάνετε δικά σας.
Σε αυτόν τον οδηγό θα ρίξουμε μια πιο προσεκτική ματιά στα πρότυπα CSS και πού θα τα βρείτε.
Τι είναι ένα πρότυπο CSS;
Ένα πρότυπο CSS δεν περιέχει μόνο CSS: σας δίνει όλα όσα χρειάζεστε για να δημιουργήσετε έναν πλήρως λειτουργικό ιστότοπο. Όταν κάνετε λήψη ενός, θα λάβετε συνήθως έναν φάκελο που περιέχει τα ακόλουθα:
- Αρχεία HTML - Θα λάβετε ένα αρχείο HTML για κάθε σελίδα του ιστότοπου. Θα περιέχει δείγμα κειμένου και εικόνων που θα χρειαστεί να αντικαταστήσετε με το δικό σας περιεχόμενο. Θα πρέπει επίσης να μπορείτε να προσαρμόσετε τα μεταδεδομένα, που σχετίζονται με πράγματα όπως η περιγραφή του ιστότοπου.
- Αρχείο CSS - Συνήθως λαμβάνετε ένα κύριο αρχείο CSS που περιέχει όλο το στυλ για τον ιστότοπο, συν τυχόν πρόσθετα όπως ένα φύλλο στυλ επαναφοράς ή ένα για γραμματοσειρές ιστού.
- Αρχείο Javascript - Εάν ο ιστότοπος περιέχει λειτουργίες Javascript θα πρέπει ιδανικά να συμπεριληφθούν στο δικό τους ξεχωριστό αρχείο, αντί να ενσωματωθούν στα έγγραφα HTML.
- Εικόνες, γραμματοσειρές και εικονίδια - Οποιεσδήποτε εικόνες χρησιμοποιούνται στο πρότυπο πρέπει επίσης να συμπεριληφθούν. Μπορεί να θέλετε να διατηρήσετε πράγματα όπως εικονίδια και φόντο, αλλά θα χρειαστεί να αντικαταστήσετε τις άλλες εικόνες κράτησης θέσης με τις δικές σας. Ενδέχεται επίσης να συμπεριληφθούν ορισμένες προσαρμοσμένες γραμματοσειρές.
Σε αντίθεση με τους περισσότερους άλλους τύπους προτύπων που θα συναντήσετε - είτε πρόκειται για Wordpress, Excel ή Πρότυπα InDesign - Τα πρότυπα CSS απαιτούν ορισμένη τεχνική γνώση.
Δεν υπάρχει φιλική διεπαφή για να τα επεξεργαστείτε, οπότε θα πρέπει να ξέρετε τουλάχιστον πώς να βρείτε τον τρόπο σας γύρω από ένα έγγραφο HTML μόνο για να προσθέσετε το δικό σας περιεχόμενο. Για να κάνετε τις δικές σας προσαρμογές θα χρειαστεί μια αξιοπρεπή γνώση CSS.
μεταφορά του google drive σε άλλο λογαριασμό
Τι να αναζητήσετε σε ένα πρότυπο CSS
Υπάρχουν τόσα πολλά δωρεάν πρότυπα CSS για να διαλέξετε. Λοιπόν, πώς ξέρετε ποιο είναι το κατάλληλο για εσάς; Εδώ είναι μερικά πράγματα που πρέπει να προσέξετε:
- Σχέδιο - Προφανώς, θέλετε έναν ιστότοπο που να φαίνεται όμορφος και να αντικατοπτρίζει όποια εικόνα θέλετε να απεικονίσετε. Αλλά σκεφτείτε επίσης εάν το πρότυπο είναι κατάλληλο για τις ανάγκες σας τόσο τώρα όσο και στο μέλλον. Πολλές είναι για ιστοσελίδες μιας σελίδας. μερικές έχουν σχεδιαστεί για πολλές σελίδες. Εάν χρειάζεστε το τελευταίο, σκεφτείτε αν θα μπορούσατε καλύτερα να χρησιμοποιήσετε ένα CMS όπως το Wordpress.
- Βελτιστοποιημένο για κινητά - Η χρήση ιστού για κινητά είναι πλέον υψηλότερη από την επιφάνεια εργασίας, επομένως είναι απαραίτητο ο ιστότοπός σας να λειτουργεί σωστά σε smartphone. Οποιοδήποτε αξιοπρεπές πρότυπο CSS πρέπει να χρησιμοποιεί αποκριτικό σχεδιασμό, έτσι ώστε ο ιστότοπος να λειτουργεί τέλεια σε οποιαδήποτε οθόνη μεγέθους. Εάν η επιλεγμένη σας δεν το κάνει, μεταβείτε σε αυτήν που κάνει.
- Καλογραμμένο - Κατεβάστε το πρότυπο και ρίξτε μια ματιά στον κώδικα προτού δεσμευτείτε να το χρησιμοποιήσετε. Θα πρέπει να είναι καθαρό, καλά δομημένο και εύκολο στην επεξεργασία. Θα πρέπει επίσης να γνωρίζει SEO, με σωστή χρήση τίτλων και ετικετών επικεφαλίδας.
- Αδεια - Φροντίστε να ελέγξετε την άδεια χρήσης για το πρότυπο CSS που έχετε επιλέξει. Πολλά είναι διαθέσιμα με άδεια Creative Commons , αλλά διαφορετικές εκδόσεις αυτής της άδειας καθορίζουν εάν μπορείτε να επεξεργαστείτε το πρότυπο, εάν μπορείτε να το χρησιμοποιήσετε εμπορικά και εάν πρέπει να πιστώσετε τον αρχικό σχεδιαστή.
- Addons - Ορισμένοι προγραμματιστές προτύπων CSS προσφέρουν τη δουλειά τους σε «freemium». Παίρνετε το πρότυπο δωρεάν, αλλά έχετε την επιλογή να πληρώσετε για επιπλέον προσαρμογές για να το κάνετε μοναδικό στον ιστότοπό σας.
Με όλα αυτά που εξηγούνται, ας ρίξουμε μια ματιά στα καλύτερα μέρη για να βρείτε δωρεάν πρότυπα CSS.
1 Templated.co
Αυτή η εκπληκτική συλλογή με περισσότερα από 800 πρότυπα CSS περιέχει στυλ για κάθε κατηγορία ιστότοπου. Όλα έχουν δημιουργηθεί ειδικά για τον ιστότοπο, οπότε δεν πρέπει να τα βλέπετε να εμφανίζονται οπουδήποτε αλλού.
Όλα τα πρότυπα ανταποκρίνονται και είναι κατασκευασμένα με HTML5. Είναι μικρά και ελαφριά, με επιπλέον δυνατότητες Javascript, όπως ένα βίντεο lightbox ή εφέ κύλισης, που χρησιμοποιούνται μόνο όταν προσθέτουν πραγματική αξία στην εμπειρία.
2 Styleshout.com
Το Styleshout προσφέρει μια μεγάλη γκάμα δωρεάν και premium προτύπων, τα πρώτα που κυκλοφόρησαν υπό την άδεια Creative Commons.
Τα δωρεάν πρότυπα καλύπτουν ένα ευρύ φάσμα κατηγοριών, από πλήρεις ιστότοπους έως σελίδες που έρχονται σύντομα, ακόμη και τη σελίδα σφάλματος 404 που συχνά παραβλέπεται. Μπορείτε να τα προσαρμόσετε μόνοι σας και να τα προσαρμόσετε στο στυλ του υπάρχοντος ιστότοπού σας ή μπορείτε να πληρώσετε για να ζητήσετε από το Styleshout να το κάνει για εσάς.
3 HTML5Up.net
Αυτή η εξαιρετικά κομψή συλλογή προτύπων είναι επίσης εξαιρετικά δημοφιλής. Οι περισσότερες έχουν ληφθεί εκατοντάδες χιλιάδες φορές και είναι εύκολο να καταλάβουμε γιατί.
Όλες οι συνηθισμένες κατηγορίες ιστότοπων καλύπτονται, όπως το ιστολόγιο και η σελίδα προϊόντων, και υπάρχουν μερικά ιδιαίτερα ωραία σχέδια για τους φωτογράφους να επιδεικνύουν τη δουλειά τους. Τα βασικά πρότυπα τύπου πλέγματος είναι εξαιρετικά προσαρμόσιμα, ενώ τα πιο λαμπερά τείνουν να χρησιμοποιούν Javascript αρκετά έντονα, οπότε μπορεί να είναι λιγότερο κατάλληλα για τις προσαρμογές σας.
Τέσσερα. Freebiesbug.com
Αυτό που λείπει από την Freebiesbug σε ποσότητα, αντισταθμίζει περισσότερο την ποιότητα. Ένας ιστότοπος όπου οι νέοι προγραμματιστές επιδεικνύουν τις ικανότητές τους, περιλαμβάνει πολλά high-end, premium σχέδια.
Η εντυπωσιακή συλλογή δωρεάν προτύπων του ιστότοπου είναι ιδανική για εταιρείες, φωτογράφους, προγραμματιστές εφαρμογών και άλλα δημιουργικά. Συσκευασμένα με εφέ Javascript και CSS και κινούμενα σχέδια, μπορείτε να προσαρμόσετε τους ιστότοπους, αν και είναι συχνά τόσο ωραίοι που ίσως δεν θέλετε.
Επιπλέον, το Freebiesbug.com περιλαμβάνει όλα τα είδη δωρεάν πόρων για σχεδιαστές ιστοσελίδων, συμπεριλαμβανομένων γραμματοσειρών, φωτογραφιών αποθέματος, σκίτσων Illustrator και αρχείων PSD και πολλά άλλα.
5 Δωρεάν- CSS.com
Το Free-CSS.com είναι ένας διαδικτυακός τόπος χωρίς προσφορές-κατά τη στιγμή της σύνταξης-περίπου 2503 δωρεάν πρότυπα, καθώς και πολλά premium επίσης, σε περίπτωση που δεν μπορείτε ακόμα να βρείτε αυτό που ψάχνετε.
Με τόσα πολλά να διαλέξετε, μπορεί να είναι λίγο δύσκολο να εγκατασταθείτε στο τέλειο σχέδιο. Η ποιότητα είναι γενικά καλή, αν και η 10ετής ύπαρξη του ιστότοπου σημαίνει ότι εξακολουθεί να φιλοξενεί πρότυπα γραμμένα σε XHTML. Θα θέλετε να τα αποφύγετε. Το άλλο πράγμα είναι να βεβαιωθείτε ότι έχετε ελέγξει την άδεια για το επιλεγμένο πρότυπο. Είναι όλα δωρεάν, αλλά μερικά είναι δημόσιας ιδιοκτησίας, άλλα Creative Commons και άλλα χρησιμοποιούν άδεια για συγκεκριμένο συντάκτη.
6 OS-Templates.com
28 σελίδες δωρεάν προτύπων CSS, που χρησιμοποιούν κυρίως σύγχρονες διατάξεις, βασισμένες σε πλέγμα σε μία σελίδα. Αν είναι απλό αυτό που ψάχνετε, τότε αυτό είναι το μέρος για να κοιτάξετε. Τα σχέδια είναι καθαρά, ελκυστικά και εύκολα προσαρμόσιμα.
Το OS-Templates.com προσφέρει επίσης μια μεγάλη συλλογή «βασικών προτύπων». Αυτά σας δίνουν τη βασική δομή για έναν ιστότοπο σε διάφορα δημοφιλή σχήματα διάταξης (δύο στηλών, τριών στηλών κ.λπ.), ενώ είναι εντελώς άστολοι. Όπως και το προεπιλεγμένο θέμα στο Wordpress, έτσι και ο κενός καμβάς σάς δίνει τη δυνατότητα να μετατρέψετε τον ιστότοπό σας σε οτιδήποτε θέλετε.
7. boag.online [Δεν είναι πλέον διαθέσιμο]
Το Maglev είναι ένα πρότυπο ιστότοπου μιας σελίδας που μπορεί να είναι προεπισκόπηση σε δράση στο boag.online Το
Είναι ένα γρήγορο, καθαρό πρότυπο, ιδανικό για μια σελίδα προϊόντος. Ο μινιμαλιστικός σχεδιασμός αυξάνεται μόνο με μερικά εφέ Jquery για να σας βοηθήσει να μετακινηθείτε μεταξύ των τμημάτων. Η απλή διάταξη λειτουργεί από μόνη της, αλλά αποτελεί επίσης ένα εξαιρετικό σημείο εκκίνησης για τις δικές σας προσαρμογές.
8 Pixel Buddha
Τα πρότυπα του Pixel Buddha δεν περιορίζονται μόνο σε ιστότοπους, περιλαμβάνουν μερικά για ενημερωτικά δελτία ηλεκτρονικού ταχυδρομείου επίσης.
Είτε έτσι είτε αλλιώς, είναι όλα σχεδιασμένα με HTML5 και CSS3 και ανταποκρίνονται, οπότε φαίνονται υπέροχα σε οποιαδήποτε συσκευή. Τα κυριότερα σημεία περιλαμβάνουν το Howdy HTML, ένα όμορφο πρότυπο χαρτοφυλακίου/βιογραφικού και το SOHO HTML, μια εκπληκτική σελίδα ηλεκτρονικού εμπορίου που περιλαμβάνει τα πηγαία αρχεία PSD πάνω από το HTML και το CSS.
google play store στο kindle fire
9 Templatemo.com
Σχεδόν 500 δωρεάν πρότυπα είναι διαθέσιμα από το Templatemo. Μερικά από τα καλύτερα είναι αυτά που ξεφεύγουν από το σύστημα πλέγματος τύπου Bootstrap για να δοκιμάσουν κάτι διαφορετικό.
Τα περισσότερα από τα πρότυπα είναι απλά και απεριόριστα, αν και χαρακτηριστικά όπως lightboxes και καρουζέλ περιεχομένου περιλαμβάνονται όπου χρειάζονται. Μας αρέσει επίσης το γεγονός ότι αρκετά από τα πρότυπα έχουν ρυθμιστεί ώστε να λειτουργούν με έως και έξι σελίδες από προεπιλογή. Αυτό διευκολύνει εάν το περιεχόμενό σας δεν ταιριάζει με την ολοένα και συνηθέστερη διάταξη μιας σελίδας.
10 Startbootstrap.com
Το Bootstrap είναι ένα απίστευτα δημοφιλές πλαίσιο front-end που σας επιτρέπει να δημιουργήσετε ιστότοπους υψηλής ποιότητας σε ελάχιστο χρόνο. Ωστόσο, χρειάζεται λίγος χρόνος για να το μάθετε, όπου εμφανίζεται το Start Bootstrap.
Αυτή η συλλογή δωρεάν προτύπων ανοιχτού κώδικα είναι όλα κατασκευασμένα χρησιμοποιώντας το σύστημα πλέγματος του Bootstrap. Υπάρχουν περισσότερα από 30 για να διαλέξετε. Ορισμένα είναι πλήρως σχεδιασμένα και προορίζονται για εφαρμογές, ιστολόγια και σελίδες προορισμού, ενώ άλλα είναι κενές διατάξεις που σας περιμένουν για να διαμορφώσετε.
έντεκα. Bootswatch.com
Τέλος, κάτι λίγο πιο πρακτικό. Το Bootswatch προσφέρει 16 θέματα ανοιχτού κώδικα σε ιστότοπους στυλ που έχουν δημιουργηθεί χρησιμοποιώντας το Bootstrap.
Μπορείτε είτε να δημιουργήσετε τη διάταξη του ιστότοπού σας μόνοι σας χρησιμοποιώντας το Bootstrap είτε να κατεβάσετε ένα από τα κενά πρότυπα από το Start Bootstrap. Αυτό που κάνει το Bootswatch είναι να αλλάζει τις γραμματοσειρές, τα χρώματα φόντου και το στυλ για κουμπιά, μενού και άλλα στοιχεία. Δίνει στον ιστότοπό σας μια μοναδική εμφάνιση, παραμένοντας πιστός στο εξαιρετικά καθαρό ήθος της Bootstrap.
Είναι εύκολο να συγκεντρώσετε έναν βασικό ιστότοπο με το Bootstrap και το Bootswatch του δίνει άμεσο γυάλισμα.
Πώς να χρησιμοποιήσετε πρότυπα CSS
Σε γενικές γραμμές, υπάρχουν δύο τρόποι χρήσης προτύπων. Είτε τα χρησιμοποιείτε ως έχουν είτε τα χρησιμοποιείτε ως βάση για το δικό σας σχέδιο.
Ο κίνδυνος κατά τη χρήση προτύπων είναι ότι καταλήγετε σε έναν ιστότοπο που είναι πανομοιότυπος με αυτόν κάποιου άλλου. Επιλέξτε ένα δημοφιλές πρότυπο και μπορεί να υπάρχουν κυριολεκτικά δεκάδες χιλιάδες ίδιοι ιστότοποι. Αυτό είναι το κύριο επιχείρημα υπέρ της προσαρμογής τους.
πώς να καταλάβω τι μητρική έχω τα windows 10
Τα πρότυπα CSS είναι μια εξαιρετική συντόμευση για έμπειρους σχεδιαστές ιστοσελίδων που έχουν στο μυαλό τους μια βασική διάταξη και θέλουν να προχωρήσουν κατευθείαν στη διαμόρφωσή της.
Είναι επίσης τέλεια για οποιονδήποτε νέο στο σχεδιασμό ιστοσελίδων. Εάν γνωρίζετε τον τρόπο με τον οποίο ασχολείστε με το HTML και το CSS, αλλά δεν έχετε ακόμα την εμπιστοσύνη ή τη γνώση για να δημιουργήσετε έναν ιστότοπο από την αρχή, τότε ένα πρότυπο CSS χρησιμεύει τόσο ως ένας εύκολος τρόπος για να αποκτήσετε έναν υπέροχο ιστότοπο όσο και ως φοβερό εργαλείο εκμάθησης.
Μπορείτε να το αντιμετωπίσετε ως έργο σε εξέλιξη. Ξεκινήστε από αλλάζοντας τις γραμματοσειρές και αλλάζοντας το χρωματικό σχέδιο , και με την πάροδο του χρόνου μπορείτε να επανασχεδιάσετε υπάρχοντα στοιχεία, να προσθέσετε νέα κ.ο.κ. Δεν υπάρχει καλύτερος τρόπος για να μάθετε τίποτα από μια πρακτική, πρακτική εμπειρία.
Χρησιμοποιείτε πρότυπα CSS κατά τη δημιουργία ιστότοπων; Ποια είναι τα αγαπημένα σας μέρη για να τα βρείτε; Μοιραστείτε τις εμπειρίες και τις συμβουλές σας μαζί μας στα σχόλια.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να καθαρίσετε τον υπολογιστή σας με Windows χρησιμοποιώντας τη γραμμή εντολώνΕάν ο υπολογιστής σας με Windows έχει χαμηλό χώρο αποθήκευσης, καθαρίστε τα σκουπίδια χρησιμοποιώντας αυτά τα γρήγορα βοηθητικά προγράμματα γραμμής εντολών.
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- Σχεδιασμός Ιστού
- CSS
Ο Andy είναι πρώην έντυπος δημοσιογράφος και συντάκτης περιοδικού που γράφει για την τεχνολογία εδώ και 15 χρόνια. Εκείνη την περίοδο συνέβαλε σε αμέτρητες δημοσιεύσεις και παρήγαγε έργα συγγραφής κειμένων για μεγάλες εταιρείες τεχνολογίας. Έχει επίσης παράσχει σχόλια ειδικών για τα ΜΜΕ και φιλοξένησε πάνελ σε εκδηλώσεις του κλάδου.
Περισσότερα από τον Andy BettsΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή