Как сделать красивый сайт в html

Простой сайт на HTML и CSS — четыре различных способа создания макета

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

Первый день новой жизни

В этой статье мы используем четыре различных способа верстки сайта:

• Таблицы . Вам даже не нужно использовать отдельный файл стилей. И, что более важно, они не ломаются.
• Float . Мы говорим о свойстве CSS . Это довольно распространенный способ создания макета веб-страницы. И в этом случае нам необходимо будет использовать отдельную таблицу стилей. Файл HTML используется, только чтобы определить контент веб-страницы. Если вы хотите выровнять контент, то должны использовать файл CSS .
• CSS-фреймворки . Они работают так же, как JavaScript-фреймворки . Подключите исходный файл в заголовке (например, <link rel=»stylesheet» type=»text/css» href=»stylesheets/framework_file.css»>), и он готов к работе! Вам не нужно задавать значения свойств самостоятельно. Для этого используются классы, которые разработчики фреймворка приготовили для вас.
• Флексбокс . Флексбокс — это короткое название CSS Flexible Box Layout Module . Это более новая по сравнению со свойством float технология. Основной принцип флексбокс — предоставить контейнеру возможность изменять ширину, высоту и порядок содержащихся в нем элементов. Если вы хотите наилучшим образом заполнить все свободное пространство, нужно использовать для верстки div флексбокс. Например, для охвата всех типов устройств и размеров экрана. Плавающий контейнер будет расширять содержащиеся в нем элементы, чтобы заполнить весь экран.

Теперь пора попробовать каждый из них.

Способы создания

Это дизайн моего сайта:

Таблицы

Для создания шапки сайта я использовал свойство position: relative . Давайте попробуем сделать это с нуля, используя табличную верстку.

Вот мой HTML-код :

И вот, что я получил:

Как видите, это не та же самая шапка. Она выглядит знакомо, но ее расположение немного изменилось. И вот почему. Вы знаете, что таблицы отлично подходят для симметричного позиционирования. Но для других целей они подходят не так хорошо. Также обратите внимание на громоздкость кода. Но у таблиц есть одна полезная особенность. Вот какую хитрость мы можем сделать:

И вы увидите, что макет стал выглядеть так:

Таким образом, можно легко определить, что где находится, если запутались.

Теперь плохая новость. Еще раз посмотрите на HTML-код . Это простая таблица, но представьте, как она будет выглядеть с десятками ячеек. Вот какой исходный код у меня:

В этом случае вам нужно использовать блочную верстку сайта с помощью CSS . Применив что-то наподобие этого:

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

Float

Свойство float широко применяется при блочной верстке сайта. Мы будем использовать это свойство для вывода основной области размещения контента. Небольшой пример поможет вам лучше понять, как это работает:

В нем есть три разноцветных элемента <div>. Зеленый для основных статей, красный для новостных статей и синий для подвала.

И вот, что у нас получилось:

При верстке слоями вы указываете через свойство float , что хотите, чтобы ваш элемент <div> был плавающим. Затем задаете для него направление смещения. Обычно это float: left или float: right . Когда вы указываете элементу <div> смещаться влево, он это и будет делать, пока не закончится свободное пространство.

Следующий плавающей элемент будет смещаться, пока не встретит первый, и так далее. Следующий за плавающим элемент будет обтекать его как вода! Но если вы не хотите спускать все свои объекты » на воду «, можно использовать свойство clear . Оно определяет, какие стороны элемента не должны обтекать плавающие элементы.

Вот как выглядит часть моего макета для основного контента:

Теперь давайте сделаем ее плавающей:

Мы добавили несколько стилей и получили что-то вроде этого:

У нас есть большой блок для статей и блок поменьше для новостей. Мы использовали свойство float: left и для изображений. Обратите внимание, как они обтекаются тегом <p></p>. Этот макет выглядит, как ваш любимый журнал.

CSS-фреймворки

Если вы немного ленивы

Если у вас нет времени возиться с кодом при CSS верстке , можно использовать один из CSS-фреймворков . В нашем примере мы используем Bootstrap . Для этого нужно скачать его и подключить в HTML-файле .

Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.

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

Далее мы создаем раздел » Скоро в прокате «. Он будет содержать четыре постера фильмов. Путем несложных математических вычислений определяем, что каждый из них будет охватывать по три столбца.

Я также добавил класс thumbnail , чтобы сделать постеры красивее. Он также содержится в Bootstrap .

И вот, что я получил:

Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS . Но вы не видите, что происходит внутри.

Флексбокс

Классика завтрашнего дня

Мы будем использовать флексбокс, чтобы создать раздел сайта » Бокс-офис «. Вот HTML-код :

Вот CSS-код для контейнера “ boxoffice ”:

Теперь пришло время создать гибкий контейнер. Для этого нужно задать для элемента display: flex . Согласно правилам верстки, все элементы флексбокса располагаются вдоль главной и поперечной осей:

Для флексбокса задаются два типа свойств. Первый используется для управления гибким контейнером, второй — для заполнения гибких элементов. Рассмотрим подробно первый тип.

По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction . Оно может принимать следующие значения: row , row-reverse , column и column-reverse . Мы будем использовать значение column . Давайте также добавим свойство height . Для чего это нужно, вы поймете чуть позже:

Вот как выглядит наш небольшой бокс-офис:

Мы использовали свойство height , потому что не хотим, чтобы контейнер флексбокса перекрывал изображение стрелки в нижней части фона.

Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла . Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction на columns-reverse . Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера.

Для этого мы используем свойство justify-content . Доступные для него значения: flex-start , flex-end , center , space-between и space-around . Для него нужно установить значение justify-content , которое эквивалентно flex-end .

И вот каким образом отразились эти изменения:

Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start , flex-end , center , baseline или stretch .

Чтобы использовать его, добавьте свойство в селектор флексбокса:

Все элементы сместятся к правому краю:

Есть еще одно полезное свойство — flex-wrap . Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap .

Попробуйте добавить следующий код:

И вот, что в результате получится:

Как видите, элементы теперь укладываются в несколько столбцов. Значение по умолчанию для этого свойства – nowrap . При его применении элементы будут располагаться в один столбец ( или строку — это зависит от значения flex-direction ). Можно использовать значение wrap-reverse . Тогда элементы будут располагаться в обратном порядке.

Есть много полезных свойств. С их помощью вы можете изменять параметры каждого отдельно взятого элемента контейнера. Например, свойство order позволяет изменять порядок размещения элементов без необходимости вносить изменения в HTML-код .

Какой из способов выбрать?

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

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

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

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

CSS-фреймворки . Если нужно создать макет быстро, используйте фреймворки. На сегодняшний день их много. Среди них выберите тот, который вам больше подходит.

Флексбокс . Придется потратить некоторое время, чтобы узнать, как он работает. Думаю, вы уже поняли, насколько удобны флексбоксы для управления отдельными элементами.

Но, как я уже сказал, это относительно новая функция CSS . Поэтому нужно учитывать ее поддержку браузерами . Вот подборка ошибок , которые мне удалось найти, и возможные пути их решения.

Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!

Вадим Дворников автор-переводчик статьи « 4 Different HTML-CSS Layout Techniques to Create a Site »

Как разработать дизайн и код персонального веб-сайта

Привет, Хабр! представляю вашему вниманию перевод статьи «How to Design and Code a Personal Website» автора Ryan Smith.

Многие разработчики считают, что быть хорошим дизайнером — это врожденная способность, что творческий подход — это то, с чем вы сразу родились. На самом деле, дизайн — это навык, который можно освоить, как и любой другой. Для создания красивого сайта не обязательно родиться художником, нужно только попрактиковаться, хорошо так попрактиковаться. Эта статья расскажет о том, как практиковать дизайн через процесс создания персонального сайта с нуля и превращения его в код.

Зачем проектировать самостоятельно?

Зачем проектировать сайт самостоятельно, если можно использовать библиотеку пользовательского интерфейса, такую как Bootstrap или ещё лучше готовый шаблон? Ниже приведены некоторые из преимуществ самостоятельного дизайна вашего сайта.

1. Выделяться из общей массы

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

• Разработка поможет вам применить на практике алгоритмы, принципы разработки, инструменты, HTML и CSS. Вам будет удобнее разрабатывать пользовательские интерфейсы и выводить их в Интернет.

• Ваши веб-сайты будут легковесными и будут лучше работать с пользовательскими CSS. Если вам нужно включить библиотеку пользовательского интерфейса или шаблон, он может содержать большое количество кода, охватывающего различные возможные настройки, которые вы не используете. Если неиспользованный код будет отправлен пользователю, это негативно скажется на производительности вашего сайта.

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

• Создание того, чем вы гордитесь, — это полезный опыт. Это доставит удовольствие, если вы найдете достаточно времени для практики. Вам не обязательно быть художником, чтобы получать от этого удовлетворение.

Создание каркаса модели

Первый шаг — создание приблизительного каркаса сайта. Создание каркаса помогает определить структуру страницы до добавления визуального дизайна и контента. Каркас не обязательно должен быть красивым, он должен фокусироваться на компоновке контента. Вы можете нарисовать его вручную или воспользоваться основными функциями инструмента разработки. Чтобы создать каркас (прототип), я представляю дизайн как серию прямоугольников. Элементы веб-страницы представляют собой прямоугольные блоки, которые строятся сверху вниз. Начните с прямоугольников, для этого вам точно не потребуются никакие художественные таланты.

Структура веб-сайта

Элементы, которые вы добавлять в каркас, зависят от вас. Вы можете добавить панель навигации, заголовок, записи в блоге и нижний колонтитул. Для начала, возможно, вам не понадобятся все эти элементы, вы можете оставить их базовыми и добавить их позже. Решите, что вы хотите включить, и добавьте эти секции в ваш каркас. Если у вас возникли проблемы с этим шагом, вы можете просмотреть аналогичный веб-сайт, копировать структуру контента и модифицировать его в соответствии с вашими запросами.

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

Применяйте визуальный дизайн

Для преобразования приблизительного каркаса в конструкцию можно использовать бесплатный инструмент разработки, такой как графический редактор Figma. Если вы никогда не пользовались программой разработки, может потребоваться некоторое время, чтобы привыкнуть к ней, но вам не нужно быть в ней специалистом. Для начала достаточны основные функции, такие как добавление прямоугольников, изменение размера и настройка свойств.

Реализация макета

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

Добавление разделов и содержимого хранилища

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

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

Обновление графики

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

Добавьте цвет

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

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

Примером может служить установка темно-синего цвета для фона, затем использование более светлой версии того же синего цвета для текста. Для белых цветов фона можно использовать среднюю яркость синего для заголовков.

После того, как вы добавили цвет, переходите к обзору общего дизайна и внесению изменений.

Уточнение

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

— Выглядит тесновато?

• Увеличьте отступы и поля

• Выберите более четкий шрифт или увеличьте его размер
• Увеличьте цветовой контраст между фоном и передним планом

• Добавьте заголовки с более крупным шрифтом
• Добавьте больше интервалов между заголовками и абзацами

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

Как только вы закончите разработку дизайна, вы можете начать переводить его в код.

Создание HTML–структуры

• Разместите все HTML элементы на странице, пока не волнуйтесь о добавлении CSS.
• Это позволит вам увидеть естественный поток HTML документа и рамочную модель. Создание структуры страницы в HTML облегчит понимание того, что нужно добавить в CSS, чтобы разместить и стилизовать элементы в соответствии с дизайном.
• После создания HTML-кода перейдите к расстановке и стилизации с помощью CSS.

Стилизуйте его с помощью CSS

Поскольку HTML-документы добавляются сверху вниз, вы можете начать с верхней части документа и работать вниз. Используя созданный вами дизайн, постарайтесь скопировать его как можно ближе в HTML & CSS.

Помните, что это не должно быть по принципу «все или ничего», вы можете реализовать части, необходимые для начальной версии сайта. Для моего сайта мне было необходимо только введение, ссылки и способ размещения блогов, так что, это все, что я начал воплощать. Если вы не готовы к воплощению раздела, вы можете удалить его, пока не будете готовы.

Расположение секций и элементов

Я рекомендую сконцентрироваться на компоновке элементов и сохранить эстетические аспекты на более поздний срок. Если вы расставляете и стилизуете элементы одновременно, это может привести к метанию вперед и назад, что может приостановить ваш прогресс. Примером может служить раскладка навигационной панели при попытке задать тип и размеры шрифтов. Возможно, у вас все удобно скомпоновано, но затем настройка шрифта все сбрасывает. Это может заставить вас изменить панель навигации, чтобы она снова подошла по размеру. Но что если навигационная панель теперь слишком высокая? Вы можете изменять это несколько раз, что может привести к огорчению. Вместо этого я рекомендую в первую очередь сконцентрироваться на компоновке элементов и попытаться заставить их работать с различными размерами контента. Это может потребовать метод проб и ошибок в CSS, но чтобы убедиться, что ваши элементы имеют достаточную ширину, для удобного добавления в него содержимого.

При превращении макета в полноценный дизайн я предпочитаю думать о горизонтальных линиях, которые разрезают дизайн на секции сверху вниз. Навигационная панель наверху может быть первым кусочком. Вы можете сосредоточиться только на HTML и CSS, которые необходимы для навигации, не беспокоясь о разделах ниже. Внутри навигационной панели вертикальные фрагменты могут быть разделены на элементы, составляющие навигацию. Сосредоточьтесь на элементе, расположенном в крайнем левом углу, а затем следуйте направо. Когда навигационная панель будет установлена, перейдите к разделу под ней.

Добавьте визуальные стили

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

Сделайте его отзывчивым

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

Когда ваш проект реализован, все готово! Теперь вы можете решить, что хотите с ним делать.

Разработка красивого веб-сайта с нуля. Как создать веб-сайт

С Вами Виктор. Сегодня я хочу предоставить Вашему вниманию еще один интересный перевод с сайта //net.tutsplus.com/ . Данная статья Вам покажет как можно нарисовать красивый сайт, имея практически нулевые знания в программе Photoshop.

Автором данной статьи является Marko Prljic.

Вам захотелось создать красивый сайт, но Вы даже не представляете, как это делается? Хотите узнать, как создать веб-сайт? Честно говоря, несколько лет назад это и со мной произошло. Путешествуя по сети, я встречал множество красивых сайтов, и мне самому всегда хотелось уметь разрабатывать такой дизайн для сайтов. Сейчас я уже это умею и готов научить и Вас, как это сделать! В сущности, для этого требуются некоторые навыки работы в Photoshop и внимание к деталям. В этом руководстве я буду обращать внимание на те незначительные на первый взгляд детали, из которых складывается красивый дизайн сайта. Запускайте Photoshop и приступим к делу!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Автор: Marko Prljic

Редакция: Рог Виктор

Привет, меня зовут Марко, я веб-дизайнер из чудесной страны Хорватии. Я разрабатываю амбициозные, классно выглядящие, современные сайты. Также я пишу статьи для Themeforest и Graphicriver, и люблю писать разные руководства. В свободное от создания сайтов время я просто общаюсь со своими детьми или обдумываю очередной Большой Проект. О, как и все остальные, я веду блог на Twitter.

Шаг 1 – Скачайте 960 Grid System Template

Почти все дизайны я разрабатываю на основе блочной системы 960 Grid System. Поэтому нам сначала нужно скачать эти блочные шаблоны для Photoshop, которые можно найти на официальном сайте 960.gs. Просто распакуйте zip-архив и найдите в нем PSD-шаблоны. Вы увидите шаблоны двух типов: один – 12_col, второй – 16_col. Как видно по названию, отличаются они тем, что один состоит из 12 колонок, а другой из 16. Чтобы пояснить чуть точнее, допустим, что Ваш дизайн будет состоять из трех вертикальных блоков, тогда Вам нужно взять шаблон 12_col, так как 12 кратно 3. А если Ваш дизайн будет состоять из четырех вертикальных блоков, тогда Вы может брать в качестве шаблона как 12_col, так и 16_col, потому что и 12, и 16 кратно 4. Далее в руководстве мы рассмотрим это на примере.

Шаг 2 – Определяем структуру

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

Шаг 3

После того, как мы определились со структурой сайта, можно двигаться дальше. Откройте Ваш шаблон 16_col.psd. Перейдите в меню «Изображение» > «Размер холста» (Image > Canvas size). Установите размер 1200px по ширине и 1700px по высоте. Установите цвет фона #ffffff.

Шаг 4

Далее выберите инструмент «Прямоугольник» (Rectangle) и нарисуйте прямоугольник по всей ширине холста и высотой примерно 80px. Залейте его цветом #dddddd.

Шаг 5

Создайте новый слой над прямоугольной областью и установите для этого слоя режим «Перекрытие» (Overlay). При нажатой клавише Ctrl щелкните мышью по слою с прямоугольником. Он будет выделен. Выберите мягкую кисть (soft brush) толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке. Таким образом, Вы создадите красивый и легкий световой эффект. Кроме того, можно связать эти два слоя.

Шаг 6

Новый слой. Выберите снова инструмент «Прямоугольник» (Rectangle) и нарисуйте тонкий темно-серый прямоугольник, как показано на рисунке.

Шаг 7

Выбрав инструмент «Прямоугольник» (Rectangle), нарисуйте большой блок примерно на 500px ниже верхнего прямоугольника. Сделайте его высотой 575px и наложите на него линейный градиент в границах оттенков от #d2d2d0 до #ffffff, с углом -90° и масштабом 100%.

Шаг 8

Сейчас мы создадим такой же световой эффект, который описан в Шаге 5. Мы еще не раз будем использовать этот прием, поэтому в следующий раз я просто буду отсылать Вас к Шагу 5, где описан этот эффект.

Создайте новый слой над всеми текущими слоями. При нажатой клавише Ctrl щелкните мышью по большому прямоугольнику. Выберите мягкую кисть толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке.

Шаг 9

Создайте новый слой и нарисуйте большой прямоугольник высотой 400px. Он будет использоваться для шапки нашего сайта. Наложите на него красивый голубой градиент от оттенка #2787b7 до #258fcd.

»Видите, какой нежный переход оттенков?

Шаг 10

Добавьте темно-синюю линию толщиной 1px вдоль нижней границы шапки, наложите эффект тени (Drop shadow). Для наложения тени используйте режим Умножение (Multiply), непрозрачность (Opacity) 65%, угол (Angle) -90°, смещение (Distance) 1px, размер (Size) 6px. Далее создайте поверх новый слой и нарисуйте под синей линей еще одну линию толщиной 1px белого цвета. Таким образом, мы создадим отчетливую границу для нашего блока с основным контентом. В принципе, этот прием оформления границ Вы можете применять для каждого блока Вашего проекта, только с другими оттенками.

Шаг 11

Создайте новый слой и с помощью инструмента «Прямоугольник» (Rectangle) нарисуйте в верхней части холста прямоугольную область высотой 50px, как показано на рисунке. Она будет служить для панели навигации.

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

Шаг 12

Настало время заняться навигацией. Используйте инструмент «Прямоугольник с округленными углами» (Rounded Rectangle), установите радиус 5px. Нарисуйте прямоугольник, сделайте заливку цветом #f6a836 и наложите следующие эффекты:

— Внутренняя тень (Inner Shadow) – цвет: #ffffff, Режим: Перекрытие, Прозрачность: 60%, Угол: 120 °, Смещение: 7px, Размер: 6px.

— Внутреннее свечение (Inner glow) – Режим: Нормальный, цвет: #ffffff, Размер: 4px, остальные параметры оставьте по умолчанию.

— Обводка (Stroke) – Размер: 1px, Положение: Внутри, цвет: #ce7e01.

Теперь выделите этот прямоугольник с помощью Ctrl и щелчка мыши. Перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract), и введите в появившемся окне 1px.

Создайте сверху новый слой, установите режим «Перекрытие» (Overlay) и наложите эффект, описанный в Шаге 5, только в этот раз используя кисть меньшего размера. Далее добавьте текст для навигации. Я использовал для ссылок навигации шрифт Arial, все буквы заглавные и без сглаживания.

Шаг 13

Теперь давайте создадим поле поиска. С помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) с радиусом 5px создайте поле для поиска по правой стороне размеченной сетки шаблона, в середине верхней серой полосы, созданной на Шаге 4. Добавьте к слою следующие стили:

— Внутренняя тень (Inner Shadow) – цвет: #000000, Режим: Умножение (Multiply), Непрозрачность (Opacity): 9%, Угол (Angle): 90°, Смещение (Distance): 0px, Размер (Size): 6px.

— Обводка (Stroke) – Размер (Size): 1px, Положение: Внутри (Position: inside), цвет: #dfdfdf.

Я добавил текст «Search» и светло-серую кнопку «Go». Выглядеть это должно так.

К этому моменту у нас уже много слоев и необходимо их немного упорядочить. Для этого мы создадим новую Папку слоев и назовем ее «Search». Выделите все слои, из которых состоит поле для поиска, и просто перетащите их новую папку. В дальнейшем мы распределим по папкам и другие элементы, чтобы у нас была лаконичная, упорядоченная палитра слоев.

Шаг 14

Создайте новый слой и нарисуйте кнопку «Sign Up» точно так же, как мы нарисовали поле для поиска, только по ширине на половину меньше. Поместите ее под поисковым полем, по центру навигационного блока.

Снова создаем эффект, описанный в Шаге 5.

Используйте мягкую кисть меньшего размера. Я в данном случае выставил размер 45px.

Шаг 15

После добавления логотипа и подзаголовка наш сайт должен выглядеть вот так.

Шаг 16

Сейчас вернемся к упорядочению слоев, о котором мы упоминали выше. Создайте новую пустую папку слоев и назовите ее «top_bar». Переместите в нее все слои графики из верхней части шаблона (логотип, подзаголовок, поле поиска, кнопку регистрации, панель навигации и элементы фона).

Создайте еще одну пустую папку слоев и назовите ее «header». В нее мы переместим графику из шапки нашего шаблона. Вот так это должно выглядеть.

Шаг 17

Наша шапка пока выглядит несколько простовато, поэтому добавим к ней тот же световой эффект, который мы применяли к другим элементам сайта. Выделите блок шапки (тот, что голубого цвета). Создайте сверху новый пустой слой и установите для него режим «Перекрытие» (Overlay).

Выберите большую мягкую кисть размером 600px, цвет #ffffff, и нажмите несколько раз в области под навигационной панелью. Кроме того, для получения более глубокого эффекта мы можем переключить на черный цвет и сделать то же самое в нижней части шапки. Попробуйте!

Шаг 18

На этом шаге я объясню Вам, как я сделал отражение для изображений в шапке. Найдите пару изображений на свой выбор, я использовал скриншоты браузера Safari с изображениями двух других моих шаблонов. Уменьшите один из них и поместите под вторым, который больше. Создайте дубликат обоих слоев и с помощью инструмента «Свободное трансформирование» (Free Transform) переверните сначала одно изображение, затем второе. Сдвиньте оба изображения на несколько пикселей вниз. Теперь сделайте выделение снизу с внешней стороны до середины первого перевернутого изображения с помощью инструмента «Прямоугольная область» (Rectangular Marquee). Перейдите в меню «Выделение» > «Модификация» > «Растушевка» (Select > Modify > Feather) и в появившемся окне введите 30px или больше. У Вас должно получиться такое же выделение, как показано на рисунке. Нажмите несколько раз кнопку Delete, чтобы получилось красивое затененное отражение оригинального изображения. Повторите этот же шаг для второго изображения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Сейчас, чтобы сделать оба изображения немного выступающими, создайте новый слой и установите для него режим «Перекрытие» (Overlay). Наложите эффект, описанный в Шаге 5.

Вот так наша шапка должна выглядеть после добавления красивого заголовка и нескольких кнопок. Не забудьте сгруппировать все слои с графикой шапки в папку «header», чтобы сохранить порядок на палитре слоев ��

Шаг 19

Посмотрев на итоговое превью нашего дизайна, Вы заметите красивые вкладки в блоке с основным контентом. Для создания подобных вкладок нам необходимо будет выполнить еще несколько дополнительных шагов, но это определенно того стоит. Сперва с помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) нарисуйте большую прямоугольную фигуру высотой 70px и радиусом углов 10px или больше, если посчитаете нужным. Сейчас нам надо избавиться от нижних округленных углов и сделать их идеально прямыми. Выберите инструмент «Область (горизонтальная строка)» (Direct Selection) и установите его на границе фигуры. Щелкните по точке вертикальной оси и, удерживая клавишу Shift, оттяните ее вниз, пока она не достигнет уровня горизонтальной оси. Уже неплохо, но угол все еще деформированный. Заметен небольшой хвостик. Нажмите на него и сдвиньте вверх до уровня горизонтальной оси.

Мы сделали идеально прямой угол. Вот так это должно выглядеть. Теперь повторите этот шаг для правого нижнего угла.

Шаг 20

Выберите инструмент «Линия» (Line) толщиной 1px.

Шаг 21

Начертите разделители серого цвета, удерживая клавишу Shift.

Шаг 22

Разместите какие-нибудь иконки, заголовки и описание для каждой вкладки. Я использовал иконки Рэя Ченга, которые можно скачать с сайта WebAppers.com. Как правило, одна вкладка всегда активна, в то время как другие остаются неактивными. Чтобы это четко было видно в нашем дизайне, нам нужно найти способ это показать. Я обесцветил остальные иконки и уменьшил непрозрачность для заголовков и текста, оставив первую активную вкладку цветной и яркой.

Шаг 23

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

Вот так должно выглядеть выделение.

С помощью маленькой мягкой кисти создайте белый фон.

Шаг 24

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

Добавьте векторную маску (vector mask), нажав на маленькую иконку внизу палитры слоев.

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

Наконец, уделим внимание деталям. Начертите серую линию толщиной 1px вдоль нижней границы панели вкладок. Добавьте снова маску на слой, как описано выше, и большой мягкой кистью удалите края линии слева и справа. Теперь у нас есть красиво затененная линия, которая подчеркивает тень под нашими вкладками.

Вот так должны выглядеть наши вкладки.

Шаг 25

Пришло время заняться дизайном основного содержания нашей первой вкладки. Нам потребуются красиво оформленное изображение, симпатичный заголовок и какой-нибудь текст. Сначала займемся оформлением изображения. Мне показалось, что неплохо бы нарушить прямолинейность нашего дизайна созданием красивого эффекта сложенных в стопку фотографий. Чтобы этого добиться, нарисуйте белый прямоугольник с рамкой серого цвета и толщиной 1px, и наложите на него легкий эффект отбрасывания тени.

Далее сделайте дубликат слоя и поверните его на несколько градусов с помощью инструмента «Свободное трансформирование» (Free Transform). Повторите этот шаг еще раз.

Импортируйте подготовленное изображение и поместите его над белыми прямоугольниками. Не волнуйтесь, если изображение выходит за границы блока – мы это исправим. Выделите верхний прямоугольник, перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract) и в появившемся окне введите 5px. Выделив слой с изображением, нажмите иконку «Быстрая маска» (Quick Mask) внизу палитры слоев. У Вас получится эффект красивой картинки с рамкой, как показано на рисунке выше.

Вот так у Вас должен выглядеть порядок слоев.

Шаг 26

Не забывайте следить за порядком. Создайте папки слоев и распределите по ним слои на своей палитре. У меня это сделано вот таким образом.

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

И еще немного организации слоев.

Шаг 27

Я решил, что этот блок должен быть большим, поэтому я разместил его в большом поле сразу после главного блока. Сначала рисуем большой светло-серый прямоугольник высотой примерно 220px с рамкой серого цвета толщиной 1px.

Далее рисуем еще один прямоугольник, светлее и меньше предыдущего на 10px с каждой стороны. У него также должна быть светло-серая рамка толщиной 1px.

Добавляем какой-нибудь текст, и все готово!

Шаг 28

Теперь займемся нижним колонтитулом. Нарисуйте большой темно-серый прямоугольник высотой 400px.

Шаг 29

Наложите световой эффект точно так же, как мы описывали в Шаге 5.

Шаг 30

Далее начертим над колонтитулом прямоугольник высотой 10px и применим к нему легкий эффект, добавив две линии сверху и снизу, как показано на рисунке.

Шаг 31

Создайте самый нижний блок, в котором будет продублирована навигация. Можно скопировать верхний прямоугольный блок с навигацией, поместить его внизу и установить для него высоту около 40px. Поместите его в самом низу Вашего холста. Пожалуйста, имейте в виду, что Вам возможно потребуется расширить холст для этой цели, чтобы на нем уместилась вся графика. В этом случае откройте в меню «Изображение» > «Размер холста» (Image > Canvas size) и установите высоту, при которой весь проект умещается на холсте.

Шаг 32

Снова уделим внимание мелким деталям. Добавим белую линию толщиной 1px вдоль верхней границы нижнего блока навигации, придав тем самым красивый эффект для его рамки.

Шаг 33

Наполним колонтитул содержанием и красиво упорядочим его по нашей сетке.

Шаг 34

Напоследок распределите все Ваши слои по папкам. У меня это сделано так.

Дизайн

Вот такой дизайн у нас получился в итоге, с парой изменений для разных страниц. Готовые PSD-дизайны, конечно же, можно приобрести на сайте ThemeForest.net.

Пара слов в заключение

Надеюсь, Вам понравился этот урок, и Вы узнали несколько новых приемов. Теперь настала Ваша очередь создавать новые великолепные дизайны. Не забывайте, что уделяя особое внимание мелким деталям, Вы сможете проектировать красивые веб-сайты, используя всего два или три инструмента в Photoshop. Здорово, не правда ли?

Дизайн и код вашего первого сайта по шагам, простым и понятным

Nathan Umoh Dec 7, 2020 (Updated Apr 13, 2022)

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

В этом уроке мы сделаем дизайн и код нашего первого веб-сайта простым и лёгким способом. Урок рассчитан на новичков с надеждой дать вам инструменты для написания собственных сайтов согласно принятым стандартам! Начало новой недели; возможно, время получить новый навык!

Шаг 1. Что мы делаем

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

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

Что потребуется

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

• Photoshop или аналогичный редактор изображений
• Редактор кода (подробнее об этом позже)
• Базовое понимание того, как работает html, базовый синтаксис и теги. Для ускорения ознакомьтесь с официальным ресурсом w3 Schools, где вы найдёте все основы, необходимые для урока.
• Ditto для css, вы должны понимать, как работают селекторы и быть знакомы с основными свойствами. Опять же, смотрите лучший ресурс w3 Schools
• Очевидно, браузер. Я использую Firefox и вы, если хотите, чтобы ваш сайт повторял мои скриншоты на каждом шаге

Макет

Мы создадим очень простой веб-сайт с четырьмя основными элементами: header, content, sidebar и footer, макет будет выглядеть примерно так:

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

Шаг 3 — Начало работы

Откройте чистый новый документ Photoshop, скажем, 1000px на 1200px. Мы всегда сможем его подрезать. Я делаю его довольно узким, потому что работаю на ноутбуке, но вы не стесняйтесь, если место позволяет.

Здесь я не буду спорить о разрешениях экрана и оптимальной ширине сайта. Вам нужно знать, что content нашей страницы будет шириной 800 пикселей, и всё. Итак, в нашем документе шириной 1000px мы будем перетаскивать направляющие по меткам 100 и 900px, чтобы установить ширину. У нашего дизайна есть sidebar и я решила сделать её на треть ширины страницы. Две трети от 800 составляет около 530, поэтому давайте добавим еще одну направляющую на 630px. Установим приятный цвет фона # ebe8e8.

Шаг 4 — Header

Возьмите инструмент rectangle и нарисуйте большой голубой прямоугольник в верхней части документа, мой — высоты около 170px , а цвет — 23b6eb. Затем нарисуем худенький тёмно-серый bar в самой верхней части страницы, я использовал # 5d5a5a

Шаг 5 — Highlight

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

Теперь слегка нажмите кончиком кисти прямо под панелью, вокруг центра документа. Старайтесь не допустить, чтобы более светлый цвет достиг края страницы (будет понятно позже). И установите режим смешивания на screen.

Шаг 6 — Navigation Bar

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

На панели стилей слоев добавьте градиент от # e2e3e4 до #bebdbd на 90 градусов.

Шаг 7 — Footer

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

Step 8 — Logo

Задний план

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

Затем добавьте стили слоя: наложение градиента и 1px штрих: градиент от # aec457 до # cdf399

Текст

Теперь текст: большой и полужирный.

• Шрифт: Myriad Pro
• Стиль: Bold
• Размер: 60px
• Цвет: #36809a

Для придания глубины добавьте внутреннюю тень:

Step 9 — Слоган

Затем я просто добавила короткую строку:

• Font: Arial
• Style: Bold
• Size: 30pt
• Color: #e4dfdf

Шаг 10 — Навигация

Пишите ссылки хорошо и крупно, расставьте и разместите их равномерно.

• Font: Arial
• Style: Bold
• Size: 30pt
• Color: #676666

Шаг 11 — Основное содержимое

Время вставлять макет контента. Я использовала размер заголовка h2, а меньший будет h3 ссылкой на html ipsum.

Сделайте текстовые поля шириной около 2/3 страницы. Стили текста:

• Font: Arial
• Style: Bold
• Size: 36pt
• Color: #0e5d7a

• Font: Arial
• Style: Bold
• Size: 24pt
• Color: #444444

• Font: Arial
• Style: Normal
• Size: 14pt
• Color: #595858

Данные в разделе «latest updates» будут помещены в маленький тег, шрифт такой же, как в абзаце, но 12pt. Я дважды копирую новость из лени.

Step 12 — Sidebar

Ссылки

Затем нарисуем тощий прямоугольник над областью sidebar, цвет # d4d6d3, с 1px строкой #bebdbd

Заполните sidebar фиктивным контентом с иконками, которые я тут использовала. Шрифты такие:

• Font: Arial
• Style: Normal
• Size: 24pt
• Color: #044055

• Font: Arial
• Style: Normal
• Size: 18/14pt
• Color: #373737

Кнопка

Затем мы добавим кнопку «join our team» под ссылками участников. Кнопка — просто прямоугольник с градиентом, что и у логотипа и строкой 1px цвет c7c7c7. Для текста:

• Font: Arial
• Style: Normal
• Size: 24pt
• Color: #434343

Шаг 13 — Footer

Заканчивая макет, добавьте немного фиктивного текста или что хотите, к нижнему колонтитулу. Шрифт:

• Font: Arial
• Style: Normal
• Size: 14pt
• Color: #e0e2e2

С дизайном страницы всё, ничего особенного, но его простота поможет вам следовать за остальной частью процесса.

Нарезка PSD

Теперь, когда у нас есть прекрасный PSD, пришло время разбить его на части, которые будем использовать. Идея здесь в том, чтобы использовать как можно меньше изображений как можно меньшего размера. Okay, начнём с header. Мы хотим растянуть его на весь экран, независимо от его ширины. Для этого мы собираемся вырезать маленький кусочек header и повторять его по экрану, сколько понадобится.

Шаг 14 — The Slice Tool

Может, вам не приходилось использовать slice tool раньше, но это действительно очень просто. Это позволяет вам нарезать файл в крошечные кусочки, которые можно экспортировать в Интернете.

Header

Итак, давайте вырежем небольшой кусочек нашего header. Нажмите и перетащите, чтобы создать срез так же, как инструмент прямоугольной области выделения. Будьте осторожны, чтобы не срезать со стороны изображения, а то не получите ни одного highlight.

Теперь, когда у нас есть эта полоска, мы можем повторить её по оси X. Однако highlighted область не повторяется, поэтому мы должны всё это вырезать . Нарежьте часть header между двумя направляющими, на ширину заявленных 800px .

Footer

Для нарезки footer повторите тот же процесс с узким фрагментом footer.

Всё остальное

Нам понадобятся несколько изображений: иконки «subscribe» и кнопка «join our team».

Поскольку значки и логотип имеют неправильную форму, мы сохраним их как прозрачные .png-файлы, поэтому мы вернемся и возьмём их отдельно.

Итак, чтобы нарезать кнопку, мы можем использовать ту же технику, что с header и footer, но на этот раз нам нужен только один тонкий срез. Когда делаете срез, не забудьте включить 1px строку (добавим позже), вам может понадобиться увеличить масштаб.

Шаг 15 — Экспорт в интернет

Теперь, когда у нас есть снимки, давайте сохраним их как оптимизированные jpeg и поместим их в нужное место.

Перейдите в меню File/Save for web и устройств . В появившемся окне, удерживая клавишу shift, щёлкните, чтобы выбрать каждый фрагмент (опять же, можете увеличить масштаб). Убедитесь, что в раскрывающемся меню «preset» установлено значение JPEG-High, снимите флажок «convert to srgb» и нажмите «save»

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

Убедитесь, что установлено значение «images only», «default settings» и «selected slices only.»

Затем проверьте место, где были сохранены ваши файлы. Вместо поиска отдельных images, найдите папку, помеченную «images», где будут все ваши изображения. Компьютер даст каждому изображению номер, который не очень нужен. Убедитесь, что у вас правильные изображения, затем назовите их соответствующим образом.

Теперь вернёмся к этим надоедливым иконкам и логотипу. Обязательно скройте слои фона, затем снова вытащите slice tool и вырежьте красивые квадратики вокруг каждого значка и логотипа.

Теперь мы проходим ту же процедуру экспорта в web, что и в случае с jpeg, только на этот раз обязательно выберите PNG-24 из выпадающего меню «preset» и отметьте флажком «transparency». Переименуйте и эти файлы и папка с изображениями будет выглядеть примерно так:

Вот и всё, мы закончили работу над нашим PSD и у нас есть все нужные изображения. Пока не закрывайте Photoshop, нам всё равно нужно выбирать цвета, шрифты, размеры и прочее.

Часть 3 — HTML

Шаг 16 — Начало работы

Хорошо, займёмся html. Первое, что вам понадобится, это какой-нибудь редактор кода. Это из области личных предпочтений,
Но я рекомендую начать с бесплатного. Для Mac и ПК я настоятельно рекомендую Komodo в качестве первого редактора кода. Он имеет множество функций, которые идеально подходят для любых пользователей.
Одна из лучших особенностей — синтаксическая проверка, похожая на проверку правописания в текстовых процессорах, она выявит и объяснит небольшие ошибки.
Для ПК есть гораздо больше опций, ни одна из которых мне не знакома, но есть статья Andrew Burgess 22 Neat Code Editors for Windows

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

Шаг 17 — Настройка папок

Во-первых, нам нужно создать место хранения всех файлов, связанных с нашим сайтом. Создайте папку сайта, моя называется «MySite», внутри этой папки создайте другую папку, содержащую только что вырезанные изображения.
Назовите её «images». Теперь мы открываем редактор кода, эта часть будет зависеть от того, какой software вы используете:
Если это Komodo, выберите «create new project» и сохраните/переместите файл .kpf в папку «MySite» . Когда вы открываете файл, браузер файлов от Komodo должен отображать содержимое папки.
Затем щёлкните правой кнопкой мыши на файле проекта и выберите «add» и «new file». В появившемся окне выберите «html (xhtml)» и назовите файл «index.html».

Если у вас другой редактор, процесс будет схожим, но основные моменты остаются теми же: вам нужно создать файл index.html, и он должен находиться в папке «MySite» вместе с папкой с изображениями.

Шаг 18 — Настройка файла index.html

Первое, что нам нужно сделать, это объявить тип документа, кодировку символов и создать <html> теги. Во многих редакторах это должно выглядеть примерно так:

Между тегами html нам нужен раздел «head», который содержит всю важную информацию о сайте, которая не отображается внутри body сайта.
На этом этапе всё его содержимое, это заголовок страницы, например:

Ниже head, логически, мы добавляем body, также заключённое в <html> тегах . Хорошо, теперь мы имеем:

Это базовая настройка страницы, вы можете сохранить этот штамп для будущего использования.
Помните, мы говорили, что у нас есть разделы header, content, sidebar и footer?
Хорошо, теперь каждый из них будет заключён в свой <div> и ему будет присвоен соответствующий id.

ПРИМЕЧАНИЕ. Хорошо бы, особенно при первом запуске, добавлять комментарии в каждом </div>, чтобы отслеживать иерархию.

Теперь давайте еще раз взглянем на наш psd — мы хотим, чтобы срезы footer и header бесконечно повторялись по сторонам?
Нам понадобится способ растянуть эти элементы, но в то же время чтобы основной контент («content» «sidebar»)
оставался в пределах заданной ширины в центре экрана.

Чтобы справиться с этим, нам нужен большой div, содержащий расширяющиеся элементы, и div под основное содержимое.
Мы должны заметить, что текст footer также центрирован, поэтому нам нужно повторить тот же процесс для footer.
Чтобы сделать это, нам нужно обернуть несколько divs теми, которые у нас уже есть. У нас есть два основных раздела, main section и footer .
Каждый из них будет содержаться внутри одного большого неуправляемого div неопределённой ширины,
и содержимое каждого из них будет заключено в отдельные div, которые определяют ширину и центрирование.

Мы хотим использовать те же правила для main и footer содержимого, поэтому вместо (или в дополнение к) id’s они будут иметь определённые классы,
что означает, что вы можете создать набор правил для определения всех div с тем же классом.

Таким образом, основное содержимое будет заключено в div с id «main» а нижний колонтитул будет заключен в div с id «footer.» Вот схема для наглядности:

И разметка будет выглядеть так:

Теперь мы обернём каждый раздел в контейнере div классом «container.»

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

Шаг 19 — Добавление содержимого

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

Header

На самом верху находится header, и внутри него у нас есть 3 основных элемента: логотип, слоган и меню навигации.
Итак, давайте создадим div для нашего header и чтобы всё было чисто, поместим логотип и tagline в свои собственные div.

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

Для навигации стандартом является размещение элементов меню в unordered list, причём каждый элемент списка содержит тег привязки.
Итак, мы имеем:

ПРИМЕЧАНИЕ: значение «href» в тегах привязки обычно указывает на ссылку, но в этом случае символ фунта означает «link to top of page.»

Основное содержимое

Глядя на main content область, у нас есть 4 разных стиля: большой заголовок сверху, меньший,
и ещё меньший заголовок для новостей, плюс несколько абзацев и небольшие сообщения новостей.
Мы будем называть их <h2>, <h3>, <h4>, <p> и <small> соответственно. Теперь это просто вопрос вставки в ваш контент, что не очень весело, но довольно легко.

Я добавлю теги привязки со значением «Read More» в конце каждого сообщения.

Sidebar

Возьмёмся за sidebar. Боковая панель имеет три элемента, каждый из которых будет обёрнут в свой собственный div.
Каждый div будет содержать <h3> header и unordered list и каждый элемент списка будет содержать тег привязки.
Итак, начните копировать и вставлять текст, он должен выглядеть примерно так:

Footer

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

Давайте посмотрим по разметке:

приятно смотрится, нет? Да, не совсем. Но содержит всю необходимую нам информацию и готов к назначению стилей.

Часть четыре — CSS

Шаг 20 — Добавление CSS

Вот здесь и происходит волшебство.
Создайте в папке сайта новый файл «style.css».
Теперь нам нужно указать браузеру, что этот файл css принадлежит нашему index.html-файлу, поэтому мы связываем его тегом «link href». Поместите эту строку кода в раздел <head> под заголовком.

Теперь html-файл может получить доступ к вашему css-файлу, поэтому любые изменения, внесенные в css, повлияют на html-файл.

Шаг 21 — Основная очистка

На нашем сайте есть пара уродливых вещей, которые мы можем исправить сразу: мы хотим изменить шрифт по умолчанию, мы хотим, чтобы контент был 800px ширины и центрированным и мы хотим избавиться от всех этих пробелов между элементами.

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

Далее определим ширину и поля нашего класса «container» .

свойство margin: 0 auto является сокращением, означающим, что в верхней части нет поля и что он будет автоматически центрирован по горизонтали.
Теперь посмотрите.

Намного лучше. Следующий шаг попортит внешний вид, но держитесь за мной.

CSS reset

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

Чтобы избавиться от всех этих грязных полей, мы сделаем очень простой сброс css, всего лишь правило, которое очистит от заполнения по умолчанию padding и margins. Поместите это в начало вашего файла css:

теперь давайте посмотрим:

Шаг 22 — Header

Ладно, всё собрано и готово к нашим манипуляциям! Начинаем добавлять собственные стили, опять же, сверху вниз.
Давайте сначала разберем сложную часть: настройку фоновых изображений для header.

Мы будем играть с повторяющимся обрезком из header. Повторяющееся изображение будет находиться внутри «main» div неопределённой ширины. Нам нужно сообщить браузеру, где находится изображение, и что с ним делать (повторить, не повторить), поэтому мы используем свойство «background» и указываем путь к изображению или ‘url’: в нашем случае оно находится в папке images, поэтому пишем:

и уточняем, чтобы он повторялся по оси x:

удивительно, правда? Попробуйте растянуть ваш браузер, он просто тянется и тянется . Но мы всё ещё не видим выделения на синей полосе и поскольку мы вырезаем часть заголовка размером 800px, мы можем поместить её в наш «container» div. Проблема в том, что у нас их две (одна для main div, одна для footer), поэтому нам нужно указать, чтобы div с классом «container» находился внутри div с id «main»
установить изображение так же, как и раньше, но на этот раз нам нужно указать «no-repeat»:

отлично! Выделение сидит именно там, где мы этого хотим, и вписываемся в повторяющиеся стороны.

Шаг 23 — Замена изображения логотипа

Наш логотип довольно сложный, правда? У нас фоновое изображение и не-html-шрифт с внутренней тенью. Мы не можем сделать это в css, поэтому мы должны заменить текст на изображение.
«Почему бы просто не поместить изображение вместо строки <h1>»?
можете вы спросить. Ну, в Интернете <h1> header — это в основном «имя» вашей страницы, и важные, мощные роботы (google) сканируют это свойство при поиске ключевых слов. Если у вас нет <h1> header, ваш сайт можно назвать kalamazoo, но он не появится в поиске точно этого слова.
Существуют и другие методы, которые имеют свои преимущества (см. here, особенно технику № 8), но этот наиболее подходящий в этой ситуации.

Поэтому, решая проблему, мы используем хитрость под названием «замена образа», чтобы использовать изображение, сохраняя <h1> header в разметке. Добавим изображение в качестве фона в #logo div.

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

Лучше, но у нас по-прежнему есть оригинальный <h1> текст, но мы можем это исправить! Всё, что нужно, это установить значение text-indent на что-то смешное, например -9999px вне страницы, так что никто не увидит её, кроме роботов поисковой системы.

Теперь посмотрим, наш логотип с радостью сидит там, где был <h1> текст. Но это всё выглядит довольно плохо, всё теснится наверху. Когда мы хотим переместить элемент из его исходного положения на страницу, мы можем использовать свойства padding и margin. Мы собираемся попробовать оба,чтобы увидеть разницу

Во-первых, попробуем добавить margin в начало тега h1. Мы узнаем, как много можно сделать с помощью линейки в Photoshop.

Oops! Мы переместили логотип, но вместе со страницей! Попробуем вместо этого отредактировать padding :

Теперь взгляните, эта чёртова штука вернулась туда, откуда взялась! Это связано с тем, что свойство margin перемещает весь элемент, но padding перемещают только содержимое элемента, оставляя фон на своём месте. Таким образом, если бы экран был, скажем, шириной 19999px, мы бы увидели, что наш <h1> header опустился на 40px, но это не то, к чему мы стремились.

Итак, чтобы переместить фоновое изображение логотипа, нам нужно переместить div над ним, потому что весь div-логотип является «content» заголовка div. попробуем:

Намного лучше! Теперь логотип выглядит так же, как в PSD, в нужном месте. Если бы мы могли исправить этот слоган .

Шаг 24 — Плавающий слоган

Итак, теперь нам нужно найти способ вытащить этот слоган к логотипу. Проблема в том, что элементы html располагаются вертикально, подталкивая друг друга вверх и вниз по странице.
У нас есть несколько вариантов поправок, но я собираюсь использовать float, которые немного сложны, но очень полезны, когда они есть.

Okay, что за float? Ну, это сложно. В основном, когда вы указываете элементу ‘float’, он прикрепляется к стороне страницы или элемента, а также вынимает его из обычного «потока» страницы. Задумались? Давайте покажу.

Ну, как вы видите, нам удалось вывести слоган в сторону, но вместе с меню навигации.
Я думаю об этом так: нормальный элемент (например, div или h1 header или изображение), даже если он совсем маленький, незаметно занимает всё пространство сбоку от него, как одна большая длинная горизонтальная планка.

Вот почему все остальные элементы остаются под ним, вместо того, чтобы уживаться рядом. Когда вы float элемент, вы убираете всё дополнительное пространство в сторону и ограничиваете его только тем местом, которое оно занимает непосредственно, позволяя другим элементам обтекать его.
Теперь, когда вы знаете, как работают floats, как мы можем исправить нынешнюю ситуацию? Во-первых, мы должны изолировать слоган в свой собственный float, так чтобы он лежал вне обычного «потока» страницы:

Посмотрите в браузере и посмотрите на это, мы сделали хуже. Теперь пункты меню обернулись вокруг нашего слогана! Нам нужно восстановить нормальный поток документа после floated элементов. Есть несколько способов, но мы используем самый прямой метод. Вернитесь в свой файл index.html и добавьте новый div под нашими floated div. Вместо класса или id к этому div, мы собираемся назначить ему стиль (да, это встроенный стиль, но только очень маленький) clear: both.

Сохраните свой html-файл и проверьте в браузере: вы должны увидеть слоган рядом с логотипом, а меню ниже. Теперь нам осталось превратить этот слоган в форму и поместить туда, где ему надлежит быть. Начнем с копирования стилей шрифтов из Photoshop:

и добавьте немного padding сверху и слева:

посмотрите: мы куда-то продвинулись!

Шаг 25 — Панель навигации

Теперь нам нужно расположить меню навигации по прямой. Во-первых, определим стиль шрифта, чтобы соответственно всё расположить. Когда вы набираете шрифт в списке тегов, вам нужно указать не только элементы списка, но и anchors внутри них. Мы указываем наш конкретный unordered list, чтобы справиться с другими отдельно. Нам также нужно избавиться от подчеркиваний и bullet points.

Отлично, теперь нам нужно найти способ поставить все наши ссылки подряд. Как? Больше Floats! Мы собираемся сместить элементы списка влево, чтобы каждый элемент прилипал к тому, который находится рядом с ним.

Если вы посмотрите в браузере, заметите ту же самую проблему, с которой мы сталкивались ранее с floated элементами: другие элементы обтекают их. Как и раньше, мы можем вставить наш clearing div сразу после unordered list.

Все элементы списка теперь должны быть в строке, мы просто должны выделить их и немного сдвинуть меню. Измерив расстояние от нижней части логотипа до верхней части текста меню, мы получаем около 55px.
Первый элемент около 30px слева от направляющей, поэтому установим заполнение элемента списка в 30px слева.

Нам нужно больше пространства между элементами, если мы измерить в psd, это около 105px, но поскольку у нас уже есть 30px padding между ними, нам нужно только добавить 75px padding справа от каждого элемента.

Полюбуйтесь нашей работой:

Отлично! Наше меню такое же, как в psd. Переходим к content!

Шаг 26 — Content

Верхняя область

Первое — установим все шрифты, чтобы видеть интервал, с которым надо работать. Подключите информацию о шрифтах из Photoshop:

Получим нечто подобное:

Вы можете заметить, что мы ещё не установили фоновый цвет для области содержимого. Это потому. Я забыла. Тогда сделаем сейчас, так?

Хорошо, теперь мы готовы добавить padding к пространству снаружи.
Во-первых, расстояние от нижней части nav menu до верхней части заголовка h2 составляет около 25px:

Затем расстояние от нижней части заголовка h2 до верхнего края заголовка h3 также составляет около 25px, поэтому повторите в основном тот же код:

Теперь расстояние от нижней части заголовка h3 до вершины первого абзаца составляет около 45px, но если мы установим padding-top до 40px, мы получим 40px padding между этими абзацами. Так как параграфы расположены друг от друга только на расстоянии 20px, нам нужно разбить padding сверху и снизу: добавьте 20px padding к нижней части заголовка h3 и 20px padding в начало абзаца.

Новая секция

Расстояние между разделами немного отличается в разделе новостей, в первую очередь, нам нужно немного сжать его. Также слишком много padding под заголовком h3, так что немного сократим.
Нам также нужно уменьшить padding над параграфами и добавить padding между двумя новостями.

Будет выглядеть так:

Теперь нам нужно получить sidebar в стороне и мы закончим основной контент.

Шаг 27 — Располагаем Sidebar

Во-первых, нужно установить ширину секции контента:

Теперь, чтобы получить там sidebar, мы снова будем использовать float, устанавливая и область содержимого, и боковую панель влево.

В своём браузере вы заметите, что текст footer обернулся вокруг sidebar. Мы знаем, как справиться с этой проблемой: просто нужно добавить наш небольшой clearing div в разметку:

Хорошо, следующий шаг — просто скопировать стили шрифта из нашего psd для sidebar:

Помните, что для стиля шрифта ссылок в unordered list, нам нужно обратиться к anchor тегу, а не к самому элементу списка.
Теперь, если мы посмотрим на наш psd, заметим, что текст для элементов списка в виджете «subscribe» немного больше, чем в остальной части sidebar. Для исправления нам нужно настроить таргетинг на конкретный unordered list, поэтому добавим значение id в subscribe ul в нашей разметке:

Тогда мы можем обратиться к ней в css:

Теперь делаем стиль sidebar: добавьте отступы, поля, фон и границы. Сначала давайте избавимся от bullets:

ОК, пока ещё всё не в том месте, поэтому давайте исправим это, добавив margins вверх и влево. Измеряя в вашем psd, измерьте, где начинается граница sidebar .

Теперь для фона: под свойством margin-top добавьте свойства background и border:

Затем мы добавим 15 px padding со всех сторон:

А затем добавим padding в стили текста, чтобы выделить наше меню:

Наш sidebar уже выглядит почти идеально, нам просто нужно добавить значки в разделе подписки и создать тег «join us» .

Хорошо, поработаем с иконками. Добавление изображений в unordered list может показаться запутанным, но если вы делаете шаг за шагом, толк будет. Но это немного утомительно.
Для начала нам нужно оставить места для значков. Мы установим их как фоновые изображения, поэтому, если мы используем свойство padding для перемещения элементов списка по битам, они не будут затронуты. Значки около 26px в ширину, поэтому мы добавим padding слева от элементов списка:

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

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

В этот момент мне пришло в голову, что, возможно, 18px многовато для ссылок, поэтому я уменьшила его до менее драматичных 16px, что позволило мне добавить немного padding левого края, не растягивая sidebar.

Наш маленький sidebar почти завершён! Теперь к стилю кнопки:

Нужно настроить target на кнопку, поэтому давайте добавим класс к разметке: (на этот раз вместо id будет класс, что является обычной практикой, поскольку мы могли гипотетически добавить ещё несколько кнопок)

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

как видите, фоновое изображение есть, но оно появляется только за текстом, мы должны дать ему пространство. Во-первых, дадим margin, чтобы он оказался в центре sidebar:

и некоторый padding с каждой стороны, так чтобы наша кнопка разместилась:

Это короткий способ записи свойств padding и он полностью приемлем, поскольку экономит место. В этом случае он определяет 13px padding в верхней и нижней части и 23px padding слева и справа.

кнопка отлично выглядит, но, к сожалению! Переместилась вправо на 23px, так что давайте немного уменьшим margin для компенсации:

Теперь давайте дадим ей немного места, добавив padding ко всему sidebar div:

Вот опять свойство краткости: в таком порядке: сверху, слева, снизу, справа. Так что здесь написано 15px со всех сторон, кроме нижней, которая должна быть 30px.

Наконец, нужно добавить границу 1px к классу кнопок:

И вот он, наш sidebar!

Шаг 28 — Footer

И последнее, не менее важное: наш простой маленький footer. Мы установим footer так же, как мы установили header:
Использование повторяющегося фрагмента в пределах div неуказанной ширины, а затем добавления содержимого внутри фиксированного по ширине, центрированного div.
Здесь нам пригодится .container div, потому что нам не нужно указывать 800px или margin: auto на этот раз, потому что это уже сделано.
Начнем с повторяющегося фрагмента:

Это начало, но оно действительно крошечное. Давайте добавим padding и сделаем текст белым:

Шаг 29 — Маленькие изменения

В браузере вещи выглядят немного иначе, чем в Photoshop, поэтому мы могли бы внести небольшие изменения. Например, я хотела бы немного больше padding над основным контентом и sidebar. Мы добавим его в низ меню.

Я также решила сдвинуть меню влево, поэтому я собираюсь удалить padding-left. Теперь элементы расположены плотнее, потому что у нас есть padding из 75px справа и 30px слева, в общей сложности 105. Теперь, когда мы убрали левый padding,нам нужно добавить его справа, чтобы убрать разницу:

Итак, дальше . подожди? Что? Мы закончили?
Мы закончили!

Теперь небольшая уборка: Validation.

Шаг 30 — Проверка

Теперь validation является решающим шагом в дизайне веб-сайта, я не буду вдаваться в бесконечные причины этого, потому что this article сделает это лучше. Я собираюсь пройти этот процесс:

HTML Validation

Перейдите в w3.org Validation Service, выберите подтверждение по загрузке файла, выберите файл index.html и нажмите «check.»
Дальше. Момент истины:

RED (Red плохо!)

Не волнуйся, всё не так плохо; посмотрим, что пошло не так:
похоже, что есть одна ошибка:

Они поймали меня на одном и том же id tag дважды, что может вызвать серьёзную путаницу. Поскольку у нас есть много стилей, определенных для ul с идентификатором «subscribe», мы просто изменим имя div: назовем его «feeds»,
Теперь надо проверить, что не определили какие-либо стили для #subscribe, а у нас их нет!
Для подстраховки давайте перезагрузим нашу страницу, чтобы избежать непреднамеренных изменений.
Выглядит хорошо! Проведём validation снова:

Успешно! Наша страница с правильным XHTML. Вы даже можете загрузить значок, если хотите похвастаться.

Примечание: я приятно удивилась, обнаружив только одну ошибку, если вам не повезло, прочитайте предлагаемую информацию в w3 shcools или прочтите this article by Glen Stansberry.

Кажется, мы закончили! Ах, если бы всё было так просто. Нам ещё нужно проверить CSS!

CSS Validation

Перейдите к The w3 CSS Validator и выполните тот же процесс, что и с html, только на этот раз выберите файл style.css. Проверяем.

Однако мы получили пару предупреждений. Чтобы оставаться в пределах благосклонности церкви, мы должны обратить на них внимание:

Это всего лишь несколько небольших проблем: мы должны были объявить ширину для всех наших floated items. Опять же, эти предложения не являются обязательными, но лучше всего прислушиваться к конструктивной критике.
Очистка: элементы слогана, меню unordered list и sidebar должны иметь ширину. Мы хотим это сделать, не изменяя внешний вид страницы.
Сначала слоган. Мы можем только грубо догадаться, что это около 400px в ширину.

И перезагрузка: без изменений, отлично. Дальше, элементы menu list. Это немного сложнее: наша страница шириной 800px, так что это максимальная общая ширина элементов списка. Если разделить на четыре и задать ширину 200px, элементы будут перемешаны и отобразятся по вертикали. Это потому, что у нас есть padding по обеим сторонам каждого элемента списка: 30px слева и 75px справа. Вычтите 105 из 200, оставшаяся ширина равна 95px.

То же самое с sidebar: давайте сначала посмотрим на ширину области содержимого: 510px. Остаток на странице от 800px составляет 290px, но сначала нам нужно вычесть все отступы слева и справа: 290-30 = 260. Затем вычитаем левое поле, и мы остаемся с 205px. Ещё одно: наша граница 1px, поэтому давайте вычтем ещё 2px и установим ширину sidebar 203px. Проверьте снова, без изменений.

Отлично, проверяем ещё раз, ошибок нет, даже предупреждений!
Наша веб-страница, насколько это касается стандартов w3c, совершенна.

Заключение

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