Plus de 100 millions de consommateurs utilisent leurs smartphones pour naviguer sur Internet selon com.score Inc. Apprenez à créer un site Web mobile spécifiquement pour le public mobile. Pour ce didacticiel, vous aurez besoin de dreamweaver CS5 ou version ultérieure. Cet article explique comment créer un site Web mobile jquery.
Pas
Étape 1. Ouvrez Dreamweaver et accédez à fichier > Nouveau
Vous verrez alors une fenêtre "Nouveau document". Sur le côté gauche, vous voulez choisir l'option "page de l'échantillon" puis dans la colonne suivante, choisissez "Mobile Starters", puis "jQuery Mobile (CDN)"
Étape 2. Créez les pages
Une fois que vous ouvrez le fichier jQuery Mobile (CDN), vous verrez une page qui ressemble à ceci:
Bien qu'il s'agisse techniquement d'un document d'une page, chaque en-tête représente une "page" différente. Par exemple, "Page One" est la page d'accueil du site Web mobile, "Page Two" pourrait être la page à propos de nous, "Page Three" pourrait être votre page de services et ainsi de suite
Étape 3. Regardez le code
Ces étapes peuvent être assez délicates si vous n'êtes pas familier avec le HTML de base. Pour créer le contenu, essayez de travailler en "vue fractionnée" sur Dreamweaver. Pour accéder à ce mode, si vous regardez dans le coin gauche de Dreamweaver, sous le menu Fichier, vous verrez quatre options "code, fractionnement, conception et live" comme ceci:
Choisissez l'option en surbrillance « split » et vous verrez une vue du code et le site réel côte à côte. Jetez un œil au code
Étape 4. Modifiez les en-têtes de chaque page
Il y a (div data-role="page"), ce qui signifie que c'est le début d'une nouvelle page. Notez que chaque page est associée à un numéro 'div data-role="page"' est la deuxième page, 'div data-role="page"' est la troisième page et ainsi de suite
'div data-role="header"' est la zone d'en-tête et vous placez vos informations d'en-tête entre les deux balises "h1" et "/h1".
Étape 5. Modifiez le contenu et les éléments de menu
'div data-role="Content"' 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 réelle, vous voyez que la première page a une liste de liens. 'ul data-role="listview"' signifie que vous voulez une liste de liens dans la zone de contenu. Lorsque vous ajoutez des éléments de menu ou 'data-role="listview"', assurez-vous de lier le bon texte avec les bonnes pages. Par exemple, si la page deux est "À propos de nous", la page trois est "Notre service" et la page quatre est "Nous contacter", alors vous voulez mettre:
Créer un site Web mobile avec Dreamweaver Étape 5 Puce 1 -
Maintenant, pour modifier le contenu, placez simplement votre texte entre les balises 'div data-role="content"' et '/div'. Par exemple:
Créer un site Web mobile avec Dreamweaver Étape 5 Bullet 2
Étape 6. Modifiez le pied de page
Pour éditer le pied de page, mettez simplement votre texte à la place du texte « Pied de page ».
Étape 7. Jetez un œil à votre site Web en « mode direct »
Rappelez-vous où vous êtes passé en "mode fractionné ?" juste dans cette zone, il y a un bouton qui dit "live". Cliquez dessus et vous verrez à quoi ressemblera votre site Web sur un téléphone !
