Блоги | Статьи | Форум | Дамский Клуб LADY

Блог о блогахСоздан: 15.02.2008Статей: 14Автор: ВебмастерПодписатьсяw

Способы верстки или как рассовать все по нужным местам

Обновлено: 16.06.08 01:30 Убрать стили оформления

"Каркас" для вебстраницы можно задать двумя основными способами: с помощью таблиц и с помощью слоев. Например, вам нужен следующий стандартный макет страницы, содержащий такие блоки как логотип, название, меню, содержание и нижнюю часть страницы, так называемый "подвал", где обычно размещают ссылки на другие разделы сайта, контактную информацию и т.п. Для задания такого макета вы создаете таблицу, первоначально неважно с каким количеством столбцов и строк, а потом добавляете, удаляете, объединяете или разделяете ячейки таблицы при помощи соответствующих пунктов контекстного меню или кнопок панели инcтрументов до получения нужного каркаса. Работа с таблицами в визуальном редакторе обычно не вызывает каких-либо затруднений и практически идентична работе с таблицами в текстовом редакторе Word. Так же выделяя соседние смежные ячейки их можно объединять, так же можно задавать горизонтальное и вертикальное выравнивание внутри ячеек таблицы, их ширину и высоту, добавлять строки и т.д.
Я здесь для наглядности задаю рамку у ячеек таблицы, а вообще, для каркаса обычно или совсем не используют рамку или как-то её красиво оформляют. В результате вы получаете некий блок ячеек, в которые можете надежно распихать нужные части вашей страницы, нисколько не сомневаясь, что они будут выводиться именно там и никак иначе.

Логотип НАЗВАНИЕ

Реклама

Содержание:
текст, текст, текст..
текст...
меню1
меню2

 

 

= ссылки на другие разделы сайта =

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

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

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

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

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

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

Поэтому, я НЕ РЕКОМЕНДУЮ делать свои первые шаги в вебдизайне со слоев и вообще заморачиваться на тему, используете вы их или нет, иначе можно достаточно быстро разочароваться как в себе, так и в вебдизайне. Миллионы красивых и функциональных сайтов сверстаны без каких-либо намеков на слои. Подумайте, что вам важнее, чтобы ваша страница выглядела красиво в одном браузере или чтобы вашу страницу могли прочитать все, в независимости от того, в каком браузере и разрешении экрана её просматривают? Конечно, вебдизайнеры всего мира не теряют надежды, что когда-нибудь производители браузеров начнут сотрудничать и тогда их страницы начнут выглядеть одинаково красивыми во всех браузерах.

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

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

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

Врезка

1. Создание так называемых "врезок", т.е. некоего блока, обтекаемого общим содержанием страницы. Образцом может служит вертикальная новостная лента, показываемая у нас во всех разделах сайта, кроме форума. Посмотрите на скриншот, слева на странице информация расположена в ячейке таблицы, поэтому внизу остается пустое место, а справа врезка новостной ленты сделана при помощи слоя, поэтому сразу после его окончания текст комментариев начинает его обтекать.
Создается такая врезка очень просто. Нужному блоку текста или картинке просто задается выравнивание по правому краю и, при необходимости, ширина и отступы. В визуальном редакторе для этого нужно выделить соответствующий блок, нажать на кнопку "Изменить стили CSS" styleprops.jpg и на вкладке BOX задать параметру float значение right. В HTML коде это будет выглядеть как style="float:right;"

2. Создание блоков с управляемой видимостью и положением на экране. При помощи программ на JavaScript блокам можно задавать видимость в ответ на какие-то события или действия пользователей. Примером может служить наша страница Последние сообщения форума, в которой изначально отображаются только заголовки тем, и лишь при щелчке пользователя по ссылке, отображается блок с самими сообщениями. Он не появляется из ниоткуда, это слой, который просто первоначально невидим, а при щелчке по заголовку этому слою присваивается значение "видимый" и в него подгружаются сообщения темы. При повторном щелчке слой снова делается невидимым, при этом все ниже идущие данные, соответственно, опускаются или подымаются вместе с пропаданием или появлением этого блока.
Пример верстки на слояхХорошим примеров верстки на слоях является тема оформления phpBBLite нашего форума, которую можно выбрать в поле "Внешний вид форума" в своем профиле. В ней можно увидеть различные приемы скрытия/отображения/наложения блоков.

 

3. Создание плавающих слоев. Иногда нужно разместить блоки так, чтобы они изменяли свое местоположение, подстраивась под разрешение экрана. Например, взгляните вот на эту мою статью. Здесь фотографии разной ширины от 150 до 300px расположены одна за другой, при этом если при разрешении 800*600 в верхний ряд умещается три фотографии, то при разрешении 1024*768 наверх поднимается еще и четвертая. При размещении фотографий в ячейках таблицы, как например, здесь такого поведения фотографий достичь невозможно, их всегда при любом разрешении экрана будет в ряд столько, сколько задано столбцов у таблицы, т.е. в данном случае три. Поэтому, используйте таблицу, если хотите получить одинаковый результат при любом разрешении и используете слои, еси хотите реализовать подгонку под разрешение экрана. А реализуется это очень просто: все фотографии вставляются одна за другой без переносов строк и всем им присваивается параметр "Выравнивание по левому краю" на вкладке "Вид" окна вставки изображения.

4. Наложение и перекрытие блоков. Реализацию этого эффекта рассмотрим пошагово. Предположим, мы хотим наложить несколько блоков друг на друга, пусть это будут фотографии, но вообще это может любой блок, текстовый или комбинированный. Итак, пишем текст, выделяем его мышью и жмем кнопку "Стили" styleprops.jpg. На вкладке BOX задаем ширину, например, 300 pixels, высоту 100pixels, выравнивание float: left (это значит, что сам он будет выровнен по левому краю страницы, а все следующие за ним слои будут примыкать к нему справа) и ниже параметр clear: both Значение both означает, что данный блок не наследует параметров выравнивания предыдущих блоков, если таковые были, являясь как бы родительским элементом, от которого потом будут рассчитываться отступы и выравнивания следом идущих блоков. Здесь же, при необходимости, на вкладке "Текст" можно задать оформление текста и на вкладке "Граница" её толщину и цвет. Итак, у нас есть базовый текстовый блок, его же мы можем начать называть слоем, потому что слой - это не какой-то особый элемент, а, по сути, любой блочный элемент, которому заданы параметры позиционирования или выравнивания. Далее вставляем обычным способом картинку. Она расположится справа от нашего базового слоя.
img20080616012724.jpgТеперь, выделив картинку, жмем нашу кнопку "Стили" styleprops.jpg, задаем ей опять же на вкладе BOX свойство float: left, и здесь же ниже (внимание, начинается самое интересное) задаем ей поля по верхнему краю и по левому краю в пикселах. Это будут отступы от правого верхнего угла нашего базового слоя (при выравнивании группы по правому краю, т.е. использовании параметра float:right - отсчет, соответственно, будет вестись от левого верхнего края предыдущего рисунка). Эти отступы можно задавать отрицательными. Положительные отступы будут сдвигать рисунок вправо и вниз о предыдущего слоя, соответственно, отрицательные, будут сдвигать его влево и вверх. Давайте зададим нашему рисунку параметры -20pixels как для поля "По верхнему краю", так и для поля "По левому краю"(Не забудьте снять вверху галочку "То же для всех", иначе параметр "По левому краю" будет недоступен. В результате наш рисунок наползет на 20 пикселей влево на текстовый блок и поднимется над ним на 20 пикселей. Вот вам и вся блочная верстка. Три параметра и никаких лазаний в HTML-код. Если хотим еще, просто продолжаем вставлять еще фотографии и задаем им тот же параметр float: left, но уже другие отступы. Например, давайте зададим следующей картинке поле сверху 30pixels, а отступ слева -150pixels, в результате наш второй рисунок сместится вниз и влево. Напомню, что отсчет всех блоков, в независимости от того, сколько их будет, ведется от правого верхнего угла предыдущего блока группы, с учетом, что он был бы размещен на странице без задания вертикального смещения. При этом, чтобы сместить всю группу, нам достаточно будет поменять размещение базового слоя (того, у которого параметр clear=both), все прикрепленные к нему фотографии останутся на те же заданных смещениях друг от друга.

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

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

 

Сначала я
была
такой

img20080529070417.jpgimg20080529070650.jpg img20080529070550.jpg


Потом была такой

img20080529070749.gifimg20080529071203.jpgimg20080529071411.jpg



Комментарии:
Поделитесь с друзьями ссылкой на эту статью:

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


Всего отзывов: 10 в т.ч. с оценками: 4 Сред.балл: 5

Другие мнения о данной статье:


Morning [14.06.2008 15:51] Morning 5 5
Мастер! не травите душу! а детальнее? или сразу в хтмл ползти и просто копировать?))

Джулиана [14.06.2008 16:03] Джулиана
Я, например, вообще не понимаю, что такое слой. Что с его помощью можно добиться. И нужен ли он мне, мож, и без него обойдусь. Механизма не понимаю. =\

Morning [14.06.2008 16:22] Morning
Мастер, когда я делала статью о бабочках, мне хотелось часть фотографий уложить так, как на Вашем первом примере, но при этом текст должен был обтекать картинки, это вообще реально?
А можно ли, пользуясь слоями, добавлять картинки в готовый текст, но так, чтобы они были под текстом?

Джулиана [17.06.2008 02:50] Джулиана 5 5
В Опере некоторые сайты выглядят... криво. Наверно, это слои и есть. Вот "блоки с управляемой видимостью" - интересная штука. Но сначала надо научиться управляться с таблицами играючи, а потом и о слоях подумаю. Спасибо, Мастер.

Джулиана [17.06.2008 20:22] Джулиана
Не дают мне покоя идеи... ))) Мастер, а эти блоки с управляемой видимостью сложно сделать? Интересует эффект, как в phpBBLite выпадает вкладка с "профилем", "календарем", "рейтингом" и пр.

Вебмастер [17.06.2008 22:15] Вебмастер
Несложно. Одна строка на JavaScript, выглядит это примерно так:
<a href="#" onClick="javascript:document.getElementById('my1').style.display='none';">Ссылка</a>
При щелчке по ссылке делается невидимым слой с идентификатором 'my1' и соответственно display='block' - видимым
Но использование JavaScript здесь по соображениям безопасности не разрешено. Когда вдруг дорастете до осознания его острой необходимости, пишите письма ;)

Джулиана [18.06.2008 00:29] Джулиана
Как грустно... =( А что за соображения безопасности? О_о Браузер сломаем? Да не впервой.))

Вебмастер [18.06.2008 07:09] Вебмастер
Со своими собственным браузером каждый волен вытворять всё, что ему заблагорассудится. Но при помощи JavaScript злоумышленник может навредить ДРУГИМ посетителям, читающим страницу с внедренным им кодом: украсть куки(которые могут содержать пароли доступа), отправить от вашего имени письмо, переадресовать на другой адрес и т.п.

NATALYA [26.09.2008 23:07] NATALYA 5 5
Вебмастер спасибо всё расписано красиво, только как это делать?

[19.10.2008 18:49] Лаура 5 5
Перекачала статью, чтобы прочитать спокойно,т.к. мне учиться ещё нужно многим вещам. За статью спасибо. Лаура

Посетители, комментировавшие эту статью, комментируют также следующие:
Ирина Сахарова: Герой её воспоминаний. Часть 2. Глава 19 Ирина Сахарова: Герой её воспоминаний. Часть 2. Глава 12 Ирина Сахарова: Герой её воспоминаний. Часть 2. Глава 11 Кристи: ОТДАМ СВОБОДНЫЕ КОМПЛЕКТЫ № 1

Список статей:



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