nioubie sur dreamweaver et pis sur le développement web aussi...

[noz]

Salut à tous,
je suis nioubie en développement web, en effet ma femme et moi avons décidé il y a quelques semaines de nous lancer dans la conception de notre site, sur dreamweaver. Dans l'ensemble l'application est suffisamment intuitive pour qu'en tatonnant, nous arrivions à quelque chose, mais il y a un truc qui me chifonne : le site a été conçu sur mon ibook, donc sur un écran 14", réso 1024x768, plutôt que sur mon imac 20". Je me suis dit que de cette façon, n'importe quelle personne consultant mon site (sauf 12") verrait les pages (enfin, pour l'instant les quelques pages...) sans avoir à utiliser les barres de défilement. J'ai donc fait un test ce matin sur un PC 15" (la majorité des gens qui m'entourent sont sous mac, mais j'ai quand même malheureusement des amis sous PC...) en 1024x768 également. Résultat, le pire est sur internet explorer (qui en plus ne gère pas les transparences, et vu que j'ai plein de .png...) qui met sur deux lignes ce que firefox, sur me même écran fait tenir sur une ! C'est du à quoi ça, et y a t-il un moyen dans dreamweaver d'activer une option pour que la page s'adapte à l'écran sur lequel on la visionne ? Parceque du coup, je suis sans cesse obligé de vérifier ce que donne ma page, ailleurs que sur mon ibook, et le résultat est à chaque fois différent...
Autre question, une partie du site est conçue avec la police "papyrus". Si cette police ne pose aucun problème sur un mac, elle n'existe pas par défaut sur un pc. y a t-il un moyen de l'inclure avec le site, sans avoir à transformer toutes ses pages en images ? Merci pour votre aide, je vais péter un plomb!! Restons zen... :zen:

 

[Nephou]

Bon... y'a du boulot :siffle:

Procédons par ordre:
1_ le plus symple : la police de caractère
non, ne seraot-ce que pour des raisosn légales tu ne peux pas la mettre à disposition de tes utilisateurs
---> l'utiliser uniquement pour les titres fixes sous forme d'image

2_ le positionnement et la taille des caractère
ben là... chaque navigateur à ses réglages par défauts et ses interprétations un peu libres... ces comportements peuvent-être contrecarrés (via des feuilles de style par exemple) si cela est nécessaire. Mias sans voir la page en question et connaître les éléments bafouillant...

dis nous en plus

 

[fredmac75]

Salut,
- pour ce qui est de la taille de la page, tu dispose en bas de la fenêtre de ton fichier ouvert (index.html par exemple) un petit menu déroulant qui te propose de redimensionner ta fenêtre en fonction de la taille voulue.
- pour ce qui est des typos ; utilise les typos system (verdana, arial, etc...) pour le texte et la papyrus pour les images...
- enfin, n'hésite pas à installer deux ou trois navigateurs (safari, netscape, firefox) pour valider tes travaux. Il existe une possibilité de faire un affichage de fichier en cours en tapant F12 ou Pomme F12 ; à toi de leur attribuer les navigateurs idoines.

 

[noz]

Exact pour les droits, je n'y avais pas pensé, mais je me doutais bien que le seul moyen de contourner ça était la création d'images... Je pense que je vais laisser papyrus, comme ça les utilisateurs mac la verront, et par défaut ce doit être arial ou times new roman, donc au pire, c'est celle ci qui s'affichera chez les autres... J'ai cherché s'il y avait un moyen de spécifier une "police de secours" par défaut, genre papyrus, et si celle ci ne s'affiche pas "century gothic" par exemple, mais sans succès.
Quant au dimensionnement des pages, j'utilise bien l'option en bas à droite mais de toutes façons l'écran de mon ibook étant trop petit, il me redimensionne automatiquement la page dans un format plus "bâtard". J'ai peut être défini des pages trop grandes, je vais essayer en réduisant la taille, et voir ce que ça donne en aperçu.
Merci pour l'info sur les navigateurs, j'ai effectivement défini trois navigateurs différents pour mes contrôles, safari, IE, et firefox, mais le résultat change suivant que l'on est sur mac ou sur PC, et vu que je ne vais pas acheter un PC juste pour checker mes pages... lol
Cela dit, je trouve vraiment dommage que IE PC ne prenne pas en compte les transparences dans les images, alors que IE mac le fait. C'est pas très malin ça... Un gentil macaddict m'a donné des lignes de code à implémenter dans ma page pour contourner ça sur IE PC, mais j'avoue que pour l'instant je ne veux pas mettre les mains dans le code, je préfère laisser faire dreamweaver dans un premier temps... (ce qui ne l'empêche pas de faire des erreurs, comment c'est possible ça d'ailleurs ? Je ne touche pas au code, mais quand je check l'intégrité de la page, il y a quand même toujours des rapports d'erreurs...)
Quant à vous en dire plus, je vous donnerai bien le lien pour aller faire un tour, mais j'ai un peu peur de soumettre ma première ébauche au regard critique... lol

 

[fredmac75]

il me semble que tu devrais opter pour un 800x600... mais bon c'est une question de choix.
Pour ce qui est de la transparence des images, pourquoi ne pas utiliser des images en .gif tout simplement... d'ailleurs parfois il vaut mieux mettre une couleur de fond, mais bon tout dépend de ta compo...
Enfin, la résolution d'un écran et sa taille son deux choses. Tu utilises un 14" en 1024x768 alors ton tableau principal devrait faire 955x600 pour "paser" sur cette diagonale. Cela devrait également passser sur un 12" en 1024x768 (en tout les cas pour l'Ibook 12")...

 

[Niconemo]

90 % du temps débuggage de design est mobilisé par MSIE Mac et PC. Ils ont tous les deux des défauts mais pas les mêmes pour simplifier les choses...

Sinon les histoires de police que ça soit l'uniformisation des polices (et des polices de remplacement) ou de la taille, ça se fait dans les feuilles de styles (en commençant par rédéfinir les balises par défaut : body, p, h2, h2, etc.) voir la doc de DW.

Et je pense aussi qu'à moins d'avoir une raison très valable de le faire (c'est rare), le site doit pouvoir descendre en 800 px de large. Car il faut laisser la possibilité de réduire la fenêtre, même sur les grands écrans. Et rien qu'avec le parc des iMacs cathodiques, il y a un bon paquet de postes en 800 par 600 encore.

 

[poildep]

Un gentil macaddict m'a donné des lignes de code à implémenter dans ma page pour contourner ça sur IE PC, mais j'avoue que pour l'instant je ne veux pas mettre les mains dans le code

heu... moi par contre, ça m'intéresse.

 

[Nephou]

heu... moi par contre, ça m'intéresse.

et hop ! dalles gerflor™

 

[poildep]

Extra, Nephou. Merci !

 

[noz]

J'ai effectué hier soir la manip, en insérant le fichier .js à la racine de mon site et en insérant le code (le plus court) dans une page contenant des .png sur mon site, et effectivement c'est cool, la transparence est activée ! Par contre, ce qui est beaucoup moins cool c'est que les images concernées était aussi des images survolées, et bien maintenant, elles ne le sont plus du tout, je n'ai plus que l'image standard, la version survol n'apparaît plus. Quelqu'un sait pourquoi ?

 

[fredmac75]

il doit certainement y avoir interaction dans tes codes javascript...peux-tu nous faire un copier coller du header d'une page contenant les javascript pour juger sur pièce (fichier .js et hmtl concerné) ...

 

[noz]

Je ne suis pas un pro du code, mais je pense que c'est ça :
<head>
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
background-image: url(images/fondmenu.jpg);
}
-->

</style></head>

J'ai bon ? Votre diagnostic docteur ? Je viens de vérifier sur PC avec firefox et netscape, ça marche sans problème. Seul IE coince... Ilcommence à me gonfler ce navigateur...

 

[fredmac75]

Docteur, docteur... tu vas un peux vite en besogne. Modeste webmaster oui.

Peut-être une solution consisterait à ramener(copier/coller) ton script (pngfix.js) directement dans la page et non en utilisant un lien. Positionne le dans le header.:mouais:

Fait un essai et dis nous ce que cela donne ? Pourrais-tu également nous donner une url de ta page pour que nous puissions en avoir le c½ur net ?

 

[noz]

je vais essayer de faire ça (c'est en fait l'autre solution, lorsque l'on a qu'une ou deux pages contenant des .png, sinon il vaut mieux mettre peu de code qui renvoit au fichier) dès ce soir. Quant à l'url, c'est http://perso.wanadoo.fr/benjamin.et.yahele/
Soyez pas trop sévère, ce sont mes premiers pas en web design hein... lol

 

[noz]

Alors ? verdict anyone ?

 

[molgow]

Je trouve plutôt sympa ton design !

Par contre, je suis pas sûr que ce soit une bonne idée d'utiliser les polices que tu utilises, je pense que de nombreux utilisateurs ne verront pas la page comme tu la vois. Il faudrait aussi mettre à un titre à ta page parce que "Untitled Document" c'est pas très joli

 

[molgow]

et hop ! dalles gerflor&#8482;

Un autre site pour le même problème (mais avec exemple).

 

[noz]

Je trouve plutôt sympa ton design !

Par contre, je suis pas sûr que ce soit une bonne idée d'utiliser les polices que tu utilises, je pense que de nombreux utilisateurs ne verront pas la page comme tu la vois. Il faudrait aussi mettre à un titre à ta page parce que "Untitled Document" c'est pas très joli

Oui, pour les polices malheureusement, je vais devoir laisser tomber papyrus (sauf pour les titres, que je vais créer sur toshop, comme dans ma rubrique - la seule qui marche - artdéko), et en trouver une autre, plus universelle... Et Merci pour le nom de la page, je ne m'en étais pas rendu compte ...

 

[Membre supprimé 2]

pour noz: tu peux essayer d'utiliser la police Georgia, comme les titres de ce site, tu n'auras pas de pb
Sinon très sympa ton site, les rollover sont impecables

Pour les PNG, est-ce que quelqu'un a testé le Png Behavior ? Apparement, cela ne fonctionne pas avec la méthode implémentation du fichier htc à la racine plus modification de la feuille de style, mais peut être est-ce du à une erreur de ma part ? je m'empresse de tester vos liens

 

[noz]

Yes merci pour le lien vers le site, c'est exactement ce que je recherche pour mon inspiration ! Mon site est encore en développement et je voudrai le faire évoluer vers quelque chose de plus "zen"... Quant à la police, merci également pour l'info !