Comment créer un site web mobile avec dreamweaver

Plus de 100 millions de consommateurs utilisent leurs smartphones pour parcourir Internet selon COM.score inc. Apprenez à créer un site Web mobile spécifiquement pour le public mobile. Pour ce tutoriel, vous aurez besoin de Dreamweaver CS5 et de plus en plus. Cet article Détails Comment créer un site Web mobile JQuery.

Pas

  1. Image intitulée Créer un site Web mobile avec Dreamweaver Étape 1
1. Ouvrez Dreamweaver et allez au fichier > Nouveau. Vous verrez alors un "Nouveau document" La fenêtre. Sur le côté gauche, vous voulez choisir l`option "page de l`échantillon" Puis dans la colonne suivante, choisissez "Démarreurs mobiles", ensuite "jquery mobile (CDN)"
  • Image intitulée Créer un site Web mobile avec Dreamweaver Step 2
    2. Créer les pages. Une fois que vous avez ouvert le fichier JQuery Mobile (CDN), vous verrez une page similaire à celle-ci:
  • Bien que cela soit techniquement un document d`une page, chaque en-tête représente une autre "page". Par example, "Page un" est la page d`accueil du site Web mobile, "Pages" pourrait être la page proche américaine, "Page trois" pourrait être votre page de services et ainsi de suite.
  • Image intitulée Créer un site Web mobile avec Dreamweaver Étape 3
    3. Regardez le code. Ces étapes peuvent être assez difficiles si vous n`êtes pas familiarisé avec HTML de base. Pour créer le contenu, essayez de travailler dans "vue partagé" sur Dreamweaver. Comment arriver à ce mode est si vous regardez le coin gauche de Dreamweaver, au-dessous du menu Fichier, vous verrez quatre options "code, scission, conception et vivre" comme ça:
  • Choisissez l`option en surbrillance "diviser", et vous verrez une vue du code et du site réel côte à côte. Jetez un coup d`oeil au code.
  • 4. Modifier les en-têtes de chaque page. Il y a (div données-rôles ="page" id ="page"), ce qui signifie que c`est le début d`une nouvelle page. Notez que chaque page est associée à un numéro `DAV Data-Role ="page" id ="page 2"`est la deuxième page,` div données-role ="page" id ="page3"`est la troisième page et ainsi de suite

    `div données - rôle ="entête"`Est-ce que la zone d`en-tête et vous mettez vos informations d`en-tête entre les deux "h1"et "/ h1" Mots clés.
  • Image intitulée Créer un site Web mobile avec Dreamweaver Étape 5
    5. Modifier le contenu et les éléments de menu. `div données - rôle ="Contenu"`est le début de la section de contenu. C`est là que vous mettez le contenu réel de chaque page. Notez que dans la première page il y a:
  • Et si vous regardez la page Web actuelle, vous voyez que la première page a une liste de liens. `UL Data-Rôle ="listview"`signifie que vous voulez une liste de liens dans la zone de contenu.Lorsque vous ajoutez des éléments de menu ou `Rôle de données ="listview"`, assurez-vous de lier le texte correct avec les pages correctes. Par exemple si la page 2 est "À propos de nous", page trois est "Notre service", et la page quatre est "Nous contacter" Ensuite, vous voulez mettre:Image intitulée Créer un site Web mobile avec Dreamweaver Step 5Bullet1
  • Maintenant, pour éditer du contenu, simplifiez votre texte entre le «Data Data-Role ="contenu""et" / div `tags. Par example:Image intitulée Créer un site Web mobile avec Dreamweaver Step 5Bullet2
  • 6. Éditez le pied de page. Pour éditer le pied de page, mettez simplement votre texte à la place du "Pied de page" texte.
  • Image intitulée Créer un site Web mobile avec Dreamweaver Step 7
    7. Jetez un coup d`œil à votre site web dans "mode en direct". Rappelez-vous où vous avez changé en "mode fractionné?" Juste dans cette zone, il y a un bouton qui dit "habitent". Cliquez dessus et vous verrez ce que votre site Web ressemblera à un téléphone!

    • Conseils

    Articles connexes