Εκκίνηση απο PSD Tamlate

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

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

Απάντηση
Άβαταρ μέλους
kskpatra
Δημοσιεύσεις: 29
Εγγραφή: 01 Νοέμ 2005 23:49
Τοποθεσία: Πάτρα
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από kskpatra » 06 Αύγ 2008 15:21

Παιδιά θέλω και εγώ μια βοήθεια (σιγά μην δεν ήθελα.)

Έχω κατεβάσει PSD template για ιστοσελίδα.
Το ανοίγω με το Photoshop και το κοιτώ και με κοιτά.
Έως εκεί καλά μετά τι κάνουμε?

Πως δηλαδή από αυτό το template θα γίνει ολόκληρο site.

Οι γνώσεις μου περιορίζονται σε Photoshop, FrontPage και ελάχιστα για html.
Σας παρακαλώ εάν γίνετε να μην με σκοτώσετε με Joumbla ενώ με χαρά θα άκουγα βοήθεια για Dream Waver (που δεν έχω ακόμα καμία επαφή)

To site που θέλω να κατασκευάσω αφορά ένα φωτογραφείο.
Ντρέπομαι να αναφέρω διεύθυνση γιατί είναι πολύ άσχημο ακόμα.
Εικόνα

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

Εκκίνηση απο PSD Tamlate

Δημοσίευση από ALR » 06 Αύγ 2008 15:49

Καταρχήν λές όλα τα ονόματα λάθος :)

Δεύτερον ο σωστός τρόπος είναι να γράψεις εσύ κώδικα xhtml και css και επάνω του να εφαρμόσεις τα κομάτια της template. Αλλά προφανώς κάτι τέτοιο ίσως δεν είναι εφικτό λόγω γνώσεων.
Κάτι πιο απλό είναι να κόψεις ( slices - slice tool ) με το slice εργαλείο του photoshop την template ανάλογα με το από ποια κομάτια αποτελείται.

Footer - Πλευρική στήλη - επάνω μέρος - λογότυπο - μενού κτλ, αλλά και πάλι θα πρέπει να ξέρεις τη βασική φιλοσοφία των μερών που αποτελείται ένα website.

Μετά περνάς την template στο imageready και την κάνεις export for the web. Σου εξάγει ένα αρχείο html με έτοιμο κώδικα και αρχεία φωτογραφίας έτσι όπως επέλεξες εσύ να κοπούν.
Γίνονται πραγματάκια

Άβαταρ μέλους
The Razor
Δημοσιεύσεις: 1940
Εγγραφή: 10 Φεβ 2007 12:37
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από The Razor » 06 Αύγ 2008 15:50

Το κανεις export στο imageready και απο εκεί το κόβεις με slices και export to html...

Mην με ρωτήσεις πως γίνεται γιατί δεν το έχω κάνει.. πάντως αυτά είναι τα βήματα νομιζω

edit: με πρόλαβε ο alr

Άβαταρ μέλους
selemeles
Δημοσιεύσεις: 464
Εγγραφή: 23 Νοέμ 2006 12:42
Τοποθεσία: Άνω Λιόσια
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από selemeles » 06 Αύγ 2008 15:53

ALR έγραψε:Δεύτερον ο σωστός τρόπος είναι να γράψεις εσύ κώδικα xhtml και css και επάνω του να εφαρμόσεις τα κομάτια της template.
Αν κατάλαβα σωστά ενοείες να μην κοπεί το template σε εικονάκια κλπ κλπ, δηλαδή όπως είναι με xhtml το "κουμπώνουμε" και παίζει; Αν ναι πως γίνεται αυτό, τι αρνητικά και τι θετικά έχει;
:: Blue Webeyes :: www.bwe.gr
-----------------------------------------------------
έπιπλα κουζίνας

Άβαταρ μέλους
kskpatra
Δημοσιεύσεις: 29
Εγγραφή: 01 Νοέμ 2005 23:49
Τοποθεσία: Πάτρα
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από kskpatra » 06 Αύγ 2008 16:04

Για αρχή ευχαριστώ για την άμεση απάντηση.

«Footer - Πλευρική στήλη - επάνω μέρος - λογότυπο - μενού κτλ»
Καταλαβαίνω τουλάχιστον τι θέλεις να πεις.
ALR έγραψε: Μετά περνάς την template στο imageready και την κάνεις export for the web. Σου εξάγει ένα αρχείο html με έτοιμο κώδικα και αρχεία φωτογραφίας έτσι όπως επέλεξες εσύ να κοπούν.
Imageready στο CS3 που θα το βρω έψαξα στα βοηθήματα και αυτά που λες τα βρήκα. Δεν μπορώ να τα βρω στο CS3.

Και πως βάζω και τα link για της υπόλοιπες σελίδες?

Δες και την σελίδα να καταλάβεις τις ελάχιστες γνώσεις που έχω.
Δεν θέλω σχόλια ξέρω ότι είναι τερατούργημα. Αλλά βοήθησε και ο φίλος μου.

www.golfinos.com
Εικόνα

XAndreasX
Δημοσιεύσεις: 194
Εγγραφή: 29 Ιουν 2008 23:36

Εκκίνηση απο PSD Tamlate

Δημοσίευση από XAndreasX » 06 Αύγ 2008 18:58

kskpatra έγραψε: Imageready στο CS3 που θα το βρω έψαξα στα βοηθήματα και αυτά που λες τα βρήκα. Δεν μπορώ να τα βρω στο CS3.

Και πως βάζω και τα link για της υπόλοιπες σελίδες?

Δες και την σελίδα να καταλάβεις τις ελάχιστες γνώσεις που έχω.
Δεν θέλω σχόλια ξέρω ότι είναι τερατούργημα. Αλλά βοήθησε και ο φίλος μου.

www.golfinos.com
Το CS3 δεν εχει Imageready 8)
Αφου κόψεις με το slice tool πας file ->save for the web & Devices

kskpatra έγραψε: Και πως βάζω και τα link για της υπόλοιπες σελίδες?

www.golfinos.com
δεν το καταλαβα :-?
-----------------

Άβαταρ μέλους
kskpatra
Δημοσιεύσεις: 29
Εγγραφή: 01 Νοέμ 2005 23:49
Τοποθεσία: Πάτρα
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από kskpatra » 07 Αύγ 2008 00:42

XAndreasX έγραψε:
kskpatra έγραψε: Και πως βάζω και τα link για της υπόλοιπες σελίδες?
δεν το καταλαβα :-?
Το site δεν έχει μία μόνο σελίδα αφού προσθέσω ένα κουμπί πως θα του ορίσω που οδηγεί αυτό?

thanks
Εικόνα


Άβαταρ μέλους
kskpatra
Δημοσιεύσεις: 29
Εγγραφή: 01 Νοέμ 2005 23:49
Τοποθεσία: Πάτρα
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από kskpatra » 07 Αύγ 2008 03:08

The Razor έγραψε:

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

<a href=to url pou theleis><img src=to url ths eikonas></a>
Elpizo na ennois afto.
Αυτό εννοώ αλλά μέσα από το Photoshop.
Εικόνα

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από Basilakis » 07 Αύγ 2008 03:24

Δεν μπορείς μέσα απο το photoshop. Πρέπει να κάνεις όλα τα υπόλοιπα

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Εκκίνηση απο PSD Tamlate

Δημοσίευση από patriot » 07 Αύγ 2008 03:40

Να αφήσεις τα photoshop-ια (που δεν κάνουν έτσι και αλλιώς τίποτα που να έχei σχέση με την html) και να ασχοληθείς με την εκμάθησης της ίδιας της html. Ποιο πολύ θα σε βοηθήσει.

Εξάλλου, το θέμα δεν είναι να γνωρίζεις την βασική html (που την γνωρίζεις ήδη) αλλά το γενικό σύνολο ιδεών του τι σημαίνει "κατασκευάζω ιστοσελίδα". Από την στιγμή που θα πιάσεις το νόημα μετά δεν θα έχεις πρόβλημα. Και δεν θα χρειάζεσαι.... photoshop :P

Λέγοντας ότι γνωρίζεις ήδη την html εννοώ ότι η εκμάθηση της είναι τόσο εύκολη όσο τα πράγματα που γνωρίζεις ήδη. Αν π.χ ξέρεις ότι ο άνθρωπος έχει κεφάλι, σώμα, πόδια κ.τ.λ τότε ξέρεις html. Αν γνωρίζεις ότι μια έκθεση έχει φράσεις και προτάσεις, κόμματα και τελείες τότε γνωρίζεις html!! ΤΟΣΟ εύκολη είναι. Απλά κανείς δεν στο εξήγησε αυτό. Επαναλαμβάνω: Από την στιγμή που θα πιάσεις το νόημα μετά δεν θα έχεις πρόβλημα. Και αυτό ακριβώς είναι το νόημα. Ότι η html βασίζεται σε πράγματα που γνωρίζεις ήδη.

Να ένα παράδειγμα. Ας πούμε το κεφάλι του ανθρώπου έχει μάτια, μύτη, στόμα, κ.τ.λ.... όλα αυτά κάνουν ένα σύνολο. Σωστά; Μετά, το σώμα.... έχει και αυτό κάποια άλλα πράγματα που κάνουν ένα σύνολο. Μετά, τα πόδια και τα χέρια έχουν και αυτά ένα σύνολο. Αποτέλεσμα; ΟΛΑ αυτά τα σύνολα μετατρέπονται σε υποσύνολα του ολοκληρωτικού συνόλου. Όλα μαζί κάνουν τον άνθρωπο. Το ίδιο ισχύει και με την html.

Η html έχει και αυτή με την σειρά της κάποια σύνολα και υποσύνολα. Και πολύ λογικά ξεκινάς με το κεφάλι. Μετά με το σώμα, μετά, μετά, μετά..... και τέλος καταλήγεις στην ολοκλήρωση της σελίδας. Αρκεί να ξέρεις που ταιριάζει τι. Δηλ ποιο όνομα (π.χ μάτια) είναι στο ποιο σημείο (π.χ κεφάλι και όχι σώμα)

Στο θέμα "άνθρωπος" τα πράγματα έχουν όνομα. Π.χ η μύτη έχει το όνομα "μύτη". Τα μάτια έχουν το όνομα "μάτια" κ.τ.λ.... Στην html όμως τι ονόματα υπάρχουν; Άσε με να μαντέψω: Κάτι ακαταλαβίστικα, που θα κάνεις κάτι αιώνες να μάθεις. Σωστά; ΛΑΘΟΣ! Θα το ξαναπώ: Η html βασίζεται σε πράγματα που γνωρίζεις ήδη.

Την λίστα των ονομάτων του ανθρώπου (μάτια, μύτη, στόμα κ.τ.λ) την έμαθες από μωρό. Ούτε που κατάλαβες το πως. Την λίστα της html πότε την έμαθες; Ε, σε μια λίγο που μεγάλη ηλικία από τότε που ήσουν μώρο. Στο δημοτικό για να ακριβολογούμε. Εκεί δεν έμαθες τι σημαίνει "παράγραφος", "φράση", "πρόταση"; Ε, εκεί έμαθες και html. Η html δεν διαφέρει σε συντακτικό. Άμα ξέρεις την λίστα είσαι εντάξει.

Που θα την βρεις την λίστα; Ουουουου.... υπάρχουν χιλιάδες σελίδες στο internet που θα την βρεις. Πάρε μερικές για παράδειγμα:

w3 (η "μαμά" εταιρία της html)
werbach
htmlhelp
htmldog
quackit
w3schools
htmlcodetutorial.com
web-source
htmlclinic

Δες, σύγκρινε, πρόσεξε και επεξεργάσου τις διαφορές μεταξύ των σελίδων αυτών και θα δεις ότι παντού λέει σχεδόν το ίδιο.

Για να δεις το πόσο εύκολο είναι πες μου. Όταν γράφεις μια έκθεση δεν την χωρίζεις σε παραγράφους; Ε, στην έκθεση το λέμε "παράγραφοι". Στην html το λέμε "p" (εν συντομία του paragraph... βέβαια αυτό δεν μπορεί να ισχύσει για όλες τις εντολές της html.... Θα γινόταν χαμός). Ή όταν γράφεις τίποτα ψώνια για το σούπερ μαρκετ δεν γράφεις "1)", "2)", "3)", κ.τ.λ, δηλ μια λίστα; Ε, και στην html έτσι το γράφουμε: list. Δεν είναι δύσκολο έτσι δεν είναι;

Και μάλιστα για να ξεχωρίσεις τις εντολες της html από το κανονικό κείμενο (γιατί τι θα γίνει αν κάποιος θέλει να βάλει ένα "p" για άλλο λόγο; ) τότε περικλείουμε το "p" με τα λεγόμενα brackets, δηλ αυτά: < και >. Έτσι ο browser ξερει ότι αυτό είναι εντολή html. Παράδειγμα:

<κάποια εντολή>

Και για να ξέρει που τελειώνει η html (γιατί κάθε αρχή έχει και κάποιο τέλος) βάζουμε και ένα / στο τέλος της εντολής και τελειώσαμε. Παράδειγμα

<αρχή κάποιας εντολής ας πούμε της P>
Το κείμενο της παραγράφου εδώ
</τέλος της εντολής>

Οι σελίδες που σου έδωσα παραπάνω γράφουν όλες τις εντολές της html (τα html tags όπως λέγονται). Αρκεί να βάλεις και λίγη λογική μέσα ε; Π.χ το "κεφάλι" (header) είναι για να σκέφτεται το που θα μπει μια παράγραφος όχι για να γράψεις την ίδια την παράγραφο μέσα.... Εννοείται αυτό.

Λοιπόν πιστεύω ότι μετά το μικρό αυτό μάθημα να ξεκινήσεις την html. Είναι πανεύκολη. (Το ξέρεις ότι εγώ έκανα ποιο πολύ ώρα για να τα γράψω από ότι εσύ για να τα μάθεις; Τόσο εύκολη!!)
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

Εκκίνηση απο PSD Tamlate

Δημοσίευση από ALR » 07 Αύγ 2008 10:00

selemeles έγραψε:
ALR έγραψε:Δεύτερον ο σωστός τρόπος είναι να γράψεις εσύ κώδικα xhtml και css και επάνω του να εφαρμόσεις τα κομάτια της template.
Αν κατάλαβα σωστά ενοείες να μην κοπεί το template σε εικονάκια κλπ κλπ, δηλαδή όπως είναι με xhtml το "κουμπώνουμε" και παίζει; Αν ναι πως γίνεται αυτό, τι αρνητικά και τι θετικά έχει;
Βασικά εννοώ ότι καθώς σχεδιάζεις την template, ταυτόχρονα φαντάζεσαι το πως θα είναι γραμμένος ο κώδικας. Έπειτα τον γράφεις, και τέλος κόβεις από την template που έχεις σχεδιάσει ότι χρειάζεσαι και ότι δεν μπορεί να γίνει με css και το "κουμπώνεις" όπως λές, στα σημεία που θέλεις.
Δεν έχει αρνητικά αυτό :)
Γίνονται πραγματάκια

Άβαταρ μέλους
kskpatra
Δημοσιεύσεις: 29
Εγγραφή: 01 Νοέμ 2005 23:49
Τοποθεσία: Πάτρα
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από kskpatra » 07 Αύγ 2008 13:40

patriot έγραψε:
Λοιπόν πιστεύω ότι μετά το μικρό αυτό μάθημα να ξεκινήσεις την html. Είναι πανεύκολη. (Το ξέρεις ότι εγώ έκανα ποιο πολύ ώρα για να τα γράψω από ότι εσύ για να τα μάθεις; Τόσο εύκολη!!)
Τέλειο το μάθημα κατανοητό και λιτό.
Ευχαριστώ πάρα πολύ αλλά. (πάντα υπάρχει ένα αλλά)
Αυτά που μου λες τα ήξερα από την αρχή.
Το γράφω και στο πρώτο post.
Μιλάμε πάντα για καθαρή HTML και όχι για τα υπόλοιπα (java, script, sql κλπ)
Δεν έχω όρεξη βέβαια να δημιουργήσω site στο Notepad.
Ένα απλό site να διαφημίζει ένα μαγαζάκι.
Είναι κρίμα να βλέπεις ένα φίλο να του ζητούν 500 ευρώ για ένα αντικείμενο που έχει κόστος γύρω στα 30 ευρώ.
Ναι να ασχοληθώ με κάποιο πρόγραμμα αλλά σαν αρχάριος δεν είναι εύκολη δουλειά τα βλέπεις όλα βουνό.
Εικόνα

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

Εκκίνηση απο PSD Tamlate

Δημοσίευση από ALR » 07 Αύγ 2008 14:10

Αν νομίζεις ότι 30 ευρώ κοστίζει να διαφημίσεις ένα οποιοδήποτε μαγαζάκι είσαι λάθος. Το δυσφημίζει θα έλεγα.
Το ότι μπορείς να μάθεις να κάνεις εσύ σελίδες, δε μειώνει την αξία ενός σωστού website και 500 ευρώ είναι λίγα.

Αν κάποτε, που στο εύχομαι, φτάσεις σε ένα επίπεδο που θα μπορείς να παράγεις ποιοτικά από άποψη άρτιας διαφήμισης, websites, Θα καταλάβεις τι εννοώ :)
Γίνονται πραγματάκια

Άβαταρ μέλους
kskpatra
Δημοσιεύσεις: 29
Εγγραφή: 01 Νοέμ 2005 23:49
Τοποθεσία: Πάτρα
Επικοινωνία:

Εκκίνηση απο PSD Tamlate

Δημοσίευση από kskpatra » 07 Αύγ 2008 15:45

ALR έγραψε:Αν νομίζεις ότι 30 ευρώ κοστίζει να διαφημίσεις ένα οποιοδήποτε μαγαζάκι είσαι λάθος. Το δυσφημίζει θα έλεγα.
Το ότι μπορείς να μάθεις να κάνεις εσύ σελίδες, δε μειώνει την αξία ενός σωστού website και 500 ευρώ είναι λίγα.

Αν κάποτε, που στο εύχομαι, φτάσεις σε ένα επίπεδο που θα μπορείς να παράγεις ποιοτικά από άποψη άρτιας διαφήμισης, websites, Θα καταλάβεις τι εννοώ :)
Μίλησα για το κόστος για την φιλοξενία. Τα 500 ευρώ είναι για δημιουργία γύρω στις 10 σελίδες. Εάν υπάρχουν πολλές εταιρίες για τους λίγους πελάτες δεν φταίμε εμείς που οι σωστές εταιρίες άφησαν άλλους να κάνουν αρπάχτες.

Αφού είσαι στον χώρο αυτά σίγουρα τα ξέρεις.
Εγώ προσωπικά δεν θέλω να βγάλω χρήματα από αυτό είμαι επαγγελματίας σε άλλο τομέα. Η κοροϊδία είναι αυτή που με πειράζει.
Είναι σίγουρο ότι η ημιμάθεια μερικές φορές είναι χειρότερη από την αμάθεια αλλά πάντα σε βοηθά να μην σε κοροϊδεύουν σε μεγάλο βαθμό οι συνεργάτες σου.
Εικόνα

Απάντηση

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

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

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