14.07.2005

Как не надо делать сайты

Есть крупная компания. “Комиэнерго”. Уставный капитал — 4 603 128 852 рубля (четыре миллиарда). У нее есть сайт. Сайт регулярно, иногда несколько раз в день, обновляется. Сдуру согласился заниматься его обновлением, за небольшие деньги.

Все страницы статичные, даже без инклудов. Copy-paste, edit, upload… Если захочется что-то глобально поменять, то придется не сладко, ибо страниц этих не мало. В корне сайта лежит около 500 файлов.

Зачем-то на сайте огромная горизонтальная полоса прокрутки.

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

Тот, кто делал сайт, познал огромные возможности CSS. Посмотрим на файл стилей. Его размер больше 6 Кб. Значит, все оформление можно вынести в него и оставить легкий и логичный код. Но…

Сначала лихо обнуляем margin и padding для всех элементов:

* {margin:0; padding:0;}

и, конечно же, покрасим scrollbar. Далее описывается куча (6 Кб) различных классов с загадочными названиями, которые определяют размеры, поля, отступы, фон, размер шрифта и т.д. И чтобы поставить обычную ссылку, приходится писать примерно так:

<a class="pr18 tc3 td0 hu" href="1.html">О КОМПАНИИ</a>

Так как мы обнулили отступы у всех элементов, чтобы разделить абзацы приходится вставлять 2 тега
<br />…

Встречаются еще такие забавные конструкции:

<td class="bgc2 bdbw1 bdbc4 fs1"> </td>

Хорошая штука CSS…

05.04.2005

Поддержка сайтов

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


<td width=100% style="background:url('/images/spacer.gif');
background-repeat:repeat-x;">

Где spacer.gif — прозрачный gif размером 1×1 пиксел.

22.03.2005

Title и charset

Внезапно охватили сомнения - надо ли указывать charset до title или это не критично. Открывая один сайт, увидел в title сначала иероглифы, а потом они превратились в нормальные буквы.

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

Посмотрел в интернете - везде по разному.

Charset до title

  • http://www.w3.org/
  • http://www.wellstyled.com/
  • http://www.boxesandarrows.com/
  • http://www.kottke.org/
  • http://csszengarden.com/

Charset после title

  • http://alistapart.com/
  • http://zeldman.com/
  • http://mezzoblue.com/
  • http://stopdesign.com/
  • http://webmascon.com/

24.02.2004

Redesign. Comin soon

В очередной раз решил заняться сменой дизайна этого сайта. Через пару дней планирую обновить. Избавляюсь от лишних элементов разметки, чищу уродский CSS Spectator’a, полный всяких непонятных классов, вроде .u, .xs, .q и т. .p.

А пока можно почитать статью Dave Shea “Understanding Design”.

07.02.2004

Kremlin.ru

Это правда, что kremlin.ru — официальный сайт нашего президента? Заглянем в source.

Интересно, кто этот сайт делал? Зачем там 2 (два) <head>, ни говоря уж об остальной жути кода? Конечно, герб Роcсии — двуглавый орел, но это не повод делать два <head> на сайте.

05.01.2004

Zeldman.com

На сайте Зельдмана (Jeffrey Zeldman) новый дизайн. Что-то меню ему не удалось. Вот так это выглядит у меня. Opera 7.10, Windows XP.

zeldman

16.12.2003

Работаем

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

10.12.2003

Как быть?

Music: Гей-на-на-на — Полоса

Есть сайт. Ужасный. Делал не я, а какие-то уроды. Надо в нем переделать несколько страниц. Меня мучал вопрос: делать ли страницы (списки, в частности) так, чтобы они хорошо выглядели и в Netscape/Mozilla, при условии, что в Mozilla/Netscape до этих страниц все равно не добраться, ибо чудодейственное выпадающее меню в этих браузерах не работает?

08.12.2003

CSS. Контент в первом блоке

Music: Shirley Bassey — Where Do I Begin (Away Team Mix)

Придумал себе задачу: сверстать сайт без таблиц, в три колонки, резиновый. Левая и правая колонки — фиксированной ширины, центральная — резиновая, хедер/футер. Причем блок с контентом центральной колонки должен идти в коде первым, после хедера, длина правой колонки неизвестна, а левая отличается цветом, и должна идти до футера. Пока не придумал, как сделать.

Нашел, как это сделать для страницы фиксированной ширины.

Еще одна интересная ссылка для совсем ленивых: Generate a CSS layout for your site. Ставите галочки напротив нужных элементов (правая колнка, левая колнка, футер и т.п.), выбираете цвета, жмете кнопку и гененрируется html и css. Красота!

06.12.2003

CSS. 3 колонки

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

Запутался где-то. В IE и NN6 все ок, в Opera какой-то отступ пикселов в 50, в результате чего появляется горизонтальная полоса прокрутки.

Разберусь в понедельник, а сейчас пойду пить коньяк.

28.11.2003

Valid!

Music: 5’NIZZA — Джамин

Представляем новый сайт, сделанный по стандартам xhtml. Без таблиц.
solotony.com

Верстка таблицами

Music: The Meteors — Surf City

Зачем я стал делать сайт таблицами? Теперь не могу с ним разобраться и исправить что-нибудь. Таблицы сосут. Я тоже.

25.11.2003

CSS и Netscape 4

Music: Захар Май + Шива — Шива Разрушитель

3 колонки с хедером и футером. Работает в Netscape Navigator 4.

Там же. 2 колонки с хедером и футером.

CSS-дизайн

Чем верстка с помощью CSS лучше таблиц. И о многом другом. Доступно описано и прекрасно иллюстрировано.
www.hotdesign.com/seybold/

10.11.2003

Карта “Невидимка”

Портфолио, или чем я занимаюсь.

Универсальный оператор связи Westcall выпустил новую телефонную и интернет-карту “Невидимка”.

nevidimka.ru

23.10.2003

Лень — двигатель прогресса

Music: Ventures — Harlem Nocturne

Требовалось сделать много статических html-страниц, разложить по каталогам и включить у каждой нужные кнопки в меню. Работы на час. Но нудной и неинтересной.
Написал скрипт, котрый сгенерировал мне эти страницы и положил в папки. Потратил пару часов.

08.10.2003

CSS hack — скрываем стили от Opera 6

Music: 5’NIZZA — Весна

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

Имеется:

  1. Opera 7
  2. Netscape 6
  3. Intenet Explorer 6
  4. Intenet Explorer 5
  5. Opera 6.

Для первых трех браузеров размер шрифта — small. Но IE5 и Opera 6 отображают его на размер больше, и для них надо выставить x-small. Подставить x-small для IE5 проблем нет, но с Opera 6 пришлось поковыряться.

Читать полностью "CSS hack — скрываем стили от Opera 6" →

01.10.2003

Веб-дизайн

Music: eek a mouse — rude boys a foreign

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

30.09.2003

Корпоративный сайт на CSS

www.inc.com — корпоративный сайт, сверстан с помощью CSS, без таблиц. Хорошо выглядит и с выключенными стилями.

Интересно вставлена картинка с логотипом. Для чего так сделано, пока не разобрался.

07.08.2003

Ну и работа

Current music: Bob Marley — Easy Skanking

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

Верстаю Adobe Image Ready. Хуякс, хуякс, четыре картинки, фиксированная ширина, image maps, никакого CSS, таблицы.

Навигация, бля — вперед, назад, главная. Лучше бы заказчики просто так деньги выкинули, или пропили, в конце концов.

Да, это делал я. Стыдно. А что делать? http://st1316.iho.ru

20.05.2003

Верстка

Current music: 8. 5’NIZZA — Я не той

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