¿Cuál es la mejor manera de ir de un Photoshop maqueta a la semántica HTML y CSS?

Question

Yo por lo general uso un proceso manual:

1. Busque en la página, averiguar los elementos semánticos, y construir el HTML
2. Cortar las imágenes creo que voy a necesitar
3. Empezar a escribir CSS
4. Ajustar y repita los diferentes pasos según sea necesario

Tiene un mejor enfoque, o una herramienta?

Answer 1

Tengo bastante natural, forma de codificación.La clave es tratar a la página de un documento o de un artículo.Si usted piensa en ello de esta manera los siguientes convierte lógicamente claro:

1. El título de la página es un título de nivel superior

   • Si el título del sitio o de la página real título de la h1 es de ti, personalmente, me gustaría hacer Sobre Nosotros el h1 en lugar de Desbordamiento de Pila.

2. La navegación es una tabla de contenidos, y por lo tanto una lista ordenada - usted puede también utilizar un ol, a través de una ul.

3. Los encabezados de sección son h2, secciones dentro de esas secciones son h3s etc.Pila de ellos.

4. Uso blockquotes y citas cuando sea posible.No sólo la rodean con ".

5. No utilice b y yo.El uso de strong y em.Esto es debido a que HTML es estructural lugar de presentación de marcado. Fuerte y emfase etiquetas deben usarse donde se había puesto el énfasis en la palabra.

6. <label> sus elementos de formulario.

7. Uso <acronym>s y <abbr>s donde es posible, pero sólo en la primera instancia.

8. La forma más fácil:siempre, siempre dar a las imágenes un texto alternativo.

9. Hay un montón de etiquetas HTML que usted puede utilizar que usted probablemente no ha - dirección de correo postal, código de la pantalla de salida.Eche un vistazo a HTML Perro para algunos, es mi favorito de los de referencia.

Que sólo un par de punteros, estoy seguro de que podría pensar de más.

Ah, y si quieres un reto escribir su XHTML en primer lugar, a continuación, escribir el CSS.Cuando CSS-ción que no se les permite tocar el HTML.Es en realidad más difícil de lo que usted piensa (pero he encontrado que me ha hecho más rápido).

Answer 2

Bueno, cuando comencé a construir un sitio web que tienden a probar y olvidar el diseño completamente al escribir el código HTML.Yo hago esto, así que no voy a acabar con cualquier diseño de marcado específico y así me puedo centrar en el significado semántico de los elementos.

Algunos consejos de cómo marcado de cosas:

• menú de uso de la UL (lista desordenada) elemento, ya que es exactamente lo que un menú.una lista no ordenada de decisiones.ejemplo:

  <ul id="menu">
      <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
      <li id="about"><a href="/about" title="More about us">About</a></li>
  </ul>
  

  si quieres un menú horizontal que usted podría hacer esto:

  #menu li {
      display: block;
      float: left;
  }
  

• Logotipo de usar un H1 (rúbrica), elemento para el logotipo en lugar de una imagen.Ejemplo:

  <div id="header">
      <h1>My website</h1>
  </div>
  

  Y el CSS (misma técnica puede ser aplicada para el menú de arriba, si desea un menú con elementos gráficos):

  #header h1 {
      display: block;
      text-indent: -9999em;
      width: 200px;
      height: 100px;
      background: transparent url(images/logo.png) no-repeat;
  }
  

• IDs y clases de uso de la Id para identificar elementos que sólo tenga una instancia de.Clase de uso para la identificación de los elementos que tienes en varias instancias.

• El uso de un navegador textual (por ejemplo, el lince).Si tiene sentido para navegar en este camino, que ha hecho de bueno en lo que respecta a la accesibilidad.

Espero que esta ayuda :)

Answer 3

Yo básicamente hacen lo mismo Jon, pero aquí hay algunas otras ideas:

1. El uso de Guías en Photoshop (y de bloqueo para ellos).Averiguar todas sus dimensiones para cada caja o región antes de tiempo.

2. Recoger todas sus dimensiones y el color hexadecimal los valores en un archivo de información (yo uso un archivo txt) que se pueden consultar fácilmente.Esto reducirá el alt-tab de impuestos y de la selección de colores en Photoshop varias veces.

3. Después de todos mis Guías en su lugar, yo trozo de la totalidad de la página web en mi carpeta de imágenes, comenzando con las fotos y los elementos agrupados, y terminando con las diversas fondo de azulejos/imágenes, el caso de que existan.(Sugerencia:Uso ctrl-haga clic en la capa en la vista previa para seleccionar el contenido de la capa).

Notas sobre el uso de Photoshop:

• El uso de Guías o de Cuadrícula.
• Uso de la función de Notas para cualquier información pertinente
• Siempre uso la Capa Grupos de elementos similares.Tenemos que ser capaces de convertir la totalidad de las regiones de descuento en un solo clic.Poner todos los 'encabezado' contenido en una Capa de Grupo.
• Siempre el nombre de las capas.
• Usted puede poner cada página de la plantilla en un archivo PSD y el uso anidada Grupos de Capas para organizar ellos.De esta manera no tenemos que la instalación de todos nuestros guías y notas para cada plantilla de página en un sitio.

Answer 4

No hay atajos :) pero todo el mundo funciona de forma ligeramente diferente.

Este tutorial que apareció en mi lector de ayer muestra el proceso desde el inicio hasta el final y podría ayudar a las personas que nunca han hecho antes, pero como usted es un veterano de la mano es sólo acerca de la racionalización de sus propios métodos.

EDITAR:El listapart enlace sin duda está más automatizado para la 'plana' diseños en los que tanto el imageready y fuegos artificiales han tenido muy buen apoyo desde el primer día y tiene mejor y más semántica con cada lanzamiento, pero si usted tiene un diseño más complejo es el twiddly bits que hacen que el diseño de lo que es y estas tienen que ser hecho a mano.

Answer 5

Yo sólo pensé que era la pena señalar que, además de los excelentes consejos que he tenido hasta la fecha yo recomiendo conseguir una versión impresa de el diseño, el uso de un lápiz rojo para marcar todos los elementos de bloque en el diseño que usted piensa que usted puede irregular y sentarse a conversar con el diseñador de la mitad de una hora y hablar de cómo se previeron que su diseño de trabajo para los casos de uso que no se ajuste a la estática de diseño.

• ¿Qué pasa cuando hay más texto es poner en la barra de navegación?
• Es este ancho fijo o fluido?
• Es este contenido el panel de la derecha a una altura fija o líquido?Si es líquido ¿por qué poner un fondo en el que no se pueden repetir?
• Usted tiene una frontera que se extiende hasta la página que rompe con dos de otro modo conectado elementos.Visualmente tiene sentido, pero semánticamente no me no sólo puede utilizar una batería li a la casa de ambos, esos elementos.¿Cuál crees que es más importante?

Esto también ayudará a detectar posibles problemas que de otra manera no se han dado cuenta de que iban a ser problemas hasta que el codo de profundidad en el css.

No sólo hacer que su trabajo sea más fácil después de un par de veces haciendo su diseñador recibirá un fuerte sentido de lo que está involucrado en el marcado de su trabajo - algunos diseñadores tienen dificultades para comprender por qué algo que creo que se ve visualmente muy simple tomará un par de días de css ajustes para hacer el trabajo.

Answer 6

Algunos de los diseñadores sé, generalmente se utiliza Illustrator para hacer que los elementos de diseño.

Answer 7

Esta página muestra cómo hacerlo un poco más automatizado.

Answer 8

También, conocer a los "Composiciones de Capas" característica.Yo uso este para cambiar los estados del botón.

1. Crear composiciones de capas para el normal, hover y active.
2. En cada uno de estos, establecer los efectos del color y superposiciones de capas visibles que pertenecen a ese estado.
3. Guardar para web:ir a una carpeta diferente para cada estado, a menos que sea más fácil para cambiar el nombre de cada rebanada (de otro modo el botón activable rodajas de sobrescribirá su regular rodajas).