18041 sujets

Questions générales et questions de débutants

Création site web

Pages :
bonjour, je me suis lancé dans la création d'un site web pour pouvoir partager mes photos et de mettre en avant certaines choses.

Pour le moment j'ai réalisé un certains nombre de pages et crée les liens entre les différentes pages sans réellement intégrer de contenu. J'ai réalisé ma mise en page avec Photoshop et j'ai ensuite structurer l'ensemble sous Dreamweaver. J'ai donc pour le moment un dossier qui contient mon site.

Je souhaiterai avoir des conseils de votre part car à cause de ma méthode j'ai lorsque je suis sous Dreamweaver mon fond qui est découpé en plusieurs bloc. Est ce normal ?

Ensuite je souhaite crée des animations entre les pages mais je ne sais absolument pas comment m'y prendre. Pourrai-je avoir au moins les bons clés pour approfondir cela ?

Enfin l'idée et de crée une galerie photo pourquoi pas sous forme de diaporama de 5/6 photos mais comment s'y prendre ?

Je pense que ma méthode de passer par Photoshop pour réaliser le design n'est peut-être pas la plus efficace.

Si c'est possible je veux bien partager mon dossier pour que vous puissiez l'analyser et le critique et aussi mieux comprendre.
Modifié par eaglefor (23 Jul 2015 - 18:33)
Salut,

Tu es bien parti. Attention Dreamweaver 2015 est super très abouti, mais c'est de l'Adobe donc du logiciel pro.

Si j'ai bien compris tu as ton template sous Photoshop, tu découpes tes éléments et tu veux les intégrer sous Dreamweaver pour concevoir ta page ? Si j'ai bien compris ta méthode ?

Regarde sur le net tu as des tutos, avec la méthode si je me trompe pas.

Il faut commencer avec du facile, car si tu as un template de fou furieux, tu vas t'arracher les cheveux pour intégrer tout les éléments sur ta page.

Perso, tu commences pas par le plus facile pour débuter ...

Paris, c'est pas fait en un jour ... Regarde les tutos sur le net pour avoir une idée de la méthode.

Bon amusement.

Dom Smiley smile
C'est bien des tutos sur le net que je tire cette méthode mais en fait la question de fond c'est surtout est ce que je dois à chaque fois repasser par Photoshop ?

Exemple ma page d'accueil est entièrement faite sous Photoshop image de fond textes... je l'enregistre en html et je l'exploite sous Dreamweaver pour crée les liens avec les autres pages elles même crée sous Photoshop. En fait Dreamweaver me sert juste à faire les relations entre les pages.C'est pas censé être le but non ?

Je n'ai pour le moment pas tapé une seule ligne de code

Lorsque je fait une modification comme une correction orthographique je dois repasser par Photoshop et recrée les liens. Je pense que le CSS est la pour éviter d'avoir à refaire tout cela ?
Petit soucis, pour pouvoir reprendre la même mise en page dans toutes mes pages j'ai fais un fichier css simple mais voilà il à fonctionner pour une page je l'ai utilisé pour une seconde page et la mise en page était différente et depuis sur la page correctement faite et bien ça ne l'ai plus. 

body 
{
	background-color: 4b4b4b;
	background-image: url(../../site%20web%20image/entete.gif);
	background-repeat: no-repeat;
	background-size : 1920px 480px;	
}
h1 
{
	color : eeeeee;
	font-family: Garamond Regular;
	font-size: 24pt;
	text-align : center;
	margin-top:38px;
}



et le html

<html>
<head>
<title>aravis</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Aravis</h1>
</body>
</html>


Le texte est censé être blanc mais reste noir et la background reste blanc.

Question faut-il un fichier css dans chaque dossier contenant la page en question ?
Christele a écrit :
Tu as pensé à vider ton cache d'historique ? Smiley eek
La question me semble appropriée mais généralement, fermer le navigateur (chrome, firefox, ...) puis le relancer suffit à actualiser les modifications de css sans toutefois devoir procéder au nettoyage du cache.

Mais je n'ai peut-être pas tout lu comment Eaglefor a mené ses ajustements.

Pour ce qui est de passer et repasser par PhotoShop (pour la suite ...), je crains d'être abrupt en lui avouant, pour mon infime exemple qu'encore aujourd'hui je me plais à coder avec ... une fenêtre de Bloc-notes Windows (encodage utf-8 déterminant, enregistré sous l'extension .htm) ! Hi, je vous assure que c'est 'trop bon' parce que la petite chose est impardonnable, donc infiniment instructive des très mauvaises manières. Mais évidemment, je n'ai à produire qu'un site 'perso', c-a-d que je ne suis pas un pro du kilomètre (quoique) et du million de clients (?). Eaglefor aurait-il un site web perso à produire, et pas davantage ?

Pour ce qui serait d'un 'slider' de photos, Eaglefor est photographe (pour le moins). Evidemment les exemples de 'diaporama' ou 'slider' automatique (et manuel) sont légion et faciles à trouver : request google ! Toutefois s'il lui venait l'envie d'en créer un par lui-même, et par javascript (et css3) ce serait un bon apprentissage et un très bon qui lui assurerait beaucoup d'aisance et de liberté pour la suite. Alors en ferait-il la demande ici ?
Modifié par pictural (29 Jul 2015 - 20:36)
C'est bon j'ai résolu ce petit soucis après avoir relancer Dreamweaver et relancé le fichier... de plus je suis en phase d'apprentissage donc je fais des non sens et je pense que certaines lignes du code sont incompatibles.

En fait j'avais un peu poussé avec la méthode Photoshop et aucune modification ne pouvait se faire sans tout refaire sous Photoshop, bref un bordel, je pense utilisé une méthode plus convenable avec CSS et HTML et en écrivant le code. C'est super intéressant !

C'est juste pour concevoir un site perso, et échanger avec des amis ou d'autres photographes amateurs, et c'est aussi un moyen d'apprendre le langage informatique. Je n'ai pas envie de faire un facebook pour partager !

Pour le slider j'ai trouvé des solutions provisoire comme wowslider mais voir leur logo m'agace et je voudrai le faire moi même ! On verra par la suite il faut que je restructure tout mon site pour le moment et la je découvre les joies du codage.
eaglefor a écrit :
(...) bref un bordel, je pense utilisé une méthode plus convenable avec CSS et HTML et en écrivant le code. C'est super intéressant ! (...)
J'ai pu éprouver la discipline essentielle suivante : rédiger l'ouverture d'une balise et rédiger aussitôt sa fermeture ! Ainsi peu d'oubli de fermeture eût pu pervertir mon code, me suffisant à intercaler d'autres balises que je ne manquais pas de fermer aussitôt, évidemment ... pour y rédiger div, p, a, ... texte, img, object, etc.

Bon code ! Eaglefor.

Et à + pour un slider de ta création si besoin ...

Je ne doute pas que certains articles sur Alsac. t'intéresseront demain ou après-demain sur les logiciels d'aide au codage au km comme pour la coloration syntaxique qui procéderait d'un confort visuel.

Astuce de travail : considère que des lignes de commentaires perso <!--Blabla--> rédigées dans le html quoi qu'elles seront 'invisibles' sur le navigateur sont visuellement très structurantes autant qu'elles puissent exprimer des pensées de travail importantes :
<!--note : mon Slider - DEBUT-->

<div id="slider">
</div>

<!-- note : mon Slider - FIN-->
Ainsi dans le Bloc-notes par Edition->Rechercher : note->suivant tu retrouveras aisément tes commentaires perso, donc à pouvoir mener des modifications aisément !
Modifié par pictural (30 Jul 2015 - 16:02)
Merci pour le tuyau des commentaires !

Par contre j'ai du mal avec le rendu dans le navigateur il est différent que celui de Dreamweaver... malgré les préconisations préalablement dites.

voilà ce que j'obtiens sous chrome alors que mon livre photo au format pdf doit se trouver sous la photo.
upload/59471-t.jpg

Le code :
<html>
<head>
<title>Experience photo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="styleaccueil.css" rel="stylesheet" type="text/css">
</head>


<body>
<h1><a href="Jmillien/Presetnation.html">Jonathan Millien Photographe amateur</a></h1>

<h2>
<div id="container1">
<div id="col1"><a href="Montagne/montagne.html">Photo Montagne</a></div>
<div id="col2"><a href="Littoral/littoral.html">Photo Littoral</a></div>
<div id="col3"><a href="Animal/animal.html">Photo Animalière</a></div>
<div id="col4"><a href="General/general.html">Photo Générale</a></div>
</div>
</h2>

<h3><a href="Livre photo/livre photo.pdf">Mon livre photo au format pdf</a></h3>
</body>
</html>


CSS :

body
{
background-image:url(site%20web%20image/site%20web.png);
background-repeat: no-repeat;
}
#col1 {
float:left;
width:25%;
}
#col2 {
float: left;
width:25%;
}
#col3 {
float:left;
width:25%;
}
#col4 {
float:right;
width:25%;
}
a
{
text-decoration: none;
color: #CCCCCC;
}

h1
{
font-family:ISOCTEUR;
font-size:22px;
color:#CCCCCC;
margin-top:215px;
margin-left:680px;
}
h2
{
font-family:Garamond;
font-size:34px;
color:#CCCCCC;
margin-top:132px;
margin-left:220px;
#container1 {
float:left;
width:100%;
}
h3
{
font-family: Garamond;
font-size: 24px;
color: #CCCCCC;
position: absolute;
right: 545px;
top: 960px;
}

Je vous laisse critiquer le code.
Modifié par eaglefor (30 Jul 2015 - 20:55)
Bonjour.

Rapidement ce que je vois, c'est qu'il te manque un doctype, et ça c'est très très important.
Le doctype sert tout simplement à expliquer au navigateur web dans quelle langue tu lui causes, perso je te conseillerais html5.

Ensuite ta balise h2 avec ton menu dedans, je ne trouve pas ça génial, utilise plutôt un <ul>, une simple <div> ou alors une balise <nav> (EDIT: pas <menu>) qui est là pour ça.


Et dans ton CSS, un truc que tu ne vois pas sur ton PC, c'est l'utilisation de police d'écriture non standard, donc sur ta machine, ça fonctionne, mais sur une autre probablement plus ! (-> utilisation de font-face)

Pour le reste, le code est assez propre et le rendu pas mal pour l'instant. Smiley cligne
Modifié par SolidSnake (31 Jul 2015 - 14:25)
Eaglefor,
commençons par le commencement.

J'ai aménagé pour toi une page générique que j'utilise pour moi-même depuis toujours (en fait, pas tout à fait depuis toujours, mais celle-ci me paraît très bonne). J'espère qu'elle respecte les standards du web actuellement en vigueur. Les Alsanautes ne manqueront pas d'y apporter leurs commentaires si d'aventure j'avais erré deci-delà !

Cette page générique devrait donc t'aider. N'omets pas au moment de l'Enregistrer sous ... de choisir le codage UTF-8 que te proposera ton Bloc-notes ! (parce qu'à défaut cela t'interdirait d'utiliser dans les 'input' les caractères accentués 'é à ù î ° ï' etc. malgré le <meta charset="utf-8" /> du html)

html
<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8" />

	<!-- note Le titre sera indexé par les robots ! il doit être choisi avec discernement et distinction -->
<title>_</title>

	<!-- note Voici deux bonnes façons de faire apparaître un icône dans la barre sup de l'onglet de ta page -->
<link rel="shortcut icon" href="_/favicon.ico" />
<link rel="icon" type="image/x-icon" href="_/favicon.ico" />

	<!-- note Très important : ceci apparaîtra dans le résultat de requête google, bing, yahoo ... -->
<meta name="description" content="Mon nom, ce que je fais, ce que je présente ici" />

	<!-- note media="all" pour tout support sans distinction ! -->
<link rel="stylesheet" type="text/css" href="_/mon-css-global.css" media="all" />

	<!-- note Pour une modification particulière à apporter dans cette page malgré le css déclaré ci-avant -->
	<!-- note En cas de font, il est prudent déclarer une family en 2 polices minimum, puis au besoin une seule suffira -->
	<!-- note Au besoin je modifie les attributs standards d'une balise -->
<style>
body{font-family:verdana,arial}
i{letter-spacing:0.2em}
p{margin-left:15px;margin-bottom:45px}
</style>

</head>

<body>

	<!-- note Nécessairement un div général qui contient tout -->
<div>

	<!-- note header nav footer (balises html5) doivent être utilisés parce les robots les considèrent d'intérêt ! -->
	<!-- note Est important de renseigner le visiteur sur la date de mise à jour du site, de sa date d'édition ; il est également certain que les robots en tienne compte parce qu'ils adorent ce qui est updated donc le plus récent : Edition : 31 juillet 2015 -->
	<!-- note le header contient ici les liens de navigation interne au site -->
	<!-- note le header peut être en position:fixed, ainsi lors d'un défilement de la page il reste visuellement accessible -->
<header>

<nav>
	<!-- note Proprement le menu : ici apparaît la navigation vers d'autres pages du site, ou dans la même page par jeu d'ancres -->
	<!-- note Jeu de liste à puces : ul li, qui peut contenir des sous-menus c-a-d d'autres listes à puces -->
</nav>

</header>

<div>
	<!-- note Ici je déballe la rédaction substantielle de ma page -->
	<!-- note Les titres h1 h2 sont considérés avec intérêt par les robots -->
<h1>_</h1>

<h2>_</h2>

<p>_</p>
<p>_</p>

<h2>_</h2>

<p id="slider">_</p>

<h2>_</h2>

<p>_</p>
<p>_</p>

</div>

<footer>
	<!-- note Rédaction d'éléments anecdotiques mais importante : mentions légales obligatoires si le site est commercial et marchand donc également déclaration à la CNIL par son numéro de dossier (!), adresse T, nom de l'hébergeur du site. Contact facebook twitter google+, contact imel, etc.  -->
<footer>

</div>

	<!-- note L'appel à des scripts se fera ici de préférence sauf une nécessité prioritaire -->
<script src="_/slider.js"></script>

</body>

</html>

Modifié par pictural (31 Jul 2015 - 21:23)
Bonjour,
J'interviens une secondes fois pour préciser deux points
1) NON le cache historique n'est pas vidé totalement et même parfois
pas du tout, lorsque tu le ferme et le relance, cela dépends des paramètres !
l'informatique est une science exact et précise. Alors en période de test, au lieu de contrôler
sur la dizaine de rubriques du cache, (images cookies etc...) ceux que tu a paramétré comme "à vider a la fermeture du navigateur" je te conseil (pour la deuxiéme fois de le vider parfois totalement !

2) concernant le code que tu présentes, saches qu'a partir du <BODY> tout les éléments conteneurs comme par exemple les DIV se mettent l'un en dessous de l'autre,
A moins que tu leur ai assigné une position fixe.
Par contre si en plein milieu d'une page tout tes DIV ou autre conteneur sont fermés, html tu décrits un élément in-line genre <h1> <p> etc... alors il se colle derrière les éléments décrits depuis le BODY !!

C'est le cas exactement de ton

<h3><a href="Livre photo/livre photo.pdf">Mon livre photo au format pdf</a></h3>
Bonjour Christele,
j'avais écrit : -"(...) fermer le navigateur (chrome, firefox, ...) puis le relancer suffit à actualiser les modifications de css sans toutefois devoir procéder au nettoyage du cache."

Cependant les comportements sont parfois étranges dans l'informatique qui est bien sûr une science exacte.
pictural a écrit :
Bonjour Christele,
j'avais écrit : -"(...) fermer le navigateur (chrome, firefox, ...) puis le relancer suffit à actualiser les modifications de css sans toutefois devoir procéder au nettoyage du cache."
Cependant les comportements sont parfois étranges dans l'informatique qui est bien sûr une science exacte.


Désolé, tout objet ayant été vu sur ton micro y reste , ton navigateur quel qu'il soit ne fait à cette règle qu'une exception, ce sont les cookies.
Par contre tout navigateur a un paramètre du nettoyage du cache (temporary internet ou autre)
avec des cases a cocher selon ta façon de travail , tel que
upload/23114-000xxx.jpg
Le soucis ne vient pas du fait de vider le cache ou non car quoiqu'il arrive, il n'y a pas dans certains cas de corrélation entre le rendu Dreamweaver et navigateur. Une modification du code n’entraîne pas la même modification visuelle selon le logiciel ou le navigateur.

De plus le rendu entre Firefox chrome et IE est différent notamment sous IE .

Mon plus gros casse tête c'est de placer correctement mon texte la ou je le souhaite j'ai beau utiliser position fixe, absolue en px ou % rien ne change toujours un texte qui veut pas se mettre au bon endroit et lorsqu’il y est c'est l'autre qui se décale.
Modifié par eaglefor (01 Aug 2015 - 14:30)
eaglefor a écrit :
Le soucis ne vient pas du fait de vider le cache ou non car quoiqu'il arrive, il n'y a pas dans certains cas de corrélation entre le rendu Dreamweaver et navigateur. Une modification du code n’entraîne pas la même modification visuelle selon le logiciel ou le navigateur.

De plus le rendu entre Firefox chrome et IE est différent notamment sous IE .

Mon plus gros casse tête c'est de placer correctement mon texte la ou je le souhaite j'ai beau utiliser position fixe, absolue en px ou % rien ne change toujours un texte qui veut pas se mettre au bon endroit et lorsqu’il y est c'est l'autre qui se décale.

Mais tu ne lits pas ce que nous écrivons Smiley eek
Mets ton 

<div class="place">
<h3><a href="Livre photo/livre photo.pdf">Mon livre photo au format pdf</a></h3>
</div>


et ajoutes au CSS ou au style du html

div.place {position : fixed;top : 400px;left : 40px;}
Petite question d'ordre méthodologique mon image d'arrière plan comprend en fait le fond gris le bandeau bleu le titre et les différentes icônes. Ne faudrait-il pas séparer tous ces éléments et les assembler via le code ?
Bonjour Eaglefor,
il est probable que tu préféreras élaborer ton site uniquement pour les écrans d'ordi, non ceux pour smartphone ou tablette. Dans un premier temps et peut-être toujours parce que tu es photographe. Ce serait infiniment complexe d'élaborer ultérieurement des versions pour smartphone et tablette : tu risques d'être déçu dans le rendu minimaliste de tes oeuvres ; en ce cas tu te limiteras à réaliser quelque chose de bon, et de très bon pour les écrans 15'' et 17'' (pouces) : autant faire une et seule chose et qu'elle soit excellente ...

En ce cas tu seras bien inspiré de te limiter à une largeur de 980 pixels. Je t'invite à surfer le web et à découvrir ce qu'ont réalisé une vingtaine d'autres photographes, et à admettre que pour tel ou tel site que tu admirerais, tu seras amené à lire le code source de leurs pages : html css principalement pour tout comprendre 'comment et pourquoi', et pourquoi pas pour t'en inspirer.

Considère l'ergonomie de ton menu : un amateur qui souhaite découvrir tes oeuvres doit pouvoir surfer aisément de page en page, mais surtout ne pas devoir procéder à ce qui deviendrait vite agaçant pour lui : saisir 1x 2x 3x la flèche 'retour' du navigateur pour revenir au menu général ... Mettre ton menu général en position:fixed, et sur toutes les pages et sous-pages (!!!) sera une première approche ergonomique intéressante, en le condensant sur la largeur totale 980px, et pas épais plus de 60px ! Je pense que ta page d'accueil actuelle est photographiquement vide de sens, presque inutile : place plutôt un trio de bonnes photos (pourquoi pas tes meilleures), aux dimensions moyennes qui assurent d'emblée l'envie de les saisir agrandies. Agis vite et fort, sans perdre la troisième seconde d'une visite où au terme de laquelle le visiteur choisira de rester sur ton site, ou de s'en échapper à jamais.

Pour répondre précisément à ta question : oui, et davantage : essaie d'oublier totalement PhotoShop pour l'instant, et apprends d'abord à coder html et css de façon simple, correcte et efficace. Et réserve à tes oeuvres et exclusivement à tes oeuvres le seul privilège de l'usage de PhotoShop ... Car c'est une question de stratégie double : création d'un site web en html et css, présentation d'une oeuvre photographique. A défaut de respecter ceci, crains de ne pas progresser vite et bien.
Modifié par pictural (02 Aug 2015 - 23:02)
Pages :
Sujet clos
Aller à