Problema com estilo de texto ao passar do Photoshop para o Dreamweaver

  • Autor Autor Francesc
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
F

Francesc

Gamma
Redactor
Hola a todos,

Pues para un trabajo para la uni tengo que pasar un diseño en Photoshop a Dreamwever ¿Qué por qué me enseñan esto si estudio publicidad? Ni puta idea.

Bueno, todo bien, mi diseño se ve bonito, lindo, hasta sensual, salvo por la letra. Definí los párrafos y los títulos en el css y aplique las etiquetas en el html pero en el preview se me sigue viendo con la letra original.

Alguien sabe cómo arreglarlo?

Saludos
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Sin el codigo poquito te puedo ayudar....
 
Bueno, es justo lo que se podrían imaginar:
Inserir CODE, HTML ou PHP:
.h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-transform: capitalize;
}

.p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-right: 15px;
	padding-left: 15px;
}



Y un ejemplo del html:
HTML:
<div id="derecha">
  <p><img src="imagen3.jpg" width="292" height="155" /></p>
  <h1>Lorem</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in metus massa. Nullam quam orci, pretium et pulvinar ac, pretium imperdiet quam. Sed nec fringilla metus. Nulla at iaculis lacus. Nam turpis ipsum, faucibus vel dignissim vel, pharetra ac nulla. Etiam tempus aliquet odio ut bibendum. Nunc convallis turpis id elit fringilla aliquet. Phasellus erat enim, faucibus quis ornare sit amet, elementum quis arcu.</p>
</div>
 
Sacale los puntos a h1 y p.

Inserir CODE, HTML ou PHP:
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-transform: capitalize;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-right: 15px;
	padding-left: 15px;
}
 
Quitale los puntos ya que no son clases.
Saludos 🙂
 
Para las etiquetas HTML no es necesario poner los puntos(<h1>,<p>,<ul>,<li>,...etc.)pero eso si cuidado con definir una etiqueta pues afecta también a todas del documento te recomiendo investigar sobre los selectores CSS para especificar a que etiqueta le quieres dar un estilo en concreto. un saludo
 
No le definas fonts-family a las etiquetas p o h1 a menos que sea necesario hacerlo, hazlo con la etiqueta body y así todos lo van a heredar.

Inserir CODE, HTML ou PHP:
body {
    font-family: Arial, Helvetica, sans-serif;
    /* todo el documento hereda estos fonts */
}


h1 {
	font-size: 18px;
	text-transform: capitalize;
}

p {
	font-size: 12px;
	padding-right: 15px;
	padding-left: 15px;
}

Como dice taylorur, al dar estilo a una etiqueta en este caso p, se le aplica a todos los párrafos del document. Para ello se usan clases que son las que comienzan con puntos e.j. .p, .h1, .mi-clase, etc.

En el tu HTML sería algo como esto:

Inserir CODE, HTML ou PHP:
<div class="col-derecha">
    
    <img src="imagen3.jpg" />
    <h1 class="titulos">Lorem</h1>
    
    <p class="parrafos">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in metus massa. Nullam quam orci, pretium et pulvinar ac, pretium imperdiet quam. Sed nec fringilla metus. Nulla at iaculis lacus. Nam turpis ipsum, faucibus vel dignissim vel, pharetra ac nulla. Etiam tempus aliquet odio ut bibendum. Nunc convallis turpis id elit fringilla aliquet. Phasellus erat enim, faucibus quis ornare sit amet, elementum quis arcu.</p>

</div>

Al usar clases te viene mejor, porque así puedes heredar propiedades de otras clases. Piensa en hacer todo en la hoja de estilos y no pasar ancho y alto a las imágenes de forma directa.

Espero haber aclarado algunas cosas.
 
Voltar
Topo