Netophonix - Le forum

Un petit univers pour les aventures, series, sketch en mp3 libre sur le net. Informez-vous et discutez sur toutes les sagas mp3.
Nous sommes actuellement le Ven 29 Mars 2024, 00:00
Rechercher dans tout le forum :

Le fuseau horaire est réglé sur UTC+1 heure [Heure d’été]


Publier un nouveau sujet Répondre au sujet  [ 13 messages ] 
Auteur Message
Message Publié : Mar 28 Juin 2011, 23:17  −  Sujet du message : [TUTO] Créer un site Web simple pour vos sagas (xHTML & CSS)
Répondre en citant
Neto-Rédacteur
Neto-Rédacteur
Avatar de l’utilisateur
Masculin 30 ans · 1188 posts
Inscription : 5 Août 09
A travaillé sur :
J'ai une page Netowiki je crois. Vas voir ;-).
Bonjour tout le monde :)

Ce tutoriel est là pour vous aider à créer un site web très simplement pour vos sagas MP3. Il n'a pas la prétention d'être destiné à des personnes possédant déjà un site web plus "complexe" avec des animations flash de partout etc...

Ce que je propose aujourd'hui, c'est de vous créer un petit site de quelques pages, construit juste en xHTML et CSS. Et pour que ça ne soit pas trop dur, je vais même vous donner les fichiers tout prêts à télécharger et modifier. Mais je vous rassure, je vais vous expliquer comment ça marche !

Je ne compte pas non plus revenir sur toutes les définitions, sur toutes les choses dites techniques, et que si certains ou certaines sont intéressées, elles peuvent toujours aller voir de très beaux tutos, biens mieux réalisés comme ceux du Site du Zero :)

Pour le moment, commencez par télécharger ce fichier zip.

----------------------------------------------------------------------------------------------------------------

Fichier

----------------------------------------------------------------------------------------------------------------

Dezzipez le n'importe ou, dans un dossier que vous appellerez comme bon vous semble...

Ouvre ce dossier, normalement vous devriez apercevoir :
Fichiers
Images
Scripts

index.html
style.css

Dans le dossier Fichiers, vous placerez vos fichiers, audio, vidéos... dans le dossier Images, vous placerez toutes les images constituant le design de votre site, et dans le dossier Scripts, vous pourrez intégrer tous les modules flash, js que vous pourriez installer (lecteur flash comme dewplayer par exemple).

On va commencer, ouvrez le fichier "index.html" avec notepad++ (que vous pouvez télécharger ici si vous ne l'avez pas).

Image


Aperçu du fichier index.html



Ce fichier représente la page d'accueil de votre site, c'est ici que vous afficherez les dernières news par exemple...

On va commencer tout de suite à le modifier et le compléter.
Regardez de plus près la partie en bleu

Code:
<title></title>

Entre ces deux balises, insérez le titre que vous voudriez voir apparaître sur l'onglet de votre navigateur :)

La partie orange représente toute la partie visible sur votre site, je l'ai donc découpée en quatre parties :
- Header : C'est là que vous mettrez le titre de votre site, ou encore la bannière qui pourra le remplacer. Ici, nous mettrons une image, parce que c'est nettement plus joli :) ;
- Menu : C'est là qu’apparaîtront les différentes catégories de votre site ;
- Body : C'est le corps de votre page, la partie centrale, là ou vous écrirez un peu tout et n'importe quoi :) ;
- Footer : C'est ici que vous pourrez mettre tout ce qui est relatif au copyright par exemple, ou d'autres informations complémentaires comme les flux RSS...

Le header tout d'abord...
Il y a deux méthodes pour faire quelque chose de ce header :
- Un titre tout basique, simple et efficace ;
- Une image/bannière, qui est déjà quelque chose de plus sympa :).

Si vous êtes intéréssés par la première solution, insérez le titre de votre site/page entre des balises :
Code:
<h1></h1>

Pour la deuxième possibilité, attendez un peu et laissez la place vide pour le moment :). Promis, on va vite s'en occuper ;).

Regardons plus en détail la partie "Menu" :

Code:
<h3>Titre menu</h3>

Entre les balises

qui définissent un titre de niveau 3, insérez le titre de votre catégorie.

Passons aux sous menus :

Code:
<li><a href="nom_page.html">sous menu</li>

Ici, vous avez deux choses à faire :
- Premièrement, changer le "nom_page" par le nom de la page vers laquelle ce sous menu renverra, préférez un nom en un seul mot, sans majuscules et sans minuscules. Exemple pour une page de News : news.html ;
- Deuxièmement, changer le "sous menu" et le remplacer par ce que vous voulez voir apparaître dans votre menu :).

Le nombre de menus possibles n'est pas infini non plus pour le site que nous allons créer, mais de toute façon, il vaut mieux éviter d'avoir trop de catégories pour faire quelque chose de "potable" ou l'on ne se perd pas :).

N'oubliez bien sur pas de supprimer les parties de menus qui ne vous intéressent pas dans le fichier, et rajoutez en par copier/coller si cela vous intéresse :)

Regardons maintenant la partie "body"

C'est dans cette catégorie que vous écrirez tout ce que vous avez à écrire sur votre site. Vous avez trois choses primordiales à savoir et à faire :
- Lorsque vous faites une page, il est conseillé de lui donner un titre : pour cela, utilisez une balise de titre

ou encore

. De cette façon, le lecteur pourra savoir ou est ce qu'il est vraiment en remontant en haut de la page :) ;
- Pour écrire quelque chose de visible, vous devez l'insérer entre des balises

et

. N'oubliez surtout pas ça, sinon, ben vous ne verrez rien :D ;
- Pour faire un titre à votre publication, il existe une balise spéciale qui fonctionne de la même manière que

, il s'agit d'une balise de titre de niveau 2 :

.

Ensuite, vous pouvez par exemple avoir besoin de mettre des images, des vidéos, pour cela je vous recommande de vous rendre ici pour voir leur utilisation. Le but ici n'est pas d'apprendre à coder, mais bien de créer un site très simple (très basique aussi :D), mais qui peut être bien fait si on se donne la peine de le vouloir :).

Dans le footer maintenant, vous pouvez écrire ce que bon vous semble, toutes les petites informations complémentaires par exemple ; allez y, lâchez vous :)
Généralement, c'est ici que l'on met tout ce qui se rapporte à l'auteur, aux droits d'utilisation des fichiers présents sur le site, etc...

Un exemple de code de page réalisée de cette manière quand même :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>The Ardeste</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
   </head>
   <body>
      <div id="header">
      </div>

      <div id="menu">
            <div class="menu">
               <h3>Auteurs</h3>
               <ul>
                  <li><a href="aut_podeste.html">Podeste</a></li>
                  <li><a href="aut_bardyl.html">Bardyl</a></li>
               </ul>
            </div>      
            <div class="menu">
               <h3>Audio</h3>
               <ul>
                  <li><a href="sagas_tgvr.html">Sagas communes</a></li>
                  <li><a href="sagas_solo.html">Sagas solos</a></li>
                  <li><a href="monos.html">Monos</a></li>
               </ul>
            </div>
            <div class="menu">
               <h3>Autres créations</h3>
               <ul>
                  <li><a href="othr_txt.html">Textes</a></li>
                  <li><a href="othr_img.html">Images</a></li>
                  <li><a href="othr_web.html">Sites</a></li>
                  <li><a href="othr_more.html">Autres</a></li>
               </ul>
            </div>               
      </div>
 
      <div id="body">
      <h1>Accueil</h1>
      <p>Bienvenue sur notre site, il est consacré a l'équipe réunissant Podeste et Bardyl pour former the Ardeste.
      texte pourri : Pater ideoque aliique congregati ita usibus congregati eiusdem ponderibus Apollinaris usibus regale est atrocium incertum incertum civitatibus atrocium ideoque indicatum dum pater Apollinaris incertum criminum occulte conscius apud provinciae ita cuius vel dum vel congregati apud locante Tyrum ideoque regale sunt criminum tunc ex textum conscius Apollinaris nominis dum congregati conscius qui ponderibus occulte ideoque locante ideoque eiusdem ponderibus Tyrum quo aliique civitatibus est civitatibus apud Tyrum cuius ponderibus ex tunc ductus ponderibus regale dum occulte est incertum textum diversis pater provinciae occulte eiusdem quo civitatibus est occulte locante sunt conscius struuntur rector incertum est congregati indicatum ex criminum provinciae.</p>
      </div>
 
      <div id="footer">
      <p>©Copyright machin truc chouette, interdiction de reproduire cette horreur sous peine de quittation immédiate de site par les lecteurs qui seront attéris sur un truc aussi moche :D</p>
      </div>
   </body>
</html>



Ceci n'est bien sur qu'un exemple de page, ne la recopiez pas.
Maintenant, ce que vous allez faire, c'est ouvrir cette page avec votre navigateur préféré...

Image


Le résultat

.

Et voila, vous avez votre première page. Vous avouerez que esthétiquement, c'est quand même pas ça... mais ne vous inquiétez pas, ça va arriver...

Créons maintenant l'ensemble des pages de votre site, sinon les liens que vous avez spécifié dans votre menu ne serviront à rien et mèneront vers... rien :D.

Ouvrez donc un nouveau document avec notepad++ que vous nommerez en fonction des noms de vos pages. Enregistrez le bien en HTML !
Collez y le même code que le fichier index.html et changez :
- Le body en fonction de la page que vous créez ;
- Le "tittle" (dans la partie bleutée de la première image) si vous pensez que c'est nécessaire.
Répétez cette opération pour toutes les pages que vous souhaiter créer :)

Si vous faites un test, normalement, tous les liens de votre menu devraient marcher désormais :)

Nous allons maintenant aborder la seconde partie qui consiste à rendre tout ça un peu plus clair :)
Ajouter des couleurs, un fond, etc...

Je préviens avant : Je risque de donner pas mal de conseils, libre à vous de les suivre ou non, mais si ils sont donnés, c'est que d'une certaine manière il vaut mieux les suivre :D.

Ouvrez le fichier style.css

C'est donc dans ce fichier que nous allons travailler maintenant.
Il y a certaines choses que je n'expliquerai pas, évitez donc d'y toucher sauf si vous savez ce que vous faites. Néanmoins, si vous souhaitez en savoir plus sur les propriétés CSS, je vous recommande cette page très bien renseignée !

On commence !

Code:
body
{
   width: 1000px;
   margin: auto;
   margin-top: 15px;
   margin-bottom: 15px;   
   background-image: url("adresse de votre image");
}


Dans cette partie, on définit la largeur de votre page, les marges en haut, les marges en bas (pour éviter de "coller" à la fenêtre).
Le plus important est la dernière ligne.
C'est elle qui définit l'image de fond de votre site !
Mettez donc entre les guillemets ceci :
"/images/nom_de_votre_image"
Votre image doit impérativement se trouver dans ce dossier !
Il est conseillé de mettre vos images au format .jpg, ou .png (personnellement, je préfère le .png, mais libre à vous de choisir). Les autres formats sont fortement déconseillés !

Pour ceux qui ne veulent pas mettre une image, mais simplement une couleur en fond, il est nécessaire de remplacer la dernière ligne par :

Code:
background-color:#

Mettez après la "#" le code hexadécimal de la couleur de votre choix :)
Évitez les couleurs trop "flash". Votre site doit avant tout rester visible, donc le vert, le bleu, le rose et le jaune fluo, à la poubelle !

Code:
#header
{
   width: 1000px;
   height: 120px;
   background-image: url("adresse de la bannière");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}


Ça y est, nous retrouvons enfin le header. Sisi, souvenez vous, c'est lui qui permettra de définir la bannière de votre site :)
Insérez donc a la place de adresse de la bannière : /images/nom_de_votre_bannière.

Code:
#menu
{
   float: left;
   width: 180px;
}

.menu
{
   background-color: #;
   background-image: url("image de fond menu");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px;


Ici, vous pouvez définir suivant que vous voulez le menu :
- A gauche : left ;
- A droite : right ;
Width vous permet de modifier la largeur de ce menu, libre à vous de faire vos propres essais :)

Définissez ensuite la couleur de fond (en hexadécimal) et/ou l'image de fond du menu. On procède toujours de la même manière :)


Code:
.menu h3
{   
   color: #;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: ;
}

.menu ul
{
   list-style-image: url("nom_de_limage");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.menu a
{
   color: #B3B3B3;
}



Oulala, que de choses pour un simple menu :D
On va y aller doucement :)

Pour commencer, il faut définir un peu ce que vont "être" les titres des catégories :
- Color : la couleur en hexadécimal, comme toujours :D ;
- Font-family : Les polices utilisées. A savoir ! Vous pouvez utiliser toute sorte de police si vous le voulez, sauf que si le visiteur ne les possède pas sur son ordinateur, il ne les verras pas. D'ou l'utilité de mettre plusieurs polices, ainsi, si l'ordinateur ne peut pas lire la première, il lira la seconde, et ainsi de suite, jusqu'à ce que l'une d'elle "convienne". D'ou l’intérêt de mettre en bout de chaîne une police "conventionnelle" ;
- Text Align : Ici vous avez "trois" possibilités : left, right ou center. Cela vous permet de définir si vous voulez que votre titre soit centré, à gauche ou à droite :).

Dans .menu ul, on s’intéresse à tout ce qui concerne les modifications que l'on peut apporter aux puces :
- list-style-image va permettre de placer une image à la place du rond noir de la liste à puces. Préférez donc une petite image. Supprimez la ligne si elle ne vous intéresse pas et que vous voulez garder le rond noir :) ;
- Ne vous préoccupez pas des quatre lignes suivantes ;

.Menu a est là pour vous permettre de définir la couleur des liens (sous menus). C'est toujours de l'hexadécimal :)

Voila pour avoir un menu "propre".

Maintenant on va passer au gros bloc "body", là ou vous affichez tout les trucs "intéressants" ou pas d'ailleurs :D

Code:
#body
{
   margin-left: 180px;
   margin-bottom: 20px;
   padding: 5px;
   background-color: #;
   background-image: url("nom_de_l'image");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}


Je peux donner quelques rapides explications sur cette partie du code, bien que normalement, tout est défini plus ou moins correctement :)
On définit donc les marges du blocs par rapport aux autres blocs, éviter qu'ils se touchent par souci d'esthétique, et dans la première ligne, on décale le bloc de 180 px, pour qu'il ne soit pas sous le menu :).


Définissez la couleur et/ou l'image de fond, je n'explique plus, je pense que maintenant, vous savez comment ça marche :D

Maintenant, il reste à modifier l'apparence des textes du body :
Code:
#body h1
{
   color: #;
   text-align: ;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}


Tout d'abord, les titres de type h1 :
- Couleur ;
- Alignement du texte (left, right, center) ;
- Polices.

Code:
#body h2
{
   height: 30px;

   background-image: url("nom_de_limage");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #;
   text-align: ;
}


Tout ceci concernera les titres de type h2 du body donc.
Vous avez ici à modifier la petite vignette apparaissant à gauche du titre, la couleur, et l'alignement, comme précédemment :)

Si vous avez des titres de type

, surtout n'hésitez pas à faire un copier coller du code en replaçant h1 ou h2 par h3. Après, c'est à vous de voir en fonction de ce que vous mettez dans votre bloc body du fichier .html :)

Normalement, si vous faites un test, vous devriez voir quelque chose de beaucoup plus ordonné et de plus clair :)

Vous avez donc fait votre première version de votre site :)
Ce n'est bien sur pas "magnifique", mais c'est déjà quand même assez sympa non ? :)

Je mettrais des design que j'ai réalisé, des très simplistes au début, et certains plus complexes pour vous montrer qu'avec seulement du HTML et du CSS, on peut quand même faire quelque chose de sympa :)

Test 01 : Design très simpliste

Si vous voulez en savoir plus, et tout savoir du HTML et CSS, je vous conseille différentes petites choses :
- Le cours sur le Site du Zero (j'espère que je ne fais pas de la pub interdite) mais c'est vraiment un très bon site pour tout apprendre :) ;
- Un bouquin magnifiquement bien réalisé (par l'auteur du tuto du Site du Zero également) disponible ici et dans toutes les bonnes librairies :).

Vous croyez qu'on en a terminé ?

Non, pas encore, il reste quelques petits trucs à voir, notamment concernant ce que vous pourriez avoir besoin en plus en tant que créateur audio...

Insertion d'un lecteur flash pour lire vos fichiers audios. (dewplayer).

Rendez vous sur ce site et suivez les instructions, c'est vraiment bien expliqué :)
Souvenez vous néanmoins de ne pas mettre de caractères accentués, ni d'espaces dans vos fichiers audio, on ne le répétera jamais assez je crois bien :D

Insertion d'une page de flux RSS (dont vous pouvez insérer un lien dans votre footer par exemple :)).

Rien de plus simple.
Créez un nouveau fichier notepad++ que vous nommerez : rss.xml
Faites un encodage en UTF-8 ! J'insiste bien là dessus, ayant eu des erreurs par le passé du à ce problème :)

Copiez/collez le code suivant :

Code:
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
   
        <title>Mon site web</title>
        <link>http://monsiteweb.com</link>
        <description>Les news de mon site web</description>


Remplissez les informations , , et :)
Ensuite copiez collez le code suivant :

Code:
        <item>
            <title>Titre de l'annonce</title>
            <link>Lien de la page</link>
            <description>Description du lien</description>
            <pubDate>Date de publication</pubDate>
        </item>


Ce code, si vous tenez vos flux RSS à jour, vous finirez par le connaitre par coeur à force de le copier coller encore et encore :D
Conseil : Très peu de personnes utilisent véritablement les flux RSS. Personnellement, je vous le conseille, en effet, souvent on n'a pas le temps d'aller voir les sites d'un tel ou un tel, donc si on est abonné aux flux RSS (pour ceux qui le sont, ils conviendront avec moi que c'est très pratique), on à accès à tout directement ! Les flux RSS sont un moyen de faciliter la vie à vos lecteurs, donc n'hésitez pas :)

Maintenant, pour faire savoir à vos lecteurs que vous possédez cette "option", vous pouvez donc l’intégrer dans le footer par exemple soit par un lien en mettant le code suivant :

Code:
<a href="rss.xml">Flux RSS</a>


Ou encore via une image :

Code:
<a href="lien" <IMG SRC="url_de_l_image" ALT="Texte remplaçant l'image" TITLE="Texte à afficher"/></a>


Le texte remplaçant l'image est le texte qui s'affichera en cas de problème d'affichage, il est très important, ne l'oubliez pas ! Quand au texte à afficher, il représente la mini bulle d'info que vous voyez lorsque vous survolez des images, des textes, etc...

Dernière chose : ou mettre votre site ?

Il existe différentes méthodes pour mettre son site web en ligne : des gratuites et des payantes :
La meilleure offre gratuite que vous puissiez trouver est chez free ; Un bon tuto.
En payant, je ne m'y connais pas beaucoup, mais j'ai entendu que du bien de OVH :)

Voila, je pense que je vais m'arrêter là, vous avez maintenant les bases pour faire quelque chose de "solide", de propre :)

Après, je ne vous ai vraiment montré que du tout petit petit, xHTML et CSS ne sont que des bases, si vous voulez vraiment quelque chose de bien, tournez vous vers le PHP, pour avoir des belles animations, vous pouvez intégrer du flash, ou du javascript, etc... mais dans tous les cas, vous devez passer par une base de HTML et de CSS, c'est fondamental !

Donc voila, j'espère que ça servira à certains d'entre vous, n'hésitez pas à poser des questions :)

Bardyl

----------------------------------------------------------------------------------------------------------------

Modifications :
29.06.2011 : 00:03 : Ajout d'un design CSS


Dernière édition par Bardyl le Mer 29 Juin 2011, 00:04, édité 2 fois.

Haut
 Profil  
 
Message Publié : Mar 28 Juin 2011, 23:29  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Scénariste
Scénariste
Avatar de l’utilisateur
Masculin 31 ans · 349 posts
Inscription : 7 Juillet 09
A travaillé sur :
Les monos de la JT's Productions ; Eino Reishu ; Autre Vision Project
Je me pose la question si passer par un site en spip n'est pas aujourd'hui plus simple et donnant un meilleur rendu rapidement.
Mais là je voudrais l'avis d'autres internautes et c'est un peu hors propos.

Très bon tuto, mais à mon sens développe un peu plus la partie xHTML.
Bon boulot

ImageImage Les monos de Jarril et de Tibékamer

Besoin d'un scénariste ? Besoin d'un Dialoguiste ? MP moi. (Pas forcément de réponses positives)


Haut
 Profil  
 
Message Publié : Mar 28 Juin 2011, 23:31  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Netophoniste
Netophoniste
Avatar de l’utilisateur
Masculin4792 posts
Inscription : 21 Janvier 07
Spip est utilisé par Knarf mais de tous les retours que j'en ai (et même Knarf sur Twitter) indiquent que c'est une véritable horreur à maintenir. Personnellement, j'ai un très gros coup de coeur pour Wordpress. Mais comme tu le dis très bien, ce n'est pas le sujet puisque ce tutoriel (très bien fait soit dit en passant) s'adresse à ceux qui veulent réaliser leur site eux mêmes.

→ Carton poussiéreux.

:}


Haut
 Profil  
 
Message Publié : Mar 28 Juin 2011, 23:33  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Neto-Rédacteur
Neto-Rédacteur
Avatar de l’utilisateur
Masculin 30 ans · 1188 posts
Inscription : 5 Août 09
A travaillé sur :
J'ai une page Netowiki je crois. Vas voir ;-).
Tibekamer a écrit:
Je me pose la question si passer par un site en spip n'est pas aujourd'hui plus simple et donnant un meilleur rendu rapidement.


Le souci avec spip, c'est que l'architecture est déjà complêtement faite, on ne peut pas la modifier comme on veut, tandis qu’ici, si on apprend à mieux se servir de tout ça (peut être que je le développerais un peu plus, même si ce n'est pas le but premier du tuto) on peut faire "ce que l'on veut".

Le principe est d'arriver à se débrouiller indépendamment d'autres outils, sinon je pourrais dire d'aller créer un compte chez e-monsite et voila :D

Mais là, c'est vraiment pour avoir quelque chose de propre, à soi :)

EDIT : grillé par Kak :D
Et merci au passage :)


Haut
 Profil  
 
Message Publié : Mer 29 Juin 2011, 09:22  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Créateur
Créateur
Avatar de l’utilisateur
Masculin 36 ans · 122 posts
Inscription : 22 Janvier 07
A travaillé sur :
Ze Véritable Légende of Zelda: Ocarina of Taime; Le Donjon de Naheulbeuk; La Chope des Dieux
C'est une idée que je propose, mais je pense que ce serait beaucoup plus simple de faire appel à un framework pour la structure du site et aussi au niveau sécurité. Ce qu'on pourrait faire, c'est bosser sur un template de framework qui fonctionnera de la même manière pour tout le monde. Après il suffit de modifier le layout (design) en fonction de la saga ou du créateur.

Je dis ça parce que ça peut être chiant pour tous les créateurs de se lancer dans la programmation web alors qu'ils n'en ont pas forcément envie juste pour poster leurs créations alors que d'autres y sont habitués et aiment ça. :D

Ca pourrait être une idée de projet sympathique je trouve.


Haut
 Profil  
 
Message Publié : Mer 29 Juin 2011, 09:28  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Neto-Rédacteur
Neto-Rédacteur
Avatar de l’utilisateur
Masculin 30 ans · 1188 posts
Inscription : 5 Août 09
A travaillé sur :
J'ai une page Netowiki je crois. Vas voir ;-).
Le truc, c'est que je ne pouvais pas ma lancer là dedans, c'est impossible...

Killork a écrit:
Je dis ça parce que ça peut être chiant pour tous les créateurs de se lancer dans la programmation web alors qu'ils n'en ont pas forcément envie juste pour poster leurs créations alors que d'autres y sont habitués et aiment ça.


Je le redis, c'est pour ça que ce tuto est là, les gens n'ont ainsi pas à aller coder 36 trucs étant donné que le travail est déjà à moitié fait, il ne reste qu'à compléter et ça tiens beaucoup plus de bon sens que de véritable programmation dans ce cas là

Pour le reste, je n'ai donc pas les connaissance requises pour développer un truc comme ça, mais quand je les aurais, t'en fais pas, je tenterais de m'y mettre :)

Le tuto a quand même été fait pour éviter à la base de voir certains "immondices" (désolés si certains se sentent viser même si il n'y a aucune critique) sur e-monsite, ou je ne sais pas trop où avec des centaines de fenêtres de pubs etc... Ici vous n'avez rien et une certaine impression d'avoir "vraiment" fait quelque chose :)


Haut
 Profil  
 
Message Publié : Mer 29 Juin 2011, 09:45  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Créateur
Créateur
Avatar de l’utilisateur
Masculin 36 ans · 122 posts
Inscription : 22 Janvier 07
A travaillé sur :
Ze Véritable Légende of Zelda: Ocarina of Taime; Le Donjon de Naheulbeuk; La Chope des Dieux
Bardyl a écrit:


Je le redis, c'est pour ça que ce tuto est là, les gens n'ont ainsi pas à aller coder 36 trucs étant donné que le travail est déjà à moitié fait, il ne reste qu'à compléter et ça tiens beaucoup plus de bon sens que de véritable programmation dans ce cas là


Mmmh... je ne suis d'accord qu'à moitié. Dans un sens, c'est vrai qu'avoir juste quelques lignes c'est facile pour la compréhension. De plus, ton tutoriel est sympathique et très bien résumé, mais après tout le monde ne connait pas forcément les soucis d'interprétation du css par les différents navigateurs. Donc quelque part ça le fera forcément revenir sur des tutos et des forums, et ce n'est pas forcément ce qu'il recherche. Et il suffit que le créateur cherche à densifier son espace perso en ajoutant des modules par ci par là pour au final en revenir au même point.

D'où mon idée de faire bosser des développeurs sur un modèle déjà tout fait avec index, page des téléchargements, contacts, plus un espace d'administration pour gérer les news et l'upload de fichiers. l'auteur n'aura plus qu'à changer les images pour son design et voilà.

En gros, ce serait comme un mini-CMS, sauf que c'est pas orienté e-commerce...

Encore une fois, c'est juste une proposition, rien de plus qu'un avis personnel :)


Haut
 Profil  
 
Message Publié : Mer 29 Juin 2011, 09:56  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Neto-Rédacteur
Neto-Rédacteur
Avatar de l’utilisateur
Masculin 30 ans · 1188 posts
Inscription : 5 Août 09
A travaillé sur :
J'ai une page Netowiki je crois. Vas voir ;-).
Déjà, le CSS que j'ai intégré est "interprété de la même façon" par tous les navigateurs (c'est entre guillemets hein :D). Le CSS présent n'aura aucun souci dans aucun navigateur (testé et retesté dans Firefox, Safari, Chrome, Opera, IE 6 à 9). Donc je pense que de coté là, il n'y aura aucun problème.

Après si tu veux te lancer dans le framework, vas y, rien ne t'en empêche, ou alors trouve des gens pour le faire, moi j'ai pour le moment pas assez de connaissances là dedans pour faire quoi que ce soit :)

Mais en attendant que ça soit fait (parce que ça demande énormément de temps, le tuto est là pour ceux qui ont besoin. Si certains veulent faire un framework pour les autres, qu'ils le fassent, franchement ça peut être génial, mais bon, après, faut être vraiment motivé pour se lancer là dedans :D

Après, même si j'apprécie tes remarques très constructives, je pense pas que ce soit l'objet du topic, mais si tu es motivé et que tu veux en discuter, MP moi, ou par le channel :)


Haut
 Profil  
 
Message Publié : Jeu 30 Juin 2011, 14:50  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Recrue
Recrue
Avatar de l’utilisateur
Masculin 28 ans · 84 posts
Inscription : 20 Juillet 10
A travaillé sur :
Parlons du Père Noël (Calendrier de l'Avent 2012)
Merci pour ce tuto très complet et compréhensible, grâce auquel même les incompétents en informatique, les Zéros, tels que moi, peuvent compendre les bases du xHTML et du CSS, et ainsi créer un site simple mais joli, avec tout ce qui est nécessaire pour un créateur de saga mp3. En plus, cela nous aide à agencer les différentes parties de notre site..., on peut aussi désormais mettre des couleurs, des images, des liens, un menu, des titres, sous-titres, sous-sous-titres..., nommer l'onglet..., bref tout ce qui est nécessaire, voire plus! :)
J'ai remarqué que free n'héberge que des site pour des habitants français. Etant belge, cela m'a posé un petit problème, mais grâce à ceci, j'ai vite pu trouver mon bonheur. :smt007
Donc, il me semble, chers débutants, ce tuto est fait pour vous! ;)

Knick Knack Paddy Whack, c'est Rascar Capac


Haut
 Profil  
 
Message Publié : Jeu 01 Mars 2012, 13:27  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Postulant(e)
Postulant(e)
Avatar de l’utilisateur
34 ans · 4 posts
Inscription : 18 Février 12
A travaillé sur :
Troubleshooters, les réparateurs de l'espace (série en cours)
Merci beaucoup pour ce tuto ! J'ai enfin pu créer mon site pour ma saga !


Haut
 Profil  
 
Message Publié : Mer 07 Mars 2012, 04:01  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Créatrice
Créatrice
Avatar de l’utilisateur
Féminin 32 ans · 153 posts
Inscription : 24 Janvier 12
A travaillé sur :
- Le Projet H
- Le Mot du Jour
- Du Point de Vue des Méchants
- La Trilo J
- La Geste des Harpies
- Le MiM
- Trauma Fantasy X
Merci beaucoup!
J'ai aussi pu coder le site (le rendu est bof, mais c'est provisoire). J'attends le courrier de Free..

Playlist Youtube de Trauma Fantasy X


Haut
 Profil  
 
Message Publié : Mer 07 Mars 2012, 08:26  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Neto-Rédacteur
Neto-Rédacteur
Avatar de l’utilisateur
Masculin 30 ans · 1188 posts
Inscription : 5 Août 09
A travaillé sur :
J'ai une page Netowiki je crois. Vas voir ;-).
Concernant le rendu bof, je conçois que ce tuto n'apporte qu'une petite base. Un autre est en cours d'écriture reprenant les bases citées plus haut, et des techniques plus avancées pour celles et ceux qui souhaitent (peut-être) quelque chose de plus évolué et de personnel. :)


Haut
 Profil  
 
Message Publié : Jeu 24 Juil 2014, 01:10  −  Sujet du message : Re: [TUTO] Créer un site Web simple pour vos sagas (xHTML &
Répondre en citant
Neto-technicien(ne)
Neto-technicien(ne)
Avatar de l’utilisateur
598 posts
Inscription : 1 Juillet 14
OliverJandrew - Ven 25 Oct 2013, 10:49 a écrit:
Bonjour à tous,

Tout d’abord, un tout grand merci pour ce post. Grâce à ce dernier, j'ai pu créer une page. J'en suis très fier, même si le mérite te revient.

J'ai donc créé une page avec des onglets. Toutefois, là où je "sèche" c'est à cet endroit :

"Créons maintenant l'ensemble des pages de votre site, sinon les liens que vous avez spécifié dans votre menu ne serviront à rien et mèneront vers... rien :D.

Ouvrez donc un nouveau document avec notepad++ que vous nommerez en fonction des noms de vos pages. Enregistrez le bien en HTML !
Collez y le même code que le fichier index.html et changez :
- Le body en fonction de la page que vous créez ;
- Le "tittle" (dans la partie bleutée de la première image) si vous pensez que c'est nécessaire.
Répétez cette opération pour toutes les pages que vous souhaiter créer :)"

J'ai créé les autres pages et les ai enregistrées en HTML. J'ai ensuite copier-coller l'indexe, mais lorsque tu écris de changer le body, que doit-on écrire à l'emplacement Body ?

Peux-tu mettre un exemple concret en fonction de ton exemple ?

Merci bien

Blast - Ven 25 Oct 2013, 11:22 a écrit:
Ben le body, c'est le contenu de la page. Donc tu y mets ce que tu veux voir sur la page.

OliverJandrew - Ven 25 Oct 2013, 12:43 a écrit:
Je me suis mal exprimé. Je me posais la question de basculer sur une autre page via un un bouton sur la page 1.

Mais j'ai trouvé.

Merci quand même.


- Page 2 -

OliverJandrew - Sam 26 Oct 2013, 15:10 a écrit:
Re Bonjour,

Je ne sais pas si je peux continuer de poster mes questions dans cette section ou si je dois créer un nouveau sujet ... (Merci de voir s'il doit être déplacé).

J'ai donc commencé à "créer" mon site. Dans ton exemple, il y a une colonne à gauche avec trois encadrés.

Sur mon site, j'arrive à modifier le nombre, la police, le cadre ...

Toutefois, j'aimerais également avoir une colonne avec des encadrés sur la droite de ma page tout en conservant celle de gauche.

J'ai fait plusieurs testes, mais je n'ai aucune réussite.

Je modifie dans le HTML (je créé un nouvel encadré) et j'imagine que je dois encoder son emplacement dans le CSS. Toutefois, si je modifie de left à right, il change toutes mes colonnes de gauche sur la ddroite.

Auriez-vous une solution ?

Merci.

Bardyl - Sam 26 Oct 2013, 15:50 a écrit:
Le mieux serait encore de montrer tes bouts de code pour que je pige mieux ce que tu cherches à faire :).

Un jour j'actualiserai ce vieux machin, un jour.

OliverJandrew - Sam 26 Oct 2013, 17:47 a écrit:
Je suis vraiment désolé de ne pas savoir mieux m'exprimer, ceci étant dû à ma novicitude ...

Je te montre donc le screen de ce que j'ai déjà fait :

(image : 11537-15_fichiers/mini_131026074747272556.png )

Comme tu peux le constater, j'ai une colonne à gauche avec deux cadres.

J'aimerais créer la même chose, en dessous et à droite de ma bannière (pour avoir une symétrie, même si le nom des cadres différeront)

Je te fais un copier coller de mon ficher css :

Citer:
body
{
width: 800px;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
background-image: url("Images/Chateaux.JPG");
}

#header
{
width: 1000px;
height: 120px;
background-image: url("adresse de la banniýre");
background-repeat: no-repeat;
margin-bottom: 10px;
opacity : 0.7;
}

#menu
{
float: left;
width: 150px;
}

.menu
{
background-color: #59A03B;
background-image: url("image de fond menu");
background-repeat: repeat-x;
opacity : 0.7;

border: 2px solid black;
border-radius: 10px;

margin-bottom: 20px;
}

.menu h3
{
color: #24098E;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
opacity : 0.7;
}

.menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.menu a
{
color: #12210C;
}

#body
{
margin-left: 180px;
margin-bottom: 20px;
padding: 5px;
background-color: #9E8B2F;
background-image: url("nom_de_l'imag");
background-repeat: repeat-x;
opacity : 0.7;

border: 2px solid black;
border-radius: 10px;
}

#body h1
{
color: #;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#body h2
{
height: 30px;

background-image: url("nom_de_limage");
background-repeat: no-repeat;

padding-left: 30px;
color: #;
text-align: center;
}


Me comprends-tu mieux ?

En tout les cas, merci d'essayer :p

Je suis un robot qui aide l'équipe du forum à faire son travail.

Mon avatar est Robot de Jean-Philippe Cabaroc sur The Noun Project, sous licence CC BY 3.0.


Haut
 Profil  
 
Afficher les messages publiés depuis:  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 13 messages ] 

Le fuseau horaire est réglé sur UTC+1 heure [Heure d’été]


Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas transférer de pièces jointes dans ce forum

Rechercher :
Atteindre:  


Powered by phpBB © 2000-2007 phpBB Group
Traduction française officielle © Maël Soucaze
[ Time : 0.176s | 19 Queries | GZIP : Off ]