Початківцям веб-дизайнерам: як зробити обтікання картинки текстом
У цій статті ми розповімо вам про ті особливості HTML і CSS, які пов`язані з зображеннями. Ви дізнаєтеся, як вставити їх в HTML-документ. Також в статті наведена інформація про те, як змінити параметри малюнка і організувати обтікання картинки текстом.
Відео: How to create a text effect for a picture
Спочатку - про вставці зображення. Для цього існує тег "img", у якого є декілька атрибутів. Основний з них - "src". У ньому зберігається адреса, з якого браузер зможе вставити картинку. Можна вказати шлях до зображення, уже збереженого в комп`ютері, або дати посилання на веб-ресурс.
Відео: CorelDRAW X5 для початківців. Обтікання тексту (5.8)
Наступна важлива пара атрибутів - "width" (Ширина) і "height" (Висота). Вони використовуються для того, щоб вручну змінити розміри картинки (корисна опція для розтягування і стиснення зображення).
Далі йдуть параметри "hspace" і "vspace" (Відстань від зображення до навколишнього його тексту). Зрозуміло, що "hspace" - Горизонтальний відступ, а "vspace" - Вертикальний.
Відео: Основи Photoshop для веб-дизайнера Урок 4. Як підібрати фотографії для сайту. Правила та сервіси
У тега є такі атрибути, як "alt" і "title". Вони схожі між собою, так як призначенням їх є опис картинки. але в "title" прописується текст, який показується при наведенні мишки на зображення, а буквене значення атрибута "alt" відображається в тому випадку, якщо картинку завантажити не вдалося.
Існує ще кілька специфічних атрибутів, присутніх у більшості тегів. це "accesskey", "class", "id" і "style". "Accesskey" задає поєднання клавіш, за допомогою якого здійснюється доступ до об`єкта. "Class" і "id" - Параметри, пов`язані з CSS. Вони описують те, до якого класу належить картинка (або її ідентифікатор). "Style" - Атрибут тексту, що дозволяє задати вбудований CSS-стиль зображення.
Одним з параметрів, які задають зовнішній вигляд картинки, є "border". Він визначає товщину рамки навколо об`єкта і може бути заданий будь-яким цілим позитивним числом (в пікселях).
Наступний атрибут - "align". Він описує обтікання картинки текстом. Цей параметр може приймати значення "bottom", "middle", "left", "right" і "top". Кожне із значень визначає то, де буде знаходитися картинка щодо тексту. Наприклад, при значенні "middle" середина зображення буде вирівнюватися по нижній межі тексту, а при "left" - Об`єкт буде знаходитися по ліву сторону від тексту. Але це тільки один із способів задати обтікання картинки текстом - HTML.
Є й інший потужний інструмент - CSS (значно більш універсальний). З його допомогою можна набагато ефективніше поставити атрибути тега, в тому числі і обтікання картинки текстом. CSS дозволяє визначити параметри не тільки конкретного об`єкта, а й усіх йому подібних. Наприклад, якщо ви хочете задати відступи всіх картинок в документі рівними десяти пикселям, то досить підключити до нього CSS-файл з однієї-єдиної рядком: "img {margin: 10px 10px 10px 10px; }" (На практиці лапки не потрібні!).
А обтікання картинки текстом, наприклад, по лівому краю задається так: "img {align: left; }".
До речі, для додавання CSS-коду зовсім не доведеться писати його в файлі. Для цього в HTML передбачений тег "style", В який можна вставляти CSS-код. Але він буде працювати тільки для даного документа (якщо потрібно додати один і той же код в кілька HTML-файлів, то варто створити окрему таблицю стилів).
Відео: Створюємо картинку з робочим простором веб дизайнера
Тепер ви зможете "розбавити" сайт зображеннями, скориставшись корисними властивостями тега, який за це відповідає. Сміливо використовуйте зміна розмірів або обтікання картинки текстом. Веб-сторінки без графічних складових - досить сумне видовище, чи не так?
