Re: рубрика "зацените"
Posted: Sat Jan 10, 2026 7:01 pm
На новогодних каникулах я сделал ещё один сайт. Я давно его задумывал, тем более, что вся база у меня уже была.
Предыстория.
Ещё лет десять назад у меня появилось семейное хобби - наблюдение за птицами. Не то, чтобы полноценное наблюдение и орнитология, просто мы с женой решили узнать чуть больше о мире, который нас окружает (мы живём рядом с парком). Под это дело я купил на барахолке фотоаппарат с телеобъективом и начал собирать фотоальбом. Позже мы завели страницу в Инстаграме, куда я выкладывал отснятый материал. Не лайков ради, а чтобы иметь свою коллекцию всегда под рукой.
Пару лет назад я на основе накопившихся фотографий сделал с ребёнком презентацию в школе. Эта работа заняла первое место на городском конкурсе. И вот сейчас, желая сделать ещё какой-то сайт, я перевёл презентацию в формат web-страницы.
Концепция.
Это будет длинный пост, но мы тут и собрались для того, чтобы обсуждать сайты Web 1.0. Итак, сначала я прикидывал в голове макет будущего сайта. Просматривал сайты из начала нулевых годов в поисках интересного дизайна. Увы, душа ни к чему не лежала - всё казалось "не тем". Пока однажды меня не осенило: дневник наблюдения за птицами надо оформлять в виде дневника!
Эта простое решение вышло настолько удачным, что я сразу сел за работу. Скажу, что найти фотографию раскрытого блокнота или тетради оказалось непросто. Они либо все закрыты лицензией и водяными знаками, либо тетради на картинке расположены не анфас, а под углом.
Совместимость.
Я сразу же решил для себя делать сайт с поддержкой IE 6. Тут вылезла первая проблема: IE не понимает прозрачность в PNG файлах. Сначала я подумал заменить PNG на GIF, но из-за особенностей GIF-файла края блокнота на картинке получались рваные, как бы лесенкой. Поэтому, помучившись, я забил на прозрачность, обрезал картинку по краям блокнота оставив небольшой белый кантик и сохранил в JPG (файл стал весить гораздо меньше). Ещё, забегая вперёд, скажу, что пришлось продумывать совместимость и с современными браузерами. Дело в том, они они рендерят шрифты чуть шире, чем Chrome 49 под Windows XP, и если текстовая стока заканчивается на границе ячейки таблицы, то есть все шансы, что последнее слово уйдёт на новую строку и вёрстка съедет.
Чтобы не оставлять белый фон я подумал добавить какой-то ненавязчивый узор (бесшовную текстуру). Хотел что-то с птицами, но все узоры были слишком пёстрые и явно бы перетягивали внимание на себя. Взгляд случайно упал на птичьи следы и я понял - вот оно!
По моей задумке при просмотре сайта не должно быть полос прокрутки. Ты как бы смотришь на разворот дневника целиком. Поэтому я верстал под разрешение 1024х768 точек. Чтобы на более высоких разрешениях верхнее поле смотрелось нормально, в CSS я задал его значение в процентах, а не в пикселях. Я тестировал сайт на трёх популярных разрешениях экрана: 1024х768, 1366х768 и 1920х1080 точек и везде (в нормальных браузерах) полос прокрутки не было. Кроме браузеров IE 6 и 9 - там из-за большого меню с кнопками полосы всё-таки появляются. Но вряд ли кто-то сегодня будет просматривать этот сайт в IE.
Далее мне надо было определиться с видом ссылок и заголовков разделов. Раз это дневник, то и разделы должны быть написаны "от руки". Я искал шрифты, которые выглядели бы как рукописные, но не были рафинированными - они должны быть чуть неряшливыми, но не терять при этом разборчивости. Такой шрифт был найден, и я сделал на его базе кнопки с основными разделами. Поскольку IE не умеет в прозрачность PNG, то пришлось вырезать фон блокнота и размещать надпись на нём. Кнопки сделаны также в JPG. При наведении на кнопку появляется подчёркивание, что рифмуется с остальными ссылками на сайте.
Цветовое решение.
пару слов о цветах. Я хотел сделать привязку к чему-то реальному, и тут удачно у жены нашлись чернила (она занимается каллиграфией). Основной цвет кнопок синий, в цвет чернил "Танец Индиго" от "Малевича", а при наведении меняется на коричневый "Дикий мустанг" от него же. Цвет основного текста и ссылок такой же.
Макет.
В блокноте две страницы. На левой всегда отображаются ссылки для быстрого перехода, а на правой, собственно, информация. Сначала я хотел отвести обе страницы под информацию, но, во-первых, текста у меня немного, а, во-вторых, пользователь может запутаться при переходе по ссылкам.
Поверхность одной страницы разделена на сетку 24х9. Я использовал табличную вёрстку, мне она кажется более монолитной и надёжной. Я (перестал бояться и) стал использовать вложенные таблицы, из-за чего упростился сам процесс вёрстки - сейчас ячейки не меняют свои размеры и всё не плывёт из-за неправильных габаритов.
Работа с фото.
Для подготовки фотографий я вновь использовал свой старый лайфхак, которым пользуюсь последние лет пятнадцать - я загружаю фото в PowerPoint, обрабатываю его там, добавляю рамку, а после копирую через буфер обмена в графический редактор и уже там подгоняю под нужные размеры. Кстати, первоначальный макет я тоже примерял в PowerPoint-е. Очень удобно - рекомендую!
Итоги.
Стоит отметить, что все свои сайты я делаю на ретро-ноуте под управлением Windows XP. Программа для вёрстки - Adobe Dreamweaver CS3. Дополнительно использую PowerPoint 2007 и GIMP 2.8. Всё как в старые добрые времена!
Посмотреть, что у меня получилось можно по ссылке birds.w10.site. Надеюсь, вам понравится и вы тоже немного заинтересуетесь природой, которая вас окружает. Спасибо за внимание!
Предыстория.
Ещё лет десять назад у меня появилось семейное хобби - наблюдение за птицами. Не то, чтобы полноценное наблюдение и орнитология, просто мы с женой решили узнать чуть больше о мире, который нас окружает (мы живём рядом с парком). Под это дело я купил на барахолке фотоаппарат с телеобъективом и начал собирать фотоальбом. Позже мы завели страницу в Инстаграме, куда я выкладывал отснятый материал. Не лайков ради, а чтобы иметь свою коллекцию всегда под рукой.
Пару лет назад я на основе накопившихся фотографий сделал с ребёнком презентацию в школе. Эта работа заняла первое место на городском конкурсе. И вот сейчас, желая сделать ещё какой-то сайт, я перевёл презентацию в формат web-страницы.
Концепция.
Это будет длинный пост, но мы тут и собрались для того, чтобы обсуждать сайты Web 1.0. Итак, сначала я прикидывал в голове макет будущего сайта. Просматривал сайты из начала нулевых годов в поисках интересного дизайна. Увы, душа ни к чему не лежала - всё казалось "не тем". Пока однажды меня не осенило: дневник наблюдения за птицами надо оформлять в виде дневника!
Эта простое решение вышло настолько удачным, что я сразу сел за работу. Скажу, что найти фотографию раскрытого блокнота или тетради оказалось непросто. Они либо все закрыты лицензией и водяными знаками, либо тетради на картинке расположены не анфас, а под углом.
Совместимость.
Я сразу же решил для себя делать сайт с поддержкой IE 6. Тут вылезла первая проблема: IE не понимает прозрачность в PNG файлах. Сначала я подумал заменить PNG на GIF, но из-за особенностей GIF-файла края блокнота на картинке получались рваные, как бы лесенкой. Поэтому, помучившись, я забил на прозрачность, обрезал картинку по краям блокнота оставив небольшой белый кантик и сохранил в JPG (файл стал весить гораздо меньше). Ещё, забегая вперёд, скажу, что пришлось продумывать совместимость и с современными браузерами. Дело в том, они они рендерят шрифты чуть шире, чем Chrome 49 под Windows XP, и если текстовая стока заканчивается на границе ячейки таблицы, то есть все шансы, что последнее слово уйдёт на новую строку и вёрстка съедет.
Чтобы не оставлять белый фон я подумал добавить какой-то ненавязчивый узор (бесшовную текстуру). Хотел что-то с птицами, но все узоры были слишком пёстрые и явно бы перетягивали внимание на себя. Взгляд случайно упал на птичьи следы и я понял - вот оно!
По моей задумке при просмотре сайта не должно быть полос прокрутки. Ты как бы смотришь на разворот дневника целиком. Поэтому я верстал под разрешение 1024х768 точек. Чтобы на более высоких разрешениях верхнее поле смотрелось нормально, в CSS я задал его значение в процентах, а не в пикселях. Я тестировал сайт на трёх популярных разрешениях экрана: 1024х768, 1366х768 и 1920х1080 точек и везде (в нормальных браузерах) полос прокрутки не было. Кроме браузеров IE 6 и 9 - там из-за большого меню с кнопками полосы всё-таки появляются. Но вряд ли кто-то сегодня будет просматривать этот сайт в IE.
Далее мне надо было определиться с видом ссылок и заголовков разделов. Раз это дневник, то и разделы должны быть написаны "от руки". Я искал шрифты, которые выглядели бы как рукописные, но не были рафинированными - они должны быть чуть неряшливыми, но не терять при этом разборчивости. Такой шрифт был найден, и я сделал на его базе кнопки с основными разделами. Поскольку IE не умеет в прозрачность PNG, то пришлось вырезать фон блокнота и размещать надпись на нём. Кнопки сделаны также в JPG. При наведении на кнопку появляется подчёркивание, что рифмуется с остальными ссылками на сайте.
Цветовое решение.
пару слов о цветах. Я хотел сделать привязку к чему-то реальному, и тут удачно у жены нашлись чернила (она занимается каллиграфией). Основной цвет кнопок синий, в цвет чернил "Танец Индиго" от "Малевича", а при наведении меняется на коричневый "Дикий мустанг" от него же. Цвет основного текста и ссылок такой же.
Макет.
В блокноте две страницы. На левой всегда отображаются ссылки для быстрого перехода, а на правой, собственно, информация. Сначала я хотел отвести обе страницы под информацию, но, во-первых, текста у меня немного, а, во-вторых, пользователь может запутаться при переходе по ссылкам.
Поверхность одной страницы разделена на сетку 24х9. Я использовал табличную вёрстку, мне она кажется более монолитной и надёжной. Я (перестал бояться и) стал использовать вложенные таблицы, из-за чего упростился сам процесс вёрстки - сейчас ячейки не меняют свои размеры и всё не плывёт из-за неправильных габаритов.
Работа с фото.
Для подготовки фотографий я вновь использовал свой старый лайфхак, которым пользуюсь последние лет пятнадцать - я загружаю фото в PowerPoint, обрабатываю его там, добавляю рамку, а после копирую через буфер обмена в графический редактор и уже там подгоняю под нужные размеры. Кстати, первоначальный макет я тоже примерял в PowerPoint-е. Очень удобно - рекомендую!
Итоги.
Стоит отметить, что все свои сайты я делаю на ретро-ноуте под управлением Windows XP. Программа для вёрстки - Adobe Dreamweaver CS3. Дополнительно использую PowerPoint 2007 и GIMP 2.8. Всё как в старые добрые времена!
Посмотреть, что у меня получилось можно по ссылке birds.w10.site. Надеюсь, вам понравится и вы тоже немного заинтересуетесь природой, которая вас окружает. Спасибо за внимание!
).
посмотреть можно тут