Вёрстка веб-страниц

Материал из Seo Wiki - Поисковая Оптимизация и Программирование

Перейти к: навигация, поиск

Вёрстка веб-страниц — процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.

Вёрсткой веб-страниц занимаются верстальщики веб-страниц.

Содержание

Основные идеологии вёрстки веб-страниц

По принципам использования средств разметки HTML различают логическую разметку и презентационную разметку[источник не указан 2167 дней]. Последняя использует элементы разметки, игнорируя семантику, т. е. предназначение элементов. Эти принципы служат предметом споров среди верстальщиков.

Вёрстка с помощью слоёв

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

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

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

Преимущества слоёв

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

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

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

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

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

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

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

Работа с таблицами менее гибкая, чем со стилями

При использовании таблиц широко известным приемом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.

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

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

Усложненная верстка при большом количестве таблиц

Данная проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Adobe Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

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

См. также

Литература

Личные инструменты

Served in 0.215 secs.