CSS | Προετοιμασία για την ανάπτυξη της σελίδας

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS | Προετοιμασία για την ανάπτυξη της σελίδας

Δημοσίευση από manolism » 01 Μαρ 2010 11:21

Ξεκινάμε σήμερα μία σειρά βοηθημάτων σχετικά με την κατασκευή μίας ιστοσελίδας με τη χρήση των css, και όχι μόνο. Για την ιστοσελίδα αυτή θα χρησιμοποιήσουμε το template που θα βρούμε στη σελίδα http://sixrevisions.com/tutorials/photo ... photoshop/ .

Το template αυτό μπορείτε να το κατεβάσετε έτοιμο ή αν θέλετε να το δημιουργήσετε μόνοι σας μέσα από το βοήθημα που βρίσκεται στην παραπάνω σελίδα.

Τι θα χρειαστούμε:

Το Notepad των Windows
Έναν οποιονδήποτε Web Browser (εκτός του ΙΕ 6 :D )
Τα αρχεία των εικόνων που θα χρησιμοποιηθούν μπορείτε να τα κατεβάσετε από ΕΔΩ

Η κατασκευή αυτή έχει καθαρά εκπαιδευτικό σκοπό και δεν είναι δυνατή η χρήση της για προσωπικούς ή επαγγελματικούς λόγους χωρίς την άδεια του σχεδιαστή Waheed Akhtar. Ο κώδικας που θα δοθεί μπορεί να χρησιμοποιηθεί ελεύθερα. Η εμφάνιση έχει ελεγχθεί στους Web Browsers Internet Explorer 7, 8, Opera 10.10, Firefox 3.6, Safari 4.0.4. Google Chrome 4.0.2

Έναρξη

1. Πρώτα απ' όλα θα δημιουργήσουμε ένα φάκελο στην επιφάνεια εργασίας ή όπου αλλού θέλουμε με όνομα page.
2. Στη συνέχεια αφού έχουμε κατεβάσει τα απαραίτητα αρχεία εικόνων που θα χρησιμοποιηθούν αφού τα αποσυμπιέσουμε θα τα τοποθετήσουμε μέσα σε ένα φάκελο με όνομα images που θα βρίσκεται μέσα στο φάκελο page.
Εικόνα
3. Ανοίγουμε το Notepad των Windows και αντιγράφουμε τον παρακάτω κώδικα.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

</body>

</html>
Το αρχείο αυτό θα το αποθηκεύσουμε μέσα στο φάκελο page με όνομα index.html όπως βλέπουμε στην παρακάτω εικόνα.
Εικόνα
4. Με το Notepad δημιουργούμε ένα ακόμα αρχείο και το αποθηκεύουμε στο φάκελο page με όνομα layout.css.
5. Στο αρχείο index.html εισάγουμε την παρακάτω γραμμή κάτω από τη γραμμή <title>Untitled Document</title>

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

<link href="layout.css" rel="stylesheet" type="text/css" />
Με αυτό τον τρόπο συνδέουμε το αρχείο Css με το αρχείο Html
6. Ας αλλάξουμε και το αντιαισθητικό <title>Untitled Document</title> σε

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

<title>Smashing Dzine</title>
Μέχρι τώρα έχουμε λοιπόν:

Ένα φάκελο page που περιέχει ένα φάκελο με όνομα images, ένα αρχείο με όνομα index.html και ένα αρχείο με όνομα layout.css
Το φάκελο images που περιέχει τις εικόνες που κατεβάσαμε.
Τα συνδεδεμένα αρχεία index.html και layout.css
Το βασικό σκελετό html μέσα στο index.html

Αύριο θα δημιουργήσουμε το βασικό σκελετό της ιστοσελίδας και την περιοχή του Header

gi0rg0s
Δημοσιεύσεις: 155
Εγγραφή: 25 Ιούλ 2009 06:13

CSS | Προετοιμασία για την ανάπτυξη της σελίδας

Δημοσίευση από gi0rg0s » 04 Δεκ 2011 19:13

Να πούμε και στους φίλους ότι καλό είναι να χρησιμοποιούν και ένα css reset

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

/* http&#58;//meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License&#58; none &#40;public domain&#41;
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video &#123;
	margin&#58; 0;
	padding&#58; 0;
	border&#58; 0;
	font-size&#58; 100%;
	font&#58; inherit;
	vertical-align&#58; baseline;
&#125;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section &#123;
	display&#58; block;
&#125;
body &#123;
	line-height&#58; 1;
&#125;
ol, ul &#123;
	list-style&#58; none;
&#125;
blockquote, q &#123;
	quotes&#58; none;
&#125;
blockquote&#58;before, blockquote&#58;after,
q&#58;before, q&#58;after &#123;
	content&#58; '';
	content&#58; none;
&#125;
table &#123;
	border-collapse&#58; collapse;
	border-spacing&#58; 0;
&#125;
:think: Γιατί μπαμπά; :think: - Απαντήσεις σε θέματα που όλοι έχουμε σκεφτεί παρατηρώντας την καθημερινή ζωή ! Kαι γνωμικά για να μαθαίνουμε :)

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

CSS | Προετοιμασία για την ανάπτυξη της σελίδας

Δημοσίευση από panosru » 05 Δεκ 2011 03:20

Εδώ θα βρείτε λίστα με αρκετούς text/code editors για Mac OS X :) Κάποια είναι free κάποια άλλα commercials

Προσωπικά δουλεύω με Textmate όταν έχω να κάνω με front-end development και όταν ένα project έχει front-end + back-end ή κάποιο framework ή εμ πάση περιπτώσει δεν είναι απλά ένα html/css/javascript project Δουλεύω με Zend Studio :) Δυστηχώς και τα 2 είναι commercial αλλά ότι πληρώνεις παίρνεις.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

CSS | Προετοιμασία για την ανάπτυξη της σελίδας

Δημοσίευση από panosru » 05 Δεκ 2011 03:26

ένα άλλο html4 reset που προτιμάνε οι περισσότεροι front-end devs είναι αυτό του YUI foundation

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

/* base.css, part of YUI's CSS Foundation */
h1 &#123;
	/*18px via YUI Fonts CSS foundation*/
	font-size&#58;138.5%;  
&#125;
h2 &#123;
	/*16px via YUI Fonts CSS foundation*/
	font-size&#58;123.1%; 
&#125;
h3 &#123;
	/*14px via YUI Fonts CSS foundation*/
	font-size&#58;108%;  
&#125;
h1,h2,h3 &#123;
	/* top & bottom margin based on font size */
	margin&#58;1em 0;
&#125;
h1,h2,h3,h4,h5,h6,strong &#123;
	/*bringing boldness back to headers and the strong element*/
	font-weight&#58;bold; 
&#125;
abbr,acronym &#123;
	/*indicating to users that more info is available */
	border-bottom&#58;1px dotted #000;
	cursor&#58;help;
&#125; 
em &#123;
	/*bringing italics back to the em element*/
	font-style&#58;italic;
&#125;
blockquote,ul,ol,dl &#123;
	/*giving blockquotes and lists room to breath*/
	margin&#58;1em;
&#125;
ol,ul,dl &#123;
	/*bringing lists on to the page with breathing room */
	margin-left&#58;2em;
&#125;
ol li &#123;
	/*giving OL's LIs generated numbers*/
	list-style&#58; decimal outside;	
&#125;
ul li &#123;
	/*giving UL's LIs generated disc markers*/
	list-style&#58; disc outside;
&#125;
dl dd &#123;
	/*giving UL's LIs generated numbers*/
	margin-left&#58;1em;
&#125;
th,td &#123;
	/*borders and padding to make the table readable*/
	border&#58;1px solid #000;
	padding&#58;.5em;
&#125;
th &#123;
	/*distinguishing table headers from data cells*/
	font-weight&#58;bold;
	text-align&#58;center;
&#125;
caption &#123;
	/*coordinated marking to match cell's padding*/
	margin-bottom&#58;.5em;
	/*centered so it doesn't blend in to other content*/
	text-align&#58;center;
&#125;
p,fieldset,table &#123;
	/*so things don't run into each other*/
	margin-bottom&#58;1em;
&#125;

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

CSS | Προετοιμασία για την ανάπτυξη της σελίδας

Δημοσίευση από panosru » 05 Δεκ 2011 03:31

Για html5 reset πλέον όλοι δουλεύουν με αυτό του html5 boilerplate εδώ: https://github.com/h5bp/html5-boilerpla ... /style.css το πρώτο πράμα που κάνω πάντα είναι να αλλάζω αυτό το ροζάκι που έχουν σαν χρώμα για το selection, όποιος θέλει να το αλλάξει απλά ας αλλάξει τις τιμές του background από εδώ:

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

&#58;&#58;-moz-selection &#123; background&#58; #fe57a1; color&#58; #fff; text-shadow&#58; none; &#125;
&#58;&#58;selection &#123; background&#58; #fe57a1; color&#58; #fff; text-shadow&#58; none; &#125;
Εκτός αν σας αρέσει το ροζάκι τότε το αφήνετε ως έχει :P


Ο λόγος που έδωσα link αντί για code είναι γιατί το html5 boilerplate έχει συχνά updates :)

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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