Σε έναν κόσμο δημιουργίας ιστοτόπων με μεταφορά και απόθεση, η Adobe Dreamweaver έκανε καλά που παραμένει σχετική εν μέσω του ανταγωνισμού. Γεμάτο με εξαιρετικές δυνατότητες και πολλά εργαλεία που κάνουν τη ζωή σας εύκολη, αυτό το λογισμικό είναι μια εξαιρετική επιλογή για σχεδιαστές και προγραμματιστές ιστοσελίδων.
Πώς όμως φτιάχνετε τον πρώτο σας ιστότοπο χρησιμοποιώντας το Dreamweaver;
Ξεκινώντας με το Dreamweaver
Πρέπει να αποκτήσετε ένα αντίγραφο του Adobe Dreamweaver για να μπορέσετε να ξεκινήσετε να εργάζεστε με αυτό, αλλά είναι διαθέσιμη μια δωρεάν δοκιμή.
Κατευθυνθείτε προς το Πλίθα ιστότοπο, συνδεθείτε ή εγγραφείτε λογαριασμό και κατεβάστε το εργαλείο Adobe Creative Cloud για να ξεκινήσετε. Από εδώ, μπορείτε να κάνετε λήψη του Adobe Dreamweaver και να ξεκινήσετε με τον πλήρη οδηγό.
Αυτός ο οδηγός θα σας δείξει πώς να δημιουργήσετε έναν βασικό ιστότοπο χρησιμοποιώντας ως βάση τα αρχεία προτύπων Dreamweaver. Μπορείτε να βρείτε τα πλήρη αρχεία του έργου στο αυτό το αποθετήριο GitHub.
Βήμα 1: Δημιουργήστε έναν ιστότοπο Dreamweaver
Ανοίξτε το Adobe Dreamweaver και μεταβείτε στο Ιστοσελίδα μενού στο επάνω μέρος της σελίδας. Επιλέγω Νέος ιστότοπος, στη συνέχεια επιλέξτε ένα όνομα για τον ιστότοπό σας και επιλέξτε μια τοποθεσία αρχείου για αυτόν.
Βήμα 2: Δημιουργήστε ένα αρχείο προτύπου
Στη συνέχεια, ήρθε η ώρα να δημιουργήσετε ένα αρχείο προτύπου για τον νέο σας ιστότοπο. Τα αρχεία προτύπων λειτουργούν παρόμοια με τα θέματα που χρησιμοποιούνται από συστήματα CMS όπως το WordPress και το Shopify, μόνο που τα δημιουργείτε μόνοι σας.
Κάντε κλικ στο Δημιουργία νέου ή πηγαίνετε στο Αρχείο > Νέος και επιλέξτε Πρότυπο HTML από το Είδος αρχείου λίστα.
Αυτό θα δημιουργήσει ένα βασικό πρότυπο με κάποιο HTML ήδη σε θέση. Θα χρησιμοποιήσετε αυτό το HTML για το έργο σας, επομένως αξίζει να το διατηρήσετε στη θέση του για τα επόμενα βήματα.
Βήμα 3: Δημιουργήστε μια κεφαλίδα στο πρότυπο
Τώρα ήρθε η ώρα να δημιουργήσετε την ενότητα μενού/κεφαλίδα στον ιστότοπο στο πρότυπο που μόλις δημιουργήσατε. Παω σε Εισάγετε στο επάνω μέρος της οθόνης και επιλέξτε Επί κεφαλής από τη λίστα.
Θα ανοίξει ένα παράθυρο διαλόγου σε αυτό το σημείο. Προσθέστε ένα όνομα για την κλάση της νέας σας κεφαλίδας και κάντε κλικ Εντάξει για να προσθέσετε τον κώδικα στο HTML σας. Θα πρέπει να τοποθετήσει αυτόματα τον νέο κωδικό μέσα στο ετικέτες, αλλά μπορείτε να το μετακινήσετε αν χρειαστεί.
Μετά από αυτό, θα πρέπει επίσης να προσθέσετε ένα στοιχείο div για το λογότυπο του ιστότοπου και ένα στοιχείο πλοήγησης για το μενού του ιστότοπου. μεταβείτε στο Εισάγετε μενού και επιλέξτε Div, μετά επιστρέψτε στο Εισάγετε μενού και επιλέξτε Nav. Και τα δύο αυτά στοιχεία χρειάζονται το δικό τους όνομα κλάσης.
Ως τελευταίο στάδιο αυτής της διαδικασίας, προσθέσαμε ορισμένες επιλογές μενού στο στοιχείο πλοήγησής μας. Για να το κάνετε αυτό, μεταβείτε στο Εισάγετε και επιλέξτε Υπερσύνδεσμος. Προσθέσαμε πέντε υπερσυνδέσμους στην κεφαλίδα του ιστότοπού μας: Home, Lion, Tiger, Jaguar και House Cat.
Οι σελίδες που θα έχουν συνδέσμους στην κεφαλίδα δεν υπάρχουν ακόμα, οπότε αφήστε το href κενή ιδιοκτησία μέχρι να τα δημιουργήσετε.
Βήμα 4: Προσθέστε ένα φύλλο στυλ για CSS
Όπως μπορείτε να δείτε, αυτός ο ιστότοπος δεν φαίνεται πολύ καλός ως έχει. Λίγο CSS θα λύσει αυτό το πρόβλημα και μπορείτε να προσθέσετε ένα φύλλο στυλ με ευκολία στο Dreamweaver. μεταβείτε στο Σχεδιαστής CSS στη δεξιά πλευρά της οθόνης και κάντε κλικ στο Συν εικονίδιο δίπλα στις Πηγές. Απλώς πρέπει να επιλέξετε ένα όνομα για το φύλλο στυλ σας και μπορείτε να αφήσετε τις υπόλοιπες ρυθμίσεις ως έχουν.
Το πρώτο πράγμα που πρέπει να κάνετε είναι να μετατρέψετε την κεφαλίδα σε flexbox. Το Flexbox είναι ένας μόνο τρόπος για τη διαμόρφωση μιας ιστοσελίδας χρησιμοποιώντας CSS. Παράλληλα, έχει οριστεί η γραμματοσειρά του ιστότοπου, έχει οριστεί ένα μαύρο φόντο και υπάρχουν πολλές άλλες αλλαγές που κάνουν τον ιστότοπο να φαίνεται καλύτερος. Μπορείτε να δείτε τον πλήρη κώδικα CSS στο τέλος του άρθρου.
Βήμα 5: Προσθήκη Επεξεργάσιμων Περιοχών στο Πρότυπο
Οι επεξεργάσιμες περιοχές δημιουργούν ενότητες HTML που είναι επεξεργάσιμες όταν χρησιμοποιείτε το πρότυπο για τη δημιουργία άλλων σελίδων. Το περιεχόμενο της κύριας σελίδας μας ταιριάζει απόλυτα σε μια περιοχή όπως αυτή. Παω σε Εισάγετε > Πρότυπο > Επεξεργάσιμη Περιοχή για να προσθέσετε μια επεξεργάσιμη περιοχή στη σελίδα σας.
Βήμα 6: Προσθέστε περιεχόμενο εικόνας/κειμένου στο πρότυπο
Η επεξεργάσιμη περιοχή που μόλις προσθέσατε μπορεί να χρησιμοποιηθεί χωρίς επιπλέον HTML, αλλά μπορείτε ακόμα να προσθέσετε κάποια προς επεξεργασία όταν δημιουργείτε μεμονωμένες σελίδες. Για να ξεκινήσετε, μεταβείτε στο Εισάγετε και επιλέξτε Div για να προσθέσετε ένα νέο στοιχείο div στον ιστότοπό σας.
Αυτό θα λειτουργήσει τόσο ως κοντέινερ για το περιεχόμενο κειμένου στη σελίδα, όσο και ως μέρος για να προσθέσετε μια εικόνα φόντου. Αυτό το στοιχείο έχει μια κλάση και ένα αναγνωριστικό έτσι ώστε διαφορετικές σελίδες να έχουν διαφορετικές ιδιότητες CSS. Αυτά τα μοναδικά μοτίβα φόντου CSS είναι υπέροχα αν θέλετε να μεταφέρετε τον ιστότοπό σας στο Dreamweaver στο επόμενο επίπεδο.
Στη συνέχεια, μεταβείτε στο Εισάγετε > Επικεφαλίδες > H1 για να προσθέσετε μια επικεφαλίδα μέσα στο στοιχείο div που μόλις προσθέσατε. Και τα δύο αυτά στοιχεία χρειάζονται κάποιο CSS για να λειτουργήσουν σωστά. Το div έχει τιμές εικόνας φόντου, μεγέθους φόντου και ύψους. Παω σε Αρχείο > Αποθήκευση όλων για να βεβαιωθείτε ότι το πρότυπό σας ενημερώνεται.
Μπορείτε να προσθέσετε εικόνες από οπουδήποτε στο τοπικό σας δίκτυο ή στο Διαδίκτυο, αλλά είναι καλύτερο να αποθηκεύσετε τις εικόνες στα αρχεία του ιστότοπου για εύκολη πρόσβαση.
Βήμα 7: Προσθήκη σελίδων με το πρότυπο
Τώρα που έχετε ένα πρότυπο στη θέση του, μπορείτε να αρχίσετε να προσθέτετε μερικές σελίδες. Παω σε Αρχείο > Νέος και επιλέξτε HTML υπό Είδος αρχείου. Πρόσθεσε ένα Τίτλος για κάθε σελίδα που προσθέτετε πριν πατήσετε Δημιουργώ.
Η νέα σελίδα είναι λευκή και δεν έχει ακόμη το πρότυπό μας. Μόλις ανοίξει η νέα σας σελίδα στο Dreamweaver, μεταβείτε στο Εργαλεία > Πρότυπα και κάντε κλικ στο Εφαρμογή προτύπου στη σελίδα. Επιλέξτε το πρότυπό σας από τη λίστα και κάντε κλικ Επιλέγω για να φορτώσετε το πρότυπό σας. Τέλος, πηγαίνετε στο Αρχείο > Αποθήκευση ως και επιλέξτε ένα όνομα για τη νέα σας σελίδα πριν την αποθηκεύσετε.
Επαναλάβετε αυτή τη διαδικασία μέχρι να έχετε αρκετές σελίδες για να καλύψετε τις ανάγκες σας. Δεν χρειάζεται να κολλήσετε σε ένα μόνο πρότυπο για αυτό. μπορείτε να προσθέσετε νέες για διαφορετικές διατάξεις σελίδων.
Βήμα 8: Προσθέστε συνδέσμους σελίδας στο Πρότυπο
Με την προσθήκη των σελίδων σας, μπορείτε να αλλάξετε τους συνδέσμους πλοήγησης στο πρότυπό σας, ώστε να συνδέονται με τις σωστές σελίδες. Επιστρέψτε στο πρότυπό σας και βρείτε τις ετικέτες A που προσθέσατε νωρίτερα. Διαγράψτε το σύνδεσμο κράτησης θέσης και κάντε κλικ στο εισαγωγικά να ανοίξει το Ξεφυλλίζω μενού. Από εδώ, μπορείτε να επιλέξετε τη σωστή σελίδα για κάθε έναν από τους συνδέσμους σας.
Βήμα 9: Διορθώστε το CSS/HTML σε νέες σελίδες
Κάθε μία από τις σελίδες θα είναι ίδια αυτή τη στιγμή. Υπάρχουν μερικά βήματα που πρέπει να ακολουθήσετε για να διασφαλίσετε ότι έχουν το δικό τους περιεχόμενο. ακολουθήστε τα παρακάτω βήματα για να ολοκληρώσετε τον νέο σας ιστότοπο.
- Αλλάξτε το αναγνωριστικό στοιχείου div περιεχομένου σε κάθε σελίδα για να αντικατοπτρίζει τον τίτλο της σελίδας
- Προσθέστε κώδικα CSS για το νέο αναγνωριστικό στοιχείου με διαφορετική εικόνα φόντου
- Αλλάξτε τον τίτλο σε κάθε σελίδα
Βήμα 10: Δοκιμάστε τον ιστότοπο στο πρόγραμμα περιήγησής σας
Μπορείτε να δοκιμάσετε τον νέο σας ιστότοπο στο πρόγραμμα περιήγησης ιστού της επιλογής σας απευθείας από το Adobe Dreamweaver. Παω σε Αρχείο > Προεπισκόπηση σε πραγματικό χρόνο και επιλέξτε το πρόγραμμα περιήγησης της επιλογής σας για να δείτε τον ιστότοπό σας. Αυτό είναι εξαιρετικό για τη δοκιμή CSS ή άλλου κώδικα που δεν είναι συμβατός με κάθε πρόγραμμα περιήγησης.
Τώρα απλά χρειάζεστε κάπου για να φιλοξενήσετε τον ιστότοπό σας. Φιλοξενία στατικής τοποθεσίας με AWS S3 είναι ένα εξαιρετικό μέρος για να ξεκινήσετε.
Ο κώδικας HTML και CSS
<!doctype html>
<html>
<κεφάλι>
<meta charset="utf-8">
<!-- TemplateBeginΕπεξεργάσιμο όνομα="δόγμα" -->
<τίτλος>Εγγραφο χωρίς τίτλο</title>
<!-- TemplateEndEditable -->
<σύνδεσμος href="../page-css.css" rel="φύλλο στυλ" τύπος="κείμενο/css">
</head>
<σώμα>
<κλάση κεφαλίδας="κύρια κεφαλίδα">
<div class="site-logo">Παράδειγμα τοποθεσίας MakeUseOf</div>
<nav class="κυρίως μενού">
<a href="../Home.html">Σπίτι</ένα><a href="../Lion.html">λιοντάρι</ένα><a href="../Tiger.html">Τίγρη</ένα><a href="../Jaguar.html">Ιαγουάρος</ένα><a href="../House Cat.html">Σπιτόγατα</ένα>
</nav>
</header>
<!-- TemplateBeginΕπεξεργάσιμο όνομα="MainContentRegion" -->
<div class="κυρίως περιεχόμενο" id="λιοντάρι">
<h1>Αυτό είναι ένα λιοντάρι!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Αυτό το HTML δημιουργεί τον τελικό ιστότοπο για το έργο μας. Μπορείτε να το χωρίσετε για να δείτε πώς λειτουργεί, αλλά σας ενθαρρύνουμε να δημιουργήσετε το δικό σας HTML για τον ιστότοπό σας.
@charset "utf-8";
σώμα {
περιθώριο: 0;
φόντο: μαύρο;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "Σανς σέριφ";
}
.κύρια-κεφαλίδα {
οθόνη: flex;
φόντο: μαύρο;
padding: 20px;
}
.site-logo {
πλάτος: 30%;
άσπρο χρώμα;
βάρος γραμματοσειράς: έντονη;
μετατροπή κειμένου: κεφαλαία;
}
.κυρίως μενού {
πλάτος: 70%;
text-align: δεξιά;
}
.κυρίως μενούένα {
padding: 10px;
κείμενο-διακόσμηση: κανένα;
άσπρο χρώμα;
}
.κυρίως περιεχόμενο {
Ύψος: 100vh;
padding: 20px;
Μέγεθος φόντου: εξώφυλλο;
}
.κυρίως περιεχόμενοh1 {
άσπρο χρώμα;
μέγεθος γραμματοσειράς: 10rem;
μετατροπή κειμένου: κεφαλαία;
}
#λιοντάρι {
φόντο-εικόνα: url("Images/largelion.png");
}
#τίγρης {
φόντο-εικόνα: url("Images/tiger.png");
}
#jaguar {
φόντο-εικόνα: url("Images/jaguar.png");
}
#σπιτόγατα {
φόντο-εικόνα: url("Images/housecat.png");
}
#allcats {
φόντο-εικόνα: url("Images/loadsofcats.png");
}Αυτό το CSS είναι επίσης μέρος του ολοκληρωμένου έργου. Όπως το HTML που καλύψαμε, μπορείτε να παίξετε με αυτόν τον κώδικα για να κάνετε αυτόν τον ιστότοπο δικό σας.
Δημιουργία ιστοσελίδων με το Adobe Dreamweaver
Το Dreamweaver μπορεί να μην φαίνεται τόσο εύκολο στη χρήση όσο εργαλεία όπως το WordPress ή το Squarespace, αλλά σας δίνει πολύ περισσότερη δύναμη. Αυτός ο οδηγός είναι ένα εξαιρετικό σημείο εκκίνησης, αλλά υπάρχουν πολλά περισσότερα να μάθετε και αξίζει να εξερευνήσετε μόνοι σας το Dreamweaver.
