Як вставити картинки в рядок.

При створенні або редагуванні текстів на сайті часто виникає необхідність вставити якесь зображення в рядок. Це дозволяє надати статті більш привабливий вигляд і інформативність. На сайтах, що працюють на системах управління контентом (CMS), мається візуальний редактор текстів, за допомогою якого можна додавати на сторінки свого ресурсу як текстову, так і графічну інформацію.
Вам знадобиться
  • - доступ до панелі управління сайтом;
  • - візуальний редактор;
  • - редактор TinyMice.
Інструкція
1
Зайдіть в адміністративну панель управління сайтом і виберіть сторінку, яку збираєтеся редагувати. В деяких CMS достатньо клікнути на назві сторінки, щоб відкрився візуальний редактор, в інших випадках потрібно відзначити «галочкою» обрану сторінку і клацнути по кнопці «Редагувати».
2
У розпочатому редакторі клікніть мишею в тому місці тексту, де ви збираєтеся вставити картинку. Повинен з'явитися миготливий курсор у вигляді вертикальної риси.
3
У верхній панелі візуального редактора знайдіть іконку, при наведенні на яку з'явиться спливаюча підказка «Вставити зображення», і клацніть по ній. Зазвичай така іконка присутня у вигляді картинки з деревом.
4
У новому вікні, у вкладці «Параметри зображення» правіше поля «Адреса» (в деяких редакціях - URL) натисніть на кнопку або іконку «Перегляд», - відкриється вікно управління папкою, в якій за замовчуванням зберігаються всі файли зображення для вашого сайту. Внизу цього вікна присутні дві кнопки: «Обзор» і «Завантажити». Натиснувши «Обзор», виберіть картинку для завантаження зі свого комп'ютера. Далі клацніть мишкою на кнопку «Завантажити», - вибрана картинка повинна з'явитися в папці збережених зображень.
5
Клацніть на який з'явився новому зображенні і натисніть кнопку «Вставити». Картинка повинна з'явитися в тому місці текстового рядка, де ви спочатку встановили миготливий курсор.
6
Якщо зображення занадто велике і ви хочете зробити його менше, то виділіть мишею щойно вставлену картинку і у вкладці «Параметри зображення» знайдіть рядок «Розмір» з двома полями. У першому полі вказана ширина картинки в пікселях, у другому - висота. Змінюючи і варіюючи два ці параметра, добийтеся бажаного результату.
Зверніть увагу
Не вкладати дуже «важкі» картинки (до 100-150 Кб - найбільш оптимальний варіант), так як не у всіх відвідувачів вашого сайту може бути швидкісний інтернет. Зображення за 1-2 Мб можуть не дочекатися своєї підкачки - сторінка сайту буде закрита до її повного завантаження.
Мова html не досконалий і має ряд істотних недоліків. Для того щоб прив'язати картинку до певного місця сторінки, краще для цього вставити її за допомогою таблиці. В цьому випадку зображення буде вважатися фоном і поверх його можна помістити текст.
Інструкція
1
Спочатку необхідно створити таблицю, якщо її ще немає. Ця дія відбувається в атрибуті . Для цього використовуються теги (закриває тег обов'язковий): • - таблиця; • - рядок; •
- колонка.Основние додаткові атрибути: • Border - кордон; • Align - вирівнювання по горизонталі; • Valign - вирівнювання по вертикалі; • Bordercolor - колір рамки; • Width - ширина; • Height - висота.Сінтаксіс таблиці 2X2 без рамки і лівостороннім/правостороннім вирівнюванням вмісту:
Вміст 1-й осередки Вміст 2-й осередки
Вміст 3-й осередки Вміст 4- й осередку
2
Картинку потрібно прописувати після тега
. Якщо вставити зображення в першу комірку таблиці, представленої вище, то вийде:
Вміст 2-й осередки
Вміст 3-й осередки Вміст 4-й осередки
Додаткові атрибути: • Width - ширина; • Height - висота; • Alt - альтернативний текст, який буде відображатися у користувача, якщо у нього відключена функція перегляду картинок; • Align - вирівнювання по горизонталі; • Valign - вирівнювання по вертикалі; • Title - підпис до зображення.
3
Використовувати зображення можна як посилання. Для цього його досить облачити до відповідного тег: В контексті таблиці це виглядатиме так:
Вміст 2-й осередки
Вміст 3-й осередки Вміст 4-й осередки
4
Додаткові можливості зображень. 1. Зміна картинки на колір при наведенні на неї мишею і після зміни місця розташування курсора: onMouseOver="this.style.background = '# номер кольору'" onMouseOut="this.style.background = '# номер кольору'" 2. Зміна картинки на інше зображення при наведенні мишею: onmouseover="this.src='images/1.gif"'" onmouseout="this.src='images/2.gif"'" 3. Вставка обертової каруселі з картинок в комірку таблиці (значення можна міняти):
Зверніть увагу
Це урок про те, як вставити картинку в HTML, як її оформити, як зробити обтікання картинки текстом і т.д. Адже відомо, що зображення роблять сайт більш привабливим і відмінним від інших ресурсів, тому вміння використовувати тег «IMG» і його атрибути досить придасться в сучасному Інтернеті. Але, головне тут - почуття міри! Надлишок графіки викличе обваження html-сторінки і, відповідно, збільшить час її завантаження.
Корисна порада
Якщо ця область буде не відповідати реальному розміру картинки, яку ви хочете вставити, то малюнок буде відповідно розтягнутий або звужений, до заданого в html тезі Img розміру. Проте, не слід використовувати це спосіб, скажемо, для зменшення розміру вставляється в Html документ малюнка. Краще попередньо змінити розмір картинки в графічному редакторі, а вже потім вставляти картинки в Html документ через будь-який зручний вам Html редактор коду.