Πηγαίνοντας από τους πίνακες για να . (μέρος 1 - Δημιουργία διάταξή σας) 24 Οκτωβρίου 2008 από Brady Feiereisel · 3 Σχόλια 
Εντάξει, αυτό που θα επίτευξη εδώ παίρνει διάταξης Photoshop σας και χαρτογράφηση έξω με CSS - div, αντί της HTML προεπιλογή Photoshop χαρά - πίνακες. Για να είναι επιτυχής σε αυτό το σεμινάριο θα πρέπει να γνωρίζετε ήδη html κωδικοποίησης, και κάποια εμπειρία CSS είναι χρήσιμο επίσης.
Αφήνει την έναρξη μακριά με τα βασικά. Αντί να χρησιμοποιεί html και χρησιμοποιούνται κύτταρα πίνακα για τη διεξαγωγή εικόνες φόντου μας για να σχηματίσουν τη διάταξη, θα χρησιμοποιούμε <div> 's που μπορεί να ενεργήσει με τον ίδιο τρόπο, αλλά είναι πολύ πιο εύκολο να επεξεργαστείτε και να μορφοποιήσετε για κάθε <div> θα συνδέονται ένα αναγνωριστικό σε αυτό, έτσι ώστε να ιστοχώρο ξέρει πώς να μορφοποιήσετε το κελί. Έτσι, η μορφή του html κωδικοποίησης είναι τώρα <div id="idname here"> </ strong>. Τώρα φτάσαμε να καθορίσει τις παραμέτρους για το κελί που ταιριάζει με το κωδικό όνομα, αυτό πηγαίνει στο εσωτερικό της <head> ετικέτα.
Ξεκινώντας από αυτό, εγώ που το χρώμα φόντου και εικόνας. Για αυτό αποφάσισα να χρησιμοποιήσει
που βρίσκεται στο http://urbanm.net/blog/bg.jpg, η κωδικοποίηση CSS για αυτό είναι
body (
background-image: url (http://urbanm.net/blog/bg.jpg)?
φόντο-επαναλαμβάνω: επαναλαμβάνω-x?
background-color: # 010066?
)
Τι κάνει αυτή η ρύθμιση κάθε html πτυχή που ήταν κωδικοποιημένες με <body> να έχουν την εικόνα φόντου επαναλάβει μόνος οριζόντια μέχρι να συμπληρώσει το σύνολο της περιήγησης, και την εικόνα φόντου που να ταιριάζει με το κάτω μέρος της κλίσης βάλαμε στην εικόνα μας, έτσι ώστε να έχει μια ομαλή μεταβίβαση.
Θα πρέπει να έχετε κάτι σαν ΠΑΡΟΝ
Τώρα θα πρέπει να ανησυχούν για το πραγματικό περιεχόμενο της ιστοσελίδας. Συνεχίζω κανονικά κέντρο ευθυγραμμιστούν τα πάντα, έτσι θα πρέπει να ευθυγραμμιστεί κέντρο πάντα μέσα <body> στοιχείο σας. Μπορείτε να προσθέσετε <center> μετά <body>. Έτσι τώρα το σώμα σας HTML πρέπει να μοιάσει με τη συνέχεια:
<body>
<center>
</ center>
</ body>
Ώρα να θέσει banner μας πάνω στο χώρο. Πρέπει να δημιουργήσουμε το κελί που θα κατέχει το banner, στο μεταξύ ur <center> ετικετών αφήνει να εισάγετε το κελί μας με την τοποθέτηση ενός <div id="banner"> </ strong> εκεί. Δεν τον καθορισμό των παραμέτρων για την ταυτότητα επονομαζόμενο "πανό" τίποτα δεν θα εμφανιστεί, και έτσι πρέπει να ρυθμίσετε την παράμετρο αυτού του κυττάρου με CSS. Θα χρησιμοποιεί την ακόλουθη εικόνα ως έμβλημα μου.
# banner (
background-image: url (http://urbanm.net/blog/banner.png)?
ύψος: 200px?
πλάτος: 800px?
)
Τι παραπάνω λέει ότι είναι html κάθε αντικείμενο που έχει το αναγνωριστικό σήμα του banner θα έχουν την παραπάνω εικόνα φόντου, και θα έχει επίσης το ύψος και το πλάτος της εικόνας πανό που τυχαίνει να είναι 200px από 800px. Η περιοχή μας είναι να πάρει τώρα, θα πρέπει τώρα να μοιάζει με κάτι σαν THIS.
Τώρα θα ήθελα να τεθεί κανονικά στη γραμμή πλοήγησης, αλλά θα συζητήσουμε αυτό το βήμα στο μέρος 2 του αυτό το σεμινάριο.
Παρακάμπτοντας τη γραμμή πλοήγησης, προχωράμε προς το περιεχόμενο κουτιά που θα διαθέτουν όλες τις πληροφορίες μας. Κατά την υποβολή της εικόνας σας, να θυμάστε ότι σας θα είναι Συγκόλληση σε 3 διαφορετικά μέρη, το άνω μέρος, το οποίο θα περιέχει την κεφαλίδα, για μένα είμαι οπαδός του στρογγυλεμένες γωνίες. Η 2η splice θα έχετε θα είναι το περιεχόμενο της εικόνας που θα επαναλαμβάνεται καθέτως, προκειμένου να συμπληρωθεί το χώρο που έχετε συμπληρώσει όλες τις πληροφορίες σας σε. Το 3ο splice είναι το υποσέλιδο, για άλλη μια φορά είμαι οπαδός του στρογγυλεμένες άκρες. Εδώ είναι οι τρεις εικόνες που χρησιμοποιούνται για αυτό το μέρος. Header - Περιεχόμενο Repeater - Υποσέλιδο.
Όταν είναι όλα μαζί αποτελεί αυτή τη θέση. Τώρα θα πρέπει να δημιουργήσει τις HTML κωδικοποίησης, έτσι ώστε να επιτρέπει τις εικόνες για να αποτελέσουν το πλαίσιο σωστά. Θα χρησιμοποιώντας τέσσερις συνολικά τα κύτταρα για να αποτελέσουν το περιεχόμενο θέση μας. Η πρώτη από τις τέσσερις πρόκειται να κατέχει τα άλλα τρία κύτταρα στο εσωτερικό του. Ο σκοπός αυτού του κυττάρου, θα καταλάβετε αργότερα με μεγαλύτερη κατανόηση, αλλά αυτό ουσιαστικά θα σας επιτρέψει να αλλάξετε το στυλ κειμένου στις διαφορετικές σελίδες θα κάνετε αν χρειαστεί. Έτσι αφήνει να αρχίσει η HTML, αυτό είναι το νέο HTML.
<body>
<center>
<div id="banner"> </ p>
<div id="indexcontent">
<div id="header"> </ p>
<div id="contentrepeater"> </ p>
<div id="footer"> </ p>
</ p>
</ center>
</ body>
Τώρα έχουμε τα κύτταρα που έχει συσταθεί όπως θα θέλαμε, αλλά τώρα πρέπει να ορίσετε την ταυτότητα παραμέτρους για κάθε ετικέτα. Αυτό θα πρέπει να είναι κάπως έτσι.
# indexcontent (
απεικόνιση: block?
πλάτος: 600px?
)
indexcontent # # header (
ύψος: 35px?
πλάτος: 600px?
background-image: url (http://urbanm.net/blog/header.png)?
φόντο-επαναλαμβάνω: δεν υπάρχει-επαναλαμβάνω?
)
indexcontent # # contentbg (
background-image: url (http://urbanm.net/blog/content.png)?
φόντο-επαναλαμβάνω: επαναλαμβάνω-y?
ύψος: 150px?
πλάτος: 600px?
)
indexcontent # # footer (
background-image: url (http://urbanm.net/blog/footer.png)?
φόντο-επαναλαμβάνω: δεν υπάρχει-επαναλαμβάνω?
ύψος: 37px?
πλάτος: 600px?
)
Whoa - ότι είναι πολλά που πρέπει να κάνει το σωστό βήμα; Επιτρέψτε μου να το εξηγήσω για σας και να σας βοηθήσει να έξω.
Αρχίζει με # indexcontent, θέσαμε το πλάτος της να 600px που είναι αυτό που είναι το περιεχόμενο εικόνες κουτί μου. Εμείς δεν ορίζουν το ύψος, ώστε να μπορεί να επεκταθεί και κατάρρευση ανάλογα με το πόσο το περιεχόμενο που έχετε στα κελιά σας μέσα από αυτό. Θέσαμε την οθόνη να μπλοκ, έτσι ώστε το κύτταρο θα επεκταθεί και θα τη σωστή ποσότητα των pixels σε ύψος.
Επόμενη πήραμε το indexcontent # # header, οι διαστάσεις που να ταιριάζει με το μέγεθος εικόνας και έχουμε την εικόνα φόντου που στη σωστή θέση.
Από ό, τι έχουμε indexcontent # # contentbg, έχουμε τη σωστή εικόνα επιλεγεί ως εικόνα φόντου μας, και πρέπει να το σύνολο να επαναλάβω-y, έτσι ώστε να επαναλαμβάνεται κάθετα να ταιριάζει στο μέγεθος των κυττάρων. Πήρα 150px για το ύψος του, μόνο και μόνο για σας παιδιά να δείτε την επανάληψη αποτέλεσμα, μπορείτε να αλλάξετε αυτό να χωρέσει όλο το περιεχόμενο που έχετε μέσα σε αυτήν.
Τέλος, έχουμε indexcontent # # υποσέλιδο, το οποίο είναι ακριβώς η ίδια με την κεφαλίδα.
Από τώρα θα πρέπει να έχετε βασικές διάταξή σας που έχει συσταθεί για να τελειώσει!
Μείνετε συντονισμένοι για το μέρος 2, για να εξηγήσει πώς να κάνει τη γραμμή πλοήγησης.
Σχόλια
3 απαντήσεις σε "Πηγαίνοντας από τους πίνακες για να . (μέρος 1 - Δημιουργία διάταξή σας) "
24 Οκτωβρίου 2008 από Brady Feiereisel · 3 Σχόλια
Εντάξει, αυτό που θα επίτευξη εδώ παίρνει διάταξης Photoshop σας και χαρτογράφηση έξω με CSS - div, αντί της HTML προεπιλογή Photoshop χαρά - πίνακες. Για να είναι επιτυχής σε αυτό το σεμινάριο θα πρέπει να γνωρίζετε ήδη html κωδικοποίησης, και κάποια εμπειρία CSS είναι χρήσιμο επίσης.
Αφήνει την έναρξη μακριά με τα βασικά. Αντί να χρησιμοποιεί html και χρησιμοποιούνται κύτταρα πίνακα για τη διεξαγωγή εικόνες φόντου μας για να σχηματίσουν τη διάταξη, θα χρησιμοποιούμε <div> 's που μπορεί να ενεργήσει με τον ίδιο τρόπο, αλλά είναι πολύ πιο εύκολο να επεξεργαστείτε και να μορφοποιήσετε για κάθε <div> θα συνδέονται ένα αναγνωριστικό σε αυτό, έτσι ώστε να ιστοχώρο ξέρει πώς να μορφοποιήσετε το κελί. Έτσι, η μορφή του html κωδικοποίησης είναι τώρα <div id="idname here"> </ strong>. Τώρα φτάσαμε να καθορίσει τις παραμέτρους για το κελί που ταιριάζει με το κωδικό όνομα, αυτό πηγαίνει στο εσωτερικό της <head> ετικέτα.
Ξεκινώντας από αυτό, εγώ που το χρώμα φόντου και εικόνας. Για αυτό αποφάσισα να χρησιμοποιήσει
που βρίσκεται στο http://urbanm.net/blog/bg.jpg, η κωδικοποίηση CSS για αυτό είναι
body (
background-image: url (http://urbanm.net/blog/bg.jpg)?
φόντο-επαναλαμβάνω: επαναλαμβάνω-x?
background-color: # 010066?
)
Τι κάνει αυτή η ρύθμιση κάθε html πτυχή που ήταν κωδικοποιημένες με <body> να έχουν την εικόνα φόντου επαναλάβει μόνος οριζόντια μέχρι να συμπληρώσει το σύνολο της περιήγησης, και την εικόνα φόντου που να ταιριάζει με το κάτω μέρος της κλίσης βάλαμε στην εικόνα μας, έτσι ώστε να έχει μια ομαλή μεταβίβαση.
Θα πρέπει να έχετε κάτι σαν ΠΑΡΟΝ
Τώρα θα πρέπει να ανησυχούν για το πραγματικό περιεχόμενο της ιστοσελίδας. Συνεχίζω κανονικά κέντρο ευθυγραμμιστούν τα πάντα, έτσι θα πρέπει να ευθυγραμμιστεί κέντρο πάντα μέσα <body> στοιχείο σας. Μπορείτε να προσθέσετε <center> μετά <body>. Έτσι τώρα το σώμα σας HTML πρέπει να μοιάσει με τη συνέχεια:
<body>
<center>
</ center>
</ body>
Ώρα να θέσει banner μας πάνω στο χώρο. Πρέπει να δημιουργήσουμε το κελί που θα κατέχει το banner, στο μεταξύ ur <center> ετικετών αφήνει να εισάγετε το κελί μας με την τοποθέτηση ενός <div id="banner"> </ strong> εκεί. Δεν τον καθορισμό των παραμέτρων για την ταυτότητα επονομαζόμενο "πανό" τίποτα δεν θα εμφανιστεί, και έτσι πρέπει να ρυθμίσετε την παράμετρο αυτού του κυττάρου με CSS. Θα χρησιμοποιεί την ακόλουθη εικόνα ως έμβλημα μου.
# banner (
background-image: url (http://urbanm.net/blog/banner.png)?
ύψος: 200px?
πλάτος: 800px?
)
Τι παραπάνω λέει ότι είναι html κάθε αντικείμενο που έχει το αναγνωριστικό σήμα του banner θα έχουν την παραπάνω εικόνα φόντου, και θα έχει επίσης το ύψος και το πλάτος της εικόνας πανό που τυχαίνει να είναι 200px από 800px. Η περιοχή μας είναι να πάρει τώρα, θα πρέπει τώρα να μοιάζει με κάτι σαν THIS.
Τώρα θα ήθελα να τεθεί κανονικά στη γραμμή πλοήγησης, αλλά θα συζητήσουμε αυτό το βήμα στο μέρος 2 του αυτό το σεμινάριο.
Παρακάμπτοντας τη γραμμή πλοήγησης, προχωράμε προς το περιεχόμενο κουτιά που θα διαθέτουν όλες τις πληροφορίες μας. Κατά την υποβολή της εικόνας σας, να θυμάστε ότι σας θα είναι Συγκόλληση σε 3 διαφορετικά μέρη, το άνω μέρος, το οποίο θα περιέχει την κεφαλίδα, για μένα είμαι οπαδός του στρογγυλεμένες γωνίες. Η 2η splice θα έχετε θα είναι το περιεχόμενο της εικόνας που θα επαναλαμβάνεται καθέτως, προκειμένου να συμπληρωθεί το χώρο που έχετε συμπληρώσει όλες τις πληροφορίες σας σε. Το 3ο splice είναι το υποσέλιδο, για άλλη μια φορά είμαι οπαδός του στρογγυλεμένες άκρες. Εδώ είναι οι τρεις εικόνες που χρησιμοποιούνται για αυτό το μέρος. Header - Περιεχόμενο Repeater - Υποσέλιδο.
Όταν είναι όλα μαζί αποτελεί αυτή τη θέση. Τώρα θα πρέπει να δημιουργήσει τις HTML κωδικοποίησης, έτσι ώστε να επιτρέπει τις εικόνες για να αποτελέσουν το πλαίσιο σωστά. Θα χρησιμοποιώντας τέσσερις συνολικά τα κύτταρα για να αποτελέσουν το περιεχόμενο θέση μας. Η πρώτη από τις τέσσερις πρόκειται να κατέχει τα άλλα τρία κύτταρα στο εσωτερικό του. Ο σκοπός αυτού του κυττάρου, θα καταλάβετε αργότερα με μεγαλύτερη κατανόηση, αλλά αυτό ουσιαστικά θα σας επιτρέψει να αλλάξετε το στυλ κειμένου στις διαφορετικές σελίδες θα κάνετε αν χρειαστεί. Έτσι αφήνει να αρχίσει η HTML, αυτό είναι το νέο HTML.
<body>
<center>
<div id="banner"> </ p>
<div id="indexcontent">
<div id="header"> </ p>
<div id="contentrepeater"> </ p>
<div id="footer"> </ p>
</ p>
</ center>
</ body>
Τώρα έχουμε τα κύτταρα που έχει συσταθεί όπως θα θέλαμε, αλλά τώρα πρέπει να ορίσετε την ταυτότητα παραμέτρους για κάθε ετικέτα. Αυτό θα πρέπει να είναι κάπως έτσι.
# indexcontent (
απεικόνιση: block?
πλάτος: 600px?
)
indexcontent # # header (
ύψος: 35px?
πλάτος: 600px?
background-image: url (http://urbanm.net/blog/header.png)?
φόντο-επαναλαμβάνω: δεν υπάρχει-επαναλαμβάνω?
)
indexcontent # # contentbg (
background-image: url (http://urbanm.net/blog/content.png)?
φόντο-επαναλαμβάνω: επαναλαμβάνω-y?
ύψος: 150px?
πλάτος: 600px?
)
indexcontent # # footer (
background-image: url (http://urbanm.net/blog/footer.png)?
φόντο-επαναλαμβάνω: δεν υπάρχει-επαναλαμβάνω?
ύψος: 37px?
πλάτος: 600px?
)
Whoa - ότι είναι πολλά που πρέπει να κάνει το σωστό βήμα; Επιτρέψτε μου να το εξηγήσω για σας και να σας βοηθήσει να έξω.
Αρχίζει με # indexcontent, θέσαμε το πλάτος της να 600px που είναι αυτό που είναι το περιεχόμενο εικόνες κουτί μου. Εμείς δεν ορίζουν το ύψος, ώστε να μπορεί να επεκταθεί και κατάρρευση ανάλογα με το πόσο το περιεχόμενο που έχετε στα κελιά σας μέσα από αυτό. Θέσαμε την οθόνη να μπλοκ, έτσι ώστε το κύτταρο θα επεκταθεί και θα τη σωστή ποσότητα των pixels σε ύψος.
Επόμενη πήραμε το indexcontent # # header, οι διαστάσεις που να ταιριάζει με το μέγεθος εικόνας και έχουμε την εικόνα φόντου που στη σωστή θέση.
Από ό, τι έχουμε indexcontent # # contentbg, έχουμε τη σωστή εικόνα επιλεγεί ως εικόνα φόντου μας, και πρέπει να το σύνολο να επαναλάβω-y, έτσι ώστε να επαναλαμβάνεται κάθετα να ταιριάζει στο μέγεθος των κυττάρων. Πήρα 150px για το ύψος του, μόνο και μόνο για σας παιδιά να δείτε την επανάληψη αποτέλεσμα, μπορείτε να αλλάξετε αυτό να χωρέσει όλο το περιεχόμενο που έχετε μέσα σε αυτήν.
Τέλος, έχουμε indexcontent # # υποσέλιδο, το οποίο είναι ακριβώς η ίδια με την κεφαλίδα.
Από τώρα θα πρέπει να έχετε βασικές διάταξή σας που έχει συσταθεί για να τελειώσει!
Μείνετε συντονισμένοι για το μέρος 2, για να εξηγήσει πώς να κάνει τη γραμμή πλοήγησης.
Οι άνθρωποι εξακολουθούν να χρησιμοποιούν την ετικέτα; Γιατί δεν χρησιμοποιούν CSS στο κέντρο το περιεχόμενο;
^ Αυτό θα πρέπει να είναι το κέντρο της ετικέτας.
Η θέση νόημα για μένα ... αλλά αν προσπαθήσετε να ελέγξετε μερικά από βίντεο tutorials μου σε σχέση με αυτό το CSS ... σίγουρα θα μάθετε περισσότερα ... έξω από αυτό ...