Φτιάξτε την δική σας ιστοσελίδα (Μάθημα2α:CSS-Προετοιμασια)

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

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

Απάντηση
Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα2α:CSS-Προετοιμασια)

Δημοσίευση από Joakim » 21 Νοέμ 2010 09:54

Φτιάξτε την δική σας ιστοσελίδα(Μάθημα2α:CSS-Προετοιμασια)


ΠΡΟΣΟΧΗ, όσοι από εσάς δημιουργήσατε τα αρχεία του προηγούμενου μαθήματος πριν από την ημερομηνία 21 Νοε. 2010 παρακαλώ όπως αλλάξετε την μορφή της εικόνας από bmp σε jpg. Ευχαριστώ!

Λοιπόν, σε αυτό το μάθημα ουσιαστικά, θα προετοιμάσουμε το Css αρχείο μας, έτσι ώστε στο επόμενο μάθημα να προσθέσουμε τις ρυθμίσεις που εμείς θέλουμε.

Τι πρέπει να κάνουμε πριν αρχίσουμε.

1. Ανοίξτε τον Φάκελο ‘Website’ που δημιουργήσαμε στο προηγούμενο μάθημα

2. Δημιουργήστε μέσα σε αυτό έναν νέο φάκελο με την ονομασία ‘images’

3. Τώρα ανοίξτε εκ νέου το πρόγραμμα Fireworks και κόψετε ακόμα ένα κομμάτι που ξεχάσαμε με τις εξής ιδιότητες.

Διαστάσεις : W: 10 H: 250
Τοποθέτηση : Χ: 1000 Υ: 150
Έπειτα διπλό αριστερό κλικ στο επιλεγόμενο πεδίο που έχει εμφανιστή.
Βλέπουμε στην Οθόνη μας να εμφανίζετε το επιλεγμένο σημείο μόνο.
Ακολουθούμε την διαδικασία αποθήκευσης για αρχείο JPEG με ονομασία αρχείου menuback.
Ακολουθούμε την διαδικασία Edit > Undo ή Ctrl+Z για να μεταφερθούμε πίσω στην κανονική σελίδα μας.

4. Τώρα κλείστε το πρόγραμμα, και μετακινήστε τις εικόνες background,header,slider και menuback στον φάκελο που δημιουργήσαμε πιο πάνω με ονομασία ‘images’.

5. Ωραία, τώρα πηγαίνετε πίσω στον φάκελο ‘website’ και με δεξί κλικ δημιουργήστε ένα αρχείο TXT,και προσθέστε τα ακόλουθα, έπειτα αποθηκεύστε το απλά γράφοντας index.html .

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Freestuff tutorial&#58; by Joakim Liassides</title>

 <style type="text/css"> 
        body &#123; 
            background&#58;#333333 url&#40;images/background.jpg&#41; repeat-x scroll 0 0; 
        &#125; 
    </style> 

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<link rel="stylesheet" href="style1.css" type="text/css" />
</head>

<body>
<div id="pagewidth" >
	<div id="header"></div>
	<div id="wrapper" class="clearfix">
		<div id="diaxorismos"> 
			<div id="slider"></div>
			<div id="menu"></div> 
		</div>
	<div id="main"></div>
	<div id="footer"></div>
	</div>
</body>
</html>

Τον πιο πάνω κώδικα θα τον εξηγήσουμε στο μάθημα HTML, τώρα απλά αντιγράψετε τον, για να μπορούμε να δοκιμάσουμε τα αποτελέσματα του CSS μας.

6. Τώρα κλείστε αυτό το παράθυρο, και ανοίξτε ένα νέο αρχείο TXT, και αποθηκεύσετε το σαν style1.css

7. Τέλος βασικής προετοιμασίας



Style1.CSS - Δημιουργία


Σε ποιες εντολές θα επικεντρωθούμε &#8211; επεξήγηση

Πως δημιουργούμε ένα πλαίσιο ή στους κώδικες DIV

Ένα div μπορεί να δημιουργηθεί απλά γράφοντας

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

#header&#123;&#125;
Οι ιδιότητες αυτού πρέπει να συμπεριφερθούν μεταξύ των κελιών, κάθε εντολή τελειώνει με ένα ελληνικό ερωτηματικό (;)

Εντολές που θα μάθουμε

Ύψος
Η εντολή αυτή καθορίζει το ύψος του div μας

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

height&#58;100px;
όπου 100 το καθορισμένο ύψος.

Πλάτος
Η εντολή αυτή καθορίζει το πλάτος του div μας

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

width&#58;100px;
όπου 100 το καθορισμένο πλάτος.

Χρώμα επιφάνειας
Η εντολή αυτή καθορίζει το χρώμα ή την φωτογραφία φόντου του div μας

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

background-color&#58;#FFFFFF;
όπου FFFFFF το χρώμα του φόντου.

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

background-image&#58;url&#40;'images/foto.jpg'&#41;;
όπου ('images/foto.jpg') η τοποθεσία της φωτογραφίας μας.

Εισαγωγή
Με την έννοια αυτή καθορίζουμε από πού θα μπαίνει το κάθε div μας στον χώρο. Αυτό μπορεί να γίνετε είτε από αριστερά ή από δεξιά (left/right)

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

float&#58;left;
Τώρα, ξέρουμε τις βασικές εντολές που θα σας επιτρέψουν να επεξεργαστείτε την γραφική παράσταση της ιστοσελίδας σας. Ας την δημιουργήσουμε.


Μάθημα 2: Προετοιμασία style1.css



1. Ανοίγουμε το αρχείο μας style1.css

2. Κάνουμε επικόλληση των ακόλουθων σε αυτό

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

html, body&#123; 
 margin&#58;0; 
 padding&#58;0; 
 text-align&#58;center; 
&#125; 
 
#pagewidth&#123; 
 width&#58;1000px; 
 text-align&#58;left; 
 margin-left&#58;auto; 
 margin-right&#58;auto;  
&#125;  
 
#header&#123;
 position&#58;relative; 
 height&#58;150px; 
 background-image&#58;url&#40;'images/header.jpg'&#41;;
 width&#58;100%;
 display&#58;block;
 overflow&#58;auto;
&#125; 
 
/*afto to block kathorizei tis idiotites ton blocks menu kai slider ta opia tha vriskonte to ena dipla apo to allo */

#diaxorismos&#123;
 width&#58;1000px; 
 float&#58;left; 
 position&#58;relative; 
  &#125;
3. Τώρα αρχίζουμε να γράφουμε. Δημιουργείστε μόνοι σας ένα div με τις επόμενες ρυθμίσεις

Όνομα Div: menu
Float : right
width:120px
height:250px
Background: images/menuback.jpg
ΜΗΝ ΞΕΧΑΣΕΤΕ : κάθε εντολή τελειώνει με τον χαρακτήρα (;) και όλες οι εντολές πρέπει να βρίσκονται μεταξύ των κελιών του div ({})

4. Δημιουργία ακόμα ενός div

Όνομα Div: slider
Float : left
width:880px
height:250px
Background: images/slider.jpg
ΜΗΝ ΞΕΧΑΣΕΤΕ : κάθε εντολή τελειώνει με τον χαρακτήρα (;) και όλες οι εντολές πρέπει να βρίσκονται μεταξύ των κελιών του div ({})

5. Δημιουργία ακόμα ενός div

Όνομα Div: main
Float : left
width: 100%
height:450px
ΜΗΝ ΞΕΧΑΣΕΤΕ : κάθε εντολή τελειώνει με τον χαρακτήρα (;) και όλες οι εντολές πρέπει να βρίσκονται μεταξύ των κελιών του div ({})

6. Έπειτα κάντε επικόλληση τα ακόλουθα

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

#footer&#123;
 height&#58;150px; 
clear&#58;both;
 display&#58;block;
 overflow&#58;auto;
&#125; 
 
/* me ta parakto blocks den tha asxolithoume se afto to mathima, ostoso, kratisteta sto arxio sas*/ 
.clearfix&#58;after &#123;
 content&#58; "."; 
 display&#58; block; 
height&#58; 0; 
 clear&#58; both; 
 visibility&#58; hidden;
 &#125;
.clearfix&#123;display&#58; inline-block;&#125;
/* Hides from IE-mac \*/
* html .clearfix&#123;height&#58; 1%;&#125;
.clearfix&#123;display&#58; block;&#125;
/* End hide from IE-mac */  
@media print&#123; 
/*hide the right column when printing*/ 
#rightcol&#123;display&#58;none;&#125; 
#diaxorismos, #main&#123;width&#58;100%; float&#58;none;&#125;
&#125;
Τώρα, κάντε αποθήκευση το αποτέλεσμα, και ανοίξτε το αρχείο index.html με έναν browser. Δείτε το αποτέλεσμα!

Τώρα προσπαθήστε να παίξετε με τις ιδιότητες που μάθαμε αλλάζοντας τις μεταβλητές του και βλέποντας τις αντιδράσεις της ιστοσελίδας σας. Παρακαλώ όπως πριν ξεκινήσουμε το επόμενο μάθημα επαναφέρετε τις μεταβλητές σε αυτές που αναφέρονται στο παρόν μάθημα.
Τελευταία επεξεργασία από το μέλος Joakim την 21 Νοέμ 2010 23:16, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα2α:CSS-Προετοιμασια)

Δημοσίευση από geoki » 21 Νοέμ 2010 22:23

Joakim μπράβο ... καλό!!!

Άλλαξε ένα λάθος απο weight:100px; σε width:100px;

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

Πλάτος
Η εντολή αυτή καθορίζει το πλάτος του div μας

κώδικας&#58;
weight&#58;100px

όπου 100 το καθορισμένο πλάτος.

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα2α:CSS-Προετοιμασια)

Δημοσίευση από Joakim » 21 Νοέμ 2010 23:09

geoki έγραψε:Joakim μπράβο ... καλό!!!

Άλλαξε ένα λάθος απο weight:100px; σε width:100px;

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

Πλάτος
Η εντολή αυτή καθορίζει το πλάτος του div μας

κώδικας&#58;
weight&#58;100px

όπου 100 το καθορισμένο πλάτος.
op nasai kala, den to eixa prose3i! :hammer:


thetotal1990
Δημοσιεύσεις: 2
Εγγραφή: 29 Νοέμ 2010 04:38

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα2α:CSS-Προετοιμασια)

Δημοσίευση από thetotal1990 » 29 Νοέμ 2010 04:53

joakim anoigw to index kai mou bgazei mia griza selida......anebase an boreis ligo to apotelesma pou perimenoume.den kserw pou exw kanei lathos....euxaristw

thetotal1990
Δημοσιεύσεις: 2
Εγγραφή: 29 Νοέμ 2010 04:38

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα2α:CSS-Προετοιμασια)

Δημοσίευση από thetotal1990 » 29 Νοέμ 2010 09:23

thetotal1990 έγραψε:joakim anoigw to index kai mou bgazei mia griza selida......anebase an boreis ligo to apotelesma pou perimenoume.den kserw pou exw kanei lathos....euxaristw
ok nomizw to brika apla an sou einai eukolo anevase auto pou perinoume na bgei....

NIghtwalker
Δημοσιεύσεις: 3
Εγγραφή: 15 Νοέμ 2010 15:43

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα2α:CSS-Προετοιμασια)

Δημοσίευση από NIghtwalker » 10 Δεκ 2010 21:27

καλησπερα...
μια μικρη βοηθεια.. εε για ακομα πιο αρχαριους! οταν λες ανοιξτε το ταδε αρχειο με browser τι ενοεις? συγνωμη αν η ερωτηση ειναι βλακοδης :/
ευχαριστω
(αν εχω καταλαβει καλα βεβαια.. εμενα μου βγαζει απλα το κειμενο του intex στο mozila.firefox με το οποιο το ανοιγω δλδ)

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα2α:CSS-Προετοιμασια)

Δημοσίευση από Joakim » 10 Δεκ 2010 22:22

NIghtwalker έγραψε:καλησπερα...
μια μικρη βοηθεια.. εε για ακομα πιο αρχαριους! οταν λες ανοιξτε το ταδε αρχειο με browser τι ενοεις? συγνωμη αν η ερωτηση ειναι βλακοδης :/
ευχαριστω
(αν εχω καταλαβει καλα βεβαια.. εμενα μου βγαζει απλα το κειμενο του intex στο mozila.firefox με το οποιο το ανοιγω δλδ)
kalispera, otan leo anigoume me ton BROWSER mas enooume Ton Internet Explorer,Google Chrome,Mozila ktl.

Απάντηση

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

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

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