Многоколоночная верстка с помощью CSS. Руководство для web разработчиков.

Владимир | | Разное.

логотип к etutorialБуквально на днях закончил два небольших проекта.

Во-первых, дописал eBook «Многоколоночная верстка». В нем привел самые, на мой взгляд, удобные приемы создания web страниц с двумя и тремя колонками.

Руководство ориентировано преимущественно на начинающих web разработчиков. Поэтому все примеры довольно простые и с подробным описанием. В тоже время, это не учебник по CSS и HTML.

Скачать eBook и примеры можно абсолютно бесплатно на сайте etutorials.simplecoding.org.

Во-вторых, запустил бета версию сайта etutorials.simplecoding.org. Сайт задуман как сборник руководств и примеров по программированию и web разработке. На данный момент на сайте всего одно руководство («Многоколоночная верстка») с примерами.

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

Кстати, сайт написан на PHP с использованием Code Igniter. О работе с этим фрэймоврком я запланировал целую серию статей (надеюсь, руки дойдут еще в этом году 🙂 ).
Сейчас скажу только, что Code Igniter оставил очень приятные впечатления. Безусловно, свои недостатки есть, но они довольно легко исправляются. А вот удобство использования и возможности настройки заслуживают самой высокой оценки.

Важно. На данный момент сайт собственной RSS ленты не имеет. Поэтому анонсы новых поступлений будут идти через ленту этого блога.

Интересно почитать

Эпидемиология и гигиена в Республике Беларусь

  • отлично!
    пока читаю руководство. позже укажу на, опять же, визуальные недочеты.

    кстати, у эмблемы сайта кернинг поправьте 🙂 как-то выглядит не этично (как-будто между Т и u пробел есть 🙂

  • отлично!
    пока читаю руководство. позже укажу на, опять же, визуальные недочеты.

    кстати, у эмблемы сайта кернинг поправьте 🙂 как-то выглядит не этично (как-будто между Т и u пробел есть 🙂

  • Действительно, не обратил внимания.
    Что-то не везет с этим логотипом, уже четвертый раз исправляю 🙂

  • Действительно, не обратил внимания.
    Что-то не везет с этим логотипом, уже четвертый раз исправляю 🙂

  • tenshi

    сайдбары обычно имеют фиксированный размер…

  • tenshi

    сайдбары обычно имеют фиксированный размер…

  • Скачал руководство, позже напишу впечатления 🙂

  • Скачал руководство, позже напишу впечатления 🙂

  • tenshi, название sidebar я использовал по-привычке. Колонки можно было назвать col1, col2 и т.д. Я не хотел привязываться к конкретному дизайну.

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

  • tenshi, название sidebar я использовал по-привычке. Колонки можно было назвать col1, col2 и т.д. Я не хотел привязываться к конкретному дизайну.

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

  • tenshi

    нее… фиксированная ширина — это зло 🙂 я предпочитаю страницы с авторесайзом, с ограничениями по размеру.

  • tenshi

    нее… фиксированная ширина — это зло 🙂 я предпочитаю страницы с авторесайзом, с ограничениями по размеру.

  • Зло не зло, а если в header позарез нужно вставить картинку, и растянуть ее никак не получается…

    Да и диапазон разрешений у мониторов сейчас очень не маленький 🙂

  • Зло не зло, а если в header позарез нужно вставить картинку, и растянуть ее никак не получается…

    Да и диапазон разрешений у мониторов сейчас очень не маленький 🙂

  • tenshi

    да ладно, при желании с прозрачными пнг-шками можно такого наворотить, что будет разъезжаться как душе угодно 😉

    а диапазон разрешений тут совершенно не важен. ограничения сверху для текстового контента — порядка 800 пикселей — достаточно для удобного чтения.

    а с манией заюзать всё доступное пространство — это уже к психиатору ^_^

  • tenshi

    да ладно, при желании с прозрачными пнг-шками можно такого наворотить, что будет разъезжаться как душе угодно 😉

    а диапазон разрешений тут совершенно не важен. ограничения сверху для текстового контента — порядка 800 пикселей — достаточно для удобного чтения.

    а с манией заюзать всё доступное пространство — это уже к психиатору ^_^

  • Согласен, можно найти выход из любого положения. И даже без прозрачных png (кстати, в старых версиях IE они далеко не прозрачные 🙂 ).

    По-поводу доступного пространства. Недавно пришлось читать один текст. А его автор выучил три правила:
    margin:0;
    padding:0;
    font-size:70%;

    Лучше бы вообще стилей не ставил. Или хотябы сам прочитал свой текст 😡 .

  • Согласен, можно найти выход из любого положения. И даже без прозрачных png (кстати, в старых версиях IE они далеко не прозрачные 🙂 ).

    По-поводу доступного пространства. Недавно пришлось читать один текст. А его автор выучил три правила:
    margin:0;
    padding:0;
    font-size:70%;

    Лучше бы вообще стилей не ставил. Или хотябы сам прочитал свой текст 😡 .