Sujet Précédent Sujet Suivant

Site responsive

Résolu/Fermé
CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription mardi 5 août 2008 Statut Membre Dernière intervention 1 juillet 2023 - 16 mai 2020 à 07:58
CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription mardi 5 août 2008 Statut Membre Dernière intervention 1 juillet 2023 - 26 mai 2020 à 09:23
Bonjour,



Configuration: Windows / Internet Explorer 11.0


J'ai finalisé il y a peu, un Site en utilisant "Microsoft Expression Web 4" pour le construire, et souhaiterai le convertir en Site "responsive" !.

Est-ce possible ?!.

Si "oui", comment procéder ?!.

Merci par avance de vos solutions.

Bien cordialement,
Jean Maurice
A voir également:

5 réponses

Réponse 1 / 5
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325
16 mai 2020 à 12:02
bonjour

c'est possible à partir du moment où tu as accès au code source (ce qui est forcément le cas sur un éditeur) puisqu'on ajoute des css spécifiques pour chaque type d'écran par contre il n'y a pas de code magique tout prêt, tu va devoir apprendre les css et adapter ton site tout seul.


1
Réponse 2 / 5
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
16 mai 2020 à 12:32
Bonjour,

Sur le site AlsaCreations.com, il y a un tutoriel pour créer une feuille de styles de base pour le Web mobile :

https://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html

1
Réponse 3 / 5
sacapuss2 Messages postés 26 Date d'inscription mardi 9 août 2011 Statut Membre Dernière intervention 21 mai 2020 2
19 mai 2020 à 22:36
Bonsoir, Jean Maurice,

moi je fais quelque chose comme cela : 
<?php

$cav = 2;

for( $px = 200, $curseur_1 = 9, $curseur_2 = 5.55, $curseur_3 = 3.125, $curseur_4 = 3.125, $curseur_5 = 25, $curseur_6 = 3; $px < 2000; $px += 100 ) 
{
echo "\n\n@media (min-width:$px"."px) 
{ 
body { line-height:$curseur_6"."ex; } 
menu { line-height:$curseur_4"."ex; }
h1, #tresse { font-size:$curseur_1"."vw; } 
#logo { width:$curseur_5"."vw } */
#page { font-size:$curseur_2"."vw; } 
footer { line-height:$curseur_3"."ex; }
" ;

$curseur_1 = number_format( $curseur_1 * .925, $cav ) ; 
$curseur_2 = number_format( $curseur_2 * .85, $cav ) ; 
$curseur_3 = number_format( $curseur_3 * .99, $cav ) ; 
$curseur_4 = number_format( $curseur_4 * 1.05, $cav ) ; 
$curseur_5 = number_format( $curseur_5 * .92, $cav ) ; 
$curseur_6 = number_format( $curseur_6 * 1.02, $cav ) ; 
}

?>
1
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
20 mai 2020 à 17:32
Quelle est cette horrible chose ? Quel est le but ?
0
sacapuss2 Messages postés 26 Date d'inscription mardi 9 août 2011 Statut Membre Dernière intervention 21 mai 2020 2 > prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020
21 mai 2020 à 13:26
Bonjour à tous !

Qu'est-ce qui ne te plait pas, dans cette proposition ???
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431 > sacapuss2 Messages postés 26 Date d'inscription mardi 9 août 2011 Statut Membre Dernière intervention 21 mai 2020
21 mai 2020 à 14:32
tout ?

Générer du CSS en PHP, ce qui implique de balancer du CSS directement dans les balises <style> et de désordonner les feuilles de style.

Si tu veux faire quelque chose du genre, pourquoi ne pas utiliser un préprocesseur de CSS comme SASS ?
https://sass-lang.com/documentation/at-rules/control/for
0
Réponse 4 / 5
Dimitri
20 mai 2020 à 15:45
Tu peux également utilisé un framwork, Bootstrap par exemple
1
CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription mardi 5 août 2008 Statut Membre Dernière intervention 1 juillet 2023
21 mai 2020 à 23:32
Merci à Tous de vos réponses.

Seulement, je n'y comprend rien à rien à celles-ci, étant ignare en la matière !.

Je pensais trouver "quelqu'un" qui saches me tuyauter directement "sur/pour Expression Web 4", qui aurait pu avoir rencontré, - mieux : résolu le même problème que celui que j'invoques, - voire me proposer un "additif" à insérer quelque part dans une, voire toutes les Pages de mon propre Site, pour le rendre Responsive direct !.

Mais là, je me retrouves avec des "Pros du codage généralisé", avec des réponses complètement "au-dessus" de ce que j'aurai espéré, et de mes compétences Intellectuelles Personnelles !.

Dès lors, je suis complètement paumé, car même pas en mesure de répondre, même imparfaitement, à l'une ou l'autre de ces réponses !.

Désolé.
Bien cordialement,
Jean Maurice
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription mardi 5 août 2008 Statut Membre Dernière intervention 1 juillet 2023
Modifié le 22 mai 2020 à 07:38
Bonjour,

Dans ma réponse, il y a un lien vers une page qui explique qu'il faut insérer une balise <meta> dans la partie <head> de toutes tes pages :

https://forums.commentcamarche.net/forum/affich-36657846-site-responsive#2 

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Puis, un code CSS à insérer à ta feuille de styles : 

@media (max-width: 640px) {
 * {
  box-sizing: border-box;
 }
 
 /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

 body {
  width: auto;
  margin: 0;
  padding: 0;
 }
 
 /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

 img,
 table,
 td,
 blockquote,
 code,
 pre,
 textarea,
 input,
 iframe,
 object,
 embed,
 video {
  max-width: 100%;
 }
 
 /* conserver le ratio des images */

 img {
  height: auto;
 }
 
 /* gestion des mots longs */

 textarea,
 table,
 td,
 th,
 code,
 pre,
 samp {
  -webkit-hyphens: auto; /* césure propre */
  -moz-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word; /* passage à la ligne forcé */
 }
 
 code,
 pre,
 samp {
  white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }
 
 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

 .element1,
 .element2 {
  float: none;
  width: auto;
 }
 
 /* masquer les éléments superflus */

 .hide_mobile {
  display: none !important;
 }
 
 /* Un message personnalisé */

 body:before {
  content: "Version mobile du site";
  display: block;
  text-align: center;
  font-style: italic;
  color: #777;
 }
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}


Une feuille de styles est un fichier contenant du code CSS, en général elle se présente sous la forme d'un fichier style.css que l'on place à la racine du site.

On insère cette feuille de styles aux pages du site à l'aide d'une balise à placer dans la partie <head> des fichiers html : 

<link rel="stylesheet" type="text/css" href="style.css">


Je ne connais pas le logiciel que tu utilises, mais s'il est bien conçu, il devrait permettre d'ajouter des balises <meta> dans les pages HTML et il devrait utiliser une feuille de styles, modifiable.
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021
22 mai 2020 à 09:26
J'ai trouvé une capture d'écran de ton logiciel, sur laquelle on voit qu'il est possible d'ajouter des balises dans la partie <head> des pages et qu'il y a la possibilité d'attacher une feuille de styles.

Tu peux donc assez facilement, adapter ton site aux mobiles.

0
CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription mardi 5 août 2008 Statut Membre Dernière intervention 1 juillet 2023 > dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021
22 mai 2020 à 09:52
Bonsoir Dugenou.

Merci de vous démener pour mon Site.
Je sais que le Logiciel "Expression Web 4" permet de faire cela, à condition de savoir "comment" le faire !.

Mais, au risque de me répéter, je ne suis "pas" assez qualifié pour faire ces modifications !.
J'ai réussi, en quelques mois, à faire un très beau Site, mais uniquement par "copiers-collers", "sans" rien y connaitre du tout dans ce que vous me proposez !.
Uniquement via "réflexions" & "logique", et pour "775" pages, en sus !.

Mais pour faire ce que vous me présentez, il faudrait que je prennes des cours à 71 ans, et je ne vois pas, en Nouvelle-Calédonie, qui serait à même de faire cela !.

Un jour où l'autre, je tenterai de mettre en route vos propositions, sur une copie de mon Site, mais il faut d'abord que j'essaies d'y comprendre un tantinet quelque chose !.

Pour Vous, cela doit être "très" simple, mais pour moi, c'est une gageure !.

Bien cordialement,
Jean Maurice
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription mardi 5 août 2008 Statut Membre Dernière intervention 1 juillet 2023
22 mai 2020 à 10:09
Tout ce que je propose se fait par copié/collé, soit dans les pages HTML du site, soit dans le fichier style.css qui est attaché au site.

Pour ce qui est des pages HTML du site, il faut faire un copié/collé de ces deux lignes : 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">


entre les balises <head> et </head> des pages HTML. Cette partie <head> se trouve en haut des pages, au-dessous de : 
<!DOCTYPE html>
<html lang="fr">


Pour ce qui est du code CSS, il faut aussi faire un copié/collé de ce code : 

@media (max-width: 640px) {
 * {
  box-sizing: border-box;
 }
 
 /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

 body {
  width: auto;
  margin: 0;
  padding: 0;
 }
 
 /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

 img,
 table,
 td,
 blockquote,
 code,
 pre,
 textarea,
 input,
 iframe,
 object,
 embed,
 video {
  max-width: 100%;
 }
 
 /* conserver le ratio des images */

 img {
  height: auto;
 }
 
 /* gestion des mots longs */

 textarea,
 table,
 td,
 th,
 code,
 pre,
 samp {
  -webkit-hyphens: auto; /* césure propre */
  -moz-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word; /* passage à la ligne forcé */
 }
 
 code,
 pre,
 samp {
  white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }
 
 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

 .element1,
 .element2 {
  float: none;
  width: auto;
 }
 
 /* masquer les éléments superflus */

 .hide_mobile {
  display: none !important;
 }
 
 /* Un message personnalisé */

 body:before {
  content: "Version mobile du site";
  display: block;
  text-align: center;
  font-style: italic;
  color: #777;
 }
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}


dans le fichier style.css, par exemple, à la fin du fichier.

Si tu ne fais pas ces manipulations, assez simples, tu ne pourras pas rendre ton site responsive.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
sacapuss2
22 mai 2020 à 14:49
J'anime un webinaire vingtomadaire : Introduction au développement web. La prochaine séance aura lieu samedi 30 mai, de 14 heures à 18 heures.

Les thèmes disponibles sont les suivants :

Mon premier site web, première partie : le moteur
mon premier site web, seconde partie : la personnalisation
introduction au langage PHP : l'exemple de la création du site web
le langage JavaScript : quelques applications
un élément ubiquitaire : le formulaire (Php, Html, Css, JavaScript)
un objet ubiquitaire : le requêteur
introduction aux Cascading Style Sheets, le langage de style du web
le site à navigation différenciée, ou single-page website
1
CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription mardi 5 août 2008 Statut Membre Dernière intervention 1 juillet 2023
22 mai 2020 à 20:56
Bonjour Sacapuss2 :

Mon Site est totalement terminé, est publié depuis peu, et marche impeccablement.

Je veux juste "modifier" le nécessaire afin de le rendre "regardable" via une majorité de Médias actuels.

Pour le moment, je n'ai pas trop la "Santé" pour "apprendre" à créer quelque chose de nouveau ou de trop complexe.
Et à la lecture de votre Post, je vois que cela me serai difficile actuellement.
Mais je vous remercie pour ce dernier, et le garde sous le coude, pour le cas où !.

Merci encore.
Bien cordialement,
Jean Maurice
0
Ahay
24 mai 2020 à 16:01
Salut,
c'est curieux l'ordre de vos thèmes...voire le nom de vos leçons.
  • CSS à la fin? Je suppose que c'est déjà décrit dans "la personnalisation" même si ça veut pas dire grand chose personnaliser un site...un site peut-il ne pas être personnel ou personnalisé?
  • PHP , je suppose que vous parlez des bases de données avec. Curieux aussi de mettre ça avant le JavaScript nettement plus abordable pour commencer la programmation.
  • Vos termes son mal choisit et prêtent à confusion: requêteur? ubiquitaire(il me semble qu'un terme plus juste serait agrégat ou regroupement parce que l'ubiquité c'est être partout à la fois en même temps ce qui n'est pas le cas des technologies qui sont soient serveur soient client )? expliquer HTML en parlant de moteur alors qu'un moteur en informatique c'est tout à fait autre(ça 'tourne' ou ça avance en tout cas, ce que ne fait pas HTML).

"navigation différencié" c'est pas tellement explicite(en fait ça veut rien dire) peut-être vous parlez d'AJAX le bon terme serait alors plutôt "asynchrone" ou "désynchronisé". ça semble beaucoup quand même pour une première session avec AJAX dans le lot.

Je vous conseille d'éprouver un peu vos cours, voire de vous inspirer de ceux existants destinés au débutant.
Un formateur informatique ;)
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Coco chat connexion sur mobile, le tchat est fermé ?
Pisceneo -
brucine -

24 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
SITES MARCHANDS NON SECURISES
mcd54 -
mcd54 -

2 réponses