Práctica N° 14 - Profemaria.com

Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
Práctica N° 14 – Dreamweaver y Plantillas
La práctica consiste en modificar la plantilla marketing-site de http://foundation.zurb.com/
Crear la carpeta para el sitio, copiar dentro de ella, la plantilla así como los estilos y las imágenes dadas.
Nota: foundation.zurb.com, trabaja con los estilos en línea, sin embargo, para efectos nuestros los estilos fueron
descargados para trabajar a nivel local (en el sitio de Dreamweaver), previniendo una ausencia de conexión a
internet.
1. Realice el sitio de Dreamweaver.
2. Seguidamente se indican las áreas a modificar de la plantilla. Dentro del código HTML de la plantilla, los
nombres de sus partes están identificadas mediante comentarios, por ejemplo: <!-- Start Top Bar -->,
esto es un comentario que indica el inicio de la sección Start Top Bar (Inicio de la Barra Superior)
Start Top Bar
Código original
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Marketing Site</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</div>
</div>
Código con cambios (lo que se encuentra en negrita)
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Pochos ´s Café</li>
<li><a href="#">Menú</a></li>
<li><a href="#">Servicios</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">Más que café</a></li>
<li><a href="#">Barismo</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
Slider
Esta sección comprende un slider, de cuatro imágenes de 1200px x 450px. Hay que colocar la dirección de la imagen en
cada uno de los atributos src (fuente) de las imágenes, es decir dar la ubicación de cada una de las imágenes para que se
inserte ahí.
<li class="orbit-slide is-active">
<img src="http://placehold.it/1200x450">
</li>
<li class="orbit-slide">
<img src="http://placehold.it/1200x450">
</li>
<li class="orbit-slide">
<img src="http://placehold.it/1200x450">
</li>
<li class="orbit-slide">
<img src="http://placehold.it/1200x450">
</li>
<li class="orbit-slide is-active">
<img src="images/slider1.jpg">
</li>
<li class="orbit-slide">
<img src="images/slider2.jpg">
</li>
<li class="orbit-slide">
<img src="images/slider3.jpg">
</li>
<li class="orbit-slide">
<img src="images/slider4.jpg">
</li>
1
Section1
<div class="row column text-center">
<h1>Changing the World Through Design</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam in dui mauris.</p>
<a href="#" class="button large">Learn More</a>
<a href="#" class="button large hollow">Learn Less</a>
</div>
<hr>
<div class="row column text-center">
<h1>Pochos ´s Café cambiando la manera de tomar
café</h1>
<p class="lead">Aromas y sabores mágicos.</p>
<a href="#" class="button large">Aromas</a>
<a href="#" class="button large hollow">Sabores</a>
</div>
<hr>
Section2
En esta sección aparecen 4 columnas de texto, cada una de ellas, está compuesta por un encabezado 3 (h3) y un
párrafo (p), debe cambiarse cada una de ellas.
Esta es la primer columna
<div class="medium-6 large-3 columns">
<h3>Lorum</h3>
<p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam
mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
</div>
El código quedará modificado de la siguiente manera
<div class="row">
<div class="medium-6 large-3 columns">
<h3>Café</h3>
<p>Desde 2010, servimos la mejor calidad. Nos complace utilizar los mejores granos de café arábicos.</p>
</div>
<div class="medium-6 large-3 columns">
<h3>Lugar placentero</h3>
<p>Además del mejor café, viva una experiencia placentera. Cada espacio está pensado en su comodidad.</p>
</div>
<div class="medium-6 large-3 columns">
<h3>Repostería </h3>
<p>Contamos con la más fina y deliciosa repostería, además única.</p>
</div>
<div class="medium-6 large-3 columns">
<h3>Bebidas</h3>
<p>Ofrecemos variedad de bebidas de café, calientes o frías.</p>
</div>
</div>
<hr>
Section3
Contiene un encabezado 3 y un párrafo.
El código queda modificado de la siguiente manera
<div class="row column">
<div class="callout primary text-center">
<h3>Premio a la cafetería creativa</h3>
2
<p>Otorgado por coffeAward 2016, debido a que somos más que café</p>
</div>
</div>
<hr>
Section4
Consta de dos columnas, donde cada una tiene un encabezado 4, una imagen y un párrafo.
El código queda modificado de la siguiente manera
<div class="row">
<div class="large-6 columns">
<h4>Inicie su día con nosotros</h4>
<img class="thumbnail" src="images/1.jpg">
<p>Al iniciar su día, hágalo con Pochos´s Café, vive la sensación.</p>
</div>
<div class="large-6 columns">
<h4>AmourCoolCoffe nuestra recomendación</h4>
<img class="thumbnail" src="images/2.jpg">
<p>Disfrute de una bebida placentera.</p>
</div>
</div>
<hr>
Section5
Esta sección es un menú ubicado en la parte inferior de la página, mediante una lista (etiquetas ul, li)
El código queda modificado de la siguiente manera
<div class="row column">
<ul class="menu">
<li><a href="#">Quiénes somos</a></li>
<li><a href="#">Trabaje con nosotros</a></li>
<li><a href="#">Servicio al cliente</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
Nota: recursos para descarga de imágenes gratuitas y plantillas
Imágenes
https://pixabay.com/es/
https://unsplash.com/
https://www.flickr.com/search/advanced/
http://gratisography.com/
http://es.freeimages.com/
http://www.stockvault.net/
http://join.deathtothestockphoto.com/
Plantillas y código
https://html5up.net/
http://foundation.zurb.com/
http://purecss.io/
http://expo.getbootstrap.com/
3