Σεμινάριο Dreamweaver


Tutorial Dreamweaver που δημιουργεί έναν ιστότοποΌπως γνωρίζετε, αυτός ο ιστότοπος αφορά τον τρόπο δημιουργίας ενός ιστότοπου. Μπορείτε να μάθετε διαφορετικούς τρόπους χρησιμοποιώντας είτε WordPress, Joomla είτε Drupal. Έχουμε ακόμη έναν οδηγό για τη χρήση καθαρής HTML όπως στις παλιές μέρες (προφανώς με το HTML5, την τελευταία έκδοση). Σε αυτό το σεμινάριο Dreamweaver για αρχάριους, θα μάθετε ένα άλλο.


Για όσους δεν το γνωρίζουν, το Dreamweaver είναι μια εφαρμογή που σας επιτρέπει να σχεδιάζετε, να κωδικοποιείτε και να διαχειρίζεστε ιστότοπους. Αυτό που είναι ενδιαφέρον για το Dreamweaver είναι ότι προσφέρει τόσο τη δυνατότητα να γράψετε κώδικα όσο και να δημιουργήσετε έναν ιστότοπο χρησιμοποιώντας μια οπτική διεπαφή.

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

Αυτή θα είναι μια μεγάλη διαδρομή. Ωστόσο, θα εκπλαγείτε με το πόσο γρήγορα θα μπείτε σε αυτό το πολύ διαισθητικό πρόγραμμα.

Contents

Τι είναι το Dreamweaver και τι μπορεί να κάνει?

Στην επιφάνεια, το Dreamweaver είναι ένα IDE (Ολοκληρωμένο Περιβάλλον Ανάπτυξης). Αυτό σημαίνει ότι είναι ένα λογισμικό που συνδυάζει διαφορετικά εργαλεία για να διευκολύνει τον σχεδιασμό και την ανάπτυξη ιστοσελίδων.

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

Δημιουργία ιστότοπων μέσω μιας διεπαφής οπτικού σχεδιασμού

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

Αυτό είναι πολύ χρήσιμο επειδή σας επιτρέπει να δημιουργήσετε γρήγορα το σκελετό μιας ιστοσελίδας και χωρίς να χρειάζεται να γράψετε μια μόνο γραμμή κώδικα. Αντ ‘αυτού, το Dreamweaver θα δημιουργήσει αυτόματα τον απαραίτητο κώδικα για εσάς. Με αυτόν τον τρόπο, θεωρητικά, μπορείτε να δημιουργήσετε έναν ολόκληρο ιστότοπο με το χέρι και να τον ανεβάσετε στον διακομιστή σας.

Από την άλλη πλευρά, εάν είστε σε θέση να κωδικοποιήσετε, το Dreamweaver διαθέτει όλα τα απαραίτητα εργαλεία για αυτό.

Λειτουργεί ως πλήρης επεξεργαστής κώδικα

Το δεύτερο μέρος του Dreamweaver είναι ένας πλήρης επεξεργαστής κώδικα. Έρχεται εξοπλισμένο με όλες τις τυπικές λειτουργίες, όπως:

  • Επισήμανση σύνταξης – Αυτό σημαίνει ότι το Dreamweaver επισημαίνει διαφορετικά στοιχεία (όπως τελεστές, μεταβλητές κ.λπ.) σε διαφορετικά χρώματα, ώστε να διευκολύνει την ανάγνωση και τη διόρθωση του κώδικα.
  • Συμπλήρωση κώδικα – Η ολοκλήρωση κώδικα λειτουργεί με τον ίδιο τρόπο όπως η αυτόματη συμπλήρωση στο τηλέφωνό σας. Ξεκινήστε να πληκτρολογείτε και ο συντάκτης θα κάνει προτάσεις για αυτό που προσπαθείτε να γράψετε. Με αυτόν τον τρόπο, δεν χρειάζεται να πληκτρολογείτε τα πάντα εντελώς.
  • Σύμπτυξη κώδικα – Η σύμπτυξη κώδικα είναι ένα άλλο χαρακτηριστικό για την ευκολότερη ανάγνωση του κώδικα. Σας επιτρέπει να συρρικνώσετε οπτικά τμήματα του κώδικα όταν δεν τα χρειάζεστε. Με αυτόν τον τρόπο, δεν χρειάζεται να μετακινηθείτε σε ολόκληρο το αρχείο, αλλά μπορείτε να χειριστείτε μόνο τα μέρη που πρέπει να επεξεργαστείτε.

Το Dreamweaver υποστηρίζει τις πιο σημαντικές γλώσσες για το σχεδιασμό ιστοσελίδων (HTML5, CSS, JavaScript, PHP) και πολλά άλλα.

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

Υπάρχουν πολύ περισσότερες δυνατότητες και θα δείτε πολλές από αυτές σε δράση στο επερχόμενο σεμινάριο Dreamweaver για αρχάριους.

Διαδικασία Dreamweaver Setup και Website Design (Βήμα προς βήμα)

Ως πρώτο βήμα, πρέπει να αποκτήσετε το Dreamweaver από τον επίσημο ιστότοπο της Adobe.

Μπορείτε να λάβετε μια δωρεάν δοκιμή εδώ ή από τον πελάτη Creative Cloud.

σεμινάριο dreamweaver για τιμές για αρχάριους

Βήμα 1. Λήψη και εγκατάσταση

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

Εάν χρησιμοποιείτε ήδη το Creative Cloud (όπως είμαστε), μπορείτε απλά να κάνετε κλικ Προσπαθήστε μέσα στον πελάτη. Στη συνέχεια, όταν ολοκληρωθεί η εγκατάσταση του προγράμματος, κάντε κλικ στο Ξεκινήστε τη δοκιμή.

Βήμα 2. Πρώτη εκκίνηση

Όταν ξεκινάτε για πρώτη φορά το Dreamweaver, θα δείτε αυτήν την οθόνη.

dreamweaver πρώτη εκκίνηση

Εάν δεν έχετε χρησιμοποιήσει ποτέ το πρόγραμμα στο παρελθόν, επιλέξτε Όχι, είμαι νέος. Όταν το κάνετε, το Dreamweaver σας καθοδηγεί σε έναν οδηγό εγκατάστασης. Το πρώτο βήμα είναι να επιλέξετε αν θα χρησιμοποιήσετε τον χώρο εργασίας για προγραμματιστές ή έναν τυπικό χώρο εργασίας.

Ο οδηγός ενσωμάτωσης του dreamweaver επιλέγει χώρο εργασίας

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

Ο οδηγός ενσωμάτωσης του dreamweaver επιλέγει συνδυασμό χρωμάτων

Το τελευταίο βήμα είναι να επιλέξετε εάν θα ξεκινήσετε με ένα δείγμα αρχείου, νέο ή υπάρχον έργο ή θα παρακολουθήσετε ένα σεμινάριο.

τελευταίο βήμα οδηγός επιβίβασης dreamweaver

Επιλέξτε να ξεκινήσετε με έναν νέο ή υπάρχοντα φάκελο και τελειώσατε με τη διαδικασία εγκατάστασης. Καλή δουλειά!

Ας ξεκινήσουμε τώρα ένα έργο και μάθετε πώς να δημιουργήσετε έναν ιστότοπο με το Dreamweaver.

Βήμα 3. Ξεκινήστε έναν νέο ιστότοπο

Το πρώτο βήμα είναι να δημιουργήσετε έναν νέο ιστότοπο. Για αυτό, πηγαίνετε στο Ιστότοπος> Νέος ιστότοπος. Θα σας οδηγήσει σε αυτήν την οθόνη:

δημιουργήστε έναν νέο ιστότοπο στο dreamweaver

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

Έχετε επίσης τη δυνατότητα να συσχετίσετε το νέο σας έργο με ένα αποθετήριο Git. Αυτό μπορεί να είναι μια καλή ιδέα αφού σας δίνει έλεγχος έκδοσης αλλά μπορείτε να το παραλείψετε για τώρα.

Θα αντιμετωπίσουμε τα πάντα Διακομιστές στην αριστερή πλευρά αργότερα. Το ίδιο με Προεπεξεργαστές CSS, το οποίο είναι σημαντικό μόνο όταν χρησιμοποιείτε αυτό το πράγμα.

Αυτό που είναι σημαντικό για εμάς είναι Τοπικές πληροφορίες υπό Προηγμένες ρυθμίσεις.

ενεργοποίηση προεπιλεγμένου φακέλου εικόνων στο dreamweaver

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

Αυτό είναι τώρα, κάντε κλικ Σώσει για να επιστρέψετε στο χώρο εργασίας σας.

Βήμα 4. Δημιουργήστε το αρχείο της αρχικής σας σελίδας

Τώρα που έχετε δημιουργήσει έναν ιστότοπο έργου, ήρθε η ώρα για το πρώτο αρχείο. Θα ξεκινήσουμε με την αρχική σελίδα.

Εάν το Dreamweaver δεν σας προσφέρει την ίδια την επιλογή, μεταβείτε στη διεύθυνση Αρχείο> Νέος. Μπορείτε είτε να δημιουργήσετε ένα εντελώς νέο αρχείο είτε να χρησιμοποιήσετε ένα υπάρχον πρότυπο. Το πρόγραμμα συνοδεύεται από μερικά από αυτά (βλ Πρότυπα εκκίνησης). Αυτήν τη στιγμή, θα δημιουργήσουμε ένα νέο.

δημιουργήστε ένα νέο αρχείο στο dreamweaver

Το HTML ορίζεται από προεπιλογή και μπορείτε να το αφήσετε ως έχει. Για τίτλο εγγράφου, εισαγάγετε index.html και επιλέξτε Δημιουργώ. Αυτό θα σας φέρει στην ακόλουθη οθόνη.

νέο έργο στο dreamweaver

Αυτό είναι το καπέλο που αναφέραμε στην αρχή: μια ζωντανή προβολή του πώς φαίνεται ο ιστότοπός σας (κενό, αυτή τη στιγμή) και ο κωδικός πίσω από αυτόν. Θα παρατηρήσετε επίσης ότι το Dreamweaver δημιούργησε αυτόματα κάποια βασική σήμανση HTML που μπορείτε να δημιουργήσετε. Ας το κάνουμε τώρα, εμείς?

Βήμα 5. Δημιουργήστε μια κεφαλίδα

Για να εισαγάγετε ένα στοιχείο στη σελίδα, πρέπει πρώτα να επιλέξετε τη θέση του. Κάντε κλικ στην κενή σελίδα (το Dreamweaver θα επιλέξει αυτόματα το στοιχείο εάν το κάνετε) ή τοποθετήστε τον κέρσορα στο ίδιο στοιχείο στο τμήμα κώδικα της οθόνης.

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

εισαγάγετε το στοιχείο κεφαλίδας στο dreamweaver

Ένα απλό κλικ το εισάγει στη σελίδα. Βλέπετε επίσης ότι εμφανίζεται μέσα στο έγγραφο HTML.

κεφαλίδα ορατή σε οπτική διεπαφή και πρόγραμμα επεξεργασίας κώδικα

Απλό, σωστό?

Τώρα θα αλλάξετε το κείμενο μέσα στην κεφαλίδα και θα το μετατρέψετε σε επικεφαλίδα. Και για τα δύο – πρώτα επισημάνετε το κείμενο στο πρόγραμμα επεξεργασίας κώδικα στο κάτω μέρος.

επισημάνετε κείμενο κεφαλίδας στο dreamweaver

Μετά από αυτό, επιστρέψτε στο Εισάγετε, κάντε κλικ στο βέλος δίπλα Επικεφαλίδα και επιλέξτε Η1. Αυτό τυλίγει τον τίτλο της σελίδας σε μια ετικέτα H1 HTML. Για περισσότερες πληροφορίες σχετικά με τις ετικέτες τίτλου, διαβάστε αυτό το άρθρο.

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

άλλαξε κεφαλίδα στο dreamweaver

Εντάξει, μόλις δημιουργήσατε μια κεφαλίδα σελίδας! Προς το παρόν εξακολουθεί να φαίνεται λίγο ακατέργαστο, οπότε ας το αλλάξουμε μέσω CSS στη συνέχεια.

Βήμα 6. Δημιουργήστε ένα αρχείο CSS

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

Θεωρητικά, μπορείτε να προσθέσετε CSS μέσα στο έγγραφο HTML. Υπάρχει πολύ λιγότερο κομψή επιλογή από αυτό που θα κάνουμε, το οποίο δημιουργεί ένα ειδικό αρχείο για όλο το στυλ CSS ολόκληρου του ιστότοπου.

Το πρώτο βήμα είναι να δώσετε στη νέα κεφαλίδα μια κλάση CSS ή ένα αναγνωριστικό. Κατά τη διάρκεια αυτής της διαδικασίας, το Dreamweaver θα σας ζητήσει επίσης να δημιουργήσετε ένα αρχείο φύλλου στυλ. Μεταβείτε στο μενού DOM στο κάτω δεξί μέρος της οθόνης που παραθέτει ολόκληρη τη δομή του ιστότοπού σας. Βεβαιωθείτε ότι έχετε επιλέξει την κεφαλίδα σας.

Στη ζωντανή προβολή, θα το βλέπετε τώρα με μπλε χρώμα με μια μικρή ετικέτα και ένα σύμβολο συν στο κάτω μέρος.

προσθήκη αρχείου css στο dreamweaver

Κάντε κλικ στο σύμβολο συν και πληκτρολογήστε #επί κεφαλής στο πεδίο που ανοίγει. Το hashtag σημαίνει ότι εκχωρείτε ένα id σε αντίθεση με μια τάξη. Πατήστε Enter. Στο μενού ανοίγματος, αντί για Ορίστε στη σελίδα επιλέγω Δημιουργήστε ένα νέο αρχείο CSS. Στο αναδυόμενο παράθυρο, επιλέξτε Ξεφυλλίζω και μεταβείτε στο φάκελο του ιστότοπού σας. Στη συνέχεια, πληκτρολογήστε style.css (που είναι το τυπικό όνομα για φύλλα στυλ) στο Ονομα αρχείου πεδίο και χτύπησε Σώσει.

δημιουργήστε φύλλο στυλ στο dreamweaver

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

προσθήκη φύλλου στυλ στον ιστότοπο

Φοβερό ποσούμ! Τώρα είστε έτοιμοι να αλλάξετε το στυλ της σελίδας σας.

Βήμα 7. Δημιουργήστε έναν επιλογέα CSS για τον τίτλο της σελίδας

Το πρώτο πράγμα που θέλετε να κάνετε είναι να αλλάξετε τη γραμματοσειρά της επικεφαλίδας σας και επίσης να την κεντράρετε. Για αυτό, πρέπει πρώτα να δημιουργήσετε έναν νέο επιλογέα CSS. Ένας επιλογέας είναι το όνομα ενός στοιχείου στη σελίδα μας στο οποίο μπορείτε να εκχωρήσετε ιδιότητες, π.χ. χρώμα, μέγεθος και άλλα.

Σημειώστε την επικεφαλίδα H1 στην προβολή DOM κάτω δεξιά (όπως κάνατε με την κεφαλίδα πριν). Στη συνέχεια, πάνω από αυτό, επιλέξτε Σχεδιαστής CSS.

προετοιμασία στυλ για στοιχείο κεφαλίδας

Για να δημιουργήσετε έναν επιλογέα CSS, κάντε κλικ στη γραμμή όπου λέει Sεκλογείς και μετά κάντε κλικ στο σύμβολο συν. Αυτό θα πρέπει αυτόματα να προτείνει έναν επιλογέα στο όνομά σας # επικεφαλής h1.

δημιουργήστε τον επιλογέα css στο dreamweaver

Πατήστε enter για να το δημιουργήσετε. Ολοκληρώθηκε!

Γρήγορη σημείωση: για όλους εκείνους που είναι νέοι στο CSS, αυτός ο επιλογέας σημαίνει ότι στοχεύετε το στοιχείο που ονομάζεται η1 μέσα το στοιχείο που ονομάζεται #επί κεφαλής. Με αυτόν τον τρόπο, ό, τι εισαγάγετε ως CSS εφαρμόζεται μόνο στο γραπτό κείμενο και όχι στο στοιχείο κεφαλίδας συνολικά.

Βήμα 8. Αλλάξτε τη Γραμματοσειρά επικεφαλίδας

Τώρα που έχετε έναν επιλογέα, μπορείτε να εκχωρήσετε ιδιότητες σε αυτόν. Αν γνωρίζετε το CSS, μπορείτε απλά να πληκτρολογήσετε σήμανση style.css και το πρόγραμμα θα το φροντίσει αυτόματα.

Για τους λιγότερο έμπειρους χρήστες, το Dreamweaver το καθιστά επίσης πολύ εύκολο. Μείνετε στο Σχεδιαστής CSS μενού και καταργήστε την επιλογή του πλαισίου όπου αναφέρεται Εμφάνιση σετ. Όταν το κάνετε, θα ξεκλειδώσετε πολλές επιπλέον επιλογές.

ενεργοποιήστε τις επιλογές css στο dreamweaver

Με τα νέα κουμπιά, μπορείτε να επιλέξετε πολλές ιδιότητες CSS από τις περιοχές διάταξης, κειμένου, περιγράμματος και φόντου. ο Περισσότερο Το κουμπί σας δίνει επιλογές για την εισαγωγή των δικών σας κανόνων.

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

αλλαγή οικογένειας γραμματοσειρών στο dreamweaver

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

γραμματοσειρές web adobe edge

Εδώ, μπορείτε να επιλέξετε δωρεάν γραμματοσειρές από το Adobe Υπηρεσία Edge Web Fonts. Αναζητήστε μια γραμματοσειρά με το όνομα ή χρησιμοποιήστε τις πολλές επιλογές φίλτρου στα αριστερά για να περιορίσετε τις επιλογές σας μέχρι να βρείτε κάτι.

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

δημιουργήστε προσαρμοσμένες στοίβες γραμματοσειρών στο dreamweaver

Προς το παρόν, απλώς πατήστε Ολοκληρώθηκε και μετά κάντε κλικ στο προεπιλεγμένες γραμματοσειρές πάλι. Αυτή τη φορά επιλέξτε την προσαρμοσμένη γραμματοσειρά που έχετε επιλέξει και voilá – η αλλαγή έχει γίνει, συμπεριλαμβανομένων όλων των απαραίτητων κωδικοποιήσεων.

άλλαξε γραμματοσειρά στο dreamweaver

Εάν κάνετε κλικ στο style.css αρχείο στην κορυφή, θα δείτε ότι έχει προστεθεί και όλη η σήμανση.

ενημερωμένο φύλλο στυλ στο dreamweaver

Βήμα 9. Κεντράρετε τον τίτλο και αλλάξτε το μέγεθός του

Το κείμενο θα μπορούσε να φαίνεται ακόμα καλύτερο. Η επόμενη εργασία είναι να το κεντράρετε και να αυξήσετε το μέγεθος της γραμματοσειράς. Για αυτό, μπορείτε επίσης να χρησιμοποιήσετε μια άλλη δυνατότητα που ονομάζεται Γρήγορη επεξεργασία.

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

υποστήριγμα.

ανοίξτε το μενού γρήγορης επεξεργασίας στο dreamweaver

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

μέγεθος γραμματοσειράς: 42px;
text-align: center;

Κατά την πληκτρολόγηση, το Dreamweaver θα υποβάλει επίσης προτάσεις για αυτό που προσπαθείτε να εισαγάγετε, καθιστώντας το ακόμα πιο εύκολο. Αυτή είναι η δυνατότητα ολοκλήρωσης κώδικα που αναφέρθηκε προηγουμένως.

Όταν τελειώσετε, θα μοιάζει με αυτό:

αλλάξτε css μέσω γρήγορης επεξεργασίας στο dreamweaver

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

Πολύ ωραίο, σωστά?

Παρεμπιπτόντως, εάν δεν είστε σίγουροι για το τι σημαίνει μια ιδιότητα CSS, απλώς κάντε δεξί κλικ και επιλέξτε Γρήγορα έγγραφα (ή πατήστε Ctrl + Κ). Το Dreamweaver θα σας δώσει μια εξήγηση.

γρήγορα έγγραφα του dreamweaver

Βήμα 10. Προσθέστε περισσότερο περιεχόμενο

Με όσα έχετε μάθει μέχρι τώρα, μπορείτε πλέον να δημιουργήσετε έναν στοιχειώδη ιστότοπο. Για χάρη αυτού του σεμιναρίου Dreamweaver, κάναμε τα εξής:

  • Καθορισμένες προεπιλεγμένες γραμματοσειρές για επικεφαλίδες και παραγράφους
  • Προστέθηκε μια γραμμή πλοήγησης και δημιούργησε έναν σύνδεσμο προς την αρχική σελίδα σε αυτήν
  • Προστέθηκε ένα πλαίσιο div για περιεχόμενο με δύο ακόμη κουτιά μέσα
  • Μετακινήθηκε ένας από αυτούς αριστερά και ένας δεξιά με το φλοτέρ ιδιοκτησία
  • Περιορίστηκε το πλάτος τους σε ποσοστά ώστε να μπορούν να ευθυγραμμιστούν οριζόντια
  • Προστέθηκε ένα δείγμα επικεφαλίδας και εικονικού κειμένου στα αριστερά, συμπεριλαμβανομένης μιας μη ταξινομημένης λίστας
  • Δημιουργήθηκε μια φόρμα (χρησιμοποιήστε το αναπτυσσόμενο μενού κάτω Εισάγετε), δύο πεδία κειμένου και ένα κουμπί υποβολής
  • Προστέθηκε απόσταση γύρω από τα στοιχεία μέσω περιθωρίων CSS και padding
  • Παρέχονται χρώματα και περιγράμματα φόντου
  • Δημιουργήθηκε ένα υποσέλιδο και ένα μήνυμα πνευματικών δικαιωμάτων

Εδώ είναι το αποτέλεσμα:

ιστοσελίδα με προηγμένο σχεδιασμό

Κωδικός για το Παράδειγμα:

Επειδή αυτό είναι λίγο προηγμένο και δεν θα ξέρουν όλοι πώς να το κάνουν, μπορείτε να βρείτε το HTML και το CSS παρακάτω, ώστε να μπορείτε να το ανακατασκευάσετε μόνοι σας. Πρώτα το HTML:





index.html

 



Σπίτι

Δείγμα επικεφαλίδας για κύριο περιεχόμενο

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. Σε αδιέξοδο auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut komodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis honissim enim.
  • Quisque molestie suscipit odio vel Facisis

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, fasilisis nisl.

Δείγμα παρότρυνσης για δράση!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

Πνευματικά δικαιώματα © 2017 Ο φανταστικός ιστότοπός μου

Και μετά το CSS:

@charset "utf-8";

σώμα {
χρώμα φόντου: # F5F5F5;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

Π,
ένα,
Ουλ,
ολ,
λι,
επιγραφή,
εισαγωγή{
font-family: muli, sans-serif;
στυλ γραμματοσειράς: κανονικό;
βάρος γραμματοσειράς: 300;
μέγεθος γραμματοσειράς: 17px;
}

h1, h2, h3, h4, h5 {
font-family: karla, sans-serif;
στυλ γραμματοσειράς: κανονικό;
βάρος γραμματοσειράς: 400;
text-transform: κεφαλαία;
}

# επικεφαλής {
επένδυση: 25px;
κάτω μέρος: 25px;
χρώμα φόντου: #FFFFFF;
περίγραμμα-κάτω: στερεό 4px # EB232F;
}

#header h1 {
font-family: aguafina-script;
στυλ γραμματοσειράς: κανονικό;
βάρος γραμματοσειράς: 400;
μέγεθος γραμματοσειράς: 42px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
text-transform: κανένα;
}

# πλοήγηση {
margin-right: auto;
margin-left: auto;
μέγιστο πλάτος: 1140 εικονοστοιχεία;
margin-top: 10 εικονοστοιχεία;
margin-bottom: 10px;
}

# πλοήγηση α {
χρώμα: # EB232F;
}

.κύρια {
οθόνη: μπλοκ;
margin-top: 15 εικονοστοιχεία;
margin-right: auto;
margin-left: auto;
margin-bottom: 15px;
σαφές: και τα δύο?
υπερχείλιση: αυτόματη;
μέγιστο πλάτος: 1140 εικονοστοιχεία;
}

.main # main-right {
επιπλέουν: δεξιά;
πλάτος: 37,5%;
οθόνη: μπλοκ;
}

.main # main-αριστερά {
float: αριστερά
πλάτος: 57%;
οθόνη: μπλοκ;
επένδυση δεξιά: 20 εικονοστοιχεία;
}

.main # main-right .cta {
text-align: center;
}

.main # main-right .form {
πλάτος: 92%;
margin-right: auto;
margin-left: auto;
}

# main-right .form div {
margin-bottom: 10px;
}

# main-right .form .label {

}

# main-right .form .textfield {
πλάτος: 100%;

}

.main # main-right # κουμπί {
text-align: center;
επένδυση: 7px;
επένδυση-κάτω: 7px;
margin-left: auto;
margin-right: auto;
θέση: σχετική
οθόνη: μπλοκ;
επένδυση-δεξιά: 36px;
επένδυση-αριστερά: 36 εικονοστοιχεία;
περίγραμμα: κανένα;
χρώμα φόντου: # EB232F;
χρώμα: #FFFFFF;
δρομέας: δείκτης;
}

.υποσέλιδο {
οθόνη: μπλοκ;
επένδυση: 25px;
κάτω μέρος: 25px;
text-align: center;
}

Θέλουμε να το χρησιμοποιήσουμε ως παράδειγμα για να σας δείξουμε τα επόμενα βήματα. Ακόμα κι αν φαίνεται περίπλοκο, το βάζουμε μαζί με τον ίδιο τρόπο που σας δείξαμε πριν.

Βήμα 11. Προεπισκόπηση στο πρόγραμμα περιήγησης και σε κινητή συσκευή

Πώς τα κάναμε όλα αυτά; Λοιπόν, πρώτα απ ‘όλα, είμαστε λίγο πιο έμπειροι στη δημιουργία ιστότοπων από ό, τι μάλλον. Επομένως, έχουμε ήδη τα βήματα στο μυαλό μου σχετικά με τον τρόπο δημιουργίας μιας κατάλληλης ιστοσελίδας.

Δεύτερον, χρησιμοποιούμε μια πολύ χρήσιμη λειτουργία που με βοηθά να επιταχύνω τη διαδικασία: Προεπισκόπηση προγράμματος περιήγησης. Το Dreamweaver σάς επιτρέπει να προβάλλετε τις ιστοσελίδες σας σε πραγματικό χρόνο σε ένα πρόγραμμα περιήγησης και ακόμη και σε κινητές συσκευές.

Για να ξεκινήσετε, κάντε κλικ στο κουμπί προεπισκόπησης σε πραγματικό χρόνο στην κάτω δεξιά γωνία.

ενεργοποιήστε το μενού προεπισκόπησης στο dreamweaver

Αυτό θα ανοίξει τις επιλογές προεπισκόπησης.

επιλογές προεπισκόπησης σε πραγματικό χρόνο στο dreamweaver

Ένα κλικ σε ένα από τα ονόματα του προγράμματος περιήγησης θα ανοίξει το έργο του ιστότοπού σας σε αυτό. Μπορείτε επίσης να σαρώσετε τον κωδικό QR με το τηλέφωνο ή το tablet σας (για παράδειγμα με Κβαντικό Firefox) ή πληκτρολογήστε την εμφανιζόμενη διεύθυνση στο πρόγραμμα περιήγησής σας για να ξεκινήσετε τη ζωντανή προεπισκόπηση στη συσκευή σας.

Απλώς να γνωρίζετε, ότι πρέπει να εισαγάγετε το Adobe ID και τον κωδικό πρόσβασής σας για αυτό. Θα πρέπει να έχετε αυτό από την εγγραφή σας στο Dreamweaver.

Το καλύτερο κομμάτι: Τυχόν αλλαγές που κάνετε στο Dreamweaver θα εμφανίζονται αυτόματα στο πρόγραμμα περιήγησης την ίδια στιγμή που τις κάνετε.

Πώς με βοήθησε να δημιουργήσω τον ιστότοπο πιο γρήγορα; Πρώτα απ ‘όλα, ανάλογα με το μέγεθος της οθόνης σας, η οθόνη στο πρόγραμμα περιήγησης μπορεί να είναι πιο κοντά στο πρωτότυπο από αυτό που βλέπετε στο Dreamweaver.

Δεύτερον, ο έλεγχος του ιστότοπου στο πρόγραμμα περιήγησης μου επιτρέπει να χρησιμοποιώ τα εργαλεία προγραμματιστή για τον έλεγχο των αλλαγών.

εργαλεία προγραμματιστή στο πρόγραμμα περιήγησης

Είναι πολύ παρόμοια με αυτά που βλέπετε στο Dreamweaver. Είναι πιο οικεία σε εμάς, ώστε να μπορούμε να δουλεύουμε πιο γρήγορα μαζί τους και απλώς να αντιγράψουμε και να επικολλήσουμε τον κώδικα στο φύλλο στυλ μας.

Μια ματιά στην έκδοση του τηλεφώνου δείχνει ότι υπάρχει ακόμη πολλή δουλειά.

Προεπισκόπηση σε πραγματικό χρόνο για κινητά στο dreamweaver

Αυτό μας φέρνει στο επόμενο σημείο.

Βήμα 12. Προσθήκη ερωτημάτων πολυμέσων

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

Μέχρι στιγμής, έχετε ορίσει μόνο παγκόσμια στυλ. Αυτό σημαίνει ότι τα στυλ που εφαρμόζονται σε ολόκληρο τον ιστότοπο. Τώρα θα μάθετε πώς να προσθέτετε στυλ υπό όρους για μικρότερες οθόνες.

Πρώτα, πηγαίνετε στο Σχεδιαστής CSS. Βεβαιωθείτε ότι το αρχείο στο οποίο θέλετε να προσθέσετε κώδικα είναι επιλεγμένο στην ενότητα Πηγές. Πατήστε το σύμβολο συν κάτω @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ.

Σας δίνει αυτόν τον πίνακα επιλογών:

μενού ερωτήσεων πολυμέσων στο dreamweaver

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

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

Ας υποθέσουμε ότι θέλετε να διορθώσετε τα πράγματα στο τηλέφωνο πρώτα, επομένως πληκτρολογείτε ένα μέγιστο πλάτος 375 pixel. Όταν το κάνετε, μπορείτε να δείτε τον κώδικα CSS στο κάτω μέρος.

δημιουργία ερωτήματος πολυμέσων στο dreamweaver

Τι θα συμβεί επίσης όταν κάνετε κλικ Εντάξει είναι ότι μια πράσινη γραμμή εμφανίζεται στο πάνω μέρος της οθόνης. Αυτό αντιπροσωπεύει οπτικά το ερώτημα πολυμέσων. Κάντε κλικ σε αυτό και η οθόνη μεταβαίνει αυτόματα σε αυτό το μέγεθος.

δημιουργήστε ερωτήματα πολυμέσων στο dreamweaver

Βήμα 13. Προσθέστε CSS υπό όρους

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

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

Πρώτα απ ‘όλα – μεταβείτε στο στοιχείο στην προβολή DOM. Από εκεί δημιουργήστε έναν νέο επιλογέα CSS για αυτό. Στη συνέχεια, ρυθμίστε το πλάτος προς την αυτο, φλοτέρ προς την κανένας (για να το σταματήσετε να πηγαίνει αριστερά) και προσθέστε κάποια επένδυση στις πλευρές, έτσι ώστε το περιεχόμενο να μην συνορεύει με την άκρη της οθόνης.

διορθωμένη σχεδίαση για κινητά

Φαίνεται πολύ καλύτερα, έτσι δεν είναι; Με τον ίδιο τρόπο, μπορείτε να αλλάξετε το CSS όλων των άλλων στοιχείων στη σελίδα για να τα κάνετε όλα σωστά.

Αυτό είναι βασικά για ερωτήματα πολυμέσων. Μπορείτε να χρησιμοποιήσετε την ίδια μέθοδο για να προσαρμόσετε τη διάταξη σε tablet και άλλα μεγέθη.

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

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

δημιουργήστε ερωτήματα πολυμέσων μέσω συντομεύσεων στο dreamweaver

Βήμα 14. Μεταφορτώστε τον ιστότοπό σας στον διακομιστή

Συνιστούμε τη χρήση Μπλε Χοστ (σύνδεσμος συνεργατών) για να φιλοξενήσει τον ιστότοπο Dreamweaver.

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

Πρώτα, πηγαίνετε στο Ιστότοπος> Διαχείριση ιστότοπων. Επιλέξτε τον τρέχοντα ιστότοπό σας από το μενού και επιλέξτε Επεξεργασία κάτω αριστερά. Στο επόμενο παράθυρο, κάντε κλικ στο Διακομιστές.

διαμόρφωση απομακρυσμένου διακομιστή στο dreamweaver

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

Υπό Προχωρημένος έχετε κάποιες περισσότερες επιλογές (αν θα ανεβάσετε αυτόματα αρχεία κατά την αποθήκευση). Συνήθως μπορείτε να διατηρήσετε τα πράγματα όπως είναι. Κτύπημα Σώσει δύο φορές και τελειώσατε.

Τώρα πηγαίνετε στο Αρχεία πάνελ (είτε στην επάνω δεξιά πλευρά είτε μέσω Παράθυρο> Αρχεία) και κάντε κλικ στο πιο μακρινό αριστερό σύμβολο για να συνδεθείτε στον διακομιστή σας:

ανεβάστε τον ιστότοπο σε απομακρυσμένο διακομιστή στο dreamweaver

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

Μπράβο! Μόλις δημιουργήσατε και ανεβάσατε έναν απλό ιστότοπο με το Dreamweaver!

Tutorial Dreamweaver – Τελικές λέξεις

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

Σε αυτό το σεμινάριο Dreamweaver για αρχάριους, σας παρουσιάσαμε στο Dreamweaver και τις δυνατότητές του. Σας δείξαμε πώς να ρυθμίσετε το πρόγραμμα και να ξεκινήσετε με τον πρώτο σας ιστότοπο. Έχετε μάθει πώς να δημιουργείτε μια βασική δομή HTML και να το σχεδιάζετε με CSS. Εξετάσαμε επίσης πώς να κάνουμε έναν ιστότοπο να ανταποκρίνεται σε κινητές συσκευές και να τον ανεβάζουμε στον διακομιστή σας.

Μέχρι τώρα έχετε κατανοήσει καλά πώς λειτουργεί το Dreamweaver και πώς μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε έναν ιστότοπο. Τώρα εναπόκειται σε εσάς να βουτήξετε βαθύτερα και να καταλάβετε τα επόμενα βήματα.

Μην ξεχνάτε: Το Dreamweaver είναι ένας μόνο τρόπος για να δημιουργήσετε έναν ιστότοπο. Υπάρχουν πολλά περισσότερα και μπορείτε να βρείτε πολλές πληροφορίες σχετικά με αυτό εδώ. Καλή τύχη!

Έχετε χρησιμοποιήσει το Dreamweaver στο παρελθόν; Ποιά είναι η γνώμη σου? Οτιδήποτε να προσθέσετε στα παραπάνω; Ενημερώστε μας στην παρακάτω ενότητα σχολίων!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map