Вообще говоря, работа, выполненная по веб -дизайну, на самом деле: преобразовать визуализации PSD в страницы шаблонов HTML+CSS. Как правило, мы получим PSD художника, и у разных людей будут разные подходы:
1. Откройте фейерверк и экспортируйте изображение в HTML.
2. Прямо используйте такие инструменты, как DreamWeaver, чтобы перетаскивать и изложить макет, импортировать соответствующие изображения и флэш -ресурсы.
3. После завершения выреза в PS сначала посмотрите на визуализации в текстовом редакторе и заставьте их шаг за шагом.
Вышеуказанное - наиболее часто используемые методы, но ни один из них не хорош:
Первый метод - худший, такой код вообще не поддерживается и не читается.
Второй метод тоже не очень хорош, код неизбежно будет избыточным, и то, что вы делаете, необходимо проверить.
Третий метод тоже не очень хорош, потому что вам нужно посмотреть на визуализацию кусочком, то есть при написании тега HTML вы постоянно предполагаете, как отобразить эту часть.
Правильный способ сделать это:
1. После получения PSD не делайте ничего другого в первую очередь. Напишите структуру веб -страницы непосредственно в текстовом редакторе. Не думайте, как отображать этот CSS в будущем. Это полностью натурализованная этикетка без добавления CSS.
2. После написания убедитесь, что нет проблем с общим позиционированием после запуска каждого браузера.
3. Напишите общий CSS, здесь CSS отвечает только за позиционирование и стиль больших блоков.
4. Вырежьте требуемые ресурсы с изображением, постройте их кусочек в письменной структуре, постоянно отлаживайте их и, наконец, становятся готовым продуктом.
5. Наконец, добавьте комментарии в свой собственный код и добавьте комментарии в свой собственный код надлежащим образом как в CSS, так и в HTML.
Есть еще много вещей, на которые можно обратить внимание, если мы хотим сделать гибкий переключатель, чтобы сделать кожу и позволить CSS доминировать в производительности, но общий процесс такой. Конечно, мы не можем писать HTML напрямую в начале, но, по крайней мере, мы должны иметь это осознание и шаг за шагом. Полем Полем
PSD -файл выключить веб -сайты из двух основных моментов:
1. Независимая страница
1. Проанализируйте эту страницу и сначала опишите общую структуру в вашей голове или на черновике.
2. Согласно ситуации проекта, проанализируйте распределение фоновых изображений, распределение изображений ICO и т. Д.
3. Вырежьте соответствующие картинки, экспорт и слияние изображений
4. Напишите общую структуру XHTML в редакторе, включая структуру всех элементов, которые появляются на странице
5. Напишите общий и код модуля в стиле CSS
6. Регулировка детализации
7. После работы браузер проверит, правильно ли он
2. Маленький или большой сайт, состоящий из нескольких страниц
1. Просмотрите все проектные черновики и объедините распределение модулей, изображений и файлов сайта
2. Начните первую точку работы, но важно спланировать распределение контента сайта.
Общее рассмотрение:
1. Слияние изображений, чтобы уменьшить количество запросов
2. Структурная рациональность и семантизация
3. Простота стиля облегчает его поддержанию позже
4. В основном рассмотрим более позднее техническое обслуживание и разработку программ, как просто достичь эффекта.