вторник, 3 июля 2007 г.

Дизайн

А вы как думали? На каком-то очередном дне рождения (разве упомнишь?) друг детства пожелал мне (а потом и всем присутствующим, поскольку за столом собрались в основном ровесники) не утрачивать с возрастом желания: "Чтобы — хотелось!". Не нужно думать, что всем нам не была известна вторая половина тоста ("чтобы моглось"). Просто с "моглось" у присутствующих и так было всё более-менее в порядке. А вот есенинское "я теперь скупее стал в желаньях", после пятидесяти заметили все. Сакраментальное "а оно мне надо?" таки отравляет жизнь. Я бы и сделал, да... ну, вы поняли.

Как ни странно, но вспомнил я об этом в связи с блогом. Как вопрос Алексея Федорчука "между делом" заставил меня заняться аналитикой посещения блога, так и вопрос Таси послужил поводом для экспериментов с дизайном.

Ну и, в соответствии с традицией, делюсь некоторыми результатами.

Раздвинув, в соответствии с пожеланием, заголовок страницы (достаточно "закомментировать" width), я добавил background-color, поскольку совсем не выделять область заголовка не кажется мне удачной идеей:

#header-wrapper {
/* width: 70%; */
 margin:0 auto 10px;
 border:1px solid $bordercolor;
 background-color: #d6d6e6;
}

Повозившись какое-то время с фонтом, кеглем, расположением, трансформацией и цветом текстов заголовка ( #header, #header h1, #header.description ), я пришёл к выводу, что "ETC.", в исполнении Воннегута, смотрелось бы на этом месте лучше. Сказано — сделано. Обучение работе с Photoshop-ом или Gimp-ом в мои планы не входит (догадываетесь, наверное). Тем более, что я сам в них профан. А все советы сводятся к следующему:

  • размер создаваемой картинки выберите чуть меньше по высоте, чем область заголовка;
  • ширину выберите минимальной, в которой ещё помещается всё, что хочется в заголовке разместить;
  • цвет фона картинки сделайте тем же, который используется в качестве background-color header-wrapper-а;
  • наличие и количество рамок меняйте в параметре border элементов, перечисленных выше.

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

Далее отправляемся в блог, переходим в Template -> Page Elements, выбираем Edit заголовка и вставляем картинку. Если ваша картинка по замыслу лишь фон для надписи, выбираем Behind title and description, если же нет (как в моём случае), выбираем Instead of title and description.

Повозившись какое-то время с размещением иллюстраций на страницах блога, я пришёл к выводу, что загрузка (upload) графических файлов непосредственно на blogger.com часто меня не устраивает. Во многих случаях я предпочёл бы хранение этих файлов на независимом ресурсе, с нормальными именами и url-ами. Разумеется, занимайся я репортажной съёмкой или любой другой деятельностью, предполагающей уникальность каждого загружаемого изображения, ничего подобного мне в голову бы не пришло. Но мои-то "картинки" предполагают размещение, как правило, на многих страницах. И изменять я их предпочёл бы однажды для всех.

Ресурс для хранения картинок выбирать долго не пришлось: раз вы используете сервисы Google, то googlepages.com в вашем распоряжении. login/password — прежние, разумеется. Будете ли вы использовать Google Page Creator — дело десятое, поскольку возможность загрузки (upload) и хранения графических файлов предоставляется и без этого. Файлы будут иметь те имена, с которыми вы их загружали, а ссылаться на них можно будет по адресу: http://your_login.googlepages.com/file_name" (где your_login — ваш google-login, а file_name — имя файла).

Включение изображений в посты блога описывать смысла не вижу: если оно не достаточно интуитивно — обратитесь к Google или тренируйтесь.

Выбрать придётся всего лишь:

  • способ загрузки (from your computer или from the web);
  • расположение (None ! Left! ! Center ! Right);
  • размер изображения (Small ! Medium ! Large).

Только вот по поводу размера изображения к blogger-у есть претензии. При загрузке из Сети размер выбирается из трёх возможных: Small ! Medium ! Large (с шириной 200, 320 и 400 пикселей соответственно). Мало того, что ни один из размеров может и не устроить, так ещё и пропорции меняются! А это уж форменное безобразие. Лечится, правда очень легко: в режиме редактирования HTML (Edit HTML) в соответствующем теге img напрочь убираем параметр width, вместе со значением. С этого момента изображения будут такого размера, какой задан в исходном файле. Желающие могут задать значение параметру alt — эта фраза будет выводиться браузером если графика по каким-либо причинам не отображается.

Комментариев нет: