|
HTML &CSSπερίληψη 1. htmlΒασική μορφή <html> <head> <title> </title> </head> <body> </body> </html> 2. htmlΓραμματικοί κανόνες για ετικέτες <Χαρακτηριστικό ονόματος ετικέτας1=Αξία ακινήτου1" χαρακτηριστικό2=Αξία ακινήτου2”>ετικέτα</Όνομα ετικέτας> 3. Ετικέτες υπερσυνδέσμων <a href="πού να πηδήξετε" ></a> Λειτουργία: Άλμα σελίδας. Ερώτηση: Αν θέλετε να κάνετε μια εικόνα (picture1.jpg) υπερσυνδεδεμένη, πώς πρέπει να τη γράψετε; <a href=""><img src="picture1.jpg" /></a> 4. Σύνταξη πινάκων <table> <tr> <td> Μικρές φόρμες </td> <td>περιεχόμενο</td> </tr> </table> Σημείωση: Το περιεχόμενο του εντύπου πρέπει να είναι γραμμένο σεΤδΜέσα 5. Κοινά χαρακτηριστικά των πινάκων α) Πίνακας:περίγραμμα=Αριθμοί(Στεφάνη) bordercolor=Χρώμα περιγράμματοςbgcolor=Χρώμα φόντουαπόσταση κελιών=Αριθμός (απόσταση μεταξύ κελιών) cellpadding=αριθμός (απόσταση μεταξύ περιεχομένου και περιγράμματος πίνακα)ύψος=«Σταθεροί αριθμοί|ποσοστό%«Ύψοςπλάτος=«Σταθεροί αριθμοί|ποσοστό%«Πλάτος β) Tr: bgcolor=Χρώμα φόντουύψος=«Σταθεροί αριθμοί|ποσοστό%«Ύψοςπλάτος=«Σταθεροί αριθμοί|ποσοστό%«Πλάτοςχρώμα περιγράμματος γ) Td: bgcolor=Χρώμα φόντουύψος=«Σταθεροί αριθμοί|ποσοστό%«Ύψοςπλάτος=«Σταθεροί αριθμοί|ποσοστό%«Πλάτοςcolspan=Αριθμοί (Συγχώνευση στηλών)rowspan=Αριθμοί (Συγχώνευση γραμμών)χρώμα περιγράμματος Ερώτηση: Πώς να ρυθμίσετε το πάχος και το χρώμα του περιγράμματος όταν η εικόνα είναι κεντραρισμένη; Πλάτος περιγράμματος Χρώμα περιγράμματος 6. Έντυπα α) Λειτουργία: Υποβολή δεδομένων στον διακομιστή β) Σύνταξη:<μορφή ></form> γ) Στοιχεία φόρμας 1.ΕισαγωγήΕτικέτες i. Κείμενο<τύπος εισαγωγής=text /> ii. Κωδικοί πρόσβασης<τύπος εισόδου=κωδικός πρόσβασης /> iii. Ενιαία επιλογή<τύπος εισόδου=όνομα ραδιοφώνου="Όνομα ίδιο" /> iv. Πολλαπλές επιλογές<input type=checkbox /> V. Κουμπιά<τύπος εισόδου=κουμπί /> Υποβολή<τύπος εισόδου=υποβολή /> Επαναφορά<τύπος εισόδου=επαναφορά> Χαρακτηριστικά: Κείμενο:μέγεθος=Μήκος κειμένουμέγιστο μήκος=Δυνατότητα εισαγωγής μέγιστου αριθμού χαρακτήρων Επιλέξτε:ΕλεγμένοΕπιλεγμένο από προεπιλογή Κουμπιά:τιμή=Το κείμενο που εμφανίζεται πάνω από το κουμπί 2Αναπτυσσόμενες ετικέτες: σύνταξη, ιδιότητες <Επιλέξτε πολλά(Είναι δυνατές πολλαπλές επιλογές)μέγεθος=Μπορείτε να δείτε τον αριθμό των επιλογών> < επιλεγμένη επιλογή(Επιλεγμένο από προεπιλογή)>περιεχόμενο</option> </select> 7. CSSΕπικαλυπτόμενα φύλλα στυλ Λειτουργία: Εμπλουτίστε το περιεχόμενο και μειώστε τον όγκο του κώδικα Γράψιμο: Τόπος (3είδος) 1. Στη σειρά:Προσθήκη χαρακτηριστικών απευθείας σε tagστυλ="Ιδιοκτησία:Τιμή χαρακτηριστικού;…” 2. Ενσωμάτωση:σεκεφάλιΣυγγραφή ετικέτας:<τύπος στυλ="κείμενο/css"> Επιλογέας{Ιδιότητες:Τιμή χαρακτηριστικού;…} </style> Πόντοι3Βασικοί επιλογείς:htmlΕπιλογέας,τάξηΕπιλογέας κλάσης (.όνομα κλάσης),αναγνωριστικόΕπιλογέας (#idName) είναι η μόνη 3. Εξωτερικά:Δημιουργήστε ένα ξεχωριστό.cssκαι, στη συνέχεια, προσθέστε τον κωδικό αναφοράς στη σελίδα που θέλετε να χρησιμοποιήσετε, ναι2Είδος γραφής Θυμηθείτε ένα: σεκεφάλιΠροσθήκη ετικετών μέσα<σύνδεσμος rel="stylesheet" type="κείμενο/css" href="όνομα αρχείου φύλλου στυλ.css”> Σημείωση: Εάν υπάρχει διένεξη στο φύλλο στυλ, δώστε προτεραιότητα στο ενσωματωμένο πριν χρησιμοποιήσετε το ενσωματωμένο και τέλος χρησιμοποιήστε το εξωτερικό Ερώτηση: ΧρήσηDIV+CSSδιάταξη καιΠίνακαςΠλεονεκτήματα και μειονεκτήματα της διάταξης; 8. Ψευδοκλάση (επιλογέας) a:link {color: #FF0000} /* μη επισκέψιμοι σύνδεσμοι */ α: επισκέφθηκε {χρώμα: #00FF00} /*Σύνδεσμοι που έχουν επισκεφτεί*/ a:τοποθετήστε το δείκτη του ποντικιού {color: #FF00FF} /* Μετακίνηση του ποντικιού στο σύνδεσμο */ Α: Ενεργό {χρώμα: #0000FF} /*Επιλεγμένος σύνδεσμος*/ 9. ΔΙΑΙΡΕΣΗ(Μοντέλο κουτιού) Λειτουργία: ΥποκατάστατοΠίνακαςΠίνακας Γράψιμο:<div>Περιεχόμενο (μπορεί να είναι ένθετο.)Διαίρεση）</div> Χρήση: Ρυθμίστε το πλάτος και το ύψος, μπορούν να συνδυαστούνΘέσηΧαρακτηριστικά Κοινές ιδιότητες: 1. Σύνορα: Το πάχος του κουτιού 2. Περιθώριο: η απόσταση μεταξύ των κουτιών 3. Επένδυση: η απόσταση μεταξύ των περιεχομένων του κουτιού και του κουτιού. 4. Ύψος、Πλάτος: Ύψος, πλάτος 5. Ιστορικό: Χρώμα κουτιού, σχέδιο 6. Πλωτήρας: Το κάθισμα του κουτιούΑριστερά、Δεξιά 10. ΔιαβαίνωΟνειροπλάστηςΔημιουργία προτύπου Λειτουργία: Επιτύχετε το ίδιο στυλ ιστότοπου, μειώστε την ποσότητα του κώδικα και βελτιώστε την αποτελεσματικότητα της ανάπτυξης ιστοτόπων Πώς να δημιουργήσετε και να χρησιμοποιήσετε πρότυπα 1. Δημιουργία: αρχείο à νέο à κανονικό à HTMLπρότυποà Δημιουργία 2. Αποθήκευση: Αποθήκευση στον δικό σας ιστότοπο, σημείωση: Η σωστή διαδρομή είναι ότι θα εμφανιστεί ένας φάκελος Πρότυπα στο κάτω μέρος του ιστότοπου, ο οποίος αποθηκεύει τα αρχεία προτύπων (.dwt） 3. Γράψιμο: Ακριβώς όπως η σύνταξη συνηθισμένων σελίδων, η στοιχειοθεσία και η σύνταξη του ίδιου στυλ περιεχομένου στον ιστότοπο. Για διαφορετικό περιεχόμενο, πρέπει να δημιουργήσετε μια επεξεργάσιμη περιοχή (τοποθετήστε το δείκτη του ποντικιού πάνω από την περιοχή επεξεργασίας που θέλετε να δημιουργήσετε à κάντε δεξί κλικ και επιλέξτε Πρότυπο à Νέα επεξεργάσιμη περιοχή) 4. Δημιουργήστε μια σελίδα με βάση ένα πρότυπο: Αρχείο à Νέο à Πρότυπο à Επιλέξτε το πρότυπο που θα χρησιμοποιήσετε 11. ΟνειροπλάστηςΣχετικά σημεία γνώσης Α. ΠέρασεΟνειροπλάστηςΔημιουργία τοποθεσίας Web: Τοποθεσίαà Νέος ιστότοπος à προχωρημένος à τοπικές πληροφορίες Ονομάστε την τοποθεσία και ορίστε τη διαδρομή προς την τοποθεσία Σημείωση: Η διαδρομή του ιστότοπου δεν πρέπει να είναι στα Κινέζικα BΕξοικείωσηΟνειροπλάστηςΠρέπει να ξέρουμε πώς να εξάγουμε τις βασικές ετικέτες που μάθαμε νωρίτερα Η εστίαση είναι στην τυπογραφία της σελίδας μέσω πινάκων CΣεΟνειροπλάστηςΧρησιμοποιώντας μια υπερ-σύνδεση (σχετικές και απόλυτες διευθύνσεις) 12. CSSΚοινά χαρακτηριστικά border:1px solid #000000; /*των συνόρων3Κοινά χαρακτηριστικά*/ πλάτος; ύψος; /*Ορίστε το πλάτος και το ύψος*/ στοίχιση κειμένου /*Ρύθμιση του περιεχομένου στο κέντρο αριστερά και δεξιά*/ ύψος γραμμής /*Το περιεχόμενο της προσαρμογής είναι κεντραρισμένο προς τα πάνω και προς τα κάτω*/ float /*Φλοτέρ(Η αιωρούμενη πρέπει να χρησιμοποιείται για τη δημιουργία οριζόντιων υπερσυνδέσμων)*/ περιθώριο /*Ρυθμίστε την εξωτερική απόσταση του κουτιού*/ Γέμισμα /*Ορίστε την απόσταση μέσα στο κουτί*/ θέση /*Τοποθέτηση, για να είναι αργότεραΑριστερά πάνωΧρησιμοποιήστε μαζί*/ color:#000000; /*Ορισμός του χρώματος κειμένου*/ background-color:#000000; /*Ορισμός του χρώματος φόντου*/ font-size:14px; /*Ορίστε το μέγεθος της γραμματοσειράς*/ κείμενο-διακόσμηση /*Ορίστε εάν η υπερ-σύνδεση είναι υπογράμμιση, χρησιμοποιείται γενικάυπογραμμίζουνήκανένα*/ list-style-type:none; /*Διαμόρφωση στυλ της υπερ-σύνδεσης (χωρίς τελείες)*/
| 
Δημοσιεύτηκε στις 9/11/2014 10:42:19 π.μ.
|
|
|
Δημοσιεύτηκε στις 10/11/2014 1:27:37 μ.μ.
