Как оформить сайт в html

 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

 MySite 

 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

 MySite 

 id="header"> 

 id="content"> 

 id="sidebar"> 

 id="footer"> 

, чтобы отслеживать иерархию.

Теперь давайте еще раз взглянем на наш 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.» Вот схема для наглядности:

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

 id="main"> 

Как сделать правильную главную страницу сайта

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

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

Основная цель главной страницы сайта

Главная страница сайта — своеобразная визитная карточка интернет-ресурса, на которой должна быть изложена важная информация для клиента: сведения о компании, контактные данные, предложения и преимущества. Таким образом, к основным целям главной страницы относятся: презентация компании, привлечение аудитории и представление возможных услуг и/или товаров.

Виды главных страниц

Наполнение главной страницы непосредственно зависит от направленности сайта (продажа товаров, предоставление услуг, раскрутка бренда, блог, изложение информации и т. д.). Соответственно, существует множество видов главных страниц. Рассмотрим основные виды.

Главная страница интернет-магазина

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

• каталог товаров (в котором товар разветвляется за счет фильтров: «цена», «бренд», «материал», «сезон» и т. д.)
• сами товары (чаще всего представляются Топ-товары или Топ-объявления, по несколько представителей из каждой рубрики)
• акционные предложения (скидки, уцененный товар, несколько вещей по цене одной и т. д.)
• контакты для заказа и покупки (ссылка на бланк заказа, номера телефонов)
• адрес (чаще всего указывается адрес главного офиса)

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

Важно!

Читайте мега гайд о продвижении сайта интернет-магазина и тренды e-commerce. Рассмотрены все каналы привлечения трафика.

Главная страница сайта услуг

Второй по популярности вид Интернет-ресурсов — сайт услуг. Он рассчитан на презентацию списка услуг и всевозможных преимуществ компании-исполнителя. Здесь главная страница должна содержать такие блоки:

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

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

Главная страница сайта продукта

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

• детальное описание продукта
• сведения о компании (если сайт продукта это отдельный проект полноценного интернет-магазина, стоит также предоставить ссылку на главный ресурс)
• прайс основного интернет-ресурса
• контактные данные
• четко выделенный призыв к действию «Купить» или «Заказать»
• несколько фотографий продукта
• видео-обзор продукта
• отзывы о товаре
• акционные предложения

Что должно быть на любой главной?

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

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

Заголовок и текст

Создавая текст для главной страницы, важно учитывать такие факторы:

• читабельность (структурированность, грамотность, лаконичность, например, слишком длинные предложения утомляют читателя);
• отсутствие бесполезной информации (читателю должно быть интересно: пишем о главном);
• актуальность информации (сайт должен быть живым — последняя запись 2013 года не будет способствовать появлению интереса);
• преимущество товара/услуги; наличие перелинковки (ссылок на другие страницы сайта).

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

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

• заголовок-вопрос
• заголовок-лозунг
• заголовок-заявление
• информационный заголовок
• креативный заголовок
• заголовок-цитата

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

Контактные данные, формы обратной связи

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

Призыв к действию и возможность легкого выполнения действия

Любой сайт должен иметь ярко выделенную кнопку и короткое описание определенного действия: «просмотреть текст», «купить часы», «открыть вкладку». Такой призыв к действию должен быть убедительным и подталкивающим, например «чтобы ознакомиться с инструкцией, перейдите по ссылке».
Главная задача здесь — вызвать желание у клиента осуществить целевое действие. Текст на кнопке должен быть коротким и максимально информативным (желательно ограничится несколькими словами).

Удобный и понятный дизайн, хорошее юзабилити

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

Главное правило хорошего дизайна — «Дизайн не должен отвлекать клиента». Главной его задачей является оптимизация материала и функций сайта. Чтобы определится, какой дизайн лучше, важно четко определить целевую аудиторию.

Логотип

Именно логотип первым должен отвечать на вопрос гостя: «Что это за сайт?». Кроме того, его используют в качестве навигационной основы, с помощью которой юзер в любой момент может вернуться на главную страницу. Он размещается в верхнем углу страницы, реже по центру.

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

Навигация

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

Шапка с логотипом и футер с технической информацией

Первое, что мы делаем, создавая страницу, — оформляем «шапку» и «подвал» (футер) ресурса. «Шапка» может содержать логотип компании, контактную информацию, меню. Многие забывают о «подвале», то есть нижней части, а зря! Дело в том, что многие посетители, прочитав весь текст, само собой опускаются вниз страницы, в надежде просмотреть еще что-то интересное или просто оценить веб-сайт. Поэтому, мы советуем поместить в футер (подвал) тематические и полезные ссылки, которые могут пригодиться посетителю.

Хорошая цветовая гамма главной

Выбор цветовой гаммы должен основываться на таких правилах:

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

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

Графика и мультимедиа

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

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

Что может быть на главной и не будет лишним

Значительно усилят симпатию посетителя к сайту такие элементы как:

• видео-контент с кратким описанием сайта
• товарные новинки / последние новости
• фото компании / команды

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

Использование товарных новинок и актуальных новостей подчеркнет тот факт, что сайт живой.

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

Топ 5 лучших примеров главных страниц интернет магазинов

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

1. Terrasport. Этот сайт может продать все что угодно. Здесь представлены наиболее яркие и привлекательные рекламные объявления. Кроме общих обязательных, грамотно расположенных элементов, здесь можно увидеть фильтры по увлечениям, популярным категориям и даже распродажам. Данный сайт имеет множество страниц, что при правильной структуре является огромным плюсом.

2. МКЛ. Сайт МКЛ — это яркий пример главной страницы сайта — простой и эффективный.

• простым и запоминающимся логотипом
• четкой структурой
• ограниченным количеством цветов
• динамической рекламой

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

3. Merit. Данный интернет-магазин является примером сложно структурированного сайта. Здесь достаточно много всего: отдельными блоками выделены бренды, акции, новинки и т. д. Главным преимуществом страницы является динамичность и удачное расположение всех элементов. Контакты представлены тремя номерами разных мобильных операторов, а также стационарным номером. Четко разграниченные разделы для быстрой навигации по товарам.

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

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

Топ 5 лучших примеров главных страниц продуктов/услуг

1. Promex. Почему главная компании Промэкс лучшая?

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

2. Alessandro. Этот сайт представлен в мягком ненавязчивом тоне, соответственно, к услугам, которые он представляет. Оригинально представленный список услуг: короткий текст под тематической картинкой, кликнув на которую можно перейти на отдельную услугу и детально ознакомится с ней. Меняющаяся главная картинка с особыми предложениями, высветленными в лучших красках. Здесь также представлены работы мастеров и текст о компании.

3. Goodfix. На сайте нет ничего лишнего: сразу к делу! Невооруженным взглядом видно, что страница создавалась с целью заинтересовать и оставить человека, которому нужен ремонт ноутбука или ПК.

На главной представлен список предлагаемых услуг с интересной визуальной подачей, ценовая политика, основные преимущества, адрес. Также есть сразу две кнопки для связи с представителем «Заказать звонок» и «Напишите нам, мы онлайн», что подталкивает клиента сделать нужное действие. Стоит также отметить широкий диапазон контактов: Вайбер, Телеграм, Инстаграм и т. д.

4. Antonika Varizko Photografy. Данный сайт информирует об услугах фотографа. На странице несложный, но креативный дизайн и привычное расположение навигации, которое помогает клиенту быстрее совершить необходимое действие.

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

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

Заключение

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

В погоне за совершенством избегайте ловушек: не перегружайте домашнюю страницу лишними элементами.

Используйте «Вебвизор», чтобы понять поведение и потребности посетителей. Внедряйте наши советы и у вас получиться создать работающее лицо вашего онлайн-ресурса!

Как верстать сайт предпринимателю? HTML и CSS для владельцев сайтов

Статья поможет внести правки в оформление своего сайта. Эти же знания помогут скачать какой-нибудь шаблон на themeforest.net и смастерить из него лендинг для проверки своих гипотез.

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

Введение в HTML

Основа любого сайта – это HTML код. Чтобы посмотреть, как он выглядит, откройте браузер Chrome (здесь и далее мы будем смотреть все в нем), нажмите правой кнопкой мыши по странице и в контекстном меню выберите пункт «Просмотр кода страницы» (View Page Source).

Все это все такое – это и есть HTML код. Если начать в него всматриваться, то будет видно, что все непонятное находится в треугольных скобках <так>, иногда со слешем .

Такие конструкции называются тегами. В HTML тег, который без слеша обозначает начало какого-либо объекта, а со слешем – его конец. Можно считать, что вся страница состоит из таких объектов, вложенных друг в друга. Тег начала называется открывающим тегом, а конца со слешем – закрывающим тегом.

Это выглядит примерно так:

Знаки табуляции здесь только для примера, вложенность объектов зависит только от «открытия» и «закрытия» тега.

Тег, который был открыт раньше, должен закрываться позже. И наоборот: если тег открыт позже, то должен закрыться раньше. Не должно быть пересечений в открытии и закрытии тегов.

Основные теги

Каждый тег выполняет определенную команду. Сейчас мы рассмотрим основные из них.

– это служебные теги, обозначающие начало страницы. Они, обычно, не отображают никакой информации в браузере. Они используются для того, чтобы внутри с помощью других тегов указать SEO параметры (keywords, description), заголовок страницы (title), Favicon, подключить файлы CSS и т.п. Если нужно отредактировать указанные параметры, то искать их нужно именно в части .

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

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

http://digistr.ru/images/logo.png'>

http://digistr.ru/images/logo.png'>

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

http://digistr.ru/'>Digistr.ru

», который будет ссылкой на страницу «http://digistr.ru/».

– тег заголовка H1. Когда сайт находится в продвижении, требуется, чтобы он был на странице, причем в единичном экземпляре. Это самый главный заголовок страницы. Остальные заголовки могут находится в тегах от h2 до h6. Чем больше номер, тем, стандартно, меньше заголовок.

– это текстовый тег для создания абзаца текста. Каждый абзац размещается между тегами .

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

Строка 1 
Строка 2.

Строка 1 Строка 2.

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

Практически все теги (кроме body, head и, желательно, h1) можно использовать в любых количествах на странице. Из этих тегов и создается структура страницы.

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

a, b, br, button, div, em, embed, form, h1-h6, i, img, input, label, ul или ol c li, p, select, small, span, strong, table, tr, td, textarea, u. Всего около 30 штук.

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

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

Перейдем теперь к оформлению.

Введение в CSS

CSS код, обычно, размещен в отдельных .css файлах. Они подключаются в теге с помощью тега .

В параметре href указывайтся путь к файлу со стилями.

CSS конструкции имеют следующий вид:

Название_объекта_для_оформления

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

Тогда CSS код для такого оформления будет следующим:

Если мы хотим сделать заголовок красным, тогда код такой:

Так мы указываем тег и его оформление. Здесь мы использовали параметр оформления — color, который позволяет редактировать цвет элемента. Как указывать цвет, смотрите здесь. Чаще всего используется шестнадцатеричный код через решетку. Для красного цвета это будет так:

Классы и идентификаторы

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

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

Классы указываются так:

Так у нас есть возможность указать отдельное оформление для тегов

, у которых указан класс green-text.

Для этого в CSS нужно указать, какой объект мы оформляем через точку.

.green-text

Для идентификаторов используется решетка в CSS и параметр id для тега. HTML:

#logo

А вот так будет неправильно:

Потому что id должен быть один на странице, а здесь два «green-text». Вот так правильно, так как разных ID может быть много на странице:

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

ID чаще всего используется для определения уникальных частей страницы, например в таком виде:

 
Шапка сайта
 
Содержание страницы
 
Подвал
 

Наследование и переопределение CSS стилей

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

h1 h2 h1

В этом случае объекту H1 применится два параметра – color и font-size. Несмотря на то, что они указаны в разных блоках. То есть второй блок дополняет стили первого, или наследует стили первого блока. Так H1 унаследовал свойство red из предыдущего блока.

Но во втором блоке можно и переопределить стили первого блока. Например:

h1 h2 h1

В этом случае цвет H1 будет yellow, так как он указан повторно и следует после цвета red. Для тега используется последний указанный стиль.

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

Вложенность тегов и объектов в CSS, селекторы

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

, нужно указать больший размер шрифта.

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

 
 
+1 (234) 56-78-910
 
 
 
Абзац 1
 
Абзац 2
 
 
© 2016, Ваша компания
 
 

Если мы, как и ранее, укажем такой стиль:

То у нас все элементы будут шрифтом в 32px. Но нам нужно, чтобы только телефон был такого размера.

Для этого в CSS мы можем использовать указание тегов с учетом вложенности. Например:

#header .phone p

Таким образом, размер шрифта изменится только у тега

, который находится в классе .phone, который, в свою очередь находится в элементе с id равным header. И наоборот, CSS будет искать сначала элемент #header, в нем должен быть элемент .phone, а далее элемент p. Параметры объектов указываются через пробел.

#header .phone p #content p #footer .copyright

Здесь телефон будет размером 32px, абзацы в содержании страницы будут серого цвета, а копирайт будет шрифтом в 10px.

Такие последовательности тегов, классов и идентификаторов называются селекторами. От слова select – выбрать. Они выбирают элементы на странице и указывают им стили. Подробнее о них здесь.

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

#content p, #footer .copyright #footer .copyright

В этом случае копирайт будет серого цвета (наследуется из правила выше) и размером шрифта в 10px.

Популярные CSS параметры

margin, border, padding – внешние отступы от объекта, граница объекта и отступы внутри объекта, соответственно.

Выглядит это примерно так.

Здесь черной рамкой и оформлением border выделен сам объект, margin – это отступ вокруг него, а padding – внутри него.

#header < background: #F8CB9C; padding: 1px; >#logo < margin: 10px; padding: 20px 30px; background: #C1CD89; border: 3px solid black; >#logo img

Здесь зеленый отступ создан за счет padding в элементе #logo. Весь элемент залит зеленым цветом, но его содержание начинается не от края за счет padding, получилась рамка для наглядности. У этого же элемента #logo указан margin по 10px со всех сторон, что и растянуло внешний блок, получился второй отступ из-за margin. У самого же элемента #logo черная рамка в 3px создается параметром border.

display – способ отображения элемента. Наиболее популярные значения:

• none – не отображать элемент. Используется, когда нужно что-то «спрятать/отключить» на странице.
• block – элемент будет растянут на всю ширину элемента, в который он вложен. Если элемент находится в теге , то он растянется на всю страницу. Таким образом, все остальные элементы после него будут отображаться с новой строки.
• inline-block – элемент будет такого размера, который требуется для содержимого этого элемента, в строку можно будет расположить несколько таких элементов (зависит от размера строки и элементов). Кроме этого, к такому объекту можно применить свойства margin и padding, аналогично типу block.
• inline – отображать элемент как строчный. Строчные элементы не имеют отступов. Например, слова в предложении можно считать строчными элементами. Они имеют размер равный своему содержимому, переносятся по строкам и следуют друг за другом. Верхние margin и padding к таким элементам применить нельзя.

position – позиционирование элемента. Имеет следующие популярные варианты:

absolute – абсолютное. Отсчет позиции начинается с начала страницы, либо относительно объекта, в который он вложен, если у него свойство position равно relative. Чаще всего используется в связке именно с relative внешним объектом. Например HTML:

 Распродажа! 

.product-photo < position: relative; >.label-sale

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

background, border, clear, color, display, float, font-family, font-size, font-style, font-weight, height, left, margin, overflow, padding, position, right, text-align, text-decoration, top, width.

Как быстро редактировать стили

В браузере Chrome кликните на любой элемент страницы правой кнопкой мыши, в появившемся меню выберите «Просмотрет код» или «Инспектировать элемент». Внизу откроется панель, где будет виден HTML код страницы. В нем будет подсвечена строка с элементом, по которому кликали (1).

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

Справа будут видны селекторы (2) которые работают для этого элемента и его стили. При прокрутке блока стилей будет видно, какие стили наследует элемент от каких классов.

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

Здесь мы переписали свойство color, добавили background и margin-top (который заменил верхнее описание). Это изменило вид кнопки и подняло ее вверх за счет уменьшения внешнего верхнего отступа.

Теперь скопируйте этот блок CSS кода и вставьте его в конец своего .css файла, либо замените на него существующий блок с данным селектором. В нашем случае это блок «.tp-static .btn.btn-border.btn-warning». Его нужно найти в .css файле и заменить на код из браузера. Так наши изменения сохранятся в странице.

Популярные задачи

Поиграться со шрифтами

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

Например, было, CSS:

body, input, textarea, select .title
body, input, textarea, select .title

Теперь все шрифты будут Open Sans. Это нестандартный шрифт (не у всех установлен на компьютере). Его и другие шрифты можно найти на fonts.google.com. Справа в фильтре нужно выбрать Languages=Cyrillic для текстов без спецсимволов (для заголовков, например) или Cyrillic Extended для шрифтов, которые используются для произвольных текстов (1). В списке найденных шрифтов выберите нужный и нажмите на плюсик, который станет минусиком (2). Внизу появится панель с выбранным шрифтом (3).

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

После выбора шрифта, на вкладке Embed скопируйте код (1) и разместите его в своего сайта перед файлом стилей, в котором он используется (2).

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

Это немного подвинуть

Ключевое слово здесь «немного». На 1-2 сантиметра, редко больше. Это делается с помощью CSS параметров margin, padding или position.

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

HTML код такой, допустим:

Главное – это определить селектор и указать ему нужные стили. В нашем случае это «#logo img». Иерархия читается справа налево: картинка img, которая находится в элементе #logo. Наоборот (слева направо) – в блоке #logo должна быть картика img, вот ее и нужно двигать.

Способ 1. Через margin двигаем вправо и вниз.

#logo img < margin-top: 10px; /* Отступ вверху двигает вниз */ margin-left: 20px; /* Отступ слева двигает вправо */ width: 100px; /* Указываем нужное значение параметру «чуть меньше» */ >

Способ 2. Через padding тоже двигаем вправо и вниз.

Только padding – это внутренний отступ, поэтому нам нужно делать этот отступ для элемента, в котором находится картинка. То есть внутри блока #logo должен быть отступ. Значит наш селектор уже «#logo».

#logo < padding-top: 10px; /* Верхний отступ в элементе сдвинет все вниз */ padding-left: 20px; /* Отступ слева двигает все вправо */ >

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

#logo img

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

Способ 3. Через position.

Нам понадобится position со значнием relative, так как нужно подвинуть логотип немного относительно текущего его положения.

#logo img

Это поменять местами, тут добавить

Здесь понадобится перемещение HTML кода по странице и, возможно, корректировка стилей. Например, у нас есть такой код.

 
 
Логотип
 
Телефон
 
 
Поиск
 
 

Код CSS такой для нашей задачи.

.header-center .phone

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

 
 
Логотип
 
Поиск
 
Телефон
 
 
 

Но при открытии страницы мы увидим, что стиль телефона изменился. Он уже не будет 24 размером шрифта. Это связано с тем, что телефон ищется в блоке «.header-center». Поэтому, нам нужно исправить стили в соответствии с новой версткой, чтобы селектор находил телефон в новом блоке. Для стилей телефона .header-center в CSS заменить на .header-right.

.header-right .phone

Если бы изначальные стили имели такой вид:

.phone

То есть без привязки к внешнему блоку (.header-center), который изменился (на .header-left), тогда правки в стилях не потребуются.

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

Это перекрасить

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

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

#header .phone < color: #FF0000; >/* Отдельно нужно указать цвет и для ссылки */ #header .phone a.callback < color: #0000FF; >#header .phone a.callback:hover

Здесь через двоеточие указывается так называемый псевдокласс hover. Он добавляется элементу при наведении на него курсора. Подробнее про такие классы здесь.

Это убрать

Аналогично перекраске, нужно определить селектор и скрыть этот элемент через параметр display, например:

#header .cart

Исправление ошибок

Все ошибки – в коде. Если верстка явно «поехала», значит где-то некорректный код. Чаще всего бывает два вида «съездов».

1. Когда блоки сильно сместились

Скорее всего, где-то нехватает закрывающих тегов. Либо наоборот, закрывающий тег слишком рано появился. Важно соблюдать такие правила верстки. 1. Каждому открывающему тегу должен быть закрывающий. 2. Теги не должны пересекаться. Каждое из этих правил было подробно описано выше.

Чтобы избежать таких смещений, рекомендуется форматировать код с отступами. Каждый новый блок начинать с новой строки и дополнительным отступом. Например:

Так видно, что теги все указаны корректно и ровно. А ошибки, обычно, возникают, в таких ситуациях.

Здесь не закрыт первый тег div.

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

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

2. Когда оформление не такое, как ожидается

В этом случае некорректно указан селектор. Если блок был перенесен из другого блока, то убедитесь, что в селекторе не указан старый блок. Как было выше в примере с .header-center .phone и .headre-left .phone. Поскольку стили наследуются, то нужно убедиться, что все селекторы, которые ранее применялись к элементу, применяются и при новой структуре блоков. Для этого используйте инструмент «Инспектировать элемент», который показывает в правой части все применяемые стили элемента.

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

Заключение

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

Для продолжения подписывайтесь на наш странички в Вконтакте и Фейсбуке, а также на Youtube канал.