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

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

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

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

Адаптивный

Адаптивный тип макета — дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое, или их замена блоками отображаемыми только при определённом разрешении. Адаптивный дизайн подстраивается под ширину рывком, после того, как зафиксирована ширину окна. Воплощается с помощью @Media или благодаря определённым скриптам. Разработан под конкретные известные устройства (320, 768, 1024, т.д.). Для этого заготавливается несколько стилевых правил или файлов под разный диапазон разрешений, выбор правил происходит через скрипты или CSS3, которые и определяют нужную для этого информацию.

Преимущества

• Этот тип макета наиболее удобен для пользователя, поскольку не зависит от разрешения и ширины окна браузера, приспосабливаясь под них.

• Макет комфортно можно смотреть на любом устройстве.

Недостатки

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

• За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.

---

Виды верстки

Фреймовая верстка

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

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

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

Табличная верстка —метод верстки веб-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег <table>).

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

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

Достоинства

– сама по себе верстка простая

– легко обеспечить одинаковый вид во всех браузерах

– «резиновая» табличная верстка, при изменении разрешения экрана, таблица формируется автоматически, растягивая и сжимая ячейки.

---

Недостатки

– много лишнего кода, большой вес страниц

– не каждый дизайн возможно создать

– медленная загрузка страниц

Блочная (контейнерная вёрстка)

На данный момент самая востребованная верстка, которая создаётся с помощью блоков (контейнеров), а именно тега <div>.

Преимущества и недостатки блочной верстки

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

• Блоки можно накладывать друг на друга, что облегчает расположение элементов на веб-странице.

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

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

• Данная вёрстка обеспечивает семантичость

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

---

Резюме:

— Фреймовая верстка — не рекомендуемый к использованию способ.

— Табличная верстка — громоздкая и неудобная, но простая в реализации.

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

Новые виды вёрстки:

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

Гибкая верстка или flex верстка. Вначале применяется блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). В стилях элемента указывают display: flex; Элементу можно указать направление главной оси и выравнивание. Считается, за этим настоящее и будущее верстки.

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

• идентефикаторы, классы и.т.п. должны иметь понятные имена например ссылка = link, шапка = header, список = list Семантичной является блочная вёрстка.

Валидность HTML-верстки — это её соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке документа — один из основных показателей качества вёрстки. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью онлайн сервиса W3C – https://validator.w3.org/, так и различными программами «валидаторами». Разные версии спецификации HTML предполагают различный синтаксис, поэтому тест верстки на валидность должен обязательно учитывать её Document Type.

---

Программы для верстки сайтов

1.Adobe Photoshop - для создания макета

2. Вёрстка

Блокнот. Стандартное приложение. Может использоваться для написания html-кода.

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

SublimeText. Очень похож на Notepad++. Отличается в основном только интерфейсом и различными плагинами, которые можно подключить.

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

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

---

Смотрите также файлы

• Техническое задание.doc

• Техническое задание_пример.doc

• Art-direction.pdf

• Введение в профессию. Основные понятия веб-разработки - занятие 1.pdf

• КЛАССЫ, ИДЕНТИФИКАТОРЫ, СЕЛЕКТОРЫ - занятие 2.pdf.pdf