Sujet : Bien utiliser le css pour reussir un design
Sous-titre : Un design reussi ca vous tente ?
-------------------------------------------------------------------------------
Parties redigees par Craw : le 24/01/06 sur le sujet : Bien utiliser le css pour reussir un design
Salut les zeros
Vous revez tous d'un beau design pour votre site web si je ne me trompe ?
Bien vous etes tomber sur le bon topic ici vous pourrais du moins apprendre a maitriser les proprietes importantes du css pour reussir un design tres correct.Ce qui est surligner et en gras en noir est tres important car ceci explique qui ne sagira en aucun cas de codage mais de simple explication pouvant aboutir a un excellent resultat ( confirmer j'ai essayer )
Je vais partager mon topic en plusieurs parties pour etre le plus clair possible.
SOMMAIRE :
I. Definition propre et explication
II. Application des proprietes du css sur une page
III. Application des images sur une page
IV. Le tout = il ne reste plus qu'a modifier le contenu
V. Droits d'utilisateurs et Copyright
Avant de lire ce topic a titre informatif, merci de prendre en tete que vous ne devez en aucun cas negliger l'un de ces paragraphes ou autres ... ceci pourrait gravement nuir au deroulement de votre design.
I.Definition propre et explication.
Parties de ce paragraphe :
[Definition du design et du css]
[Explication de la fonction d'un design]
[Rendre le plus accessible possible son site]
[Fiche pratique d'information P.1]
Partie 1 : Definition du design et du css
Beaucoup de gens croient a la beaute, a la presentation ou encore au contenu de leur site web. Un design a ete reduit a neant a cause de l'homme. Revenons a la racine du mot ' design ' ==> Le design d'un site web c'est quoi ?
Pour etre tres tres precis, un design s'applique selon le sujet de votre site web et selon vos gouts, si un site web thematique s'approprit un design n'ayant rien a voir avec son sujet je dis : Site nul au contraire si la personne a prit le temps de reflechir a un design collant le plus possible a son sujet et lui plaisant je dis :
Site correct
Et ce n'est pas tout ...
Le design concentre aussi le temps de travail donne par la personne il ne s'agit pas de faire un design en 5minutes a la rache
Encore un autre exemple ... les kits graphiques ne sont vraiment vraiment pas des exemples car souvent vous n'avez pas le choix ou les kits sont payants et vous prenez le moins cher celui qui ne colle pas du tout au sujet de votre site et de peu que parfois ces kits sont mal installes donc je dis :
Kit graphique = site debutant du moins pour les gens qui veulent un design minimal
et ...
Design original ( css ... ) = site professionnel de ventes ... pour un design correct et qui colle au sujet.
Il s'agit egalement de rendre votre site le plus accessible possible de facon a bien naviguer ( voir aussi doc.3 de ce paragraphe)
Le css au contraire lui permet de nombreux travaux graphiques.
Partie 2 : Explication de la fonction d'un design
Trop de gens croient que le design sert a faire beau a embellir vos pages web ou encore a bien presenter ...
C'est faux 0/20
Beh ... pourquoi c'est faux ?
C'est faux ! Car, un design comme je l'ai expliquer ci dessus doit coller au sujet de son site.
Appliquons maintenant l'explication du mot ' fonction '
La fonction d'une chose : Action donne par la chose produisant tel chose ...
La fonction du design : Action du design produisant ...
Completons cette phrase
Action du design produisant un effet a votre site web, un theme radical qui colle le plus possible, un temps de naviguation reduit le plus possible, un fond qui colle avec le site, une lisibilite/visibilite tres correct.
En effet si j'ecris vert sur vert ca ne le fait pas
Il faut donc aussi savoir choisir les couleurs pareil pour les titres ...
Vous devez egalement mettre en valeur le plus possible par le biais d'une banniere le nom de votre site , mettez vos titre en valeur en y appliquant du gras , del 'italique ... variez les couleurs et les genres partagez egalement en plusieurs parties si possible votre site pour etre clair et precis.
Partie 3 : Rendre le plus accessible possible son site
Exemple de site correct : Site adoptant une visibilite correct, des titres entierement informatif et precis et mit en valeurs, un bon orthographe, surtout pour les sites professionnels, une bonne organisation du site, des temps de chargement le plus reduit possible, un fond collant avec le site, un design collant avec le sujet du site.
Exemple de site incorrect : Un fond vert et j'ecris en vert
Utilisation du kit graphik incorrectement, des titres qui sont pareil que mes textes, le nom du site est sous forme de texte et non en valeur, des temps de chargement tres tres long, mes visiteurs bug...
Catastrophe ...
Pour eviter ca :
* Bien choisir ses couleurs
* Choisir un fond collant avec le contenu du site ( ex : fond noir ecriture blanche )
* Theme du site collant avec le design
* Utilisation du css ( Cascade style sheets )
* Reduire les temps de chargement de page en evitant de surcharger inutilement son contenu
* Mettre en valeur ses titres - sous-titres et le nom du site sous forme de banniere si possible ou tres colore.
* Eviter les fautes d'orthographe
Partie 4 : Fiche pratique d'infomation P.1
Resume du paragraphe 1 :
Le design d'un site represente la fonction qu'il donne au site et son utilite, il ne doit en aucun cas etre pris comme chose servant a embellir les pages...
On peux fructifier la presence du design et la developper le plus possible en ayant un orthographe correct, en limitant le temps de chargement des pages, en choisissant un fond collant au contenu du site et un design collant au sujet du site, en mettant en valeur ses titres nom du site ... en facilitant la naviguation a votre site avec des liens emmenant vers les hauts de pages ...
Rappellez vous ... Chaque site web a un design au fond de lui. Certains sites le developpent positivement d'autres non. C'est un peu comme le cancer tout le monde la mais certain ne le developpe pas
II.Application des proprietes du css sur une page.
Parties de ce paragraphe :
[Obtenir le code html/css d'un site]
[Manifester votre imagination/changer les proprietes]
[Inserer dans la page]
[Fiche pratique d'information P.2]
Partie 1 : Obtenir le code html/css d'un site
C'est la partie la plus cruciale Rendez vous sur un moteur de recherche ici google et tappez comme mot cle " test code html d'un site web " vous choisissez la page qui repond le mieux aux criteres de la recherche et vous tester le code html d'un site par exemple celui du site du zero tappez donc http://www.siteduzero.com et cocher ' test code html ' comme test d'identification.
Mettez ' ok ' vous obtiendrez le code html/css du site du zero
Copiez/collez ce dernier.
Partie 2 : Manifester votre imagination/changer les proprietes
Apres avoir copier/coller le code
modifier les liens menant vers les Templates pour que le css apparaisse.
Telechargez le fichier .zip qui contient les templates du site du zero pour ' proposer un nouveau design ' pack_sdz.zip il contient les templates avec les fichiers .css
Modifiez chacun des fichiers .css selon vos gouts pour changer le css du site.
Partie 3 : Inserer dans la page
Specifiez ensuite dans votre page le chemin menant vers les fichiers .css ( il suffit de remplacer le code css de depart ) pour changer le design du site.
Supprimez les liens et faites de ce site votre site en inserant une autre banniere ...
Partie 4 : Fiche pratique d'information P.2
Resume du paragraphe 2 :
C'est en obtenant le code html/css d'un autre site que a a partir de ce code vous pouvez refaire un autre design css ceci dit : que vous pouvez en faire facilement votre site il ressemblera donc au site du zero si on applique ma methode, n'oubliez pas de telecharger le fichier .zip disponible dans ' proposer un nouveau design ' pour modifier les fichiers .css et les inserer dans la page ( design.css etant le fichier le plus important qui centre le design ... )
III.Application des images sur une page.
Parties de ce paragraphe :
[Inserer les images dans la page]
[Pourquoi pas les modifier a notre gout ?]
[Fiche pratique d'information P.3]
Partie 1 : Inserer les images dans la page
Apres avoir le code html/css d'un site, modifiez les balises img src = ...
par le chemin ou se trouve vos images a inserer.
N'oubliez pas de mettre vos images sous le format images/image.jpg sinon les visiteurs verront une croix rouge au lieu de l'image ou au pire sous le format http:// ... specifier ou se trouve l'image dans un site web.
Partie 2 : Pourquoi pas les modifier a notre gout ?
Prenez votre logiciel de graphisme ( fireworks , photoshop , gimp , photofiltre ou autres ... ) et modifiez vos images ou refaites les carrement
RAPPEL : Pour modifier une image : Ouvrir / mes images / selectionnez une image validez et voila.
Partie 3 : Fiche pratique d'information P.3
Resume du paragraphe 3 :
Pour inserer une image : Vous pouvez modifier les balises img src sous le format img src = images/images.jpg par exemple ou specifiez une image d'un site via img src=http://.../images.jpg ou encore d'un repertoir.
Ensuite vous pouvez retoucher ces images ou les refaire entierement avant de les inserer dans la page web.
IV.Le tout=il ne reste plus qu'a modifier le contenu.
Parties de ce paragraphe :
[Modifier les liens]
[Changer entierement le sujet/le contenu]
[Fiche pratique d'information P.4]
Partie 1 : Modifier les liens
Vous avez modifier le css et les images ...
Que manque il ?
Il manque les liens, en effet c'est tres facile, maintenant modifiez les liens du site adverse par vos liens et copiez/collez le code de cette page afin d'obtenir ce design sur toutes les pages de votre site web.
Le plus gros est fait
Partie 2 : Changer entierement le sujet/le contenu
Il reste encore 1chose ...
Changez le contenu du site ( le corps , les menus ... ) par ce que vous voulez et personnaliser le sujet du site par le votre
Vous aurez ensuite un design qui colle parfaitement avec le sujet de votre site web et la je dis : BRAVOOOOOOOOOOOOOO
Vous pouvez etre fier de vous ...
Partie 3 : Fiche pratique d'information P.4
Resume du paragraphe 4 :
Il ne reste plus qu'a changer le contenu, les liens et le sujet du site adverse pour avoir son site personnaliser avec le design correspondant et la je dis bravo encore une fois
V.Droits d'utilisateurs et Copyright.
Parties de ce paragraphe :
[Reserver son nom de domaine]
[Inserer un Copyright]
[Resume entier]
Partie 1 : Reserver son nom de domaine
Oui un site bien fait merite un nom de domaine
il y en a des gratuits ou payants a vous de voir Cherchez ici sur un moteur de recherche
Mot cles : nom de domaine ...
Partie 2 : Inserer un Copyright
Une fois votre nom de domaine reserve mettez dans le pied de page un copyright sous la forme :
" Copyright * votre-pseudo * annee a annee nom de domaine le blablabla ... "
Ca donne :
Copyright M@teo21 1999-2006 sdz Tout droits reserves
voili voilou ...
Partie 3 : Resume entier
Resume entier :
Le design d'un site web a plusieurs fonctions :
privilegie la pratique utilisation de votre site web, un sujet collant avec votre design. si tout ces points sont respectes normalement pas de probleme
Merci d'avoir suivi ce topic bonne chance ++ postez vos commentaires.
... Mort de rire, tu parle de design et de création mais tu pompe totalement le CSS du site du zero... Ce que tu as pas compris c'est qu'un site si tu veux qu'il soit réussi il faut le réfléchir de A à Z et pas chopper le CSS à droite à gauche... C'est déplorable, je pense pas que M@teo ait proposé le pack CSS du site du zéro pour le voir copié un peu partout.
De plus tu ferais mieux de comprendre le CSS et de le créer toi même plutôt que d'en chopper un tout fait.
Tu n'a pas bien compris ce que c'était d'être designeur/créateur de site web. Et de plsu tu OSES t'approprier le Copyright alors la c'est mouarf
Alors la ....
-
-
-
... Mort de rire, tu parle de design et de création mais tu pompe totalement le CSS du site du zero... Ce que tu as pas compris c'est qu'un site si tu veux qu'il soit réussi il faut le réfléchir de A à Z et pas chopper le CSS à droite à gauche... C'est déplorable, je pense pas que M@teo ait proposé le pack CSS du site du zéro pour le voir copié un peu partout.
De plus tu ferais mieux de comprendre le CSS et de le créer toi même plutôt que d'en chopper un tout fait.
Tu n'a pas bien compris ce que c'était d'être designeur/créateur de site web. Et de plsu tu OSES t'approprier le Copyright alors la c'est mouarf
+1
Je pense que les cours de M@téo ne sont pas la pour rien
Et que il y a déja un topic de ce genre sur le forum graphisme ==>ici<==
(Recherche ? kézako ?)
Ces deux phrases me parlent autant, pourtant aucune n'a de sens.
Quant à ton contenu, je le trouve limite pas super moral.
Une organisation de site web est conceptuelle, un concept, on aime généralement pas le retrouvé utilisé par tout le monde, sauf lorsqu'on a voulu faire de ce concept un standard. Surtout qu'à la fin tu parles de remplacer les "Copyright" (mot qui veut tout dire maintenant) de X par ceux du lecteur Y. Eh beh..
Heureusement que dans le domaine de l'application c'est pas pompable à ce point..
Ca n'engage que moi mais je trouve que tu parles un peu dans le vide ...
En suivant le TP de M@teo21 pour faire un design + des informations complémentaires sur le post-it "[A LIRE AVANT DE POSTER]" comme ça, on en arrive à faire ce que tu as dit.
Ca n'engage que moi mais je trouve que tu parles un peu dans le vide ...
En suivant le TP de M@teo21 pour faire un design + des informations complémentaires sur le post-it "[A LIRE AVANT DE POSTER]" comme ça, on en arrive à faire ce que tu as dit.
Topic a titre informatif : Developper un bon design
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Jeu du carré rouge modifié, quel niveau atteindrez-vous ? http://squared.go.yj.fr
Mon portfolio : https://www.artstation.com/tdugard