Из PSD в HTML, создание дизайна вебсайта шаг за шагом

как создать сайт

От автора: Сегодня я проведу вас через весь процесс получения из Photoshop HTML. Мы собираемся построить из 4 PSD макетов веб-сайт, который в конечном итоге станет темой WordPress. Это большая статья, поэтому, если вы собираетесь идти до конца, убедитесь, что у вас есть несколько свободных часов!

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Демо

Если Вы похожи на меня, Вам интересно посмотреть конечный результат перед началом. Вы можете увидеть четыре конечных файла HTML, следуя по этими ссылкам:

Скачать Файлы

Дополнительно вы можете скачать файлы download the full HTML/CSS/Image source files here.

Что мы будем создавать?

Как Вы, может, знаете или не знаете, я написал (очень медленно) книгу по темам WordPress. То, что мы создадим, является HTML, который я использую в книге для создания главного примера тем. Окончательный набор тем называется Creatif. Вы можете увидеть эти 4 макета, которые показаны в скриншотах ниже (щелкните, чтобы получить большие версии).

Вы можете получить полный набор PSD файлов от PSDTUTS Plus, но это обойдется вам в $ 9 в месяц за доступ. Если вы не хотите присоединиться, не беспокойтесь, поскольку вы сможете проследить сегодняшнюю статью, используя только JPG скриншоты .

как создать сайт

как создать сайт

как создать сайт

как создать сайт

Часть 1 — Создание структуры и первой страницы

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

Шаг 1 — Подготовка

Итак, прежде всего, мы загружаем наш редактор кода на выбор. Я использую чаще всего Dreamweaver (и Textmate иногда). Я нахожу, что Dreamweaver имеет довольно приличные инструменты кода и некоторые особенности, которые я действительно использую (в частности, мощный Find+Replace и быстрое подключение <img>).

В любом случае первое, что делают — это создают структуру каталогов и готовятся к созданию сайта. Обычно я создаю папку images и папку scripts, а затем я кладу весь мой CSS и HTML в основу.

как создать сайт

Шаг2 – Быстрая предварительная разметка

Первое, что мы сделаем — это полная разметка HTML с некоторой частью CSS для того, чтобы просто удостовериться, что у нас есть солидная основа. Мы можем также проверить её в основных браузерах (IE7, IE6, Firefox, Safari) только, чтобы удостовериться, что мы находимся на твердой опоре. Нет ничего хуже, чем возвращаться полностью к началу, чтобы устранить проблемы совместимости браузеров. Намного лучше сделать это заранее.

Таким образом, создавая первый макет, мы можем увидеть несколько вещей:

Дизайн центрирован. Это сразу говорит нам, что мы должны обернуть его в контейнер и затем центрировать этот контейнер.

В сущности, дизайн представляет собой ряд горизонтальных блоков. Иногда блоки имеют два столбца, а иногда один. Поэтому мы можем сделать это в виде серии <div>-ов. Это хорошо потому, что мы можем смешивать и совмещать элементы из разных страниц, как это будет видно позже.

У нас есть нижний колонтитул, у которого другой цвет. Это означает, что фон должен быть того же цвета, в случае, если пользовательский браузер растягивается. Таким образом, нижний колонтитул должен будет находиться в другом контейнере (не в основном).

Итак, вот HTML разметка:

Как вы видите, здесь есть две части: #main и #footer. Внутри каждой есть <div class=»container»> элемент, который будет фиксированной ширины и центрирован. Тогда внутри главного контейнера у нас будет просто последовательность <div>-ов. Теперь давайте добавим немного CSS следующим образом:

Таким образом, мы устанавливаем цвет фона body темно-коричневый — цвет нижнего колонтитула. Тогда у области #main будет более светлый фон. Наконец, у <div>-ов с классом .container ширина 950px, и они центрированы, при помощи margin: 0 auto. Я также добавил красную границу так, что можно увидеть, как элементы расположены на странице.

Вы можете увидеть разметку здесь или посмотреть скриншот ниже.

как создать сайт

Шаг 3 – добавить некоторые фоновые изображения

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

Первое, что нам нужно это несколько изображений. Вы можете сделать их сами, если у вас есть PSD, или просто возьмите download ZIP, и вы увидите некоторые изображения, которые я сделал раньше!

Вот скриншот первого изображения — большой фоновый JPG. Я использую это большое фоновое изображение, чтобы получить радиальный градиент на переднем плане, затем я буду использовать тонкий фрагмент в 1px, чтобы заполнить левую и правую стороны, таким образом страница будет растягиваться.

как создать сайт

Аналогичным образом мы создадим фоновое изображение для нижнего колонтитула, прокладывая границу между ним и основной областью, (Вы можете найти это изображение в ZIP архиве, оно называется background_footer.jpg). Теперь мы обновим файл CSS, чтобы удалить ту красную границу и добавить наши новые фоновые изображения, следующим образом:

Две вещи к сведению:

Есть несколько способов установить фон. В #main я использовал однин селектор ,который устанавливает три свойства — цвет, изображение, повторить изображение. Но вы можете также установить каждое свойства индивидуально, как я сделал это в #main .container и #footer.

Обратите внимание, что, поскольку я хочу применить фоновое изображение «background_light.jpg» к <div class=’container’>, который находится внутри #main, а не к тому, что находится внутри #footer,поэтому я написал #main .container. Иными словами, это применяется только к элементам класса class=’container’ , которые находятся внутри элементов с id=’main’.

Шаг 4 – Тестирование в браузерах

Пока неплохо. Не забывайте проверять в различных браузерах. Здесь Вы можете видеть в IE7, это выглядит великолепно!

как создать сайт

Шаг 5 – делаем прозрачный логотип

Затем я создал Логотип. Поскольку в дальнейшем мы будем работать с альтернативной цветовой схемой, я собираюсь использовать прозрачный фон PNG файла. Вы можете сделать это, выключив фон в Photoshop и затем выполнить в File > Save for Web and Devices и выбрать PNG-24. Вы должны знать, что PNG-24 это файлы довольно большого размера. Для маленького изображения как наше это нормально, но для больших изображений файл может быть слишком большим.

(Если кто знает, как сделать сжатый файл PNG, оставьте комментарий, потому что я уверен, что есть способ сделать это, но я просто не знаю, как!) Во всяком случае, вы можете получить прозрачный логотип PNG здесь.

как создать сайт

Теперь мы добавим наш логотип, а также меню при помощи этого HTML кода:

и дополним CSS:

Некоторые моменты, которые нужно отметить:

Вместо того, чтобы просто разместить изображение логотипа в HTML, мы создали <div id=»logo»> и внутрь поместили <h1> с названием. Затем с помощью CSS мы заставили текст исчезнуть и заменили его изображением логотипа. Это имеет преимущества в SEO.

Я привык использовать display:hidden, но современные поисковые роботы умеют читать файл CSS и игнорируют блоки в которых используется display:hidden. Поэтому лучше использовать текстовые отступы.

Я поместил без стилей меню с помощью неупорядоченного списка. Установив свойства отображения Inline для <li> элементов, список изменился на горизонтальный набор элементов … Ура!

Наконец, т.к у нашего <div class=»container»> задан position:relative, мы можем теперь использовать абсолютное позиционирование внутри его и установить right:0px для меню и оно будет прижато к правой стороне. Это идеальное решение для темы WordPress потому что, человек создавая новые страницы, расширит меню, и этот способ оставит его выровненным по правому краю.

Шаг 6 – Установка прозрачности в IE6

Теперь есть одна проблема с прозрачным PNG и она заключается в том, что наш друг Internet Explorer 6 не поддерживает его! К счастью эта проблема относительно легко устраняется благодаря статье, которую я нашел — The Easiest Way to Fix PNG for IE6 (Пока еще нет перевода данной статьи). Мы только загружаем скрипт и добавляем эту строку в наш CSS:

К сожалению, моя проверка в IE6, не дала результатов потому что я использую Mac, а проверка на Mac. через Darwine — не распознает исправление.. Таким образом, я понятия не имею, работает ли это 🙂

Так во всяком случае на данном этапе я не уделяю много внимания IE6 :-).

В любом случае, вот скриншот того, что мы получили в IE6, когда прозрачность не работает…

как создать сайт

Шаг 7 – Установка меню

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

Здесь нет ничего интересно, за исключением того, что мы определили сласс «active», который такой же, как стиль :hover (а именно это более темный оттенок). Это означает, что мы можем написать <a href=»» class=»active»> и ссылка потемнеет. Позднее в WordPress мы сделаем так, что можно будет сказать, на какой странице вы находитесь в любой момент времени.

как создать сайт

Шаг 8 –Добавление содержимого в Content

Теперь у нас есть основа нашей страницы и пора начать добавлять содержимое блоков. Как я упоминал ранее, мы собираемся сделать этот сайт как ряд взаимозаменяемых блоков содержания. Первый блок «Featured Project «. Итак, давайте добавим HTML:

Таким образом, этот код ниже <div id=»header»> </ div> кода из предыдущих шагов. И без стилей это выглядит так:

как создать сайт

Следует отметь две важные вещи:

Вы увидите, что у нас есть <div class=»block»> идущий перед <span class=»block_inside»>. Это объясняется тем, что у полей, которые мы рисуем есть двойная граница, сначала там есть 1px темно- серая граница, затем 1px белая граница. Так наличие двух элементов означает, что у нас может быть граница на каждом. Я не знаю, почему я использовал <span> и Вы увидите позже, как мы это изменим 🙂

У нас есть кнопка View Project, вместо изображения, мы создали создать класс ‘button’, а затем применим к нему несколько стилей, и ссылка будет выглядеть действительно, как кнопка.

Шаг 9 – Добавление некоторых базовых стилей

Теперь мы добавляем некоторые основные стили следующим образом:

Как было упомянуто выше, у нас есть класс .block, который просто устанавливает границу и нижний margin. Сразу внутри него у нас есть класс .block_inside, у которого есть белая граница, тонкий кусочек фона (для придания слабого градиента), padding, и, наконец, значение overflow.

У нас overflow:auto, поскольку у нас будет два floated элемента внутри. Раньше я использовал clearing

,но кто-то в моих предыдущих комментариях отметил, что это работает так же хорошо и намного чище!

Внутри у нас идет класс .Image_block, который дает нашему изображению двойную границу (одну на

и одну себе на <img>), и которому указано float:left. Text_block, также имеет свойство float:left, что формирует мини колонки разметки. Таким образом, наша разметка теперь выглядит следующим образом:

как создать сайт

Шаг 10 – Добавление стилей текста

Теперь займемся текстом. Это текст выглядит неплохо на предыдущем скриншоте, потому что у Firefox, который я использовал, стоит по умолчанию шрифт Sans-Serif. Но если бы я б сделал скриншот IE, то Вы бы увидели бы вместо этого шрифта Serif. Таким образом, мы должны разобраться теперь с текстом. Мы добавим эти кусочки CSS к нашей таблице стилей:

Итак:

Сначала я обновил тэг body, чтобы у нас был заданный по умолчанию шрифт, цвет, размер шрифта и высота строки.

Затем мы создали стиль для <h2>, который устанавливает margins и шрифт Helvetica.

Мы также создали стиль для <small> — подзаголовков (например, в какой категории находится пост и т.д),

Мы создали стиль ссылки и стиль link:hover

Мы сбросили стили абзацев <p>, чтобы в margins отступов по умолчанию.

Наконец, мы создали тот самый класс button. Обратите внимание, что я определил его как «a.button», или, другими словами все теги <a> с классом = «.button». Почему я просто не сделал его как «.button»? Лучше делать это именно так, чтобы иметь возможность сделать второй класс button для <input> и он будет немного отличаться. Таким образом, они не будут взаимодействовать друг с другом.

В классе button вы увидите, что мы установили некоторые padding, border, фоновое изображение, Hover стиль и атрибут line-height … Подождите line-height атрибут? Да, к сожалению, это устанавливается для IE, что бы все выглядело как кнопка.

С нашим дополнительным моделированием страница начинает обретать форму!

как создать сайт

Шаг 11 – Добавление ленты

Одной из изящных вещей в этом дизайне является маленькая голубая лента в правом верхнем углу. Благодаря сочетанию CSS, прозрачных файлов PNG и абсолютного позиционирования, она действительно несложно добавляется. Итак, сначала мы должны сделать изображение. Еще раз мы создаем изображение с прозрачным фоном и сохраняем его как PNG-24, вот изображение:

как создать сайт

Далее нам нужно поместить изображение в наш HTML, это можно сделать следующим образом:

Таким образом, Вы можете видеть тег <img> там во второй строке. Заметьте, что я присвоил ему class= «ribbon» и поместил в <div class= «block»> .block, а не в <span class= «block_inside»>. Это потому что, если мы поместим его внутрь .block_inside, это сделает путаницу со свойством overflow:auto, которое мы устанавливаем ранее. Во всяком случае , прямо сейчас это только запутает нашу разметку, так что давайте добавим стили :

Вы можете видеть, что у нас есть:

Добавляется position:relative к классу .block. Таким образом, мы можем использовать абсолютное позиционирование внутри относительно элемента с классом .block (а не для целой страницы)

Затем мы установили изображение, которое появиться на 3px выше верхнего края и на 3px правее правого края.

Легко! Ещё бы день назад, мы должны были бы использовать супер сложную <table> разметку, чтобы достигнуть того же самого эффекта. Вот то, как это смотрится сейчас:

как создать сайт

Шаг 12 – Создание второго блока

С добавленной лентой наш первый блок закончен! Теперь пришло время начинать следующий <div> блок. В нем будут темы и список последних проектов. Итак, для начала мы добавляем немного HTML:

Кажется так много кода, но на самом деле это не так. Давайте пройдемся по нему:

Сначала мы создали контейнер <div id=»block_portfolio»>, чтобы обернуть все содержимое этого блока.

Далее у нас есть <div id=»portfolio_items»>, который содержит три идентичных <div class=»mini_portfolio_item»>. Мы поговорим об этом чуть позже.

Затем у нас идет <div id=»text_column»>, который заполнен некоторым текстом и, у которого есть заголовок <h2>.

То, что мы собираемся сделать — это два столбца. Один из них с текстом, второй с темами. Чтобы сформировать два столбца, применим в стилях свойство float.

Мы заменим <h2> фоновым изображением.

И мы разработаем те mini_portfolio_item div-вы, чтобы смотрелось хорошо использование эффекта аналогичного двойной границе, как мы делали это ранее.

Вот CSS:

ОК еще раз, выглядит внушительно, но это не так плохо. Пройдем всё шаг за шагом:

Сначала мы снова использовали overflow:auto для главного блока с классом #block_portfolio. Т.к. у нас снова есть два floated столбца и если мы не сделаем этого, то они наедут на нижний колонтитул.

Затем мы установили для #portfolio_items float left, имеющий margin, чтобы отделить его от текстового столбца, и ширину 615px.

Для #text_column установлено float right с шириной 310px.

В столбце текста мы снова применили маленькую хитрость к нашему <h2> тегу, где мы используем большой текстовый отступ, чтобы текст исчез, а затем вместо него используем фоновое изображение.

Затем у нас есть три определения стиля для класса .mini_portfolio_item следующим образом:

Сначала мы устанавливаем 1px темной границы и margin между ними

Затем мы переопределяем стили .block_inside, чтобы они подходили этим элементам. Помните, что класс .block_inside был определен ранее, когда мы делали Featured Project область. Таким образом, здесь мы убираем фоновое изображение, изменяем цвет фона и изменяем padding.

Итак, в целом это выглядит вот так:

как создать сайт

Шаг 13 – Добавление ленты

Теперь мы хотим добавить «Recent Projects» ленту к самому верхнему элементу. Сделать это мы можем так же как и для предыдущей ленты:

Затем мы добавляем атрибут position:relative в элемент mini_portfolio_item следующим образом:

Но что-то странное происходит … Хотя правая сторона выглядит правильно, верх отрезался, как видно на скриншоте:

как создать сайт

Причина в том, что наш элемент находится внутри mini_portfolio_item, который обрезает его. Таким образом, все mini_portfolio_item внутри <div id= «portfolio_items»>. Решение является достаточно простым, мы добавим 3px отступа сверху, которых достаточно для нашей ленты. Вот скорректированный CSS:

Шаг 14 – Завершение элементов портфолио

Наконец я сменил несколько изображений и заголовков, чтобы мы могли увидеть, как страница выглядит с 3 различными элементами вместо одного и того же. Затем я также решил избавляться от кнопки View Project и оставить только текст ссылки. Это выглядит чище и менее грузно. Таким образом, вот конечный раздел элементов портфолио (показанный в Safari, не забывайте проверять в различных браузерах!):

как создать сайт

Шаг 15 – Добавление содержания в нижний колонтитул

Теперь есть еще один раздел на нашей странице: Footer! Давайте добавим текстовое содержание к нему:

Обратите внимание:

Я создал три <div class= «footer_column»>, в которых расположено содержание колонтитула, мы пустим их на свои места очень быстро.

Так как первый столбец другой ширины, я присвоил ему другой класс, названный «long». Отметьте, что Вы устанавливаете два класса следующим образом: class= «class1 class2» , не как : class= «class1» class= «class2» , что является недопустимым.

Внутри столбцов я использовал списки <ul> и теги заголовков <h3>. Всегда хорошо использовать правильную семантическую разметку, и это делает ее более читаемой и поисковым системам нравится видеть эти заголовки и перечислять их правильно.

Вот как это выглядит!

как создать сайт

Шаг 16 – моделирование колонтитула

Моделирование колонтитула является довольно простым, вот код, который нам нужен:

Пройдемся подробно:

Сначала мы устанавливаем шрифты для #footer области

Затем мы задали всем столбцам float с шириной по умолчанию 120px

Мы отменяем эту ширину для столбца с классом .long. Обратите внимание, что я установил «#footer .long» вместо просто «.long». Причина в том, что»long» является общим названием, которое я мог бы использовать где-нибудь в другом месте, так что это хорошая идея определить его более подробно.

Наконец <h3> и <ul> теги получают простые Стили

как создать сайт

Шаг 17 – Добавление иконки!

Мы почти закончили нашу первую страницу. Пришло время добавлять некоторые тонкости. Сначала иконка. Это те маленькие иконки, которые появляются в адресной строке. Мне не нужно ничего придумывать, просто маленький черный квадратик с С для Creatif будет красиво. Итак, сначала мы создаем квадратное изображение как это:

как создать сайт

Есть множество сайтов по созданию иконок (Visit SixRevisions for a list of them), но я всегда использую html-kit’s. Вы просто загружаете изображение и нажимаете создать Favicon.ico. Затем мы соединяем это вот с такой строкой HTML:

как создать сайт

Шаг 18 — Проверка!

Теперь пришло время проверять, что наша разметка w3c валидная! Поэтому мы идем в валидатор, вставляем наш код и скрещиваем пальцы… и епрст 🙁 не правильно. Я не помню, что я у меня было всё когда-нибудь правильно с первого раза, должны же быть у меня плохие привычки!

как создать сайт

Посмотрите, там 14 ошибок. Проблема номер один заключается в отсутствии сопроводительного текста на каждое из моих изображений… к сожалению! Поэтому вернемся и добавим его следующим образом:

следует исправить много ошибок. Итак, теперь мы запустим его снова и… барабанная дробь… По-прежнему неправильно. ОК, это оказалось немного сложнее:

как создать сайт

К счастью, оставшиеся 8 ошибок на самом деле та же самая проблема. В основном я уже использовали встроенный элемент (в частности, <span class= «block_inside»>), а затем попытался поместить элементы блочного уровня, такие как

внутрь. Видимо, что не правильно … Ого!

К счастью, это легко исправлена, мы просто изменяем каждый экземпляр <span class= «block_inside»> на<div class= «block_inside»>. И… УРА!Прошло:-)

как создать сайт

Конец первой части!

Отлично, мы успешно сделали нашу основную страницу! Здесь Вы можете видеть, что я проверяю это в IE7 и к счастью нет никаких ошибок.

Вот законченная страница

как создать сайт

Часть 2 – Создание разновидностей

С помощью нашей основной структуры мы можем создать дополнительные страницы и альтернативные цветовые схемы. К счастью, у нас есть хорошая основа, и мы можем использовать часть кода, который мы уже писали. Именно поэтому очень важно планировать всё заранее.

Шаг 19 – Создание домашней страницы блога

Следующая страница, которую мы собираемся создать это домашняя страница блога. Она похожа на страницу портфолио, на которой будут показаны сообщение блога и затем ряд сообщений блог. В итоге они станут двумя взаимосвязанными темами WordPress — одна для портфолио, а другая для блогов.

Поэтому сначала мы дублируем наш index.html, и назовем новый файл blog.html.

В нашем blog.html мы для начала удалим все <div id= «block_portfolio»>. Мы скоро заменим этот блок на другой. Затем мы заменим содержимое блока <div id= «block_featured»>, которые немного отличается, и выглядит следующим образом:

Итак, все, что я сделал — это изменил изображение ленты и содержимое в блоке с id = block_featuredblog. По сути это та же разметка. Так что, давайте посмотрим, как это выглядит теперь:

как создать сайт

Шаг 20 – Небольшие изменения CSS

Итак, чтобы все работало, мы только немного скорректируем CSS вот так:

Здесь я скорректировал «text_block» класс, но только тогда, когда он находится в #block_featuredblog элементе. Теперь он имеет небольшой отступ сверху и он стал шире.

Также я добавил соответствующую высоту строки заголовка и по моей прихоти поправил кернинг текста на -1px. И мы закончили с этим элементом!

как создать сайт

Шаг 21 — Создание области основного содержимого

Создание этой области является последней большой вещью, которую мы должны сделать. Это сформирует не только основу этой страницы, но также и базу для других универсальных страниц (с некоторыми изменениями конечно!). Что ж сначала давайте вставим некоторую основу HTML:

Так в основном то, что мы создали это элемент — <div id= «block_content»> и внутри у нас есть два блока, которые мы собираемся прижать к обеим сторонам. Вы видите, что я использую наши добрые старые <div class= «block_inside»> , чтобы добавить двойные границы. Вот CSS, чтобы сделать это правильно:

Разберемся со стилями:

Мы назначили блоку #content_area и блоку #sidebar ширину и float.

Затем я переместил боковую панель влево на 1px, используя position:relative. Я сделал это для того, чтобы создать эффект, как будто она выдается вперед.

Дополнительно я добавил 15px к главному margin так, чтобы боковая панель не была выровнена сверху. В данный момент это выглядит немного странно, но когда мы добавим содержание, это будет выглядеть лучше.

Наконец я переопределил .block_inside внутри #sidebar, чтобы отменить фоновое изображение и вместо этого сделал background-color:#e2dddc;.

как создать сайт

Шаг 22 – Добавляем содержание

Теперь мы добавляем содержание к нашим двум элементам:

OK три важные вещи, которые стоит упомянуть здесь:

Сначала в области содержания я добавил три заметки, и между ними пустые <div class= «separator»> для того, чтобы добавить между заметками тонкую линию с некоторым интервалом.

Затем мы добавили изображение ленты к боковой панели аналогичным способом как и ранее.

Наконец, я использовал очищающий <div> внизу. Затем, как и ранее в этой статье я использовал overflow:auto; чтобы разобраться с floated столбцами, но когда мы добавляем margin-top в предыдущем шаге, чтобы сместить боковую панель ниже, это смешивается с overflow и создает полосу прокрутки. Таким образом, поскольку возможны случаи, когда боковая панель будет длиннее, чем блок содержания, то в этих случаях используют метод очищающего <div> -а.

Теперь мы добавим стили, чтобы привести это все в порядок:

Отметим две вещи:

Отформатирован <ul> список боковой панели для удаления маркеров и создания красивых отступов

Создан стиль .separator, использующий margin, padding и border-top:1px solid #e3e3e3; — для создания тонкой линии.

И вот наш #block_content элемент закончен! Вы можете увидеть работающий HTML здесь.

как создать сайт

Шаг 23 – Создание общей страницы

Создание нашей конечной страницы является частью проекта. Мы просто дублируем наш blog.html и называем его page.html. Затем удалите featured blog post и измените #block_content следующим образом:

Это довольно большой кусок HTML аналогичный предыдущему, но с другим текстом и новой лентой. Единственное реальное изменение это то, что теперь у нас есть заголовок, выше которого подзаголовок обернутый в тег <h4>. Таким образом, мы можем разработать пару строк CSS следующим образом:

И вот! Увидеть окончательную универсальную страницу можно здесь.

как создать сайт

Шаг 24 — Это не имеет значения, черный или белый!

Теперь мы собираемся сделать очень простой CSS, чтобы переключить сайт со светлого фона на темный. Чтобы аккуратные это сделать мы просто должны изменить одну строку в HTML:

Вот и всё! С этим одним кусочком дополнительного кода HTML мы можем сделать все необходимые корректировки CSS. Это означает, что если бы вы пожелали, то смогли бы очень легко сделать маленькие JavaScript кнопки, чтобы переключать таблицы стилей. Этот способ будет работать для любого класса, который нужно изменить, мы просто добавляем дополнительный стиль, начинающийся с body#dark. Так что, прежде всего, мы говорим:

И это говорит браузеру, что если <body id= «dark»> затем отменить стиль для #main, #main.container, #footer, active и hover states меню и поменять фоновые изображения и изменить цвет текста на белый! Просто, как пирог!

как создать сайт

Шаг 25 — Границы и фиксация текста

Как Вы можете видеть, на изображении ниже наш колонтитул фиксируется благодаря новому фоновому изображению и цвету, есть только еще два исправления: «Creatif — WordPress…» текст и границы вокруг полей слишком светлые и должны быть теперь темными. Поэтому мы делаем так:

как создать сайт

Шаг 26 – Дополнительный цвет!

И это все! У нас есть альтернативная цветовая схема всех тегов элеметна контролируемых одним ID. Это волшебство прозрачных файлов PNG и CSS!

как создать сайт

Конец

Вот и всё! HTML полностью закончен. Не забывайте, что вы можете посмотреть полные страницы пройдя по ссылкам:

Дополнительно Вы можете загрузить download the full HTML/CSS/Image source files here или через PSDTUTS Плюс full layered PSD files *and* a tutorial on designing them up.

Автор: Collis Ta’eed

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: //net.tutsplus.com

Метки: , , , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (29)