05.09.2013 - 21:08
Зібравши вчора багато критичних коментарів з приводу моєї любові до візуального представлення інформації, зокрема, до того, що я запропонував візуально представляти, сьогодні продовжу тему, але в більш конструктивному руслі. І тут мене закритикувати не вийде, бо HTML я знаю краще, ніж психологію. І питання полягатиме не в тому, що представляти у візуальній формі — це я залишу на ваш вибір, а сам розкажу, як це зробити.
Отже, мова сьогодні піде про вставлення зображень у запис блогу. Навіть не просто вставлення — тицьнути на кнопку у візуальному редакторі може кожен, а про те, як можна налаштувати вигляд зображення, його розташування та інші параметри. Варто сказати, що дані поради працюють і в коментарях ЖЖ — от тільки їх антиспам може заскрінити вашу писанину, помітивши як підозрілу.
Отже, вставивши за допомогою кнопки малюнок і перемкнувшись у режим HTML ми побачимо щось таке:
<img alt="_DSC0120" height="530" src="http://ic.pics.livejournal.com/thepiktor/34655138/4575/4575_original.jpg" title="_DSC0120" width="800" />Тег img, власне, відповідає за вставляння зображення у веб-документ і йому можна дописати іще цілу купу параметрів. Розглянемо ті, що є уже.
- src — зрозуміло, що це посилання на вашу картинку.
- width та height — масштабування зображення за шириною та висотою. Якщо не писати цих параметрів, то картинка буде показана такою, як вона є. Якщо вказати один із цих параметрів, то інший буде змінений браузером так, щоб зберегти пропорції. Якщо вказати обидва, то пропорції можуть бути порушені.
- alt — заміщуючий напис — ви його побачите на сторінці, якщо зображення з якихось причин не завантажиться.
Наприклад, можна написати "ImageShack нехай горить у топці" і, якщо зображення не покажеться, всі дізнаються, чому це сталося.Пошуковики за alt можуть індексувати ваші малюнки, тому вказуйте те, що на них зображено, якщо вас хвилює хоч якась релевантність пошуку вашого контенту. - title — заголовок зображення, з’явиться у вигляді спливаючої підказки (tooltip) під курсором миші. Так, як на зображенні нижче.
Але не будемо зупинятися на тому, що є — допишемо іще деякі параметри, наприклад align, що дозволить приліпити зображення до лівого чи до правого краю так, щоб весь інший текст його обтікав.
<img src='/files/2013/img_tag/chapaev_bust.jpg' alt='Погруддя Чапаєва' align="right" width="200">Цьому параметру можна надати значень left та right для вирівнювання у відповідну сторону, а можна і top, middle та bottom, якщо ви вставляєте маленьку картинку прямо в текст і хочете вирівняти її відносно ліній текстового рядка.
Іще один головний нюанс полягає у параметрах hspace та vspace, що дозволяють задати у пікселах горизонтальні та вертикальні відступи, щоб ваше зображення не прилипло до тексту — це актуально якраз при обтіканні і використано для погруддя Василя Івановича Чапаєва, що ви бачите справа.
Особисто я часто користуюся засобами каскадних таблиць стилів для керування показом зображення — для цього я заключаю тег img у контейнер div:
<div><img src="/files/2013/img_tag/commandor_yacht.jpg" alt="Яхта Командор"></div>До тегу div у відкриваючій частині дописую параметр style="", в якому можу писати параметри CSS — вони дають більше можливостей для оформлення. Наприклад, для картинки можна зробити гарну рамочку із заокругленими кутами, десь так:
<div style="border: 2px solid darkred; border-radius: 10px; padding: 10px; display:inline-block;"><img src='/files/2013/img_tag/commandor_yacht.jpg' alt='Яхта Командор' width="500"></div><div style="clear:both;"></div>
Пояснюю, що я тут написав:
- У border ми написали товщину (2px), стиль (solid — суцільний, dotted — пунктир, none — невидимий) і колір (замість darkred можна написати інший колір звідси.
- border-radius можна упустити, якщо вам не потрібні заокруглення.
- padding — внутрішні відступи, щоб рамка не прилипла до картинки всередині.
- display: inline-block; — одна невелика хитрість, пов’язана із тим, що контейнер div типово займатиме усю доступну ширину на сторінці, навіть якщо картинка буде маленькою. Щоб рамка пристосувалася до розміру зображення, потрібно ось це написати. Можна і не писати.
Якщо ви захочете в таку красиву рамку вставити не фотографію, а текст — то однаково, що там у ній. Якщо вам не подобаються заокруглені краї, то для вас можуть бути інші варіанти, наприклад, тінь, чи виділення кольоровим фоном. Наприклад, ось такий варіант:
<div style="border: 1px solid darkred; padding: 10px; display: inline-block; box-shadow: 0 0 10px gray;"><img src='/files/2013/img_tag/duck_swims.jpg' alt='Качка в Софіївці' width="500"></div>
За допомогою тіні можна ніби припідняти блок із картинкою над рівнем сторінки. Це досягається написанням у style="" параметра box-shadow 0 0 10px gray; Перші два нулі — це зміщення тіні відносно контуру, можна її посунути, наприклад, вниз і вправо, тоді буде враження, що світло світить зверху зліва. Товщина тіні — третя цифра, ну і колір із тої-ж таблиці.
На останок я подумав, що ви захочете підписати ваше зображення, що можна зробити, розташовуючи між img та закриваючим div іще одну пару div із своїм style. Пробуємо:
<div style="border: 1px solid black; padding: 10px; display: inline-block; box-shadow: 0 0 10px gray;"><img src='/files/2013/img_tag/sofiivka_boat.jpg' alt='Човен з туристами' width="500"><div style="font-size: 10pt; font-style:italic;">Човен з туристами на нижньому озері в парку Софіївка.</div></div>
Човен з туристами на нижньому озері в парку Софіївка.
За допомогою font-size ми зробили розмір шрифту в 10 пунктів (pt, не px — зверніть увагу), а за допомогою font-style — нахиленим (italic). На останок варто сказати, що раніше у ЖЖ було можна використовувати параметр class, що дозволяв ось ці всі коди винести в налаштування журналу і легко використовувати в кожному дописі. Якщо у вас є стенделон, то такий варіант якраз можливий.
Ну ось і все на сьогодні. Сподіваюся, що вам більше сподобається такий конструктивний допис про оформлення дописів у блозі, ніж срач на тему психології — а ні, то розведу іще. :-) Можете задавати запитання, що виходять за рамки написаного тут. Не перемикайтеся.