WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Архив » Верстка с помощью таблиц

Верстка с помощью таблиц


Дата публикации: 16-03-2013

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

Чтобы создать поля, вам необходимо задать определенную ширину таблицы с помощью параметра width тега <table>. Ширина может быть выражена как фиксированным значением (параметр задается в пикселах), так и плавающим (в процентном отношении от ширины окна броузера). Фиксированное значение следует задавать не более 620 пикселов, чтобы при разрешении экрана 640x480 оставались хотябы поля по 10 пикселов.

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

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

Что касается применения фоновых цветов, то здесь остановимся подробнее.

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

Теперь рассмотрим как все это работает на практике. В качестве примера разберем сайт журнала "Ваш Партнер".

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

Теперь обратите внимание на рамку, выделяющую основную часть страницы. Она состоит из двух линий: внешней - широкой и внутренней - узкой, шириной 2 и 1 пикселов соответственно. Чтобы сделать такую рамку прийдется прибегнуть к некоторым хитростям. Сначала, необходимо создать два графических элемента размером 1x1 пиксел черного цвета и цвета основного фона. Первая точка понадобится для самих разделителей, вторая - для промежутков между колонками и разделителями. Затем, расчитаем размеры всех элементов таблицы. Возьмем в качестве базовой координаты верхний левый угол таблицы. Чтобы вычислить размеры колонок, необходимо вычесть из общей ширины страницы (без полей) ширину разделителей с промежутками. Размер промежутков выберем по 3 пискела.

600 - (3 + 2 + 3 + 1 + 3)=588

Определим количество строк: по 4 сверху и снизу и одна средняя, в которой будет размещена информация.

Теперь распишем размеры всех составляющих по строкам и ячейкам.

120+3+477=600
2+475=477
3+472=475
1+471=472
3+468=471
1+471=472
3+472=475
2+475=477
120+3+477=600

Таким образом мы получили таблицу из 9 строк и 7 ячеек. Дело осталось за кропотливым составлением таблицы.

 

 

 

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

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)
Октябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта

Хотите продать свой сайт?
- Мы быстро и удобно для Вас сможем его купить:
  • Заявка на продажу сайта
  • Раcсматриваем цены на каждый сайт в индивидуальном порядке.

    Случайная цитата

    Edward V Berard:

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

    Опрос

    Какими социальными сетями Вы пользуетесь?

    Vkontakte.ru
    Одноклассники
    Мой Мир - mail.ru
    Google Plus
    Facebook
    ЖЖ
    Другие
    Не пользуюсь