Práctica N°15 - Profemaria.com

Ministerio de Educación Pública
IPEC de Santa Bárbara
Diseño Web - Dreamweaver
Práctica N° 15 – Dreamweaver y Plantillas
La práctica consiste en modificar la plantilla Alpha de https://html5up.net/
En la carpeta para el sitio, reemplazar las imágenes dadas en la carpeta images.
Nota: Esta plantilla, al descargarse del sitio html5up.net, brinda todos los códigos e imágenes que incluye la
plantilla, para que posteriormente sean modificados según necesidad del diseñador.
1. Realice el sitio de Dreamweaver.
2. Cambie el nombre de las páginas: generic por servicios, elements por asesoria, contact por contacto.
3. 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: <!-- header -->, esto es
un comentario que indica el inicio de la sección Header
4. Información de las imágenes
P01
1200 px X 393px
P02
576 px X 256px
P03
576 px X 256px
P04
600 px X 300px
P05
100 px X 100px
Página index
Header
<h1><a href="index.html">Alpha</a> by HTML5 UP</h1>
<li><a href="index.html">Home</a></li>
<a href="#" class="icon fa-angle-down">Layouts</a>
<li><a href="generic.html">Generic</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="elements.html">Elements</a></li>
<li>
<a href="#">Submenu</a>
<ul>
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
<li><a href="#">Option Four</a></li>
</ul>
</li>
<h1><a href="index.html">Asesoría para su empresa</a>
Ferro Asesores</h1>
<li><a href="index.html">Inicio</a></li>
<a href="#" class="icon fa-angle-down">Opciones</a>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><a href="asesoria.html">Asesoría</a></li>
<li>
<a href="#">Submenu</a>
<ul>
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
<li><a href="#">Option Four</a></li>
</ul>
</li>
Borrar la
parte de
código
siguiente:
<li><a href="#" class="button">Sign Up</a></li>
1
Banner
<section id="banner">
<h2>Alpha</h2>
<p>Another fine responsive site template freebie by HTML5 UP.</p>
<ul class="actions">
<li><a href="#" class="button special">Sign Up</a></li>
<li><a href="#" class="button">Learn More</a></li>
</ul>
</section>
<h2>Ferro Consultores</h2>
<p>Donde encontrará asororía completa
para su empresa.</p>
<ul class="actions">
<li><a href="servicios.html" class="button
special">Servicios</a></li>
<li><a href="asesoria.html"
class="button">Asesoría total</a></li>
</ul>
Main
Para esta sección se coloca el código ya modificado
<section id="main" class="container">
<section class="box special">
<header class="major">
<h2>La administración moderna requiere de técnicas innovadoras</h2>
<p>Ferro consultores brinda a un grupo de gerencia lo necesario para obtener la mayor utilidad con una
excelente administración de todos sus recursos.</p>
</header>
<span class="image featured"><img src="images/pic01.jpg" alt="" /></span>
</section>
<section class="box special features">
<div class="features-row">
<section>
<span class="icon major fa-bolt accent2"></span>
<h3>Productividad</h3>
<p>Ferro consultores cuenta con asesores en producción, para ayudarle desde la selección de materiales
hasta el embalaje.</p>
</section>
<section>
<span class="icon major fa-area-chart accent3"></span>
<h3>Asesoría financiera</h3>
<p>Las fuentes de finacimiento, sus inversiones y hasta los gastos de corto y mediano plazo no tienen que
ser un problema cotidiano, aprende a organizarlo en su Plan Operativo Anual.</p>
</section>
</div>
<div class="features-row">
<section>
<span class="icon major fa-cloud accent4"></span>
<h3>Tecnología </h3>
<p>Según su tipo de negocio, Ferro Consultores le asesora sobre qué técnología de la información y
comunicación puede emplear.</p>
</section>
2
<section>
<span class="icon major fa-lock accent5"></span>
<h3>Sistema contable </h3>
<p>Integramos a su empresa el sistema contable a su medida</p>
</section>
</div>
</section>
<div class="row">
<div class="6u 12u(narrower)">
<section class="box special">
<span class="image featured"><img src="images/pic02.jpg" alt="" /></span>
<h3>No lo piense más</h3>
<p>Permita que sus inversiones sean asesoradas por profesionales.</p>
<ul class="actions">
<li><a href="servicios.html" class="button alt">Servicios</a></li>
</ul>
</section>
</div>
<div class="6u 12u(narrower)">
<section class="box special">
<span class="image featured"><img src="images/pic03.jpg" alt="" /></span>
<h3>Historias de éxito</h3>
<p>Kimberly Clark -Desde que contratamos la asesoría de Ferro consultores, la productividad incrementó
en 10% anual sostenidamente.</p>
<ul class="actions">
<li><a href="asesoria.html" class="button alt">Asesoría</a></li>
</ul>
</section>
</div>
</div>
</section>
CTA
Quite el código de ésta sección.
Página servicios, asesoría, contacto
Seguir las indicaciones de la docente para su modificación. (o usted puede realizarlas a su gusto)
3