День десятый: хозяйке на заметку

journals_covers — 29.01.2010 Тут некоторые жалуются, что переделывать уже больше нечего - всё сделали : ))
Вообще так и должно быть, хотя при желании всегда можно найти что подправить

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

Начнём с технических подробностей: дифференциация страниц - как писать разные коды для разных разделов журнала.

Как это можно сделать? С помощью классов, заданных body, и позволяющих нам отличать одну страницу от другой.

Они заданы не во всех стилях, но в самых нужных они есть.

Помимо них в классах body может содержаться другая информация, например, класс выбранного макета страницы, но мне не приходилось ими пользоваться, поэтому про них мы говорить не будем.

Итак, классы страниц:

Bloggish, Expressive/Mixit, Flexible Squares

.lj-view-recent - свежие записи
.lj-view-friends - лента друзей
.lj-view-archive - календарь
.lj-view-month - отдельный месяц
.lj-view-day - отдельный день
.lj-view-entry - отдельный пост
.lj-view-tags - страница меток

Minimalism

.view-recent - свежие записи
.view-friends - лента друзей
.view-archive - календарь
.view-month - отдельный месяц
.view-day - отдельный день
.view-entry - отдельный пост
.view-tags - страница меток

Smooth Sailing

страницы не имеют своих классов

Как этим пользоваться?

Например, вы хотите в свежих записях поставить юзерпик в посте слева, а в ленте друзей - справа:

.lj-view-recent div.user-icon{
float:left;
margin-right:10px;
}

.lj-view-friends div.user-icon{
float:right;
margin-left:10px;
}

Как видите, всё очень просто. Перед классом элемента ставите класс страницы, и ваш код будет работать только для указанной страницы.

Теоретически, так можно все разделы журнала оформить по-разному, но это задача для настоящих маньяков : )


Следующий полезный навык - отлов багов

В переводе на русский - поиск ошибок : )

Первейшая задача - локализовать проблему, понять в каком именно блоке ошибка.

Для этого включите рамки всем блокам в интересующем вас месте страницы - это позволит вам сразу увидеть какие блоки работают так, как вы их попросили, а какие не хотят.
Так же это будет полезно для сравнения отображения страницы в разных браузерах - различия будут видны как на ладони.

Ещё проблема может быть в коде: где-то лишние скобки, где-то посеяли знаки препинания - и код находящийся ниже строки с ошибкой работать не будет.

Решение: перенесите весь код в отдельный файл, удалите всё из поля кодов и из файла вставляйте коды блоков по одному - по два, пока не появится ошибка на странице.
Так вы узнаете в каких именно блоках ошибка и сможете рассмотреть их более детально.

Так же для поиска ошибки внутри блока можно на время прятать строчки в комментарии, оставляя только те, работу которых вы хотите проверить.

Ну и конечно имеет смысл проверить, что вы обращаетесь к существующм классам элементов, а не к свежепридуманным вами : )
Используйте уроки как справочник, чтобы убедиться что вы не накосячили в названиях классов.
Подглядывайте в уроки, пока не будете 100%-но уверены, что всё верно напишете по памяти.


Теперь информация для тех, кто уже увлёкся созданием дизайнов и собирается копать дальше в этом направлении.

Есть прекрасный инструмент для работы со стилями: Web Developer

Это аддон к мозилле, который позволяет узнавать классы и id элементов, смотреть строение страницы и, самое главное, редактировать Css и мгновенно наблюдать как ваши стили применяются на странице.

Никаких подсказок и подсветки синтаксиса, коды писать руками, но, если вы уже достаточно уверено ориентируетесь в кодах, - думаю, вы оцените этот инструмент по достоинству : )

Подробнее читать тут


И ещё одна информация, которая, скорее всего, будет полезна всем: не берите коды штурмом, пожалейте свой мозг : )

Если чувствуете, что мозги кипят - займитесь чем-то другим. Прогуляйтесь, выпейте чаю с печенюшками (кстати, сладкий чай и шоколадки улучшают деятельность мозга) - отвлекитесь, одним словом.

Дайте вашим мозгам переварить новую непривычную информацию.

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


Ну а теперь по случаю завершения курса предлагается устроить чаепитие с плюшками : )

Все желающие могут похвастаться тем что у них получилось.

Для этого в теме коммента укажите стиль взятый за основу.
В самом комменте дайте ссылку на журнал где смотреть, так же напишите всё что сочтёте нужным добавить по поводу своего оформления.
Можете приложить небольшой скриншот.
Скриншот небольшой, до 300px по большей стороне.
Большинство сервисов умеют выдавать картинки небольшого размера

Комменты с большими картинками будут удалены, не щёлкайте клювом.

Как сделать скриншот?

Откройте нужную страницу на полный экран
Нажмите на клавиатуре кнопку Print Screen (она вверху справа)
Откройте графический редактор, создайте новый файл и вставьте туда ваш скриншот (Ctrl+V).
Сохраните как обычное изображение и залейте его на какой-либо картинкохостинг.


Ну и последнее.

Друзья мои, посмотрите какой огромный путь вы прошли!
У вас есть все основания гордиться собой : )

Кроме того, теперь в профиле своего журнала можете гордо написать что дизайн сделан вами собственноручно! Если использовали свои же картинки - тоже напишите, это вполне повод для гордости.
Если брали не свои - уместно указать где брали, в знак благодарности к автору подборки.


1. Уроки никуда не денутся, и все могут пользоваться ими и дальше.

2. Я буду продолжать отвечать на вопросы к урокам, но при одном условии: вы пробуете делать сами и просите помощи только если не получается.
Если вы раскрыли клювик и ждёте готовые коды - вы не по адресу.
Напротив - если вы думаете, действуете, экспериментируете - я всегда рада помочь.
Задавайте вопросы строго по теме поста

3. Если вы производите стилей больше, чем успеваете носить - добро пожаловать в layouts_ru : )

На память об участии в акции можете повесить в профиль баннер:



<a href="http://community.livejournal.com/journals_covers/78018.html"><img src="http://img-fotki.yandex.ru/get/3814/yoksel.4b/0_3527b_5b59f9aa_orig" width=125 height=50 title="Дизайн ЖЖ за 10 дней" border="0"></a>

		Навигация по урокам
		День 1. Поиск картинок День 2. Стиль и фон День 3. Ширина журнала День 4. Фон ленты День 5. Шапка журнала День 6. Сайдбар День 7. Посты День 8. Страницы комментариев День 9. Метки и календарь День 10. Хозяйке на заметку

Оставить комментарий

Популярные посты:

• Ранее
• Архив