Дизайн
На каком-то очередном дне рождения (разве упомнишь?) друг детства пожелал мне (а потом и всем присутствующим, поскольку за столом собрались в основном ровесники) не утрачивать с возрастом желания: "Чтобы — хотелось!". Не нужно думать, что всем нам не была известна вторая половина тоста ("чтобы моглось"). Просто с "моглось" у присутствующих и так было всё более-менее в порядке. А вот есенинское "я теперь скупее стал в желаньях", после пятидесяти заметили все. Сакраментальное "а оно мне надо?" таки отравляет жизнь. Я бы и сделал, да... ну, вы поняли.
Как ни странно, но вспомнил я об этом в связи с блогом. Как вопрос Алексея Федорчука "между делом" заставил меня заняться аналитикой посещения блога, так и вопрос Таси послужил поводом для экспериментов с дизайном.
Ну и, в соответствии с традицией, делюсь некоторыми результатами.
Раздвинув, в соответствии с пожеланием, заголовок страницы (достаточно "закомментировать" 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 — эта фраза будет выводиться браузером если графика по каким-либо причинам не отображается.
Комментариев нет:
Отправить комментарий