Más de 100 millones de consumidores utilizan sus teléfonos inteligentes para navegar por Internet según com.score Inc. Aprenda a crear un sitio web móvil específicamente para la audiencia móvil. Para este tutorial, necesitará Dreamweaver CS5 y versiones posteriores. Este artículo detalla cómo crear un sitio web móvil jquery.
Pasos
Paso 1. Abra Dreamweaver y vaya a archivo> Nuevo
A continuación, verá una ventana "Nuevo documento". En el lado izquierdo, desea elegir la opción "página de la muestra", luego, en la siguiente columna, elija "Mobile Starters", luego "jQuery Mobile (CDN)".
Paso 2. Cree las páginas
Una vez que abra el archivo jQuery Mobile (CDN), verá una página similar a esta:
Aunque técnicamente se trata de un documento de una página, cada encabezado representa una "página" diferente. Por ejemplo, "Página uno" es la página de inicio del sitio web móvil, "Página dos" podría ser la página sobre nosotros, "Página tres" podría ser su página de servicios, etc
Paso 3. Mira el Código
Estos pasos pueden ser bastante complicados si no está familiarizado con HTML básico. Para crear el contenido, intente trabajar en "vista dividida" en Dreamweaver. Cómo llegar a ese modo es si observa la esquina izquierda de Dreamweaver, debajo del menú de archivo, verá cuatro opciones "codificar, dividir, diseñar y en vivo" como esta:
Elija la opción resaltada "dividir", y verá una vista del código y el sitio real uno al lado del otro. Eche un vistazo al código
Paso 4. Edite los encabezados de cada página
Hay (div data-role = "page"), lo que significa que es el comienzo de una nueva página. Tenga en cuenta que cada página está asociada con un número 'div data-role = "page"' es la segunda página, 'div data-role = "page"' es la tercera página y así sucesivamente
'div data-role = "header"' es el área del encabezado, y usted coloca la información del encabezado entre las dos etiquetas "h1" y "/ h1".
Paso 5. Edite el contenido y los elementos del menú
'div data-role = "Content"' es el comienzo de la sección de contenido. Aquí es donde pones el contenido real de cada página. Tenga en cuenta que en la primera página hay:
-
y si observa la página web real, verá que la primera página tiene una lista de enlaces. 'ul data-role = "listview"' significa que desea una lista de enlaces en el área de contenido. Cuando agregue cualquier elemento de menú o 'data-role = "listview"', asegúrese de vincular el texto correcto con las páginas correctas. Por ejemplo, si la página dos es "Acerca de nosotros", la página tres es "Nuestro servicio" y la página cuatro es "Contáctenos", entonces desea poner:
Crear un sitio web móvil con Dreamweaver Paso 5 Bullet 1 -
Ahora, para editar el contenido, simplemente coloque el texto entre las etiquetas 'div data-role = "content"' y '/ div'. Por ejemplo:
Crear un sitio web móvil con Dreamweaver Paso 5 Bullet 2
Paso 6. Edite el pie de página
Para editar el pie de página, simplemente coloque su texto en lugar del texto "Pie de página".
Paso 7. Eche un vistazo a su sitio web en "modo en vivo"
¿Recuerda dónde cambió al "modo dividido"? Justo en esa área, hay un botón que dice "en vivo". Haga clic en eso y verá cómo se verá su sitio web en un teléfono.
