Cómo crear un sitio web móvil con Dreamweaver: 7 pasos

Más de 100 millones de consumidores usan sus teléfonos inteligentes para navegar por Internet según com.puntuación inc. Aprenda cómo crear un sitio web móvil específicamente para la audiencia móvil. Para este tutorial, necesitará Dreamweaver CS5 y UP. Este artículo detalla cómo crear un sitio web de JQuery Mobile.

Pasos

1. Abre Dreamweaver y vaya a Archivo > Nuevo. Luego verás un "Nuevo documento" Ventana. En el lado izquierdo, quieres elegir la opción "Página de muestra" Luego en la siguiente columna, elija "arrancadores móviles", luego "JQUERY MOBILE (CDN)"

Imagen titulada Crear un sitio web móvil con Dreamweaver Paso 2

2. Crea las páginas. Una vez que abra el archivo jQuery Mobile (CDN), verá una página que se parece similar a esta:

Aunque esto técnicamente es un documento de una página, cada encabezado representa un diferente "página". Por ejemplo, "Página uno" Es la página de inicio para el sitio web móvil, "Página dos" podría ser la página de acerca de nosotros, "Página tres" podría ser su página de servicios y así sucesivamente.

Imagen titulada Crear un sitio web móvil con Dreamweaver Paso 3

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 que si mira la esquina de la izquierda de Dreamweaver, debajo del menú Archivo, verá cuatro opciones "código, dividido, diseño y vivo" como esto:

Elija la opción resaltada "separar", y verá una vista del código y el sitio real lado a lado. Echa un vistazo al código.

4. Editar los encabezados para cada página. Hay (div de datos-rol ="página" id ="página"), 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 de datos DIV de número ="página" id ="página 2"`es la segunda página,` div de datos-rol ="página" id ="página 3"`es la tercera página y así sucesivamente

`DIV DATA-POPO ="encabezamiento"`es el área del encabezado, y usted pone su información de encabezado entre los dos "H1"y "/ h1" etiquetas.

Imagen titulada Crear un sitio web móvil con Dreamweaver Paso 5

5. Edita el contenido y los elementos del menú. `DIV DATA-POPO ="Contenido"`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 está:

y si observa la página web real, ve que la primera página tiene una lista de enlaces. `Data-rol ul ="vista de la lista"`significa que desea una lista de enlaces en el área de contenido.Al agregar cualquier elemento de menú o `datos de datos ="vista de la lista"`, asegúrese de vincular el texto correcto con las páginas correctas. Por ejemplo, si la página dos es "Sobre nosotros", Página tres es "Nuestro servicio", y la página cuatro es "Contáctenos" Entonces quieres ponerte: Imagen titulada Crear un sitio web móvil con Dreamweaver Step 5Bullet1

Imagen titulada Crear un sitio web móvil con Dreamweaver Step 5Bullet1

Ahora para editar contenido, simple Ponga su texto entre el `DIV DATA-POP ="contenido"Etiquetas `y` / div `. Por ejemplo: Imagen titulada Crear un sitio web móvil con Dreamweaver Step 5Bullet2

Imagen titulada Crear un sitio web móvil con Dreamweaver Step 5Bullet2

6. Editar el pie de página. Para editar el pie de página, simplemente ponga su texto en lugar de la "Pie de página" texto.

Imagen titulada Crear un sitio web móvil con Dreamweaver Paso 7

7. Eche un vistazo a su sitio web en "modo en vivo". Recuerda a donde cambiaste "modo de división?" 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!

Cómo crear un sitio web móvil con dreamweaver

Pasos

Consejos