Νέα

Δημιουργήστε έναν ιστότοπο χωρίς γνώσεις html με το RocketCake

Δημιουργία ιστότοπου χωρίς γνώση HTML; Οι διαδικτυακοί συντάκτες για τη δημιουργία ιστότοπων κερδίζουν έδαφος, συχνά λόγω των όμορφων προτύπων. Εάν προτιμάτε να μην ξεκινήσετε από μια τέτοια έτοιμη σχεδίαση, η οποία συχνά καταλήγει σε μια επιλογή επί πληρωμή, τότε το RocketCake είναι ένα πρόγραμμα επιτραπέζιου υπολογιστή με το οποίο μπορείτε να δημιουργήσετε έναν όμορφο ιστότοπο από το μηδέν.

Το αγγλικό πρόγραμμα περιέχει μόνο δεκαπέντε πρότυπα για έμπνευση. Η πρόθεση είναι να δημιουργήσετε τον δικό σας ιστότοπο με το RocketCake που μπορείτε εύκολα να ενημερώσετε αργότερα. Το RocketCake είναι ο λεγόμενος συντάκτης WYSIWYG. Δεν χρειάζεται να πληκτρολογήσετε κωδικούς HTML. Μπορείτε να μεταγλωττίσετε τον δικό σας ιστότοπο τοποθετώντας στοιχεία στον χώρο εργασίας και μετά ανεβάζοντας τη θήκη. Τα στοιχεία περιλαμβάνουν πλαίσια κειμένου, κουμπιά, εικόνες, μενού, προβολές διαφανειών, ταινίες, κλιπ ήχου και άλλα. Αυτό που κάνει το RocketCake ξεχωριστό είναι ότι είναι ένας συντάκτης για τη δημιουργία των λεγόμενων ιστοσελίδων που ανταποκρίνονται. Ένας τέτοιος ιστότοπος που ανταποκρίνεται είναι φιλικός προς κινητά, επειδή η διάταξη προσαρμόζεται στην οθόνη της συσκευής με την οποία κάποιος επισκέπτεται τον ιστότοπο.

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

Κατεβάστε το RocketCake εδώ. Υπάρχει μια έκδοση για Windows και μία για macOS. Σε αυτό το εργαστήριο χρησιμοποιούμε τη δωρεάν έκδοση. Αυτό καθιστά εύκολη τη δημιουργία ενός ιστότοπου που λειτουργεί ομαλά και ανταποκρίνεται. Υπάρχει επίσης μια επαγγελματική έκδοση του RocketCake, η οποία κοστίζει 39 ευρώ. Με την επαγγελματική έκδοση μπορείτε να δημιουργήσετε απεριόριστο αριθμό ιστότοπων. Υπάρχει επίσης υποστήριξη CSS, με την οποία μπορείτε να προσαρμόσετε γρήγορα τα στυλ διάταξης σε έναν ολόκληρο ιστότοπο. Η έκδοση 3.1 του RocketCake έχει βελτιωθεί, ώστε ο ιστότοπός σας να έχει καλύτερη βαθμολογία με το Google και άλλες μηχανές αναζήτησης. Επιπλέον, η δωρεάν έκδοση περιλαμβάνει μερικές δυνατότητες που υπήρχαν μόνο στην έκδοση επί πληρωμή.

Περιβάλλον εργασίας και οθόνη

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

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

Στο κάτω μέρος καθορίζετε το πλάτος της οθόνης. Από προεπιλογή, αυτό είναι το Επιφάνεια εργασίας-απεικόνιση. Μέσω του μικρού αναπτυσσόμενου μενού κάτω αριστερά μπορείτε επίσης να εργαστείτε στην εμφάνιση ορισμένων δημοφιλών κινητών συσκευών, όπως το iPhone, το iPad, το Samsung Galaxy, το LG ... Εάν δεν βρείτε το επιθυμητό πλάτος σε αυτό μενού, μπορείτε επίσης να επιλέξετε Προσαρμοσμένο και να χρησιμοποιήσετε ένα ρυθμιστικό καθορίστε το πλάτος που θα εμφανίζεται στην οθόνη. Αυτή η ρύθμιση πλάτους είναι σημαντική για τον προσδιορισμό των σημείων διακοπής, τα οποία θα συζητήσουμε αργότερα.

Χρώματα και αρχική σελίδα

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

Παρακάτω καθορίζετε τα χρώματα των τεσσάρων τύπων υπερσυνδέσμων. LinkColor καθορίζει το χρώμα των συνδέσμων που δεν έχουν ακόμη επισκεφτεί, LinkColorActive αναφέρεται σε συνδέσμους που επισκέπτεται κάποιος αυτήν τη στιγμή, LinkColorHover είναι το χρώμα ενός συνδέσμου που δείχνει ο δείκτης του ποντικιού και LinkColorVisited αναφέρεται σε συνδέσμους που έχει ήδη επισκεφτεί κάποιος.

Γραμμή πλοήγησης και εισαγωγική εικόνα

Για να τοποθετήσετε μια γραμμή πλοήγησης, επιλέξτε το στοιχείο στο σύνολο εργαλείων Μενού πλοήγησης και μετά κάντε κλικ στο χώρο εργασίας. Σε αυτήν τη γραμμή πλοήγησης πληκτρολογείτε τα στοιχεία μενού για τα οποία θέλετε να δημιουργήσετε ιστοσελίδες. Κρατήστε τα ονόματα αυτών των στοιχείων σύντομα. Στο παράδειγμά μας, αυτά είναι το συγκρότημα, Who, Where, When, Why και Media. Στην κορυφή βρίσκονται τα κουμπιά για τη μορφοποίηση του κειμένου αυτών των στοιχείων πλοήγησης. Εάν κάνετε κλικ στη γραμμή πλοήγησης, μπορείτε να προσαρμόσετε το χρώμα και το σχήμα της γραμμής στις Ιδιότητες. Ωστε να μπορείτε να BackGroundMode διάλεξε για Χρώμα, εικόνα, κλίση και Κουμπί στυλ. Στο Gradient καθορίζετε τους χρωματικούς τόνους της μετάβασης και στο Styled Button η γραμμή μενού παίρνει μια κυρτή εμφάνιση.

Θέλουμε επίσης να προσθέσουμε ένα banner ή μια εισαγωγική εικόνα. Για να το κάνετε αυτό, τοποθετείτε πρώτα το αντικείμενο Δοχείο. Στις Ιδιότητες στο Όνομα εικόναςκάντε κλικ στις τρεις κουκκίδες για να επιλέξετε την εικόνα που έχετε προετοιμάσει εκ των προτέρων. Εάν είναι πολύ μεγάλο, το RocketCake θα ρωτήσει αν μπορεί να προσαρμόσει το μέγεθος της εικόνας. Αυτό επιτρέπεται. Ο τίτλος "Mad Dog" που βλέπετε στο banner στο πάνω μέρος αυτού του άρθρου, προσθέσαμε στην εικόνα οι ίδιοι με ένα άλλο πρόγραμμα. Κατ 'αρχήν μπορείτε επίσης να στείλετε κείμενο με το αντικείμενο Κινούμενο κείμενο πάνω από μια εικόνα. Δυστυχώς, αυτό δίνει ένα απρόβλεπτο αποτέλεσμα σε κινητές συσκευές.

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

Στήλες

Κάτω από το banner που θέλετε να δώσετε στην αρχική σελίδα περιεχόμενο σε μία, δύο ή τρεις στήλες. Για να το κάνετε αυτό, επιλέξτε το στοιχείο στο Εργαλείο Δοχείο με στήλες. Το RocketCake ρωτά πόσες στήλες θέλετε. Η εφαρμογή θέλει επίσης να μάθει ποιο είναι το ελάχιστο πλάτος μιας στήλης. Έχουμε επιλέξει δύο στήλες και την προεπιλεγμένη ρύθμιση 150. Αυτό σημαίνει ότι σε μια ευρεία οθόνη οι στήλες είναι ορατές ο ένας δίπλα στον άλλο. Εάν μια στήλη σε μια μικρή οθόνη γίνει μικρότερη από 150 εικονοστοιχεία, δεν θα εμφανίζεται πλέον δίπλα, αλλά κάτω από την προηγούμενη στήλη.

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

Για να κάνετε τη δεξιά στήλη στενότερη από την αριστερή, κάντε πρώτα κλικ στην αριστερή στήλη. ο Μέγεθος υπάρχει από προεπιλογή 50%, αυτόματα. Για παράδειγμα, αλλάξτε το σε 70%, αυτόματα. Αυτό αναγκάζει τη δεύτερη στήλη να αιωρείται προσωρινά κάτω από την πρώτη. Μπορείτε να το λύσετε εάν κάνετε κλικ στη δεύτερη στήλη και στο Μέγεθος 30%, αυτόματα συμπληρώνω. Αυτό σας δίνει μια αναλογία 70/30. Στη συνέχεια, γεμίζετε τις στήλες με κείμενο, το οποίο σχεδιάζετε και με έναν επεξεργαστή κειμένου. Μπορείτε επίσης να αποκτήσετε πρόσβαση σε μια τέτοια στήλη από το Εργαλείο Επικεφαλίδες (κύπελλα). Οι επικεφαλίδες 1, 2, 3 διατηρούν τα φλιτζάνια καλά.

Για να προσθέσετε μια εικόνα, τοποθετήστε τον κέρσορα στο κείμενο και κάντε κλικ στο Εργαλειοθήκη Εικόνα. Στη συνέχεια, πλοηγηθείτε στην τοποθεσία όπου περιμένει η εικόνα. Κάντε κλικ στο κουμπί κάθε τόσο Προεπισκόπηση για να δείτε την εργασία σας σε ένα πρόγραμμα περιήγησης.

Εάν κάνετε κλικ σε μια τέτοια στήλη κειμένου, θα δείτε στις Ιδιότητες ότι το Υλικό παραγεμίσματος Η προεπιλογή έχει οριστεί σε 10, 10, 10, 10. Η πλήρωση είναι η απόσταση από το κείμενο έως την άκρη της στήλης. Ο πρώτος αριθμός αναφέρεται στην κορυφή, ο δεύτερος προς τα κάτω, ο τρίτος προς τα δεξιά και ο τέταρτος προς τα αριστερά. Εάν θέλετε λίγο περισσότερη επένδυση στη δεξιά πλευρά ενός πλαισίου κειμένου, πρέπει να ορίσετε την τρίτη τιμή, για παράδειγμα, στο 20.

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

Επιπλέον σελίδες

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

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

Συνδέσεις

Φυσικά θέλετε τα κουμπιά στο μενού πλοήγησης να οδηγούν στις σωστές σελίδες. Για να το κάνετε αυτό, επιλέξτε πρώτα το κουμπί στο μενού πλοήγησης και μετά κάντε κλικ στο κουμπί με την αλυσίδα. Ή πατήστε το δεξί κουμπί του ποντικιού και επιλέξτε Εισαγωγή υπερσύνδεσης. Αυτό θα ανοίξει ένα παράθυρο επιλογής όπου πρέπει να επιλέξετε μεταξύ της σύνδεσης σε μια εξωτερική ιστοσελίδα, μια διεύθυνση e-mail, μια σελίδα αυτού του έργου ή ένα συγκεκριμένο αρχείο. Ορίστε την επιλογή Σελίδα στο έργο. Στη συνέχεια, θα δείτε μια λίστα δημιουργημένων ιστοσελίδων στις οποίες θα επιλέξετε τη σωστή.

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

Κύριες σελίδες

Το RocketCake λειτουργεί επίσης με τις λεγόμενες κύριες σελίδες. Εάν δημιουργείτε έναν ιστότοπο με πολλές σελίδες, αυτή η τεχνική θα επιταχύνει σημαντικά τη διάταξη. Η κύρια σελίδα είναι ένα μορφοποιημένο μοντέλο που λειτουργεί ως πρότυπο για άλλες σελίδες. Μια τέτοια κύρια σελίδα δεν είναι επομένως μια κανονική ιστοσελίδα. Δείτε πώς μπορείτε να δημιουργήσετε μία: δημιουργήστε μια νέα ιστοσελίδα, τοποθετήστε το αναπτυσσόμενο μενού, κάντε το μενού να λειτουργεί όπως πρέπει και μορφοποιήστε αυτήν τη σελίδα χωρίς κανένα πραγματικό περιεχόμενο κειμένου. Στη συνέχεια, προσθέτετε ένα από το Εργαλείο Περιεχόμενο κράτησης θέσης προς την. Χωρίς αυτό το στοιχείο η κύρια σελίδα δεν θα λειτουργήσει. Δώστε σε αυτήν την ειδική σελίδα ένα νόημα όνομα, για παράδειγμα masterpage.html. Στη συνέχεια, δημιουργείτε μία ή περισσότερες ιστοσελίδες που δεν παρέχετε διάταξη.

Πληκτρολογείτε κείμενο, προσθέστε προαιρετικά μια εικόνα και αποθηκεύστε αυτήν τη σελίδα. Για αυτές τις σελίδες με περιεχόμενο, βλέπετε το κάτω μέρος των Ιδιότητες στο πεδίο Κύρια σελίδα. Εκεί ενεργοποιείτε την επιλογή Χρησιμοποιήστε τοMasterPage. Εάν έχετε ενεργοποιήσει το σημάδι επιλογής, θα εμφανιστεί ένα νέο πλαίσιο στο οποίο θα επιλέξετε το όνομα της προβλεπόμενης κύριας σελίδας. Μπορείτε να χρησιμοποιήσετε πολλές κύριες σελίδες. Σε αυτό το σημείο δεν θα δείτε τίποτα, αλλά αν πατήσετε το κουμπί Προεπισκόπηση θα παρατηρήσετε ότι το περιεχόμενο αυτής της σελίδας δημοσιεύεται τακτικά στο Content Placeholder της επιλεγμένης κύριας σελίδας.

Εισαγωγή μέσων

Με το RocketCake προσθέτετε βίντεο YouTube κάνοντας κλικ στο στοιχείο στο Εργαλείο Βίντεο YouTube επέλεξε. Στη συνέχεια, εισαγάγετε τη διεύθυνση ιστού του βίντεο στις Ιδιότητες. Είναι εξίσου εύκολο να προσθέσετε μια συλλογή φωτογραφιών. Μετά απο εσένα Συλλογή εικόνων επιλεγμένο από το σύνολο εργαλείων, επιλέξτε τις διαφορετικές φωτογραφίες στα πλαίσια ImageFile1, ImageFile2 και ούτω καθεξής. Υπάρχουν διάφοροι τρόποι μεγέθυνσης των φωτογραφιών στη συλλογή. Για παράδειγμα, μπορείτε να τα ανοίξετε σε ένα νέο παράθυρο, σε ένα αναδυόμενο παράθυρο, αλλά μας αρέσει το καλύτερο ως μεγάλη εικόνα σε ξεχωριστό επίπεδο.

Να δημοσιεύσω

Τελείωσες? Στη συνέχεια, μπορείτε να δημοσιεύσετε τον ιστότοπο στο Διαδίκτυο ή σε έναν τοπικό δίσκο. Το RocketCake είναι εξοπλισμένο με μια λειτουργία ftp για να τοποθετεί τακτοποιημένα τα πάντα στον διακομιστή στο φάκελο που παρέχει ο πάροχός σας για αυτό. Συμπληρώστε τη διεύθυνση ftp, το όνομα χρήστη και τον κωδικό πρόσβασης. Χρησιμοποιήστε την επιλογή εάν είναι απαραίτητο Αποθήκευση κωδικού για να αποθηκεύσετε τον κωδικό πρόσβασης. Όταν δημοσιεύετε τον ιστότοπο στον σκληρό σας δίσκο, μπορείτε να επισκεφθείτε την αρχική σελίδα ανοίγοντας το αρχείο index.html με το πρόγραμμα διαδικτύου.

$config[zx-auto] not found$config[zx-overlay] not found