projet de site perso (book & C.V. en ligne)

[poissonchat]

Bonjour à tous !

Je viens de m'inscrire sur webmaster-hub sur les conseils d'un ami, parce que depuis quelques semaines je me suis enfin décidé à créer mon site perso.

Moi, je suis plutôt bidouilleur graphisme-son-vidéo, mon parcours est une sorte de longue ballade : j'ai commencé par la batterie, ça m'a amené à la peinture, donc direction les beaux-arts où j'ai lentement bifurqué vers les ambiances sonores, puis travaillé dans la sonorisation, puis trop marre de galérer donc inscription dans une école d'audiovisuel orientée cinéma. Là, j'ai bossé autant l'image-fixe que l'image-mouvement, et j'ai creusé dans le son. En parallèle, je me suis formé en autodidacte sur ce logiciel génial qu'est Photoshop, pendant de nombreuses années.

Donc, au final, je suis trèèès trèèèèèès loin de la sphère du webdesign, et de la création de site ... un vrai zéro, quoi, dans ce domaine !

Je viens donc vous voir pour glâner, dénicher des conseils, chiner les bons outils, apprendre de quoi arriver à ce que je souhaite.

Je vais donc vous expliquer la petite histoire de mon site (voir ma signature), et vous allez pouvoir vous moquer de moi à loisir. M'enfin, no problemo, j'aime bien rire aussi, et surtout de moi

Tout ça pour justifier à ceux qui aiment bien fouiller que le code actuel des pages de mon site est un sacré foutoir !

[drakulls]

M'enfin, no problemo, j'aime bien rire aussi, et surtout de moi

hé hé.. J'ai même des preuves en collant

bienvenue à toi donc ! tu trouveras ici c'est certain tout ce que tu as besoin pour faire un bon petit site !

[poissonchat]

1. J'étais dans l'urgence de créer ma galerie internet, alors en fouillant le web un peu j'avais trouvé un site pas mal fichu, qui propose un éditeur en ligne, pour une durée d'évaluation de 15 jours gratuits (http://www.squarespace.com/). J'y ai donc conçu rapidement mon book avec beaucoup de plaisir, un truc simple et efficace : (http://mkl-creations.squarespace.com/, n'essayez pas, le lien n'est plus valide).

2. J'étais content, oh la la comment j'étais content !

3. Une semaine plus tard, zut : plus que trois jours avant l'éradication définitive de mon book. Je panique. De grosses gouttes de sueurs perlent de mon front, et je décide d'enregistrer chaque page via mon navigateur sur mon ordi.

4. Je passe une après-midi de 28 heures à me documenter : comment se faire héberger, qu'est-ce qu'un nom de domaine, combien ça coûte et à quoi bon, dotclear mysql nabuchodonozor filezilla wampserver quetzalcoatl notepad++ hein pardon ?

5. Allé va pour les pages persos de chez free. Inscription, paramétrages. dans la foulée, j'importe mes pages enregistrées dans dreamweaver : hé c'est pas mal, c'est ressemblant, quelques détails à régler, corriger les liens internes, et j'arrive à me recréer l'ensemble du site en local sur mon ordi. Et même que quand j'ouvre les pages à la main (index.html), toujours en local, tout se tient. Je me félicite en buvant pas mal de bièr--- un grand verre d'eau de source, pardon...

6. J'upload chez free tout ce petit univers avec filezilla, dans un moment d'intense plénitude. Je me sens faire partie du Grand Tout.

7. Ensuite, je passe pas mal de temps à peaufiner : d'abord LightBox pour les diaporamas, mais ça ne marche pas, ensuite SlimBox et ça va mieux, ajout d'un marqueur Xiti, supprimer une virgule, aligner, remettre la virgule... Et c'est comme ça que, petit à petit, je "commence à déchiffrer" un peu la structure d'une page html.

Voilà, l'historique du site actuel. Dans les pages, des bouts de lignes de codes qui ne servent à rien : un peu de squarespace, un peu de lightbox, du /div à gogo, un peu de slimbox, des références à des pages externes que je sais même pas d'où qu'elles viennent... bref, un joyeux capharnaüm ! Mais bon, ben voilà : ça fonctionne pas trop mal !

[poissonchat]

J'arrive à ce qui m'amène ici, sur webmaster-hub :

Ce site, tout moche, tout boiteux, et tout ce qu'il y a de plus basique (mon tout premier sit, koa...), maintenant que j'ai acquis quelques bases en programmation de site, j'aimerais poser en parallèle une version plus "à mon goût", plus travaillée, plus esthétique de ce même site.

Je viens d'en finir la maquette (sur photoshop, hein ), et avant de me lancer dans les balises j'aurais aimé avoir quelques conseils, quelques critiques sur ce projet, histoire que je me rende compte que PAF! là ben ça va pas le faire, ou ça sera pas réalisable, ou ben ça sera vraiment trop compliqué pour un zéro comme moi, ou je sais pas quoi...

Donc, bref, je vous remercie tous de bien veuilloir zieuter ces quelques images :

d'abord, la maquette de fond, disons le background (sauf les 4 boutons du haut) :

ensuite, exemple d'habillage texte sur la page d'accueil (attention c'est tout du photoshop, hein) :

enfin, exemple d'habillage de la page C.V. (toujours que du photoshop) :

Modifié 18 Septembre 2008 par poissonchat

[drakulls]

Le seul probleme c'est que c'est bien joli... Mais ca te fait une fameuse image de fond....

il faut voir ce que ca donne en poids tout en ne perdant pas de qualité.

[El-Cherubin]

S'il découpe tout ça, et divise le fond (qui doit pouvoir ne pas etre qu'une image fixe) ça devrait ptetre passé...non?

Modifié 18 Septembre 2008 par El-Cherubin

[poissonchat]

bon pour l'instant ça donne ça :

V2 de mon site

l'image de background, en jpg, pèse pas plus de 100Ko. Je ne l'ai pas divisée comme dit El-Cherubin, je ne sais même pas ce que ça signifie

tutti va bene ? pas trop large (950 px) ?

[Dan]

Bienvenue à toi sur le Hub.

Je me demande bien par quel artifice on passe de la batterie à la peinture ...

Ou alors tu jouais de la batterie sur des pots de peinture et un couvercle a lâché ?

Comme on te l'a signalé, tu devrais "couper" (comprendre scinder) ton image en modules surtout en isolant les morceaux qui se répliquent de page en page...

Par exemple, le haut de ta page ... ainsi que les icônes à droite.

<edit: en regardant la V2, je vois que tu l'as déjà fait. Désolé !>

[drakulls]

ca commence à donner..... Mais ton image de fond est quand même un peu lourde.... Y a plus moyen d'en baisser la qualité ? Parceque 100Ko c'est bcp quand même...

Tu as aussi l'outil tranche dans photoshop, qui peut meme te generer les tranches sous format xhtml / css.....

[poissonchat]

Bonsoir Dan !

Par quel artifice...hmm... on pourrait peut-être mettre ça sur le compte de l'adolescence?

Et pour les pots de peinture, bah non - mais dès que ma mère avait le dos tourné, je me confectionnais mon set de casseroles-poëles-marmites-couvercles

Bon, premières précisions, je bosse sous DreamWeaver CS3.

Je rencontre un premier problème (je n'ai pas fait de feuille CSS, et j'aimerai mieux ne pas en faire) :

j'ai centré mon image de background avec top center, mais quand je créé des cadres ils sont exterieurs à mon background, donc toute déformation déplace mon background... je pensais qu'il resterait en place.

en fait, j'aimerai surtout commencer par composer dans les limites de mon background, et là en l'occurence je vois que tout commence (à gauche par exemple) sur le bord de la page. comment imposer de rester dans les limites de l'image d'arrière plan ?

drakulls, j'ai déjà essayé les tranches dans photoshop, mais je n'ai pas trouvé le moyen de passer une image tranchée en background... dreamweaver ne propose qu'un seul fichier d'arrière-plan...

Modifié 18 Septembre 2008 par poissonchat

[poissonchat]

et les problèmes continuent !!!

j'ai inséré la partie gauche des liens externes... à partir du bouton "tracer un DIV pour un élément PA", dans l'onglet "mise en forme" : ça m'a permis de créer un zoli cadre jaune ... sauf que dans ma fenêtre WYSIWYG dreamweaver, même si j'ai bien placé ce cadre dans l'espace que j'avais réservé, quand je visionne avec un navigateur, c'est pas du tout au même endroit, mais bien décalé vers la gauche...

dans dreamweaver :

et sur mon site : V2...

[drakulls]

Je crois quand meme qu'il serait plus facile que tu partes de zéro mais correctement.

Surtout avec le peu de complexité de ta structure.

crée une page index.html auquel tu attaches une feuille de style.

Crée tes 5 divs de base imbriquées comme cei :

<div id="site">
<div class="entete"></div>
<div class="colonnegauche"></div>
<div class="contenu"></div>
<div class="footer"></div>
</div>

(en gros hein ;-) )

ensuite dans ta feuille de style, tu defini pour chaque div une taille et tu les positionne en leur donnant un background-image....

Avec ca tu partiras deja mieux....

Je t'expliquerais un peu plus demain, la suis à la bourre ;-)

[El-Cherubin]

S'il est pressé comme on dirait, le temps d'apprendre le fonctionnement du css, du positionnement des div, etc... ça va pas etre facile...

[iNCiTE Web]

Ah bah on peut rarement être pressé et vouloir en même temps un code correct sans connaître comment ça fonctionne !

Même si maintenant ça tient la route comme il le souhaitait, ça risque de compliquer un peu plus à chaque fois les mises à jour...

Il faut que tu mettes ton image de fond dans un DIV de taille fixe, pas dans le BODY car tu ne connais pas à l'avance sa largeur (qui dépend de la résolution de l'écran + du navigateur). Ça explique en partie ton décalage des liens (le début de gauche est variable).

[drakulls]

Je viens de t'envoyer le site avec une structure de base.....

[poissonchat]

wouaouh drakulls !!!

c'est vraiment terrible ... super propre, je me repère à l'aise dans le code, trop bien pensé pour un petit comme moi ... pffff !

j'ai pu déjà bien bosser dessus, je mets le lien vers la V2 dans ma signature plutôt que d'avoir à répéter le lien à chaque post.

excellent.

juste une petite question que je n'arrive pas à régler : puis-je d'une manière ou d'une autre forcer la couleur d'un lien, qu'elle soit autre que les références imposées dans la feuille CSS ?

[drakulls]

merci ;-), le code devrait encore être affiné mais c'est ce que j'ai pu te faire en vitesse sur le temps de midi.... mais bon tu verras au fur et a mesure aussi...

oublies pas les balises "title" au fait.....

pour ta question: en supposant que tu souhaite modifier les liens dans ta div class"contenu" par exemple, il te suffit de rajouter ceci dans ta feuille de style :

.contenu a {

tes propriétés
}

Modifié 19 Septembre 2008 par drakulls

[drakulls]

une derniere chose : je vois que tu as rajouté pas mal de trucs et c'est tant mieux: c'est en forgeant qu'on devient....... Enfin bref..

Toutefois, tu rajoute différents styles à ta page. Tu devrais les copier coller dans ta feuille de style. Il est inutile de mettre des proprietes style sur ton html. pourquoi separer les 2 ?

Ensuite, tu definis systematiquement tes P avec des style3.... Assigne plutôt un style à tes P directement dans ta feuille de style ca nettoiera un peu ton code.....

Modifié 19 Septembre 2008 par drakulls

[poissonchat]

euuuhh... en fait tu me conseilles de couper ces lignes-ci

<style type="text/css">
<!--
.Style2 {font-family: "Lucida Sans Unicode"}
.Style4 {color: #0066FF; font-family: Arial, Helvetica, sans-serif; }
.Style6 {font-size: 13px}
.Style8 {font-size: 24px}
.Style9 {font-size: 13px; font-style: italic; }
.Style17 {
	font-size: 10px;
	color: #66CCCC;
}
-->
</style>

et de les coller dans la feuille CSS ? mais telles-quelles ? et à quel endroit dans la feuille CSS ?

sinon, je ne comprends pas ce que tu me conseilles pour la couleur des liens : dans le feuille de style, y'a bien ça :

a:link {
	color: #FFFFFF;
	text-decoration: none;
}

et je veux le garder pour les liens, je voulais juste faire une seule exception pour le lien vers les creative commons...

[Dudu]

Salut poissonchat. Et bienvenue sur le Hub.

Je suis du même avis qu'iNCiTE Web (cf. un peu plus haut): tu ne peux pas espérer faire la 8ème merveille du monde sans un bagage de connaissances minimal.

En gros, avant de bidouiller dans tous les sens, il te faudrait apprendre quelques rudiments de CSS (et plus si affinités).

Pas de panique: c'est simplissime.

euuuhh... en fait tu me conseilles de couper ces lignes-ci

[...]

et de les coller dans la feuille CSS ? mais telles-quelles ? et à quel endroit dans la feuille CSS ?

Comme je dis dans mon paragraphe précédent, tu aurais la réponse en sachant ce qu'est le CSS.

Mini-cours.

CSS = Cascading Stylesheet. Soit "feuille de style en cascade" en français.

Cascade, ça c'est très important Ce que ça signifie ?

Un exemple:

a {color:red;} /* tous les liens en rouge */
a:hover {text-decoration:underline;} /* tous les liens survolés par le curseur seront soulignés */
.contenu a {color:white;} /* les liens dans une <balise-quelconque class="contenu"> seront blancs */
.contenu a:hover {font-weight:bold;} /* les liens de <balise class="contenu"> survolés seront en gras */
.contenu #hub a {font-variant: italic;} /les liens dans <balise class="contenu"><autre-balise id="hub"> seront en italique */

La notion de cascade signifie qu'une règle très généraliste comme celle de ma 1ere ligne va automatiquement être assignée par défaut à tous les liens..

.. sauf si une règle plus spécifique vient la contredire: s'il y a conflit entre deux règles, c'est la dernière qui l'emporte.

Donc:

• dans ma deuxième ligne, je n'ai pas besoin de préciser que je veux les liens survolés en rouge, ils le seront déjà par effet de cascade.
  
• dans ma troisième ligne, je crée une exception: tous les liens présents dans <p class="contenu"> ou <ul class="contenu"> ou <div class="contenu"> (bref n'importe quelle balise avec une class "contenu") seront blancs.
  
• dans ma dernière ligne, je n'ai pas besoin de préciser que les liens présents dans <div class="contenu"><p id="hub"> doivent être blancs et en gras: ils le seront déjà (en plus d'être en italique).
  

Revenons à nos moutons. Où dois-tu placer ces lignes dans ton fichier CSS. Ça dépend. Si tu les places tout en haut et qu'une règle écrite plus bas vient les contredire, tu l'auras dans l'os.

Et tu ne peux pas non plus tout écrire en bas de la page: il faut bien un haut de page

Note à drakulls: j'aurais plutôt mis des id plutôt que des class pour les <div> qui créent le squelette de la page. Avis personnel

juste une petite question que je n'arrive pas à régler : puis-je d'une manière ou d'une autre forcer la couleur d'un lien, qu'elle soit autre que les références imposées dans la feuille CSS ?

Oui. Par le système de priorités. On a vu plus haut le fait qu'une règle écrite après une autre lui prend la priorité.

Il y a un autre système de priorité: celui d'écrire les styles directement dans une balise HTML. Si je reprends mon exemple plus haut, tous les liens sont rouges. Mais si tu écris

<a href="http://www.webmaster-hub.com" style="color:green;">Hub</a>

le lien sera vert, pas rouge.

Attention toutefois :!: Mettre des styles en-ligne (= directement dans une balise HTML) est utile dans des phases de test. Mais il est vraiment déconseillé de les laisser en phase de production.

sinon, je ne comprends pas ce que tu me conseilles pour la couleur des liens : dans le feuille de style, y'a bien ça :

a:link {
	color: #FFFFFF;
	text-decoration: none;
}

et je veux le garder pour les liens, je voulais juste faire une seule exception pour le lien vers les creative commons...

Si tu as lu tout mon message bravo pour ton courage tu sais comment faire, non ?

Non ? Ah bon ! Alors je te donne quand même la manip'

Dans la partie HTML tu ajoutes une class ou une id à ton lien Creative Commons comme ceci

<a href="http://commons.org/licenses/by-nc-nd/2.0/fr/" id="creativecommons">

et dans la CSS tu écris (après ton code global de couleur des liens)

#creativecommons {color: gray;}

et ton lien CC sera gris.

Une autre solution: j'imagine que tu veux mettre le lien CC de la même couleur que la ligne "Les travaux présentés ici", n'est-ce pas ?

Cette ligne est un <div class="Style17"> qui relie à cette partie de la CSS

.Style17 {
	font-size: 10px;
	color: #66CCCC;
}

qu'il te suffit de changer en

.Style17, .Style17 a {
	font-size: 10px;
	color: #66CCCC;
}

La virgule permet de déclarer plusieurs balises pour un même style.

Quelques petites remarques pour finir:

La différence entre un id et une class. Un id est unique, une class ne l'est pas. L'id sert à cibler UNE balise bien précise, tu ne peux le répéter nulle part dans ton code.

Pour cibler un id en CSS c'est #id{} et pour cibler une class c'est .class{}

Pour cibler une <balise class="machin"> sans cibler <autre-balise class="machin"> c'est balise.machin{}

Désolé, j'ai -encore- pondu un roman, ça m'arrive parfois

[poissonchat]

yop!

j'ai pas mal bossé sur mon site ce week-end, et je suis vraiment satisfait du résultat visuel, qui correspond vraiment à ce que je voulais (un site relativement esthétique, clair, simple, et un code plutôt "propre").

je remercie vivement tous ceux qui m'y ont aidé.

et pour répondre à Dudu, effectivement j'ai bien lu ta "nouvelle" où je me suis souvent senti très seul, mais cela m'a permis de comprendre encore quelques petits trucs que j'utiliserai sûrement un jour ou l'autre...

je n'ai donc plus qu'à revoir et corriger les Style d'ici quelques jours - là, je sature - en les incluant à la CSS.

si vous avez quelques PETITS conseils de forme ou de fond, surtout n'hésitez pas ... maintenant je vais pouvoir faire le tour du forum y glâner le plus d'infos utiles possible !

encore merci !