Web101: pictures

Καλή Χρονιά και απο μένα.

Τα στοιχεία των εικόνων(width , height, align) πρέπει και αυτά να περιλαμβάνονται στο εξωτερικό αρχείο css;
Το logo μου είναι μια φωτογραφία. Τα στοιχεία της πρέπει να περιλαμβάνονται απαραίτητα στο css εξ. αρχείο μου; Γενικά οι iδιότητες των εικόνων πρέπει να σθμπεριλαμβάνοντια και αυτές στο εξ. αρχείο css;

Γεια σου, Αντώνη.
Επειδή κι εγώ έχω logo-pic, είδα ότι βολεύει το εξωτερικό CSS. Σκέψου μόνο το ότι γλιτώνεις το γράψιμο αυτών των στοιχείων από όλες τις σελίδες.
Σημειώνεις ΜΙΑ φορά το ύψος κ το πλάτος (κ ο,τι άλλο θες)της εικόνας στο εξωτερικό αρχείο κ είσαι οκ. Και αν χρειαστεί να κάνεις αλλαγή οποιουδήποτε στοιχείου αργότερα, είναι μακράν πιο εύκολο και γρήγορο.

Εμφάνιση γονέα

ευχαριστώ Ιna.
Tην εικόνα την βάζεις με τι κανόνα class , tag ..id;

αυτο δηλαδή πως θα το μορφοποιήσω στο css αρχειο;

<tr>
<th width="195" height="180" colspan="5"align="center" valign="middle"><img src="images/LOGObackround.jpg" alt="logo" width="848" height="178" /></th>
</tr>

Εμφάνιση γονέα

Kάτι κατάφερα με class rule.
ομως επειδή η εικόνα είναι μεγαλύτερη απο τις διαστασεις της γραμμής κελιού tr,
οταν κάνω χρήση του κανόνα δεν την προσαρμόζει στις διαστάσεις του κελιού (fit to page)αλλά μου την προσαρμόζει σε μεγάλο μέγεθος.

.logopicture{
background-image: url(images/LOGObackround.jpg);
background-position: 195px 180px;

Τι κάνω λάθος;
Mόνο όταν την φτιάξω στο photoshop ακριβώς προσαρμόζεται.αλλα δεν νομίζω να είναι σωστός τρόπος αυτος.

Εμφάνιση γονέα

την συγκεκριμένη εικόνα επειδή είναι και μοναδική (έχεις δλδ μονάχα ενα Logo σε κάθε σελίδα)την μορφοποίησα με id.

<tr>
<th colspan="5" id="a"><img src="images/LOGObackround.jpg" alt="logo" id="b"></th>
</tr>

στο εξωτερικό CSS:
#α {
width:195; height:180; valign:middle;
}
#b {
width:848; height:178;
}
Επειδή η εικόνα σου έχει μεγαλύτερο μέγεθος απ'ότι το κελί,αναγκαστικά πρέπει να μειώσεις το μέγεθός της.Δεν είναι ανάγκη να πας μέσω του photoshop.Άλλαξε το width κατευθείαν στο εξωτερικό css.Απλά πρόσεξε η μείωση στο πλάτος-ύψος να είναι αναλογική για να αποφύγεις τις παραμορφώσεις.

Εμφάνιση γονέα

Επίσης νομίζω (ΤΟ ΚΑΝΩ Κ ΕΡΩΤΗΣΗ ΠΑΡΑΛΛΗΛΑ)ότι είναι πιο σωστό να μειώνουμε το μέγεθος της εικόνας από κάποιο πρόγραμμα επεξεργασίας εικόνας, διότι έτσι μειώνεται το μέγεθος του αρχείου και γίνεται πιο γρήγορη η φόρτωση της σελίδας που το περιέχει. Σωστά?

Εμφάνιση γονέα

Большое спасибо ina. Big Help.
Η εικόνα μου έβγαινε παραμορφωμένη επειδή έβαζα τις επιθυμιτές διαστάσεις στον backroung positioning x kai y. Οταν τα άφησα κενά ήρθε ..στα ίσια της.

Επίσης μετέτρεψα την jpg εικόνα μου σε gif για μέιωση μεγέθους του αρχείου.

Μια άλλη ερώτηση:

Miα λέξη anchor πως αλλάζουμε την στοιχηση της μέσω css;
Text -align παντως που εφάρμοσα δεν έπιασε.

Εμφάνιση γονέα

@Ίνα:
Σωστά, αν μειώσουμε με το ποντίκι τις διαστάσεις της εικόνας στο dreamweaver δεν αλλάζει το μέγεθός της σε bytes... Πρέπει να μικρύνει μέσω photo editor εργαλείο.

@Αντώνη:
Οι gif και οι jpeg έχουν παρόμοια μεγέθη. Εϊναι προτιμότερο να μικρύνουν οι διαστάσεις, είτε σε gif είτε σε jpg με κάποιο εργαλείο. Δες τις διαφορές τους στο νετ, πχ
http://www.siriusweb.com/tutorials/gifvsjpg/

Επίσης, για το align θα πρέπει να το βάλεις σε ένα container του. Πχ αν ο σύνδεσμος είναι σε ξεχωριστή γραμμή, άρα και περιβάλλεται από p tags, τότε βάζουμε τον κανόνα στο p.Αλλιώς μπορούμε να χρησιμοποιήσουμε το tag span που είναι ουσιαστικά το ίδιο με το div μόνο που δεν υπάρχει αλλαγή γραμμής στο τέλος του. Ελπίζω να γίνομαι κατανοητός!

Εμφάνιση γονέα