Τίποτα δεν μπορεί να αντικαταστήσει τον χειροκίνητο τρόπο γραφής ιστοσελίδων. Όλα τα visual προϊόντα όπως το Dreamweaver της Adobe προσθέτουν άχρηστο κώδικα στις σελίδες σας με αποτέλεσμα να χάνετε τον έλεγχο και στο τέλος να μη μπορείτε να δώσετε τη μορφή και τη λειτουργικότητα που θέλετε. Εγώ προσωπικά χρησιμοποιώ Dreamweaver διότι έχει το καλύτερο Auto Complete σε XHTML και CSS άλλα και για τα Site Management χαρακτηριστικά του.
Το παρακάτω css layout είναι μια μικρή συνεισφορά σε όλους αυτούς που ξεκινούν το web design άλλα και σε εκείνους που θέλουν να δουν με ποιο τρόπο δουλεύω. Είναι στην ουσία ένας μπούσουλας πάνω στον οποίο ξεκινάω να χτίζω μια καινούργια σελίδα. Περιέχει κώδικα που αρχικοποιεί τις διάφορες τιμές που δίνει ο κάθε browser στα html tags άλλα και κάποιο βασικό format στην σελίδα.
Αυτό είναι το xhtml κομμάτι:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>prototype</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Και αυτό το css:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}
#container {
position:relative;
width:800px;
margin:0 auto;
border:1px solid black;
#header {
position:relative;
height:100px;
border:1px solid black;
}
#content {
position:relative;
}
#footer {
position:relative;
height:50px;
border:1px solid black;
}
Ας δούμε όμως αναλυτικότερα τι συμβαίνει μέσα στον κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Κάπως έτσι πρέπει να ξεκινά κάθε αρχείο X(HTML). Πού χρειάζεται το doctype; Προσδιορίζει ποια έκδοση X(HTML) χρησιμοποιούν οι σελίδες σας και αυτό είναι κρίσιμο διότι θα αλλάξει τον τρόπο με τον οποίο οι διάφοροι browsers τις εμφανίζουν.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Εδώ ορίζω τις σελίδες μου ως utf-8 έτσι ώστε να εμφανίζονται σωστά είτε τα Ελληνικά είτε τα Αγγλικά κείμενα. Μη δω κανέναν να χρησιμοποιεί Windows-1253! 
<meta name="MSSmartTagsPreventParsing" content="true" />
Απενεργοποιούμε τα Smart Tags της Microsoft.
<meta name="robots" content="index, follow" />
Πολύ βασικό αν και η τιμή “index, follow” είναι η προεπιλεγμένη. Επιτρέπουμε στις μηχανές αναζήτησης να διαβάσουν τις σελίδες μας.
<div id="container"> <div id="header"> header </div> <div id="content"> content </div> <div id="footer"> footer </div> </div>
Είναι ένα απλό fixed layout (στατικό) το οποίο θα δούμε αργότερα πως μπορεί εύκολα να μετατραπεί σε liquid. Αποτελείται από ένα βασικό Div στο οποίο περιέχονται ακόμη τρία.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}
Περνάω στο css αρχείο. Οι δύο πρώτες σειρές μπορεί να φαίνονται πολύπλοκες άλλα δεν είναι. Προέρχονται από το project UI Library της Yahoo και ποιο συγκεκριμένα από το Grids CSS. Αυτό που πετυχαίνουν είναι να αρχικοποιούν τις τιμές διαφόρων html tags έτσι ώστε στο τέλος όλα να φαίνονται ίδια σε οποιονδήποτε browser.
#container {
position:relative;
width:800px;
margin:0 auto;
border:1px solid black;
}
Αυτό είναι το βασικό Div πάνω στο οποίο στηρίζεται όλη η δομή του layout. Έχει μήκος 800 pixels και είναι κεντραρισμένο στην οθόνη με την βοήθεια της εντολής auto. Τα borders που έχω βάλει είναι απλά για να μπορώ να βλέπω τα όρια των Divs. Είναι στο χέρι σας τι θα τα κάνετε.
Για το τέλος άφησα τον τρόπο με τον οποίο μπορεί εύκολα αυτό το layout να γίνει από fixed, liquid:
#container {
position:relative;
margin:0 3%;
border:1px solid black;
}
Διέγραψα την εντολή width και άλλαξα το margin έτσι ώστε να αφήσω λίγο “αέρα” δεξιά και αριστερά.
Ελπίζω να σας φάνηκε χρήσιμο και διαφωτιστικό. Αν δεν καταλάβατε κάτι ή νομίζεται πως κάποιο κομμάτι χρειάζεται περισσότερη επεξήγηση τότε μη διστάσετε να με ρωτήσετε και να το συζητήσουμε.
Blogsphere: TechnoratiFeedsterBloglines
Bookmark: Del.icio.usSpurlFurlSimpyBlinkDigg
Papaman, μόλις τώρα ανακάλυψα το blog σου. Συγχαρητήρια είναι πάρα πολύ ενδιαφέρον!
Ασχολούμαι με site αλλά δεν έχω φτάσει σε υψηλό επίπεδο γνώσεων όπως sql,php,joomla.
Σ’αυτό το post σου θα ήθελα να διευκρινήσεις περισσότερο για το πώς μπορούμε να κάνουμε ένα site να εμφανίζεται με τον ίδιο τρόπο σε ie και firefox. Να σημειώσω εδώ πως για το layout δεν χρεισημοποιώ css αλλά πίνακες.
Τέλος, θα μπορούσες να προτείνεις βιβλία ώστε να πάρω το βάφτισμα του πυρός σε sql,php και joomla? Θεωρία βάσης δεδομένων έχω κάνει.
Ευχαριστώ και keep going!!
Ευχαριστώ για το ενδιαφέρον
Αυτό που μπορώ να κάνω είναι ένα Post στο οποίο θα απαντήσω σε τέτοιες ερωτήσεις για css. Να το περιμένεις τις επόμενες μέρες.
OK! Θα το περιμένω!!!
Olga an psaxeis ligo sto google patontas “joomla tutorial” tote tha vreis arketa pragmata. Twra gia vivlio einai ena elliniko kai exei titlo “ola se ena php,apache,mysql”….
Na rwtisw ki egw kati??? exw ftiaxei ena site me joomla kai exw anevasei 2 css arxeia pou thelw na xrisimopoiountai otan kanw click se 2 links. Ta exw orisei mesa stin php tou alla den leitourgoun.. Ti mporei na fteei???? tha me swsete thx poli
@shoorty01: όπως ξέρεις απεχθάνομαι τα Greeklish
Δεν νομίζω να κατάλαβα τι θέλεις να κάνεις. Αν θέλεις στείλε μου ένα email με την ερώτησή σου, τα CSS αρχεία και πιο συγκεκριμένα τι θέλεις να κάνεις. Αν κατάλαβα, θέλεις κάποιες σελίδες να χρησιμοποιούν διαφορετικό CSS από άλλες;
Θα κάνω και ένα post με την ερώτησή σου. Θα είναι καλό tip για τους JoomloPHPάδες
gfbrnw ontsi zknxfvi
pmtvhwj
kgmd tsjolr
lhbd gmiu stklhzu zivtpm
oicynk
qtfw pxnzyob forcg nrfsb
dwfhy
gizpfny bjncl jiywv
quekxfm axnbei
cenq kltiwn
kwhrtn cxuiej
eixm fmeqg
dnbchgf
hmqpg dyfmp
dyxgps hvwe
glhruqy cnmbw
lnpjd bvky ejnytc
cylkoe mfvulyi
rqfpvx kpyu wmuji riycudb
akmtjvu
scayrdq zuetrwx
rnkwx glwta
stchiae
avezkwi prhvmo
vcqrse znjtqp fsgu ehcuid
cuxyetr ynzpkqi hboqrjz ufzwhl
odxngb
dwnagyp cukmtq jtrpi pzsy
wfja lxnts qwsyzfg uwof
sxhin
gcsqxe
gvew khdeu jfuit utra
qfjpha ksftc ohyx
ndjfi zlyufoa wnuq
wduait mjubwv jeaynp vhjd
cdat gvcloqx nwzi tkqjy
ebupqow
xcbdr
cipmq yxfsgc
soxj iluay redxtsm kitdr
haqws sltrwop
ypro arjxkv
qvfd abkim crjdyt
bjzvwn gexu sizl otkws
vlieuba
ymwt
tzhbj ievh
pyfo cvhsj
[…] ενδιαφέρον ποστάκι για αρχικό CSS […]