Какой лучший способ перейти от макета Photoshop к семантическому HTML и CSS?


20

Я обычно использую ручной процесс:

  1. Посмотрите на странице, выяснить семантические элементы и создавать HTML-
  2. нарезать изображения я думаю, что я буду нуждаться в
  3. начать писать CSS
  4. Tweak и повторять различные шаги по мере необходимости

есть лучший подход, или инструмент?

10

У меня есть довольно естественный способ кодирования. Ключ должен обрабатывать страницу как документ или статью. Если вы думаете об этом, как это следующее становится логически ясно:

  1. Титульный лист является верхним уровнем товарной позиции

    • ли вы сделать заголовок сайта или фактический титульный лист h1 зависит от вас - лично я сделал бы О нас h1, а не переполнение стека.
  2. Навигационная таблица содержания, и, таким образом упорядоченный список - вы можете также использовать ол по ул.

  3. Заголовки разделов h2, секции в этих разделах - h3s и т. Д. Уложите их вверх.

  4. Используйте кавычки и цитаты, где это возможно. Не просто окружить его».

  5. Не использовать б и я. С помощью сильных и эм. Это происходит потому, что HTML является структурным, а не презентационная разметкой. Strong и эм Phasis теги должны быть использованы где вы бы сделать акцент на слове.

  6. <label> ваши элементы формы.

  7. Использование <acronym> с и <abbr> сек, где это возможно, но только в первой инстанции.

  8. Самый простой: всегда, всегда придать вашим изображениям некоторый альтернативный текст.

  9. Существует много HTML-тегов, которые вы могли бы использовать, что вы, вероятно, не указали - адрес для почтовых адресов, вывод экранного кода. Посмотрите на HTML Dog для некоторых, это моя любимая ссылка.

Это всего лишь несколько указателей, я уверен, что я мог бы подумать больше.

О, и если вам нужна задача, сначала напишите свой XHTML, а затем напишите CSS. При CSS-установке вы не можете трогать HTML. Это на самом деле сложнее, чем вы думаете (но я обнаружил, что это ускорило меня).

  0

+1 для HTMLDog. 22 июл. 102010-07-22 16:41:20

  0

Благодарим вас за ответ. 15 сен. 142014-09-15 07:02:15


0

Некоторые из разработчиков, которых я знаю, обычно используют Illustrator для создания элементов дизайна.


1

Нет ярлыков :), но все работают несколько иначе.

This tutorial, который появился в моем загрузчике вчера, показывает процесс от начала до конца и может помочь людям, которые никогда не делали этого раньше, но поскольку вы старая рука, это просто упорядочение ваших собственных методов.

EDIT: Ссылка на список каналов, безусловно, более автоматизирована для «плоских» проектов, где и imagemady, и фейерверки имели очень хорошую поддержку с первого дня, и с каждым выпуском стало лучше и семантично, но если у вас более сложный дизайн это чистые биты, которые делают дизайн тем, чем он является, и это нужно делать вручную.


0

This page показывает, как сделать это немного более автоматизированным.


4

Ну, когда я создаю сайт, я стараюсь полностью забыть о дизайне во время написания HTML. Я делаю это, поэтому я не стану использовать какую-либо разметку, специфичную для дизайна, и поэтому я могу сосредоточиться на семантическом значении элементов.

Некоторых указатели, как разметка вещи:

меню
  • - используйте элемент UL (неупорядоченный список), так как это именно то, что меню. неупорядоченный список вариантов. Пример:

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

    , если вы хотите в горизонтальное меню вы можете сделать это:

    #menu li { 
        display: block; 
        float: left; 
    } 
    
  • Логотип - использовать элемент H1 (заголовок) для логотипа вместо image.Example:

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

    И CSS (тот же метод может быть применен к меню выше, если вы хотите меню с графическими элементами):

    #header h1 { 
        display: block; 
        text-indent: -9999em; 
        width: 200px; 
        height: 100px; 
        background: transparent url(images/logo.png) no-repeat; 
    } 
    
  • Идентификаторы и классы - используйте идентификаторы, чтобы идентифицировать элементы, в которых у вас есть только один экземпляр. Используйте класс для идентификации элементов, которые вы получили в нескольких экземплярах.

  • Используйте текстовый браузер (например, рысь). Если имеет смысл перемещаться таким образом, вы сделали все возможное, когда дело доходит до доступности.

Я надеюсь, что это помогает :)


3

Я по существу сделать то же самое Джон делает, но вот некоторые другие идеи:

  1. Используйте направляющие в Photoshop (и синхронизироваться с ними). Выясните все ваши размеры для каждого окна/региона заблаговременно.

  2. Соберите все ваши размеры и цвета шестнадцатеричных значений в информационный файл (я использую txt-файл), с которым вы можете легко ссылаться. Это уменьшит ваш налог на вкладку alt и добавит цвета в Photoshop несколько раз.

  3. После того, как все мои направляющие на месте, я вырезаю весь сайт в папку с изображениями, начиная с фотографий и сгруппированных элементов, и заканчивая различными фоновыми плитками/изображениями, если они существуют. (Совет: используйте ctrl -нажмите на предварительный просмотр слоя, чтобы выбрать содержимое этого слоя).

Примечания по использованию Photoshop:

  • Используйте проводники или сетки.
  • Используйте функцию «Примечания» для любой соответствующей информации.
  • Всегда используйте группы слоев для аналогичных элементов. Мы должны иметь возможность отключить целые области одним щелчком мыши. Поместите весь контент заголовка в одну группу слоев.
  • Всегда указывайте свои слои.
  • Вы можете поместить каждый шаблон страницы в один файл PSD и использовать вложенные группы слоев для их организации. Таким образом, нам не нужно настраивать все наши руководства и заметки для каждого шаблона страницы на сайте.

1

Я просто подумал, что стоит отметить, что в дополнение к отличным советам, которые у вас были до сих пор, я бы рекомендовал получить печатную версию дизайна, используя красное перо, чтобы отметить все элементы блока по дизайну, который, по вашему мнению, можно найти и устроиться с дизайнером в течение получаса и рассказать о том, как они предполагали, что их дизайн работает в случаях использования, которые не соответствуют статическому дизайну.

  • Что происходит, когда в навигацию добавляется больше текста?
  • Является ли эта ширина фиксированной или жидкой?
  • Является ли это панель содержимого правой фиксированной высотой или жидкостью? Если это жидкость, почему вы положили на нее фон, который нельзя повторить?
  • У вас есть граница, проходящая по странице, которая разбивает два других связанных элемента. Визуально это имеет смысл, но семантически я не могу просто использовать li для размещения обоих этих элементов. Как вы думаете, что более важно?

Это также поможет вам выявить потенциальные проблемы, которые вы, возможно, не осознали, были проблемами, пока ваш локоть не будет глубоко в css.

Это не только упрощает вашу работу, но и делает это благодаря тому, что ваш дизайнер получит гораздо более сильное представление о том, что связано с разметкой их работы. У некоторых дизайнеров есть настоящая проблема, понимающая, почему то, что они считают визуально очень простым потребуется несколько дней для настройки CSS, чтобы сделать работу.


0

Также ознакомьтесь с функцией «Слой Комп». Я использую это для изменения состояния кнопок.

  1. Создание слоев comp для нормального, зависания и активного.
  2. В каждом из них настройте наложения эффектов/цвета и видимые слои, которые принадлежат этому состоянию.
  3. Сохраните для Интернета: перейдите в другую папку для каждого состояния, если только не будет проще переименовать каждый фрагмент (иначе ваши кусочки кнопки наведения будут перезаписаны ваши обычные фрагменты).