Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.

com

Importante que contemplen que el diseño de un sitio Web tiene lineamientos que deben
respetarse, por ejemplo:
a) Se realiza la planificación (dimensiones, maquetación y navegación)

La estructura de carpetas del sitio será:

Un Sitio básico contiene las siguientes partes:

Inicio – Portada, página de bienvenida, atractiva, invitar a quedarse navegando dentro del sitio.
Historia/Reseña – narra brevemente de donde nace o se conforma el negocio
Menú/Catalogo - se muestran las opciones de venta del negocio
Galería - se muestran las imágenes más importantes del sitio.
Contáctenos – se muestra la ubicación, teléfono, redes sociales, etc.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

La maquetación de cada página será:

 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Los banners del encabezado tienen las siguientes dimensiones

Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Plan: es donde construimos lo planificado, se debe respetar el alcance.

Diseño: es donde diseñamos la página.
Previsualización: Podemos ver cómo nos va quedando.
Publicación: Lo exportamos en formato HTML.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

En esta sección se crea el plan, las páginas que serán utilizadas en nuestro sitio. El
programa crea una página de inicio y una página maestra, esta última, será la plantilla que
diseñaremos para tener el mismo diseño en cada una de ellas, menos en la de inicio.
Todo cambio en la página maestra se verá reflejado en el resto de las páginas, menos la
inicio.
La página de inicio al ser diferente su diseño al del resto de páginas debe desasociarse de
la página maestra, lo cual veremos más adelante.
Por el momento agregar cada página del sitio dando clic sobre el signo positivo de la
página inicio y posteriormente en el signo de la última página insertada.

Ahora bien, el nombre de cada página visualmente debe respetar las reglas del idioma,
pero en diseño no pueden llevar acentos, pues genera problemas al momento de publicar
el sitio.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Por esto realice lo siguiente para cada página:

Clic derecho sobre la página, clic en propiedades de la página, clic Igual que el nombre de
la página (quitar el check)
En el nombre de archivo quitar el acento y clic en OK. Visualmente tendrán los acentos,
pero a lo interno NO.
Ahora pasaremos a diseñar:
Clic en Diseño
Aquí observará el diseño de tres columnas, la sección e encabezado, cuerpo y pie de
página del sitio.
Los puntos celestes son las guías las cuales vamos a modificar:
• Subir el primer guía hasta arriba en 0.
• La segunda guía es de encabezado esta debe moverse hasta el 200.
• La tercera guía es la de pie de página debe moverse hasta 450.
• Y bajar la cuarta guía hasta 525.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

• Y se crea una guía adicional en el punto 400, pues en esa área se colocarán los
banners, para ello de doble clic sobre 400.

Cada vez más avanzamos hacia el resultado requerido.

Diseñar el encabezado de página (rectángulo café y textos) los teléfonos y correo está en
la carpeta texto.

Insertar un rectángulo del ancho del encabezado desde el margen superior izquierdo
hasta el inferior donde señale 200, lo siguiente es darle el color de relleno del rectángulo
del encabezado y pie de página.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Ahora bien, debe verificar que los rectángulos tengan el mismo tamaño del diseño de
encabezado y pie de página, para esto seleccione el rectángulo, clic en Transformar
(margen derecho de la pantalla) y verificar las dimensiones.

Tanto del encabezado como del pie de página.

Ahora dar clic en el botón Plan y observe los cambios

El cambio en la página maestra afecta al resto.

Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com
Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

AGREGAR LOS BANNERS

Los banners ya son propios o “diferentes” para cada página por ello, recuerde guardar la
página maestra, ciérrela y abra por ejemplo la página historia.
En cada página realice el mismo procedimiento para colocar los banners, recuerde
guardar.
Clic en Archivo.
Clic en Colocar. Seleccionar la imagen requerida, llevar el cursor a la esquina superior
izquierda y soltar el mouse.

Ahora bien, continuamos con el diseño página a página.

 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Agreguemos texto a nuestras páginas:

Inserte un cuadro de texto, copie la información que usted tiene en la carpeta texto y
péguela.
Debe darle formato y acoplar el cuadro de texto, desde la herramienta texto a la derecha
de la pantalla, dé el formato al texto tal cual fue establecido en el diseño.

Texto: Arial-14 - 600000.

Títulos: Open sans..- 18 – 600000

COMO PREESTABLECER ESTOS FORMATOS Y QUE QUEDEN ALMACENADOS PARA USOS

POSTERIORES DE LAS OTRAS PÁGINAS.
Seleccione el título Fundadores, aplique el formato especificado, posteriormente realice lo
siguiente:
• Clic en Estilos de párrafo.
• Clic en el botón nuevo
• Agregará una sección
llamada estilo de párrafo, de
doble clic sobre y asígnele
un nombre adecuado, así
será guardado.
• Recomiendo Título y clic en
OK
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Los pasos anteriores le permitirán seleccionar de ahora en adelante cada título irse a
Estilos de párrafo y seleccionar el nombre del formato que usted requiere, sea para títulos
o párrafos.

PARA AGREGAR LA IMAGEN DE LA PÁGINA HISTORIA Y MENÚ.

Inserte un rectángulo del tamaño aproximado a lo requerido, respetando los márgenes.
Rellene el rectángulo con una imagen y aplique el siguiente formato que se muestra en la
siguiente imagen.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Resultado, recuerde previsualizar para observar y comparar resultados. Realice el diseño

de la página Menú.

Página contáctenos
Agregue el texto.
Para insertar el mapa realice lo siguiente:
Ingrese al navegador Google Chrome y digite en la barra de dirección
www.google.co.cr/maps?source=tldsi&hl=es-419.
Dentro de la aplicación digite: pura vida restaurante jaco. Mostrará lo siguiente
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

De clic al botón menú De clic al botón menú

Clic en la opción compartir o incorporar mapa.

• Aparece esta ventana donde debe seleccionar la pestaña Incorporar Mapa, copiar
esta dirección.
• Regresar a Muse dar clic en el menú Objeto,
• Clic en Insertar HTML
• Pegar la dirección copiada.
• Se insertará el mapa en la página contáctenos, usted debe posicionarla y
probablemente ampliar el área cuerpo de la página
Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Página Galería.
• Inserte el texto tal como lo ha
realizado anteriormente.
• Para colocar la galería de
imágenes realice lo siguiente:
• Clic en bibliotecas de widgets
• Clic en presentaciones de
diapositivas.
• Clic en miniaturas.
• Arrastre el mouse sobre el
área de diseño y acomode a la
posición deseada.
• Elimine el o los cuadros de
texto que coloca al final de la
presentación de imágenes.
• Seleccione el widget de clic en
el botón de configuración solo
debe añadir las imágenes.
• Galeria1-galeria2-galeria3-
galeria4-galeria5-galeria6.
Debe esperar a que carguen
las imágenes.
• A cada imagen debe agregar
una explicación, para ello
seleccione una a una cada
imagen en miniatura y en el
área inferior digita la información que se requiere.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Página Inicio
Hay que recordar que esta página se encuentra desvinculada de la página maestra, por lo tanto, su
diseño inicia en blanco.

Insertar un rectángulo grande que pase los márgenes (959x725 desde posición 0,0) tal como se
muestra en la siguiente imagen y asignarle el color 380000.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Insertar un Widgets, presentaciones de diapositivas – Básica y arrastrarlo sobre el área de diseño

Acomodar el widget tal como lo muestra la figura y eliminar las áreas de abajo que no se
necesitarán.
Posteriormente cambiar el tamaño del widget a ancho 918 del diseño sin salirse de los márgenes
para ello arrastra el mouse y de altura colocar 690, el alto lo cambiamos al darle clic en la opción
transformar a 690.

Para agregar las fotos.

Dar clic en el botón Configurador y seleccionar las imágenes inicio 1, inicio 2, e inicio 3.
Inserta las imágenes, después damos clic de nuevo al configurador, seleccionamos la opción
Transición, pero el lugar de suavizar seleccionamos la opción Horizontal.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Para agregar el logo

Clic en archivo, clic en colocar, seleccionar el logo de la carpeta recursos, pero arrastrarla sobre el
fondo. Después acomodarlo.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Para insertar el menú se abre la página maestra, se selecciona el menú, se copia, regresamos a la
página inicio y lo pegamos.

Para continuar debe insertarse un rectángulo que cubra esta área (menú y logo) pues en el diseño
el fondo es 380000, se inserta el rectángulo y en relleno seleccionar de la paleta de colores el
380000, hasta aquí el logo y el menú se ocultan. Para enviar el rectángulo al fondo dar clic en
Capas, en Capa 1 dar clic a la pestaña para que muestre todas las capas, seleccionar el rectángulo y
arrastrarlo después del logo.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Pie de página de Inicio

Insertar un rectángulo en la parte inferior que abarque dos columnas.
Colocarle relleno negro y darle transparencia-Opacidad en 60

Colocar el texto al pie de página

Clic en archivo, clic en colocar, abrir el texto de la respectiva carpeta.

Previsualizar la página.

Página Menú
• Abrirlo en vista diseño, insertar un widget de Noticias Destacadas
• Seleccionar con cuidado cada cuadro de texto del menú, Digitar la información correcta,
seleccionar el cuadro de texto al lado y eliminarlo, al final debe mostrarse algo así.
• Los definidos en párrafo (Tipo de fuente arial. Tamaño 14. Color 380000)
• Para insertar un nuevo botón de menú solo dar clic al signo positivo que coloca al final del
último botón.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

Para insertar los textos que corresponden seleccionar uno a uno cada botón, borrar de Entradas el
texto anexo que tiene, irse a archivo, clic en colocar, buscar el texto que corresponda y dar clic en
el área donde debe ubicarse cada botón y darle formato, desde los estilos de párrafo establecidos
en procedimientos anteriores.

Para insertar la imagen.

Cada botón de menú tiene una imagen diferente, para insertar la imagen donde corresponda debe
seleccionar el botón menú, después Insertar un rectángulo, rellenar con una imagen y aplicar las
propiedades que se observan en la siguiente imagen.
 Apuntes para Muse – Greivin Vásquez Valverde – cariari@gmail.com

PARA PUBLICAR LA PÁGINA

• Se debe crear una carpeta llamada Publicar dentro de la estructura de su sitio
• Irse a Archivo, dar clic en Exportar como HTML, en la pantalla que se muestra escriba
alguna dirección de ejemplo que inicie con www y finalice .com por ejemplo
www.proyecto.com , PERO en Ubicación debo decirle donde lo voy a publicar, aquí se
busca el nombre principal de la estructura y abrir la carpeta publicar y darle OK, ahí
comienza a publicar.