Html — Оцените верстку и… закидайте помидорами!


Содержание

Прошу Оценить верстку

Сверстал страничку. Хотелось бы услышать похвалу, либо критику, не суть важно(я новичок в этом деле, так что макет простенький).

Кроссбраузерность: Современные браузеры, IE9 и Opera 12. IE ниже 9 — стоит заглушка(прошу не обращать на нее внимание, т.к. страшная она. В скором заменю)

Добавлено через 47 минут
Дополнительная информация:

P/S.
Хэдер заменил(просто тот не очень понравился).

09.12.2014, 17:31

Прошу оценить верстку странички сайта
Уважаемые форумчане, около 2-х месяцев назад начал изучать html и CSS, после прочтения книг Д.

Оценить верстку
Доброго времени суток. Оцените пожалуйста верстку http://boxcube.zz.mu/copy/tablica.html и напишите.

Прошу оценить
Прошу оценить качество верстки http://atomr-web.github.io/

прошу оценить макет
С html css познакомился недавно .прошу оценить/дать замечания по верстке макет -.

Прошу оценить правильность сверстанной формы (HTML, Bootstrap 4)
Товарищи форумчане, прошу сделать жесткую критику по сверстанной мною данной формы ибо её HTML меня.

Верстка сайта — шпаргалка для начинающих

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

Процесс верстки — один из самых важных этапов создания интернет-ресурса, поскольку от работы верстальщика зависит:

  • Скорость загрузки веб-сайта;
  • Соответствие стандартам HTML;
  • Адекватность отображения в браузере;
  • Соответствие требованиям поисковых систем;
  • Адаптивность под различные экраны пользователя.

Что такое валидная верстка?

Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

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

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

Базовые правила верстки сайта

Каковы основные правила качественной и грамотной верстки?

  1. Вёрстка обязательно должна быть кроссбраузерной для Firefox , Opera , Safari , Google Chrome и Internet Explorer , который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
  2. Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
  3. Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
  4. CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
  5. Логотип веб-сайта должен являться ссылкой на главную страницу;
  6. HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
  7. Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно ( menu , footer , header и т.д.);
  8. В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
  9. Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
  10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
  11. HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
  12. Заголовки должны быть написаны исключительно с помощью специальных тегов h1 , h2 и т.д;
  13. Атрибуты всех тегов должны быть заключены в кавычки.

Основные подходы к верстке сайта

Предположим, что существуют два блока, стоящих рядом. Существует несколько основных подходов к вёрстке сайта:

  • Фиксированная верстка . При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
  • Резиновая верстка . В зависимости от размера окна браузера, блоки изменят свою ширину;
  • Адаптивная верстка . Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
  • Отзывчивая верстка . Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
  • Версия сайта для мобильных устройств . Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Кроме подходов, существуют ещё и различные типы вёрстки.

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

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

Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:

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

Однако имеет место быть и небольшая ложка дёгтя:

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

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

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

Блочная верстка сайта имеет следующие преимущества:

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

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

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

Верстка слоями: преимущества, недостатки, сфера применения

Слои – это такие элементы HTML кода, которые внедряются в страницу сайта наложением друг на друга с пиксельной точностью. Изменение параметров слоёв происходят с помощью JavaScript и VBScript , что позволяет использовать различные эффекты.

Достоинствами вёрстки слоями являются:

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

К недостаткам вёрстки слоями можно отнести:

  • Необходимость наличия довольно глубоких познаний языков и технологий веб-программирования ( VBScript , CSS , JavaScript );
  • Отображение сайта в различных браузерах может также быть различным;
  • С технической точки зрения верстка слоями похожа на позиционирование, однако во избежание проблем с браузерами, тег следует заменять на

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

Страницы со слоями не имеют единого стандарта отображения браузерами, поэтому одна и та же страница в браузерах Opera и Google Chrome может выглядеть по-разному.

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

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

Блочная верстка сайта — html и css, и почему начинающим повезло больше, чем тем кто верстает уже давно

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

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

Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

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

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

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

Далее врисовывалось основное меню для перехода по категориям.

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

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

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

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

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

Пошаговая инструкция: как делаются сайты

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

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

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

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

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

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

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

Ваш первый сайт. Верстка займет всего пять минут

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

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

Background – это цвет фона.

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать).

Получится примерно такой вариант.

Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.

И напоследок… качаем видео уроки

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

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

  1. Html — уроки для начинающих.
  2. Css — уроки для начинающих.
  3. Бесплатный мини-курс по вёрстке сайта.

Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!

Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!

Html — Оцените верстку и… закидайте помидорами!

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

Конкурс «Глаза в глаза»
Тема конкурса: глаза, выразительный взгляд. Жанр: портрет одного человека.

и номинировал снимок, сделанный несколько лет назад.
За день столько отзывов — неожидал. Неужели шыдевр?
http://img-fotki.yandex.ru/get/2/jefa-miller.0/0_e14_b47264ca_XL.jpg (http://fotki.yandex.ru/users/jefa-miller/view/3604/)

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

Это блог

Эта статья для студентов базового и продвинутого курсов по вёрстке в HTML Academy.

Студенты делают страницу «чётко по макету». Ровно с теми же текстами, картинками и формами, что в дизайне. Это правильно. Есть дизайн, надо сверстать. Но по неопытности они часто не задумываются, что это всё-таки сайт, а не картинка. И что нужно сверстать так, чтобы можно было поменять текст. Или порядок полей в форме. Или добавить новые поля. Или удалить старые. Или даже собрать новую страницу из существующих блоков. И надо, чтобы сайт не развалился. В продвинутом курсе этому посвящён отдельный раздел. Я разберу типичные ошибки новичков.

Фиксированная высота

Студенты часто попадаются на кнопках. Например, на таких:

Задают кнопке высоту 50px, верхний паддинг 10px. Кнопка выглядит отлично. Что будет, если написать на кнопке «Купить за 1000 рублей»? Текст вылезет из кнопки:

Текст выпал из кнопки, потому что её высота зафиксирована

Как надо? Надо паддингами:

Длинный текст растягивает кнопку

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

Заголовок на фоне фотографии

Тут скорее странно использовать padding-bottom: 150px . Три строчки же отлично поместятся, не нужно для них растягивать блок. А вот пять уже не влезут, нужно растянуть. Что делать? Использовать min-height вместе с паддингами. Тогда и блок не схлопнется, когда текста мало, и не будет слишком больших отступов, когда текста много.

Вместо высоты — паддинги и минимальная высота.

Где можно использовать фиксированную высоту? Там, где нет текста. Например, в декоративных блоках.

Выравнивание по центру

У нас всё та же кнопка:

Маркетологи провели исследование и решили, что «заказать онлайн» больше привлекает пользователей, чем купить. Так и написали:

Текст упёрся в края. Если бы были паддинги по бокам, всё было бы хорошо:

С паддингами не тесно

Выровняли по центру — проверьте паддинги.

Не все паддинги

Вот симпатичная текстария:

Но я пишу в ней текст, и вот он упёрся в правый и нижний края:

Потому что паддинг есть только сверху и слева:

Что делать? Конечно, добавить паддинги со всех сторон. Чтобы не забывать паддинги для всех сторон, пользуйтесь короткой записью в одно свойство padding , а не полные свойства padding-left , padding-top . Для кнопок, полей и большинства элементов вам подойдёт запись в два числа, по вертикали и по горизонтали:

Если отступ снизу отличается от отступа сверху, используйте запись в три числа (сверху, по бокам, снизу):

Ну и в тех редчайших случаях, когда отступ слева отличается от отступа справа, используйте четыре числа:

Паддинги описываются по часовой стрелке, начиная с верхнего:

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

Проставляйте все паддинги одним свойством.

Выпадающие элементы

Этот блок хорошо смотрится в своём окружении за счёт отступов соседей:

Но если перед ним встанет какой-нибудь другой блок, то всё:

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

Тогда ваша вёрстка будет гораздо более предсказуемой.

Из блоков ничего не должно выпадать.

Флоаты

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

Потом флоаты стали использовать для раскладки страницы, компоновки блоков и вообще чего угодно. Например, для вёрстки такого контрола:

Здесь чекбокс прифлоачен и имеет правый отступ. Вот что будет, если добавить больше текста:

Строки ниже чекбокса подвигаются влево, потому что обтекают чекбокс:

Если блок с текстом сделать блочным и задать ему overflow: hidden , то он займёт свободное в строке место, и не будет позволять своему контенту вылезать влево:

На этом же принципе основаны раскладки на флоатах. Но в 2020-м году такие штуки и на флексах делать можно.

Уберите лишнее обтекание.

Абсолютное позиционирование

Абсолютно позиционировать декоративные блоки — это нормально. Вот, например, абсолютно спозиционированный псевдоэлемент (новинка):

А вот что будет, если текст будет подлиннее:

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

Резервируйте место под абсолютно спозиционированными блоками.

Как сверстать и не облажаться

Откройте вашу вёрстку. Откройте веб-инспектор. Возьмите какой-нибудь блок. И добавьте в него побольше текста. Ещё больше. Что будет, если добавить четыре строки? Шесть? Длинное слово без пробелов?

Найдите любой список однотипных элементов. Например, меню или поля формы. Выберите один из элементов и нажмите Ctrl+C . Он скопируется. Выберите блок, в котором эти элементы лежат, и нажмите Ctrl+V . Он вставится. И ещё раз пять вставьте. Разъехалось? Сделайте, чтобы не разъезжалось.

Протестируйте всю страницу блок за блоком. И поправьте всё, что развалилось. Ну а как вы хотели?

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

Секреты дивовой верстки без хаков

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

IE6 — самый главный валидатор правильности вашей верстки, он очень чувствителен даже к малейшим неточностям в стилях, неговоря уже о незакрытых тегах, которые все современные браузеры просто-напросто игнорируют. Если сверстанный вами сайт хорошо отображается и не расползается в IE-6, то в остальных браузерах он темболее будет отображаться без проблем.

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

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

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

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

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

Создавая плавающий элемент (float:left или float:right) никогда не назначайте ему маргины и паддинги (margin, padding), особенно с противоположной обтеканию стороны, иначе проблеммы с кроссбраузерностью, да и с простым отображением будут у вас уже в кармане.

Вот вам пример неправильной верстки:

HTML

CSS

#BAD-example // Здесь может быть любая ширина, или ее не может быть совсем (неопределена);
.Left_float
.Right_float

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

А вот правильная верстка:

HTML

CSS

#GOOD-example // ширина может быть любым числом в пикселях, процентах или поинтах (pt)
.Left_float
.Right_float // вместо маргинов в этих плавающих элементах можно назначить паддинги по такому же образцу.

Самое важное: не сочетайте в плавающих элементах оба этих свойства одновременно. И НИКОГДА не назначайте паддинг или маргин в ту сторону куда элемент плывет!

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

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

HTML

CSS

#Wrapper // Следующим будет плавающий элемент, поэтому поток чистим заблаговременно. А я больше склоняюсь к тому, чтоб еще изначально создать отступы с краев: width:98%; margin:0 auto;
#MY-example
#MAIN // ширину этому блоку не задаем, конечно если у вас шаблон резиновый, а если фиксированной ширины, то ее лучше обозначить.
.Left_float_sidebar
.Left_float_sidebar2 .

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

HTML: табличная верстка. Примеры, описание, применение, советы

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

Что такое табличная верстка в html?

Чтобы ответить на данный вопрос, необходимо дать определение понятию верстка.

Верстка – процесс создания структуры html-страницы, размещения на ней основных элементов.

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

Макеты html-документов, созданные табличной версткой, используются в подавляющем большинстве сайтов и применяются уже более 10 лет. Это связано с простотой формирования структуры, заполнения, а также с универсальностью такой разметки, которая в разных браузерах отображается одинаково.

Первый этап создания сайта

Табличная верстка начинается с создания разметки: пишется html-код страницы с таблицей, состоящей из определенного количества столбцов и строк.

Для создания таблицы в html используется специальный тег

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

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

Основные атрибуты тегов таблицы

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

  • Свойство align используется для выравнивая положения таблицы, может принимать значения “left”, “center” и “right”. То есть выравнивание по левому краю, центру и правому краю, соответственно.
  • Атрибут background позволяет установить фоновое изображение для таблицы по ссылке на него.
  • Bgcolor задает фоновый цвет таблицы, значением может быть название или код любого цвета.
  • Border определяет толщину границ таблицы и указывается в пикселях.
  • Bordercolor устанавливает цвет границы.
  • Cellpadding позволяет задавать промежутки между текстом и границами ячеек.
  • Свойство Frame указывает браузеру на режим отображения границ таблицы, принимая значения void, border, above, below, hsides, vsides, rhs, lhs. Что, соответственно, значит не отображать границу, отображать рамку вокруг таблицы, сделать видимой только верхнюю границу или только нижнюю, не скрывать только горизонтальные границы или только вертикальные, отображать только правую или только левую черту.
  • Атрибут rules несет информацию о том, какие границы ячеек нужно отображать. Значение none позволяет скрыть все границы, all указывает на их отображение, cols задает положение линий между колонками, а rows – между строчками.

Данный тег создает строку таблицы, отвечает за ее внешний вид. Имеет небольшой набор атрибутов: align для выравнивания текста в строке, bgcolor задает фоновый цвет ячейки, bordercolor устанавливает цвет рамки вокруг строки.

Теги

и

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

  • Abbr позволяет сделать краткий комментарий к ячейке.
  • Align отвечает за выравнивания содержимого относительно трех горизонтальных положений.
  • Background используется для заполнения фона ячейки определенным изображением.
  • Bgcolor применяется для установки фонового цвета в ячейке.
  • А bordercolor определяет цвет границ ячейки.
  • Height служит для задания высоты ячейки.
  • Nowrap необходим для запрета переноса строки.
  • Weight задает ширину ячейки.

Пример html-макета сайта

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

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

Создавая таблицу, необходимо задать id для тега

, например, со значением “document”. Затем для ячейки (тег
или ), отведенной под шапку, атрибут id может принять значение “header”. Ячейка левого меню может быть названа “left_side”, а правого – “right_side”. Блок контента, допустим, будет назван “content”, а подвал сайта – “footer”.

Так будет отображаться страница в браузере.

Второй этап верстки

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

После этого, прописывая в mystyle.css условия отображения элементов, вы сможете изменять внешний вид страницы так, как вам это будет угодно. Например, свойство color задает цвет текста, а background определяет, как будет выглядеть фон элемента. Существует около 20 основных свойств, применяя которые, можно изменять положение элементов, их размеры, цвет и выделение. Поэтому такая верстка не является очень сложной и может быть выполнена даже новичком, а насколько креативно и интересно получится, зависит только от вас.

CSS-верстка

Как известно, сейчас между табличной и блочной версткой в html большинство веб-мастеров выбирает именно вторую. Это связано прежде всего с тем, что код табличной верстки получается очень громоздким, и это тормозит загрузку сайта. Объемность кода объясняется наличием сложной структуры тегов таблицы (3 уровня:

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

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

Адаптивная табличная верстка

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

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

Во-вторых, необходимо получать медиа-запросы от устройств, подключающихся к ресурсу, для того чтобы получить информацию о разрешении экрана и применить адаптацию. Для этого в основном используются свойства min-width, max-width и display. Первые два определяют границы расширения блока, а свойство display со значением none позволяет скрывать большие и нефункциональные блоки на дисплеях с небольшим разрешением.

Примеры

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

Еще один пример.

А можно оформить и так.

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

закидайте помидорами

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

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

  • что это за ледяные камешки сверху слева?
  • логотип сверху справа просто налеплен (или сменить фон, или выделить логотип, но его сместить так, чтобы не перекрывался другими элементами, или его подмостить под весь контент, но тогда в шапке будит пустота, которую нужно чем-то заполнить, например коллажем фотографий по теме)
  • промежутки между элементами меню и для модуля Login побольше
  • лучше по центру, чем слева (дизайн прилеплен к левой стороне браузера, попробуйте отцентрировать)
  • сверху над контентом я так понимаю баг порезки (пустой table)?
  • справа «отлепите» область для вывода контента от края (слева она у Вас уже отлеплена)
  • «если в первом акте висит ружьё. » слева область для модулей меню и логина у Вас сверху отходит к левому краю (у Вас больше не один элемент с этим по стилю не похож), думаю лучше убрать, подрезать верхушку этой области, а сверху (уже на чистом небе, но мрачноватом (!) ) отцентрировать тот элемент, что «вдвинут» в верхний-левый угол, и сместить ниже (думаю растянуть) (хотя до сих пор в догадках, что это такое, как на мну, то это «камешки из льда, которые сзади немного подсвечиваются»)
  • картинка на фоне прикольная, но не по этой тематике

В.-что это за ледяные камешки сверху слева?

это и есть долмен (http://images.yandex.ru/yandsearch?rpt=image&text=%D0%B4%D0%BE%D0%BB%D0%BC%D0%B5%D0%BD), пыталься сделать логотипчик

В.-логотип сверху справа просто налеплен

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

В.-промежутки между элементами меню и для модуля Login побольше

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

В.-сверху над контентом я так понимаю баг порезки (пустой table)?

Если честно и не кривя душой, то это полный пипец.

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

. не совсем согласен — если есть идея, значит её можно отобразить (буди то фотошоп, или лист бумаги. на нём тоже можно что-то нарисовать — хотя бы взаимное размещение блоков контента, и начальные наброски по используемым элементам дизайна). в нашем случае складывается впечатление начинающего программиста, который сам пытается на Джумле поднять сайт (от стандартной отличается только мелким количеством убраных модулей), причом с неособо широким познанием ХТМЛ. самое элементарное, что дизайнеры (Web-дизайнеры) учитывают при разработке. А нам дали только кусок скриншота (даже без футера, который тоже хотелось бы увидить).

пардон, если кого-то лично задел, но если это уже готовое лежит на хосте. то мну могу сказать только одно (хоть этого и не просили говорить) — ЛАЖА!

Урок 7. Блочная верстка web-сайта. Часть 1

Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.

1. Основные понятия

Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега

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

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

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

Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.

В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

Контейнер будет содержать в себе пять блоков:

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:

CENTER – содержит основной текст страницы;

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

Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.

Описание web-страницы в основном делается в CSS документе.

2. «Фиксированный» дизайн методом блочной верстки

1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

2. Создайте HTML-документ и сохраните его в той же папке.

3. В самом начале HTML-документа впишите следующую строку:

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

Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает.

4. Одной строкой между тегами и присоедините документ mystyle.css к документу HTML (рисунок 3).

5. В таблице стилей наберите код как на рисунке 4.

# этот знак говорит, что элемент является уникальным атрибутом и используется в HTML документе в теге div один раз.

6. Добавьте в mystyle.css шапку сайта (рисунок 5).

7. Добавим HTML документ следующий код между тегами body (рисунок 6).

И у Вас должно получиться следующее (рис. 7).

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

8. Откройте css-документ и добавьте следующий код (рисунок 8).

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

9. Сразу после закрывающегося тега

10. Откройте HTML-документ в браузере. Должно получиться такая div верстка (рисунок 10).

11. Теперь добавьте блок footer самостоятельно. Браузер должен показать такую блочную верстку сайта (рисунок 11).

Рассмотрим атрибуты relative и absolute.

Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

Рассмотрим простейший код.

  1. Создайте html-документ, в теле которого разместите код, как на рисунке 12.

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

Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13.

3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14). Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!

Проблема решается довольно просто: родителю дополнительно задаётся position: relative;

4. Измените код своей таблицы стилей в соответствии с рисунком 15.

5. Проверьте web-страничку в браузере. Результат на рисунке 16. Оцените разницу.

Создать web-страницу, внешний вид которой изображен ниже на рисунке 17

3. «Резиновый» сайт методом блочной верстки

В заданиях 1 и 2 мы рассмотрели «фиксированный» дизайн методом блочной верстки, т.к. все блоки имели точное значение по ширине и высоте в пикселах.

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

Задание 3. Создадим «резиновый» блочный макет как на рисунке 18.

1. Создайте HTML-документ с кодом, как на рисунке 19. Сохраните документ.

2. Создайте таблицу стилей как на рисунке 20. Сохраните документ. Вы должны получить результат ка на рисунке 18.

3. Изменяя размеры браузера, проанализируйте поведение макета.

4. Комбинированная блочная верстка

Комбинированная блочная верстка (div верстка) включает как блоки фиксированной ширины, так и блоки в процентном отношении к ширине экрана.

Задание 4. Создадим комбинированный блочный макет как на рисунке 21.

1. Создайте HTML-документ с кодом, как на рисунке 22.

2. Создайте таблицу стилей как на рисунке 23. Сохраните документ. Вы должны получить результат ка на рисунке 21.

3. Изменяя размеры браузера, проанализируйте поведение макета.

Методом блочной верстки создайте web-страницу для сайта архитектурных проектов коттеджей так, как изображено на рис. 24. Изображение для шапки сайта (shapka_div.jpg).

Требования к макету:

  • В HTML-коде не должно быть локального форматирования элементов, все оформление должно быть сделано через внешнюю таблицу стилей;
  • При наведении на ссылку «Проекты таунхаусов и блокированных домов» гиперссылка должна менять цвет (рис. 24);
  • При нажатии на гиперссылку «Проекты таунхаусов и блокированных домов» должна загружаться страница о проектах, внешний вид которой изображен на рис. 25.
  • При нажатии на логотип должна загружаться главная страница сайта (рис. 24).

Переходим с TABLE’ичной верстки на DIV’овую

Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом деятельности, то это и моя самая любимая тема.

О том и поговорим.

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

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

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

То, что расположено в таблице:

может быть представлено в виде блочной (дивовой) верстки:

, и это занимает гораздо меньший объем дискового пространства.

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

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

Вот какие преимущества я вижу блочной верстки по сравнению с табличной:

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

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

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

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

    Теперь непосредственно к практике.

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

    Итак, вот какие источники я посоветую. Полезно будет изучить тем, кто хочет перейти на DIV’ы и развить свои навыки в CSS.

    • Webmascon – Наверное, самый популярный сайт по теме. Жаль только, что он больше не обновляется. Кроме всего прочего, на сайте размещены несколько глав из книг Михаила Дубакова «Создание Web-страниц. Искусство верстки» и «Веб-мастеринг средствами CSS», которых я, к сожеланию, нигде найти не мог (хочется почитать). Очень рекомендую этот сайт!
    • Библиотека Сайтостроительства – Достаточно много как теоретической, так и практической информации, изложенной простым языком. Рекомендую!
    • Заметки HTML кодера – есть много интересных примеров применения CSS.
    • Tigir.com о web-технологиях – тоже есть интересные примеры.
    • CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
    • htmlbook.ru – Учебники по HTML, CSS, дизайну, графике и созданию сайтов.
    • Дэйв Ши, Молли Хольцшлаг. «Философия CSS-дизайна» – В этой книге на примере широко известного сайта CSS Zen Garden рассматривается применение каскадных таблиц стилей. Здесь нашли отражение такие вопросы, как подготовка HTML-разметки для последующего применения стилей, синтаксис языка CSS, принципы верстки, методы работы с графикой, особенности использования цвета, типографские эффекты и многое другое. Не осталась без внимания проблема неодинакового уровня поддержки CSS разными браузерами; авторы рассказывают о приемах, с помощью которых можно добиться межбраузерной совместимости.

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

    «Философию CSS-дизайна» можно скачать в Интернете в формате PDF (23 Mb). Однако качество сканирования на удовлетворительном уровнем, поэтому изучать ее в таком форме совсем неудобно. Именно по этой причине я купил реальную книгу в Интернете, чего и Вам советую, если проявите интерес.

  • Layout Gala – примеры вариантов верстки дивами. Есть множество решений, как для страниц с фиксированной шириной блоков, так и для процентной.
  • Генератор HTML+CSS шаблонов – Web 2.0 сервис, одним из создателей которого является автор этого блога. Данный инструмент в соответствии с выбранными параметрами генерирует 2 файла: CSS и HTML, которые представляют базовую основу (каркас) для будущего сайта. Большинство выдаваемых сервисом вариантов основано на структуре макетов вышеуказанного сайта Layout Gala, но они лишены одного бага, который присутствует в макетах Layout Gala.
  • Учебник по CSS-верстке – систематизированный список популярных статей для быстрого освоения принципов CSS-верстки. Рассчитано на специалистов, имеющих опыт веб-разработки.
  • Вот еще несколько книг, которые мне рекомендовали к прочтению в одном из дискуссионных листов Subscribe.Ru:

    • Джеффри Зельдман. «Web-дизайн по стандартам.» (общие вопросы проблематики современной верстки, исторический экскурс)
    • Дэн Седерхольм. «Пуленепробиваемый web-дизайн.» (сугубо практика и трюки)
    • Эрик Мейер. «CSS-каскадные таблицы стилей. Подробное руководство.» (говорят, что это просто библия!)

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

    В отдельной статье, которая периодически обновляется, я собрал хаки для разных современных интернет-браузеров: Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome.

    С опытом CSS-верстки количество используемых хаков Вы сведете к минимуму. И всегда стремитесь к тому, чтобы обходиться без них совсем, т.к. по сути CSS-хаки — это зло.

    Также хочу обратить внимание на следующее свойство, которое требуется для задания минимальной ширины страницы при блочной верстке, чтобы при сужении браузера, информация не съезжала в кучу (если ширина страницы «резиновая»):

    Цукерберг рекомендует:  Meteor - Ваше мнение о Meteor
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих