Зверь-чародей
Этот пост составил Roldo и поскольку в комментарии пост не влез, постю его отдельно. Далее от его имени.
Я сделал это)) Теперь моё "почти полное руководство по diary CSS" готово и ждет своих читателей. Все заметки, дополнения, замечания, сообщения об ошибках, пожелания, благодарности и вопросы - в комменты. Под редакторством Рёцке сделал изменения в плане оформления текста, но думаю, что это еще не всё.
Как вы знаете, diary.ru предлагает возможность альтернативного оформления ваших дневников с помощью CSS. Что это такое и как этим пользоваться, я постараюсь объяснить в данном руководстве. Мне хотелось бы, чтобы, прочитав данные заметки, любой человек понял, как ему действовать в плане оформления блога с использованием CSS, поэтому писать буду максимально простым и доступным языком, так что особых научных понятий и гигантских изложений не ждите. Также обратите внимание на название: “Основы Diary CSS” – в руководстве будет лишь основная информация, необходимая для нестандартного оформления дневника, более полные описания приемов и примочек смотрите как обычно на сообществе diarycss. Если товарищи дизайнеры будут не против, то их находки впоследствии будут помещены сюда же с их авторством, чтобы обобщить всю имеющуюся по теме информацию. Спасибо за внимание, ваш Roldo.
читать дальше
1. Что такое CSS и зачем он нужен?
CSS (Cascading Style Sheets, каскадные таблицы стилей) – это набор параметров отображения элементов веб-страницы, т.е. стандартизированный язык описания внешнего вида документа html или другого формата. Говоря совсем по-простому, КСС – это набор средств, позволяющих описать, как будут отображаться на экране элементы страницы – таблицы, текст, ссылки, картинки в конце концов.
Для каждого элемента на странице есть свое собственное название или селектор: к примеру блок меню на diary носит название #side, так его прописали в коде страницы. Для элемента #side с помощью CSS можно задать свойства отображения, имеющиеся в активе, к примеру ширину - width. Если задать width равным 200 пикселей, то меню на экране отобразится именно с такой шириной. Однако о свойствах поговорим позже, сейчас рассмотрим другие обобщенные понятия.
Администрация @дневников дала возможность пользователям работать с собственными стилями оформления, т.е. мы можем добавлять в дизайн свои строки на языке CSS, соответственно с нашими желаниями меняя внешний вид своего дневника. Но выше головы тут не прыгнешь – код страницы менять нельзя, единственное что мы можем сделать – это видоизменять отображение имеющихся элементов страницы. Мы имеем возможность сделать так, чтобы некоторые элементы не отображались, но добавить новые не получится, приходится работать с тем, что имеем.
Но КСС – услуга платная, и доступна только тем, кто оплатил свой дневник любым возможным способом. Почитать о них можно тут - diary.ru/options/pay/ войдя под своим логином. Тут тоже не все так просто – оплата дневника заключается в покупке обязательного пакета услуг, а к этому пакету уже можно добавить платные сервисы, к числу которых относится и CSS. Перечислив деньги на счет, вы можете прикупить нужный пакет, добавив в него CSS на определенный период, и пользоваться им, пока период оплаты не истечет. По вопросам оплаты обращайтесь к администрации и в справку, я же подскажу лишь несколько связанных нюансов.
Где взять деньги? Во-первых, у каждого пользователя есть тестовые 100 дайрублей, которые можно использовать как оплату пакета + КСС на небольшой период времени. Будьте внимательны – не тратьте все деньги на пакет, иначе на CSS и другие нужные сервисы уже не останется. Во-вторых, всегда можно участвовать в конкурсах, проводимых администрацией или сообществами. Большое количество таких размещается на konkoors.diary.ru. Ну и самый простой способ получения @наличных – присылание ссылок в Diary best. Этот проект призван собрать самые интересные посты в diary.ru, и присылая хорошие ссылки, вы получаете возможность каждую неделю выиграть в конкурсе популярности и заполучить заветные деньги.
Итак, оплатив КСС, вы имеете возможность им пользоваться. Как это делается? Заходите в настройки оформления дневника и смотрите вниз – там появилось поле CSS, куда вы вводите свои строки кода и получаете результат в виде дизайна.
3. Синтаксис CSS.
Синтаксис – это правила написания кода. Ничего сложного тут нет, главное – знать название (селектор) нужного вам элемента (блока). Вот образец написания строк на языке CSS:
Селектор элемента1 {свойство: значение; свойство: значение; свойство: значение;}
Селектор элемента2 {свойство: значение; свойство: значение;}
И так далее.
В готовом виде это выглядит так:
Для каждого элемента страницы прописываем его свойства по правилам их описания. Свойств – множество, и выписывать их все нет смысла, для этого есть специализированные сайты, например: htmlbook.ru/css/ , где по каждому свойству дано подробное описание его возможностей, применения в браузерах, даны примеры кода и вида. Любое из этих свойств вы можете применить и к элементам страницы вашего дневника согласно правилам. Не обязательно читать сразу всё, для начала определитесь, чего бы вам хотелось сотворить с элементом, а потом ищите нужные вам результаты в описании свойств на сайте. Постепенно вы освоите их все, по некоторым наиболее распространенным я дам описание прямо здесь в учебнике.
Более сложная конструкция описания элементов страницы в КСС заключается в использовании классов. Класс – это идентификатор индивидуального стиля элемента страницы, для одного элемента может быть задано несколько классов со своими стилями, и применяя тот или иной, можно добиться различного отображения элемента. Имя класса начинается с точки, и в описании используется так: Тег.класс (напр div.bordered). Подробнее о классах здесь: stepbystep.htmlbook.ru/?id=48
Прописываем код так:
Прежде чем приступить непосредственно к работе, нужно усвоить одну вещь – CSS – это стандарт, а браузеры написаны не на 100% в соответствии со стандартом, поэтому то, что смотрится «правильно» в одном, будем в другом смотреться совершенно иначе.
Запомните: Вы можете сделать всё под себя, так как вам нравится, но если вам нужны читатели, то хорошо было бы подумать и о них. Неудобный вид вашего дневника уж точно не привлечет к вам постоянного внимания пользователей, и дело тут не только в кроссбраузерности – нарушение правил дизайна или разность отображения при различных разрешениях монитора также накладывает свой отпечаток.
Правила дизайна просты: надо, чтоб было красиво. Лучше не использовать ярких кислотных цветов, ужасных контрастов вроде красного с зеленым или синим, сильно темнить или светлить. Еще один факт – пользователи могут смотреть ваши дневники, не включая картинки в браузере, чтобы снизить трафик, и если у вас в качестве фона картинка, то она видна не будет. Поэтому постарайтесь сделать так, чтобы без картинок ваш дизайн тоже смотрелся хорошо – не используйте цвет текста такой же, как цвет его фона, потому что цвет фона все равно используется (именно для таких случаев), даже если в качестве фона еще и картинка.
Затем, у всех пользователей разное разрешение экрана. Это значит, что ваш дневник будет смотреться на разных разрешениях по-разному, и это надо также учитывать ради читателя. Не мельчите и не гигантоманьте с текстом и другими элементами, смотрите за шириной и высотой элементов. Самое простое, что можно предложить для решения проблем – переключайте разрешение своего монитора повыше и пониже и смотрите, как будет отображаться. Если ваш монитор не поддерживает высоких разрешений, то попросите друзей проверить дизайн на своем компьютере, устройте тестирование.
Вернемся к браузерам. Всегда неплохо иметь под рукой хотя бы два – Internet Explorer и еще какой-нибудь, особенно Opera или Firefox. Еще лучше – все три, и смотреть на свой дизайн в них. Обращайте внимание на стандарт написания кода, если есть какие-то проблемы с отображением. Бывает так, что не совсем корректный код имеет правильное отображение в одном браузере и неправильное в другом. Приводите в корректный вид.
Наконец, для всех проблем существует одно решение – сайт browsershots.org/
Вводите адрес своего дневника, выставляете галочки для тех браузеров, в которых вы бы хотели проверить отображение дневника, выставляете параметры размера (разрешения) экрана и прочие параметры и нажимайте «Отправить». В течении получаса на сайте будут отображаться скриншоты вашего дневника в разных браузерах, смотрите на них и делайте выводы.
5. Как посмотреть код чужого дизайна и страницы?
Очень полезная штука – просмотр кода страницы, так сказать «не отходя от кассы». Ваш пользовательский код CSS «вшит» в тело страницы, поэтому вы можете посмотреть ее код и увидеть там ваш КСС и стиль по умолчанию, прописанный дизайнером @дневников. Для этого в IE войдите в меню Вид и выберите «просмотр html-кода». В Opera меню Вид и «Исходный текст» (ctrl+f3), в FireFox – Вид/Посмотреть исходный код (View source).
Ваш код CSS находится в разделе «Пользовательские стили» ближе к началу, но сначала идет код дизайна по умолчанию, откуда вы можете взять названия элементов страницы. Синтаксис кода по умолчанию – обычный для CSS.
Помните, что копировать личные коды без разрешения автора - нельзя.
6. Элементы дизайна дневника.
Со вводной информацией покончено, перейдем к делу. Начнем с того, что рассмотрим основные элементы, присутствующие на странице вашего дневника. Их теги должны быть прописаны так, как здесь, с соблюдением заглавных и строчных букв!
Во-первых, body. Это само «тело» страницы – ее основное поле, она сама. На ней расположены все остальные объекты. И шрифты с цветами, которые вы прописываете стандартными средствами оформления дневника (без КСС) выполняются именно для body. Т.е., если вы ставите для тела фон черного цвета, то этот фон будет как бы для всего дневника в целом, остальные элементы будут расположены на этом фоне.
Body имеет различные селекторы для разных страниц дневника - главной, комментариев, избранного и т.п. - селектор #Journal для главной страницы и классы:
.left – когда меню располагается слева от постов
.right – меню справа.
.journal_list
.block_design – если дизайн блочный.
Эти классы не обязательно используются на странице, поэтому в начале работы лучше их не трогать.
Другие элементы представляют собой таблицы и блоки. Что есть таблица (блок) – это прямоугольник заданной ширины и высоты, имеющий свойства и внутри которого можно размещать другие элементы и/или блоки, текст, фон, картинки.
#wrapper – основной элемент дизайна – общий блок, на котором (внутри которого) расположены все остальные. Другие элементы позиционируются и процентируются относительно этого, являясь дочерними.
#page-c – блок, на котором фактически размещаются сообщения дневника. Он служит главным блоком записей.
#page-t – блок, дочерний к page-c, на нем размещаются посты. Находясь внутри page-c, этот блок перемещается и меняется одновременно с родительским, поэтому если вы хотите использовать возможности обоих блоков, то прописывайте для page-t отдельные свойства.
#side – блок меню. На нем находятся, во-первых, название дневника (ссылка на его адрес), фотография и логин пользователя, а во-вторых – ссылки на элементы меню (Мой дневник, Настройки и т.п.) и баннер статистики от li.ru.
#extratop – отключенный по умолчанию элемент, который расположен над блоками page-c и side, но внутри wrapper’а. Основное его предназначение – это «шапка» страницы, в которой можно разместить картинку или вынести пункты меню.
#extrabottom – отключенный по умолчанию элемент, который расположен ниже блоков записи и меню, но также внутри блока wrapper. Это таблица, у которой можно задать фон в виде картинки, дополнив свой дизайн нижним «основанием».
#epigraph – это эпиграф дневника.
#post0 – это содержание эпиграфа, оно находится внутри #epigraph’а
Элементы меню (#side). Фактически это всё ссылки, но для каждого элемента можно прописать отдельные свойства. Список таких элементов собирали еще Tex, Zolotzzze=) и другие, я же помещу его сюда в полном виде отдельно.
Элементы колонки меню:
Группировки элементов:
У каждой группировки имеется класс .menuSection , описывающий ее свойства. Редактируйте свойства этого класса, чтобы менять оформление для всех группировок сразу.
#thisDiaryLinks – поле ссылок на чужой дневник (Избранное автора, Цитатник автора, Ссылки автора и т.д.)
#myDiaryLinks – поле ссылок на ваш дневник (Мой дневник, Новая запись, U-mail и т.д.)
#YaSearch - Поиск по дневнику
#thisDiaryOwner – поле ссылок, относящихся к автору (Написать на Умайл, поднять в списке)
#globalLinks – поле глобальных ссылок (Главная страница, Каталог сообществ, Случайный дневник)
#myLinks – поле «Мои ссылки»
#Stats – поле, где расположен баннер статистики от li.ru
#pchs – поле постоянных читателей (если отображаете его через Опции)
#lastComments – поле последних комментариев (если отображаете)
Сами элементы:
#authorFav - Избранное автора
#authorQuot - Цитатник автора
#authorLiks - Ссылки автора
#authorAlbum - Альбом автора
#authorRSS - RSS автора
#writeToAuthor - Написать на U-mail
#subscribeEmail - Подписаться на дневник
#unsubscribeEmail - Отписаться от дневника
#addToFav - Добавить в избранное
#delFromFav - Удалить из избранного
#postsCalendar - Календарь записей
#albumLink - Альбом
#rssLink - RSS
#joinThisComunity - Вступить в сообщество
#writeThisComunity - Написать в сообщество
#comunityFav - Избранное сообщества
#leaveThisComunity - Покинуть сообщество
#headlineList - Список заголовков
#tagslistlink - Темы записей
#myDiaryLink - Мой дневник
#writeThisDiary - Новая запись
#myDraftLink - Черновики
#umailLink - U-mail
#myFavLink - Избранное
#myQuotLink - Цитатник
#discussionLink - Дискуссии
#myLinksLink - Мои ссылки
#myProfileLink - Мой профиль
#optionsLink - Настройки
#photolibLink - Библиотека изображений
#upInChart - Поднять в списке
#allDiaryLink - Все дневники
#mainpageLink - Главная страница
#favListLink - Список избранных
#pchListLink - Список ПЧ
#communityCatalogueLink - Каталог сообществ
#myCommunitiesLink - Мои сообщества
#myCommunityLink - Моe сообществo
#randomDiaryLink - Случайный дневник
#diarySpiritLink - @дневники: изнутри
#diarySupportLink - Техподдержка
#paySupportLink - Техподдержка платных
#faqLink - FAQ
#iAmQuit - Выход
#Stats - Моя статистика
#comments - Комментарии +
#subscribe - Подписаться
#unsubscribe - Отписаться
#addToQuote - Добавить в цитатник
#quote_post - написать у себя (это под записью)
#quote_comment - написать у себя
#prevPostLink - предыдущая запись
#nextPostLink - следующая запись
#urlLink - URL
#sortOrder - кнопка Сортировать записи
.editPostLink - кнопка "Редактировать запись/эпиграф/коммент"
.delPostLink - кнопка "Удалить запись/коммент"
#myDraftLink - Черновик
#thisDiaryPhoto - Фото владельца дневника
Цитата прописывается классом span.quote_text, для которого также можно задать свойства стандартными методами. Если вы хотите оформить цитаты, сделанные в постах или комментариях, несколько иначе, чем обычный наклонный текст, то воспользуйтесь этим классом: span.quote_text {свойства}
Перейдем к описанию более сложных элементов.
#div_img – Тег отображения картинок, которые вы выкладываете в постах. (![]()
..)
#div_img:hover – Оформление картинок, когда курсор мыши находится на ними.
#authorName – Имя (логин) автора, располагается изначально под фотографией.
#side h1 A – ссылка на ваш дневник, располагается над фотографией и отображает название дневника.
#topNav – для табличного дизайна это поле, где размещаются ссылки «Главная», «Все дневники», «Случайный дневник» и т.д. наверху страницы. Альтернативное меню.
#topNavLinks – сами ссылки в этом поле.
div.clear – этот служебный класс используется для разделения постов и других элементов между собой. Располагается под всеми постами и эпиграфом и в случае чего с ним можно поиграться, но осторожно)
#thisDiaryInfo – Блок, в котором располагается название дневника, фотография и имя автора, то есть #side h1 A, #thisDiaryPhoto и #authorName
#postsArea – блок внутри page-t, в котором располагаются посты. К этому блоку применяется класс .bordered
Собственно, что есть .bordered? Это класс, который применяется к нескольким элементам страницы – меню и постам. Описывает он область, внутри которой меню и посты находятся, поэтому, изменяя его свойства, вы влияете на отображение и того и другого.
.order_button – класс описания области над постами, где располагаются кнопки сортировки. Используется для div (div.header order_button)
#sortOrder – описывает область, в которой находятся кнопки сортировки записей. Эта область совсем небольшая и находится прямо вокруг самих кнопок.
#sortFromBegin – кнопка сортировки записей в порядке следования
#sortFromEnd – кнопка сортировки записей в обратном порядке
#sortFromLastComment – кнопка сортировки по последним комментариям.
.singlePost – класс, описывающий стиль для одиночного поста в вашем дневнике. Сверху – заголовок, в середине текст записи, внизу ссылки на URL, комментарии, цитатник и подписку на пост.
.countFirst и .countSecond – классы, применяемые для оформления постов «через раз». По умолчанию, если взглянуть на ваши записи, то видно что цвета записей немного различаются – то один цвет, то другой поочередно. Так вот, это реализовано через данные классы – одному посту дается один класс, следующему – второй, потом снова первый и так далее.
.first – класс, описывающий последний сделанный вами пост.
.countFirstDate, .postDate, .uline – классы, относящиеся к описанию поля, где расположена дата написания поста.
.header – класс описания заголовка постов и эпиграфа.
.postTitle – класс описания заголовка поста.
.commentAuthor – описывает блок информации о человеке, оставившем комментарий к записи. Этот блок содержит:
.avatar – класс описания аватара.
.sign – класс описания подписи под аватаром.
#commentsArea – блок комментариев к записи. Открывается, когда вы нажимаете на «комментировать» и содержит, естественно, комментарии.
.postContent – класс описания содержимого поста (его текста и прочего)
.postInner – содержимое поста.
.paragraph – текстовое содержимое поста. Все эти классы описывают содержимое записи, но .postContent применяется для общего описания, а .paragraph – уже для самого конкретизированного.
.atMusic – описывает поле @Музыка
.atMood – описывает поле @Настроение.
.atTag – описывает поле @Темы
Элементы поста:
Предыдущая запись - .prevPostLink
Следующая запись - .nextPostLink
u-mail - .umail
E-mail - .email
Дневник - .diary
Профиль - .profile
Добавить в цитатник - .addToQuote
Подписаться - .subscribe
Комментарии - .comments
Написать у себя - .quote_post
.postLinksBackg – Класс описания блока ссылок внизу поста (комментировать, подписаться и т.п.)
.postLinks – описание ссылок Комментировать, Подписаться и В цитатник.
.urlLink – описание ссылки на URL.
#pageBar и класс .pageBar описывают блок под всеми постами, где расположены ссылки на страницы дневника (номера страниц, «следующая» и т.п.)
.pages_str – описывает ссылки на предыдущую и следующую страницы.
Итак, практически со всеми элементами и классами страницы мы познакомились, теперь можно для каждого из них задавать свойства в CSS.
Поэкспериментируйте – закройте дневник на время и меняйте свойства различных элементов и классов, потом сохраняйте и смотрите, что получается в итоге. Так вы представите себе картину расположения блоков дневника подробнее и поймете, как вам лучше действовать в плане изменения их оформления.
7. Основные методы работы.
В этой главе речь идет о тех приемах, которые обычно используются для редактирования оформления дневника в CSS. Также рассмотрим главные принципы работы с оформлением, использующим CSS.
Самое главное – значения ширины, высоты, толщины и прочие, связанные с измерениями, измеряются в пикселях, и после каждого значения нужно писать px, например
Если нужно указать величины в процентном соотношении, то пишем %
Второе – краткий курс английского.
Top – верх
Bottom – низ
Left – лево
Right – право.
Center - центр.
Третье – отступы. Есть два вида свойств – margin и padding. Обязательно и подробно читаем здесь - htmlbook.ru/css/margin.html htmlbook.ru/css/padding.html
Margin задает отступ между краем родительского элемента и текущего.
Padding – внутренний отступ между краем текущего элемента и его содержимого.
Большинство проблем с некорректным отображением совместного расположения элементов заключается в том, что у этих объектов проставлены отступы. Выставляйте margin:0 и padding:0 , чтобы избежать таких проблем.
Для начала неплохо бы убрать все отступы в body, чтобы не было расстояния между краями экрана и элементами
Четвертое – важность. Тег !important показывает, что свойство имеет большую важность, и должно выполняться именно так, как прописано вами в CSS. Пишется только так, а не иначе:
Все про этот тег читаем на htmlbook.ru/css/!important.html
Вложенность
Записи типа #селектор ul или #селектор li означают, что свойства, прописанные для этих связок, действуют на подэлемент элемента, обозначенного #тегом. Чтобы разобраться, как это работает, нужно знать состав страницы:
Div – это блок с содержимым типа текста, ссылок и прочего. Для него задаются классы (.class) или селекторы (#selector). С помощью div задано множество элементов страницы дневника, к ним применены различные классы.
Ul – устанавливает маркированный список, например для списка постоянных читателей, отображаемого на вашей странице. Элементы такого списка обозначаются тегом li.
Li – сам элемент маркированного списка.
A – ссылка.
Таким образом вы можете видеть, для чего используется оформление в готовом коде.
Если нужно прописать два элемента с одними и теми же свойствами, используйте запятые: #odin, #dva, .tri {свойства}
Такое написание немного уменьшает код страницы и увеличивает удобность его просмотра.
a – используется для описания ссылок. :hover – показывает, что описывается момент, когда курсор мыши находится над элементом.
Как сделать элемент невидимым? Поможет свойство «display: none» . Использование такой конструкции убирает элемент из документа, так что место под него не резервируется, помните об этом.
Свойство display также поддерживает другие значения, например block – часто используется в коде дневников. Почитайте об использовании здесь - htmlbook.ru/css/display.html и обратите внимание на поддерживающие браузеры.
Фон. Фон можно применить для любого блока, вот как это делается:
Картинка для фона берется ТОЛЬКО из вашей библиотеки изображений. Загрузите картинку туда, но помните – ее «вес» в килобайтах – залог удобства использования вашего дневника. Чем меньше вес, тем лучше для читателя, поэтому постарайтесь доводить количество килобайтов ваших картинок до минимума.
Если у вас есть Фотошоп, значит должен быть и ImageReady – пакет как раз таки предназначенный для оптимизации изображений. Открыв в Фотошопе картинку, выберите вместо пункта «Сохранить как», пункт «Сохранить для сети» (“Save for web&rdquo
, расположенный сразу после. Откроется окно, в котором вы можете выставить параметры оптимизированной картинки. Есть несколько стандартных установок (Preset), имеющих уже подобранные параметры оптимизации, например GIF с разным числом цветов или Jpeg в трех качествах. Самое низкое качество означает наименьший размер, превью помогает увидеть оптимизированную картинку, согласно которой вы сами можете выставить ползунок качества так, как вам надо. А под картинкой находится ее размер в оптимизированном виде (в килобайтах), который меняется автоматически при изменении качества – следите за ним. Скажем так – картинка в jpeg размерами 1000х200 в среднем должна весить килобайт 50 – отталкивайтесь от этой цифры. Если в вашей картинке цветов мало и это не фото, то выставьте тип сжатия GIF с различной цветностью, это совсем уменьшит картинку. Совсем маленькие картинки тоже лучше делать в gif.
Если же Фотошопа у вас нет совсем, то скачайте оптимизатор изображений Ashampoo Photo Optimizer, разберитесь, как он работает и уменьшайте картинки в нем.
Программу для ознакомительной работы вы можете скачать тут:
rapidshare.com/files/72805523/Ashampoo.Photo.Op...
Пароль к архиву – netzor.org
Так вот, вернемся к нашим баранам:
Загрузив картинку в библиотеку, вы увидите ссылку на нее – URL. Скопируйте ссылку и используйте ее в следующем коде:
Например
В кавычках находится адрес вашей картинки из библиотеки, все, что находится до /userdir/ надо удалить, остальное оставить.
Какие еще издевательства можно учинить над фоном, а также абсолютно все свойства бэкграунда расписал bokonist вот здесь - diarycss.diary.ru/p23302335.htm#93256451
Запомните – сначала идет указание позиции фона по вертикали (top, center, bottom и т.п.), потом по горизонтали (left, center..)
Шрифты. Они могут применяться для любого блока, который содержит текст.
Свойств по теме много – font, font-family, font-size, font-style, читайте о них тут - htmlbook.ru/css/font.html
В сообществе есть материал, посвященный смене шрифта на «нестандартный» - diarycss.diary.ru/p23314167.htm#
А вот разбор шрифтов от Tex - tex.diary.ru/p51528605.htm#
Рамки вокруг блоков. Обвести блоки рамкой можно с помощью свойства border.
htmlbook.ru/css/border.html
Если нужны рамки только с некоторых сторон объекта, то пользуйтесь свойствами border-left (слева), border-right (справа), border-top (сверху), border-bottom (снизу).
Примеры:
Ширина и высота объектов. Вы можете менять эти параметры у объектов страницы, если вам это нужно, при этом их содержимое по-разному будет воспринимать изменение размеров. Корректно будет смотреться, если размеры внутреннего (дочернего) объекта равны, либо меньше размеров внешнего (материнского). Например, размеры page-t не должны быть больше, чем у page-c. Внимательнее читайте описание объектов, приведенные во 2 части данного руководства.
Ширина задается через width, высота через height.
Вы можете задать их значение пикселями (400px), либо в процентном соотношении (50%)
А теперь важное замечание! Процентаж ширины и высоты элемента зависит от размеров его материнского объекта! То есть, если вы задали ширину заголовка поста в 40%, то он будет отображаться в 40% от ширины самого поста, а не ширины страницы. Процентное соотношение хорошо использовать, чтобы создавать объекты, динамические изменяющиеся со сменой, скажем, разрешения монитора. Но всегда лучше начинать процентирование именно со внешних главных объектов – по умолчанию большинство их внутренних элементов уже меняют свои размеры вместе с ними.
К) Смена положения объектов. Все очень любят изменять положение элементов страницы, поэтому внимательно прочитайте данный абзац.
Дочерние элементы страницы позиционируются относительно своих родительских элементов! И если вы будете изменять именно их положение, то родительские свойства будут влиять них, и некоторые аспекты изменения местоположения связанных объектов не позволят вам получить именно то, чего хотелось бы. Сейчас подробнее.
Положение объекта определяется свойством position (позиция). Оно имеет четыре возможных значения:
static – значение по умолчанию. Оно показывает, что объект находится там, куда его определили кодом страницы.
absolute – определяет, что элемент с такой позицией имеет свои собственные параметры расположения, и не участвует в распределении других объектов по странице. Они выстраиваются уже как будто без него, а положение его определяется свойствами объекта – top, bottom, left и right, выражаемыми в пикселях. О них подробнее чуть позже.
relative – Позиция определяется относительно исходного расположения объекта. Использование left, right, top, bottom, смещает объект относительно его расположения.
fixed – Положение определяется как и у absolute, но оно не меняется при прокручивании страницы и изменении разрешения экрана и размера страницы. (И не работает в IE6)
Теперь о свойствах положения.
left в пикселях показывает смещение объекта относительно левого края (родительского объекта либо экрана), top – смещение относительно верхнего края и так далее. МОЖНО использовать МИНУСЫ, то есть выражать позиции отрицательными значениями (-100px). Особенно это касается дочерних объектов – они будут смещаться относительно родительских, если те находятся не с краю, то логично было бы поставить отрицательное значение, если надо вынести дочерний объект за край.
Другое важное замечание – если положение родительских объектов не определено в точности, то положение дочерних объектов может меняться при изменении страницы, разрешения экрана и даже в разных браузерах при абсолютном позиционировании! Поэтому, если вы определили позицию какой-нибудь ссылки меню, а она показывается по-разному в разных случаях, то проверьте позиционирование самого меню, лучше всего ставить absolute или fixed для обоих объектов и начинать с главного. Когда он будет всегда отображаться так, как вам надо, приступайте к оформлению внутренних элементов. Этот прием хорош в любом случае – всегда лучше начать оформление с глобальных вещей.
Позиционирование по процентам также возможно.
Если нужно разместить элемент в точке, расположенной на 1/5 расстояния от левого края экрана, то указывайте позицию как left: 20%. Помните о связях объектов – они будут позиционироваться от тех точек, на которых расположены их «родители».
Дизайн фиксированной ширины по центру, слева и справа.
Это – стандартная схема оформления дневника, которую многие используют, и которая удобна и хороша. Вот тут Tex все подробно описал - tex.diary.ru/p41771510.htm
Не забывайте о разном разрешении экрана у пользователей – если вы сделаете блоки очень узкими, то у людей с широким экраном они будут занимать 30% страницы и смотреться не очень хорошо.
Картинки вверху и внизу экрана. Этот прием характерен и удобен для дизайна фиксированной ширины, описанного в прошлом абзаце. Делается все просто – нужно задать ширину и высоту для #extratop и #extrabottom и поместить туда картинки в качестве фона. Для фиксированного дизайна ширина объектов задается такой же, как ширина блока wrapper, не больше. Высота равна высоте картинки, при этом саму картинку нужно подогнать по ширине к основному блоку.
Вот пример:
Если #extrabottom отображается некорректно. Существует две главных проблемы с его отображением: между ним и блоком записей пробел, и он отображается сразу после меню, либо после #extratop.
Первая проблема связана со свойствами классов блока записей. А именно – с отступами в них. Убирайте отступы с помощью margin и padding:
То же самое можно прописать для #page-c.
Вторая проблема связана с позиционированием. Если вы что-то меняли в блоках, то вполне возможно нарушили «общую картину» кода страницы. Но выход есть –
Свойство float: left; для #extrabottom показывает, что элемент выровнен по левому краю, а другие элементы должны обтекать его по правой стороне. В некоторых случаях это работает, попробуйте добавить в свойства блока.
Свойство clear: both, для #extrabottom наоборот, запрещает обтекание элемента с обеих сторон. Работает для других случаев. В общем, если появились проблемы подобного рода, пробуйте одно из этих решений, а если не получается, то пишите в сообщество diarycss.diary.ru
Динамически изменяющийся размер блоков, динамический дизайн.
Фиксированная ширина не всегда хороша и интересна, поэтому пользуйтесь возможностями CSS для создания объектов, меняющих свои свойства при смене разрешения экрана или размера страницы.
Тут поможет процентирование, а именно – указание ширины блока (width) в процентах. При таком описании ширина объекта будет задаваться относительно других элементов страницы, и если они будут менять свои свойства, то вслед за ними изменится и текущий объект. Например,
#wrapper {width: 80%;} заставит основной блок всегда занимать 80% экрана, а #page-t {width: 90%;} покажет, что поле с постами будет занимать 90% от ширины блока page-c (родительского). Конечно, подобного эффекта можно добиться и отступами, но ширину родительского элемента все равно лучше задать процентами.
Основной способ организации динамического дизайна заключается в следующем:
Выставляем ширину #wrapper в процентах, проще всего 100% (от ширины экрана).
Ширину блока #page-c делаем в процентном соотношении так как удобнее, и она, завися от ширины wrappera, будет изменяться также относительно ширины экрана.
При этом всегда нужно следить, чтобы меню #side (зависит от #wrapper) занимало при этом не больше оставшегося пространства, иначе оно будет отображаться не там, где нужно. Проверить это можно, выставив разрешение монитора поменьше, например 1024*768 и посмотрев на свою страницу. Такое разрешение имеет множество пользователей, поэтому ориентируйтесь в первую очередь на них.
Установите фиксированную ширину для #side. Чтобы меню не «уезжало», надо чтобы #page-c занимал, допустим (1024 минус ширина_меню) пикселей. Больше – можно.
Для меню #side в таком случае еще хорошо помогают строки position:absolute; clear: left; - они абсолютно позиционируют меню «вне кода» и показывают, что другие элементы должны обтекать меню по правому краю.
Кроме того, позиция #page-c не должна перекрывать позицию меню. Следите, чтобы граница #side находилась на том же уровне, что и граница блока записей, или имелось расстояние между ними (см. позиционирование и отступы).
В своем коде я решил проблему так:
Отступ в 150px помогает содержимому #page-c всегда быть вне действия зоны меню, кроме того само меню показывает, что его нужно обтекать справа.
Также помогает свойство min-width. Это свойство показывает ширину, меньше которой элемент быть не может, и прописываем его так:
Я сделал это)) Теперь моё "почти полное руководство по diary CSS" готово и ждет своих читателей. Все заметки, дополнения, замечания, сообщения об ошибках, пожелания, благодарности и вопросы - в комменты. Под редакторством Рёцке сделал изменения в плане оформления текста, но думаю, что это еще не всё.
Как вы знаете, diary.ru предлагает возможность альтернативного оформления ваших дневников с помощью CSS. Что это такое и как этим пользоваться, я постараюсь объяснить в данном руководстве. Мне хотелось бы, чтобы, прочитав данные заметки, любой человек понял, как ему действовать в плане оформления блога с использованием CSS, поэтому писать буду максимально простым и доступным языком, так что особых научных понятий и гигантских изложений не ждите. Также обратите внимание на название: “Основы Diary CSS” – в руководстве будет лишь основная информация, необходимая для нестандартного оформления дневника, более полные описания приемов и примочек смотрите как обычно на сообществе diarycss. Если товарищи дизайнеры будут не против, то их находки впоследствии будут помещены сюда же с их авторством, чтобы обобщить всю имеющуюся по теме информацию. Спасибо за внимание, ваш Roldo.
читать дальше
1. Что такое CSS и зачем он нужен?
CSS (Cascading Style Sheets, каскадные таблицы стилей) – это набор параметров отображения элементов веб-страницы, т.е. стандартизированный язык описания внешнего вида документа html или другого формата. Говоря совсем по-простому, КСС – это набор средств, позволяющих описать, как будут отображаться на экране элементы страницы – таблицы, текст, ссылки, картинки в конце концов.
Для каждого элемента на странице есть свое собственное название или селектор: к примеру блок меню на diary носит название #side, так его прописали в коде страницы. Для элемента #side с помощью CSS можно задать свойства отображения, имеющиеся в активе, к примеру ширину - width. Если задать width равным 200 пикселей, то меню на экране отобразится именно с такой шириной. Однако о свойствах поговорим позже, сейчас рассмотрим другие обобщенные понятия.
2. Diary CSS и как с ним работать?
Администрация @дневников дала возможность пользователям работать с собственными стилями оформления, т.е. мы можем добавлять в дизайн свои строки на языке CSS, соответственно с нашими желаниями меняя внешний вид своего дневника. Но выше головы тут не прыгнешь – код страницы менять нельзя, единственное что мы можем сделать – это видоизменять отображение имеющихся элементов страницы. Мы имеем возможность сделать так, чтобы некоторые элементы не отображались, но добавить новые не получится, приходится работать с тем, что имеем.
Но КСС – услуга платная, и доступна только тем, кто оплатил свой дневник любым возможным способом. Почитать о них можно тут - diary.ru/options/pay/ войдя под своим логином. Тут тоже не все так просто – оплата дневника заключается в покупке обязательного пакета услуг, а к этому пакету уже можно добавить платные сервисы, к числу которых относится и CSS. Перечислив деньги на счет, вы можете прикупить нужный пакет, добавив в него CSS на определенный период, и пользоваться им, пока период оплаты не истечет. По вопросам оплаты обращайтесь к администрации и в справку, я же подскажу лишь несколько связанных нюансов.
Где взять деньги? Во-первых, у каждого пользователя есть тестовые 100 дайрублей, которые можно использовать как оплату пакета + КСС на небольшой период времени. Будьте внимательны – не тратьте все деньги на пакет, иначе на CSS и другие нужные сервисы уже не останется. Во-вторых, всегда можно участвовать в конкурсах, проводимых администрацией или сообществами. Большое количество таких размещается на konkoors.diary.ru. Ну и самый простой способ получения @наличных – присылание ссылок в Diary best. Этот проект призван собрать самые интересные посты в diary.ru, и присылая хорошие ссылки, вы получаете возможность каждую неделю выиграть в конкурсе популярности и заполучить заветные деньги.
Итак, оплатив КСС, вы имеете возможность им пользоваться. Как это делается? Заходите в настройки оформления дневника и смотрите вниз – там появилось поле CSS, куда вы вводите свои строки кода и получаете результат в виде дизайна.
3. Синтаксис CSS.
Синтаксис – это правила написания кода. Ничего сложного тут нет, главное – знать название (селектор) нужного вам элемента (блока). Вот образец написания строк на языке CSS:
Селектор элемента1 {свойство: значение; свойство: значение; свойство: значение;}
Селектор элемента2 {свойство: значение; свойство: значение;}
И так далее.
В готовом виде это выглядит так:
#side {width: 200px; height: 700px; background: #333333;}
#post0 {width: 100%; border: 2px solid black;}
Для каждого элемента страницы прописываем его свойства по правилам их описания. Свойств – множество, и выписывать их все нет смысла, для этого есть специализированные сайты, например: htmlbook.ru/css/ , где по каждому свойству дано подробное описание его возможностей, применения в браузерах, даны примеры кода и вида. Любое из этих свойств вы можете применить и к элементам страницы вашего дневника согласно правилам. Не обязательно читать сразу всё, для начала определитесь, чего бы вам хотелось сотворить с элементом, а потом ищите нужные вам результаты в описании свойств на сайте. Постепенно вы освоите их все, по некоторым наиболее распространенным я дам описание прямо здесь в учебнике.
Более сложная конструкция описания элементов страницы в КСС заключается в использовании классов. Класс – это идентификатор индивидуального стиля элемента страницы, для одного элемента может быть задано несколько классов со своими стилями, и применяя тот или иной, можно добиться различного отображения элемента. Имя класса начинается с точки, и в описании используется так: Тег.класс (напр div.bordered). Подробнее о классах здесь: stepbystep.htmlbook.ru/?id=48
Прописываем код так:
.bordered {padding: 0; border: none;}или
div.bordered {padding: 0; border: none;}для элемента div с классом .bordered
4. Проблемы с отображением в разных браузерах. Общие проблемы дизайна.
Прежде чем приступить непосредственно к работе, нужно усвоить одну вещь – CSS – это стандарт, а браузеры написаны не на 100% в соответствии со стандартом, поэтому то, что смотрится «правильно» в одном, будем в другом смотреться совершенно иначе.
Запомните: Вы можете сделать всё под себя, так как вам нравится, но если вам нужны читатели, то хорошо было бы подумать и о них. Неудобный вид вашего дневника уж точно не привлечет к вам постоянного внимания пользователей, и дело тут не только в кроссбраузерности – нарушение правил дизайна или разность отображения при различных разрешениях монитора также накладывает свой отпечаток.
Правила дизайна просты: надо, чтоб было красиво. Лучше не использовать ярких кислотных цветов, ужасных контрастов вроде красного с зеленым или синим, сильно темнить или светлить. Еще один факт – пользователи могут смотреть ваши дневники, не включая картинки в браузере, чтобы снизить трафик, и если у вас в качестве фона картинка, то она видна не будет. Поэтому постарайтесь сделать так, чтобы без картинок ваш дизайн тоже смотрелся хорошо – не используйте цвет текста такой же, как цвет его фона, потому что цвет фона все равно используется (именно для таких случаев), даже если в качестве фона еще и картинка.
Затем, у всех пользователей разное разрешение экрана. Это значит, что ваш дневник будет смотреться на разных разрешениях по-разному, и это надо также учитывать ради читателя. Не мельчите и не гигантоманьте с текстом и другими элементами, смотрите за шириной и высотой элементов. Самое простое, что можно предложить для решения проблем – переключайте разрешение своего монитора повыше и пониже и смотрите, как будет отображаться. Если ваш монитор не поддерживает высоких разрешений, то попросите друзей проверить дизайн на своем компьютере, устройте тестирование.
Вернемся к браузерам. Всегда неплохо иметь под рукой хотя бы два – Internet Explorer и еще какой-нибудь, особенно Opera или Firefox. Еще лучше – все три, и смотреть на свой дизайн в них. Обращайте внимание на стандарт написания кода, если есть какие-то проблемы с отображением. Бывает так, что не совсем корректный код имеет правильное отображение в одном браузере и неправильное в другом. Приводите в корректный вид.
Наконец, для всех проблем существует одно решение – сайт browsershots.org/
Вводите адрес своего дневника, выставляете галочки для тех браузеров, в которых вы бы хотели проверить отображение дневника, выставляете параметры размера (разрешения) экрана и прочие параметры и нажимайте «Отправить». В течении получаса на сайте будут отображаться скриншоты вашего дневника в разных браузерах, смотрите на них и делайте выводы.
5. Как посмотреть код чужого дизайна и страницы?
Очень полезная штука – просмотр кода страницы, так сказать «не отходя от кассы». Ваш пользовательский код CSS «вшит» в тело страницы, поэтому вы можете посмотреть ее код и увидеть там ваш КСС и стиль по умолчанию, прописанный дизайнером @дневников. Для этого в IE войдите в меню Вид и выберите «просмотр html-кода». В Opera меню Вид и «Исходный текст» (ctrl+f3), в FireFox – Вид/Посмотреть исходный код (View source).
Ваш код CSS находится в разделе «Пользовательские стили» ближе к началу, но сначала идет код дизайна по умолчанию, откуда вы можете взять названия элементов страницы. Синтаксис кода по умолчанию – обычный для CSS.
Помните, что копировать личные коды без разрешения автора - нельзя.
6. Элементы дизайна дневника.
Со вводной информацией покончено, перейдем к делу. Начнем с того, что рассмотрим основные элементы, присутствующие на странице вашего дневника. Их теги должны быть прописаны так, как здесь, с соблюдением заглавных и строчных букв!
Во-первых, body. Это само «тело» страницы – ее основное поле, она сама. На ней расположены все остальные объекты. И шрифты с цветами, которые вы прописываете стандартными средствами оформления дневника (без КСС) выполняются именно для body. Т.е., если вы ставите для тела фон черного цвета, то этот фон будет как бы для всего дневника в целом, остальные элементы будут расположены на этом фоне.
Body имеет различные селекторы для разных страниц дневника - главной, комментариев, избранного и т.п. - селектор #Journal для главной страницы и классы:
.left – когда меню располагается слева от постов
.right – меню справа.
.journal_list
.block_design – если дизайн блочный.
Эти классы не обязательно используются на странице, поэтому в начале работы лучше их не трогать.
Другие элементы представляют собой таблицы и блоки. Что есть таблица (блок) – это прямоугольник заданной ширины и высоты, имеющий свойства и внутри которого можно размещать другие элементы и/или блоки, текст, фон, картинки.
#wrapper – основной элемент дизайна – общий блок, на котором (внутри которого) расположены все остальные. Другие элементы позиционируются и процентируются относительно этого, являясь дочерними.
#page-c – блок, на котором фактически размещаются сообщения дневника. Он служит главным блоком записей.
#page-t – блок, дочерний к page-c, на нем размещаются посты. Находясь внутри page-c, этот блок перемещается и меняется одновременно с родительским, поэтому если вы хотите использовать возможности обоих блоков, то прописывайте для page-t отдельные свойства.
#side – блок меню. На нем находятся, во-первых, название дневника (ссылка на его адрес), фотография и логин пользователя, а во-вторых – ссылки на элементы меню (Мой дневник, Настройки и т.п.) и баннер статистики от li.ru.
#extratop – отключенный по умолчанию элемент, который расположен над блоками page-c и side, но внутри wrapper’а. Основное его предназначение – это «шапка» страницы, в которой можно разместить картинку или вынести пункты меню.
#extrabottom – отключенный по умолчанию элемент, который расположен ниже блоков записи и меню, но также внутри блока wrapper. Это таблица, у которой можно задать фон в виде картинки, дополнив свой дизайн нижним «основанием».
#epigraph – это эпиграф дневника.
#post0 – это содержание эпиграфа, оно находится внутри #epigraph’а
Элементы меню (#side). Фактически это всё ссылки, но для каждого элемента можно прописать отдельные свойства. Список таких элементов собирали еще Tex, Zolotzzze=) и другие, я же помещу его сюда в полном виде отдельно.
Элементы колонки меню:
Группировки элементов:
У каждой группировки имеется класс .menuSection , описывающий ее свойства. Редактируйте свойства этого класса, чтобы менять оформление для всех группировок сразу.
#thisDiaryLinks – поле ссылок на чужой дневник (Избранное автора, Цитатник автора, Ссылки автора и т.д.)
#myDiaryLinks – поле ссылок на ваш дневник (Мой дневник, Новая запись, U-mail и т.д.)
#YaSearch - Поиск по дневнику
#thisDiaryOwner – поле ссылок, относящихся к автору (Написать на Умайл, поднять в списке)
#globalLinks – поле глобальных ссылок (Главная страница, Каталог сообществ, Случайный дневник)
#myLinks – поле «Мои ссылки»
#Stats – поле, где расположен баннер статистики от li.ru
#pchs – поле постоянных читателей (если отображаете его через Опции)
#lastComments – поле последних комментариев (если отображаете)
Сами элементы:
#authorFav - Избранное автора
#authorQuot - Цитатник автора
#authorLiks - Ссылки автора
#authorAlbum - Альбом автора
#authorRSS - RSS автора
#writeToAuthor - Написать на U-mail
#subscribeEmail - Подписаться на дневник
#unsubscribeEmail - Отписаться от дневника
#addToFav - Добавить в избранное
#delFromFav - Удалить из избранного
#postsCalendar - Календарь записей
#albumLink - Альбом
#rssLink - RSS
#joinThisComunity - Вступить в сообщество
#writeThisComunity - Написать в сообщество
#comunityFav - Избранное сообщества
#leaveThisComunity - Покинуть сообщество
#headlineList - Список заголовков
#tagslistlink - Темы записей
#myDiaryLink - Мой дневник
#writeThisDiary - Новая запись
#myDraftLink - Черновики
#umailLink - U-mail
#myFavLink - Избранное
#myQuotLink - Цитатник
#discussionLink - Дискуссии
#myLinksLink - Мои ссылки
#myProfileLink - Мой профиль
#optionsLink - Настройки
#photolibLink - Библиотека изображений
#upInChart - Поднять в списке
#allDiaryLink - Все дневники
#mainpageLink - Главная страница
#favListLink - Список избранных
#pchListLink - Список ПЧ
#communityCatalogueLink - Каталог сообществ
#myCommunitiesLink - Мои сообщества
#myCommunityLink - Моe сообществo
#randomDiaryLink - Случайный дневник
#diarySpiritLink - @дневники: изнутри
#diarySupportLink - Техподдержка
#paySupportLink - Техподдержка платных
#faqLink - FAQ
#iAmQuit - Выход
#Stats - Моя статистика
#comments - Комментарии +
#subscribe - Подписаться
#unsubscribe - Отписаться
#addToQuote - Добавить в цитатник
#quote_post - написать у себя (это под записью)
#quote_comment - написать у себя
#prevPostLink - предыдущая запись
#nextPostLink - следующая запись
#urlLink - URL
#sortOrder - кнопка Сортировать записи
.editPostLink - кнопка "Редактировать запись/эпиграф/коммент"
.delPostLink - кнопка "Удалить запись/коммент"
#myDraftLink - Черновик
#thisDiaryPhoto - Фото владельца дневника
Цитата прописывается классом span.quote_text, для которого также можно задать свойства стандартными методами. Если вы хотите оформить цитаты, сделанные в постах или комментариях, несколько иначе, чем обычный наклонный текст, то воспользуйтесь этим классом: span.quote_text {свойства}
Перейдем к описанию более сложных элементов.
#div_img – Тег отображения картинок, которые вы выкладываете в постах. (
#div_img:hover – Оформление картинок, когда курсор мыши находится на ними.
#authorName – Имя (логин) автора, располагается изначально под фотографией.
#side h1 A – ссылка на ваш дневник, располагается над фотографией и отображает название дневника.
#topNav – для табличного дизайна это поле, где размещаются ссылки «Главная», «Все дневники», «Случайный дневник» и т.д. наверху страницы. Альтернативное меню.
#topNavLinks – сами ссылки в этом поле.
div.clear – этот служебный класс используется для разделения постов и других элементов между собой. Располагается под всеми постами и эпиграфом и в случае чего с ним можно поиграться, но осторожно)
#thisDiaryInfo – Блок, в котором располагается название дневника, фотография и имя автора, то есть #side h1 A, #thisDiaryPhoto и #authorName
#postsArea – блок внутри page-t, в котором располагаются посты. К этому блоку применяется класс .bordered
Собственно, что есть .bordered? Это класс, который применяется к нескольким элементам страницы – меню и постам. Описывает он область, внутри которой меню и посты находятся, поэтому, изменяя его свойства, вы влияете на отображение и того и другого.
.order_button – класс описания области над постами, где располагаются кнопки сортировки. Используется для div (div.header order_button)
#sortOrder – описывает область, в которой находятся кнопки сортировки записей. Эта область совсем небольшая и находится прямо вокруг самих кнопок.
#sortFromBegin – кнопка сортировки записей в порядке следования
#sortFromEnd – кнопка сортировки записей в обратном порядке
#sortFromLastComment – кнопка сортировки по последним комментариям.
.singlePost – класс, описывающий стиль для одиночного поста в вашем дневнике. Сверху – заголовок, в середине текст записи, внизу ссылки на URL, комментарии, цитатник и подписку на пост.
.countFirst и .countSecond – классы, применяемые для оформления постов «через раз». По умолчанию, если взглянуть на ваши записи, то видно что цвета записей немного различаются – то один цвет, то другой поочередно. Так вот, это реализовано через данные классы – одному посту дается один класс, следующему – второй, потом снова первый и так далее.
.first – класс, описывающий последний сделанный вами пост.
.countFirstDate, .postDate, .uline – классы, относящиеся к описанию поля, где расположена дата написания поста.
.header – класс описания заголовка постов и эпиграфа.
.postTitle – класс описания заголовка поста.
.commentAuthor – описывает блок информации о человеке, оставившем комментарий к записи. Этот блок содержит:
.avatar – класс описания аватара.
.sign – класс описания подписи под аватаром.
#commentsArea – блок комментариев к записи. Открывается, когда вы нажимаете на «комментировать» и содержит, естественно, комментарии.
.postContent – класс описания содержимого поста (его текста и прочего)
.postInner – содержимое поста.
.paragraph – текстовое содержимое поста. Все эти классы описывают содержимое записи, но .postContent применяется для общего описания, а .paragraph – уже для самого конкретизированного.
.atMusic – описывает поле @Музыка
.atMood – описывает поле @Настроение.
.atTag – описывает поле @Темы
Элементы поста:
Предыдущая запись - .prevPostLink
Следующая запись - .nextPostLink
u-mail - .umail
E-mail - .email
Дневник - .diary
Профиль - .profile
Добавить в цитатник - .addToQuote
Подписаться - .subscribe
Комментарии - .comments
Написать у себя - .quote_post
.postLinksBackg – Класс описания блока ссылок внизу поста (комментировать, подписаться и т.п.)
.postLinks – описание ссылок Комментировать, Подписаться и В цитатник.
.urlLink – описание ссылки на URL.
#pageBar и класс .pageBar описывают блок под всеми постами, где расположены ссылки на страницы дневника (номера страниц, «следующая» и т.п.)
.pages_str – описывает ссылки на предыдущую и следующую страницы.
Итак, практически со всеми элементами и классами страницы мы познакомились, теперь можно для каждого из них задавать свойства в CSS.
Поэкспериментируйте – закройте дневник на время и меняйте свойства различных элементов и классов, потом сохраняйте и смотрите, что получается в итоге. Так вы представите себе картину расположения блоков дневника подробнее и поймете, как вам лучше действовать в плане изменения их оформления.
7. Основные методы работы.
В этой главе речь идет о тех приемах, которые обычно используются для редактирования оформления дневника в CSS. Также рассмотрим главные принципы работы с оформлением, использующим CSS.
Самое главное – значения ширины, высоты, толщины и прочие, связанные с измерениями, измеряются в пикселях, и после каждого значения нужно писать px, например
#side {width: 300px; border: 2px solid black;}
Если нужно указать величины в процентном соотношении, то пишем %
Второе – краткий курс английского.
Top – верх
Bottom – низ
Left – лево
Right – право.
Center - центр.
Третье – отступы. Есть два вида свойств – margin и padding. Обязательно и подробно читаем здесь - htmlbook.ru/css/margin.html htmlbook.ru/css/padding.html
Margin задает отступ между краем родительского элемента и текущего.
Padding – внутренний отступ между краем текущего элемента и его содержимого.
Большинство проблем с некорректным отображением совместного расположения элементов заключается в том, что у этих объектов проставлены отступы. Выставляйте margin:0 и padding:0 , чтобы избежать таких проблем.
Для начала неплохо бы убрать все отступы в body, чтобы не было расстояния между краями экрана и элементами
body {margin:0; padding:0;}, это позволит избежать некоторых нестыковок в отображении в разных браузерах! Потом вы можете вернуть отступы, если они вам нужны.
Четвертое – важность. Тег !important показывает, что свойство имеет большую важность, и должно выполняться именно так, как прописано вами в CSS. Пишется только так, а не иначе:
{background: #b5d23a !important; width: 200px !important;}– после свойства пробел и !important и ТОЛЬКО ПОТОМ точка с запятой.
Все про этот тег читаем на htmlbook.ru/css/!important.html
Вложенность
Записи типа #селектор ul или #селектор li означают, что свойства, прописанные для этих связок, действуют на подэлемент элемента, обозначенного #тегом. Чтобы разобраться, как это работает, нужно знать состав страницы:
Div – это блок с содержимым типа текста, ссылок и прочего. Для него задаются классы (.class) или селекторы (#selector). С помощью div задано множество элементов страницы дневника, к ним применены различные классы.
Ul – устанавливает маркированный список, например для списка постоянных читателей, отображаемого на вашей странице. Элементы такого списка обозначаются тегом li.
Li – сам элемент маркированного списка.
A – ссылка.
Таким образом вы можете видеть, для чего используется оформление в готовом коде.
Если нужно прописать два элемента с одними и теми же свойствами, используйте запятые: #odin, #dva, .tri {свойства}
Такое написание немного уменьшает код страницы и увеличивает удобность его просмотра.
a – используется для описания ссылок. :hover – показывает, что описывается момент, когда курсор мыши находится над элементом.
Как сделать элемент невидимым? Поможет свойство «display: none» . Использование такой конструкции убирает элемент из документа, так что место под него не резервируется, помните об этом.
Свойство display также поддерживает другие значения, например block – часто используется в коде дневников. Почитайте об использовании здесь - htmlbook.ru/css/display.html и обратите внимание на поддерживающие браузеры.
Фон. Фон можно применить для любого блока, вот как это делается:
Картинка для фона берется ТОЛЬКО из вашей библиотеки изображений. Загрузите картинку туда, но помните – ее «вес» в килобайтах – залог удобства использования вашего дневника. Чем меньше вес, тем лучше для читателя, поэтому постарайтесь доводить количество килобайтов ваших картинок до минимума.
Если у вас есть Фотошоп, значит должен быть и ImageReady – пакет как раз таки предназначенный для оптимизации изображений. Открыв в Фотошопе картинку, выберите вместо пункта «Сохранить как», пункт «Сохранить для сети» (“Save for web&rdquo
, расположенный сразу после. Откроется окно, в котором вы можете выставить параметры оптимизированной картинки. Есть несколько стандартных установок (Preset), имеющих уже подобранные параметры оптимизации, например GIF с разным числом цветов или Jpeg в трех качествах. Самое низкое качество означает наименьший размер, превью помогает увидеть оптимизированную картинку, согласно которой вы сами можете выставить ползунок качества так, как вам надо. А под картинкой находится ее размер в оптимизированном виде (в килобайтах), который меняется автоматически при изменении качества – следите за ним. Скажем так – картинка в jpeg размерами 1000х200 в среднем должна весить килобайт 50 – отталкивайтесь от этой цифры. Если в вашей картинке цветов мало и это не фото, то выставьте тип сжатия GIF с различной цветностью, это совсем уменьшит картинку. Совсем маленькие картинки тоже лучше делать в gif. Если же Фотошопа у вас нет совсем, то скачайте оптимизатор изображений Ashampoo Photo Optimizer, разберитесь, как он работает и уменьшайте картинки в нем.
Программу для ознакомительной работы вы можете скачать тут:
rapidshare.com/files/72805523/Ashampoo.Photo.Op...
Пароль к архиву – netzor.org
Так вот, вернемся к нашим баранам:
Загрузив картинку в библиотеку, вы увидите ссылку на нее – URL. Скопируйте ссылку и используйте ее в следующем коде:
Элемент {background: url('/userdir/дальнейший_адрес_изображения.jpg');}
Например
#extratop {background: url('/userdir/1/117/3454565656.jpg');}
В кавычках находится адрес вашей картинки из библиотеки, все, что находится до /userdir/ надо удалить, остальное оставить.
Какие еще издевательства можно учинить над фоном, а также абсолютно все свойства бэкграунда расписал bokonist вот здесь - diarycss.diary.ru/p23302335.htm#93256451
Запомните – сначала идет указание позиции фона по вертикали (top, center, bottom и т.п.), потом по горизонтали (left, center..)
Шрифты. Они могут применяться для любого блока, который содержит текст.
Свойств по теме много – font, font-family, font-size, font-style, читайте о них тут - htmlbook.ru/css/font.html
В сообществе есть материал, посвященный смене шрифта на «нестандартный» - diarycss.diary.ru/p23314167.htm#
А вот разбор шрифтов от Tex - tex.diary.ru/p51528605.htm#
Рамки вокруг блоков. Обвести блоки рамкой можно с помощью свойства border.
htmlbook.ru/css/border.html
Если нужны рамки только с некоторых сторон объекта, то пользуйтесь свойствами border-left (слева), border-right (справа), border-top (сверху), border-bottom (снизу).
Примеры:
#page-c {border: 4px dotted #56400a}
#extrabottom {border-top-width: 3px; border-bottom: 2px solid #5bff6c}
Ширина и высота объектов. Вы можете менять эти параметры у объектов страницы, если вам это нужно, при этом их содержимое по-разному будет воспринимать изменение размеров. Корректно будет смотреться, если размеры внутреннего (дочернего) объекта равны, либо меньше размеров внешнего (материнского). Например, размеры page-t не должны быть больше, чем у page-c. Внимательнее читайте описание объектов, приведенные во 2 части данного руководства.
Ширина задается через width, высота через height.
Вы можете задать их значение пикселями (400px), либо в процентном соотношении (50%)
А теперь важное замечание! Процентаж ширины и высоты элемента зависит от размеров его материнского объекта! То есть, если вы задали ширину заголовка поста в 40%, то он будет отображаться в 40% от ширины самого поста, а не ширины страницы. Процентное соотношение хорошо использовать, чтобы создавать объекты, динамические изменяющиеся со сменой, скажем, разрешения монитора. Но всегда лучше начинать процентирование именно со внешних главных объектов – по умолчанию большинство их внутренних элементов уже меняют свои размеры вместе с ними.
К) Смена положения объектов. Все очень любят изменять положение элементов страницы, поэтому внимательно прочитайте данный абзац.
Дочерние элементы страницы позиционируются относительно своих родительских элементов! И если вы будете изменять именно их положение, то родительские свойства будут влиять них, и некоторые аспекты изменения местоположения связанных объектов не позволят вам получить именно то, чего хотелось бы. Сейчас подробнее.
Положение объекта определяется свойством position (позиция). Оно имеет четыре возможных значения:
static – значение по умолчанию. Оно показывает, что объект находится там, куда его определили кодом страницы.
absolute – определяет, что элемент с такой позицией имеет свои собственные параметры расположения, и не участвует в распределении других объектов по странице. Они выстраиваются уже как будто без него, а положение его определяется свойствами объекта – top, bottom, left и right, выражаемыми в пикселях. О них подробнее чуть позже.
relative – Позиция определяется относительно исходного расположения объекта. Использование left, right, top, bottom, смещает объект относительно его расположения.
fixed – Положение определяется как и у absolute, но оно не меняется при прокручивании страницы и изменении разрешения экрана и размера страницы. (И не работает в IE6)
Теперь о свойствах положения.
left в пикселях показывает смещение объекта относительно левого края (родительского объекта либо экрана), top – смещение относительно верхнего края и так далее. МОЖНО использовать МИНУСЫ, то есть выражать позиции отрицательными значениями (-100px). Особенно это касается дочерних объектов – они будут смещаться относительно родительских, если те находятся не с краю, то логично было бы поставить отрицательное значение, если надо вынести дочерний объект за край.
Другое важное замечание – если положение родительских объектов не определено в точности, то положение дочерних объектов может меняться при изменении страницы, разрешения экрана и даже в разных браузерах при абсолютном позиционировании! Поэтому, если вы определили позицию какой-нибудь ссылки меню, а она показывается по-разному в разных случаях, то проверьте позиционирование самого меню, лучше всего ставить absolute или fixed для обоих объектов и начинать с главного. Когда он будет всегда отображаться так, как вам надо, приступайте к оформлению внутренних элементов. Этот прием хорош в любом случае – всегда лучше начать оформление с глобальных вещей.
Позиционирование по процентам также возможно.
Если нужно разместить элемент в точке, расположенной на 1/5 расстояния от левого края экрана, то указывайте позицию как left: 20%. Помните о связях объектов – они будут позиционироваться от тех точек, на которых расположены их «родители».
Дизайн фиксированной ширины по центру, слева и справа.
Это – стандартная схема оформления дневника, которую многие используют, и которая удобна и хороша. Вот тут Tex все подробно описал - tex.diary.ru/p41771510.htm
Не забывайте о разном разрешении экрана у пользователей – если вы сделаете блоки очень узкими, то у людей с широким экраном они будут занимать 30% страницы и смотреться не очень хорошо.
Картинки вверху и внизу экрана. Этот прием характерен и удобен для дизайна фиксированной ширины, описанного в прошлом абзаце. Делается все просто – нужно задать ширину и высоту для #extratop и #extrabottom и поместить туда картинки в качестве фона. Для фиксированного дизайна ширина объектов задается такой же, как ширина блока wrapper, не больше. Высота равна высоте картинки, при этом саму картинку нужно подогнать по ширине к основному блоку.
Вот пример:
#extratop {width: 700px; height: 200px; background: url('/userdir/…4545.jpg') no-repeat top left;}
#extrabottom {width: 700px; height: 100px; background: url('/userdir/…34468.jpg') no-repeat center center;}
Если #extrabottom отображается некорректно. Существует две главных проблемы с его отображением: между ним и блоком записей пробел, и он отображается сразу после меню, либо после #extratop.
Первая проблема связана со свойствами классов блока записей. А именно – с отступами в них. Убирайте отступы с помощью margin и padding:
div.bordered {margin-bottom:0 !important; }– убираем нижний отступ для класса описания поля постов и меню.
То же самое можно прописать для #page-c.
Вторая проблема связана с позиционированием. Если вы что-то меняли в блоках, то вполне возможно нарушили «общую картину» кода страницы. Но выход есть –
Свойство float: left; для #extrabottom показывает, что элемент выровнен по левому краю, а другие элементы должны обтекать его по правой стороне. В некоторых случаях это работает, попробуйте добавить в свойства блока.
Свойство clear: both, для #extrabottom наоборот, запрещает обтекание элемента с обеих сторон. Работает для других случаев. В общем, если появились проблемы подобного рода, пробуйте одно из этих решений, а если не получается, то пишите в сообщество diarycss.diary.ru
Динамически изменяющийся размер блоков, динамический дизайн.
Фиксированная ширина не всегда хороша и интересна, поэтому пользуйтесь возможностями CSS для создания объектов, меняющих свои свойства при смене разрешения экрана или размера страницы.
Тут поможет процентирование, а именно – указание ширины блока (width) в процентах. При таком описании ширина объекта будет задаваться относительно других элементов страницы, и если они будут менять свои свойства, то вслед за ними изменится и текущий объект. Например,
#wrapper {width: 80%;} заставит основной блок всегда занимать 80% экрана, а #page-t {width: 90%;} покажет, что поле с постами будет занимать 90% от ширины блока page-c (родительского). Конечно, подобного эффекта можно добиться и отступами, но ширину родительского элемента все равно лучше задать процентами.
Основной способ организации динамического дизайна заключается в следующем:
Выставляем ширину #wrapper в процентах, проще всего 100% (от ширины экрана).
Ширину блока #page-c делаем в процентном соотношении так как удобнее, и она, завися от ширины wrappera, будет изменяться также относительно ширины экрана.
При этом всегда нужно следить, чтобы меню #side (зависит от #wrapper) занимало при этом не больше оставшегося пространства, иначе оно будет отображаться не там, где нужно. Проверить это можно, выставив разрешение монитора поменьше, например 1024*768 и посмотрев на свою страницу. Такое разрешение имеет множество пользователей, поэтому ориентируйтесь в первую очередь на них.
Установите фиксированную ширину для #side. Чтобы меню не «уезжало», надо чтобы #page-c занимал, допустим (1024 минус ширина_меню) пикселей. Больше – можно.
Для меню #side в таком случае еще хорошо помогают строки position:absolute; clear: left; - они абсолютно позиционируют меню «вне кода» и показывают, что другие элементы должны обтекать меню по правому краю.
Кроме того, позиция #page-c не должна перекрывать позицию меню. Следите, чтобы граница #side находилась на том же уровне, что и граница блока записей, или имелось расстояние между ними (см. позиционирование и отступы).
В своем коде я решил проблему так:
#side { width:150px !important; margin:0 !important; position:absolute; clear: left; top: 450px;}
#page-c {width:73% !important; margin:0 !important; padding-left: 150px !important; }
Отступ в 150px помогает содержимому #page-c всегда быть вне действия зоны меню, кроме того само меню показывает, что его нужно обтекать справа.
Также помогает свойство min-width. Это свойство показывает ширину, меньше которой элемент быть не может, и прописываем его так:
#page-c {min-width: 500px; width: 70%;}. Тогда при уменьшении страницы по ширине элемент уже не будет меньше заданного значения, вместо этого появится скроллбар. Есть еще max-width, где прочитать о нем, вы уже должны запомнить.
-
-
28.11.2008 в 13:258. Более сложные и заковыристые приемы оформления.
Прозрачность элементов. Добавление к ссылкам в меню иконок. Объединил, так как описание находится в одной статье от Tex.
У прозрачности есть одно незыблемое свойство – она тормозит, и злоупотреблять ею не стоит.
Все остальное читайте здесь - tex.diary.ru/p28585287.htm#
Один элемент поверх другого. Можно сделать так, чтобы один элемент находился как бы ближе к пользователю, чем остальные, и если элементы накладываются один на другой по позиции, то этот элемент будет как бы «выше».
Используется свойство z-index. Все очень подробно описано тут - htmlbook.ru/css/z-index.html
Изменить стиль горизонтальных полос между постами. Обсуждение тут - diarycss.diary.ru/p23118546.htm
Если проблемы с кнопками редактора сообщений - tex.diary.ru/p53968256.htm#
Другие виды рамок вокруг элементов - tex.diary.ru/p1892740.htm#
Изменение оформления ссылокпри наведении курсора мыши:
diarycss.diary.ru/p23386358.htm - подчеркивание
diarycss.diary.ru/p25368822.htm - шрифт
Если нужно задать фиксированный размер элемента, но его содержимое «не влазит» в этот размер, можно воспользоваться скроллбаром - diarycss.diary.ru/p41016364.htm#
Читаем про overflow тут - htmlbook.ru/css/overflow.html
Если вы еще не поняли, как убрать некоторые элементы (а я писал), то diarycss.diary.ru/p25244058.htm
Меню, как у Tex. Если вам нравится такое меню, скрывающее до поры до времени ненужные ссылки, то обсуждали его здесь - diarycss.diary.ru/p40633222.htm
Нужен специальный фон для аватаров? Смотрим тут - diarycss.diary.ru/p39533346.htm# . Рамка вокруг аватара? - diarycss.diary.ru/p32381787.htm# . Тень под аватаром? - diarycss.diary.ru/p26469571.htm#
Как менять курсор в различных случаях - diarycss.diary.ru/p24320654.htm
О фонах записей и постов - diarycss.diary.ru/p26228551.htm
Буквица (заглавные буквы в каждом начале поста) и скругленные края блоков от Рёцке - diarycss.diary.ru/p26611303.htm
Фотография в крупном виде - diarycss.diary.ru/p25953655.htm
Изменение названия ссылок - diarycss.diary.ru/p26830286.htm
Если ссылки нужно разместить в одну строку, а они упорно отображаются в две или более, то задавайте для них свойство width! Это сделает их ширину не зависящей от ширины родительского объекта.
Проверка CSS. Если есть желание проверить код не на дневнике, а где-то еще, то воспользуйтесь предложением от Рёцке - diarycss.diary.ru/p47019938.htm
-
-
28.11.2008 в 13:269. Дополнения и рекомендации (рекомендуется к прочтению)
Цветность.
Чтобы сделать дизайн красивым, нужно грамотно использовать цвета. Цвет в CSS, кроме стандартных 16ти, задается шестнадцатеричным кодом (#f56d2b), узнать который можно, например, через Фотошоп (просто выбрав цвет в палитре). Если фотошопа нет, то поможет программа Color Cop, скачать которую можно здесь - colorcop.net/download Она может показать код для любого цвета, даже выбранного пипеткой с вашего экрана.
Другую хорошую вещь предлагает Tex – Color Scheme Generator - wellstyled.com/tools/colorscheme2/index-en.html
Он позволяет выбрать сразу хорошее сочетание цветов для оформления, ведь цвета лучше подходят друг другу по оттеночному принципу. Можно брать контрастные оттенки, можно тоновые, коды цветов там указаны. Рекомендовано к использованию.
Третью хорошую вещь предлагает вам Рёцке - diarycss.diary.ru/p29174770.htm
А если уж совсем туго, то берите стандартные веб-цвета - www.mydigitallife.info/2008/06/18/html-color-na...
Ну и конечно же подгоняйте цвета к картинкам и фонам.
Если есть еще вопросы.
Прежде чем их задавать, сделайте вот что:
Воспользуйтесь поиском по текстам моего руководства (ctrl+F), наберите слово, которое вас интересует, и посмотрите всю информацию, которую удается найти. Прочитайте внимательно.
Воспользуйтесь поиском по сообществу diarycss.diary.ru ! Наберите пару интересующих слов, и ВСЁ, что вы хотели бы знать, отобразится в найденных постах.
Поверьте мне – так можно найти абсолютно все и сразу, а не ждать, пока вам ответят «идите по этой ссылке». Вы сами можете прекрасно эту ссылку найти.
Ткните в тег сообщества, интересующий вас, и отобразятся все сообщения по этой теме.
Если же все равно ничего не помогло, и проблема имеет место быть, то задавайте вопрос в сообщество, при этом:
- держите свой дневник открытым
- выпишите ваш код
- объясните толком, чего бы вам хотелось видеть.
Я постараюсь вносить все характерные вопросы в это руководство, так что оно будет обновляться.
Готовые дизайны.
Ходите по чужим дневникам – в их дизайнах вы найдете много полезных для себя приобретений. Особенно советую заглянуть сюда – diary-design.diary.ru
Вот предложенный дизайн от Tex - tex.diary.ru/p30948279.htm# с кодом. Характерное меню, фиксированная ширина, солидный вид.
Вот мое творение - diary-design.diary.ru/p49766406.htm# с кодом. Тут реализована динамическая ширина, а также фон вокруг постов и совмещение фонов различных элементов в единый коллаж.
Я искренне надеюсь, что вы прочитали это руководство и получили хоть какую-то полезную для себя информацию. Спасибо за внимание.
-
-
28.11.2008 в 13:27-
-
28.11.2008 в 13:49-
-
28.11.2008 в 13:51-
-
28.11.2008 в 13:52Дада, я подумал так же когда увидел сие творение))
-
-
28.11.2008 в 13:59Зато теперь не надо будет вспоминать, где какая ссылка) Сразу пнул пользователя, подсказал раздел руководства и пусть что хочет, то и делает
-
-
28.11.2008 в 14:00здоровская весчь)
респект и уважение автору.
-
-
30.11.2008 в 20:19систематизированные знания по css. Даже если прочитав, я увижу, что все в принципе знаю - все равно супер