Maquetados Basicos

[pic 1]

Comenzaremos esta practica abriendo el programa Pencil Proyect, tendremos un panel como este:

[pic 2]

Para agregar objetos, podemos usar el objeto Box, donde podremos colocar cualquier objeto para darle forma a nuestro proyecto:

[pic 3]

Le daremos forma a nuestro Box, ya que aquí comenzaremos colocando nuestro Banner:

[pic 4]

Dentro del Box, agregaremos un objeto tipo Imagen, como el siguiente:

[pic 5]

Después de colocarlo, lo acomodaremos acorde al Box que colocamos debajo del mismo, le daremos un nombre para identificar que parte de la pagina es, quedando de la siguiente manera:

[pic 6]

Ahora agregaremos nuestro menú, colocando otro Box de manera horizontal, dentro del Box meteremos botones, los cuales tienes que ser los mismo que nuestra pagina interactiva, quedando así:

[pic 7]

Ahora, otro código que hemos colocado recientemente ha sido los Bread Crumbs, que nos indicaran en que pagina estamos situados:

[pic 8]

Agregaremos otro Box, y dentro del mismo colocaremos el Bread Crumb:

[pic 9]

Después de tener nuestro banner, menú y bread crumbs, procederemos a colocar nuestro Aside y Article, agregando 5 Boxes de la siguiente manera:

[pic 10]

Ya con los botones agregdos y el texto, nos quedara de la siguiente manera:

[pic 11]

Para los 3 parrafos, coloque un Box, y dentro del Box, los 3 Label con texto aleatorio:

[pic 12]

Para el Carrusel de imágenes, una demostración con un Box, dentro del Box agregue dos botones, les cambie el color de fondo por uno blanco y les coloque símbolos como de flechitas, para indicar como funcionaria:

[pic 13]

Esa sección era un pequeño recuadro con iconos y texto, justo como esta mi pagina:

[pic 14]

Para la sección de noticias, use un box grande, agregue imagen, texto y botones, ordenándolos de forma que quede como noticia queda de la siguiente manera:

[pic 15]

Los servicios son un elemento importante del index de mi pagina, y la forma en que replique esa sección fue con Boxes, imágenes haciendolas pasar por iconos, y el texto, quedando así:

[pic 16]

Para las razas, Boxes, texto y los hipervínculos, los cuales deberían de redirigir a Instagram:

[pic 17]

Por ultimo, el footer, para este, coloque dos Boxes, coloque 5 imágenes por iconos, y dentro del Box coloque un texto:

[pic 18]

Para la pagina de Razas, copie el banner, menú y los bread crumbs, después, para las tarjetas con ventanas modales, coloque un Box, dentro del box coloque imagen, y debajo de la imagen coloque un botón para cada imagen, y suponiendo que tocaras el botón, abriría una ventana modal:

...