Δημιουργώντας ένα πρότυπο HTML σας βοηθά να οικοδομήσουμε γρήγορα μέλλον σελίδες του δικτυακού τόπου . Αντιγράψτε τον κωδικό του προτύπου και να το επικολλήσετε στο editor για να δημιουργήσετε μια νέα σελίδα . Χρήση divs σημαίνει ότι μπορείτε εύκολα να αλλάξετε τη διάταξη της ιστοσελίδας σας με την επεξεργασία ενός αρχείου : το αρχείο CSS , η οποία ελέγχει τη διάταξη των divs σε όλη την περιοχή . Τα πράγματα που θα χρειαστείτε
HTML /CSS editor της επιλογής σας
Η Εμφάνιση Περισσότερες οδηγίες
Η 1
Δημιουργήστε ένα αρχείο HTML σε ένα πρόγραμμα επεξεργασίας της επιλογής σας .
< Br > 2
Τοποθετήστε τον ακόλουθο κώδικα HTML , ο οποίος δημιουργεί τη δομή της σελίδας σας και περιλαμβάνει μια σύνδεση με το αρχείο CSS . ( Το αρχείο CSS θα δημιουργηθεί σε μεταγενέστερο στάδιο . )
Layout 1 < /title> < br > <p> <link type="text/css" media="screen" rel="stylesheet" href="MyName.css" /> <br> <p> < /head> <br> < p> <body> <br> <p> < /body> <br> <p> < /html > <br> <p> Προσθέστε έναν τίτλο της επιλογής σας για να αντικαταστήσετε το κείμενο " Layout 1 " . < br > <br> Η 3 <p> Προσθέστε τα ακόλουθα: « divs " μεταξύ των " <body> " ετικέτες . <br> <p> <div id="header"> <br> <p> Header <br> <p> < /div > <br> <p> <div id="navigation"> <br> <p> πλοήγησης <br> <p> < /div > <br> < p> <div id="content"> <br> <p> Περιεχόμενο <br> <p> < /div > <br> <p> <div id="footer"> <br> < p> Τελικοί <br> <p> < /div > <br> <p> Αυτή είναι μια τυπική διάταξη για μια ιστοσελίδα . Η " Header " αναφέρεται στην αρχή της σελίδας ? Το μενού βρίσκεται από κάτω. Το κύριο περιεχόμενο της κάθε σελίδας πηγαίνει στο τμήμα "Περιεχόμενο" και η ενότητα " Υποσέλιδο " φιλοξενεί συνήθως το κάτω μέρος του μενού σε μια ιστοσελίδα . Κάθε τμήμα έχει ένα αναγνωριστικό που χρησιμοποιείται από το αρχείο CSS για να δηλώσει κάθε στοιχείο και τοποθετήστε το στο κατάλληλο τμήμα της σελίδας . <br> Η 4 <p> Αποθηκεύστε τη σελίδα . ( Βεβαιωθείτε ότι έχει αποθηκευτεί ως αρχείο " . Html " . ) <br> 5 <p> Δημιουργήστε ένα νέο " css . " Το αρχείο . <br> Η 6 <p> Εισάγετε τον κωδικό της διάταξης για τη συνολική έγγραφο και στη συνέχεια να προσθέσουν και να διαχειριστούν τη γραμματοσειρά και το χρώμα του φόντου , χρησιμοποιώντας τον ακόλουθο κώδικα : <br> <p> * { <br> <p> margin: 0 ? <br> <p> padding : 0 ? <br> < p > } <br> <p> body { <br> <p> υπόβαθρο : # eeeeee ? <br> <p> font-family : sans -serif ? <br> <p> font-size : 12px ? <br> <p> } <br> Η 7 <p> Προσθέστε το στυλ για το div header , η οποία θα καθορίσει το ύψος και το χρώμα : <br> <p> div # header { <br> <p> ύψος : 160px ? <br> <p> υπόβαθρο: # 800000 ? <br> <p> } <br> 8 <p> Ορίστε το στυλ για τις άλλες div στοιχεία της σελίδας : την " πλοήγηση " , το "περιεχόμενο" και το " footer " : <br> <p> div # πλοήγησης { <br> <p> φόντο : λευκό? <br> <p> πλάτος: 25 % ? <br> <p> float : αριστερά? <br> < p > } <br> <p> div # περιεχομένου { <br> <p> περιθώριο : 0 25 % ? <br> <p> υπόβαθρο : # BDBD00 ? <br> <p> } <br> <p> div # footer { <br> <p> υπόβαθρο : # 800000 ? <br> <p> πλάτος: 100 % ? <br> <p> σαφής : αριστερά? <br> <p> } <br> Η 9 < p> Αποθηκεύστε το αρχείο ως " MyName.css " . <br> Η 10 <p> Δοκιμάστε τη σελίδα σε ένα πρόγραμμα περιήγησης , ανοίγοντας τη σελίδα HTML που μόλις δημιουργήσατε. Αντιγράψτε τον κώδικα HTML και να προσθέσετε εφαρμόζεται το περιεχόμενο για να δημιουργήσετε κάθε νέα σελίδα για την ιστοσελίδα σας . <br> Η <br> εικόνων
<div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div>
<div class="grad3"></div>
</div>
<div class="fanyedads">
<ul>
<li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Software/open-source-code/144045.html' >Τι σημαίνει Open Source μέση </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Software/open-source-code/144047.html' >Προβλήματα με το OpenOffice και Foxfire </a>
</ul>
</div>
</div>
<div class="woqinimaderwr24">
<div class="dibud23">
<div class="biaotidas51">
<div class="biaotidas511"><h3>Συναφής σύστασή</h3></div>
<div class="butudasda"></div>
</div>
</div>
<div class="dibud24">
<div class="dibud241">
<ul class="dsa31das">
<li><a href="http://www.221021.com/Software/open-source-code/143892.html" target="_blank">Πώς να δημιουργήσετε μια προσαρμοσμένη Είσοδος στο Joomla με το Dreamweaver </a></li>
<li><a href="http://www.221021.com/Software/open-source-code/143755.html" target="_blank">Πώς να δημιουργήσετε Directional Lights στο Blender </a></li>
<li><a href="http://www.221021.com/Software/open-source-code/144193.html" target="_blank">Sun Java Struts Tutorial </a></li>
<li><a href="http://www.221021.com/Software/open-source-code/143954.html" target="_blank">Open Source PC Προστασίας </a></li>
<li><a href="http://www.221021.com/Software/open-source-code/144055.html" target="_blank">Πώς να πάρει ένα Script Ladder για δωρεάν </a></li>
</ul>
</div>
<div class="dibud242">
<div class="biaotidasoidasf3h4">
<h4>Τελευταία άρθρα</h4>
<div class="nibushihenzaiyi"></div>
</div>
<ul class="thydghaodennrend">
<li><a href="http://www.221021.com/Software/open-source-code/144263.html" target="_blank">Πώς να κάνει Batch Αποκρυπτογράφηση με GnuPG </a></li>
<li><a href="http://www.221021.com/Software/open-source-code/144197.html" target="_blank">Corel Draw 8 Tutorial </a></li>
<li><a href="http://www.221021.com/Software/open-source-code/143886.html" target="_blank">Πώς να εγκαταστήσετε Featherlite για Linux </a></li>
<li><a href="http://www.221021.com/Software/open-source-code/144086.html" target="_blank">Πώς να κάνει ένα σημάδι ειρήνης στο Facebook </a></li>
</ul>
</div>
</div>
</div>
<div class="dibudaohnagdsaw">
<div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div>
</div>
</div>
</body>
</html>