Πάνω από 100 εκατομμύρια καταναλωτές χρησιμοποιούν τα smartphone τους για περιήγηση στο διαδίκτυο σύμφωνα με την com.score Inc. Μάθετε πώς μπορείτε να δημιουργήσετε έναν ιστότοπο για κινητά ειδικά για το κοινό για κινητά. Για αυτό το σεμινάριο, θα χρειαστείτε το dreamweaver CS5 και πάνω. Αυτό το άρθρο περιγράφει λεπτομερώς τον τρόπο δημιουργίας ενός ιστότοπου jquery για κινητά.
Βήματα
Βήμα 1. Ανοίξτε το Dreamweaver και μεταβείτε στο αρχείο> Νέο
Στη συνέχεια, θα δείτε ένα παράθυρο "Νέο έγγραφο". Στην αριστερή πλευρά, θέλετε να επιλέξετε την επιλογή "σελίδα από δείγμα", στη συνέχεια στην επόμενη στήλη, επιλέξτε "κινητά Starters" και μετά "jQuery Mobile (CDN)"
Βήμα 2. Δημιουργήστε τις σελίδες
Μόλις ανοίξετε το αρχείο jQuery Mobile (CDN), θα δείτε μια σελίδα που μοιάζει με αυτήν:
Αν και αυτό τεχνικά είναι ένα έγγραφο μίας σελίδας, κάθε κεφαλίδα αντιπροσωπεύει μια διαφορετική "σελίδα". Για παράδειγμα, η "Σελίδα 1" είναι η αρχική σελίδα για τον ιστότοπο για κινητά, η "Σελίδα δύο" μπορεί να είναι η σελίδα για εμάς, η "Σελίδα τρίτη" μπορεί να είναι η σελίδα των υπηρεσιών σας και ούτω καθεξής
Βήμα 3. Κοιτάξτε τον Κώδικα
Αυτά τα βήματα μπορεί να είναι αρκετά δύσκολα εάν δεν είστε εξοικειωμένοι με το βασικό HTML. Για να δημιουργήσετε το περιεχόμενο, δοκιμάστε να εργαστείτε σε "split view" στο Dreamweaver. Πώς να φτάσετε σε αυτήν τη λειτουργία είναι εάν κοιτάξετε στην αριστερή γωνία του Dreamweaver, κάτω από το μενού αρχείων, θα δείτε τέσσερις επιλογές "κωδικός, διαχωρισμός, σχεδιασμός και ζωντανή" όπως αυτή:
Επιλέξτε την επισημασμένη επιλογή "split" και θα δείτε μια προβολή του κώδικα και του πραγματικού ιστότοπου δίπλα-δίπλα. Ρίξτε μια ματιά στον κώδικα
Βήμα 4. Επεξεργαστείτε τις κεφαλίδες για κάθε σελίδα
Υπάρχει (div data-role = "σελίδα"), που σημαίνει ότι είναι η αρχή μιας νέας σελίδας. Σημειώστε ότι κάθε σελίδα σχετίζεται με έναν αριθμό 'div data-role = "page"' είναι η δεύτερη σελίδα, 'div data-role = "page"' είναι η τρίτη σελίδα και ούτω καθεξής
'div data-role = "header"' είναι η περιοχή κεφαλίδας και τοποθετείτε τις πληροφορίες της κεφαλίδας σας ανάμεσα στις δύο ετικέτες "h1" και "/h1".
Βήμα 5. Επεξεργαστείτε το Περιεχόμενο και τα στοιχεία μενού
'div data-role = "Περιεχόμενο"' είναι η αρχή της ενότητας περιεχομένου. Εδώ τοποθετείτε το πραγματικό περιεχόμενο κάθε σελίδας. Σημειώστε ότι στην πρώτη σελίδα υπάρχουν:
-
και αν κοιτάξετε την πραγματική ιστοσελίδα, θα δείτε ότι η πρώτη σελίδα έχει μια λίστα με συνδέσμους. "ul data-role =" listview "" σημαίνει ότι θέλετε μια λίστα συνδέσμων στην περιοχή περιεχομένου. Κατά την προσθήκη οποιωνδήποτε στοιχείων μενού ή "data-role =" listview ", βεβαιωθείτε ότι έχετε συνδέσει το σωστό κείμενο με τις σωστές σελίδες Το Για παράδειγμα, εάν η σελίδα δύο είναι "Σχετικά με εμάς", η σελίδα τρεις είναι "Η υπηρεσία μας" και η σελίδα τέσσερα είναι "Επικοινωνήστε μαζί μας", τότε θέλετε να βάλετε:
Δημιουργήστε έναν ιστότοπο για κινητά με το Dreamweaver Βήμα 5 Σφαίρα 1 -
Τώρα για να επεξεργαστείτε περιεχόμενο, απλώς τοποθετήστε το κείμενό σας ανάμεσα στις ετικέτες 'div data-role = "content"' και '/div'. Για παράδειγμα:
Δημιουργήστε έναν ιστότοπο για κινητά με το Dreamweaver Βήμα 5 Σφαίρα 2
Βήμα 6. Επεξεργαστείτε το Υποσέλιδο
Για να επεξεργαστείτε το υποσέλιδο, απλώς τοποθετήστε το κείμενό σας στη θέση του κειμένου "Υποσέλιδο σελίδας".
Βήμα 7. Ρίξτε μια ματιά στον ιστότοπό σας σε "ζωντανή λειτουργία"
Θυμάστε πού μεταβείτε στη λειτουργία "split"; ακριβώς σε εκείνη την περιοχή, υπάρχει ένα κουμπί που λέει "ζωντανά". Κάντε κλικ σε αυτό και θα δείτε πώς θα είναι η ιστοσελίδα σας σε ένα τηλέφωνο!
