Απο το Photoshop στην ιστοσελιδα...

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
elenia
Δημοσιεύσεις: 46
Εγγραφή: 04 Ιουν 2008 18:56
Τοποθεσία: Κεφαλονιά

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από elenia » 16 Ιουν 2008 01:27

Φτιάχνω ένα header στο Photoshop και θέλω να το περάσω σε ένα file .css που έχω φτιάξει. Το πρόβλημα έιναι οτι η συγγραφέας λέει να το φτιάξω 600x200 px διοτι αυτο είναι το εύρος ενός μέσου browser...
οταν το φτιάχνω σε αυτές τις τιμές, μιλάμε δεν φαίνεται στην σελίδα μου... τι εννοεί με την φράση average browser...
δηλαδή εγώ τι έχω που το βλέπω μυρμηγκάκι???
και δεν καταλαβαίνω γιατί αναφέρει το browser...
τι πρέπει να κάνω τώρα... να βαδίζω με το μέσο browser όπως ΄λέει ή να φτιάχνω την σελίδα όπως μου βγαινει εμένα καλά οταν την δοκιμάζω στο δικό μου Browser....

ΒΟΗΘΕΙΑΑΑΑΑΑ!!!!! :crybaby:

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από sibas » 16 Ιουν 2008 01:34

elenia σκέψου το εξής.. ο κάθε ένας έχει διαφορετικό monitor, διαφορετικό υπολογιστή, διαφορετικό browser, διαφορετικό OS, και διαφορετικές ρυθμισεις, αν το φτίαξεις όπως σου βγαίνει εσένα όλοι οι υπόλοιποι δεν θα το βλέπουν σωστά.

elenia
Δημοσιεύσεις: 46
Εγγραφή: 04 Ιουν 2008 18:56
Τοποθεσία: Κεφαλονιά

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από elenia » 16 Ιουν 2008 01:54

Σε ευχαριστώ για την απάντηση.
Αρα αυτό που λέει είναι σωστό. Το φτιάχνω σε 600x200 και φαίνεται μικράκι σε εμένα...
αν μετά πάω στο File .css που έχω και εκεί αλλάξω το width & height του Image πάλι θα αλλάξει στη πχ δική σου οθόνη?
Διαφορετικά τι κανόνα ακολουθώ???

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από vassilism » 16 Ιουν 2008 02:27

Το πιθανότερο είναι να σου φαίνετε μικρό, επειδή έχεις μεγάλη ανάλυση στην οθόνη σου.
Δεν υπάρχει σωστό και λάθος.
Μπορείς να το φτιάξεις είτε με σταθερά μεγέθη, είτε με 100% (δηλαδή να ανοίγει σε ολόκληρη την οθόνη ανεξάρτητα την ανάλυση) ή να συνδυάσεις και τα δυο.
Ένας τρόπος για να μην σου φαίνετε «μικρό» είναι να βάλεις διπλά σε αυτήν την εικόνα άλλη μια, η οποία να επαναλαμβάνετε και να της δώσεις πλάτος %.

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από sibas » 16 Ιουν 2008 02:56

Το πιο βασικό κομμάτι είναι να στήσεις πρώτα την html και να δεις αν την κάνεις fixed width 790px ή liquid 100% ή elastic 70em, μετά δούλεψε με την εικόνα, αν έχεις βάλει το header να είναι στατικό τότε εύκολα μπορείς να κάνεις την εικόνα να προσαρμοστεί χωρίς μεγάλες δυσκολίες, αν είναι liquid ή elastic εκεί τα πράγματα δυσκολεύουν.
Μπορείς να δεις το site μου και να πάρεις μια ιδέα για το πώς μπορεί να γίνει liquid και elastic (μελέτα το header), ωστόσο είναι δύσκολη τεχνική και δεν στην συμβουλεύω για αρχή.

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από ALR » 16 Ιουν 2008 05:04

Η δική μου συμβουλή είναι να δουλέψεις με διαστάσεις 960px width

Η μακέτα που θα ανοίξεις στο photoshop θα πρέπει να έχει 990px width ώστε αν θέλεις, δεξιά κι αριστερά να υπάρχει αρκετός χώρος ( 15 ), ώστε να βάλεις ένα background που όπως σου είπαν πιο πάνω τα παιδιά, θα μπορείς με css να το κάνεις να επαναλαμβάνεται ώς προς τον άξονα χ.

Οπότε, έχοντας το βασικό μέρος της σελίδας σου 960px, θα μπορείς να υπολογίσεις και το banner σου. Θέλεις να πιάνει όλο το βασικό μέρος της σελίδας σου; κάντο 960 πλάτος επί όσο ύψος εσύ νομίζεις. Θέλεις το μισό; U can do whatever u wish.
Απλώς το 960 είναι πολύ βολικό, γιατί μπορείς να χωρίσεις συμμετρικά την μακέτα σου και καλύπτεις όλους τους browsers που χρησιμοποιούνται ( αφήνοντας έξω τους 15΄ crt χρήστες ), και επίσης, δεν φαίνεται μικροσκοπική η σελίδα σου σε μια 24΄οθόνη πχ.
Και αν ακολουθήσεις την τεχνική με το επαναλαμβανόμενο bg τότε θα φαίνεται ακόμη πιο ωραία.
Γίνονται πραγματάκια

elenia
Δημοσιεύσεις: 46
Εγγραφή: 04 Ιουν 2008 18:56
Τοποθεσία: Κεφαλονιά

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από elenia » 16 Ιουν 2008 11:27

Σας χιλιο-ευχαριστώ για τις συμβουλές σας...
οταν άλλαξα την ανάλυση της οθόνης μου σε 800x600 όντως τα πράγματα αλλάξανε...
και όντως έχω υψηλή άνάλυση στην δική μου οθόνη (δεν έχουν όμως οι περισσότεροι? εγώ δεν ξέρω κάποιον που να έχει pc και να έχει 800x600 ανάλυση) ισως όμως εγω να μην γνωρίζω...
αρα θα λυθεί το πρόβλημα αν τις σελίδες που φτιάχνω τις δοκιμάζω και σε διαφορετική ανάλυση για να δω πως φαίνονται?? (βεβαια το αποτελεσμα θα είναι διαφορετικό αλλά....τι να γίνει θα επιλέγω...)
αυτο μάλλον θα ΄λύνει κάπως το προβλημα, γι αυτούς που έχουν διαφορετικές αναλύσεις, ε;
γιατι όμως η συγγραφέας αναφέρθηκε σε browser;
τα διαφορετικά browser τι διαφορά έχουν; αλλάζουν και αυτά τον τρόπο πως φαίνεται μια ιστοσελίδα?
σας τρελλαινω... είμαι αρχάρια και δεν ξερω που να ρωτάω τέτοιες ερωτήσεις
σας ευχαριστώ

elenia
Δημοσιεύσεις: 46
Εγγραφή: 04 Ιουν 2008 18:56
Τοποθεσία: Κεφαλονιά

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από elenia » 16 Ιουν 2008 12:08

sibas εννοείς οτι είναι liquid και elastic το header σου επειδή οταν άλλαξα το resolution σε 800x600, όντως δεν σου το χάλασε;
ενώ το δικό μου το μετακίνησε δεξιά και αριστερά, γενικά άλλαξε την τοποθε΄σια των text, images;;;
μου δείχνετε ένα site με επαναλαμβανόμενο image ή bg?

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από vassilism » 16 Ιουν 2008 13:22

Η ανάλυση 800x600 έχει πλέον ξεπεραστεί (είναι ελάχιστοι αυτοί που την χρησιμοποιούν).
Ο μέσος χρήστης έχει ανάλυση στην οθόνη του 1024x768.
Αυτό όμως δεν λέει κάτι. Όταν φτιάχνεις ένα site πρέπει να καλύπτεις όλους τους χρήστες ανεξάρτητα της ανάλυσης της οθόνης.
Όσων αφορά τους browsers σε σχέση με την ανάλυση θα φαίνετε σε όλους το ίδιο, μπορεί να υπάρξουν μικροδιαφορές αλλά το τεστάρεις και τα διορθώνεις.
Αν θες στείλε μας σε φωτογραφία αυτό που ετοιμάζεις για να σε συμβουλέψουμε για ποια μέθοδο θα ακολουθήσεις.

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από vassilism » 16 Ιουν 2008 13:42

Σου δείχνω ένα παράδειγμα εικόνων που καλύπτουν όλο το πλάτος της οθόνης.
Βλέπε το header του freestuff.

Αυτό το header γίνετε ως εξής:
1 φτιάχνουμε έναν πίνακα με 1 γραμμή και 2 στήλες και του δίνουμε πλάτος 100%.
2 στην πρώτη στήλη του πίνακα βάζουμε την εικόνα 1 και δίνουμε στην στήλη του πίνακα το πλάτος της εικόνας 1 και ορίζουμε να μην επαναλαμβάνετε.

Κώδικας: Επιλογή όλων

background-repeat:no-repeat;
3 στην δεύτερη στήλη του πίνακα βάζουμε την εικόνα 2.
Συνημμένα
1.jpg
1.jpg (3.24 KiB) Προβλήθηκε 1720 φορές
2.jpg
2.jpg (674 Ψηφιολέξεις) Προβλήθηκε 1723 φορές

elenia
Δημοσιεύσεις: 46
Εγγραφή: 04 Ιουν 2008 18:56
Τοποθεσία: Κεφαλονιά

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από elenia » 16 Ιουν 2008 15:07

Βασίλη σ ευχαριστώ, αυτά μου φαίνονται ακόμα λίγο δύσκολα αν και κατάλαβα το concept...
την ιστοσελίδα που ετοιμάζω σαν πρώτο μάθημα θα σας την ανεβάσω ΟΠΩΣΔΗΠΟΤΕ. Την main σελίδα θα την κάνω με εικόνες που οταν τις πατάς θα σε παραπέμπουν σε άλλες σελίδες, κατι βασικά στα css (padding, margin, div etc), κατι απλο...
διαβάζω πολύ απο βιβλία που σου μαθαίνουν HTML, XHTML και CSS...
τον οκτωβρη θα παρακολουθησω online μαθηματα απο το εργαστηρι του ΕΜΠ, για να μάθω το dreamweaver...
εσείς που μάθατε να σχεδιάζετε (web design) πήγατε σε σχολή, μόνοι σας, πως γίνετε αυτό??? Αυτα που κάνω/θα κάνω βοηθούν ή τσάμπα τα κάνω και δεν πρόκειται ποτε να φτάσω σε επίπεδο καλό, διοτι πρέπει να έχεις παει σε σχολή πχ. computer science στο πανεπιστήμιο...????

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από ALR » 16 Ιουν 2008 15:28

Μην αγχώνεσαι. Είναι σίγουρο από τη στιγμή που θέλεις να μάθεις, θα μάθεις!
Να πάς εκεί που λές, όλα τα σεμινάρια είναι καλά και αν δε σου μάθουν κάτι, θα σου δώσουν το έναυσμα να το μάθεις μόνη σου.

Πέρα από το css & xhtml, θα πρέπει να ξέρεις ότι το web design, είναι design.
Οπότε θα πρέπει να λάβεις υπόψιν σου και τρόπους εκμάθησης του photoshop.
Σου προτείνω πέρα από τα σεμινάρια, να παρακολουθήσεις video tutorials για διάφορα προγράμματα.
Μια πολύ καλή σελίδα για τέτοια είναι το lynda.com.
Ψάξε για photoshop , css, web design, dreamweaver tutorials.
Γίνονται πραγματάκια

elenia
Δημοσιεύσεις: 46
Εγγραφή: 04 Ιουν 2008 18:56
Τοποθεσία: Κεφαλονιά

Απο το Photoshop στην ιστοσελιδα...

Δημοσίευση από elenia » 16 Ιουν 2008 16:30

Σε ευχαριστώ ALR. Ευτυχώς επειδή αγαπώ την φωτογρα΄φια έχω κάποια χρόνια "δουλέψει" πάνω στο Photoshop..
παραθετω και την ιστοσελίδα που έχω τις φωτο μου...
δεν είναι όλα digital art, αλλά έχω κάποια...

http://photo.net/photos/Nehlena

πάντως έχω βιβλία για photoshop και σε γενικές γραμμές δεν το φοβάμαι το πρόγραμμα αυτό...
αυτά που μαθαίνω φοβάμαιιιιιι :crybaby:
αλλά θα παλέψω... :yea:

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες