Création de mon premier site internet Fermé

Question

bonjour, je souahiterais apprendre à utiliser dremweaver pour la création de site internet. Je me suis beaucoup intéréssé au sujet et je comprend bien qu'il est indispensable de connaitre et de travailler avec le code CSS . Neanmoins mon besoine st assez urgent et je l'ai entamé à l'aide de photoshop avec des tableaux (je pense).

Mon projet est simple et semble joli sur l'écran de dreamweaver sauf que lorsque je passe sur IE ou firefox, les images sont décalées et il ya de nombreuses bandes blanches.

Pouvez vous me donner un léger coup de pouce pour ce projet là. Je prendrai le temps d'apprendre le language pour mes prochains travaux.

Je peux vous passer mon code par message privé.

Merci a vous

ipouy · Answer

testez régulièrement votre rendu dans le ou les navigateurs(touche F12) puis modifiez et testez encore pour avoir aucun bug d'affichage.
Vous pouvez ouvrir le fichier du site dans votre navigateur, vous rechargez la page(F5) à chaque fois que vous modifiez un élément jusqu'à ce qu'il soit correct.

ça peut être fastidieux mais c'est le seul moyen que vous avez ou alors il faut respecter les normes W3C(et encore le test dans les navigateurs se révèle indispensable).


avant CSS c'est HTML qu'il vous faut.

Vous vous compliquez la tâche si vous utilisez dreamweaver et photoshop pour générer du code, aucun des 2 ne vous fournit un code valide (http://validator.w3.org/) mais soit vous intégrez dans dreamweaver soit avec photoshop ou mieux vous le faites à la main.

Je pense que DW est une perte de temps, avec le temps que vous avez passé sur le logiciel vous seriez expert en HTML, comme disait un sage:

plus facile plus rapide mais pas le plus fort(le côté obscur du HTML: Dreamweaver).

titeuf268 · Answer

merci pour la reponse! si quelqu'un veut jetter oeil au code je peux l'envoyer ou heberger la page pour le rendu ( je pense que je peux faire ca non?)

pour le temp passé il n'est pas grand, juste une aprés midi.

Je peux vous passer les code en pv ou l'heberger si quelqu'un veut un aperçu

il s'agit d'un site tres simple avec 3 pages différente pour la promotion d'un logement ( 1 presentation, 2 photos 3 contacts)

merci

Ysabe_l · Answer

Je suppose que le but de ce site sera de faire la promotion du logement, donc il faudra qu'il y ait beaucoup de visites, qu'il soit bien référencé et bien positionné dans les moteurs de recherche.

Donc laisse tomber Dreamweaver, ton site sera tellement mal optimisé et "mal" codé qu'il n'arrivera pas à être en top des résultats de recherche.

Je suis justement en train de faire un site du même genre pour ma mère, et j'y ai passé des heures et il n'est pas encore fini. Mais je sais qu'une fois fini il aura des chances d'être vu.

C'est un domaine avec beaucoup beaucoup de concurrence donc faut être au top du top !

ideal23 · Answer

Tu peux mettre ton code ici

titeuf268 · Answer

merci pour les réponses. non c'est un petit studio en saisonnier qui ne necessite pas beaucoup de référencement sur les moteur de recherche, je mise plus sur les site d'annonce avec un lien vers mon site internet. niveau visiteurs je pense à une cinquantaine de visite par mois... mais merci pour tes conseil ej vais l'arranger avec le temps pour qu'il soit bien référencé et du coup bien codé.

pour l'instant s'il peut marcher comme ca pour cet été...

voici le code:

https://www.cjoint.com/?CFDmFTsqepW

RENDU IE

https://www.cjoint.com/?CFDmGMm6Dlz

APERCU  DW ( qui me plait)

https://www.cjoint.com/?CFDmHqE8JfK

ideal23 · Answer

première réaction, centrer le site , non, ensuite les tableaux , c'est dépassé, apprendre le css ce serait le top, plus pro. faut donner envie d'aller en vacances chez toi.

titeuf268 · Answer

oui merci... enfin comme je l'ai annoncé je maitrise photoshop mais n'ai jamais fait de site internet. même centrer mon site je ne sais pas le faire!!

en attendant que j'aprenne le CSS ici par exemple... https://openclassrooms.com/fr/courses

Est il possible que j'arrange ces erreurs pour que le site soit fonctionnel... ( je le referai dés la compétence acquise...)

Aprés ce n'est pas la demande qui manque et il n'ya pas beaucoup de concurence niveau comm donc un site même simpliste serai deja un plus!

ideal23 · Answer

je vais voir ce que je peux faire, je le mettrai sur le web.

titeuf268 · Answer

super merci beaucoup !

ideal23 · Answer

http://creuselimousin.free.fr/titeuf/ voilà , vite fait avec dreamweaver, comme cà tu pourras regarder le css3 et html5.
à pauffiner car je n'avais pas les photos et le background original.
mettre les méta-tags et garde les titres, c'est bon pour le référencement.

titeuf268 · Answer

super merci beaucoup je vais m'en inspirer! les bande blanches etait du a quoi ( sur firefox il y en avait moins...) Merci encore

ideal23 · Answer

les bande blanches etait du aux photos que j'ai récupéré  en tranchant la photo de la page que tu as envoyé,  à toi de mettre les tiennes et de vérifier les dimensions avec le css.
@charset "utf-8";
/* CSS Document */
body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	background-color: #B2E181;
	line-height: 1.1em;
	font-size:80%;
}
#bloc_page
{
    width: 1000px;
    margin: auto;

}
/* Pour les navigateurs mobiles et tablettes */
@media all and (max-width: 1024px) 

{
    #bloc_page
    {
        width: auto;
    }
} 
header
{
height: 200px;
}
nav
{
background: #B2E181;
height: 100px;
width: 1000px;	
}
div.float
{
padding-left: 100px;
float: left;
padding-top: 10px;
}
#bloc_content
{
width: 1000px;	
background-color: #DEFFA4;
font-size:110%;
padding:0.5em 0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
behavior: url(script/PIE.htc);
}

section
{
	width: 1000px;
	margin-top: 10px;
	
}
article
{
	display: inline-block;
	vertical-align: top;
	text-align: justify;
	margin-top: 10px;
	width: 420px;

	padding-left: 50px;
}
footer
{
	height: 30px;
	background: #888;
	width: 1000px;
	padding: 1em 0em 0em 0em;
	color: #FFFFFF;
	text-align:center;
	margin-bottom: -1em;
}

titeuf268 · Answer

Merci beaucoup pour ton aide. J'y ai passé du temps dessus ( meme si niveau efficacité c'est encore loin d'être cela mais je commence à comprendre) voici un aperçu de ce que j'ai:

https://www.cjoint.com/c/CGboISNHOqd

https://www.cjoint.com/c/CGboJWLluec 



Question: lorsque j'heberge ma page j'obtiens cela (Liens du Bas) alor que sur l'aperçu IE depuis mon disque dur le rendu est bon (haut)...

https://www.cjoint.com/c/CGboKHEtqCs

Question deux: Je n'arrive pas à homogéneiser l'implantation de mes photos ( 2 ligne de 3 et 1 ligne de deux centrée en bas) si tu as un code rapide pour cela , j'ai essayé avec l'id float, avec les alignement de article... mais la je bloque.

Merci beaucoup

Voici l'archive complete

https://www.cjoint.com/c/CGboMagbOt0

Ysabe_l · Answer

Pour le fait qu'une fois hébergé certaines images n'apparaissent pas c'est soit qu'elles mêmes n'ont pas été transférées, soit que le lien est un lien "en dur" et pas relatif.

ideal23 · Answer

Ysabe a raison , à vérifier. attention dans le nom des images, pas d'accent, éviter les majuscules et le tiret prévilégier la touche 8,exemple: fleur_de_lys.jpg. sinon as-tu résolu tes problèmes? 2

pourquoi faire?

titeuf268 · Answer

je l'ai créé pour centrer la page internet au milieu de l'ecran ... :/ pas la meilleure solution ? Pour les images qui ne s'affichaient pas merci beaucoup, c'etait les Majuscules!! merci encore un nouveau truc d'appris! pour les photos , j'aimerais les centrer dans la page voici l'adresse du site: http://vacanceslandes.p.ht/photos.html et si possible pouvoir les ouvrir en taille reelle lorsque on clique dessus... Le principal sera fait aprés il ne restera plus qu'à améliorer!

ideal23 · Answer

global et bloc page , double emploi, de plus un second global pour les photos ,  style dans la page index et une feuille de style, tout cà n'est pas très logique, la structure du site en css et html  est modifié à chaque fois, pour bricoler quelque chose pas facile, pour le centrage. Pour le zoom des photos le faire en css ou mettre une lightbox.

ideal23 · Answer

#global1 { margin: 0 auto; text-align:center; width: 1000px; } Voilà c'est centré , mais bon , de plus le nom des photos dans le html est différent de celui du répertoire images. j'ai modifié le second global en global1

Création de mon premier site internet

18 réponses

Discussions similaires