design site Fermé

Question

Bonjour, 

je me pose quelques questions a propos du design des sites web :

par exemple, pour faire une présentation du type de celle de ce site, est-ce que le css est suffisant, pour faire des icones de menu avec des formes particulieres, faire des dégradés , ....  ??
ou bien y a-t-il un langage autre et plus performant a connaitre ?

auriez vous un exemple de script du langage correspondant a me montrer ?

merci d'avance pour vos reponses.

Dora The Explorer · Answer

Salut!

Ce site utilise aussi du javascript je suppose mais pour la mise en page, oui c'est du css.
Faire un site "graphique" j'ai l'impression que c'est plus de la débrouille avec le placement et de la connaissance en The Gimp / Photoshop(création, logiciel de graphisme). Je suis éalement très intéressé par toutes les petites astuces / tutos pour créer un exemple précis mais qui nous fait engranger des connaissances. Si vous en avez, lâchez-les tous! (poke...arf)

Pour faire un dégradé sur ta page:
body{
background-image:url(image.jpg);
background-repeat:repeat-y
}
image.jpg étant une image de 1 pixel de largeur mais par contre assez longue.
Pour un seul élément ce doit être le même principe.

king · Answer

Ben disons que le CSS est plutôt la mise en place des divers éléments constituant le site, aussi bien graphiques que contenu.
Ce n'est pas une fin en soi puisqu'on peut y mêler le html (table), le javascript ou le php, Asp ...( c'est non exhaustif, ça dépend de ce que l'on veut obtenir au final, donc ce à quoi doit répondre le site etc.).
Les graphiques dépendent essentiellement de logiciels images (Il en existe un bon paquet, les 2 plus connus sont Photoshop [le leader] et Gimp [ le challenger]).

Sinon pour comprendre sur le tas, ben tu pompes un design gratuit et tu regardes comment il tourne...

aztazt · Answer

Et aussi, faire clic-droit > afficher la source sur de jolis site simples (pas CCC, trop complexes) et puis aller voir le CSS associé à la page dans la balide LINK en début de code HTML.
Il faut savoir qu'aujourd'hui, on ne code plus en HTML 4 mais en XHTML 1.0 (Strict ou Transitional le plus souvent) et en CSS 2 généralement.
Le CSS ne permet pas de "dessiner" mais de donner une apparence viduelle, un placement aux éléments du site.

Allez faire un tour sur l'excellent site alsacreations

Gihef · Answer

Bonjour,

Par exemple.
Dans le bloc de ta question dans cette page, CCM utilise, entre autres, ces quelques styles en CSS :#bloc_forum_actions2 {
	float: left;
	position:relative;
	width: 679px;
	margin: 5px 0 0 5px;
	overflow: hidden;
}
#bloc_forum_actions2 a.ecrir {
	float:left;
	background: transparent url(/template/blocs/bloc_20/pic_ecrir.png) no-repeat 5px 0px;
	font-weight: bold;
	padding: 0px 0 0px 22px;
}

#bloc_18 {
	float: left;
	width: 679px;
	margin: 10px 0 0 5px;
	background-color: #dfeaff;
	color: #000000;
	overflow: hidden;
}
#bloc_18 span.titre {
	display: block;
	background: #347cc3 url(/template/blocs/bloc_16/back_titre.jpg) repeat-x 0 100%;
	padding: 4px;
	color: #ffffff;
	font-weight: bold;
	border-bottom: 1px solid #3F6EFF;
}

#bloc_24 {
	float: left;
	width: 679px;
	margin: 10px 0 0 5px;
	color: #000000;
	overflow: hidden;
}

#bloc_24 #actions a.action_06 {
	display: block;
	background: transparent url(/template/blocs/bloc_24/actions_06.png) no-repeat 0 -21px;
	padding-left: 25px;
	line-height: 20px;
	color: black;
	font-weight: bold;
}

#bloc_24 #actions a.action_06:hover, #bloc_24 #actions a.action_06:hover {
	background: transparent url(/template/blocs/bloc_24/actions_06.png) no-repeat 0 0;
	color: white;
	text-decoration: none;
}pour gérer la présentation, la mise en page (positions sur la page, espacements, couleurs…)

On peut y voir l'utilisation de quelques images :
http://www.commentcamarche.net/template/blocs/bloc_16/back_titre.jpg
http://www.commentcamarche.net/template/blocs/bloc_24/actions_02.png
http://www.commentcamarche.net/template/blocs/bloc_24/actions_06.png

--

lloyd · Answer

Bonjour et merci à tous pour vos réponses,

donc, si j'ai bien compris, dans la plupart des cas, le css est suffisant, auquel on ajoute quelques petites images très basiques pour les icones ou autres trucs du genre, et dc pas besoin pour un débutant, a priori, de "s'embeter" avec photoshop

je vais jeter un oeil aux liens donnés

a+

Design site

5 réponses

Discussions similaires