Правила верстки сайтов


Содержание материала:

Правила грамотной и качественной вёрстки сайтов

В данной статье приведены некоторые основные правила, которые часто предъявляются при заказе вёрстки html-страниц. С подобными пожеланиями к верстке сайта можно столкнуться при работе с рекламным агентством или дизайн-студией.

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

Итак, каковы же основные прaвила качественной верстки?

Как правильно и быстро верстать сайты

Всем привет, друзья. Сегодня мы затронем очень важную тему — быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Ведь именно скорость верстки влияет на то, какую колбасу вы будете кушать на завтрак. Обычно медленные веб-дизайнеры кушают на завтрак колбасу за 80 рублей из эмульсии шкурок, в то время, как более прозорливые и быстрые — хорошую докторскую за 900 рублей/кг. Конечно, есть много веб-дизайнеров, которые скажут — «Я выполняю работу вдумчиво и качественно, соответственно, медленно». Я не буду долго углубляться в психологический анализ, но это отговорки и самооправдание. Можно верстать очень быстро и качественно, это не картину маслом малевать.

Давайте проанализируем, какие этапы нам приходится выполнять в процессе верстки. Это позволит нам выявить основные проблемы и узкие места верстки, которые можно автоматизировать или ускорить. К слову сказать, ускорение HTML верстки, собственно и заключается в автоматизации (использование инструментов) и в ускорении (ваша скорость печати, предварительный анализ, сообразительность).

1. Анализ макетов и подготовка к верстке

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

1.1 Визуально разбейте макет на повторяющиеся части, определите сетку

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

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

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

1.2 Определите параметры проекта

Не зависимо от того, используете ли вы какой-либо CSS фреймворк, обязательно используйте CSS препроцессор. Это очень важно, так как позволит вам сэкономить время на написании CSS. Открывая любой свой выполненный проект я с ужасом наблюдаю, как много времени было потрачено на написание CSS, можно сказать, что 60-70% работы на этапе верстки — это написание CSS. И было бы логично данный этап автоматизировать. Я рекомендую использовать препроцессор Sass, но здесь вы можете выбрать любой препроцессор, который вам нравится. Если вам понравился Sass синтаксис, рекомендую ознакомиться с руководством Sass для самых маленьких, где я рассказываю о преимуществах использования препроцессора и привожу примеры, которые демонстрируют эффективность верстки с использованием Sass. Довольно трудно объяснить новичку преимущества использования препроцессора, но ребята, которые, как говорится, «уже хлебнули», понимают, на сколько это эффективный инструмент. Думаю, после выполения верстки 10-15 макетов к вам придет это понимание, а пока просто поверьте мне на слово — верстать с CSS препроцессором быстрее.

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

  1. Базовый шрифт. Определяется для селектора body. Это размер и шрифт текста на текстовых макетах сайта, например, на странице «Статья» или размер и шрифт текста наиболее часто повторяющихся текстовых блоков на макете Landing Page. Если не смогли определить размер, так как, например, все элементы одностраничника разные, напишите font-size: 16px, это среднее значение по больнице. Отобразите базовую верстку в _typography.html;
  2. В файле _vars.sass определите переменную акцентного цвета и остальных явных цветов макета. Здесь и далее я буду приводить в пример и менно Sass, но вы можете без труда спроецировать информацию на ваш препроцессор. Постарайтесь задавать интуитивно понятные названия переменным и комментировать переменные, чтобы в дальнейшем не запутаться;
  3. Пройдитесь по всем страницам проекта и определите заголовки от h1 до h6 (Размеры, капс/некапс, шрифт, цвет). Сделав это заранее, вы сэкономите около 10 минут вашего времени или 1 часа, с учетом времени на прокрастинацию. Также определите инверс для заголовков и цвета текта. Добавьте родительский класс .dark-section ко всем заголовкам и тегам типографики p, blockquote, ol, ul, если в вашем макете есть секции «светлым по черному». Отобразите базовую верстку типографики в _typography.html;
  4. Также было бы полезно сразу определить типографику вашего проекта. Для тега body определите такой параметр, как line-height, обычно это 1.4 — 1.7 без указания единиц измерения. Расстояние между строк базового текста должно быть ориентировочно такое-же, как на макете в графическом редакторе. Здесь очень важную роль играет ваш глазомер, он очень сильно влияет на скорость вашей работы. Вам не придется измерять линейкой всё и вся, если ваш глазомер работает как надо. Данный скилл, к сожалению, развивается только с опытом и я не могу представить себе упражнения лучше, чем верстка, сам рабочий процесс.
  5. Определите кнопки. В вашем макете, наверняка есть кнопки. Определите параметры самой большой кнопки и используйте CSS модификатор для получения кнопок другого размера. Не определяйте заранее отношение элементов к «внешнему миру», такие как float, только внешний вид. Единственное, опытным путем было выявлено, что чаще всего кнопки наиболее универсальны по отношении к внешним элементам, если определены, как display: inline-block по-умолчанию. Отобразите базовую верстку кнопок в _typography.html;
  6. На ваше усмотрение, определите другие специфичные конкретно для вашего проекта параметры и повторяющиеся блоки заранее. Если вам кажется, что можете что-то забыть — комментируйте.

1.3 Ускоряем экспорт данных из макета

Раньше было такое понятие, как «Нарезка изображений» или «Нарезка макета». Сейчас такое определение не совсем корректно и более подойдет Экспорт данных из макета. Экспорт данных заключается в экспорте изображений и определении параметров для CSS.

Если вы пользователь Photoshop, вы можете использовать плагины для определения CSS свойств, такие, как CSS Hat. Отличная альтернатива подобным плагинам и инструментам — развитый глазомер. Когда у вас будет достаточный опыт, вы естественным образом откажетесь от подобных инструментов. Обратите внимание, что копируя абсолютно все CSS свойства из CSS Hat, вы будете верстать несколько быстрее, но потеряете в качестве и возможностях кастомизации. Дело в том, что CSS Hat не всегда правильно определяет отношение элементов к другим. Там где нужен padding, он определяет margin, там где нужна резиновая ширина или значение в процентах, он определяет фиксированные значения. Поэтому развивайте глазомер и храните базовые параметры в переменных.

Для быстрого экспорта картинок достаточно пользоваться новым Adobe Photoshop или Adobe Experience Design. У первого достаточно кликнуть на слое правой кнопкой мыши и вырать пункт Quick Export As PNG. В Adobe XD процесс экспорта изображений также прост и даже есть возможность экспорта нарисованных иконок в формат SVG. На данном этапе не слишком заморачивайтесь оптимизацией изображений, так как это задача для таск-менеджера. Об этом чуть позже.

Что касается иконок:

  1. Если это сложные иконки или иконки-изображения, которые предположительно должны меняться контент-менеджером через админку сайта — экспортируйте их как png и подключайте в тег img, как обычные картинки;
  2. Если это «фиксированные» иконки, которые ни под каким предлогом не будут изменены на сайте и контент-менеджеру их менять незачем (например, иконки телефонов, почты, карты и т.д.), можете объединить их в спрайт и использовать через CSS, задавая одной картинке разные координаты background-position. Данную операцию можно автоматизировать с помощью Gulp плагина css-sprite. Хотя можете сделать сами, если иконок немного, просто разбив направляющими поле на матрицу из квадратов заданной ширины и высоты. К Gulp вернемся чуть позже и подробнее рассмотрим важность таск менеджера в быстрой верстке. Только предварительно убедитесь, что дизайнер не использовал какой-либо шрифтовой айконпак. Если это так то достаточно будет подключить соответствующий айконпак к проекту;
  3. Если это одноцветные простые иконки, также убедитесь, что дизайнер не использовал шрифтовой айконпак. Если это так то подключите соответствующий айконпак к проекту. Чаще всего используется шрифтовой айконпак Font Awesome. Если иконки самобытные — переведите их в вектор и создайте свой шрифтовой айконпак. У нас есть урок на эту тему: Создание шрифтового Icon Pack с использованием сервиса Fontello.

2. Скорость печати

После того, как вы подготовили все материалы, экспортировали картинки, сделали шрифтовой Icon Pack проекта, подготовили все иконки, настроили проект, можно приступать к верстке. Думаю, очевидно, что если вы хорошо знаете теги и CSS свойства, узким местом в скорости может быть только скорость набора символов на клавиатуре в процессе HTML верстки и написания CSS свойств. Для прокачки данного скилла более, чем достаточно освоить какой-либо метод быстрого набора символов на клавиатуре. Методов много и эта информация легко гуглится. Занимайтесь, практикуйтесь и все получится. Здесь также немаловажную роль играет практика именно верстки.

Мне как-то написал начинающий веб-разработчик, который сетовал на то, что его мечты о легком заработке не оправдались и за верстку макета Landing Page на биржах фриланса ему предлагают 2000 руб. Он отправил мне примерный макет. Я спросил, сколько бы он взял за этот макет денег, на что бедолага ответил мне — 10-12 т.р. Если бы мне предлагали на верстку LP за 2000, когда у меня была небольшая пригоршня опыта, как у этого парня, я искренне был бы рад таким возможностям. Конечно, сейчас верстка в моем исполнении стоит несколько дороже этой цифры, но если бы я брал такие проекты за 2т.р, с текущей скорость работы я без проблем поднимал бы 4-5 т.р в день без потери в качестве, работая по 7 часов в день. Не густо, но уже не плохо. Вообще, признаюсь вам, друзья, меня подбешивают нытики, у которых все плохо, у таких всегда будет куча отговорок и бублик в кармане. Поэтому оставим эту историю и двигаемся дальше к нашей цели верстать быстро и качественно.

3. Используйте Emmet и/или Jade

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

Также, вы можете использовать Jade или любой другой HTML препроцессор. Штука тоже удобная и классная, но для моих задач хватает Emmet с головой. Вангую много недовольных поклонников Jade, но несмотря на все преимущества и фишки, include для меня не многим проще вставки шапки Ctrl+V, а репит миксина не легче того-же Ctrl+Shift+D. Теоритически, если подумать, изменив шаблон миксина, можно не заморачиваться с переверсткой однотипных накопированных элементов, но таких ошибок я не допускаю, да и крупные проекты не по моей части, поэтому, надобности в ускорении подобных моментов нет. Пробуйте, друзья, экспериментируйте, может вам понравится такой инструмент 🙂

4. Используйте ваши наработки

Используйте Github Gist для сохранения ваших наработок, кусов кода, блоков и даже целых секций. Всего того, что вам может оперативно пригодиться в процессе верстки. У нас есть урок по настройке Github Gist в редакторе Sublime Text для быстрого доступа и поиска нужного гиста: урок на YouTube с таймкодом на подключении Gist и отдельный урок по Gist.

5. Используйте таск-менеджер

Использование таск менеджера, например, Gulp — важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

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

Более подробно изучить Gulp вы можете в уроке Gulp для самых маленьких — подробное руководство.

6. Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия — веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

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

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

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

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

  1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
  2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
  3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
  4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
  5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
  6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок. «;
  7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
  8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
  9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
  10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
  11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

Топ-пост этого месяца:  Moguta.CMS — бесплатный и быстрый способ создания интернет-магазина (полностью ориентирован на

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея, простите за выражение, говно, то хоть сколько ее не полируй и подгоняй по пикселам, она так и останется неработающим высером. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

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

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

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Верстка веб-сайтов

10 ноября 2020 года. Опубликовано в разделах: Азбука терминов. 20701

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

Что нужно знать для верстки сайтов? Как минимум, основы работы с графическими редакторами (Photoshop, Gimp, Krita), язык HTML, CSS, библиотеки Java Script (JS).

Если мы нажмем в браузере правую кнопку мыши и выберем «Просмотреть HTML-код», то увидим следующее:

Это и есть сверстанная веб-страница.

Виды верстки

Верстку можно поделить на два основных вида:

  • Табличная. Для описания элементов применяются таблицы. Вся страница представляет собой скопление таблиц
    . В настоящее время такая верстка считается устаревшей.
  • Блочная. HTML-документ представлен как совокупность блоков

    Верстка сайта: с чего начать

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

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

    • Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку.
    • Выпишите шрифты, которые необходимо будет отразить в CSS.
    • Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML – это будущая сверстанная страница сайта, CSS – файл стилей.
    • Начинайте с шапки. Пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.
    • Стратегия верстки. С левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала «одевайте» в HTML шапку сайта (слева направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно.
    • Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы. Это можно делать параллельно с версткой. Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа «verh_shapki», «cherny_shrift_konec» и т.п.
    • Закрывайте все теги, проверяйте правильность их вложения.
    • Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей: дополняет его, дорабатывает и т.п.
    • Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п..
    • Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован.
    • Тестирование и проверка на ошибки. Проверьте, как ведет себя страница в разных браузерах при разных разрешениях монитора. Можно пользоваться онлайн-сервисами или специальными инструментами типа
    • Изучите страницу на валидность – отсутствие ошибок в коде.

    Какая верстка считается качественной

    • Блочная – с применением

    Инструменты верстальщика

    • Обработка изображений: Adobe Photoshop, Gimp, Krita.
    • Работа с кодом: Notepad++, Adobe DreamViewer, SublimeText, CoffeeCup HTML Editor, UltraEdit,Firebug, Winless, CSS3 Generator
    • Работа с JS: Front Page, NetBeans.
    • Проверка на кроссбраузерность и валидность: Crossbrowsertesting, IE Tester, Dr Watson, Validator.w3, Css validator, Markup validtor.

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

    Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:

    – Технический аудит.
    – Оптимизация.
    – Коммерческие факторы.
    – Внешние факторы.

    Мы не просто говорим, в чем проблемы. Мы помогаем их решить

    Требования к верстке

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

    ОБЩИЕ ПОЛОЖЕНИЯ

    Верстка производится в соответствии со стандартами языка разметки HTML5 и CSS3.
    Верстка производится на базе семантических фреймворков Uikit и Bootstrap 3 (далее — фреймворк), используемая версия фреймворка – последняя стабильная на момент начала верстки проекта.

    Поддерживаемые браузеры:

    • Internet Explorer – версия 11 и выше;
    • Microsoft Edge – последняя актуальная версия;
    • Google Chrome – последняя актуальная версия;
    • Yandex browser – последняя актуальная версия;
    • Opera – последняя актуальная версия;
    • Mozilla Firefox – последняя актуальная версия;
    • Safari – версия 9.1 и выше.

    Поддерживаемые мобильные платформы(при условии использования по умолчанию предустановленных на устройствах браузеров):

    • мобильные устройства под управлением ОС iOS версии 10.12 и выше;
    • мобильные устройства под управлением ОС Android версии 6 и выше;
    • мобильные устройства под управлением ОС Windows Phone 10 и выше.

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

    Общие базовые требования

    1. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
    2. Использование jQuery.
    3. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
    4. Цвет фона для body задан всегда. Если конкретный цвет не указан в макете, используется белый (#fff).
    5. Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже лучше отделить и объявлять в отдельном файле.
    6. Недопустимы грубые ошибки в разметке (ссылки сделаны не тегом , абзацы должны быть абзацами, а не

    Что такое верстка сайта?

    Что же такое верстка сайта, для чего она нужна ?

    Что же такое верстка сайта, для чего она нужна?

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

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

    Верстка сайтов является неотъемлемой частью процесса изготовления сайтов.

    Что такое верстка сайта – это процесс формирования веб-страницы по готовому макету.

    Этот процесс заключает в себе создание кода страницы при помощи понятного браузерам языка размётки гипертекста html, и оформление её с помощью каскадных таблиц стилей (CSS). Не нужно самому пытаться сверстать сайт, целесообразнее заказать услуги верстальщика. Ведь профессиональная верстка сайтов должна учитывать многочисленные особенности, как правил верстки, так и параметров отображения документов в различных браузерах.

    ПРАВИЛА ХОРОШЕГО ТОНА ПРИ ВЕРСТКИ САЙТА

    1. ЧТО ЖЕ ТАКОЕ ВЕРСТКА САЙТА И ДЛЯ ЧЕГО ОНА НУЖНА?

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

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

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

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

    2. АДАПТИВНОСТЬ ВЕРСТКИ ДЛЯ ВСЕХ БРАУЗЕРОВ

    Сегодня существует целый ряд популярных браузеров, используемых людьми для работы в сети Интернет. К ним относятся: Internet Explorer, Opera, Mozilla Firefox, Google Chrome, Netscape Navigator, Safari и другие.

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

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

    3. ВЕРСТКА САЙТОВ С ЧИСТЫМ КОДОМ

    Еще одно правило хорошего тона при верстке сайта – это чистый и красивый код.

    Что это значит? Это значит, что код html разметки страницы красиво отформатирован, содержит комментарии и выделенные логические блоки. Использование каскадных таблиц стилей(CSS), позволит очистить код от лишних тэгов, и сделать вес сайта в целом значительно меньше.

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

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

    Сверстать сайт возможно двумя принципиально разными способами.

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

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

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

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

    Верстка сайта на основе полученных знаний по Html и CSS (пример использования директив @import и @media)

    Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Наша сегодняшняя задача состоит в том, чтобы сформировать так называемый макет сайта не с помощью Html таблиц (вчерашний день верстки), а с помощью элементов Div. Т.е. нам нужно будет на дивах построить верхнюю часть (шапку), нижнюю часть (футер) и три колонки для примера.

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

    Казалось бы, что повторяться не стоит, но я и не собираюсь этого делать. Сегодня будет описан принципиально другой способ верстки сайта, а также параллельно рассмотрим назначение директив @import и @media (с собачкой впереди) в уже изученном нами (на базовом уровне, конечно же) языке стилевой разметки CSS.

    Верстка сайта на блоках — а оно вам надо?

    Более того, мы с вами на текущий момент уже успели разобрать и язык Html по косточкам, опираясь при этом на первоисточник в лице консорциума W3C. Однако, думаю, что не все прониклись моими увещеваниями и сразу же бросились изучать Справочник CSS для начинающих, а также Учебник Html.

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

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

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

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

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

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

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

    Итак, приступаем к верстке. Для начала создаем и обзываем папку для хранения файлов нашего будущего веб проекта, а затем создаем внутри нее текстовый файлик с расширением .html и названием index. Также создаем внутри этой папки еще одну, которую обзываем CSS (в ней будут жить наши внешние файлы стилей).

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

    Ну, а теперь скопируйте приведенную чуть ниже «рыбу» в свой index.html. Для работы с кодом довольно удобно использовать универсальный редактор Notepad ++ с подсветкой, хотя, при обладании навыком работы, более функциональным решением может оказаться Дримвьювер:

    Вначале как всегда должна идти директива doctype, назначение которой подробнейшим образом описано в приведенной по ссылке статье. Внутри тега meta мы указываем кодировку текста utf-8 для его правильной интерпретацией браузером, при открытии в нем нашего проекта. Каждый документ в сети Интернет должен иметь заполненный тег Title (заголовок страницы), поэтому мы и его добавили в «рыбу».

    Далее следует служебная гиперссылка link, с помощью которого мы подключаем внешний файл CSS стилей к этому Html документу (нюансы описаны по приведенной ссылке).

    Ну, а между тегами Body должен размещаться, собственно, контент, который будет вставляться в файл непосредственно (в случае статичного сайта, например, как на Яндекс Народе), или же опосредованно из базы данных (в случае сайта динамического, на основе какой-либо бесплатной CMS (движка)).

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

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

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

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

    Используем директиву @import при верстке

    Суть его заключается в использовании директивы @import, с помощью которой из одного файла с CSS правилами можно будет подключить другой файл стилевого оформления. В этом случае наша верстка будет удовлетворять общепринятым правилам. Итак, допустим, что мы в начале osnovnoy.css прописываем подключение общего файлика стилевого оформления:

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

    Теперь при интерпретации этого кода браузером пользователя, на место директивы @import встанут те CSS правила, которые в файлике obdhiy были вами прописаны. Дальше браузер уже будет рассматривать правила из самого этого файлика osnovnoy, которые при возникновении конфликта будут иметь больший приоритет в силу своего более низкого расположения в коде. Вот такие вот маленькие хитрости верстки сайта на простом примере.

    Давайте начнем верстать поэтапно, задавая Html элементы в index.html и описывая их в общем файлике obdhiy.css. В нем пока оставим лишь одну директиву @import для вызова общего стилевого файла. Для начала зададим один внешний контейнер, в котором будут жить все остальные элементы нашего макета. Изменяя или выравнивая такой контейнер мы будет осуществлять действия над всем макетом, а внутренние элементы будут под него подстраиваться.

    Открываем и закрываем теги Div, а также прописываем в открывающем теге ID (уникальный идентификатор, а бывает еще и CLASS) с наиболее приглянувшимся вам значением (я выбрал «kont»). Использование именно ID обусловлено тем, что другого такого контейнера у нас просто быть не может.

    Значение этого ID будет служить селектором (читайте про них в приведенной в предыдущем абзаце статье), который подскажет браузеру, что прописанные для него свойства следует применять именно к этому внешнему контейнеру. Перейдем теперь к прописыванию данных правил для этого внешнего контейнера в obdhiy.css:

    Вначале прописаны несколько стилевых правил для тэга Html (можно было бы и для Body), которые задают некоторые свойства для всего сайта. Background и color задают, соответственно, цвет фона и текста для всех веб страниц (читайте про способы задания цвета в Html и CSS коде), правило font задает начертание и размер шрифта, который будет использоваться по умолчанию, если для каких-то элементов не будет описан font отдельно.


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

    Давайте посмотрим, что получилось в итоге (откройте для этого index.html в любом браузере):

    Теперь давайте выровняем наш макет по середине. Для этого достаточно задать margin со значением Auto. Для нашего макета контейнером будет являться в конечном итоге область просмотра, и при значении Auto как по вертикали, так и по горизонтали, умный браузер в первом случае сбросит внешние отступы в ноль (по вертикали), а вот по горизонтали он сделает отступы слева и справа равными, что нам как раз и требуется.

    Повторяться про 8 пикселей у тега Body не буду, ибо вы сами сможете это прочитать, например, в статье про правило Position. Если захотите этот отступ убрать, то пропишите в вашем стилевом файле для селектора body margin:0.

    Создаем блоки для нашего будущего макета

    Теперь давайте продолжим верстку нашего сайта и добавим внутрь элемента Div с >

    Вступительные теги из «рыбы» я опустил, чтобы не повторяться, но вы их, естественно, оставьте. Элементы с ID header и footer будут в нашей верстке отвечать за «шапку» и «подвал» сайта. С серединкой же будет чуток сложнее, ибо для ее формирования мы сразу же используем два блока: с ID vnesh и вложенный в него vnutr.

    Осталось теперь только описать в стилевом файле obdhiy.css все это безобразие, иначе четыре элемента блочной верстки так и будут следовать на веб странице друг под другом.

    Т.к. наши блоки пока не будут содержать контента, то мы им временно зададим высоту с помощью Height (при этом для блока с ID kont высоту уже можем убрать за ненадобностью, но добавим для него внутренний отступ padding в десяток пикселов), а также цветовой фон (для наглядности) с помощью все того же правила Background.

    Среднюю часть нашего макета мы отодвинули на десяток пикселей сверху и снизу (читайте про Margin (top, bottom, left, right) по приведенной чуть выше ссылке), а справа и слева дополнительного отступа не задавали (margin:10px 0;). В результате получим следующий макет:

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

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

    У браузера Интернет эксплорер есть ограничение на использование одной фоновой картинки для одного Html элемента, поэтому нам и понадобилось для создания правой и левой колонки создавать два вложенных блока — vnutr и vnesh. Но давайте все посмотрим на примере, иначе объяснить будет сложновато.

    Итак, в нашем способе верстки сайта, для создания правой и левой колонки придется вспомнить, как работает сборное правило Background (см. ссылку выше). Вспомнили? Тогда берем заранее подготовленные изображения цветных полосок размером, например, 200 на 20 пикселей. Обычно такого типа графику принято сохранять в формате растровой графики Png для получения наилучшего соотношения размер-качество.

    Я, для примера, сделал полоски с градиентной заливкой, чтобы они не ассоциировались с заливкой фона блочного элемента обычным цветом (через background-color) и назвал их left.png и right.png:

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

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

    Для блока с ID vnesh мы назначили фоновым изображением right.png, при этом разрешив ему копировать себя по вертикали (читайте про Background-repeat) и прижав его вплотную к правому краю блока (позиционирование по вертикали нам не важно, т.к. по этой оси осуществляется размножение картинки — читайте про Background-position по приведенной чуть выше ссылке).

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

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

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

    Продолжаем верстку и добавляем колонки в макет

    Хотя и кажется, что мы получили то, что хотели, однако это не так. Фоновые картинки не являются колонками для будущего контента, увы и ах, но колонки нам еще предстоит создать. Для этого опять открываем на редактирование index.html и добавляем три блока Div внутрь уже имеющего блока с ID vnutr. Не мудрствуя лукаво, присвоим им вполне говорящие ID — left, right и center:

    Да, я еще один блок добавил с ID rasporka, назначение которого станет понятно по ходу дела. Чтобы не задавать специально высоту для пустых колонок, я добавил в них некий бредовый текст, который и позволит нам наглядно лицезреть колонки с контентом на веб странице, но только после того, как мы оформим их должным образом в нашем стилевом файле obdhiy.css.

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

    Сразу оговорюсь, что пришло время убрать задание высоты через Hight в селекторе vnutr, ибо это дело мы ставили для наглядности. Левую колонку мы заставляем с помощью CSS правила float плавать влево, а правую — вправо. Ширину колонок мы выбираем равной ширине фоновых картинок right.png и left.png (в нашем случае она одинакова и равна 200px), о которых мы говорили чуть выше.

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

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

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

    Левая и правая колонки представляют из себя плавающие элементы, которые по определению не взаимодействуют с блочными тегами (DIV как раз является блочным, ибо для него по умолчанию прописано Display block).

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

    Но у нас имеется четвертый блочный элемент с ID podporka, который не содержит никакого контента (а значит и не будет виден на веб странице) и которой предназначен именно для устранения этого казуса. В коде obdhiy.css мы пропишем для этого селектора простое правило clear:both. Вследствие этого блок с ID podporka приобретет полезное нам свойство — он будет учитывать любой плавающий перед ним элемент (имеется в виду, расположенный выше в коде).

    Т.о. при увеличении контента в правой или левой колонке произойдет пропорциональное смещение вниз элемента с ID podporka, а т.к. этот тег уже не является плавающим, то блоки с ID vnutr и vnesh будут его учитывать и пропорционально увеличивать свой размер по вертикали:

    Теперь вроде бы все работает правильно. Однако, наша верстка сайта еще не закончена. Допустим, что мы сделали в index.html таким образом макет главной страницы, а вот для какого-нибудь другого раздела вид макета должен будет отличаться (например, там должно быть не три, а только две колонки). Как выходить из этой ситуации?

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

    Ну и файлик с таблицами каскадным стилей нам придется новый использовать, например, razdel.css. Вот именно в них мы и будем вносить изменения, а заодно посмотрим поподробнее, как же именно использовать директиву @import в таких случаях.

    Давайте начнем с razdel.html:

    Мы изменили заголовок страницы Title и поменяли название подключаемого файлика стилей на razdel.css. При этом, естественно, необходимо будет в папке CSS этот самый файл стилевой разметки создать. Осмелюсь вам напомнить, что для index.html мы подключали стилевую разметку через osnovnoy.css, в котором была прописана одна единственная директива @import для подгрузки правил из файлика obdhiy.css:

    Мы не будем оригинальными в нашей умной версте и в самом начале нового (еще пустого) стилевого файла пропишем абсолютно такую же директиву. Тем самым мы получим опять-таки трехколоночный макет, однако, дописав чуть позже всего несколько правил, мы запросто превратим его в двухколоночный. Даже не так. Мы создадим еще один файлик в папке CSS с названием dvekolonki.css и следующим содержанием:

    Что мы сделали? Мы запретили отображать правую колонку на веб страницы с помощью display:none. Так же мы убрали внешний отступ справа для центральной колонки, ибо в нем уже нет необходимости. Ну и в завершении мы запретили показывать фоновую картинку все в той же правой колонке. В общем, мы эту правую колонку в нашем макете раздела полностью аннигилировали.

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

    Все правила, стоящие в коде ниже (из dvekolonki.css), будут иметь приоритет более высокий, а значит именно их действо мы и будет наблюдать на веб странице. В результате при открытии razdel.html вы уже сможете наблюдать двухколоночный вариант макета:

    Собственно, дополнительной нашей задачей было рассмотреть варианты использования директивы @import в современной верстке сайтов, с чем, я считаю, мы справились.

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

    Верстка макета для печати с помощью директивы @media

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

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

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

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

    Имеется две возможности указать с помощью media то, для какого именно устройства нужно применять данные стили. Можно указать атрибут media в теге Link, с помощью которого подключаются внешние стилевые файлики. Но в этом случае браузер будет делать лишний запрос к серверу, что не есть хорошо. Однако, такой способ имеет право на жизнь и выглядеть это безобразие будет примерно так:

    У атрибута media можно использовать и другие значения:

    1. all — используется по умолчанию и означает, что данный файл стилей нужно будет использовать для абсолютно любых устройств вывода
    2. braille — устройства для чтения пальцами (для слепых или слабовидящих)
    3. handheld — КПК, смартфоны и прочая мелочь
    4. print — принтеры
    5. screen — экраны мониторов пользователей, на которых они будут просматривать ваш сайт
    6. speech — речевые браузеры
    7. projection — проекторы
    8. tty — телетайпы и прочая рухлядь, на которой нельзя использовать размерность в пикселах
    9. tv — старый добрый телевизор

    В приведенном чуть выше примере мы, с помощью атрибута Media, подключили к веб документу отдельный файл стилей для отображения на мониторе и отдельный для вывода на печать (print.css). Нам как раз подобное и нужно реализовать в этом уроке верстки, но лучше будет сделать это немного другим способом, с использованием именно директивы @media прописанной в файле стилей.

    Если вы обратили внимание, то при таком способе верстки, который выбрали мы (с использованием @import), у нас имеется общий файлик стилей, который подключается всегда через эту самую директиву — obdhiy.css. Вот именно в нем мы и начнем колдовать.

    @media имеет свой собственный синтаксис:

    В нашем файлике obdhiy.css не будем заключать все уже имеющиеся правила внутрь директивы @media screen, достаточно в самом его конце просто дописать необходимые CSS правила для вывода документа на печать с помощью @media print:

    Если вы помните, то селектор * означает применение всех этих стилевых правил для абсолютно всех элементов Html кода. Правда такой селектор имеет минимальный из возможных приоритетов, поэтому задавая цвет для всех элементов черным, а фон прозрачным, с помощью правил color и background, мы вынуждены не доводить дело до подсчета приоритетов с помощью установки !important.

    Для селектора Html мы прописали задание умолчательного шрифта в абсолютных единицах pt (пунктах), ибо принтеру так понятнее. Ну и шрифт задали любой с засечками (serif). C помощью display:none мы запретили отображения обвеса (шапки, футера и колонок), а с помощью margin:0 разрешили контенту из средней колонки занимать все доступное пространство по ширине.

    Последний селектор a[href]:after заковырист и, чтобы лучше понять о чем именно он говорит, советую пробежаться по следующим публикациям про селекторы атрибутов ([href]) и селекторы псевдоэлементов (after). Но нужен он нам для довольно простой цели — увидеть на бумаге, куда именно ведут гиперссылки.

    Псевдоэлемент after позволяет осуществлять генерацию контента во время построения документа браузером. After позволит нам добавить URL адрес гиперссылки сразу после того места, где эта самая ссылка проставлена. Делается это с помощью специального CSS правила content, которое работает только для двух псевдоэлементов: after и before.

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

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

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

    Современные виды верстки сайтов HTML. Требования к верстке

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

    Верстка сайтов на HTML/HTML5 и CSS/CSS3

    С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал план самостоятельного изучения HTML и CSS, а также HTML5 и CSS3. Я придерживался этого плана и результат получился неплохим.

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

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

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

    Что такое верстка сайта, долго объяснять я думаю не стоит. Если коротко, то это создание HTML кода и CSS-таблиц стилей по задуманному ранее дизайну. Чаще всего страницы верстают на основе подготовленного заранее в фотошопе psd-макета.

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

    Требования к современной верстке

    Чем качественнее выполнена верстка сайта, тем лучше будет работать сайт или блог. Профессиональную верстку может выполнить только хороший специалист верстальщик. Какие же требования сегодня предъявляют к верстке? Вот они:

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

    Давайте разберем какие бывают виды верстки сегодня и вам станет понятно что все это значит.

    Виды верстки сайтов

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

    • Фиксированная верстка или статическая . Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса прокрутки.
    • Резиновая верстка . Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область. При этой верстке тяжело добиться хорошего удобного дизайна при всех возможных разрешениях экранов, ведь страницы будут выглядеть по-разному.
    • Табличная верстка или верстка таблицами . В данном случае сетка страницы строится с помощью таблиц. Представьте, что на странице есть главная таблица, а в ее ячейках при необходимости располагают вложенные таблицы, а в их ячейках могут быть новые таблицы и так до бесконечности. Код получается громоздким, это очень неудобно, да и надобности в этом уже нем. Сегодня так страницы уже давно не верстают. Более того, поисковики не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но только не делайте с их помощью структуру страницы.
    • Блочная верстка, верстка блоками или div-верстка . Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков

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

    По собранной мной статистике около 40% людей посещают страницы моего блога с мобильных устройств. Причем со смартфонов более 30% и с планшетов около 7%. Да, у меня на блоге адаптивный шаблон и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.

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

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

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

    • Практика по основам адаптивной верстки в HTML5 и CSS3
    • Практика верстки сайта под мобильные устройства
    • Веб-дизайн: практический курс создания лендинга
    • Веб-дизайнер — профессионал. Создание востребованных макетов
    • Современные тенденции веб-разработки
    • Научись создавать красивые, современные подписные и продающие страницы
    • Все о создании сайтов
    • Пошаговый план создания сайта
    • Школа блоггинга

    Надеюсь, что статья была интересной, и вы нашли для себя что-то полезное.

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

    Желаю профессиональной верстки вашим сайтам и блогам!

    Как научиться верстать сайты

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

    Шаг первый. Выбор среды для разработки. Notepad, как и Notepad-плюс-плюс лучше сразу забыть. На первое время, имхо, самый годный — это Dreamweaver, от которого в конечном счете придется отказаться в силу его ущербности, но для первых шагов он будет лучше, а точнее понятнее, чем другие. В конечном счете для меня лично самым удобным оказался WebStorm (нежданчик, ага).
    Резюмируя — ищи удобную IDE для себя.

    Шаг второй. Читать документацию. Если с английским все в порядке, то лучше, чем w3c.org нет ничего. Если не в порядке — htmlbook.ru. Да, все, что там есть надо прочитать и понять. Самое главное во всем этом — понимание.
    Многие (порядка 60-80%, наверно) теги в дальнейшем не будут использоваться.
    В принципе, аналогично и с css. Много примеров есть на том же htmlbook.
    Резюмируя — читаем, вникаем, пробуем, учимся.

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

    Шаг четвертый. Познай подводные камни. Существует множество способов их найти, где первый, конечно же — это опыт. Гугл, разумеется поможет, но он приведет с 99% долей вероятности на stackoverflow.com, поэтому рекомендую там создать аккаунт и не бояться уйти в далекие минуса. Вы же только учитесь.

    Шаг пятый. Забудь про идеальный мир с одним браузером. Это настоящий зоопарк, хотя всего существует 4 движка (Lynx не в счет) — Trident (IE), Gecko (Firefox), Webkit (Safari, Chrome) и Presto (почти R.I.P). Далее все, кому не лень делают на основе их форков свои браузеры, список приводить не стану — википедия поможет. Учитывая, что с 13ой версии Opera перешла на Webkit их собственный Presto остался только в актуальной версии Opera mini. Opera mobile с 11ой версии так же использует Webkit.
    Шаг шестой. Познание периферийных софтин. Photoshop (или GIMP, но у него бывают частые проблемы с открытием файлов .psd, так что лучше не начинать) — обязателен. Именно им вам предстоит нарезать всю графику.
    В зависимости от того, какую ОС вы используете, софтинка для выкидывания мусора из картинок + оптимизатор цветовой палитры png-файлов.
    Я, например, как пользователь OSX использую imageoptim (аналог для W — PNGout), ImageAlpha для «простых» картинок (аналог для W — color quantizer) или ximagic quantizer для «сложных» — это плагин для Фотошопа, который позволяет уменьшить набор цветов картинки, при правильных настройках которого, можно «сэкономить» еще порядка 10-40% после прогона через imageoptim(PNGout).
    Резюмируя — экономь пользовательский трафик, не у всех 100мбит и немало пользователей со смартфонов.

    Шаг седьмой. Собирай проект аккуратно, блеать. Создавай папки осмысленно и пихай туда только, то, что и правда будет использоваться. Далеко не все, что ты наделаешь будет использоваться на рабочем проекте, потому не суй в папку images те картинки, которые заведомо не будут использоваться — сделай папку temp. Храни psd спрайтов (ты же читал руководства, да?) в отдельной папке и отдавай их заказчику. Не отдавай css видом, где каждое правило на новой строке — это ненужная версия «а так читать удобнее» для работающего сайта.
    Резюмируя — не создавай лишнего.

    Шаг седьмой с половиной. Используй локальный веб-сервер (в OSX apache встроен, для W — denwer.ru).
    Зачем? Тебе же самому будет удобнее таскать, допустим, горизонтальное меню, приделанное из другого файла, а не копировать его каждый раз, правда же? Условно, спасет тебя же от правок нерадивого заказчика. Кроме того, всегда используй относительные пути, забудь про абсолютные.
    Резюмируя — думай о программистах.

    Шаг восьмой. Научись пользоваться GIT. Это значительнее удобнее, чем пересылать архивчики. Почти все студии/компании используют систему контроля версий, где GIT одна из самых популярных. Еще, конечно, еще и SNV, VCS, Mercurial и т.д, но GIT значительно понятнее и проще в освоении.
    Резюмируя — думай о программистах, снова.

    Шаг девятый. Совершенствуйся. Постарайся после достижения 90го уровня по всем предыдущим пунктам идти дальше. Тут тебе поможет Grunt.js (хотя мы же его, javascript то, и не знаем, пока и не нужно). Этот пункт короткий, переходим к десятому.
    Резюмируя — ты не бабушка, не сиди у падика.

    Шаг десятый. Переходи на мета-языки, такие как HAML/Slim и на препрепроцессоры CSS — LESS/SASS (разумеется альтернатив много, выбирай, что нравится больше).
    Резюмируя — удобно, мать его.

    Шаг одиннадцатый. Учим js.
    Резюмируя — ты же хочешь больше денег?

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

    Спасибо, с Вами был poizoncc, front-end тим-лид одного крупного .ru проекта.

    Правильная верстка сайта

    Основные понятия верстки сайта

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

    Определение верстки сайта

    Правильное создание сайта – это трудоемкий, многоступенчатый процесс. Одной из неотъемлемых частей разработки сайта и является верстка сайта, которая представляет последовательность действий при создании веб-страницы по предварительно созданному дизайну. Сам процесс верстки включает в себя формирование кода веб-страниц с помощью текстового либо HTML редактора, а после, оформление полученного кода при помощи CSS (Cascading Style Sheets — каскадные таблицы стилей). На самом деле, это очень сложный процесс. При отсутствии специальных навыков, не нужно самому заниматься версткой сайта, ни к чему хорошему это не приведет. В природе существует масса верстальщиков — специально обученных людей, у которых можно заказать услуги по верстке сайта. Качественная верстка сайтов предусматривает в себе массу особенностей правил верстки и других параметров, которые применяются при отображении страниц сайтов в разных браузерах.
    Конечно же, если очень хочется, то можно сверстать сайт и не имея особых навыков HTML используя WYSIWYG редакторы (What You See Is What You Get, «что видишь, то и получишь»), которые преобразуют видимый дизайн вашего сайта в HTML код. Вот некоторые из таких редакторов:

    • Adobe GoLive
    • Adobe (Macromedia) Dreamweaver
    • Namo Webeditor
    • Microsoft FrontPage
    • Microsoft SharePoint Designer

    Основные правила верстки сайта

    Верстка сайтов с учетом разрешения дисплеев пользователей

    При создании сайта, чтобы не испортить первоначальный дизайн, надо обязательно обращать внимание на то, что у пользователей интернета дисплеи с разным разрешением. Исходя из этого применяется два способа дизайн-макета сайта: «резиновый сайт» и сайт с заданной шириной. При создании сайтов с определенной шириной, берутся данные статистики использования мониторов, согласно которых, большинство юзеров используют дисплеи с разрешением 1024х768. Соответственно, чтобы избежать горизонтального скрола (полосы прокрутки) ширину сайта выставляют от 800 до 990 пикселей. Естественно, при таком раскладе появляется масса неиспользованного места на сайте, что является основным недостатком верстки сайта с определенной шириной страницы. При создании резиновых сайтов, в процессе их верстки, за единицу измерения берутся проценты, что делает верстку резиновых сайтов более предпочтительную.

    Кроссбраузерная верстка

    На данный момент времени существует множество различных браузеров (Google Chrome, Mozilla Firefox, Opera, Internet Explorer и др.), которыми пользуются люди для серфинга по сети Интернет.
    Любой из этих браузеров имеет кучу версий, с множеством отличительных особенностей, что делает различным отображение одной и той же страницы. Существуют правила отображения страниц , но единого стандарта пока нет. Соответственно, пока есть разногласия у создателей браузеров, будет существовать кроссбраузерная верстка.

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

    Правила верстки сайтов

    Что такое верстка шаблона для сайта

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

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

    Что такое верстка

    Верстка шаблона – это процесс формирования веб-страницы по готовому макету. Процесс верстки заключает в себе создание кода страницы при помощи понятного браузерам языка разметки гипертекста html, и оформление её с помощью каскадных таблиц стилей (CSS).

    Кто выполняет верстку шаблона

    Верстку шаблона или кодирование страниц выполняет специальный человек – верстальщик.

    Верстка и дизайн ширины страницы

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

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

    Дизайн сайта может быть с фиксированной шириной или с изменяемой шириной. Верстка с изменяемой шириной часто называется «резиновой» версткой.

    Верстка с фиксированной шириной выбирается исходя из средней ширины обычных настольных систем. Для мониторов это часто разрешение 1024х768 пикселей. Поэтому для корректного отображения на экранах, без появления дополнительных полос прокрутки, нужно выбирать ширину рабочей площади сайта в пределах 800-990 пикселей.

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

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

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

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

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

    Кроссбраузерная верстка. Что такое верстка сайтов с учетом кроссбраузерности

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

    Сегодня существует множество популярных браузеров, используемых для работы в сети Интернет. К ним относятся: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Netscape Navigator, Safari и другие.

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

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

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

    Верстка сайтов с чистым кодом

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

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

    Использование каскадных таблиц стилей(CSS), позволяет очищать код от лишних тэгов, и делает вес страниц сайта и сайта в целом значительно меньше. Не следует смешивать языки CSS и HTML в теле документа. Лучше выносить все правила оформления в отдельный файл и не использовать вставки непосредственно в коде разметки HTML. Код HTML должен содержать только теги с назначенными для них классами.

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

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

    Табличная и блочная верстка сайтов

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

  • ) либо в блоках (

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

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

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

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

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

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

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

    Заключение

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

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

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