6. Елементи дизайну щоденника.
.left - коли меню розташовується зліва від постів
.right - меню праворуч.
.journal_list
.block_design - якщо дизайн блоковий.
Елементи меню (#side). Фактично це все посилання, але для кожного елемента можна прописати окремі властивості. Список таких елементів збирали ще Tex. Zolotzzze =) і інші, я ж розміщу його сюди в повному вигляді окремо.
Отже, практично з усіма елементами і класами сторінки ми познайомилися, тепер можна для кожного з них ставити властивості в 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. Пишеться тільки так, а не інакше: - після властивості пробіл і! Important і ТІЛЬКИ ПОТІМ крапка з комою.
Все про цей тег читаємо на htmlbook.ru/css/!important.html
a - використовується для опису посилань. : Hover - показує, що описується момент, коли курсор миші знаходиться над елементом.
Як зробити елемент невидимим? Допоможе властивість «display: none». Використання такої конструкції прибирає елемент з документа, так що місце під нього не резервується, пам'ятайте про це.
Властивість display також підтримує інші значення, наприклад block - часто використовується в коді щоденників. Почитайте про використання тут - htmlbook.ru/css/display.html і зверніть увагу на підтримуючі браузери.
Фон. Фон можна застосувати для будь-якого блоку, ось як це робиться:
Картинка для фону береться ТІЛЬКИ з вашої бібліотеки зображень. Завантажте картинку туди, але пам'ятайте - її «вага» в кілобайтах - запорука зручності використання вашого щоденника. Чим менше вага, тим краще для читача, тому постарайтеся доводити кількість кілобайт ваших картинок до мінімуму.
Якщо у вас є Фотошоп, значить повинен бути і ImageReady - пакет якраз таки призначений для оптимізації зображень. Відкривши в Фотошопі картинку, виберіть замість пункту «Зберегти як», пункт «Зберегти для мережі» ( "Save for web"), розташований відразу після. Відкриється вікно, в якому ви можете виставити параметри оптимізованої картинки. Є кілька стандартних установок (Preset), що мають вже підібрані параметри оптимізації, наприклад GIF з різним числом квітів або Jpeg в трьох якостях. Найнижче якість означає найменший розмір, превью допомагає побачити оптимізовану картинку, згідно з якою ви самі можете виставити повзунок якості так, як вам треба. А під картинкою знаходиться її розмір в оптимізованому вигляді (в кілобайтах), який змінюється автоматично при зміні якості - стежте за ним. Скажімо так - картинка в jpeg розмірами 1000х200 в середньому повинна важити кілобайт 50 - відштовхуйтесь від цієї цифри. Якщо у вашій картинці кольорів мало і це не фото, то виставте тип стиснення GIF з різною кольоровою гамою, це зовсім зменшить картинку. Зовсім маленькі картинки теж краще робити в gif.
Якщо ж Фотошопа у вас немає зовсім, то скачайте оптимізатор зображень Ashampoo Photo Optimizer. розберіться, як він працює і зменшуйте картинки в ньому.
Програму для ознайомчої роботи ви можете завантажити тут:
rapidshare.com/files/72805523/Ashampoo.Photo.Op.
Пароль до архіву - netzor.org
Так от, повернемося до наших баранів:
Завантаживши картинку в бібліотеку, ви побачите посилання на неї - URL. Скопіюйте посилання та використовуйте її в наступному коді:
Дизайн фіксованої ширини по центру, зліва і справа.
Це - стандартна схема оформлення щоденника, яку багато хто використовує, і яка зручна і хороша. Ось тут 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 змусить основний блок завжди займати 80% екрану, а # page-t покаже, що поле з постами буде займати 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. Це властивість показує ширину, менше якої елемент бути не може, і прописуємо його так. Тоді при зменшенні сторінки по ширині елемент вже не буде менше заданого значення, замість цього з'явиться скроллбар. Є ще max-width. де прочитати про нього, ви вже повинні запам'ятати.
8. Більш складні і хитромудрі прийоми оформлення.
Один елемент поверх іншого. Можна зробити так, щоб один елемент перебував як би ближче до користувача, ніж інші, і якщо елементи накладаються один на інший по позиції, то цей елемент буде як би «вище».
Використовується властивість z-index. Все дуже докладно описано тут - htmlbook.ru/css/z-index.html
Змінити стиль горизонтальних смуг між постами. Обговорення тут - diarycss.diary.ru/p23118546.htm
Якщо потрібно задати фіксований розмір елемента, але його вміст «не влазять» у цей розмір. можна скористатися скроллбар - diarycss.diary.ru/p41016364.htm#
Читаємо про overflow тут - htmlbook.ru/css/overflow.html
Якщо ви ще не зрозуміли, як прибрати деякі елементи (а я писав), то diarycss.diary.ru/p25244058.htm
Меню, як у Tex. Якщо вам подобається таке меню, яке приховує до пори до часу непотрібні посилання, то обговорювали його тут - diarycss.diary.ru/p40633222.htm
Якщо посилання потрібно розмістити в один рядок. а вони вперто відображаються в дві або більше, то задавайте для них властивість width! Це зробить їх ширину не залежить від ширини батьківського об'єкта.
Я щиро сподіваюся, що ви прочитали цей посібник і отримали хоч якусь корисну для себе інформацію. Дякуємо за увагу.