1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

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

Tema en 'Tutoriales Desarrollo Web' iniciado por elQuique, 4 Abr 2007.

  1. colombogk

    colombogk Nuevo usuario

    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
     
  2. elQuique

    elQuique Usuario activo

    colombogk, bienvenido al foro.

    Eso lo debes realizar en el HTML generado utilizando Dreamweaver.
     
  3. colombogk

    colombogk Nuevo usuario

    ok muchas gracias por el tutorial es buenisimo :D
     
  4. colombogk

    colombogk Nuevo usuario

    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 ;)
     
  5. elQuique

    elQuique Usuario activo

    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.
     
  6. savior

    savior Nuevo usuario

    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
     
  7. elQuique

    elQuique Usuario activo

    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.
     
  8. savior

    savior Nuevo usuario

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

    sir_burbu Nuevo usuario

    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
     
  10. elQuique

    elQuique Usuario activo

    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>
     
  11. sir_burbu

    sir_burbu Nuevo usuario

    <!--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
     
  12. elQuique

    elQuique Usuario activo

    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.
     
  13. krdnha

    krdnha Nuevo usuario

    muchas gracias! aver si con esto me animo a perfeccionar xHTML y CSS :D
     
  14. matitoxx

    matitoxx Guest

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

    akhkham No hay tarea tan simple que no pueda hacerse mal

    Siempre Me Pasa Eso
     
  16. elQuique

    elQuique Usuario activo

    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.
     
  17. Oops

    Oops Nuevo usuario

    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??
     
  18. elQuique

    elQuique Usuario activo

    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.
     
  19. Oops

    Oops Nuevo usuario

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

    elQuique Usuario activo

    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 :p
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·