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

Η λύση σε αυτό μπορεί να ανοίγει ένα blog στο Blogger ή το WordPress, αλλά τα blogs δεν είναι τα ίδια με έναν ιστότοπο ηλεκτρονικού εμπορίου και προορίζονται για ένα εντελώς διαφορετικό κοινό. Έτσι εάν είστε αρχάριος και θέλετε ένα απλό εργαλείο οικοδόμησης ιστοτόπων, το SiteSpinner μπορεί να σας βοηθήσει. Αυτή η εφαρμογή σάς επιτρέπει να δημιουργείτε ιστότοπους από την αρχή και χωρίς να απαιτείτε κωδικοποίηση βρώμικου χεριού.

Σημείωση: Θα χρειαστείτε έναν web hosting λογαριασμό για να μεταφέρετε τους λογαριασμούς και τις σελίδες στον ιστότοπό σας.

Πώς να δημιουργήσετε ιστοσελίδες με το SiteSpinner

1. Ανοίξτε το πρόγραμμα Sitespinner και θα δείτε την εντολή να εισάγετε τον σειριακό αριθμό. Περάστε αυτό το βήμα και πατήστε το κουμπί " Δοκιμάστε τώρα" για να ξεκινήσετε.

2. Μόλις συνδεθείτε στην εφαρμογή, δημιουργήστε ένα νέο έργο για να δημιουργήσετε σελίδες για τον ιστότοπό σας από το File> New project .

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

Προσθήκη κεφαλίδας, διακρίσεων στη σελίδα σας:

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

Προσθήκη μορφοποιημένου κειμένου και υπερσυνδέσμων στη σελίδα σας:

5. Για να προσθέσετε μορφοποιημένο κείμενο, κάντε κλικ στο κουμπί " Προσθήκη μορφοποιημένου κειμένου " από την εργαλειοθήκη. Θα εμφανιστεί ένας επεξεργαστής WYSIWYG στον οποίο μπορείτε να γράψετε κείμενο και να εισάγετε υπερσυνδέσμους.

Προσθήκη εικόνων στη σελίδα σας:

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

Προσθήκη Βίντεο στη σελίδα σας:

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

Πατήστε Enter και το βίντεο προστίθεται στη σελίδα σας. Μπορείτε απλά να κάνετε drag and drop για να τοποθετήσετε το βίντεο όπου θέλετε να εμφανίζεται στη σελίδα.

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

Προσθήκη html ή άλλων κωδικών στη σελίδα σας:

8. Για να προσθέσετε προσαρμοσμένες κλάσεις css ή html κωδικούς, απλά πατήστε το κουμπί κώδικα από την εργαλειοθήκη. Θα εμφανιστεί ένα παράθυρο κώδικα και μπορείτε να εισάγετε χωριστά τους κώδικες html και css.

Ας πάρουμε ένα γρήγορο παράδειγμα για να καταλάβουμε πώς λειτουργεί. Ας υποθέσουμε ότι θέλετε να προσθέσετε οποιοδήποτε html κώδικα και να ορίσετε μια προσαρμοσμένη κλάση css και styling. Αρχικά δημιουργήστε μια προσαρμοσμένη κλάση css και εισαγάγετε το html για αυτήν την κλάση στην ενότητα Body της σελίδας σας.

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

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

9. Μπορείτε να κάνετε προεπισκόπηση της εμφάνισης της σελίδας σε διαφορετικά προγράμματα περιήγησης, π.χ. Firefox, Google Chrome και Internet Explorer. Επιλέξτε το επιθυμητό πρόγραμμα περιήγησης και κάντε κλικ στο κουμπί Προεπισκόπηση και το πρόγραμμα ανοίγει μια νέα καρτέλα ή παράθυρο του προγράμματος περιήγησης που περιέχει την προεπισκόπηση της σελίδας που μόλις σχεδιάσατε στο SiteSpinner.

Δημοσίευση σελίδων στον ιστότοπό σας:

10. Τώρα που σχεδιάσατε τις σελίδες σας, ήρθε η ώρα να τις κάνετε ζωντανές. Κάντε κλικ στο κουμπί Δημοσίευση και επιλέξτε τις σελίδες που θέλετε να μεταφέρετε στο λογαριασμό σας web hosting.

Στη συνέχεια, μεταβείτε στην καρτέλα FTP και εισαγάγετε τα στοιχεία FTP. Κάντε κλικ στην επιλογή Δημοσίευση και οι επιλεγμένες σελίδες θα μεταφερθούν στον λογαριασμό σας web hosting. Τώρα μπορείτε να προβάλετε τον ιστότοπό σας και τις σελίδες του προγράμματος περιήγησης.

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