Diseño y Maquetado Web xHTML y CSS con Adobe Photoshop CS3

Alguien me puede explicar como puedo dejar algunas de las imagenes como background y las otras no? porque tengo algunos botones que no quiero que queden de fondo pero el resto si de las imagenes si.

Gracias

 

colombogk, bienvenido al foro.

Eso lo debes realizar en el HTML generado utilizando Dreamweaver.

 

ok muchas gracias por el tutorial es buenisimo

 

Tengo una duda elQuique, al seguir el tutorial diseñe mi pagina web con un tamaño de 800x600 pero solo se ve bien cuando alguien tiene esta resolucion de pantalla. EL problema es porque yo uso 1024x768 y cuando publico la pagina se ve toda pegada a la izquierda y queda mucho espacio en blanco supongo que con resoluciones mas grandes debe verse peor. No existe alguna forma de diseñar la pagina para una resolucion de 800x600 y que en caso de que la resolucion del usuario sea mas grande la pagina se vea al medio o se adapte a la nueva resolucion?

Saludos

 

Puedes hacer varias copias, o realizar la pagina en % y no en medidas especificas.

Igualmente una web no tiene porque ocupar todo el ancho o alto.

 

hola lo primero darte las gracias por el tutorial es buenisimo y preguntarte para cuando las otras entregas:
Optimizar cortes de un diseño Web con Adobe Photoshop CS2
Generar código xHTML con Adobe Photoshop CS2 y optimizar con Dreamweaver
Generar código CSS con Adobe Photoshop CS2 y optimizar con Dreamweaver
porque estoy bastante interesado sobre todo con el tutorial para generar codigo css y optimizarlo con el dreamweaver porke de momento este tutorial me ha ayudado mucho pero ahora quiero hacerlo con css y no se si vas a hacer alguna entrega mas o ya lo has abandonado
gracias

 

savior, bienvenido al foro

Estoy atrasado con los tutoriales en mi sitio, viste el dicho, casa de herrero cuchillo de palo, pero bueno publicare los que tengo listo y terminare otros este mes.

 

ya tengo ganas de leerlos porque los que ya tienes publicados son bastante buenos
de nuevo gracias

 

ola quiqe,

soy nuevo en todo esto, y tengo una pregunta que hacerte, respecto a la maquetación de paginas web con photoshop.

he visto tu tutorial, y cuando hago los cortes y to eso bien, pero al pasar al frontpage para editarla y añadir el texto, imagenes.... se me descuadra entera o se me pone en blanco la zona del sector, moviendome todo.

lo q yo quiero hacer es, que segun vaya añadiendo texto,imagenes.... vaya estirando hacia abajo, sin provocar saltos, ni desplazarse los otros sectores.


¿podrias ayudarme porfavor

 

sir_burbu, bienvenido al foro

Sobre tu elección de editor, temo decirte que Frontpage no es para hacer paginas web, es como Word para hacer cartas, o Publisher para hacer tarjetas, pero no respetan los estándares de HTML que es lo que es valido en la Web, todo el código generado sera muy malo.

Sobre lo de estirarse de acuerdo al contenido, bueno si bien en Photoshop generas imágenes y HTML eso suele ser estático, debes en un editor web modificar el HTML (y si es con CSS agregado mejor) para adaptarlo a tu contenido quitando los Altos fijos en primer lugar, y el Ancho si es necesario.

O sea debes llevar tu diseño de estático en un dibujo a algo realmente HTML y adaptado a tu contenido.

Para esto debes saber un poco de HTML, al menos la básica, hay algunos tutoriales acá:

<a href="http://www.tallerwebmaster.com/Tutoriales-CSS-y-xHTML-c-5.html" target="_blank">http://www.tallerwebmaster.com/Tutoriales-...-xHTML-c-5.html</a>

 

<!--quoteo(post=292674:date=Mar 13 2008, 05:23 PM:name=elQuique)--><div class='quotetop'>CITA(elQuique @ Mar 13 2008, 05:23 PM) [snapback]292674[/snapback]</div><div class='quotemain'><!--quotec-->
sir_burbu, bienvenido al foro

Sobre tu elección de editor, temo decirte que Frontpage no es para hacer paginas web, es como Word para hacer cartas, o Publisher para hacer tarjetas, pero no respetan los estándares de HTML que es lo que es valido en la Web, todo el código generado sera muy malo.

Sobre lo de estirarse de acuerdo al contenido, bueno si bien en Photoshop generas imágenes y HTML eso suele ser estático, debes en un editor web modificar el HTML (y si es con CSS agregado mejor) para adaptarlo a tu contenido quitando los Altos fijos en primer lugar, y el Ancho si es necesario.

O sea debes llevar tu diseño de estático en un dibujo a algo realmente HTML y adaptado a tu contenido.

Para esto debes saber un poco de HTML, al menos la básica, hay algunos tutoriales acá:

<a href="http://www.tallerwebmaster.com/Tutoriales-CSS-y-xHTML-c-5.html" target="_blank">http://www.tallerwebmaster.com/Tutoriales-...-xHTML-c-5.html</a>
<!--QuoteEnd--></div><!--QuoteEEnd-->


--------

he visto esos tutoriales y la verdad q no me han servido, no podrias poner un ejemplo mas grafico de como hacer lo del alto fijo y todo eso, si no es molestia.

muchas gracias

 

En ese caso te aconsejo estudiar un poco de HTML el tutorial es de Photoshop, pero veo que tus carencias es desconocer HTML y CSS.

Te dejo estos tutoriales para que aprendas HTML y CSS
<a href="http://www.tallerwebmaster.com/Tutoriales-CSS-y-xHTML-c-5.html" target="_blank">http://www.tallerwebmaster.com/Tutoriales-...-xHTML-c-5.html</a>

Si quieres saber como definir el alto de un DIV:

div {
height: 200px;
}

siendo 200 el alto.

 

muchas gracias! aver si con esto me animo a perfeccionar xHTML y CSS

 

Nesecito Su Ayuda, Como Agrego Texto Ala Pantilla Desde El Deanweaver , Porfavor Diganme Siempre Me Pasa Eso!

 

Siempre Me Pasa Eso

 

Y me imagino que ya saben HTML no ?

Imaginen que yo les de Word, y no sepan escribir ni las reglas del lenguaje, podrían hacer un libro ??

En Internet pasa lo mismo, el diseñador puede diseñar, pero si no sabe HTML y CSS no podrá pasarlo a la web, o aprende o se lo pasa a un maquetador web.

Les dejo algunos tutoriales sobre HTML y CSS

<b>Conceptos Básicos de xHTML</b>
<a href="http://www.tallerwebmaster.com/Tutorial-Conceptos-Basicos-de-xHTML-Parte-1-c-59.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Co...rte-1-c-59.html</a>

<b>Maquetación de un Sitio Web con CSS</b>
<a href="http://www.tallerwebmaster.com/Tutorial-Maquetacion-de-un-Sitio-Web-con-CSS-1-c-13.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Ma...CSS-1-c-13.html</a>

El software no sirve de nada si no se conoce su utilidad y forma de uso.

 

Buenas volviendo a los foros gracias a Quique, bueno queria preguntar una pregunta muy absurda creo yo pero es la siguiente:

Hay alguna tabla que diga todas las Tags de xhtml?? COmo strong,<p> todas esas??

Y otra mas absurda en CSS las clases las denomina cada uno??

 

Las preguntas no son absurdas , ya que seguramente muchos de los que hacen paginas web y hasta cobran por ello, ni siquiera saben que existe la W3C o World Wide Web Consortium que es el consorcio que dicta todas las pautas que rigen la web.

Es imposible que la web exista sin estas pautas, que lo que hacen es establecer estándares, para que conociéndolos quienes realizan sistemas operativos, hardware, navegadores, y desarrollan contenidos y sitios web puedan llegar a algo coherente.

Es ahí en esa pagina <a href="http://www.w3.org/" target="_blank">http://www.w3.org/</a> donde están documentados todos los estándares las etiquetas xHTML están específicamente en <a href="http://www.w3.org/TR/xhtml1/" target="_blank">http://www.w3.org/TR/xhtml1/</a>

Igualmente muchos de los que hacen paginas web, aun cuando HTML es lo único estándar que entienden los navegadores ni idea tienen de la W3C, y luego se preguntan porque no se ve bien una página o no la enlaza un buscador

Sobre tu segunda pregunta bueno, class="unnombrecualquiera" es la forma de indicar a un elemento HTML que el mismo adopta las formas de diseño que se establezcan en el CSS, con el siguiente formato

.unnombrecualquiera {
/* todo tu CSS acá */
}

y como ves puede ser un nombre cualquiera por tanto si, la denominación o nombre de las clases los inventas tu, aunque obviamente deberías darle un nombre coherente como "titulo", "columnaizquierda", "cajaderecha", etc. También debes tener cuidado en no utilizar símbolos, trata siempre de usar solamente letras, ya que si bien puedes usar dígitos o guiones, depende del lugar y algunos dispositivos que estos funcionen o no, en cambio con letras funciona siempre.

La información sobre CSS y sus reglas están acá: <a href="http://www.w3.org/Style/CSS/" target="_blank">http://www.w3.org/Style/CSS/</a>

Y recuerda que cuando haces una página, deberías que todo el HTML este bien con el,

validador HTML <a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a>

y el,

validador CSS <a href="http://jigsaw.w3.org/css-validator/" target="_blank">http://jigsaw.w3.org/css-validator/</a>

Por último decirte que si bien ahí sabes ahora que está todo, es mejor lo uses solo como referencia para profundizar, ya que obviamente son cientos de paginas y es mejor comenzar por leer documentos más básicos y seguir algunos tutoriales de forma que no sea tan aburrido y tedioso y te pierdas en un mundo de teoría.

Luego ya en cada caso si quieres profundizar, buscas en esa documentación sobre uno u otro tag específico.

 

Gracias por todal la informacion quisiera saber donde poder descargar el dreamweaver??

 

El Dreamweaver es un programa de pago lo descargas para prueba en <a href="http://www.adobe.es" target="_blank">http://www.adobe.es</a> por 30 días, por eso puse alternativas, ya que no todos desquitamos una suite de 2000 euros