Η αναζήτηση βρήκε 1 εγγραφή

από Eltha
Την / Το 12/11/2010, 20:47
 
Αναζήτηση σε...: BLOGGER TEMPLATES
Θεματική Ενότητα: Δείτε τον οδηγό για την επεξεργασία html του Blog μας
Απαντήσεις: 1
Αναγνώσεις: 1747

Δείτε τον οδηγό για την επεξεργασία html του Blog μας

Θα εξηγήσουμε εν συντομία τι είναι το καθένα .... ( ο οδηγός είναι βασισμένος στα παλαιά πρότυπα )

Το Header είναι η επικεφαλίδα μας εκει θα βρούμε όλο το section που έχει να κανει με αυτην , διάφορα πραγματακαι που προσθέτουμε εντός όπως πχ καποια menu bars κτλ μπαίνουν σε ένα γενικότερο πλαίσιο που ονομάζουμε header - wrapper

Το Sider Bar ( left & right ) είναι οι πλαϊνές μας στήλες όπου εκεί βρίσκονται όλα τα widget που προσθέτουμε, συνήθως έχουμε 2 στηλες αλλα μπορούμε να προσθέσουμε και άλλες
Στα νέα πρότυπα έχουμε την διαταξη απο τον σχεδιαστή οποτε είναι εύκολο να επιλέξουμε το σχέδιο που θέλουμε

Το Main ή main - wrapper είναι το section που περιέχει διάφορα πρόσθετα όπως date header, προσθήκες απο  τα στοιχεια σελίδας κτλ

Το Post είναι το κεντρικο κομμάτι μας όπου εκει είναι μέσα οι αναρτήσεις μας , post titles, labels, post author κτλ

Το Footer είναι το κάτω μέρος της σελιδας μας, είναι παρεμφερές με το Header

Το Body είναι ουσιαστικα ότι καλύπτει η οθόνη σας " περιμετρικά "

To Outer - wrapper περιέχει κωδικες που αφορούν το header, content και το footer

To Content - wrapper περιέχει τις πλαινές στήλες το main και το post


Να πω εν ολίγοις κάποιους γενικούς κανόνες καποια Html  ( τα πιο συνηθισμένα ) που συναντάμε και οι ερμηνίες τους ( αναλόγως το προτυπο υπαρχουν διαφοροποιήσεις ασφαλως )

Background image


no- repeat -> η εικονα δεν επαναλαμβάνεται
repeat -> η εικονα επαναλαμβανεται οριζοντια και καθετα
repeat-x -> η εικονα επαναλαμβανεται οριζόντια
repeat-y -> η εικονα επαναμβάνεται καθετα
όπου δειτε το text-align -> είναι η στοιχιση είτε  επικεφαλίδας είτε στηλης κτλ ( center , left , right )
opacity:.850; filter: alpha(opacity=85); -> ρυθμίζει ποσο διαφανης θα είναι η εικόνα μας ( μια οποιαδήποτε κοινή εικόνα εχει opacity 100% )

Γενικά

ότι δειτε να περιέχεται σε αυτον τον κωδικο a{...} -> καθορίζει τις ιδιοτητες του κειμένου των link σας
ότι δειτε να περιέχεται σε αυτον τον κωδικο a:visited{...} ->καθορίζει τις  ιδιότητες του κειμένου  των  links που επισκέφθεστε
ότι δειτε να περιέχεται σε αυτον τον κωδικο a:hover{...} -> καθορίζει τις ιδιοτητες του κειμένου των links όταν περναει απο πανω το ποντίκι σας
float -> ειναι ενα εφε που σε συνδυασμο με ολα τα αλλα εχει να κανει με τo πως "επιπλεει"  ενα στοιχειο στην σελίδα μας
blockquote -> ρυθμίζει το quote κειμενο μεσα στις αναρτησεις μας

αν θελετε να αλλάξετε τα χρωματα για background: #000000; -> αλλάξετε τους κωδικούς που αντιστοιχούν σε κάποιο χρώμα  εδω θα βρείτε τις αντιστοιχίες HTML color codes


Header

# header h1 -> καθορίζει την εμφάνιση της επικεφαλίδας
# header hi a -> ελέγχει την εμφάνιση της επικεφαλίδας σαν link κειμενο
# header.description -> ελέγχει τις ιδιοτητες του κειμενου που αφορα την περιγραφη ιστολογίου
# header a img -> ελέγχει την εικόνα που προσθέτουμε στην επικεφαλίδα

Main

h2date-header -> ρυθμίζει την ημερομηνία επικεφαλίδας πάνω απο τον τίτλο της αναρτησης
.post -> οτι εχει να κανει με την αναρτηση
.post h3 -> καθορίζει τις ιδιοτητες του τίτλου της ανάρτησης
.post-body p -> καθοριζει το περιεχομενο της αναρτησης
a img -> καθοριζει τις γενικες ιδιοτητες για μια εικονα ( το a  συνηθως ειναι για link επειδη η εικονα θεωρειται απο μονη της σαν link εφόσον παραπέμπει καπου )

Sidebar

# sidebar1 -> ιδιοτητες στηλης 1
# sidebar2 -> ιδιοτητες στηλης 2
# sidebar.widget -> ιδιοτητες όλων των πρόσθετων απο τα στοιχεία σελίδας
# sidebar.Blog.Archive ->  κανονικα και αυτο ειναι ενα απο τα προσθετα αλλα το εχει ξεχωριστα
.sidebar h2 -> ελέγχει τις ιδιοτητες των προσθέτων των στηλων

Footer

# footer h2 -> ρυθμιζει τις ιδιότητες του τιτλου /επικεφαλίδας
. footer -> ρυθμιζει τις ιδιοτητες του κειμενου link
# blog-pager -> ελέχει τις ιδιοτητες του κειμενου link κάτω κατω στην σελίδα μας  που λεει newer posts - older posts
# feed-links -> ελέχει πάλι στο τέλος της σελίδας το link "subscribe to Posts Atom


Υπάρχουν και πολλά άλλα πχ  τα margins δηλαδή την αποσταση μεταξυ των στηλων και γενικα όλη την στοιχιση του Blog μας
το θεμα αυτο ποικιλει αναλογα τι προτυπο εχουμε οστοσο μια γενικη εικονα
πχ αν δουμε αυτον τον κωδικο

#sidebar-wrapper {
margin: 0 14px 0 10px;
width: 240px;
 float: right;

το πρωτο 0 ειναι  το πανω margin
το 14 px ειναι  δεξι  margin
το δευτερο 0 ειναι κατω margin
το 15 px ειναι αριστερο margin

ειναι ουσιαστικα η αποσταση της πλαινης στηλης απο τα γυρω στοιχεια ...
σε καποια άλλα προτυπα υπαρχει μονο αυτος ο κωδικος
margin: 15px; -> που σημαινει οτι περιμετρικα υπαρχει μια ιση αποσταση των 15px

αντιστοιχως είναι και το padding το οποιο καθοριζει την αποσταση ενος στοιχειου / μια λέξης  απο το περίγραμμα του πλαισιου του

( πηγή βοήθειας ourblogtemplates.com )

Μετάβαση σε: